/* What We Do. Page composition only. Type roles, colours and buttons come from typography.css and base.css. */
:root{--dark-sec:#141210;--pad:clamp(3.5rem,7vw,6.5rem)}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.eyebrow{display:block;color:var(--ink-3);margin-bottom:1.1rem;text-transform:uppercase}
.tlink{min-height:44px}
.wc,.wf,.wx{padding-block:var(--pad)}
.wc h2,.wf h2,.wx h2{max-width:20ch;text-wrap:balance;margin:0}
.wc h2{max-width:26ch}
.wc h3,.wf h3{margin:0}
.ar{display:inline-block;flex:none;width:22px;height:1px;background:currentColor;position:relative;transition:transform .3s var(--ease),color .3s}
.ar::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}

/* hero: full-bleed photograph, text left over the blurred screen, hands stay clear */
.p-wwd .w-hero .sh__m img{object-fit:cover;object-position:50% 62%;transform:none}
.p-wwd .w-hero .sh__o{background:linear-gradient(90deg,rgba(7,10,16,.86) 0%,rgba(7,10,16,.76) 30%,rgba(7,10,16,.58) 46%,rgba(7,10,16,.24) 58%,rgba(7,10,16,0) 70%),linear-gradient(0deg,rgba(7,10,16,.35) 0%,rgba(7,10,16,0) 38%)}
.p-wwd .w-hero .sh__t{max-width:34rem}
.p-wwd .w-hero h1{max-width:15em;text-wrap:balance}
.p-wwd .w-hero .lede{margin-top:1.25rem;max-width:34rem;text-wrap:pretty}

/* 01 core capabilities: five ruled rows of equal weight. Number, capability, one sentence. No links, no sub-labels. */
.wc{background:var(--paper)}
.wc__h{display:block}
.wc__h .lede{margin:clamp(1.1rem,2vw,1.5rem) 0 0;color:var(--ink-2);max-width:42rem}
.wc__l{list-style:none;margin:clamp(2rem,4vw,3.25rem) 0 0;padding:0;border-bottom:1px solid var(--line-2)}
.wc__i{display:grid;grid-template-columns:3rem minmax(0,4fr) minmax(0,7fr);column-gap:clamp(1.25rem,3vw,2.5rem);align-items:baseline;padding:clamp(1.2rem,2vw,1.6rem) 0;border-top:1px solid var(--line-2);scroll-margin-top:calc(var(--hdr) + 1.25rem)}
.wc__n{color:var(--red)}
.wc__t{color:var(--ink)}
.wc__d{margin:0;color:var(--ink-2);font-size:var(--ty-body);line-height:1.6;max-width:36rem}

/* 02 engineering foundation: dark, three columns */
.wf{background:var(--dark-sec);color:#fff}
.wf__h{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(1.5rem,5vw,5rem);align-items:start;margin-bottom:clamp(2rem,4vw,3.25rem)}
.wf__h h2{position:relative;color:#fff;padding-top:1.6rem}
.wf__h h2::before{content:"";position:absolute;left:0;top:0;width:56px;height:3px;background:var(--red)}
.wf__h .sup{margin:0;padding-top:1.6rem;color:#d4cec3;max-width:32rem}
.wf__g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(2rem,4vw,4rem)}
.wf__g li{padding:1.4rem 0 clamp(1.5rem,2.6vw,2.25rem);border-top:1px solid #4a443c}
.wf__g h3{color:#fff}
.wf__g p{margin:.7rem 0 0;color:#d4cec3;font-size:var(--ty-body);line-height:1.6;max-width:24rem}

/* 03 product experience: eyebrow, headline, description and link as one connected column */
.wp{background:var(--stone);padding-block:var(--pad)}
.wp__c{max-width:56rem}
.wp h2{margin:0;max-width:26ch;text-wrap:balance}
.wp__d{margin:1.25rem 0 0;max-width:40rem;color:var(--ink-2);font-size:var(--ty-sup);line-height:var(--ty-sup-lh);text-wrap:pretty}
.wp .tlink{margin-top:1.25rem}

/* 04 closing call to action */
.wx{background:var(--dark-sec);color:#fff;padding-block:clamp(4rem,8vw,7rem);position:relative}
.wx::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#3a352f}
.wx h2{color:#fff;position:relative;padding-top:1.6rem}
.wx h2::before{content:"";position:absolute;left:0;top:0;width:56px;height:3px;background:var(--red)}
.wx .sup{margin:0;color:#d4cec3;max-width:30rem;padding-top:1.6rem}
.wx .ctagroup{margin-top:1.75rem}
.wx .btn:focus-visible{outline:2px solid #fff;outline-offset:4px}

@media(max-width:1100px){
     .wf__g{grid-template-columns:repeat(2,minmax(0,1fr))}.wf__g li:last-child{grid-column:1/-1}
}
@media(max-width:900px){
 .p-wwd .w-hero .sh__m img{object-position:72% 50%}
 .p-wwd .w-hero .sh__o{background:linear-gradient(0deg,rgba(7,10,16,.94) 0%,rgba(7,10,16,.86) 44%,rgba(7,10,16,.4) 72%,rgba(7,10,16,.08) 100%)}
 .p-wwd .w-hero .sh__t{max-width:none}
 .wf__h{grid-template-columns:minmax(0,1fr);gap:1.25rem}
 .wc h2,.wf h2,.wx h2,.wp h2{max-width:none}
}
@media(max-width:900px){
 .wc__i{grid-template-columns:2.4rem minmax(0,1fr);row-gap:.5rem}
 .wc__t,.wc__d{grid-column:2}
 .wc__n{grid-row:1}
}
@media(max-width:600px){.wf__g{grid-template-columns:minmax(0,1fr)}.wf__g li:last-child{grid-column:auto}.wf__g p{max-width:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ar{transition:none}}
.wc__h .lede,.wf__h .sup{text-wrap:balance}
.wx .sup{text-wrap:balance}