.band{padding-block:clamp(3.5rem,7vw,6.5rem);position:relative}
.band--tight{padding-block:clamp(2.5rem,4.5vw,4rem)}
.band--tint{background:var(--tint)}
.band--blue{background:var(--blue-800);color:#fff}
.band--deep{background:var(--blue-900);color:#fff}

/* ---- Section heads ------------------------------------------------------- */
.shead{display:grid;gap:1rem;margin-bottom:clamp(2rem,3.5vw,3rem);max-width:62ch}
.shead--row{max-width:none}
@media(min-width:860px){.shead--row{display:flex;align-items:flex-end;
justify-content:space-between;gap:2rem}}
.shead__tx{display:grid;gap:1rem;max-width:62ch}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--blue-500);margin:0}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--coral);border-radius:2px}
.band--blue .eyebrow,.band--deep .eyebrow{color:var(--blue-300)}
.shead h2{font-size:var(--t-3xl);text-wrap:balance}
.shead p{color:var(--grey);font-size:var(--t-lg);margin:0}
.band--blue .shead p,.band--deep .shead p{color:rgba(255,255,255,.76)}
.lede{font-size:var(--t-lg);color:var(--grey);max-width:var(--measure)}

/* ---- Figure strip -------------------------------------------------------- */
.figs{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:560px){.figs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.figs{grid-template-columns:repeat(4,1fr)}}
.fig{background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--r-card);
padding:clamp(1.25rem,2.2vw,1.75rem);display:grid;gap:.4rem;box-shadow:var(--sh-1)}
.fig__v{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:1;
font-size:clamp(1.75rem,3vw,2.5rem);margin:0;color:var(--blue-700);font-variant-numeric:tabular-nums}
.fig__v span{font-size:.44em;font-weight:600;color:var(--grey);margin-left:.2em}
.fig__c{margin:0;font-size:.875rem;color:var(--grey);line-height:1.45}

/* ---- System cards: icon, title, description ------------------------------ */
.sys{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:620px){.sys{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.sys{grid-template-columns:repeat(3,1fr)}}
.sys__card{background:var(--blue-100);border-radius:var(--r-card);
padding:clamp(1.5rem,2.4vw,2rem);display:grid;gap:.85rem;align-content:start;
text-decoration:none;color:inherit;border:1px solid transparent;
transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.sys__card:hover{background:var(--paper);border-color:var(--rule);
transform:translateY(-4px);box-shadow:var(--sh-2)}
.sys__ic{width:52px;height:52px;border-radius:14px;background:var(--paper);
display:grid;place-items:center;color:var(--blue-500);box-shadow:var(--sh-1);
transition:background .3s var(--ease),color .3s}
.sys__card:hover .sys__ic{background:var(--blue-700);color:#fff}
.sys__ic svg{width:27px;height:27px}
.sys__card h3{font-size:var(--t-xl);letter-spacing:-.025em}
.sys__card p{margin:0;color:var(--grey);font-size:.9375rem;line-height:1.6}
.sys__meta{font-size:.8125rem;font-weight:700;color:var(--blue-700);letter-spacing:.02em}
.sys__go{display:inline-flex;align-items:center;gap:.4rem;font-size:.9375rem;font-weight:600;
color:var(--blue-700);margin-top:.15rem}
.sys__go svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.sys__card:hover .sys__go svg{transform:translateX(4px)}

/* ---- Client logo strip --------------------------------------------------- */
.logos{display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);
border-radius:var(--r-card);overflow:hidden}
@media(min-width:520px){.logos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.logos{grid-template-columns:repeat(4,1fr)}}
.logos__i{background:var(--paper);padding:1.75rem 1.5rem;display:grid;place-items:center;
min-height:132px;transition:background .3s var(--ease)}
.logos__i:hover{background:var(--tint)}
.logos__i img{max-height:74px;width:auto;max-width:100%;
filter:saturate(.25) opacity(.72);transition:filter .35s var(--ease)}
.logos__i:hover img{filter:none}

/* ---- Source cards: photo on top, text under, on a blue band -------------- */
.src{display:grid;gap:clamp(1.25rem,2.2vw,1.75rem)}
@media(min-width:680px){.src{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.src{grid-template-columns:repeat(3,1fr)}}
.src__card{background:var(--paper);border-radius:var(--r-card);overflow:hidden;
display:grid;align-content:start;text-decoration:none;color:var(--ink);
transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.src__card:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.src__img{aspect-ratio:16/10;overflow:hidden;background:var(--blue-100)}
.src__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.src__card:hover .src__img img{transform:scale(1.05)}
.src__tx{padding:clamp(1.35rem,2.2vw,1.75rem);display:grid;gap:.6rem}
.src__tx h3{font-size:var(--t-xl)}
.src__tx p{margin:0;color:var(--grey);font-size:.9375rem;line-height:1.6}
.src__go{display:inline-flex;align-items:center;gap:.45rem;font-size:.9375rem;
font-weight:600;color:var(--blue-700);margin-top:.2rem}
.src__go svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.src__card:hover .src__go svg{transform:translateX(5px)}

/* ---- Photo grid ---------------------------------------------------------- */
.shots{display:grid;gap:clamp(1rem,1.8vw,1.35rem)}
@media(min-width:580px){.shots{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.shots{grid-template-columns:repeat(3,1fr)}}
.shot{margin:0;position:relative;overflow:hidden;border-radius:var(--r-card);
background:var(--blue-900)}
.shot img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;
transition:transform .6s var(--ease),opacity .4s}
.shot:hover img{transform:scale(1.05);opacity:.82}
.shot figcaption{position:absolute;inset:auto 0 0 0;padding:2.75rem 1.25rem 1.15rem;
font-size:.8125rem;line-height:1.45;color:#fff;font-weight:500;
background:linear-gradient(to top,rgba(6,41,61,.94),rgba(6,41,61,0));
opacity:0;transform:translateY(8px);
transition:opacity .35s var(--ease),transform .35s var(--ease)}
.shot:hover figcaption,.shot:focus-within figcaption{opacity:1;transform:none}
@media(hover:none){.shot figcaption{opacity:1;transform:none}}

/* ---- Split, frame, prose ------------------------------------------------- */
.split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:repeat(2,1fr)}
.split--55{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.split--top{align-items:start}}
.frame{border-radius:var(--r-card);overflow:hidden;background:var(--paper);
box-shadow:var(--sh-2);border:1px solid var(--rule-soft)}
.frame img{width:100%;height:auto}
.frame figcaption{padding:1rem 1.25rem;font-size:var(--t-sm);color:var(--grey);
border-top:1px solid var(--rule-soft);background:var(--paper)}
.prose{max-width:var(--measure)}
.prose h2{font-size:var(--t-2xl);margin:2.25rem 0 .85rem}
.prose>h2:first-child{margin-top:0}
.prose h3{font-size:var(--t-xl);margin:1.85rem 0 .7rem}
.prose p{color:var(--grey)}
.prose ul{display:grid;gap:.65rem;margin:0 0 1.25rem}
.prose ul li{padding-left:1.85rem;position:relative;color:var(--grey)}
.prose ul li::before{content:"";position:absolute;left:0;top:.46em;width:18px;height:18px;
border-radius:50%;background:var(--blue-100)}
.prose ul li::after{content:"";position:absolute;left:5px;top:.72em;width:8px;height:5px;
border-left:2px solid var(--blue-700);border-bottom:2px solid var(--blue-700);
transform:rotate(-45deg)}
.prose strong{color:var(--ink);font-weight:600}
.band--blue .prose p,.band--blue .prose ul li,.band--deep .prose p,.band--deep .prose ul li{
color:rgba(255,255,255,.78)}
.band--blue .prose ul li::before,.band--deep .prose ul li::before{background:rgba(255,255,255,.16)}
.band--blue .prose ul li::after,.band--deep .prose ul li::after{border-color:#fff}
.band--blue .prose strong,.band--deep .prose strong{color:#fff}

/* ---- Feature list (checks) ----------------------------------------------- */
.checks{display:grid;gap:.75rem}
@media(min-width:620px){.checks--2{grid-template-columns:repeat(2,1fr)}}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9375rem;color:var(--grey)}
.checks svg{width:21px;height:21px;flex-shrink:0;color:var(--blue-500);margin-top:2px}
.band--blue .checks li{color:rgba(255,255,255,.8)}
.band--blue .checks svg{color:var(--blue-300)}

/* ---- Spec table ---------------------------------------------------------- */
.spec{width:100%;border-collapse:collapse;font-size:.9375rem}
.spec caption{text-align:left;font-family:var(--display);font-weight:700;font-size:1rem;
color:var(--ink);padding-bottom:.75rem}
.spec th,.spec td{text-align:left;padding:.8rem 0;border-bottom:1px solid var(--rule-soft);
vertical-align:top}
.spec th{font-weight:500;color:var(--grey);width:46%}
.spec td{font-weight:600}
.band--blue .spec caption,.band--blue .spec td{color:#fff}
.band--blue .spec th{color:rgba(255,255,255,.72)}
.band--blue .spec th,.band--blue .spec td{border-color:rgba(255,255,255,.14)}

/* ---- Capability tiles ---------------------------------------------------- */
.caps{display:grid;gap:clamp(1rem,1.8vw,1.35rem)}
@media(min-width:560px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.caps{grid-template-columns:repeat(4,1fr)}}
.cap{background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--r-card);
padding:clamp(1.25rem,2.2vw,1.65rem);display:grid;gap:.5rem;align-content:start;
box-shadow:var(--sh-1)}
.cap h3{font-size:1.0625rem;letter-spacing:-.02em}
.cap p{margin:0;font-size:.9375rem;color:var(--grey);line-height:1.55}
.band--blue .cap,.band--deep .cap{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
box-shadow:none}
.band--blue .cap h3,.band--deep .cap h3{color:#fff}
.band--blue .cap p,.band--deep .cap p{color:rgba(255,255,255,.76)}

/* ---- Cards (services) ---------------------------------------------------- */
.cards{display:grid;gap:clamp(1rem,1.8vw,1.5rem)}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--r-card);
padding:clamp(1.5rem,2.4vw,2rem);display:grid;gap:.85rem;align-content:start;
box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.card h3{font-size:var(--t-xl)}
.card p{color:var(--grey);margin:0;font-size:.9375rem}
.card ul{display:grid;gap:.5rem;margin-top:.15rem}
.card li{font-size:.9375rem;color:var(--grey);padding-left:1.15rem;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;
border-radius:50%;background:var(--blue-300)}

/* ---- FAQ ----------------------------------------------------------------- */
.faq{display:grid;gap:.85rem;max-width:88ch}
.faq details{background:var(--paper);border:1px solid var(--rule-soft);
border-radius:var(--r-card);box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow .3s}
.faq details[open]{box-shadow:var(--sh-2)}
.faq summary{cursor:pointer;list-style:none;padding:1.25rem 3.25rem 1.25rem 1.5rem;
font-family:var(--display);font-weight:600;font-size:var(--t-lg);letter-spacing:-.02em;
position:relative;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-700)}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:1.5rem;top:50%;
background:var(--blue-700);border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.faq summary::after{width:14px;height:2px;transform:translateY(-50%)}
.faq summary::before{width:2px;height:14px;right:calc(1.5rem + 6px);transform:translateY(-50%)}
.faq details[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq details>div{padding:0 1.5rem 1.4rem;max-width:var(--measure);color:var(--grey)}
.faq details>div p:last-child{margin-bottom:0}

/* ---- Contact and form ---------------------------------------------------- */
.contact{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(min-width:960px){.contact{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.form{background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--r-card);
padding:clamp(1.5rem,3vw,2.25rem);display:grid;gap:1.15rem;box-shadow:var(--sh-2)}
.form__row{display:grid;gap:1.15rem}
@media(min-width:560px){.form__row--2{grid-template-columns:repeat(2,1fr)}}
.field{display:grid;gap:.45rem}
.field label{font-size:.875rem;font-weight:600}
.field .req{color:var(--coral)}
.field input,.field select,.field textarea{font-family:var(--text);font-size:var(--t-base);
color:var(--ink);background:var(--tint);border:1.5px solid var(--rule-soft);
border-radius:var(--r-sm);padding:.85em 1em;width:100%;
transition:border-color .2s,background .2s,box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
border-color:var(--blue-500);background:var(--paper);box-shadow:0 0 0 4px rgba(28,134,196,.14)}
.field [aria-invalid=true]{border-color:var(--coral);box-shadow:0 0 0 4px rgba(240,56,53,.12)}
.field .err{font-size:var(--t-sm);color:var(--coral-deep);font-weight:600;margin:0}
.field .err:empty{display:none}
.form__consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.875rem;color:var(--grey)}
.form__consent input{width:19px;height:19px;margin-top:3px;accent-color:var(--blue-700);flex-shrink:0}
.form__status{padding:1rem 1.15rem;font-size:.9375rem;font-weight:500;margin:0;
border-radius:var(--r-sm);background:var(--blue-100);color:var(--blue-800)}
.form__status[hidden]{display:none}
.form__status.is-err{background:var(--coral-wash);color:var(--coral-deep)}
.hpot{position:absolute;left:-9999px;opacity:0;height:0;width:0}

.cdetails{display:grid;gap:1rem}
.cdetail{background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--r-card);
padding:1.25rem 1.5rem;display:flex;gap:1rem;align-items:flex-start;box-shadow:var(--sh-1)}
.cdetail__ic{width:42px;height:42px;border-radius:12px;background:var(--blue-100);
display:grid;place-items:center;color:var(--blue-700);flex-shrink:0}
.cdetail__ic svg{width:21px;height:21px}
.cdetail dt{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--grey-2);margin-bottom:.25rem}
.cdetail dd{margin:0;font-size:var(--t-base);font-weight:500}
.cdetail dd a{text-decoration:none;color:var(--blue-700);transition:color .2s}
.cdetail dd a:hover{color:var(--coral)}

/* ---- Full-bleed closing call to action ----------------------------------- */
.cta{position:relative;isolation:isolate;overflow:hidden;
padding-block:clamp(4rem,8vw,7rem);color:#fff;text-align:center}
.cta__media{position:absolute;inset:0;z-index:-2}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(6,41,61,.86)}
.cta h2{font-size:var(--t-3xl);max-width:20ch;margin-inline:auto;text-wrap:balance}
.cta p{margin:1.15rem auto 0;color:rgba(255,255,255,.82);max-width:54ch;font-size:var(--t-lg)}
.cta__btns{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:2.25rem}

/* ---- Page hero (interior pages) ------------------------------------------ */
.phero{position:relative;isolation:isolate;overflow:hidden;background:var(--blue-900);
padding-top:calc(var(--nav-h) + clamp(2.5rem,5vw,4.5rem));
padding-bottom:clamp(2.5rem,5vw,4.5rem);color:#fff}
.phero__media{position:absolute;inset:0;z-index:-2;opacity:.3}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(100deg,var(--blue-900) 10%,rgba(6,41,61,.72) 100%)}
.phero h1{font-size:var(--t-3xl);max-width:21ch;text-wrap:balance}
.phero p{margin-top:1.25rem;font-size:var(--t-lg);color:rgba(255,255,255,.8);max-width:58ch}
.crumbs{font-size:var(--t-sm);color:rgba(255,255,255,.62);margin-bottom:1.25rem}
.crumbs a{text-decoration:none;transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs span{margin-inline:.45rem;color:rgba(255,255,255,.4)}

/* ---- Footer: centred, like the reference --------------------------------- */
.ftr{background:var(--blue-900);color:rgba(255,255,255,.72);
padding-block:clamp(3rem,6vw,4.5rem) 2rem;text-align:center}
.ftr__top{display:grid;justify-items:center;gap:1rem;
padding-bottom:clamp(2.5rem,4vw,3.5rem);border-bottom:1px solid rgba(255,255,255,.12)}
.ftr__top .brand{justify-content:center}
.ftr__top .brand__nm{color:#fff}
.ftr__top .brand__sb{color:var(--blue-300)}
.ftr__contact{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;justify-content:center;
font-size:1.0625rem;font-weight:600}
.ftr__contact a{color:var(--blue-300);text-decoration:none;transition:color .2s}
.ftr__contact a:hover{color:#fff}
.ftr__grid{display:grid;gap:2.5rem;padding-block:clamp(2.5rem,4vw,3.5rem);text-align:center}
@media(min-width:680px){.ftr__grid{grid-template-columns:repeat(3,1fr)}}
.ftr h2{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
margin-bottom:1.15rem;font-family:var(--text);font-weight:700}
.ftr ul{display:grid;gap:.7rem}
.ftr a{text-decoration:none;font-size:.9375rem;transition:color .2s}
.ftr ul a:hover{color:var(--blue-300)}
.ftr__addr{font-size:.9375rem;line-height:1.7;margin:0 0 1rem}
.ftr__addr:last-of-type{margin-bottom:0}
.ftr__lbl{display:block;color:#fff;font-size:.6875rem;letter-spacing:.14em;
text-transform:uppercase;font-weight:700;margin-bottom:.3rem}
.ftr__bot{padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.12);
display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:center;
font-size:var(--t-sm);color:rgba(255,255,255,.52)}

.totop{position:fixed;right:22px;bottom:22px;z-index:80;width:48px;height:48px;
background:var(--blue-700);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;
border-radius:50%;box-shadow:var(--sh-2);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .25s,visibility .25s,transform .25s,background .2s}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--coral)}

.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal{opacity:0;transform:translateY(16px);animation:revealFailsafe 0s linear 4s forwards}
.js .reveal.is-in{opacity:1;transform:none;animation:none}
@keyframes revealFailsafe{to{opacity:1;transform:none}}

/* ---- Mobile navigation --------------------------------------------------- */
@media(max-width:1023px){
.burger{display:block}
.nav{position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--paper);
border-bottom:1px solid var(--rule);box-shadow:var(--sh-2);
flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gut) 1.75rem;
max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
.nav a{padding:1rem 0;border-bottom:1px solid var(--rule-soft);font-size:1.0625rem;
color:var(--ink)!important}
.nav a::after{display:none}
.nav .btn{margin-top:1.35rem;justify-content:center}
.hdr__cta{display:none}}
@media(min-width:1024px){.nav .btn{display:none}}
@media(max-width:560px){
.brand__sb{display:none}
.brand__nm{font-size:.9375rem}
.brand__mk{width:34px;height:34px}
.hdr__in{gap:.75rem}}

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

@media print{.hdr,.totop,#boot,.cta,.burger{display:none!important}
body{background:#fff;color:#000}.band{padding-block:1.5rem}}