.fig-note{margin-top:clamp(24px,3.4vh,38px);font-size:clamp(13px,1vw,15px);
  line-height:1.72;color:rgba(28,59,56,.76);max-width:86ch}

/* ============================================================
   ENGAGEMENTS — proof, in their own words.
   Full-viewport hero, a spinning 3D ring of sector testimonials
   with a still centre reader, a figures band, the sectors served,
   a pull-quote divider and a close.
   ============================================================ */

/* ============ HERO ============ */
.eng-hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;
  background:#0a1614}
.eng-hero-field{position:absolute;inset:0;z-index:0;pointer-events:none}
/* a quiet pocket so the headline always wins over the field */
.eng-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,22,20,.92) 0%,rgba(10,22,20,.7) 42%,rgba(10,22,20,.2) 78%,transparent 100%),
    linear-gradient(0deg,rgba(10,22,20,.72) 0%,transparent 30%,transparent 72%,rgba(10,22,20,.5) 100%)}
.eng-hero .wrap{position:relative;z-index:2;max-width:var(--maxw);padding-top:var(--nav-h);width:100%}
.eng-hero .eyebrow{color:var(--teal)}
.eng-hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(42px,6.6vw,108px);
  letter-spacing:-.037em;line-height:.97;color:#fff;margin-top:16px;max-width:16ch}
.eng-hero h1 em{font-style:italic;color:#7fe3d9}
.eng-hero .lead{font-size:clamp(16px,1.3vw,20px);color:rgba(250,248,243,.86);max-width:58ch;
  margin-top:26px;line-height:1.7}

/* a live micro-quote that signals "testimonials" from the first frame */
.eng-hero-quote{display:flex;align-items:center;gap:14px;margin-top:38px;min-height:26px}
.eng-hero-quote i{width:26px;height:1px;background:rgba(250,248,243,.3);flex:0 0 auto}
.eng-hero-quote b{font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(15px,1.25vw,19px);color:#fff;letter-spacing:-.01em}
.eng-hero-quote span{font-family:var(--disp);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,248,243,.55)}
.ehq-rot{opacity:1;transition:opacity .5s var(--ease)}
.ehq-rot.out{opacity:0}

.eng-hero-cue{position:absolute;left:50%;bottom:clamp(24px,4vh,44px);transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--disp);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(250,248,243,.6)}
.eng-hero-cue svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;animation:engBob 2s var(--ease) infinite}
@keyframes engBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:820px){.eng-hero{min-height:100svh}.eng-hero h1{max-width:none}}

/* ============ TESTIMONIALS: 3D RING + CENTRE READER ============ */
.et{position:relative;background:#0a1614;
  padding:clamp(64px,9vh,116px) 0 clamp(70px,10vh,128px);overflow:hidden}
/* morphing fluid field behind the ring */
.et-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.et-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 30%,transparent 34%,rgba(8,18,16,.72) 100%)}
.et-head,.et-stage,.et-note{position:relative;z-index:2}
.et-head{max-width:var(--maxw);margin:0 auto clamp(20px,3vh,40px);padding:0 6vw;text-align:center}
/* the morphing field behind this band runs through the brand teal itself, so the
   old var(--teal) eyebrow was teal-on-teal and effectively invisible. Near-white
   holds against every part of the blob, from #0a1614 through to bright teal. */
.et-head .eyebrow{color:#FAF8F3;justify-content:center;font-weight:600;
  /* white tops out near 3.2:1 on the brand teal, which is thin for 12px letter
     spaced caps, so a tight dark halo does the rest of the separating work */
  text-shadow:0 1px 2px rgba(6,16,15,.7),0 2px 14px rgba(6,16,15,.5)}
.et-head h2{font-family:var(--serif);font-weight:800;font-size:clamp(28px,4vw,54px);
  letter-spacing:-.03em;line-height:1.04;color:#fff;margin-top:14px}
.et-head h2 em{font-style:italic;color:#7fe3d9}
.et-head p{font-size:clamp(14.5px,1.1vw,17px);color:rgba(250,248,243,.66);max-width:56ch;
  margin:16px auto 0;line-height:1.7}

/* the stage carries the perspective; the ring rotates inside it */
.et-stage{position:relative;width:100%;height:clamp(600px,84vh,860px);
  perspective:1600px;touch-action:none;user-select:none;cursor:grab;margin-top:clamp(10px,2vh,24px)}
.et-stage.is-grabbing{cursor:grabbing}
.et-ring{position:absolute;left:50%;top:50%;transform:translateX(-50%);transform-style:preserve-3d}

/* many small glass cards, so the ring reads as densely stocked */
.et-card{position:absolute;left:50%;top:50%;
  width:120px;height:150px;margin:-75px 0 0 -60px;
  display:flex;align-items:flex-start;justify-content:flex-start;
  padding:14px;border-radius:15px;transform-style:preserve-3d;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 40px -26px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14);
  color:#fff;overflow:hidden;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.et-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--ca,#0E9C93) 50%,transparent),transparent 72%)}
.et-card > *{position:relative;z-index:1}
.et-card q{quotes:none;font-family:var(--serif);font-weight:800;font-size:40px;line-height:.62;
  color:color-mix(in srgb,var(--ca,#0E9C93) 82%,#fff)}
.et-card b{display:none}                          /* the sector shows in the reader, not on the busy ring */
.et-card.is-active,.et-card:hover{border-color:color-mix(in srgb,var(--ca,#0E9C93) 78%,transparent);
  box-shadow:0 26px 46px -22px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--ca,#0E9C93) 55%,transparent),
    inset 0 1px 0 rgba(255,255,255,.24)}

/* the still, legible reader boxed at the dead centre of the ring */
.et-reader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  width:min(620px,80vw);pointer-events:none;--c:#0E9C93}
.et-box{position:relative;text-align:center;border-radius:30px;
  padding:clamp(30px,3.4vw,48px) clamp(26px,3vw,52px);
  /* transparent glass, no backdrop-filter (would thrash over the morphing field) */
  background:linear-gradient(160deg,rgba(9,20,18,.42),rgba(9,20,18,.6));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -46px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12)}
.et-box::before{content:"";position:absolute;inset:0;border-radius:30px;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 0%,color-mix(in srgb,var(--c) 20%,transparent),transparent 66%)}
.et-box > *{position:relative}
.et-r-mark{font-family:var(--serif);font-weight:800;font-size:64px;line-height:.5;color:var(--c);
  display:block;margin-bottom:14px}
.et-r-quote{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2vw,28px);
  letter-spacing:-.02em;line-height:1.34;color:#fff}
.et-r-meta{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.et-r-dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:0 0 auto}
.et-r-role{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#fff}
.et-r-sep{width:14px;height:1px;background:rgba(250,248,243,.3)}
.et-r-sector{font-family:var(--disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(250,248,243,.62)}

.et-note{max-width:var(--maxw);margin:clamp(14px,2vh,26px) auto 0;padding:0 6vw;text-align:center;
  font-size:12.5px;letter-spacing:.02em;color:rgba(250,248,243,.44)}

@media(max-width:820px){
  .et-stage{height:clamp(520px,86vh,680px)}
  .et-card{width:92px;height:116px;margin:-58px 0 0 -46px;padding:11px;border-radius:12px}
  .et-card q{font-size:30px}
  .et-reader{width:min(440px,88vw)}
  /* on small screens cards pass behind the box, so make the glass denser to keep the text clean */
  .et-box{border-radius:24px;background:linear-gradient(160deg,rgba(9,20,18,.82),rgba(9,20,18,.9));
    box-shadow:0 30px 60px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.12)}
  .et-r-mark{font-size:50px}.et-r-quote{font-size:clamp(17px,4.6vw,21px)}
}

/* ============ FIGURES BAND: proof in numbers ============ */
.fig{position:relative;overflow:hidden;background:var(--ivory);padding:clamp(64px,10vh,120px) 0}
.fig .wrap{position:relative;z-index:2;max-width:var(--maxw)}
/* soft brand aurora behind the numbers (ported AnimatedRays, tuned light) */
.fig-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 42%,transparent 72%);
  mask-image:radial-gradient(ellipse at 100% 0%,#000 42%,transparent 72%)}
.fig-aurora,.fig-aurora-anim{
  --stripe:#FAF8F3;
  --stripes:repeating-linear-gradient(100deg,var(--stripe) 0%,var(--stripe) 7%,transparent 10%,transparent 12%,var(--stripe) 16%);
  --rainbow:repeating-linear-gradient(100deg,#0E9C93 10%,#5FC9BF 15%,#F0854B 20%,#CFE9E3 25%,#0B857D 30%)}
.fig-aurora{background-image:var(--stripes),var(--rainbow);
  background-size:300%,200%;background-position:50% 50%,50% 50%;filter:blur(11px) saturate(150%)}
.fig-aurora-anim{position:absolute;inset:0;background-image:var(--stripes),var(--rainbow);
  background-size:200%,100%;mix-blend-mode:multiply;
  animation:figAurora 62s linear infinite}
@keyframes figAurora{from{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}
@media(prefers-reduced-motion:reduce){.fig-aurora-anim{animation:none}}
.fig-head{max-width:640px;margin-bottom:clamp(34px,5vh,58px)}
.fig-head .eyebrow{color:var(--teal-deep)}
.fig-head h2{font-family:var(--serif);font-weight:800;font-size:clamp(28px,3.8vw,50px);
  letter-spacing:-.03em;line-height:1.05;color:var(--ink);margin-top:14px}
.fig-head h2 em{font-style:italic;color:var(--amber-deep)}
/* The bordered grid put four framed cells around figures that are strong
   enough to stand on open ground. Rules between them, nothing around them. */
.fig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.fig-cell{padding:clamp(20px,2.6vw,34px) clamp(18px,2.2vw,30px) clamp(20px,2.6vw,34px) 0}
.fig-cell + .fig-cell{padding-left:clamp(24px,2.8vw,40px);border-left:1px solid var(--line)}
.fig-cell:hover{background:rgba(241,237,228,.94)}
/* These carry the credibility, so they are set at display size rather than
   as body figures. 8vw at four across is roughly 100px on a desktop. */
.fig-n{display:flex;align-items:flex-start;font-family:var(--serif);font-weight:800;
  font-size:clamp(46px,7.4vw,104px);letter-spacing:-.05em;line-height:.86;
  color:var(--amber-deep)}
.fig-n .pre{font-size:.44em;font-weight:700;margin-top:.16em;margin-right:.02em}
.fig-n small{font-size:.34em;font-weight:700;letter-spacing:-.02em;margin-top:.22em;margin-left:.06em}
.fig-d{font-size:clamp(13px,1vw,15.5px);line-height:1.62;color:rgba(28,59,56,.80);
  margin-top:clamp(16px,2vh,24px);max-width:26ch}
@media(max-width:900px){.fig-grid{grid-template-columns:repeat(2,1fr)}.fig-cell{min-height:170px}}
@media(max-width:520px){.fig-grid{grid-template-columns:1fr}}

/* ============ SECTORS SERVED ============ */
.sec{background:var(--surface);padding:clamp(60px,9vh,110px) 0}
.sec .wrap{max-width:var(--maxw)}
.sec-head{max-width:620px;margin-bottom:clamp(30px,4vh,50px)}
.sec-head .eyebrow{color:var(--teal-deep)}
.sec-head h2{font-family:var(--serif);font-weight:800;font-size:clamp(26px,3.6vw,46px);
  letter-spacing:-.03em;line-height:1.06;color:var(--ink);margin-top:14px}
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.sec-chip{--c:#0E9C93;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;
  padding:clamp(20px,2vw,28px);border-radius:18px;background:var(--ivory);
  border:1px solid var(--line);box-shadow:0 22px 40px -34px var(--shadow);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease)}
.sec-chip:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 45%,var(--line));
  box-shadow:0 34px 52px -30px var(--shadow)}
.sec-chip i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.sec-chip i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.sec-chip b{font-family:var(--serif);font-weight:750;font-size:clamp(15px,1.3vw,18px);
  letter-spacing:-.02em;color:var(--ink);line-height:1.16}
.sec-chip span{font-size:12.5px;color:var(--ink-mut);line-height:1.5}
@media(max-width:900px){.sec-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.sec-grid{grid-template-columns:1fr}}

/* ============ PULL-QUOTE DIVIDER (light, rotating) ============ */
.pq{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--ivory) 0%,var(--surface) 48%,var(--ivory) 100%);
  padding:clamp(76px,13vh,150px) 0;text-align:center}
.pq-field{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16}
.pq::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%,transparent 46%,color-mix(in srgb,var(--ivory) 70%,transparent))}
.pq .wrap{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:0 6vw}
.pq q{quotes:none;display:block;font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(25px,4.2vw,54px);letter-spacing:-.03em;line-height:1.14;color:var(--ink);
  min-height:1.2em}
.pq q::before{content:"\201C";color:var(--teal);margin-right:.04em}
.pq q::after{content:"\201D";color:var(--teal);margin-left:.02em}
.pq-attr{margin-top:clamp(20px,3.2vh,36px);
  font-family:var(--disp);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-deep)}
/* rotator fade */
.pq-rot{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pq-rot.out{opacity:0;transform:translateY(8px)}

/* ============ CLOSE / CTA (text left, button right) ============ */
.eng-cta{background:var(--ivory);padding:clamp(70px,11vh,130px) 0}
.eng-cta .wrap{max-width:var(--maxw);margin:0 auto;padding:0 6vw;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(30px,5vw,72px)}
.eng-cta-text{max-width:34ch}
.eng-cta h2{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4vw,56px);
  letter-spacing:-.03em;line-height:1.04;color:var(--ink)}
.eng-cta p{font-size:clamp(15px,1.2vw,18px);color:var(--ink-soft);margin-top:18px;line-height:1.7}
.eng-cta-row{flex:0 0 auto;display:flex}
@media(max-width:820px){
  .eng-cta .wrap{flex-direction:column;align-items:flex-start;text-align:left}
}