@charset "utf-8";
/* =========================================================================
   SEM-B — GSAP Scroll Animations
   Animation-only CSS. Never overrides:
     • #333333 body text  • #2C7CD8 accent  • NotoSans font stack
   ========================================================================= */

/* ==========================================================================
   PHASE 1 — Foundation: initial hidden states for GSAP-controlled elements
   ========================================================================== */

/*
 * Generic "clip reveal" wrapper — elements that will be revealed via
 * clip-path wipe driven by GSAP. Start fully clipped (hidden).
 * GSAP animates clip-path from inset(0 100% 0 0) → inset(0 0 0 0).
 */
.clip-reveal {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

/*
 * Split-text heading mask — each visual line is wrapped in an
 * overflow:hidden span by JS. The inner span starts translated down
 * behind the mask. GSAP slides it up.
 */
.line-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.line-mask .line-inner {
  display: inline-block;
  transform: translateY(110%);
}

/*
 * Body paragraph entrance — simple opacity + translateY.
 * Calmer than headings: 20px shift, 0.5s.
 */
.para-reveal {
  opacity: 0;
  transform: translateY(20px);
}

/* ==========================================================================
   PHASE 2 — Morphing nav pill
   ========================================================================== */

/*
 * The morphing pill is an absolutely-positioned div behind nav items.
 * It uses GSAP to animate x and width via getBoundingClientRect().
 *
 * We override the existing .gnb-indicator (CSS-only version in modern.css)
 * so GSAP takes full control of position/size. The CSS transitions on
 * .gnb-indicator are disabled — GSAP handles all motion.
 */
.gnb-pill { display:none !important;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  /* Start transparent — GSAP sets opacity when first hovered */
  opacity: 0;
  /* Brand blue for active state, soft bg for hover — GSAP switches */
  background: var(--c-bg-soft, #f5f6fb);
  will-change: transform, width, opacity;
}

/* Active-state variant: when pill is over the current page tab */
.gnb-pill.is-active {
  background: var(--c-primary, #1428a0);
}



/* ==========================================================================
   PHASE 4 — Hero Ambient Background & Parallax
   ========================================================================== */

/* Ambient blobs container — sits behind the text but over the hero image */
.ambient-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0; /* Between background image and .visual_inner (z-index: 1) */
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: screen;
}

.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform, opacity;
}

/* Specific blob colors derived from brand accent (#2C7CD8) and analogues */
.ambient-blob.b1 {
  width: 60vw; height: 60vw;
  max-width: 600px; max-height: 600px;
  background: rgba(44, 124, 216, 0.4);
  top: -10%; left: -10%;
}

.ambient-blob.b2 {
  width: 50vw; height: 50vw;
  max-width: 500px; max-height: 500px;
  background: rgba(100, 200, 255, 0.3);
  bottom: -20%; right: -10%;
}

.ambient-blob.b3 {
  width: 40vw; height: 40vw;
  max-width: 400px; max-height: 400px;
  background: rgba(20, 40, 160, 0.5); /* var(--c-primary) */
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   PHASE 6 — History Alternating Vertical Timeline
   No pinning. All items are in normal document flow; zero overlap.
   ========================================================================== */

/* Outer container — centred, generous vertical padding around items */
.history-timeline {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px 80px;
}

/* Vertical line wrapper — absolutely centred on the x-axis */
.history-timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

/* SVG fills its parent (the line wrapper) completely */
.history-timeline-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Faint background track — full height, always visible, drawn by JS */
.timeline-track {
  fill: none;
  stroke: rgba(44, 124, 216, 0.15);
  stroke-width: 2;
}

/* Animated fill — stroke-dasharray/dashoffset set and scrubbed by GSAP */
.timeline-fill {
  fill: none;
  stroke: var(--c-accent, #2C7CD8);
  stroke-width: 2.5;
  stroke-linecap: round;
  will-change: stroke-dashoffset;
}

/* Each milestone row — flex, direction flips per data-side */
.history-timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 72px;
  z-index: 1;
}

/* Right-side: content sits right of centre line */
.history-timeline-item[data-side="right"] {
  flex-direction: row;
  justify-content: flex-end;
  padding-right: calc(50% + 36px);
  padding-left: 0;
  /* flip: content is pushed to the RIGHT half */
  flex-direction: row-reverse;
  padding-right: 0;
  padding-left: calc(50% + 36px);
}

/* Left-side: content sits left of centre line */
.history-timeline-item[data-side="left"] {
  flex-direction: row;
  justify-content: flex-end;
  padding-right: calc(50% + 36px);
  padding-left: 0;
}

/* Dot — sits exactly on the centre line */
.timeline-dot {
  position: absolute;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(44, 124, 216, 0.2);
  border: 2px solid rgba(44, 124, 216, 0.35);
  z-index: 2;
  will-change: transform, background-color;
}

.timeline-dot.is-active {
  background: var(--c-accent, #2C7CD8);
  border-color: var(--c-accent, #2C7CD8);
}

/* Content card */
.timeline-content {
  background: #ffffff;
  border: 1px solid rgba(44, 124, 216, 0.1);
  border-radius: 16px;
  box-shadow:
    0 2px 16px rgba(20, 40, 160, 0.07),
    0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 32px 36px;
  max-width: 440px;
  width: 100%;
  will-change: opacity, transform;
}

/* Right-side card: left accent bar, squared-off left corners */
.history-timeline-item[data-side="right"] .timeline-content {
  border-left: 3px solid var(--c-accent, #2C7CD8);
  border-radius: 0 16px 16px 0;
}

/* Left-side card: right accent bar, squared-off right corners */
.history-timeline-item[data-side="left"] .timeline-content {
  border-right: 3px solid var(--c-accent, #2C7CD8);
  border-radius: 16px 0 0 16px;
}

/* Year label — prominent, brand blue */
.timeline-year {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  color: var(--c-primary, #1428a0);
  line-height: 1;
  margin: 0 0 16px;
  letter-spacing: -0.025em;
}

/* Event list */
.timeline-events {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(44, 124, 216, 0.1);
  padding-top: 16px;
}

.timeline-events p {
  margin: 0;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.72;
  color: var(--c-text, #1a1d24);
  padding-left: 14px;
  border-left: 2px solid rgba(44, 124, 216, 0.22);
}

/* Sticky Side Index */
.history-sticky-index {
  position: absolute;
  top: 64px; /* matching padding-top of .history-timeline */
  bottom: 80px; /* matching padding-bottom of .history-timeline */
  right: 12px;
  width: 60px;
  z-index: 10;
  pointer-events: none;
}

.sticky-year-list {
  position: sticky;
  top: calc(50vh - 120px);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

.sticky-year-list li {
  margin-bottom: 12px;
}

.sticky-year-list a {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-primary, #1428a0);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  letter-spacing: 0.05em;
  transform-origin: right center;
  text-align: right;
}

.sticky-year-list a:hover {
  color: var(--c-primary, #1428a0);
}

.sticky-year-list a.is-active {
  color: var(--c-primary, #1428a0);
  font-weight: 700;
  transform: scale(1.15);
}

/* Mobile & Small Desktop — line moves to left edge, all items single-column right of it */
@media (max-width: 1024px) {
  .history-sticky-index {
    display: none;
  }
}

@media (max-width: 768px) {
  .history-timeline-line {
    left: 24px;
    transform: none;
  }
  .history-timeline-item[data-side="right"],
  .history-timeline-item[data-side="left"] {
    flex-direction: row-reverse;
    padding-left: 56px;
    padding-right: 0;
    justify-content: flex-start;
  }
  .timeline-dot {
    left: 24px;
    transform: translateX(-50%);
  }
  .history-timeline-item[data-side="right"] .timeline-content,
  .history-timeline-item[data-side="left"] .timeline-content {
    border-left: 3px solid var(--c-accent, #2C7CD8);
    border-right: none;
    border-radius: 0 16px 16px 0;
    max-width: 100%;
  }
}

/* ==========================================================================
   PHASE 7 — Mission & Vision Underline
   ========================================================================== */



/* ==========================================================================
   PHASE 8 — Hover Interactions (Photo Zoom)
   ========================================================================== */

/* Photos inside GWP grid slightly zoom on hover for a premium feel */
.img_section img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: transform;
}
.img_section img:hover {
  transform: scale(1.04) !important;
  cursor: zoom-in; /* or just default pointer if it's not actually a lightbox yet */
}

/* Ensure magnetic buttons and tilt cards don't have conflicting transforms */
.btn, .btn-mail, .view_btn, .copy-btn, .card, .accordion, .find-us-card {
  will-change: transform;
}

/* ==========================================================================
   REDUCED MOTION — all phases
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /*
   * Strip all transform-based motion. Keep simple opacity fades only.
   * GSAP JS also checks matchMedia and skips transforms.
   */
  .clip-reveal {
    clip-path: none !important;
    will-change: auto;
  }
  .line-mask .line-inner {
    transform: none !important;
    will-change: auto;
  }
  .para-reveal {
    transform: none !important;
    will-change: auto;
    /* Let GSAP handle a gentle opacity-only fade */
  }
  .gnb-pill {
    /* Instant position jumps, no morph animation */
    transition: none !important;
    will-change: auto;
  }

  /* Ambient background: hide in reduced motion */
  .ambient-blobs {
    display: none !important;
  }
  /* Phase 6 alternating timeline: disable animated fill, show static dots,
     disable content slide-in transforms — keep opacity-only fade */
  .timeline-fill {
    stroke-dashoffset: 0 !important;
  }
  .timeline-dot {
    background: var(--c-accent, #2C7CD8) !important;
    border-color: var(--c-accent, #2C7CD8) !important;
    transform: translateX(-50%) !important;
  }
  .timeline-content {
    opacity: 1 !important;
    transform: none !important;
  }
  .sticky-year-list a {
    transition: none !important;
    transform: none !important;
  }
  .sticky-year-list a.is-active {
    transform: none !important;
  }
  /* Mission & Vision: show underline statically */
  .animated-underline {
    background-size: 100% 100% !important;
  }
  /* Phase 8: Hover effects disabled */
  .img_section img:hover {
    transform: none !important;
  }
  .btn, .btn-mail, .view_btn, .copy-btn, .card, .accordion, .find-us-card {
    transform: none !important;
  }
}

/* ==========================================================================
   PHASE 9 — GWP Film Reel
   ========================================================================== */

.gwp-film-strip-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 4px 0 20px;
  overflow: hidden;
}

.film-strip-heading {
  text-align: center;
  font-size: 28px;
  color: var(--c-text, #1a1d24);
  margin-bottom: 8px;
  font-weight: 700;
}

.film-strip-subtitle {
  text-align: center;
  font-size: 18px;
  color: var(--c-text, #1a1d24);
  margin-bottom: 16px;
  font-weight: 400;
  opacity: 0.85;
}

.gwp-film-reel {
  position: relative;
  background-color: #111;
  padding: 24px 0;
  overflow: hidden;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 1366px) {
  .gwp-film-reel {
    padding: 10px 0;
  }
  .film-frame {
    width: 200px;
    height: 120px;
  }
}

.film-sprockets {
  position: absolute;
  left: 0;
  width: 100%;
  height: 12px;
  background-image: radial-gradient(circle at 10px 6px, rgba(255, 255, 255, 0.8) 4px, transparent 4.5px);
  background-size: 24px 12px;
  background-repeat: repeat-x;
  opacity: 0.7;
}

.film-sprockets-top { top: 4px; }
.film-sprockets-bottom { bottom: 4px; }

.film-track {
  display: flex;
  width: max-content;
  gap: 8px;
  padding: 0 4px;
}

.film-frame {
  width: 280px;
  height: 200px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background-color: #222;
  position: relative;
}

.film-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
}

.film-frame:hover img {
  transform: scale(1.08);
  filter: brightness(1.15);
}

/* Lightbox Modal */
.film-lightbox {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.film-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.film-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.film-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  transform: scale(0.95);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.film-lightbox.is-open img {
  transform: scale(1);
}

.film-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 12px;
  line-height: 1;
}

.film-lightbox-caption {
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
}