/* ==========================================================================
   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::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%);
  }
}

.hero__video-toggle {
  position: absolute; right: 48px; top: 112px; z-index: 5;
  padding: 10px 16px; border: 1px solid rgba(255,255,255,.6); border-radius: 24px;
  background: rgba(9,29,81,.65); color: var(--white); font: inherit; font-size: 14px; cursor: pointer;
}
.hero__video-toggle[hidden] { display: none; }
.hero__video-toggle:focus-visible { outline: 2px solid white; outline-offset: 4px; }

/* Frame: corner brackets, edge rules and centre notches */
.hero__corner { position: absolute; width: 44px; height: 44px; }
.hero__corner--tl { left: 0; top: 0; transform: rotate(90deg); }
.hero__corner--tr { left: 1396px; top: 0; transform: rotate(180deg); }
.hero__corner--br { left: 1396px; top: calc(var(--frame-h) - 44px); transform: rotate(-90deg); }
.hero__corner--bl { left: 0; top: calc(var(--frame-h) - 44px); }
.hero__rule { position: absolute; background: var(--white); }
.hero__rule--top { left: 44px; top: 4px; width: 1352px; height: 1px; }
.hero__rule--bottom { left: 44px; top: calc(var(--frame-h) - 5px); width: 1352px; height: 1px; }
.hero__rule--left { left: 4px; top: 43px; width: 1px; height: calc(var(--frame-h) - 88px); }
.hero__rule--right { left: 1435px; top: 44px; width: 1px; height: calc(var(--frame-h) - 88px); }
.hero__notch { position: absolute; left: 692px; width: 56px; height: 4px; background: var(--white); }
.hero__notch--top { top: 0; }
.hero__notch--bottom { top: calc(var(--frame-h) - 4px); }
.hero__tick { position: absolute; background: var(--white); }
.hero__tick--left { left: 470px; top: calc(var(--cy) - 3px); width: 56px; height: 3px; }
.hero__tick--right { left: 914px; top: calc(var(--cy) - 3px); width: 56px; height: 3px; }
.hero__tick--up { left: 718.5px; top: calc(var(--cy) - 226px); width: 3px; height: 32px; }
.hero__tick--down { left: 718.5px; top: calc(var(--cy) + 194px); width: 3px; height: 32px; }

/* Emblem: blurred ring, inner disc and the bird mark */
.hero__ring {
  position: absolute; left: 542px; top: calc(var(--cy) - 178px); width: 356px; height: 356px; border-radius: 50%;
  background: rgba(0,0,0,.01);
  -webkit-mask: radial-gradient(circle, transparent 88px, #000 89px);
  mask: radial-gradient(circle, transparent 88px, #000 89px);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.hero__ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.44); }
.hero__ring::after { content: ""; position: absolute; inset: 87px; border-radius: 50%; border: 2px solid rgba(255,255,255,.44); }
.hero__disc {
  position: absolute; left: 659px; top: calc(var(--cy) - 61px); width: 122px; height: 122px; border-radius: 50%;
  background: rgba(0,0,0,.04); box-shadow: 0 0 0 16px rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.hero__bird { position: absolute; left: 692px; top: calc(var(--cy) - 28px); width: 56px; height: 56px; }

.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: cover; object-position: bottom; }
.svc-feature__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 36.108%, #fff 92.483%); }
.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: 689px; height: 460px; }
.process__line--2 { left: 511.25px; top: 485px; height: 364px; }
.process__line--3 { left: 927.25px; top: 485px; height: 364px; }
.process__line--4 { left: 1135.25px; top: 689px; height: 460px; }
.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: 1181px; }
.process__num--2 { left: 472px; top: 881px; }
.process__num--3 { left: 888px; top: 881px; }
.process__num--4 { left: 1096px; top: 1181px; }
.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: 729px; height: 224px; }
.process__label--2 { left: 476px; top: 501px; height: 193px; }
.process__label--3 { left: 892px; top: 501px; height: 264px; }
.process__label--4 { left: 1100px; top: 705px; 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); }
  .hero__grain { height: calc(var(--frame-h) - 9px) !important; }
  .hero__fade { top: calc(var(--hero-h) - 227px) !important; }
  .hero__corner { width: 48px; height: 48px; }
  .hero__corner--tl { left: 0; top: 0; transform: none; }
  .hero__corner--tr { left: 354px; top: 0; transform: rotate(90deg); }
  .hero__corner--br { left: 354px; top: calc(var(--frame-h) - 48px); transform: rotate(180deg); }
  .hero__corner--bl { left: 0; top: calc(var(--frame-h) - 48px); transform: rotate(-90deg); }
  .hero__rule--top { left: 48px; top: 7px; width: 306px; }
  .hero__rule--bottom { left: 48px; top: calc(var(--frame-h) - 9px); width: 306px; }
  .hero__rule--left { left: 8px; top: 48px; height: calc(var(--frame-h) - 96px); }
  .hero__rule--right { left: 394px; top: 48px; height: calc(var(--frame-h) - 96px); }
  .hero__notch { left: 50%; width: 68px; height: 8px; transform: translateX(-50%); }
  .hero__notch--bottom { top: calc(var(--frame-h) - 8px); }
  .hero__tick--left { left: calc(50% - 132px); top: calc(var(--cy) - 2px); width: 32px; height: 2px; }
  .hero__tick--right { left: calc(50% + 100px); top: calc(var(--cy) - 2px); width: 32px; height: 2px; }
  .hero__tick--up { left: calc(50% - 1px); top: calc(var(--cy) - 132px); width: 2px; height: 32px; }
  .hero__tick--down { left: calc(50% - 1px); top: calc(var(--cy) + 100px); width: 2px; height: 32px; }
  .hero__ring {
    left: calc(50% - 88px); top: calc(var(--cy) - 88px); width: 176px; height: 176px;
    -webkit-mask: radial-gradient(circle, transparent 44px, #000 45px); mask: radial-gradient(circle, transparent 44px, #000 45px);
  }
  .hero__ring::after { inset: 43px; }
  .hero__disc { left: calc(50% - 28px); top: calc(var(--cy) - 28px); width: 56px; height: 56px; box-shadow: 0 0 0 8px rgba(255,255,255,.08); }
  .hero__bird { left: calc(50% - 12px); top: calc(var(--cy) - 12px); width: 24px; height: 24px; }
  .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-transform: uppercase; text-align: left;
    white-space: normal;
  }
  .hero__video-toggle { top: 88px; right: 24px; font-size: 12px; padding: 8px 12px; }

  /* 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; text-transform: capitalize; }
  .pillar.is-featured .pillar__desc { top: 256px; width: 236px; }
  .corporate .deck-pager { top: 712px; }

  .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: 204px; height: 276px; }
  .process__line--2 { left: calc(50% - 74.75px); top: 124px; height: 276px; }
  .process__line--3 { left: calc(50% + 74.25px); top: 124px; height: 276px; }
  .process__line--4 { left: calc(50% + 146.25px); top: 204px; height: 276px; }
  .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: 212px; height: 143px; }
  .process__label--2 { left: calc(50% - 94px); top: 132px; height: 124px; }
  .process__label--3 { left: calc(50% + 55px); top: 132px; height: 169px; }
  .process__label--4 { left: calc(50% + 127px); top: 212px; 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: center; }

/* 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: 436px; margin-top: 84px; }
  .corporate__stage .pillar-deck { top: 60px; }
  .corporate__stage .deck-pager { top: 380px; }
  .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; }
}