:root{
  --teal:#00aeb0;
  --deep-teal:#045754;
  --cream:#f7f3ea;
  --ink:#06131b;
  --edge:27px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;min-height:100%;background:#06131b;color:white;font-family:"Poppins",Arial,sans-serif}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}

.hero{
  position:relative;
  height:100svh;
  min-height:680px;
  overflow:hidden;
  background:#07131c;
  isolation:isolate;
}

.world,.world-bg,.world-shade,.world-vignette{position:absolute;inset:0}
.world{z-index:-4;background:#07131c;overflow:hidden}
.world-bg{
  opacity:0;
  background-size:cover;
  background-position:center 55%;
  transform:scale(1.085);
  transition:
    opacity 1480ms cubic-bezier(.18,.68,.16,1),
    transform 1720ms cubic-bezier(.16,.72,.22,1);
  will-change:opacity,transform;
}
.world-bg.active{opacity:1;transform:scale(1)}
.world-bg.exiting{opacity:0;transform:scale(.985)}
.world-shade{
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(3,12,19,.95) 0%,
    rgba(3,12,19,.88) 21%,
    rgba(3,12,19,.61) 37%,
    rgba(3,12,19,.20) 61%,
    rgba(3,12,19,.05) 100%);
}
.world-vignette{
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.10),transparent 36%,rgba(0,0,0,.28) 100%),
    radial-gradient(circle at 72% 42%,transparent 20%,rgba(0,0,0,.09) 64%,rgba(0,0,0,.25) 100%);
}

.topbar{
  height:92px;
  display:grid;
  grid-template-columns:290px 1fr 290px;
  align-items:center;
  padding:0 var(--edge);
  position:relative;
  z-index:20;
}
.logo{display:inline-flex;align-items:center}
.logo img{display:block;width:215px;height:auto}
.nav{
  display:flex;
  justify-content:center;
  gap:30px;
  text-transform:uppercase;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
}
.nav a{opacity:.9;transition:opacity .25s ease}
.nav a:hover{opacity:1}
.nav-actions{display:flex;justify-content:flex-end;align-items:center;gap:18px}
.nav-cta{
  border:1px solid rgba(255,255,255,.65);
  border-radius:999px;
  padding:14px 25px;
  text-transform:uppercase;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(6px);
}
.menu{
  border:0;background:transparent;width:32px;height:32px;
  display:flex;flex-direction:column;gap:5px;align-items:flex-end;justify-content:center;cursor:pointer;
}
.menu span{height:1px;background:white;display:block}
.menu span:first-child{width:21px}
.menu span:last-child{width:12px}

/*
  The hero copy and cinema share one full-width scene. This is intentional:
  card x-positions are now measured against the viewport composition rather
  than a right-side CSS column, which restores the foreground -> distance read.
*/
.hero-grid{
  position:absolute;
  left:0;right:0;
  top:92px;bottom:88px;
  z-index:5;
}
.hero-copy{
  position:absolute;
  left:var(--edge);
  top:50%;
  width:min(420px,31vw);
  transform:translateY(-53%);
  z-index:12;
}
.eyebrow{
  min-height:1.3em;
  margin:0 0 9px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:rgba(255,255,255,.62);
}
#headline{
  width:430px;
  max-width:30.5vw;
  height:1.84em;
  margin:0;
  overflow:visible;
  font-family:"Poppins",Arial,sans-serif;
  font-size:clamp(53px,4.45vw,68px);
  line-height:.92;
  letter-spacing:-.045em;
  font-weight:500;
}
#headline span{display:block;white-space:nowrap}
.accent{color:var(--teal);font-style:italic}
.copy-rule{width:58px;height:2px;background:var(--teal);margin:12px 0 11px}
#description{
  width:380px;
  max-width:29vw;
  height:4.75em;
  margin:0;
  overflow:hidden;
  font-size:14px;
  line-height:1.52;
  color:rgba(255,255,255,.82);
}
.actions{display:flex;gap:11px;margin-top:14px;min-height:50px}
.button{
  height:50px;
  padding:0 18px;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  white-space:nowrap;
  text-transform:uppercase;
  font-size:10px;
  font-weight:800;
  letter-spacing:.025em;
}
.button.primary{background:#08aeb3;border:1px solid #08aeb3;box-shadow:0 18px 50px rgba(0,174,176,.17)}
.button.secondary{background:rgba(8,17,26,.18);border:1px solid rgba(255,255,255,.47);backdrop-filter:blur(6px)}
.scroll-cue{
  margin-top:18px;
  border:0;background:none;color:white;padding:0;
  display:flex;align-items:center;gap:13px;
  text-transform:uppercase;font-size:10px;font-weight:700;cursor:pointer;
}
.scroll-icon{
  width:40px;height:40px;border:1px solid rgba(255,255,255,.56);border-radius:50%;
  display:grid;place-items:center;color:var(--teal);font-size:20px;
}

.cinema{
  position:absolute;
  inset:0;
  z-index:5;
  perspective:2200px;
  perspective-origin:72% 43%;
  overflow:visible;
  pointer-events:none;
}
.cards{
  position:absolute;
  inset:0;
  z-index:4;
  transform-style:preserve-3d;
  pointer-events:none;
}
.focus-transition{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:0;
}
.focus-transition.active{opacity:1}
.focus-transition-card{
  position:absolute;
  left:0;
  top:0;
  width:154px;
  height:auto;
  display:block;
  opacity:0;
  transform:translate3d(-50%,-50%,0) scale(1);
  transform-origin:center;
  will-change:transform,opacity,filter;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.28));
  backface-visibility:hidden;
}
.card{
  position:absolute;
  left:0;top:0;
  width:154px;
  aspect-ratio:941/1672;
  border:0;padding:0;background:transparent;
  transform:translate3d(0,0,0) translate3d(-50%,-50%,0);
  transform-origin:center;
  transform-style:preserve-3d;
  pointer-events:auto;
  cursor:pointer;
  will-change:transform,opacity;
  opacity:.8;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.28));
  backface-visibility:hidden;
}
.card-tilt{
  display:block;
  width:100%;height:100%;
  transform-origin:center;
  transform-style:preserve-3d;
  transform:scale(1);
  transition:transform 320ms cubic-bezier(.16,.72,.22,1);
  backface-visibility:hidden;
}

/* During the bidirectional takeover, hidden base cards must not accumulate
   hover/focus scaling behind the overlay. This keeps the reverse handoff
   pixel-identical even when the user's pointer remains over the focus slot. */
.hero.takeover-active .card-tilt{
  transform:scale(1) !important;
  transition:none !important;
}

.card img{
  display:block;
  width:100%;height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  backface-visibility:hidden;
}
.card:focus-visible{
  outline:2px solid rgba(0,174,176,.78);
  outline-offset:7px;
  border-radius:10px;
}
.card:focus-visible .card-tilt{transform:scale(1.026)}
@media(hover:hover) and (pointer:fine){
  .card:hover .card-tilt{transform:scale(1.026)}
  .timeline-item:hover{opacity:.92;transform:translateY(-1px)}
}

/*
  Static foreground figure. The crop is produced exclusively by scale/framing:
  the PNG continues below the hero and is clipped only by the hero viewport.
*/
.person{
  position:absolute;
  z-index:9;
  left:45.2%;
  top:24vh;
  height:118vh;
  width:auto;
  transform:translateX(-50%);
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 32px 38px rgba(0,0,0,.42));
}

.story-controls{
  position:absolute;
  right:var(--edge);
  bottom:102px;
  z-index:16;
  display:flex;
  align-items:center;
  gap:20px;
  width:min(610px,46vw);
}
.pause{
  flex:0 0 auto;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(5,16,25,.40);
  color:#fff;
  backdrop-filter:blur(6px);
  font-size:21px;
  cursor:pointer;
}
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);flex:1}
.timeline-track,.timeline-fill{
  position:absolute;
  left:12.5%;right:12.5%;top:9px;
  height:1px;
  background:rgba(255,255,255,.48);
  z-index:-1;
}
.timeline-fill{
  right:auto;
  width:0;
  height:2px;
  background:var(--teal);
  transition:width .62s cubic-bezier(.16,.72,.22,1);
}
.timeline-item{
  border:0;background:none;color:white;padding:0;
  text-transform:uppercase;font-size:9px;font-weight:700;letter-spacing:.03em;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  opacity:.65;cursor:pointer;
  transition:opacity 260ms ease,transform 260ms cubic-bezier(.16,.72,.22,1),color 260ms ease;
}
.timeline-item span{
  width:9px;height:9px;border-radius:50%;background:#091823;
  border:1px solid rgba(255,255,255,.75);
  transition:.3s;
}
.timeline-item.active{color:var(--teal);opacity:1}
.timeline-item.active span{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,174,176,.13)}

.principles{
  position:absolute;
  left:var(--edge);right:var(--edge);bottom:10px;
  height:74px;
  z-index:18;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(3,13,20,.61);
  border:1px solid rgba(255,255,255,.11);
  border-radius:12px;
  backdrop-filter:blur(10px);
  overflow:hidden;
}
.principles div{display:flex;flex-direction:column;justify-content:center;padding:0 18px;border-right:1px solid rgba(255,255,255,.10)}
.principles div:last-child{border-right:0}
.principles strong{font-size:13px;margin-bottom:4px}
.principles span{font-size:10px;line-height:1.45;color:rgba(255,255,255,.67)}

.swipe-hint{display:none}

.section-two{height:100vh;background:#eef0ed;color:#34434c;display:grid;place-items:center;font-family:"Poppins",Arial,sans-serif;font-size:52px}

@media(max-width:1366px){
  :root{--edge:26px}
  .topbar{height:82px;grid-template-columns:255px 1fr 255px}
  .logo img{width:190px}
  .nav{gap:34px;font-size:10px}
  .nav-cta{padding:12px 21px;font-size:10px}
  .hero-grid{top:82px;bottom:80px}
  .hero-copy{width:min(410px,31vw);transform:translateY(-52%)}
  .eyebrow{font-size:10px;margin-bottom:8px}
  #headline{font-size:clamp(51px,4.35vw,62px);max-width:31vw;height:1.84em}
  .copy-rule{margin:11px 0 10px}
  #description{font-size:13px;width:365px;max-width:28vw;height:4.75em}
  .actions{margin-top:13px;min-height:47px}
  .button{height:47px;padding:0 16px;font-size:9.5px;gap:12px}
  .scroll-cue{margin-top:16px}
  .scroll-icon{width:38px;height:38px}
  .card{width:150px}
  .story-controls{bottom:91px;width:min(555px,46vw)}
  .principles{bottom:9px;height:68px}
  .principles strong{font-size:12px}
  .principles span{font-size:9px}
}

@media(max-width:1120px){
  .nav{display:none}
  .topbar{grid-template-columns:1fr 1fr}
  .hero-copy{top:45%;width:390px;max-width:38vw}
  #headline{max-width:38vw;font-size:clamp(48px,5.2vw,58px)}
  #description{max-width:35vw}
  .person{left:47%;height:108vh;top:24vh}
  .card{width:138px}
  .story-controls{width:52vw}
  .principles{display:none}
}

@media(max-width:760px){
  :root{--edge:16px}
  .hero{
    height:100svh;
    min-height:0;
    overflow:hidden;
  }
  .topbar{
    height:62px;
    grid-template-columns:1fr auto;
    padding:0 var(--edge);
  }
  .logo img{width:148px}
  .logo-fallback{font-size:23px}
  .nav-cta{display:none}
  .menu{width:42px;height:42px}

  .hero-grid{top:62px;bottom:0}
  .hero-copy{
    top:16px;
    left:var(--edge);
    width:calc(100% - 32px);
    max-width:none;
    transform:none;
    z-index:13;
  }
  .eyebrow{font-size:9px;margin-bottom:6px;letter-spacing:.14em}
  #headline{
    width:100%;
    max-width:none;
    height:1.84em;
    font-size:clamp(38px,10.7vw,43px);
    line-height:.94;
    letter-spacing:-.043em;
  }
  #headline span{white-space:nowrap}
  .copy-rule{width:48px;margin:9px 0 8px}
  #description{
    width:min(92%,350px);
    max-width:none;
    height:4.55em;
    font-size:12.5px;
    line-height:1.48;
  }
  .actions{
    flex-direction:column;
    align-items:flex-start;
    gap:9px;
    margin-top:10px;
    min-height:0;
  }
  .button.primary{
    width:auto;
    height:43px;
    padding:0 16px;
    font-size:9px;
  }
  .button.secondary{
    width:auto;
    height:auto;
    padding:3px 0;
    border:0;
    background:transparent;
    backdrop-filter:none;
    font-size:9px;
    color:rgba(255,255,255,.84);
    justify-content:flex-start;
  }
  .scroll-cue{display:none}

  /* Dedicated portrait stage beneath the copy. Card coordinates are measured
     inside this region rather than squeezing desktop slots into the viewport. */
  .cinema{
    top:252px;
    bottom:60px;
    perspective:1750px;
    perspective-origin:66% 43%;
  }
  .card{
    width:90px;
    filter:drop-shadow(0 16px 22px rgba(0,0,0,.26));
  }
  .card:focus-visible{outline-offset:5px}
  .person{
    left:34%;
    top:auto;
    bottom:-38svh;
    height:78svh;
    transform:translateX(-50%);
    filter:drop-shadow(0 24px 30px rgba(0,0,0,.38));
  }
  .focus-transition-card{
    filter:drop-shadow(0 16px 22px rgba(0,0,0,.26));
  }

  /* Portrait-specific photography crops. */
  .world-bg[data-world="strategy"]{background-position:54% 55%}
  .world-bg[data-world="experience"]{background-position:62% 52%}
  .world-bg[data-world="demand"]{background-position:57% 56%}
  .world-bg[data-world="intelligence"]{background-position:60% 52%}
  .world-shade{
    background:
      linear-gradient(180deg,rgba(3,12,19,.90) 0%,rgba(3,12,19,.68) 25%,rgba(3,12,19,.24) 47%,rgba(3,12,19,.10) 72%,rgba(3,12,19,.24) 100%),
      linear-gradient(90deg,rgba(3,12,19,.36) 0%,rgba(3,12,19,.12) 55%,rgba(3,12,19,.04) 100%);
  }
  .world-vignette{
    background:
      linear-gradient(180deg,rgba(0,0,0,.08),transparent 40%,rgba(0,0,0,.25) 100%),
      radial-gradient(circle at 62% 58%,transparent 18%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.22) 100%);
  }

  .story-controls{
    left:10px;
    right:10px;
    bottom:10px;
    width:auto;
    gap:9px;
  }
  .pause{width:38px;height:38px;font-size:17px}
  .timeline{min-width:0}
  .timeline-track,.timeline-fill{top:7px}
  .timeline-item{
    gap:7px;
    font-size:7.5px;
    letter-spacing:.015em;
    min-width:0;
  }
  .timeline-item span{width:7px;height:7px}
  .timeline-item b{
    display:block;
    max-width:100%;
    white-space:nowrap;
  }

  .swipe-hint{
    display:flex;
    position:absolute;
    left:50%;
    bottom:57px;
    z-index:17;
    transform:translateX(-50%);
    align-items:center;
    gap:7px;
    color:rgba(255,255,255,.62);
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:8px;
    font-weight:700;
    opacity:0;
    pointer-events:none;
    transition:opacity 500ms ease,transform 500ms cubic-bezier(.16,.72,.22,1);
  }
  .hero.opening-complete .swipe-hint{opacity:.78;transform:translateX(-50%) translateY(0)}
  .swipe-hint.is-dismissed{opacity:0 !important;transform:translateX(-50%) translateY(4px) !important}
}

@media(max-width:389px){
  :root{--edge:14px}
  .logo img{width:140px}
  #headline{font-size:clamp(35px,10.5vw,39px)}
  #description{width:96%;font-size:12px}
  .cinema{top:244px;bottom:58px}
  .card{width:82px}
  .person{left:33%;height:76svh;bottom:-37svh}
  .story-controls{left:8px;right:8px;gap:7px}
  .pause{width:36px;height:36px}
  .timeline-item{font-size:7px;letter-spacing:0}
}

@media(max-width:760px) and (max-height:700px){
  .topbar{height:56px}
  .logo img{width:132px}
  .hero-grid{top:56px}
  .hero-copy{top:10px}
  .eyebrow{margin-bottom:4px}
  #headline{font-size:34px}
  .copy-rule{margin:7px 0 6px}
  #description{font-size:11.5px;height:4.4em;line-height:1.44}
  .actions{margin-top:7px;gap:6px}
  .button.primary{height:38px;padding:0 13px;font-size:8.5px}
  .button.secondary{font-size:8.5px}
  .cinema{top:202px;bottom:52px}
  .card{width:72px}
  .person{left:33%;height:70svh;bottom:-34svh}
  .story-controls{bottom:7px}
  .swipe-hint{bottom:49px}
}

@media(prefers-reduced-motion:reduce){
  .world-bg{transition:none}
  .timeline-fill{transition:none}
  .card-tilt,.timeline-item{transition:none}
}

/* Final cinematic opening: the first frame is fully assembled beneath a
   photographic exposure veil. Navigation is present first; the world emerges,
   the message lands, then the already-built carousel begins. */
.hero.is-booting .eyebrow,
.hero.is-booting #headline,
.hero.is-booting .copy-rule,
.hero.is-booting #description,
.hero.is-booting .actions,
.hero.is-booting .scroll-cue{
  opacity:0;
  transform:translateY(8px);
}

.hero.is-booting .topbar,
.hero.is-revealing .topbar{
  opacity:.58;
  transform:translateY(-3px);
}
.hero.is-revealing .topbar{
  opacity:1;
  transform:translateY(0);
  transition:opacity 820ms cubic-bezier(.16,.72,.22,1),transform 820ms cubic-bezier(.16,.72,.22,1);
}

.opening-veil{
  position:absolute;
  inset:0;
  z-index:19;
  pointer-events:auto;
  opacity:1;
  visibility:visible;
  background:
    radial-gradient(circle at 72% 42%,rgba(7,39,43,.32) 0%,rgba(5,22,29,.78) 38%,rgba(3,12,18,.97) 82%),
    linear-gradient(110deg,rgba(3,12,18,.98) 0%,rgba(4,15,22,.88) 42%,rgba(3,12,18,.93) 100%);
  backdrop-filter:blur(5px) brightness(.72) saturate(.84);
  -webkit-backdrop-filter:blur(5px) brightness(.72) saturate(.84);
  transition:
    opacity 1120ms cubic-bezier(.16,.72,.22,1),
    backdrop-filter 1120ms cubic-bezier(.16,.72,.22,1),
    -webkit-backdrop-filter 1120ms cubic-bezier(.16,.72,.22,1),
    visibility 0s linear 1120ms;
  will-change:opacity,backdrop-filter;
}
.opening-veil::after{
  content:'';
  position:absolute;
  inset:-8%;
  opacity:.55;
  background:radial-gradient(circle at 72% 42%,rgba(0,174,176,.11),transparent 34%);
  transform:scale(1.04);
  transition:opacity 1120ms cubic-bezier(.16,.72,.22,1),transform 1320ms cubic-bezier(.16,.72,.22,1);
}
.hero.is-revealing .opening-veil,
.hero.is-ready .opening-veil{
  opacity:0;
  backdrop-filter:blur(0) brightness(1) saturate(1);
  -webkit-backdrop-filter:blur(0) brightness(1) saturate(1);
  visibility:hidden;
  pointer-events:none;
}
.hero.is-revealing .opening-veil::after,
.hero.is-ready .opening-veil::after{opacity:0;transform:scale(1)}

/* The Strategy photograph performs the only opening camera move. The woman
   remains physically static; the cards settle together as one distant system. */
.hero.is-booting .world-bg[data-world=\"strategy\"].active{
  transform:scale(1.045);
  filter:brightness(.68) saturate(.82);
}
.hero.is-revealing .world-bg[data-world=\"strategy\"].active{
  transform:scale(1);
  filter:brightness(1) saturate(1);
  transition:
    opacity 1120ms cubic-bezier(.16,.72,.22,1),
    transform 1380ms cubic-bezier(.16,.72,.22,1),
    filter 1120ms cubic-bezier(.16,.72,.22,1);
}
.hero.is-booting .cards{
  transform:scale(.975);
  transform-origin:72% 43%;
}
.hero.is-revealing .cards{
  transform:scale(1);
  transform-origin:72% 43%;
  transition:transform 1260ms cubic-bezier(.16,.72,.22,1);
}

/* Keep the bottom interaction chrome out of the opening message beat. */
.hero.is-booting .story-controls,
.hero.is-booting .principles,
.hero.is-revealing .story-controls,
.hero.is-revealing .principles{
  opacity:0;
  transform:translateY(7px);
}
.hero.opening-ui-ready .story-controls,
.hero.opening-ui-ready .principles{
  opacity:1;
  transform:translateY(0);
  transition:opacity 620ms cubic-bezier(.16,.72,.22,1),transform 620ms cubic-bezier(.16,.72,.22,1);
}

.pause:disabled{opacity:.42;cursor:default}
.logo{min-height:40px}
.logo-fallback{
  display:none;
  font-family:"Poppins",Arial,sans-serif;
  font-size:27px;
  letter-spacing:-.035em;
  color:white;
}
.logo-fallback.visible{display:inline-block}

@media(prefers-reduced-motion:reduce){
  .opening-veil,
  .opening-veil::after,
  .hero.is-revealing .topbar,
  .hero.is-revealing .cards,
  .hero.opening-ui-ready .story-controls,
  .hero.opening-ui-ready .principles{transition:none}
  .hero.is-booting .world-bg[data-world=\"strategy\"].active{transform:scale(1);filter:none}
}


/* Mobile opening composition uses the same portrait spatial center as runtime. */
@media(max-width:760px){
  .hero.is-booting .cards,
  .hero.is-revealing .cards{transform-origin:66% 43%}
}


/* ======================================================================
   Refinement v1.5.4
   AccelaBrand typography alignment
   ====================================================================== */
html,body{font-family:"Poppins",Arial,Helvetica,sans-serif}
#headline{font-family:"Poppins",Arial,sans-serif;font-weight:600;line-height:.94;letter-spacing:-.055em}
#headline .accent{font-style:normal;font-weight:600}
.logo-fallback{font-family:"Poppins",Arial,sans-serif;font-weight:600;letter-spacing:-.04em}