/* ============ ABOUT CLOSE: capabilities preview on the wave grid ============ */
.about-close{background:var(--ivory);padding:clamp(26px,4vh,54px) 0 clamp(50px,8vh,100px)}
.about-close .wrap{max-width:var(--maxw)}
/* dark indigo panel, deliberately not the old dark green */
.ac-panel{position:relative;overflow:hidden;text-align:center;border-radius:26px;
  background:#12121f;color:var(--ivory);
  border:1px solid rgba(255,255,255,.09);
  padding:clamp(34px,4vw,58px) clamp(20px,3.4vw,48px) clamp(34px,4vw,48px);
  box-shadow:0 50px 64px -60px rgba(18,18,31,.9)}
.ac-glow{display:none}
/* the instanced cube grid fills the panel */
/* Was a WebGL wave-grid, which pulled in three.js. Two drifting gradient blobs give the same slow
   wash for one paint and no GL context. */
.ac-wave{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(150deg,#1a1a2b,#232338 58%,#141422)}
.ac-wave::before,.ac-wave::after{content:"";position:absolute;
  width:72%;aspect-ratio:1.3;border-radius:50%;will-change:transform}
.ac-wave::before{left:-12%;top:-26%;
  background:radial-gradient(closest-side,rgba(255,122,61,.42),transparent 72%);
  animation:acwA 24s ease-in-out infinite alternate}
.ac-wave::after{right:-14%;bottom:-28%;
  background:radial-gradient(closest-side,rgba(95,201,191,.34),transparent 74%);
  animation:acwB 30s ease-in-out infinite alternate}
@keyframes acwA{to{transform:translate3d(20%,22%,0) scale(1.18)}}
@keyframes acwB{to{transform:translate3d(-18%,-20%,0) scale(1.14)}}
@media(prefers-reduced-motion:reduce){.ac-wave::before,.ac-wave::after{animation:none}}
.ac-wave{border-radius:26px}
/* hold the type off the brightest part of the field */
.ac-panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:26px;
  background:radial-gradient(120% 80% at 50% 40%,rgba(12,12,22,.72),rgba(12,12,22,.9))}

.ac-lead{position:relative;z-index:3}
.ac-panel h2{position:relative;font-family:var(--serif);font-weight:800;font-size:clamp(25px,2.9vw,42px);
  letter-spacing:-.03em;line-height:1.05;color:#fff}
.ac-panel h2 em{font-style:italic;color:#FF9A62}
.ac-lead p{position:relative;font-size:clamp(13.5px,.95vw,15.5px);color:rgba(250,248,243,.8);
  max-width:54ch;margin:12px auto 0;line-height:1.6}

/* six liquid-glass capability cards */
.cap-preview{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(9px,1vw,14px);margin:clamp(22px,2.8vh,32px) auto 0;max-width:820px}
.cpv{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:clamp(14px,1.6vw,20px) 12px;border-radius:16px;text-decoration:none}
.cpv-ic{display:grid;place-items:center;width:clamp(38px,3.2vw,46px);height:clamp(38px,3.2vw,46px);
  border-radius:12px;color:#fff;
  background:color-mix(in srgb,var(--c) 42%,transparent);
  transition:transform .5s var(--ease),background .4s var(--ease)}
.cpv:hover .cpv-ic{transform:scale(1.08);background:var(--c)}
.cpv-ic svg{width:54%;height:54%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cpv-t{font-family:var(--serif);font-weight:650;font-size:clamp(12.5px,.95vw,14.5px);letter-spacing:-.01em;
  color:#fff;line-height:1.22}

@media(max-width:820px){.cap-preview{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cap-preview{grid-template-columns:1fr}
  .cpv{flex-direction:row;justify-content:flex-start;text-align:left;gap:16px;padding:14px 16px}}

/* ============ ABOUT HERO: layered parallax ============
   Four layers, each scrolled at its own rate by parallax-hero.js. Every layer
   is oversized and offset upward so the downward travel can never drag an
   empty edge into view. Styled to look correct AT REST, so if GSAP is missing
   or motion is reduced the hero is simply still, never broken or blank. */
.pxh{position:relative;background:var(--ivory)}
.pxh-stage{position:relative;height:100vh;min-height:560px;overflow:hidden;
  isolation:isolate}
.pxh-l{position:absolute;left:0;right:0;top:-18%;height:136%;
  will-change:transform;backface-visibility:hidden}

/* 1 · atmosphere */
.pxh-sky{z-index:1;
  background:
    radial-gradient(80% 60% at 74% 18%,color-mix(in srgb,var(--teal) 34%,transparent),transparent 68%),
    radial-gradient(70% 55% at 18% 78%,color-mix(in srgb,var(--amber) 20%,transparent),transparent 70%),
    linear-gradient(180deg,var(--surface) 0%,var(--ivory) 62%)}

/* 2 · the photograph, pulled onto the brand and feathered on every edge */
.pxh-shot{z-index:2;
  -webkit-mask-image:radial-gradient(72% 62% at 62% 46%,#000 42%,transparent 100%);
  mask-image:radial-gradient(72% 62% at 62% 46%,#000 42%,transparent 100%)}
.pxh-shot img{width:100%;height:100%;object-fit:cover;object-position:78% 44%;display:block;
  filter:saturate(.7) contrast(.98) brightness(1.06)}
.pxh-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(190deg,transparent 30%,color-mix(in srgb,var(--teal) 40%,transparent) 100%);
  mix-blend-mode:multiply}

/* 3 · the statement.
   The photograph runs dark through the middle and right, so ink type laid
   straight over it was barely readable. This pocket of ivory rides ON the title
   layer, which means it travels with the copy and the copy is never left
   stranded over the dark part of the robot at any scroll position. */
.pxh-title{z-index:3;display:flex;align-items:center;pointer-events:none}
.pxh-title::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(250,248,243,.97) 0%,
      rgba(250,248,243,.94) 34%,
      rgba(250,248,243,.78) 55%,
      rgba(250,248,243,.34) 74%,
      rgba(250,248,243,0)   90%),
    radial-gradient(70% 48% at 26% 50%,rgba(250,248,243,.72),transparent 72%)}
.pxh-in{position:relative;z-index:2;width:min(92vw,var(--maxw));margin:0 auto;
  padding:0 clamp(18px,4vw,34px);pointer-events:auto}
.pxh-title h1{font-family:var(--serif);font-weight:800;
  font-size:clamp(36px,5.6vw,88px);letter-spacing:-.04em;line-height:.98;color:var(--ink);
  max-width:13ch;text-shadow:0 1px 0 rgba(250,248,243,.9),0 2px 18px rgba(250,248,243,.75)}
.pxh-title h1 em{font-style:normal;color:var(--teal-deep)}
.pxh-lead{font-family:var(--serif);font-weight:600;font-size:clamp(16px,1.9vw,26px);
  color:var(--ink);text-shadow:0 1px 14px rgba(250,248,243,.85);margin-top:clamp(16px,2.4vh,26px);max-width:34ch;line-height:1.32}

/* 4 · foreground ground: rises last and hands the eye to the copy below */
.pxh-fore{z-index:4;top:auto;bottom:-30%;height:56%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,var(--ivory) 44%,var(--ivory) 100%)}

/* the paragraph sits on ordinary ground beneath the scene */
.pxh-body{position:relative;z-index:5;background:var(--ivory);
  padding:clamp(12px,2vh,28px) 0 clamp(56px,8vh,104px)}
.pxh-body .wrap{max-width:var(--maxw)}
.pxh-copy{font-size:clamp(15px,1.15vw,18px);line-height:1.78;color:var(--ink-soft);
  max-width:64ch}
.pxh-copy em{font-style:normal;font-weight:650;color:var(--ink)}

@media(max-width:820px){
  .pxh-stage{height:88vh;min-height:480px}
  .pxh-title h1{max-width:12ch}
  .pxh-shot img{object-position:70% 44%}
}
@media(prefers-reduced-motion:reduce){ .pxh-l{will-change:auto} }

/* ============ ASSOCIATIONS (client logo marquee) ============ */
.assoc{padding:64px 0 30px;background:var(--ivory)}
.assoc .wrap{max-width:var(--maxw)}
.assoc h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.025em;
  line-height:1.12;max-width:26ch;margin-top:14px;color:var(--ink)}
.assoc-track-wrap{position:relative;overflow:hidden;margin-top:44px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.assoc-track{display:flex;align-items:center;width:max-content;gap:clamp(52px,6.4vw,92px);
  animation:assocScroll 32s linear infinite}
.assoc-track-wrap:hover .assoc-track{animation-play-state:paused}
.assoc-track img{height:36px;width:auto;flex:none;opacity:.94;transition:transform .4s var(--ease),opacity .4s}
.assoc-track img:hover{transform:translateY(-3px);opacity:1}
@keyframes assocScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ DISCIPLINES INTRO ============ */
.disciplines-intro{background:linear-gradient(180deg,var(--surface) 0%,var(--ivory) 100%);
  padding:clamp(72px,11vh,140px) 0 clamp(48px,7vh,88px);text-align:center}
.disciplines-intro .wrap{max-width:760px}
.disciplines-intro .eyebrow{justify-content:center}
.disciplines-intro p{font-size:clamp(15px,1.1vw,17px);color:var(--ink-soft);max-width:52ch;
  margin:16px auto 0;line-height:1.7;font-weight:400}
.disciplines-intro h2{font-family:var(--serif);font-weight:650;font-size:clamp(28px,3.6vw,46px);
  letter-spacing:-.02em;line-height:1.1;margin-top:14px;color:var(--ink)}
.disciplines-intro h2 em{font-style:normal;color:var(--teal-deep)}
.disciplines-intro p{font-size:clamp(16px,1.15vw,18px);color:var(--ink-soft);max-width:56ch;
  margin:18px auto 0;line-height:1.7;font-weight:400}

/* ============ SCROLL SPLIT CARDS (image splits into 4 panels that flip to reveal a discipline) ============ */
.ssc{position:relative;background:var(--ivory)}
.ssc:nth-of-type(even){background:var(--surface)}
.ssc-pin{height:100vh;min-height:600px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;overflow:hidden;padding:calc(var(--nav-h) + 16px) 20px 40px}

.ssc-stage{position:relative;display:flex;gap:0;perspective:1900px;
  width:min(1000px,94vw);height:min(560px,62vh)}
.ssc-panel{position:relative;flex:1 1 0%;transform-style:preserve-3d;
  transform:translateX(0) rotateY(0deg)}
.ssc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:8px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(20,33,31,.6)}

/* FRONT = one cohesive image, sliced into 4 vertical strips (400% wide, offset per panel) */
.ssc-front{background-size:400% 100%;background-position:var(--pos) center;
  filter:grayscale(.18) contrast(1.03)}
.ssc[data-img="a"] .ssc-front{background-image:url(img/hero-1-robot.jpg)}
.ssc[data-img="b"] .ssc-front{background-image:url(img/hero-2-tech.jpg)}
.ssc-front::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,24,22,.12) 0%,rgba(14,24,22,0) 40%,rgba(14,24,22,.4) 100%)}

/* BACK = the discipline card.
   This used to be a full-bleed accent colour with the photo laid over it at
   42% in mix-blend-mode:overlay. Overlay against eight different hues gave
   eight different, unpredictable grounds, several of them mid-tone, and
   white copy on a mid-tone is where legibility goes. All eight now share
   one neutral ground; the photo stays as faint texture at normal blend,
   and the discipline's colour survives where it cannot hurt reading: the
   icon chip and a rule above the title. */
.ssc-back{transform:rotateY(180deg);color:#fff;overflow:hidden;
  background:linear-gradient(168deg,#153B36 0%,#0D2321 54%,#081513 100%)}
.ssc-shot{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.17;filter:grayscale(.55)}
/* scrim carries most of the legibility work: transparent at the top so the
   texture reads, near-solid at the foot where the words are */
.ssc-back::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,21,19,.1) 0%,rgba(8,21,19,.5) 46%,rgba(8,21,19,.93) 100%)}
/* per-discipline icon logo, tinted in that discipline's colour */
.ssc-logo{position:absolute;top:20px;left:20px;z-index:2;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--c) 82%,transparent);
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--c) 90%,transparent)}
.ssc-logo svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ssc-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 22px}
/* the accent rule is the only place the discipline's colour touches the copy */
.ssc-copy::before{content:"";display:block;width:30px;height:3px;border-radius:2px;
  background:var(--c);margin-bottom:14px}
.ssc-copy .name{font-family:var(--serif);font-weight:650;font-size:clamp(22px,1.9vw,28px);
  letter-spacing:-.015em;line-height:1.05;color:#fff}
.ssc-copy .desc{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.9);margin-top:10px}

/* mobile / reduced-motion: no 3D, no pin — the backs become a flat 2x2 grid of discipline cards */
@media(max-width:820px){
  .ssc-pin{height:auto;min-height:0;display:block;padding:clamp(40px,7vh,72px) 22px}
  .ssc-stage{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;height:auto;perspective:none}
  .ssc-panel{transform:none!important;transform-style:flat;height:250px}
  .ssc-front{display:none}
  .ssc-face{box-shadow:0 16px 36px -24px rgba(20,33,31,.5)}
  .ssc-back{position:relative;transform:none;border-radius:14px;height:100%}
}
@media(prefers-reduced-motion:reduce){
  .ssc-panel{transform:translateX(0) rotateY(180deg)!important}
}