/* Version 1.4 — stability pass, fluid carousel and visible interactive geometry */
:root {
  --v4-card-width: clamp(300px, 28vw, 420px);
  --v4-gold: #e6b66f;
  --v4-gold-soft: rgba(230,182,111,.42);
  --v4-panel: rgba(10,27,45,.86);
}

/* No content is hidden while an observer catches up. The page may animate in,
   but all sections remain immediately present and readable. */
.reveal,
.reveal[data-reveal="left"],
.reveal[data-reveal="right"],
.reveal[data-reveal="scale"],
.reveal.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  transition-delay: 0s !important;
}

/* The old canvas was underneath almost opaque sections and therefore invisible. */
.hex-field { display: none !important; }

/* Section-local interactive hexagon layer. It is always faintly visible and
   becomes brighter around the pointer. */
.hero,
.services,
.news,
.career,
.site-footer {
  isolation: isolate;
}
.hex-reactive {
  --hex-x: 50%;
  --hex-y: 50%;
  --hex-dx: 0px;
  --hex-dy: 0px;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hex-reactive::before,
.hex-reactive::after {
  content: "";
  position: absolute;
  inset: -90px;
  transform: translate3d(var(--hex-dx), var(--hex-dy), 0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cpath d='M42 1 82 24v48L42 95 2 72V24Z' fill='none' stroke='%23ddb06f' stroke-opacity='.34' stroke-width='.7'/%3E%3Cpath d='M42 17 68 32v32L42 79 16 64V32Z' fill='none' stroke='%23ddb06f' stroke-opacity='.12' stroke-width='.55'/%3E%3C/svg%3E");
  background-size: 84px 96px;
}
.hex-reactive::before {
  opacity: .105;
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.hex-reactive::after {
  opacity: .76;
  filter: drop-shadow(0 0 9px rgba(230,182,111,.26));
  mask-image: radial-gradient(390px circle at var(--hex-x) var(--hex-y), #000 0 13%, rgba(0,0,0,.9) 34%, transparent 72%);
  transition: opacity .35s ease;
}
.hero__inner,
.services > .section__head,
.services > .service-carousel,
.news > .section__head,
.news > .news-grid,
.career > .career__copy,
.career > .career__job,
.site-footer > .site-footer__top,
.site-footer > .site-footer__bottom,
.site-footer > .site-footer__draft {
  position: relative;
  z-index: 2;
}

/* Typography/detail pass */
.section__head h2,
.story__copy h2,
.contact__copy h2,
.career__copy h2 {
  text-wrap: balance;
  letter-spacing: -.052em;
}
.section__head { align-items: end; }
.eyebrow { letter-spacing: .22em; }
.button,
.text-link,
.news-link,
.service-card button { letter-spacing: .13em; }
.services { min-height: 880px; padding-bottom: 100px; scroll-margin-top: 84px; }
.services::after { opacity: .7; }

/* Rebuilt carousel: native scrolling, no absolute-position coverflow and no
   card collisions. Cards animate continuously based on their distance from
   the viewport centre. */
.service-carousel {
  position: relative;
  min-height: 550px;
  margin-top: 24px;
  overflow: hidden;
  perspective: none;
  touch-action: pan-y;
}
.service-carousel::before,
.service-carousel::after {
  display: block !important;
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  bottom: 82px;
  width: clamp(34px, 7vw, 130px);
  pointer-events: none;
}
.service-carousel::before {
  left: 0;
  background: linear-gradient(90deg, #061321 0%, rgba(6,19,33,.92) 25%, transparent 100%);
}
.service-carousel::after {
  right: 0;
  background: linear-gradient(-90deg, #061321 0%, rgba(6,19,33,.92) 25%, transparent 100%);
}
.service-slider.service-deck {
  --edge-space: max(24px, calc(50% - var(--v4-card-width) / 2));
  position: relative;
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2vw, 28px);
  width: 100%;
  height: auto;
  min-height: 475px;
  margin: 0;
  padding: 20px 0 34px;
  overflow-x: auto;
  overflow-y: visible;
  cursor: grab;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge-space);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  user-select: none;
  touch-action: pan-y;
  transform: none !important;
}
.service-slider.service-deck::-webkit-scrollbar { display: none; }
.service-slider.service-deck::before,
.service-slider.service-deck::after {
  content: "";
  flex: 0 0 var(--edge-space);
  width: var(--edge-space);
  height: 1px;
  background: none;
  filter: none;
  transform: none;
}
.service-slider.service-deck.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.service-card {
  --distance: 1;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  flex: 0 0 var(--v4-card-width);
  width: var(--v4-card-width) !important;
  min-height: 430px;
  padding: 34px 34px 30px;
  border-radius: 25px;
  border: 1px solid rgba(255,255,255,.105);
  opacity: calc(1 - var(--distance) * .24) !important;
  filter: saturate(calc(1 - var(--distance) * .12)) brightness(calc(1 - var(--distance) * .06)) !important;
  transform: translateY(calc(var(--distance) * 16px)) scale(calc(1 - var(--distance) * .045)) !important;
  transform-origin: 50% 70%;
  z-index: 1 !important;
  pointer-events: auto !important;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background:
    radial-gradient(420px circle at var(--spot-x,50%) var(--spot-y,30%), rgba(230,182,111,.13), transparent 44%),
    linear-gradient(145deg, rgba(18,39,62,.96), rgba(5,16,29,.985));
  box-shadow: 0 28px 75px rgba(0,0,0,.22);
  transition:
    opacity .26s ease,
    filter .26s ease,
    transform .36s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .4s ease;
  will-change: transform, opacity;
}
.service-card::before { border-radius: 24px; }
.service-card::after {
  left: 34px;
  right: 34px;
  top: 112px;
  opacity: .42;
  transform: scaleX(.3);
}
.service-card.is-active {
  --distance: 0 !important;
  border-color: rgba(230,182,111,.64);
  box-shadow: 0 40px 100px rgba(0,0,0,.46), 0 0 0 1px rgba(230,182,111,.055) inset, 0 0 52px rgba(174,112,54,.09);
}
.service-card.is-active::after { opacity: 1; transform: scaleX(1); }
.service-card:hover { border-color: rgba(230,182,111,.76); }
.service-card .icon-chip {
  width: 50px;
  height: 50px;
  margin-bottom: 70px;
}
.service-card__number { font-size: 4.35rem; }
.service-card h3 {
  min-height: 2.05em;
  max-width: 100%;
  font-size: clamp(1.85rem, 2.35vw, 2.55rem);
  line-height: 1;
  text-wrap: balance;
}
.service-card p { margin-top: 18px; font-size: .94rem; line-height: 1.7; }
.service-card button {
  left: 34px;
  right: 34px;
  bottom: 28px;
  opacity: .72;
  transform: none;
}
.service-card.is-active button { opacity: 1; }
.service-carousel__footer {
  position: relative;
  z-index: 10;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  width: min(1180px, calc(100% - 42px));
  margin: 12px auto 0;
}
.service-carousel__progress { height: 2px; }
.service-carousel__progress span { height: 2px; transition: transform .42s cubic-bezier(.2,.8,.2,1); }
.service-carousel__status strong { font-size: 2.15rem; }

/* Slightly more premium news layout without delaying image appearance. */
.news-feature__visual,
.news-feature,
.news-card { background-attachment: scroll; }
.news-feature__visual { background-position: center; }
.news-feature h3 { text-wrap: balance; }
.news-card { transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease; }
.news-card:hover { transform: translateY(-7px); }

@media (max-width: 1100px) {
  :root { --v4-card-width: min(390px, 72vw); }
  .services { min-height: 820px; }
  .service-carousel { min-height: 520px; }
}
@media (max-width: 720px) {
  :root { --v4-card-width: min(84vw, 355px); }
  .hex-reactive::after { opacity: .42; }
  .service-carousel::before,
  .service-carousel::after { width: 24px; bottom: 72px; }
  .service-slider.service-deck { min-height: 445px; padding-top: 10px; }
  .service-card { min-height: 405px; padding: 28px; }
  .service-card::after { left: 28px; right: 28px; top: 102px; }
  .service-card button { left: 28px; right: 28px; }
  .service-card .icon-chip { margin-bottom: 58px; }
  .service-carousel__footer { width: calc(100% - 24px); grid-template-columns: auto 1fr; }
  .service-carousel__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hex-reactive::after { display: none; }
  .service-slider.service-deck { scroll-behavior: auto; }
  .service-card { transition: none; }
}