/* ==========================================================================
   Home page — desktop (1440 x 5903) and mobile (402 x 3846)
   ========================================================================== */

.page--home { height: auto; --hero-h: 1208px; --frame-h: calc(var(--hero-h) - 184px); --cy: calc(var(--frame-h) / 2 - 1px); }

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; left: 0; top: 0; width: 1440px; height: var(--hero-h); color: var(--white); overflow: hidden; }
.hero__photo { position: absolute; left: 0; top: 0; width: 1440px; height: var(--hero-h); overflow: hidden; }
.hero__grain { height: calc(var(--frame-h) - 6px) !important; }
.hero__fade { top: calc(var(--hero-h) - 368px) !important; }
.hero__photo img, .hero__photo video { width: 100%; height: 100%; object-fit: cover; }
.hero__photo picture { display: contents; }   /* the image sizes against the frame, as before */
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 65%, #091d51 85%),
    radial-gradient(ellipse 1343.4px 1127px at 720px 604px, rgba(0,0,0,0) 40%, rgba(0,0,0,.24) 100%),
    linear-gradient(90deg, rgba(9,29,81,.25) 0%, rgba(9,29,81,.25) 100%);
}
@media (max-width: 899px) {
  .hero__photo::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 65%, #091d51 85%),
      radial-gradient(ellipse 1016.9px 853.65px at 545px 457.5px, rgba(0,0,0,0) 40%, rgba(0,0,0,.24) 100%),
      linear-gradient(90deg, rgba(9,29,81,.25) 0%, rgba(9,29,81,.25) 100%);
  }
}

/* Ticks around the emblem */
.hero__tick { position: absolute; background: var(--white); }
.hero__tick--left { left: 592px; top: calc(var(--cy) - 1.5px); width: 28.5px; height: 1.5px; }
.hero__tick--right { left: 819.5px; top: calc(var(--cy) - 1.5px); width: 28.5px; height: 1.5px; }
.hero__tick--up { left: 719.25px; top: calc(var(--cy) - 115.5px); width: 1.5px; height: 16.5px; }
.hero__tick--down { left: 719.25px; top: calc(var(--cy) + 99px); width: 1.5px; height: 16.5px; }

/* Emblem: blurred ring, inner disc and the bird mark — the Figma emblem at half scale (356px ring -> 182px) */
.hero__ring {
  position: absolute; left: 629px; top: calc(var(--cy) - 91px); width: 182px; height: 182px; border-radius: 50%;
  background: rgba(0,0,0,.01);
  -webkit-mask: radial-gradient(circle, transparent 45px, #000 46px);
  mask: radial-gradient(circle, transparent 45px, #000 46px);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero__ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.44); }
.hero__ring::after { content: ""; position: absolute; inset: 44.5px; border-radius: 50%; border: 1px solid rgba(255,255,255,.44); }
.hero__disc {
  position: absolute; left: 689px; top: calc(var(--cy) - 31px); width: 62px; height: 62px; border-radius: 50%;
  background: rgba(0,0,0,.04); box-shadow: 0 0 0 8px rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero__bird { position: absolute; left: 706px; top: calc(var(--cy) - 14px); width: 28px; height: 28px; }

.hero__statement {
  position: absolute; left: 162px; bottom: calc(var(--hero-h) - var(--frame-h) + 44px); width: 1116px;
  font-size: 18px; line-height: 24px; font-weight: 600; text-align: center; color: var(--ice);
  white-space: pre-wrap;
}

/* --------------------------------------------------------------------------
   2. Corporate Security (Frame 24)
   -------------------------------------------------------------------------- */
.corporate { position: relative; left: 0; width: 1440px; height: 1148px; background: var(--navy); color: var(--ice); }
.corporate__lines { position: absolute; width: 720px; height: 1616px; }
.corporate__lines--r { left: 720px; top: -196px; }
.corporate__lines--l { left: 0; top: -236px; }
/* Ghost title runs as a continuous marquee behind the cards (two copies, looped) */
.corporate__marquee { position: absolute; left: 0; top: 544px; display: flex; gap: 240px; white-space: nowrap; will-change: transform; animation: corporate-marquee 60s linear infinite; }
@keyframes corporate-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 120px)); } }
.corporate__ghost {
  position: static; flex: none;
  font-size: 316px; line-height: 1; font-weight: 400; text-transform: capitalize; white-space: nowrap;
  color: transparent; mix-blend-mode: screen; opacity: .24;
  background: var(--ghost-gradient);
  -webkit-background-clip: text; background-clip: text;
}
.corporate__copy {
  position: absolute; left: 228px; top: 23px; width: 984px;
  font-size: 32px; line-height: 36px; font-weight: 500; text-align: center; color: var(--steel);
  white-space: pre-wrap;
}
.corporate__copy strong { font-weight: inherit; color: var(--white); }
.corporate__cta { position: absolute; left: 519px; top: 335px; }

/* Pillars carousel: compact 320x348 at y 800, featured 320x404 at y 744,
   3px gutters, row starting at x 76 (Figma Frames 26-29). */
.pillar-deck { position: absolute; left: 76px; top: 744px; width: 1288px; height: 404px; overflow: hidden; --deck-step: 323; --deck-featured-slot: 1; }
.pillar-deck__track { display: flex; gap: 3px; align-items: flex-start; will-change: transform; }
.pillar-deck__track.is-animating { transition: transform var(--dur-slow) var(--ease); }
.corporate--static .pillar-deck__track { justify-content: center; will-change: auto; }
.pillar {
  position: relative; flex: none; width: 320px; height: 348px; margin-top: 56px; border-radius: 28px 28px 0 0;
  background: linear-gradient(34.305deg, rgba(0,0,0,.08) 0%, rgba(255,255,255,.08) 100%);
  -webkit-backdrop-filter: blur(72px); backdrop-filter: blur(72px);
  transition: height var(--dur-slow) var(--ease), margin-top var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease);
}
.pillar.is-featured { height: 404px; margin-top: 0; background: linear-gradient(38.382deg, rgba(0,0,0,.08) 0%, rgba(255,255,255,.08) 100%); }
.pillar__tag {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  padding: 8px 16px; border-radius: 100px;
  background: rgba(0,0,0,.08); border: 1px solid rgba(215,223,226,.16);
  font-size: 14px; line-height: 20px; text-transform: capitalize; white-space: nowrap; color: var(--ice);
  transition: top var(--dur-slow) var(--ease);
}
.pillar__title {
  position: absolute; left: 25px; top: 128px; width: 270px;
  font-size: 40px; line-height: 44px; text-transform: capitalize; text-align: center; color: rgba(255,255,255,.16);
  transition: top var(--dur-slow) var(--ease);
}
.pillar.is-featured .pillar__title { top: 152px; }
.pillar__desc {
  position: absolute; left: 50%; top: 300px; width: var(--w, 270px); transform: translateX(-50%);
  font-size: 14px; line-height: 16px; font-weight: 300; text-align: center; color: var(--ice);
  transition: top var(--dur-slow) var(--ease);
}
.pillar.is-featured .pillar__desc { top: 356px; }
.corporate .deck-arrow { top: 946px; }

/* --------------------------------------------------------------------------
   3. Services + Global network (Group 38)
   -------------------------------------------------------------------------- */
.services { position: relative; left: 0; width: 1440px; height: 1820px; background: var(--white); }
.services__bg { position: absolute; left: 0; top: 0; width: 1440px; height: 1820px; overflow: hidden; mix-blend-mode: luminosity; }
.services__bg img { position: absolute; left: -34%; top: 0; width: 168%; height: 111.5%; max-width: none; opacity: .32; }
.services__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 80%, #fff 100%); }
.services__ghost {
  position: absolute; left: 76px; top: 117px; width: 1288px;
  font-size: 316px; line-height: 1; text-transform: capitalize; text-align: center; white-space: nowrap;
  color: transparent; opacity: .12;
  background: var(--ghost-gradient-gray);
  -webkit-background-clip: text; background-clip: text;
}

.svc-card__lines { position: absolute; width: 305.217px; height: 685.043px; }
.svc-card__lines--a { left: 305.22px; top: -129.04px; }
.svc-card__lines--b { left: 0; top: -146px; }
.svc-card__index { position: absolute; left: 24px; top: 32px; font-size: 56px; line-height: 1; font-weight: 500; text-transform: capitalize; opacity: .16; white-space: nowrap; }
.svc-card__title { position: absolute; left: 24px; top: 348px; width: 204px; font-size: 24px; line-height: 1; font-weight: 500; text-transform: capitalize; }
.svc-card__icon {
  position: absolute; left: 24px; top: 268px; width: 56px; height: 56px; padding: 18px; border-radius: 88px;
  border: 1.5px solid #ccc; display: flex; align-items: center;
}
.svc-card__icon img { width: 20px; height: 20px; }

.svc-feature__photo { position: absolute; left: 8px; top: 8px; width: 404px; height: 380px; border-radius: 20px; overflow: hidden; }
.svc-feature__photo img { width: 100%; height: 100%; object-fit: contain; object-position: top; }
.svc-feature__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 46%, #fff 60%); }   /* fades at the foot of the photo, which fills the top 60% of the box */
.svc-feature__icon {
  position: absolute; left: 50%; top: 336px; transform: translateX(-50%);
  padding: 8px; border-radius: 99px; border: 1.5px solid rgba(23,123,235,.36);
}
.svc-feature__icon span {
  display: flex; align-items: center; width: 56px; height: 56px; padding: 18px; border-radius: 88px;
  background: var(--icon-gradient), var(--blue);
}
.svc-feature__icon img { width: 20px; height: 20px; }
.svc-feature__title { position: absolute; left: 44px; top: 432px; width: 332px; font-size: 36px; line-height: 1; font-weight: 600; text-transform: capitalize; text-align: center; }
.svc-feature__desc { position: absolute; left: 32px; top: 476px; width: 356px; font-size: 16px; line-height: 16px; text-align: center; opacity: .7; }
.services__cta { position: absolute; left: 568px; top: 908px; width: 304px; }

.global { position: absolute; left: 0; top: 1040px; width: 1440px; height: 780px; overflow: hidden; }
.global img { width: 1440px; height: 780px; }
.services__fade { position: absolute; left: 0; top: 1613px; width: 1440px; height: 207px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%); }
.services__global-title {
  position: absolute; left: 247px; top: 1760px; width: 946px;
  font-size: 32px; line-height: 36px; font-weight: 500; text-align: center; color: var(--black); white-space: pre-wrap;
}

/* --------------------------------------------------------------------------
   4. Process (bird silhouette, arcs, numbered steps)
   -------------------------------------------------------------------------- */
.process { position: relative; left: 0; width: 1440px; height: 1069px; color: var(--navy-deep); }
.process__bird { position: absolute; left: -2px; top: 76px; width: 1444px; height: 1365px; mix-blend-mode: luminosity; }
.process__arc-outer { position: absolute; left: 295.25px; top: 860.25px; width: 849.5px; height: 424.75px; }
.process__arc-inner { position: absolute; left: 423.25px; top: 988.25px; width: 593.5px; height: 296.75px; }
.process__line { position: absolute; width: 1.5px; background: rgba(8,21,56,.16); }
.process__line--1 { left: 301.25px; top: 839px; height: 281px; }   /* ends 21px above its number, as 02 and 03 do */
.process__line--2 { left: 511.25px; top: 596px; height: 264px; }
.process__line--3 { left: 927.25px; top: 596px; height: 264px; }
.process__line--4 { left: 1135.25px; top: 818px; height: 302px; }
.process__num {
  position: absolute; height: 56px; padding: 20px; display: flex; align-items: center; justify-content: center;
  background: var(--white); font-size: 32px; line-height: 1; font-weight: 500; white-space: nowrap;
}
.process__num--1 { left: 264px; top: 1141px; }   /* 01 and 04 sit 40px above the design so the footer panel never covers them */
.process__num--2 { left: 472px; top: 881px; }
.process__num--3 { left: 888px; top: 881px; }
.process__num--4 { left: 1096px; top: 1141px; }
.process__label {
  position: absolute; width: 24px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; font-weight: 500; text-transform: capitalize; white-space: nowrap;
}
.process__label span { display: inline-block; flex: none; transform: rotate(-90deg); }
.process__label--1 { left: 266px; top: 839px; height: 224px; }
.process__label--2 { left: 476px; top: 596px; height: 193px; }
.process__label--3 { left: 892px; top: 596px; height: 264px; }
.process__label--4 { left: 1100px; top: 815px; height: 211px; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 899px) {
  .page--home { --hero-h: 852px; --frame-h: calc(var(--hero-h) - 72px); --cy: calc(var(--frame-h) / 2 + 14px); }

  /* 1. Hero */
  .hero { width: 100%; }
  .hero__photo { left: calc(50% - 851px); width: 1090px; height: calc(var(--hero-h) + 63px); }
  /* The offset above frames the Figma still; a video, or an image made for phones, is centred
     on the screen instead. */
  .hero__photo--video, .hero__photo--mobile-image { left: 0; width: 100%; }
  .hero__grain { height: calc(var(--frame-h) - 9px) !important; }
  .hero__fade { top: calc(var(--hero-h) - 227px) !important; }
  .hero__tick--left { left: calc(50% - 101px); top: calc(var(--cy) - 1.5px); width: 24.5px; height: 1.5px; }
  .hero__tick--right { left: calc(50% + 76.5px); top: calc(var(--cy) - 1.5px); width: 24.5px; height: 1.5px; }
  .hero__tick--up { left: calc(50% - 0.75px); top: calc(var(--cy) - 101px); width: 1.5px; height: 24.5px; }
  .hero__tick--down { left: calc(50% - 0.75px); top: calc(var(--cy) + 76.5px); width: 1.5px; height: 24.5px; }
  .hero__ring {
    left: calc(50% - 67.5px); top: calc(var(--cy) - 67.5px); width: 135px; height: 135px;
    -webkit-mask: radial-gradient(circle, transparent 33.75px, #000 34.75px); mask: radial-gradient(circle, transparent 33.75px, #000 34.75px);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .hero__ring::before, .hero__ring::after { border-width: 1.5px; }
  .hero__ring::after { inset: 33px; }
  .hero__disc {
    left: calc(50% - 21.5px); top: calc(var(--cy) - 21.5px); width: 43px; height: 43px; box-shadow: 0 0 0 6px rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .hero__bird { left: calc(50% - 9px); top: calc(var(--cy) - 9px); width: 18px; height: 18px; }
  .hero__statement {
    left: 50%; bottom: calc(var(--hero-h) - var(--frame-h) + 48px); width: 342px; transform: translateX(-50%); margin-left: 0;
    font-size: 12px; line-height: 16px; font-weight: 500; text-align: left;
    white-space: normal;
  }

  /* 2. Corporate Security — 1256px wide frame, cards spill past both edges */
  .corporate { width: 100%; height: 768px; }   /* 696px design + room for the pager below the cards */
  .corporate__lines { width: 270px; height: 608.928px; }
  .corporate__lines--r { left: 50%; top: -68.93px; }
  .corporate__lines--l { left: calc(50% - 270px); top: -84px; }
  .corporate__copy { left: 50%; top: 24px; width: 354px; transform: translateX(-50%); font-size: 14px; line-height: 16px; }
  .corporate__cta { left: 50%; top: 208px; width: 242px; transform: translateX(-50%); }
  .corporate__marquee { top: 332px; gap: 96px; animation-duration: 30s; }
  @keyframes corporate-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 48px)); } }
  .corporate__ghost { font-size: 88px; }
  /* Pillars carousel — featured 284x304 at x 59 / y 392, compact 284x256 at y 440, 16px gutters */
  .pillar-deck { left: -241px; top: 392px; width: auto; height: 304px; overflow: visible; --deck-step: 300; --deck-featured-slot: 1; }
  .pillar-deck__track { gap: 16px; }
  .pillar { width: 284px; height: 256px; margin-top: 48px; background: linear-gradient(29.49deg, rgba(0,0,0,.08) 0%, rgba(255,255,255,.08) 100%); }
  .pillar.is-featured { height: 304px; margin-top: 0; background: linear-gradient(33.884deg, rgba(0,0,0,.08) 0%, rgba(255,255,255,.08) 100%); }
  .pillar__tag { padding: 6px 16px; font-size: 12px; left: 71px; top: -32px; transform: none; }
  .pillar.is-featured .pillar__tag { left: 50%; top: 16px; transform: translateX(-50%); }
  .pillar__title { left: 16px; top: 56px; width: 252px; font-size: 36px; line-height: 40px; }
  .pillar.is-featured .pillar__title { top: 104px; }
  .pillar__desc { left: 142px; top: 208px; width: 188px; font-size: 12px; }   /* sentence case, as on desktop */
  .pillar.is-featured .pillar__desc { top: 256px; width: 236px; }
  /* The bottom 72px of the section is a plain strip (the grain stops above it) holding the
     counter, centred. Both are measured from the section's bottom edge, so they stay together
     however many lines the copy above wraps to on a given phone. */
  .corporate:not(.corporate--static) > .grain.mobile-only { height: calc(100% - 72px) !important; }
  .corporate > .deck-pager { top: auto; bottom: 20px; }

  .corporate--static { height: auto; min-height: 768px; padding: 392px 0 32px; }
  .corporate--static .pillar-deck { position: relative; left: auto; top: auto; width: 284px; height: auto; margin: 0 auto; }
  .corporate--static .pillar-deck__track { flex-direction: column; align-items: stretch; }
  .corporate--static .pillar {
    display: flex; flex-direction: column; align-items: center; gap: 32px;
    height: auto; min-height: 304px; margin-top: 0; padding: 16px; border-radius: 28px;
  }
  .corporate--static .pillar .pillar__tag,
  .corporate--static .pillar .pillar__title,
  .corporate--static .pillar .pillar__desc { position: static; transform: none; width: 100%; }
  .corporate--static .pillar .pillar__tag { width: auto; max-width: 100%; white-space: normal; text-align: center; }
  .corporate--static .pillar .pillar__title,
  .corporate--static .pillar .pillar__desc { overflow-wrap: anywhere; }
  .corporate--static .pillar .pillar__desc { margin-top: auto; }

  /* 3. Services + Global */
  .services { width: 100%; height: 1078px; }
  .services__bg { left: 50%; width: 402px; height: 692px; transform: translateX(-50%); }
  .services__bg img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .services__ghost {
    left: 50%; top: 76px; width: 354px; transform: translateX(-50%); font-size: 76px;
  }
  .svc-card__lines--a { top: -162.04px; }
  .svc-card__lines--b { top: -179px; }
  .svc-card__index { font-size: 40px; }
  .svc-card__title { top: 272px; }
  .svc-card__icon { top: 192px; }
  .svc-feature__photo { width: 322px; height: 300px; }
  .svc-feature__icon { top: 252px; }
  .svc-feature__title { left: 36px; top: 340px; width: 266px; font-size: 24px; }
  .svc-feature__desc { left: 36px; top: 372px; width: 266px; font-size: 12px; }
  .services__pager {
    position: absolute; left: 50%; top: 604px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 16px; padding: 4px 0;
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    font-size: 18px; line-height: 20px; font-weight: 500; color: var(--black); white-space: nowrap;
  }
  .services__pager img { width: 24px; height: 24px; }
  .services__pager img:last-child { transform: rotate(180deg); }
  .services__pager span { color: rgba(0,0,0,.24); }
  .services__pager b { font-weight: inherit; color: var(--black); }
  .services__pager i { font-style: normal; }
  .services__cta { left: 50%; top: 664px; width: 304px; height: 48px; transform: translateX(-50%); padding: 14px 32px; font-size: 14px; }
  .global { left: 50%; top: 745.7px; width: 402px; height: 279px; transform: translateX(-50%); overflow: visible; }
  .global img { width: 402px; height: 279px; }
  .services__fade { left: 50%; top: 870px; width: 402px; height: 154px; transform: translateX(-50%); }
  .services__global-title { left: 50%; top: 986px; width: 354px; transform: translateX(-50%); font-size: 14px; line-height: 16px; text-transform: uppercase; }

  /* 4. Process */
  .process { width: 100%; height: 540px; }
  .process__bird { left: 50%; top: 0; width: 402px; height: 381px; transform: translateX(-50%); }
  .process__arc-outer { left: calc(50% - 164.5px); top: 407.5px; width: 329px; height: 164.5px; }
  .process__arc-inner { left: calc(50% - 128.5px); top: 443.5px; width: 257px; height: 128.5px; }
  .process__line--1 { left: calc(50% - 148.75px); top: 267px; height: 211px; }
  .process__line--2 { left: calc(50% - 74.75px); top: 229px; height: 169px; }
  .process__line--3 { left: calc(50% + 74.25px); top: 229px; height: 169px; }
  .process__line--4 { left: calc(50% + 146.25px); top: 260px; height: 220px; }
  .process__num { height: 32px; padding: 12px; font-size: 16px; }
  .process__num--1 { left: calc(50% - 169px); top: 484px; }
  .process__num--2 { left: calc(50% - 97px); top: 404px; }
  .process__num--3 { left: calc(50% + 52px); top: 404px; }
  .process__num--4 { left: calc(50% + 124px); top: 484px; }
  .process__label { width: 16px; font-size: 14px; line-height: 16px; }
  .process__label--1 { left: calc(50% - 168px); top: 267px; height: 143px; }
  .process__label--2 { left: calc(50% - 94px); top: 229px; height: 124px; }
  .process__label--3 { left: calc(50% + 55px); top: 229px; height: 169px; }
  .process__label--4 { left: calc(50% + 127px); top: 260px; height: 134px; }

}

/* --------------------------------------------------------------------------
   Services carousel (desktop). Cards share Figma's compact (252x432, y 373)
   and featured (420x576, y 301) geometry with 16px gutters; the row starts at
   x -26 so the outer cards peek in from the edges as in the design. The track
   is moved by js/deck.js; the featured card is the one in the centre slot.
   -------------------------------------------------------------------------- */
.svc-deck { position: absolute; left: -26px; top: 301px; width: 1492px; height: 576px; --deck-step: 268; --deck-featured-slot: 2; }
.svc-deck__track { display: flex; gap: 16px; align-items: flex-start; will-change: transform; }
.svc-deck__track.is-animating { transition: transform var(--dur-slow) var(--ease); }
.deck-card {
  position: relative; flex: none; width: 252px; height: 432px; margin-top: 72px; border-radius: 28px; overflow: hidden;
  background: var(--white); color: var(--black);
  transition: width var(--dur-slow) var(--ease), height var(--dur-slow) var(--ease), margin-top var(--dur-slow) var(--ease);
}
.deck-card.is-featured { width: 420px; height: 576px; margin-top: 0; }
.deck-card__compact, .deck-card__feature { position: absolute; left: 0; top: 0; transition: opacity var(--dur-slow) var(--ease); }
.deck-card__compact { width: 252px; height: 432px; }
.deck-card__feature { width: 420px; height: 576px; opacity: 0; pointer-events: none; }
.deck-card.is-featured .deck-card__compact { opacity: 0; pointer-events: none; }
.deck-card.is-featured .deck-card__feature { opacity: 1; pointer-events: auto; }
.deck-card .svc-feature__photo { left: 8px; top: 8px; }
.deck-card .svc-feature__icon { top: 336px; }
/* Title and copy flow together so a two-line title pushes the copy down instead of overlapping it */
.deck-card__text { position: absolute; left: 32px; top: 432px; width: 356px; }
.deck-card .svc-feature__title { position: static; width: 332px; margin: 0 auto 8px; }
.deck-card .svc-feature__desc { position: static; width: 356px; }
.deck-card .svc-feature__photo img { object-position: top; }

/* Prev / next — the design's 56px round icon button (shared by both carousels) */
.deck-arrow {
  position: absolute; width: 56px; height: 56px; padding: 15px; border-radius: 88px; z-index: 2;
  background: var(--white); border: 1.5px solid #ccc; box-shadow: 0 8px 14px rgba(0,0,0,.12);
  transition: border-color var(--dur) var(--ease), translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.deck-arrow img { width: 24px; height: 24px; transition: transform var(--dur) var(--ease); }
.deck-arrow--prev { left: 24px; }
.deck-arrow--next { right: 24px; }
.deck-arrow--next img { transform: rotate(180deg); }
.deck-arrow:hover { border-color: var(--blue); translate: 0 -2px; box-shadow: 0 10px 20px rgba(8,21,56,.14); }
.deck-arrow--prev:hover img { transform: translateX(-2px); }
.deck-arrow--next:hover img { transform: rotate(180deg) translateX(-2px); }
.deck-arrow:active { translate: 0 0; }
.services .deck-arrow { top: 561px; }

/* Services carousel — mobile geometry (featured 338x456 at x 32 / y 132,
   compact 248x344 at y 188, 16px gutters; the row starts at x -232 so the
   previous card peeks in from the left as in the design) */
@media (max-width: 899px) {
  .svc-deck { left: -232px; top: 132px; width: auto; height: 456px; --deck-step: 264; --deck-featured-slot: 1; }
  .deck-card { width: 248px; height: 344px; margin-top: 56px; border-radius: 28px; }
  .deck-card.is-featured { width: 338px; height: 456px; margin-top: 0; }
  .deck-card__compact { width: 248px; height: 344px; }
  .deck-card__feature { width: 338px; height: 456px; }
  .deck-card__text { left: 36px; top: 340px; width: 266px; }
  .deck-card .svc-feature__icon { top: 252px; }
  .deck-card .svc-feature__title { width: 266px; margin-bottom: 8px; }
  .deck-card .svc-feature__desc { width: 266px; }
  .deck-arrow { display: none !important; }
  .services__pager img { cursor: pointer; }
}

/* Pager (mobile): shared by both carousels; the light variant sits on navy */
@media (max-width: 899px) {
  .deck-pager {
    position: absolute; left: calc(50% + .5px); transform: translateX(-50%);
    display: flex; align-items: center; gap: 16px; padding: 4px 0;
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    font-size: 18px; line-height: 20px; font-weight: 500; color: var(--black); white-space: nowrap;
  }
  .deck-pager img { width: 24px; height: 24px; cursor: pointer; }
  .deck-pager img:last-child { transform: rotate(180deg); }
  .deck-pager span { color: rgba(0,0,0,.24); }
  .deck-pager b { font-weight: inherit; color: var(--black); }
  .deck-pager i { font-style: normal; }
  .deck-pager--light { color: var(--white); }
  .deck-pager--light img { filter: invert(1); }
  .deck-pager--light span { color: rgba(255,255,255,.4); }
  .deck-pager--light b { color: var(--white); }
}

/* Editable homepage copy grows without covering the cards or buttons. */
.corporate { height: auto; min-height: 1148px; }
.corporate__intro { position: relative; padding-top: 23px; text-align: center; }
.corporate__intro .corporate__copy { position: relative; left: auto; top: auto; margin: 0 auto; overflow-wrap: anywhere; }
.corporate__intro .corporate__cta { position: relative; left: auto; top: auto; max-width: 984px; margin-top: 60px; white-space: normal; overflow-wrap: anywhere; }   /* copy 23 + 252 + 60 = Figma 335 */
.corporate__stage { position: relative; min-height: 604px; margin-top: 153px; }
.corporate__stage .corporate__marquee { top: 0; }
.corporate__stage .pillar-deck { top: 200px; }
.corporate__stage .deck-arrow { top: 402px; }
.services { height: auto; min-height: 1820px; padding-top: 1760px; }
.services__global-title { position: relative; top: auto; left: auto; margin: 0 auto -12px; overflow-wrap: anywhere; }
.process__label span { white-space: nowrap; }
@media (max-width: 899px) {
  .corporate, .corporate--static { min-height: 768px; padding: 0; }
  .corporate__intro { padding-top: 24px; }
  .corporate__intro .corporate__copy { transform: none; }
  .corporate__intro .corporate__cta { width: 242px; max-width: 354px; margin-top: 24px; transform: none; }
  .corporate__stage { min-height: 460px; margin-top: 84px; }   /* cards (to 364px) + 24px + the 72px counter strip */
  .corporate__stage .pillar-deck { top: 60px; }
  .corporate--static .corporate__stage { min-height: 0; padding: 60px 0 32px; }
  .corporate--static .corporate__stage .pillar-deck { top: auto; }
  .services { min-height: 1078px; padding-top: 986px; padding-bottom: 60px; }
  .services__global-title { top: auto; left: auto; transform: none; }
}