/* ==========================================================================
   Data Solutions Global

   The mosaic is the whole idea: a modular field of hard-edged blocks separated
   by gutters, in the client's own blue on paper. Every section is built from
   the same geometry, so the page reads as one field rather than a hero with a
   template bolted underneath.

   Motion is rationed. The hero field is always alive; card tiles wake when
   pointed at; and the split-block gesture — two halves sliding in from opposite
   sides — is reserved for the header's Contact button and the footer link
   lists. Everything else simply changes colour.

   Two rules hold it together:
     - Hierarchy is carried by type WIDTH, not by a second typeface. One
       grotesque (Archivo) worked from wdth 62 to 125.
     - Blocks meet on gutters, never on borders. Nothing floats, nothing has a
       drop shadow, and the corner radius is 0 — the mark is hard-cornered and
       the page follows it.
   ========================================================================== */

:root{
    --paper:  #EEEDE8;
    --sheet:  #F7F6F2;
    --sheet2: #FFFFFF;
    --ink:    #0B0B0C;
    --blue:   #010FF6;
    --blue-dk:#0109AE;
    --slate:  #585A61;   /* 6.4:1 on paper */
    --rule:   #D6D3CC;

    --dk-bg:   #0B0B0C;
    --dk-sheet:#141417;
    --dk-tx:   #F2F1EC;
    --dk-slate:#9A9CA4;  /* 7.4:1 on --dk-bg */
    --dk-rule: #26262A;

    --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

    --wrap:1340px;
    --gutter:clamp(1.1rem,3.4vw,2.6rem);
    --section:clamp(4.5rem,9vw,8rem);
    --cell:7px;

    --ease:cubic-bezier(.22,1,.36,1);
    --dur:.55s;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* The overscroll colour. Only the root's background paints the area a
   rubber-band pull reveals, and the page needs two different colours there:
   paper above the hero, ink below the footer. A viewport-fixed two-stop
   gradient gives both, because a pull at the top reveals canvas in the upper
   half and a pull at the bottom reveals it in the lower half. */
html{
    background:var(--paper);
    background-image:linear-gradient(to bottom,var(--paper) 0 50%,var(--dk-bg) 50% 100%);
    background-attachment:fixed;
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
}

body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font);
    font-size:1.0625rem;
    line-height:1.6;
    font-variation-settings:"wdth" 100,"wght" 400;
    -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}

a{color:inherit;text-decoration:none}
canvas,svg,img{display:block}
button{font:inherit;color:inherit;background:none;border:0}
input{font:inherit}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --------------------------------------------------------------------------
   Type — one family, hierarchy by width
   -------------------------------------------------------------------------- */

h1,h2,h3,h4{font-variation-settings:"wdth" 116,"wght" 800;line-height:.99;letter-spacing:-.028em}

h1{font-size:clamp(2rem,4.9vw,4.4rem);line-height:.95;letter-spacing:-.036em}
h1 span{display:block}
h1 .b{color:var(--blue)}

.h2{font-size:clamp(1.7rem,3.3vw,2.75rem);max-width:26ch}
.h3{font-size:clamp(1.1rem,1.5vw,1.32rem);font-variation-settings:"wdth" 112,"wght" 700}
.h4{font-size:1.04rem;font-variation-settings:"wdth" 110,"wght" 700}

/* the statement treatment: large, expanded, with the operative phrase in blue.
   This is where the writing is allowed to be loud. */
.pull{
    font-size:clamp(1.5rem,2.9vw,2.5rem);
    line-height:1.02;letter-spacing:-.03em;
    font-variation-settings:"wdth" 118,"wght" 800;
    max-width:22ch;
}
.pull em{font-style:normal;color:var(--blue)}

.intro{max-width:58ch;font-size:clamp(1rem,1.2vw,1.13rem);color:var(--slate)}
.intro + .intro{margin-top:.9rem}

p.body{color:var(--slate)}
p.body + p.body{margin-top:.9rem}

/* --------------------------------------------------------------------------
   Reveals
   -------------------------------------------------------------------------- */

.rise{opacity:0;transform:translateY(14px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rise.in{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   Buttons

   Most buttons just change colour — a split-block animation on every one of
   them turns the page into a fairground. The split gesture is reserved for two
   places where it earns attention: the header's Contact button (.btn-fx) and
   the footer link lists.
   -------------------------------------------------------------------------- */

.btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:.95rem 1.6rem;font-size:.94rem;letter-spacing:.02em;
    font-variation-settings:"wdth" 110,"wght" 700;
    cursor:pointer;
    transition:color .24s var(--ease),background-color .24s var(--ease),box-shadow .24s var(--ease);
}
.btn-p{color:#fff;background:var(--blue)}
.btn-p:hover,.btn-p:focus-visible{background:var(--ink)}
.btn-s{color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.btn-s:hover,.btn-s:focus-visible{color:#fff;background:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-sm{padding:.55rem 1.05rem;font-size:.85rem}

/* the one animated button: two halves sliding in from opposite sides */
.btn-fx{position:relative;overflow:hidden;isolation:isolate;background:var(--blue)}
.btn-fx > span{position:relative;z-index:2}
.btn-fx::before,.btn-fx::after{
    content:"";position:absolute;left:0;z-index:1;
    width:100%;height:50%;background:var(--ink);
    transform:translateX(-101%);
    transition:transform .4s var(--ease);
}
.btn-fx::before{top:0}
.btn-fx::after{bottom:0;transform:translateX(101%)}
.btn-fx:hover::before,.btn-fx:focus-visible::before,
.btn-fx:hover::after,.btn-fx:focus-visible::after{transform:translateX(0)}
.btn-fx:hover,.btn-fx:focus-visible{background:var(--blue)}

.acts{display:flex;flex-wrap:wrap;gap:var(--cell);margin-top:1.9rem}

/* email links: a quiet blue underline that fills on hover */
.ml{
    position:relative;display:inline-block;
    box-shadow:inset 0 -1px 0 var(--blue);
    transition:color .24s var(--ease),background-color .24s var(--ease);
}
.ml:hover,.ml:focus-visible{background:var(--blue);color:#fff}

/* --------------------------------------------------------------------------
   Header — absent at the top of the page, arrives once you scroll
   -------------------------------------------------------------------------- */

.hdr{
    position:fixed;inset:0 0 auto 0;z-index:60;
    padding-block:.8rem;
    background:color-mix(in srgb,var(--paper) 94%,transparent);
    backdrop-filter:blur(10px) saturate(130%);
    border-bottom:1px solid var(--rule);
    transition:transform .45s var(--ease);
}
/* the hero carries the brand, so the bar has no business being there yet */
body.has-hero .hdr{transform:translateY(-102%)}
body.has-hero .hdr.show{transform:none}

.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* The client's own logo file. It ships as blue with the lettering knocked out
   to transparency, so it sits on any ground unaltered — and on the dark footer
   brightness(0) invert(1) turns it white without needing a second asset. */
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{display:block;width:auto;height:44px}
.hero .brand img{height:clamp(74px,8.5vw,112px)}
.oc .brand img{height:38px}
.ftr .brand img{height:62px;filter:brightness(0) invert(1)}

.nav{display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.5rem)}
.nav a:not(.btn){
    font-size:.92rem;color:var(--slate);
    padding:.35rem 0;
    box-shadow:inset 0 -1px 0 transparent;
    transition:color .24s var(--ease),box-shadow .24s var(--ease);
}
.nav a:not(.btn):hover,.nav a:not(.btn):focus-visible{
    color:var(--ink);box-shadow:inset 0 -1px 0 var(--blue);
}

.burger{display:none;width:42px;height:42px;margin-right:-8px;cursor:pointer;align-items:center;justify-content:center}
.burger i{position:relative;width:20px;height:12px;display:block}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:100%;height:2px;background:var(--ink)}
.burger i::before{top:1px}
.burger i::after{top:9px}

/* --------------------------------------------------------------------------
   Offcanvas nav — a panel, not a dropdown hanging off nothing
   -------------------------------------------------------------------------- */

.oc{position:fixed;inset:0;z-index:80;visibility:hidden}
body.oc-open .oc{visibility:visible}
.oc-bd{
    position:absolute;inset:0;background:rgba(11,11,12,.55);
    opacity:0;transition:opacity .38s var(--ease);
}
body.oc-open .oc-bd{opacity:1}
.oc-p{
    position:absolute;top:0;right:0;bottom:0;
    width:min(89vw,390px);
    background:var(--paper);
    transform:translateX(101%);
    transition:transform .44s var(--ease);
    display:flex;flex-direction:column;
    padding:1.1rem;gap:var(--cell);
    overflow-y:auto;
}
body.oc-open .oc-p{transform:none}
.oc-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.4rem}
.oc-x{width:42px;height:42px;cursor:pointer;position:relative;flex:none}
.oc-x::before,.oc-x::after{content:"";position:absolute;left:11px;top:20px;width:20px;height:2px;background:var(--ink)}
.oc-x::before{transform:rotate(45deg)}
.oc-x::after{transform:rotate(-45deg)}
.oc-links{display:grid;gap:var(--cell)}
.oc-links a{
    background:var(--sheet);padding:.95rem 1.05rem;
    font-size:1.05rem;font-variation-settings:"wdth" 112,"wght" 700;
    transition:background-color .24s var(--ease),color .24s var(--ease);
}
.oc-links a:hover,.oc-links a:focus-visible{background:var(--blue);color:#fff}
.oc-foot{margin-top:auto;padding-top:1rem;display:grid;gap:.55rem}
.oc-foot .k{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);font-variation-settings:"wdth" 110,"wght" 600}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}

.hero-fb{
    position:absolute;inset:0;
    background:
        repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 78px),
        repeating-linear-gradient(0deg,var(--rule) 0 1px,transparent 1px 78px),
        var(--paper);
}
.has-canvas .hero-fb{display:none}

/* positioned onto the reserved block by mosaic.js */
.hero-type{
    position:absolute;z-index:2;
    display:flex;flex-direction:column;
    padding:clamp(1.3rem,2.6vw,2.8rem);
    pointer-events:none;
}
.hero-type > *,.hero-type a{pointer-events:auto}
.hero-mid{margin-top:auto}
.hero-lead{margin-top:1rem;max-width:40ch;color:var(--slate);font-size:clamp(.95rem,1.1vw,1.06rem)}
.no-canvas .hero-type{background:var(--sheet)}

.cue{
    position:absolute;z-index:2;right:var(--gutter);bottom:1.3rem;
    display:flex;align-items:center;gap:.55rem;
    font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);
    font-variation-settings:"wdth" 110,"wght" 600;
}
.cue i{display:block;width:24px;height:1px;background:var(--slate);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleX(.3);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}}

/* --------------------------------------------------------------------------
   Sections — everything is a block in the field
   -------------------------------------------------------------------------- */

.sheet{position:relative;z-index:2;background:var(--paper)}
.sec{padding-block:var(--section)}
.sec,[id]{scroll-margin-top:76px}

.grid{display:grid;gap:var(--cell)}
/* a section head sits in the field like everything else, but needs air beneath
   it or the title reads as a label on the first block */
.shead{margin-bottom:clamp(1.9rem,3.4vw,3rem)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g23{grid-template-columns:1.3fr 1fr}

/* the atom */
.blk{
    position:relative;isolation:isolate;overflow:hidden;
    background:var(--sheet);
    padding:clamp(1.25rem,1.9vw,1.75rem);
    display:flex;flex-direction:column;
}
/* every block answers the pointer with the same blue edge */
.blk::before{
    content:"";position:absolute;top:0;left:0;z-index:1;
    width:100%;height:3px;background:var(--blue);
    transform:scaleX(0);transform-origin:left;
    transition:transform .38s var(--ease);
}
.blk:hover::before{transform:scaleX(1)}
.blk > *{position:relative;z-index:2}
.blk .h3,.blk .h4{margin-bottom:.5rem}
.blk p{font-size:.98rem;color:var(--slate)}
.blk.plain::before{display:none}

.blk-t{background:var(--sheet2)}
.blk-blue{background:var(--blue);color:#fff}
.blk-blue p{color:rgba(255,255,255,.85)}
.blk-blue .h2,.blk-blue .h4,.blk-blue .pull{color:#fff}
.blk-blue .pull em{color:#fff;opacity:.6}
.blk-blue::before{background:#fff}

/* service cards, with a mosaic tile that wakes when pointed at.
   No edge bar here: the whole block already turns blue, and a line on top of
   that is one accessory too many. */
.card::before{display:none}
.card .tile{width:100%;height:74px;margin-bottom:1rem;background:var(--paper);transition:background-color .3s var(--ease)}
.card:hover{background:var(--blue);color:#fff}
.card:hover p{color:rgba(255,255,255,.85)}
.card:hover .tile{background:var(--blue-dk)}

/* process — a sequence, so it is numbered; large and blue, not a tracked chip */
.step .num{
    display:block;font-size:clamp(2.4rem,4vw,3.4rem);line-height:.8;
    color:var(--blue);font-variation-settings:"wdth" 122,"wght" 800;
    letter-spacing:-.05em;margin-bottom:1.1rem;
}
.step:hover .num{color:var(--ink)}

/* capability tags */
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:.85rem}
.tag{
    background:var(--paper);padding:.32rem .62rem;font-size:.79rem;
    font-variation-settings:"wdth" 102,"wght" 500;color:var(--slate);
    transition:background-color .3s var(--ease),color .3s var(--ease);
}
.blk:hover .tag{background:var(--sheet2);color:var(--ink)}
.card:hover .tag{background:var(--blue-dk);color:#fff}

/* --------------------------------------------------------------------------
   Dark band
   -------------------------------------------------------------------------- */

.dark{position:relative;background:var(--dk-bg);color:var(--dk-slate);overflow:hidden}
.dark canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.dark .inner{position:relative;z-index:1;padding-block:var(--section)}
.dark .h2,.dark .h4,.dark .pull{color:var(--dk-tx)}
.dark .intro,.dark p.body{color:var(--dk-slate)}
.dark .blk{background:var(--dk-sheet)}
.dark .blk p{color:var(--dk-slate)}
.dark .tag{background:var(--dk-bg);color:var(--dk-slate)}
.chips{display:flex;flex-wrap:wrap;gap:var(--cell);margin-top:1.9rem}
.chip{
    background:var(--dk-sheet);color:var(--dk-tx);
    padding:.5rem .9rem;font-size:.8rem;letter-spacing:.03em;
    font-variation-settings:"wdth" 104,"wght" 500;
    transition:background-color .28s var(--ease);
}
.chip:hover{background:var(--blue)}

/* --------------------------------------------------------------------------
   FAQ — with a filter, because fourteen answers is a lot to scan
   -------------------------------------------------------------------------- */

.faq-tools{display:flex;gap:var(--cell);margin-bottom:var(--cell)}
.no-js .faq-tools{display:none}
.faq-search{
    flex:1;background:var(--sheet);border:0;
    padding:.95rem 1.1rem;font-size:1rem;color:var(--ink);
    font-variation-settings:"wdth" 104,"wght" 500;
}
.faq-search::placeholder{color:var(--slate);font-variation-settings:"wdth" 100,"wght" 400}
.faq-search:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.faq-count{
    flex:none;display:flex;align-items:center;padding:0 1rem;
    background:var(--sheet);font-size:.8rem;color:var(--slate);
    font-variation-settings:"wdth" 104,"wght" 600;
}

.faq{display:grid;gap:var(--cell)}
.qa{background:var(--sheet)}
.qa[hidden]{display:none}
.q{
    width:100%;text-align:left;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1.05rem clamp(1.05rem,1.7vw,1.5rem);
    font-size:1.01rem;font-variation-settings:"wdth" 108,"wght" 600;
}
.q:hover{color:var(--blue)}
.q i{position:relative;flex:none;width:13px;height:13px}
.q i::before,.q i::after{content:"";position:absolute;background:var(--blue);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.q i::before{top:6px;left:0;width:13px;height:2px}
.q i::after{left:6px;top:0;width:2px;height:13px}
.qa.open .q i::after{transform:rotate(90deg);opacity:0}
.a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.a-in{padding:0 clamp(1.05rem,1.7vw,1.5rem) 1.25rem;max-width:74ch;color:var(--slate)}
.no-js .a{max-height:none}
.no-js .q{cursor:default}
.no-js .q i{display:none}
.faq-none{display:none;background:var(--sheet);padding:1.3rem clamp(1.05rem,1.7vw,1.5rem);color:var(--slate)}
.faq-none.on{display:block}
mark{background:color-mix(in srgb,var(--blue) 18%,transparent);color:inherit}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.rowset{display:grid;gap:1.15rem}
.rowset .k{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);font-variation-settings:"wdth" 110,"wght" 600;margin-bottom:.2rem}
.rowset .v{font-size:1.01rem;color:var(--ink);font-variation-settings:"wdth" 104,"wght" 500}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ftr{position:relative;background:var(--dk-bg);color:var(--dk-slate)}
.ftr-strip{height:52px;position:relative;overflow:hidden}
.ftr-strip canvas{position:absolute;inset:0;width:100%;height:100%}
.ftr-in{padding-block:clamp(2.6rem,5vw,4rem)}
.ftr .brand{color:var(--dk-tx)}
.ftr-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2rem var(--cell)}
.ftr-b{margin-top:.9rem;max-width:32ch;font-size:.92rem}
.ftr-mail{margin-top:1.2rem;display:inline-block}
.ftr h5{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dk-slate);font-variation-settings:"wdth" 110,"wght" 600;margin-bottom:.9rem}
.ftr-l{display:grid;gap:2px;align-content:start;justify-items:start}
/* The split gesture, sized for a list. overflow:hidden is load-bearing: the two
   halves park at translateX(+/-101%), and without clipping they paint as blue
   bars across the whole footer. */
.ftr-l a{
    position:relative;isolation:isolate;overflow:hidden;
    font-size:.92rem;color:var(--dk-tx);
    padding:.3rem .45rem;margin-inline:-.45rem;
    transition:color .26s var(--ease);
}
.ftr-l a::before,.ftr-l a::after{
    content:"";position:absolute;left:0;z-index:-1;width:100%;height:50%;
    background:var(--blue);transform:translateX(-101%);
    transition:transform .32s var(--ease);
}
.ftr-l a::before{top:0}
.ftr-l a::after{bottom:0;transform:translateX(101%)}
.ftr-l a:hover::before,.ftr-l a:hover::after,
.ftr-l a:focus-visible::before,.ftr-l a:focus-visible::after{transform:translateX(0)}
.ftr-l a:hover,.ftr-l a:focus-visible{color:#fff}

.ftr-end{
    border-top:1px solid var(--dk-rule);margin-top:2.4rem;padding-top:1.2rem;
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-size:.82rem;
}
.ftr :focus-visible{outline-color:var(--dk-tx)}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.page{padding:clamp(6.5rem,12vh,9rem) 0 var(--section)}
.page-h{max-width:64ch;margin-bottom:clamp(2rem,4vw,3rem)}
.page-h h1{font-size:clamp(1.9rem,4.4vw,3.2rem)}
.page-h .upd{margin-top:.85rem;color:var(--slate);font-size:.92rem}
.prose{max-width:72ch}
.prose h2{font-size:1.32rem;margin:2.2rem 0 .65rem;font-variation-settings:"wdth" 114,"wght" 700}
.prose h3{font-size:1.03rem;margin:1.5rem 0 .4rem;font-variation-settings:"wdth" 110,"wght" 700}
.prose p{margin-bottom:.9rem;color:var(--slate)}
.prose ul{margin:0 0 1.05rem 1.15rem;color:var(--slate)}
.prose li{margin-bottom:.4rem}
.prose dl{margin-bottom:1.1rem}
.prose dt{font-variation-settings:"wdth" 108,"wght" 700;color:var(--ink);margin-top:.75rem}
.prose dd{color:var(--slate)}
/* no monospace anywhere on this site — an inline host name gets a tinted
   ground and a heavier weight, at the body width */
.prose code{background:var(--sheet);padding:.08em .35em;font-family:inherit;font-variation-settings:"wdth" 100,"wght" 600;font-size:.96em}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:1180px){
    .g4{grid-template-columns:repeat(2,1fr)}
    .ftr-top{grid-template-columns:1.4fr 1fr 1fr}
}
@media (max-width:900px){
    .g3,.g2,.g23{grid-template-columns:1fr}
    .ftr-top{grid-template-columns:1fr 1fr}
    .ftr-top > :first-child{grid-column:1 / -1}
}
@media (max-width:640px){
    .g4{grid-template-columns:1fr}
    .nav{display:none}
    .burger{display:inline-flex}
    .cue{display:none}
    .ftr-top{grid-template-columns:1fr}
    .faq-count{display:none}
}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .rise{opacity:1;transform:none;transition:none}
    .cue i{animation:none}
    .btn::before,.btn::after,
    .ml::before,.ml::after,
    .ftr-l a::before,.ftr-l a::after,
    .nav a::before,.nav a::after,
    .blk::before{transition:none}
    .a{transition:none}
    .oc-p,.oc-bd{transition:none}
    body.has-hero .hdr{transition:none}
}