/* Page composition only. Roles, colours, buttons: base.css (locked tokens). */
:root{--dark-sec:#141210;--pad:clamp(3.5rem,8vw,8rem)}
html{scroll-behavior:smooth}

body{overflow-x:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.eyebrow{display:block;color:var(--ink-3);margin-bottom:1.1rem}
.sec{padding-block:var(--pad)}
.ph{position:relative;margin:0;overflow:hidden;background:var(--stone-2)}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tlink{min-height:44px}


/* hero: type leads, photograph bleeds to the right edge */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:clamp(600px,50vw,760px)}
.hero__txt{padding:clamp(3rem,6vw,5.5rem) clamp(2rem,5vw,5rem) clamp(3rem,6vw,5rem) calc((100vw - min(100vw,var(--container)))/2 + var(--gutter));display:flex;flex-direction:column;justify-content:center}
.crumb{color:var(--ink-3);margin-bottom:2rem}.crumb a{color:inherit;text-decoration:none}.crumb a:hover{color:var(--red)}
.hero h1{max-width:17.5ch}
.hero .lede{margin-top:2rem;max-width:34rem;color:var(--ink-2)}
.hero .ctagroup{margin-top:2.25rem}
.hero__ph{min-height:100%}

/* thesis */
.thesis{background:var(--stone)}
.thesis__g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,7vw,7rem);align-items:end}
.thesis h2{max-width:16.2ch}
.thesis__b .sup{color:var(--ink-2);max-width:30rem}
.thesis__s{margin-top:1.5rem;font-size:var(--ty-st);font-weight:400;line-height:var(--ty-st-lh);letter-spacing:var(--ty-st-ls);color:var(--ink);max-width:22em}

/* where AI belongs: one closed loop, the model at its head, the statement held inside it */
.belong{background:var(--dark-sec);color:#fff;overflow:hidden}
.belong h2{max-width:22.5ch}
.loop{--r:min(40%,330px);position:relative;width:min(100%,760px);aspect-ratio:1/1;margin:clamp(1.5rem,3vw,2.5rem) auto 0}
.loop::before{content:"";position:absolute;inset:8%;border:1px solid #6a645a;border-radius:50%}
.loop__l{list-style:none;margin:0;padding:0}
.loop__i{position:absolute;left:calc(50% + 42% * cos(var(--a)));top:calc(50% + 42% * sin(var(--a)));transform:translate(-50%,-50%);z-index:1}
.loop__i button{font:inherit;display:block;background:var(--dark-sec);border:0;padding:.5rem 1rem;cursor:pointer;color:#b3ab9e;font-size:var(--ty-st);font-weight:400;line-height:var(--ty-st-lh);letter-spacing:var(--ty-st-ls);text-align:center;white-space:nowrap;transition:color .35s var(--ease)}
.loop__ai button{color:#fff;font-size:var(--ty-h2);font-weight:400;letter-spacing:normal;box-shadow:inset 0 -3px 0 var(--red);padding-bottom:.6rem}
.loop.is-sel .loop__i button{color:#8a8378}
.loop.is-sel .loop__i.rel button{color:#e6e0d6}
.loop.is-sel .loop__i.on button{color:#fff}
.loop__c{position:absolute;left:50%;top:56%;transform:translate(-50%,-45%);width:min(36%,280px);text-align:center;color:#e6e0d6;margin:0}



/* governance */
.gov{background:var(--stone)}
.gov__g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,7vw,7rem);align-items:start}
.gov h2{max-width:15ch}
.gov__q{font-size:var(--ty-st);font-weight:400;line-height:var(--ty-st-lh);letter-spacing:var(--ty-st-ls);color:var(--ink)}
.gov__p{margin-top:1.5rem;color:var(--ink-2);max-width:32rem}
.gov .tlink{margin-top:1.25rem}

/* proof of concept to production: experiment (light, small) to delivery (dark, large) */
.prodn__top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,7vw,7rem);align-items:end}
.prodn h2{max-width:17.5ch}
.prodn__p{color:var(--ink-2);max-width:32rem}
.steps{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr;min-height:clamp(220px,24vw,340px)}
.steps li{display:flex;align-items:flex-end;padding:clamp(1rem,1.8vw,1.75rem)}
.steps__x{background:var(--stone-2);color:#6f695e;font-size:var(--ty-lede);font-weight:400;line-height:1.2;letter-spacing:var(--ty-st-ls);border-right:1px solid var(--stone-3);min-height:62%;align-self:end}
.steps__x:nth-child(2){min-height:74%}.steps__x:nth-child(3){min-height:86%}
.steps__d{background:var(--dark-sec);color:#fff;font-size:clamp(1.125rem,.55rem + 1.75vw,2.125rem);font-weight:400;line-height:1.1;letter-spacing:var(--ty-st-ls);border-left:1px solid #2a2622;position:relative}
.steps__d:nth-child(4){box-shadow:inset 3px 0 0 var(--red)}
.prodn__o{margin-top:clamp(1.5rem,3vw,2.25rem);margin-left:50%;color:var(--ink-2);max-width:32rem;font-size:var(--ty-sup);line-height:var(--ty-sup-lh)}

/* technology around it: one engineering environment, AI/ML and data one part of it */
.tech{background:var(--stone);padding-top:calc(var(--pad)*.8)}
.tech__top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,7vw,7rem);align-items:end}
.tech h2{max-width:17.5ch}
.tech__o{color:var(--ink-2);max-width:24rem}
.env{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(clamp(150px,15vw,220px),auto));border:1px solid var(--ink);background:#fff}
.env li{display:flex;align-items:flex-end;padding:clamp(1.1rem,2vw,1.75rem);font-size:var(--ty-st);font-weight:400;line-height:var(--ty-st-lh);letter-spacing:var(--ty-st-ls);color:var(--ink);border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);transition:background-color .35s var(--ease)}
.env li:hover{background:var(--stone)}
.env__a,.env__b,.env__ai{grid-column:span 2}.env__c{grid-column:span 3}.env__d{grid-column:span 3}
.env li:nth-child(3),.env__d{border-right:0}.env__c,.env__d{border-bottom:0}
.env .env__ai{background:var(--dark-sec);color:#fff;box-shadow:inset 0 3px 0 var(--red)}
.env .env__ai:hover{background:var(--dark-sec)}

.concept{position:absolute;left:0;bottom:0;padding:.35rem .7rem}
/* close */
.close h2{max-width:17.5ch}
.close .sup{color:var(--ink-2);max-width:30rem}
.close .ctagroup{margin-top:1.75rem}

@media(max-width:900px){
 .hero{display:flex;flex-direction:column-reverse;min-height:0}
 .hero__ph{height:300px;min-height:0}
 .hero__txt{padding:2rem var(--gutter) 2.5rem}.crumb{margin-bottom:1.25rem}.hero h1{max-width:none}
 .hero .lede{margin-top:1.5rem}.hero .ctagroup{margin-top:1.75rem}
 .thesis__g,.not__g,.gov__g{grid-template-columns:1fr;gap:1.75rem}
 .thesis h2,.belong h2,.not h2,.gov h2,.prodn h2,.tech h2,.close h2{max-width:none}

 .loop{--fs:1.0625rem;width:100%;margin-top:1.5rem}
 .loop::before{inset:11%}
 .loop__i{left:calc(50% + 38% * cos(var(--a)));top:calc(50% + 38% * sin(var(--a)))}
 .loop__i button{font-size:var(--fs);font-weight:400;white-space:normal;max-width:6.5rem;padding:.35rem .4rem;line-height:1.25;color:#cfc9bf}
 .loop__ai button{font-size:1.375rem;max-width:8rem;padding-bottom:.45rem}
 .loop__c{position:static;transform:none;width:auto;text-align:left;margin-top:1.5rem}
 .loop{aspect-ratio:auto;display:flex;flex-direction:column}
 .loop__l{position:relative;width:100%;aspect-ratio:1/1}
 .loop::before{display:none}
 .loop__l::before{content:"";position:absolute;inset:11%;border:1px solid #6a645a;border-radius:50%}
 .steps{grid-template-columns:repeat(3,minmax(0,1fr));min-height:0;margin-top:2rem}
 .steps li{min-height:0!important;padding:.9rem .75rem;align-self:stretch}
 .steps__x{font-size:1.0625rem;padding-block:1.25rem}
 .steps__d{font-size:1.125rem;padding-block:2.25rem 1rem}
 .steps__d:nth-child(4){box-shadow:inset 0 3px 0 var(--red)}
 .prodn__top,.tech__top{grid-template-columns:1fr;gap:1.5rem}
 .prodn__o{margin-left:0}
 .env{grid-template-columns:1fr 1fr;grid-template-rows:none;margin-top:2rem}
 .env li{grid-column:auto!important;min-height:112px;font-size:1.25rem;border-right:1px solid var(--line-2)!important;border-bottom:1px solid var(--line-2)!important}
 .env .env__ai{grid-column:1/-1!important;min-height:132px}

 .not__ph{aspect-ratio:4/3;max-height:none}
 .tech__o{max-width:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.loop__i button,.env li{transition:none}}


/* ===== Targeted redesign: hero, belongs, not-earn, production ===== */
/* hero: full-bleed photograph, image offset right so the type sits in the dark left field */
.p-ai .ai-hero{height:clamp(540px,50vw,820px);min-height:0;align-items:center;background:#16161f}
.p-ai .ai-hero .sh__m img{position:absolute;left:14%;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;transform:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
.p-ai .ai-hero .sh__o{background:linear-gradient(90deg,rgba(14,14,22,.55) 0%,rgba(14,14,22,.25) 30%,rgba(14,14,22,0) 48%),linear-gradient(0deg,rgba(14,14,22,.3) 0%,rgba(14,14,22,0) 30%)}
.ai-hero__c{width:100%;padding:clamp(2rem,5vw,4rem) var(--gutter) clamp(2rem,5vw,4rem) max(var(--gutter),6vw)}
.p-ai .ai-hero .sh__t{max-width:min(30rem,31vw)}
.p-ai .ai-hero .crumb{margin-bottom:1rem}
.p-ai .ai-hero h1{max-width:none;text-wrap:balance;}
.p-ai .ai-hero .lede{margin-top:1.25rem;max-width:28rem;text-wrap:pretty;}
@media(max-width:900px){
 .p-ai .ai-hero{height:auto;display:block;background:#16161f}
 .p-ai .ai-hero .sh__m{position:relative;inset:auto;display:block;aspect-ratio:16/9}
 .p-ai .ai-hero .sh__m img{left:0;width:100%;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
 .p-ai .ai-hero .sh__o{display:none}
 .ai-hero__c{padding:.25rem var(--gutter) 2.25rem}
 .p-ai .ai-hero .sh__t{max-width:none}
 .p-ai .ai-hero .lede{max-width:34rem;}}
@media(max-width:900px) and (min-width:560px){.p-ai .ai-hero .sh__m{max-height:560px}}
/* laptop widths: the narrower text measure keeps the headline clear of the illustration, so the hero needs a little more height */
@media(min-width:901px) and (max-width:1279px){.p-ai .ai-hero{height:clamp(620px,52vw,700px)}}

/* ===== AI & Technology: engineering-led narrative (what we deliver, how, readiness, production) ===== */
.ax-do,.ax-how,.ax-prod,.ax-measure{padding-block:clamp(3.5rem,7vw,6.5rem)}
.ax-do h2,.ax-how h2,.ax-ready h2,.ax-prod h2,.ax-measure h2{max-width:22.5ch;text-wrap:balance;margin:0;}
.ax-how h2{max-width:27.5ch}
.ax-do h3,.ax-how h3,.ax-ready h3,.ax-prod h3,.ax-measure h3{margin:0;}
.ax-n{display:block;color:var(--ink-3);letter-spacing:.16em}
.ax-do .eyebrow,.ax-how .eyebrow,.ax-ready .eyebrow,.ax-prod .eyebrow,.ax-measure .eyebrow,.close .eyebrow{text-transform:uppercase}

/* 01 what we deliver: heading held on the left, five areas as a ruled list on the right */
.ax-do{background:var(--stone)}
.ax-do__g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,7vw,7rem);align-items:start}
.ax-do__h{position:sticky;top:calc(var(--hdr) + 2rem)}
.ax-do__h .sup{margin:1.5rem 0 0;color:var(--ink-2);max-width:30rem}
.ax-do__l{list-style:none;margin:0;padding:0;counter-reset:none}
.ax-do__l li{display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:.5rem;padding:clamp(1.4rem,2.4vw,2rem) 0;border-top:1px solid var(--line-2);position:relative}
.ax-do__l li:first-child{border-top:0;padding-top:0}
.ax-do__l li:first-child::before{content:"";position:absolute;left:0;top:-1px;width:0}
.ax-do__l li:last-child{border-bottom:1px solid var(--line-2)}
.ax-do__l .ax-n{grid-row:1/3;padding-top:.45rem}
.ax-do__l h3{color:var(--ink);}
.ax-do__l p{margin:.6rem 0 0;color:var(--ink-2);max-width:34rem}

/* 02 our approach: a concise bridge to the dedicated How We Work page */
.ax-how{background:var(--paper);padding-block:clamp(3rem,5.5vw,5rem)}
.ax-how__g{max-width:46rem}
.ax-how__g .sup{margin:1.25rem 0 0;color:var(--ink-2);max-width:38rem}
.ax-how__cta{display:flex;justify-content:flex-end;margin-top:clamp(1.75rem,3vw,2.5rem)}

/* 03 built for real operations: dark, four considerations in one row */
.ax-ready{position:relative;isolation:isolate;overflow:hidden;background:#101119;color:#fff;padding-block:clamp(3.5rem,7vw,6.5rem)}
.ax-ready__m{position:absolute;inset:0;z-index:-2;display:block}
.ax-ready__m img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.ax-ready__o{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,9,14,.94) 0%,rgba(8,9,14,.86) 50%,rgba(8,9,14,.7) 100%)}
.ax-ready .eyebrow{color:#cdc6ba}
.ax-ready h2{color:#fff}
.ax-ready__h{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,5vw,5rem);align-items:end}
.ax-ready__h .sup{margin:0;color:#dcd6cb;max-width:32rem}
.ax-ready__l{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.25rem,2.6vw,2.5rem)}
.ax-ready__l li{position:relative;border-top:1px solid #4a4a55;padding-top:1.25rem}
.ax-ready__l li::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:3px;background:var(--red)}
.ax-ready__l h3{color:#fff;}
.ax-ready__l p{margin:.75rem 0 0;color:#d4cec3;font-size:var(--ty-link);line-height:1.55}

/* 04 pilot to production: AI as one layer, carried by the engineering disciplines beneath it */
.ax-prod{background:var(--stone)}
.ax-prod__h{max-width:48rem}
.ax-prod__t{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,4vw,4rem);margin-top:clamp(1.5rem,3vw,2.25rem)}
.ax-prod__t .sup{margin:0;color:var(--ink-2);max-width:32rem}
.ax-fd{margin-top:clamp(2.25rem,4.5vw,3.75rem);background:var(--dark-sec);color:#fff}
.ax-fd__core{position:relative;padding:clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid #3a352f;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:.5rem clamp(1.5rem,4vw,4rem);align-items:baseline}
.ax-fd__core::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--red)}
.ax-fd__k{grid-column:1/-1;color:#ff8c8f;text-transform:uppercase}
.ax-fd__ai{margin:0;color:#fff;}
.ax-fd__d{margin:0;color:#d4cec3;max-width:34rem}
.ax-fd__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.ax-fd__l li{position:relative;padding:clamp(1.25rem,2.2vw,2rem) clamp(1rem,1.8vw,1.75rem) clamp(1.5rem,2.6vw,2.25rem)}
.ax-fd__l li+li{border-left:1px solid #3a352f}
.ax-fd__l li::before{content:"";position:absolute;left:clamp(1rem,1.8vw,1.75rem);top:0;width:1px;height:clamp(.9rem,1.6vw,1.25rem);background:#8a8378}
.ax-fd__l .ax-n{color:#b3ab9e;margin-bottom:.4rem}
.ax-fd__l h3{color:#fff;}
.ax-fd__l p{margin:.6rem 0 0;color:#cfc8bc;font-size:.9375rem;line-height:1.5}

/* 05 measuring operational value: editorial six-item ledger, light surface between the dark readiness band and the dark close */
.ax-measure{background:var(--paper)}
.ax-measure__h{max-width:48rem}
.ax-measure__h .sup{margin:1.25rem 0 0;color:var(--ink-2);max-width:36rem}
.ax-measure__l{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,2.75rem) clamp(1.75rem,4vw,3rem)}
.ax-measure__l li{position:relative;border-top:1px solid var(--line-2);padding-top:1.25rem}
.ax-measure__l li::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:3px;background:var(--red)}
.ax-measure__l h3{color:var(--ink);margin-top:.35rem}
.ax-measure__l p{margin:.6rem 0 0;color:var(--ink-2);font-size:var(--ty-link);line-height:1.55;max-width:26rem}

/* closing call to action */
.close h2{max-width:22.5ch;text-wrap:balance;margin:0;}
.close .sup{color:var(--ink-2);max-width:30rem;margin:0}
.close .ctagroup{margin-top:1.75rem}

@media(max-width:1100px){
  .ax-ready__l{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ax-fd__l{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ax-fd__l li:nth-child(odd){border-left:0}
 .ax-fd__l li{border-top:1px solid #3a352f}
 .ax-fd__l li::before{display:none}
 .ax-fd__l li:last-child:nth-child(odd){grid-column:1/-1}
 .ax-measure__l{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
 .ax-do__g,.ax-ready__h,.ax-prod__t{grid-template-columns:minmax(0,1fr);gap:1.25rem}
 .ax-how__cta{justify-content:flex-start}
 .ax-do__g{gap:2rem}
 .ax-do__h{position:static}
 .ax-do__l li:first-child{border-top:1px solid var(--line-2);padding-top:clamp(1.4rem,2.4vw,2rem)}
 .ax-do h2,.ax-how h2,.ax-ready h2,.ax-prod h2,.ax-measure h2,.close h2{max-width:none}
 .ax-fd__core{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
 .ax-do__l li{grid-template-columns:2.5rem minmax(0,1fr)}
 .ax-ready__l{grid-template-columns:minmax(0,1fr)}
 .ax-fd__l{grid-template-columns:minmax(0,1fr)}
 .ax-fd__l li+li,.ax-fd__l li:nth-child(odd){border-left:0}
 .ax-fd__l li{padding-inline:1.25rem}
 .ax-measure__l{grid-template-columns:minmax(0,1fr)}
 .ax-measure__l p{max-width:none}
}

/* ---- closing section converted to the dark surface that now carries the
   page's contact form, consistent with the footer immediately below it ---- */
.close{background:var(--dark-sec);color:#fff}
.close h2{color:#fff}
.close .eyebrow{color:#ff8c8f}
.close .sup{color:#cfc9bf}
.close .tlink{color:#fff}
.close .tlink:hover{color:#ff8c8f}
.close .others{border-top-color:rgba(255,255,255,.22)}
.close .others .meta{color:rgba(255,255,255,.55)}
.close .others a{color:#fff}
.close .others a:hover{color:#ff8c8f}