/* ============ SCROLL-EXPAND HERO (also the page header) ============ */
/* 240vh held the visitor still for nearly two and a half screens before the
   page advanced, which was the second-worst offender for the site feeling
   sticky after the old home hero. 170vh still scrubs the expand comfortably. */
.ind-hero{position:relative;height:170vh;background:#0a1614}
.ih-pin{position:relative;height:100vh;width:100%;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#0d1a18 0%,#123c39 52%,#0b6b64 100%)}

/* animated line field sits furthest back */
/* Was a WebGL line-waves field. Two drifting gradient blobs give the same slow
   wash for one paint and no GL context. */
.ih-field{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  background:linear-gradient(150deg,#0d1a18,#123c39 52%,#0b6b64)}
.ih-field::before,.ih-field::after{content:"";position:absolute;
  width:76%;aspect-ratio:1.3;border-radius:50%;will-change:transform}
.ih-field::before{left:-12%;top:-26%;
  background:radial-gradient(closest-side,rgba(95,201,191,.40),transparent 72%);
  animation:ihfA 26s ease-in-out infinite alternate}
.ih-field::after{right:-14%;bottom:-28%;
  background:radial-gradient(closest-side,rgba(240,133,75,.26),transparent 74%);
  animation:ihfB 33s ease-in-out infinite alternate}
@keyframes ihfA{to{transform:translate3d(20%,22%,0) scale(1.18)}}
@keyframes ihfB{to{transform:translate3d(-18%,-20%,0) scale(1.14)}}
@media(prefers-reduced-motion:reduce){.ih-field::before,.ih-field::after{animation:none}}

/* the picture that opens out to full bleed */
.ih-media{position:absolute;left:50%;top:50%;z-index:2;
  width:32vw;height:44vh;transform:translate(-50%,-50%);
  border-radius:20px;overflow:hidden;
  box-shadow:0 50px 64px -40px rgba(0,0,0,.8);
  will-change:width,height,border-radius}
.ih-media-img{position:absolute;inset:0;background-size:cover;background-position:center}
.ih-media-veil{position:absolute;inset:0;background:rgba(8,18,17,.55)}

/* the split title rides over the picture.
   No mix-blend-mode here: blending against the line field inverted the type into
   unreadable pinks, so it is plain white with a soft shadow to hold contrast. */
.ih-title{position:relative;z-index:3;width:100%;text-align:center;pointer-events:none}
.ih-line{font-family:var(--serif);line-height:.94;color:#fff;will-change:transform;
  text-shadow:0 4px 34px rgba(6,14,13,.72),0 1px 3px rgba(6,14,13,.5)}
.ih-l1{font-weight:200;font-size:clamp(38px,8.4vw,132px);letter-spacing:.005em;text-transform:uppercase}
.ih-l2{font-weight:400;font-size:clamp(40px,8.8vw,138px);letter-spacing:-.02em;margin-top:.02em}
.ih-l2 em{font-style:italic}

.ih-sub{position:absolute;z-index:3;right:clamp(20px,6vw,90px);bottom:clamp(78px,11vh,116px);
  max-width:34ch;text-align:left;font-size:clamp(13.5px,1vw,16px);line-height:1.66;font-weight:400;
  color:#fff;text-shadow:0 2px 18px rgba(6,14,13,.85)}

.ih-hint{position:absolute;z-index:3;left:50%;bottom:clamp(26px,4vh,44px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(250,248,243,.8)}
.ih-hint svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;animation:ihBob 2s var(--ease) infinite}
@keyframes ihBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@media(max-width:820px){
  .ind-hero{height:150vh}
  .ih-media{width:64vw;height:38vh}
  .ih-sub{left:20px;right:20px;max-width:none;text-align:center;bottom:96px}
}

/* ============ INDUSTRY ROWS ============ */
/* the intro band stays dark so the white type reads; the rows below sit on ivory */
.inds{background:var(--ivory);padding:0 0 clamp(50px,8vh,100px)}
.inds .wrap{max-width:var(--maxw)}
.inds-band{background:linear-gradient(180deg,#0a1614 0%,#0d1f1c 62%,#102825 100%);
  padding:clamp(64px,10vh,120px) 0 clamp(70px,11vh,130px);margin-bottom:clamp(46px,7vh,88px)}
.inds-band .wrap{max-width:var(--maxw)}
.inds-intro{max-width:700px}
.inds-intro .eyebrow{color:var(--teal)}
.inds-intro h2{font-family:var(--serif);font-weight:800;font-size:clamp(32px,4.4vw,60px);
  letter-spacing:-.03em;line-height:1.04;color:#fff;margin-top:16px}
.inds-intro h2 em{font-style:italic;color:#7fe3d9}
.inds-intro p{font-size:clamp(16px,1.25vw,19.5px);color:rgba(250,248,243,.86);max-width:58ch;
  margin-top:20px;line-height:1.72;font-weight:400}

.ind-list{max-width:var(--maxw);margin:0 auto;padding:0 40px;
  display:flex;flex-direction:column;gap:clamp(52px,8vh,110px)}
.ind-row{--c:#0E9C93;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(28px,4vw,72px);align-items:center;
  opacity:0;transform:translateY(46px)}
.ind-row.in{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .95s var(--ease)}
.ind-row:nth-child(even) .ind-media{order:2}

.ind-media{position:relative;border-radius:20px;overflow:hidden;
  box-shadow:0 46px 90px -50px rgba(28,42,40,.7)}
.ind-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 32%,transparent),transparent 58%);
  opacity:0;transition:opacity .6s var(--ease)}
.ind-row:hover .ind-media::after{opacity:1}
.ind-shot{aspect-ratio:4/3;background-size:cover;background-position:center;
  filter:saturate(.94) contrast(1.02);transform:scale(1);
  transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.ind-row:hover .ind-shot{transform:scale(1.045);filter:saturate(1.02) contrast(1.04)}

.ind-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:17px;
  color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);
  border:1.5px solid color-mix(in srgb,var(--c) 28%,transparent);margin-bottom:20px;
  transition:transform .5s var(--ease),background .45s var(--ease),color .35s}
.ind-ic svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ind-row:hover .ind-ic{background:var(--c);color:#fff;border-color:transparent;transform:scale(1.06)}

.ind-body h3{font-family:var(--serif);font-weight:700;font-size:clamp(24px,2.9vw,40px);
  letter-spacing:-.026em;line-height:1.06;color:var(--ink)}
.ind-kicker{font-family:var(--disp);font-size:12.5px;letter-spacing:.05em;color:var(--c);
  margin-top:9px;text-transform:uppercase}
.ind-body > p:not(.ind-kicker){font-size:clamp(15px,1.1vw,17px);color:var(--ink-soft);
  line-height:1.74;margin-top:16px;max-width:52ch;font-weight:400}

.ind-pts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0}
.ind-pts li{font-family:var(--disp);font-size:11.5px;letter-spacing:.03em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--ivory);
  transition:border-color .4s var(--ease),color .35s}
.ind-row:hover .ind-pts li{border-color:color-mix(in srgb,var(--c) 34%,var(--line))}

.ind-stat{display:flex;align-items:baseline;gap:13px;margin-top:26px;
  padding-top:20px;border-top:1px solid var(--line)}
.ind-stat b{font-family:var(--serif);font-weight:700;font-size:clamp(26px,2.7vw,38px);
  letter-spacing:-.03em;color:var(--c);line-height:1}
.ind-stat span{font-family:var(--disp);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-mut)}

@media(max-width:880px){
  .ind-list{padding:0 20px}
  .ind-row{grid-template-columns:1fr;gap:22px}
  .ind-row:nth-child(even) .ind-media{order:0}
  .ind-ic{width:54px;height:54px;margin-bottom:16px}
}

/* ============ HANDOVER TO RESEARCH ============ */
/* dark the whole way, so the heading is white on dark rather than dark on mid-grey */
.to-res{position:relative;overflow:hidden;padding:clamp(70px,11vh,130px) 0 clamp(60px,10vh,120px);
  background:linear-gradient(180deg,#0c1a18 0%,#0a1513 55%,#080f0e 100%)}
.to-res .wrap{max-width:var(--maxw)}
.tr-head{max-width:660px}
.tr-head .eyebrow{color:var(--teal)}
.tr-head h2{font-family:var(--serif);font-weight:800;font-size:clamp(32px,4.4vw,58px);
  letter-spacing:-.03em;line-height:1.04;color:#fff;margin-top:16px}
.tr-head h2 em{font-style:italic;color:#7fe3d9}
.tr-head p{font-size:clamp(16px,1.2vw,19px);color:rgba(250,248,243,.84);max-width:58ch;
  margin-top:18px;line-height:1.72}

.tr-ring{position:relative;width:100%;height:clamp(330px,42vw,470px);
  margin:clamp(38px,6vh,70px) 0 0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.rc-tilt{transform-style:preserve-3d}
.rc-ring{position:relative;transform-style:preserve-3d;will-change:transform}
.rc-cell{position:absolute;inset:0;transform-style:preserve-3d}
.rc-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;
  background-size:cover;background-position:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.rc-back{transform:rotateY(180deg)}

/* glass control into Research */
.tr-go{display:block;width:fit-content;margin:clamp(40px,6vh,68px) auto 0;
  border-radius:999px;text-decoration:none;
  transition:transform .45s var(--ease)}
.tr-go:hover{transform:translateY(-3px)}
.tr-go-in{display:flex;align-items:center;gap:13px;padding:18px 40px;border-radius:999px;
  color:#fff;font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:.03em;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.34);
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .45s var(--ease)}
.tr-go:hover .tr-go-in{background:rgba(14,156,147,.34);border-color:rgba(127,227,217,.55);
  box-shadow:0 26px 60px -20px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.42)}
.tr-go-in svg{width:19px;height:19px}

@media(max-width:880px){
  .tr-ring{height:clamp(260px,60vw,340px)}
}