@font-face {font-family: "B";src: url("fonts/Gordita-Bold.woff2") format("woff2")}
@font-face {font-family: "M";src: url("fonts/Gordita-Medium.woff2") format("woff2")}
@font-face {font-family: "R";src: url("fonts/Gordita-Regular.woff2") format("woff2")}
@font-face {font-family: "BB";src: url("fonts/Gordita-Black.woff2") format("woff2")}


:root {
  --yellow: #f5c200;
  --cream: #f5f0e4;
  --black: #111111;
  --header-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Sticky Header ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: #0d0d0d; font-family: 'R', 'Helvetica Neue', Arial, sans-serif; color: #fff; }

    .site-header { background: transparent !important; }
    .site-header.scrolled {
        box-shadow: none !important;
    }
    .site-header.scrolled .header-cta{ display:none; }
    .site-logo { color: #f5c200 !important; }
    .hamburger-line { background: #fff !important; }
    .hamburger-btn { border-color: rgba(255,255,255,.3) !important; background:rgb(246 203 1); }
    .hamburger-btn:hover { background: #f5c200 !important; border-color: #f5c200 !important; }
    .hamburger-btn:hover .hamburger-line { background: #0d0d0d !important; }
    .header-cta {
      display: inline-flex; align-items: center; text-decoration: none;
      font-size: .88rem; font-weight: 600; color: #fff;
      border: 2px solid rgba(255,255,255,.3); border-radius: 100px;
      padding: 10px 22px; letter-spacing: .02em;
      transition: border-color .25s, color .25s; white-space: nowrap;
      position: relative; z-index: 1001; border-color: #f5c200; color: #f5c200; 
    }
    .header-cta:hover { border-color: #f5c200; color: #f5c200; }
    .header-right { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1001; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: var(--header-h);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-logo img{ height:60px; }
.site-header.scrolled {
  background: var(--cream);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

/* Logo */
.site-logo {
  text-decoration: none;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: var(--yellow);
  z-index: 1001;
  position: relative;
}

/* ---------- Hamburger Button ---------- */
.hamburger-btn {
  position: relative;
  z-index: 1001;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--black);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, background 0.3s ease;
  outline: none;
  background: var(--yellow);
}

.hamburger-btn:hover {
  background: var(--yellow);
  border-color: var(--yellow);
}

.hamburger-box {
  width: 22px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1),
              opacity 0.3s ease,
              width 0.3s ease;
}

/* Open state — lines become X */
.hamburger-btn.is-open .hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.hamburger-btn.is-open .hamburger-line:nth-child(2) {
  transform: translateY(-6px) rotate(-45deg);
}
.hamburger-btn.is-open .hamburger-line:nth-child(3){ display:none; }

/* ---------- Full-Width Nav Overlay ---------- */
.full-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #fff;
  display: flex;
  align-items: center;

  /* Clip from top — hidden by default */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.65s cubic-bezier(0.77, 0, 0.175, 1);
  overflow: hidden;
}

.full-nav.is-open {
  clip-path: inset(0 0 0% 0);
}

/* Nav inner layout */
.nav-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

/* ---------- Left: Contact Info ---------- */
.nav-contact {
  max-width: 500px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-contact .label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--yellow);
  text-transform: lowercase;
  margin-bottom: 8px;
}

.nav-contact a,
.nav-contact p {
  font-size: 1.1rem;
  color: var(--black);
  text-decoration: none;
  line-height: 1.6;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.nav-contact a:hover { opacity: 1; }

/* ---------- Right: Nav Links ---------- */
.nav-links {
  list-style: none;
  width: 450px;
}

.nav-item {
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.full-nav.is-open .nav-item { opacity: 1; transform: translateY(0); }
.full-nav.is-open .nav-item:nth-child(1) { transition-delay: 0.22s; }
.full-nav.is-open .nav-item:nth-child(2) { transition-delay: 0.30s; }
.full-nav.is-open .nav-item:nth-child(3) { transition-delay: 0.38s; }
.full-nav.is-open .nav-item:nth-child(4) { transition-delay: 0.46s; }
.full-nav.is-open .nav-item:nth-child(5) { transition-delay: 0.54s; }
.full-nav.is-open .nav-item:nth-child(6) { transition-delay: 0.62s; }

/* Nav link */
.nav-item a {
  display: inline-block;
  position: relative;
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--black);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.3s ease; font-family: "B";
}

/* Yellow strikethrough hover effect */
.nav-item a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -2%;
  width: 0;
  height: clamp(5px, 1vw, 10px);
  background: var(--yellow);
  transform: translateY(-50%);
  transition: width 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: -1;
}

.nav-item a:hover::before,
.nav-item.active a::before {
  width: 104%;
}

/* Active item */
.nav-item.active a { color: var(--black); }

/* ---------- Prevent scroll when nav open ---------- */
body.nav-open {
  overflow: hidden;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .site-header { padding: 0 20px; }

  .nav-inner {
    padding: 80px 24px 40px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
  }

  .nav-links { text-align: left; }

  .nav-contact { max-width: 100%; }

  .hamburger-btn { width: 46px; height: 46px; }
}

@media (max-width: 480px) {
  .nav-item a { font-size: clamp(2.2rem, 10vw, 3rem); }
}



.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: transparent;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-h, 72px);
}

/* ── WebGL canvas — fixed, covers entire page ── */
#hero-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;          /* behind everything */
  display: block;
  pointer-events: none;
}

/* ── Grain texture — also fixed, full page ── */
.hero-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events: none;
}

/* ── Inner layout ── */
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* ── Left: Text block ── */
.hero-text {
  flex: 1;
  max-width: 660px;
}

.hero-heading {
  font-size: clamp(3.5rem, 6vw, 7.5rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 40px; font-family: "B";
}

.hero-heading .line {
  display: block;
  overflow: hidden;
}

.hero-heading .word {
  display: inline-block;
  transform: translateY(110%);
  animation: wordReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.hero-heading .line:nth-child(1) .word { animation-delay: 0.1s; }
.hero-heading .line:nth-child(2) .word { animation-delay: 0.25s; }
.hero-heading .line:nth-child(3) .word { animation-delay: 0.40s; }

@keyframes wordReveal {
  to { transform: translateY(0); opacity: 1; }
}

/* ── CTA Button ── */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #f5c200;
  color: #0d0d0d;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  animation: fadeUp 0.7s 0.65s cubic-bezier(0.16,1,0.3,1) both;
  white-space: nowrap;
}

.hero-cta:hover {
  background: #ffd21f;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(245,194,0,0.35);
}

.hero-cta svg {
  width: 18px; height: 18px;
  transition: transform 0.25s ease;
}
.hero-cta:hover svg { transform: translateX(4px); }

/* ── Right: Video card ── */
.hero-card {
  flex-shrink: 0;
  position: relative;
  width: min(480px, 40vw);
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  animation: cardReveal 1s 0.3s cubic-bezier(0.16,1,0.3,1) both;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}

.hero-card video,
.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.3);
  pointer-events: none;
}

/* ── Scroll indicator ── */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 60px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  animation: fadeUp 0.7s 0.9s cubic-bezier(0.16,1,0.3,1) both;
}

.hero-scroll-line {
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}

.hero-scroll-line::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: #f5c200;
  animation: scrollLine 1.8s 1.2s ease infinite;
}

/* ── Keyframes ── */
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollLine {
  0%   { left: -100%; }
  50%  { left: 0%; }
  100% { left: 100%; }
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 900px) {
  .hero-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 24px 100px;
    gap: 40px;
  }
  .hero-card { width: 100%; aspect-ratio: 16 / 9; }
  .hero-heading { font-size: clamp(2.6rem, 10vw, 4.5rem); }
  .hero-scroll { left: 24px; }
}

@media (max-width: 480px) {
  .hero-cta { font-size: 0.9rem; padding: 14px 24px; }
}






.selected-work {
  position: relative;
  z-index: 2;
  padding: 6rem 0 5rem;
  color: #fff;
  overflow: hidden;
}

/* ── Section container ── */
.sw-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
}

/* ════════════════════════════════════════════
   HEADER TEXT GRID
   ════════════════════════════════════════════ */
.sw-text {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
  align-items: start;
}

.sw-label-col {
  grid-column: 4 / 6;
  display: flex;
  justify-content: center;
  padding-top: 0.25rem;
}

.sw-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f5c200;
}

.sw-desc-col { grid-column: 6 / 13; }

.sw-desc p {
  font-size: clamp(1rem, 1.6vw, 1rem);
  line-height: 1.3;
  color: rgba(255,255,255,0.8);
  padding-right: 3rem;
}
.sw-desc p + p { margin-top: 1.1rem; }

@media (max-width: 799px) {
  .sw-text {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
  }
  .sw-label-col { grid-column: 1; justify-content: flex-start; }
  .sw-desc-col  { grid-column: 1; }
  .sw-desc p    { padding-right: 0; font-size: 1rem; }
}

/* ════════════════════════════════════════════
   HORIZONTAL MARQUEE
   ════════════════════════════════════════════ */

/* Outer: clips overflow + adds fade edges */
.sw-marquee-outer {    transform: rotate(4deg);
  overflow: hidden;
  cursor: grab;
  padding: 0.5rem 0 1.5rem;           /* space for card shadow */

  /* Fade left/right edges into background */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

.sw-marquee-outer.is-dragging { cursor: grabbing; }

/* The scrolling track — width set by JS to fit all items */
.sw-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Each image card ── */
.sw-track-item {
  flex-shrink: 0;
  width: clamp(260px, 25vw, 400px);
  aspect-ratio: 4 / 3;
  border-radius: 1.25rem;
  overflow: hidden;
  position: relative;
  background: #1c1c1e;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transition: box-shadow 0.4s ease;
}

.sw-marquee-outer:not(.is-dragging) .sw-track-item {
  pointer-events: auto;
  transition: box-shadow 0.4s ease, transform 0.5s cubic-bezier(0.19,1,0.22,1);
}

.sw-track-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Dark gradient — thickens on hover so text is readable */
.sw-track-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,13,13,0) 30%,
    rgba(13,13,13,0.55) 70%,
    rgba(13,13,13,0.82) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

/* ── Text overlay (title + tag) — sits on top of gradient ── */
.item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.4rem 1.3rem 1.3rem;
  z-index: 2;
  pointer-events: none;
}

.item-title {
  display: block;
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0.45rem;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.19,1,0.22,1),
              opacity  0.35s ease;
}

.item-tag {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f5c200;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.19,1,0.22,1) 0.06s,
              opacity  0.35s ease 0.06s;
}

/* ── Hover triggers ── */
.sw-marquee-outer:not(.is-dragging) .sw-track-item:hover::after {
  opacity: 1;
}
.sw-marquee-outer:not(.is-dragging) .sw-track-item:hover .item-title {
  opacity: 1;
  transform: translateY(0);
}
.sw-marquee-outer:not(.is-dragging) .sw-track-item:hover .item-tag {
  opacity: 1;
  transform: translateY(0);
}
.sw-marquee-outer:not(.is-dragging) .sw-track-item:hover img {
  transform: scale(1.06);
}
.sw-marquee-outer:not(.is-dragging) .sw-track-item:hover {
  box-shadow: 0 20px 56px rgba(0,0,0,0.6);
}

/* ── Discover more link ── */
.sw-discover {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
}

.sw-discover a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  position: relative;
  transition: color 0.25s ease;
}

.sw-discover a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: #f5c200;
  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.sw-discover a:hover { color: #f5c200; }
.sw-discover a:hover::after { width: 100%; }

.sw-discover svg {
  width: 16px; height: 16px;
  transition: transform 0.25s ease;
}
.sw-discover a:hover svg { transform: translateX(5px); }

/* ════════════════════════════════════════════
   DRAG CURSOR
   ════════════════════════════════════════════ */

/* Fixed layer — lives above everything */
.sw-drag-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background: #f5c200;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1d1d1f;
  pointer-events: none;
  z-index: 200;
  /* start hidden + at top-left; JS moves it */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  will-change: transform, opacity;
  /* hide on touch devices */
}

.sw-drag-cursor.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Grow slightly when actively dragging */
.sw-drag-cursor.is-grabbing {
  transform: translate(-50%, -50%) scale(0.88);
}

@media (hover: none) and (pointer: coarse) {
  .sw-drag-cursor { display: none; }
}

/* ── Responsive card sizes ── */
@media (max-width: 700px) {
  .sw-track-item {
    width: clamp(220px, 70vw, 300px);
  }
  .sw-marquee-outer {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  }
}


 
.fi-section {
  position: relative;
  z-index: 2;
  padding: 6.25rem 0;
  color: #fafaf6;
}

@media (max-width: 799px) {
  .fi-section { padding: 3.5rem 0; }
}

/* ── Container ── */
.fi-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

/* ── "Featured insights" header label ── */
.fi-header {
  text-align: center;
  margin-bottom: 0;        /* spacing controlled by first insight's top padding */
}

.fi-header-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* ── Grid — 2 columns ── */
.fi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2rem, 4vw, 4rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 700px) {
  .fi-grid { grid-template-columns: 1fr; }
}

/* ── Each insight item ── */
.fi-item {
  padding: 3.5rem 0;
  position: relative;
}

@media (max-width: 799px) {
  .fi-item { padding: 2rem 0; }
}

 

/* ── Scroll reveal — items start hidden ── */
.fi-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.fi-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger right column */
@media (min-width: 701px) {
  .fi-item:nth-child(even) {
    transition-delay: 0.15s;
  }
}

/* ── Thumbnail image (hidden by default, reveals on hover desktop) ── */
.fi-thumb {
  position: relative;
  width: 9.25rem;
  height: 12.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.19,1,0.22,1);
  pointer-events: none;
}

.fi-thumb img {
  width: calc(100% + 4rem);
  height: calc(100% + 4rem);
  object-fit: cover;
  position: absolute;
  top: -2rem; left: -2rem;
}

/* Show thumbnail on hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .fi-item:hover .fi-thumb {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Service label ── */
.fi-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  /* color set per theme below */
}

/* ── Heading / description ── */
.fi-heading {
  font-size: clamp(1.1rem, 2vw, 1rem);
  font-weight: 500;
  line-height: 1.2;
  color: #fafaf6;
  margin: 0 0 2rem;
  padding-right: clamp(0px, 2vw, 2rem);
}

/* ── "Continue reading" link ── */
.fi-link {
  display: inline-block;
  position: relative;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fafaf6;
  text-decoration: none;
  padding-bottom: 4px;
}

/* Animated underline — two layers (before = base, after = hover fill) */
.fi-link::before,
.fi-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
}

.fi-link::before {
  width: 100%;
  background: rgba(255,255,255,0.25);
}

.fi-link::after {
  width: 0;
  background: #f5c200;       /* overridden per theme */
  transition: width 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.fi-link:hover::after { width: 100%; }

/* ══ Theme colours ══════════════════════════ */
.fi-item{ font-size:1.5rem; }
/* Turquoise items */
.fi-item[data-theme="turquoise"] .fi-label  { color: #17f1d1; }
.fi-item[data-theme="turquoise"] .fi-link::after { background: #17f1d1; }

/* Purple (displays yellow on dark bg, as per eteamworks) */
.fi-item[data-theme="purple"] .fi-label  { color: #f5c200;  } 
.fi-item[data-theme="purple"] .fi-link::after { background: #f5c200; }

/* Yellow */
.fi-item[data-theme="yellow"] .fi-label  { color: #f5c200; }
.fi-item[data-theme="yellow"] .fi-link::after { background: #f5c200; }

/* ── Discover more button ── */
.fi-discover {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 2rem;
}

.fi-discover-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  position: relative;
  transition: color 0.25s ease;
}

.fi-discover-btn::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: #f5c200;
  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.fi-discover-btn:hover { color: #f5c200; }
.fi-discover-btn:hover::after { width: 100%; }

.fi-discover-btn svg {
  width: 16px; height: 16px;
  transition: transform 0.25s ease;
}
.fi-discover-btn:hover svg { transform: translateX(5px); }



/* =============================================
   3D WALKTHROUGHS — SERVICE PAGE
   Brand: #0d0d0d · #f5c200 · #fafaf6 · #17f1d1
   ============================================= */

/* ════════════════════════════════════════════
   HERO  (matches reference: big thin heading
   left, text right, full-width image below)
   ════════════════════════════════════════════ */

.wthr-hero {
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--header-h, 80px) + 4rem) clamp(2rem,6vw,5rem) 4rem;
  position: relative;
  z-index: 2;
  background: #f5f5f3;
}

 
/* Back arrow */
.wthr-back {
  position: fixed;
  top: calc(var(--header-h, 80px) + 2rem);
  left: clamp(2rem,6vw,5rem);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(250,250,246,0.35);
  text-decoration: none;
  transition: color 0.25s;
}
.wthr-back svg { width: 16px; height: 16px; transition: transform 0.25s; }
.wthr-back:hover { color: #17f1d1; }
.wthr-back:hover svg { transform: translateX(-4px); }

/* Two-col hero grid */
.wthr-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(3rem, 5vw, 6rem);
  align-items: end;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;

}

.wthr-hero-heading {
  font-size: clamp(3.2rem, 4.5vw, 8.5rem);
  font-weight: 300; 
  line-height: 1;
  color: #333;
  margin: 0; font-family: "B";

  /* word-by-word reveal */
  overflow: hidden;
}

.wthr-hero-heading .word {
  display: inline-block;
  transform: translateY(110%);
  animation: wReveal 0.75s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes wReveal {
  to { transform: translateY(0); }
}

.wthr-hero-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 0.75rem;

  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.6s forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wthr-hero-desc {
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.55;
  color: #333; font-family: "R";
}

.wthr-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  border-bottom: 1.5px solid #17f1d1;
  padding-bottom: 4px;
  width: fit-content;
  transition: color 0.25s, gap 0.25s;
}
.wthr-read-more:hover { color: #17f1d1; gap: 14px; }

/* Full-width image below hero */
.wthr-hero-img {
  position: relative;
  z-index: 2;
  margin-top: 0rem;
  padding: 0; 
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.85s forwards; background: #fff;
}
.wthr-hero-img video{ width:100% }

.wthr-hero-img2{ background:none; }
.wthr-hero-img-inner {
  border-radius: 1.5rem 1.5rem 0 0; 
  aspect-ratio: 21/8; 
  width: 700px; margin: 0 auto; border-radius: 20px;
}

.wthr-hero-img-inner img, .wthr-hero-img-inner video { border-radius: 20px;
  width: 100%;  
  display: block;
}

/* ════════════════════════════════════════════
   SHARED SECTION WRAPPER
   ════════════════════════════════════════════ */

.wthr-section {
  position: relative;
  z-index: 2;
  padding: 7rem 0;
}

.wthr-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(2rem,6vw,5rem);
}

.wthr-divider {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(2rem,6vw,5rem);
  position: relative;
  z-index: 2;
}
.wthr-divider hr {
  border: none;
  border-top: 1px solid rgba(250,250,246,0.08);
}

/* Section label */
.wthr-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #17f1d1;
  margin-bottom: 1.25rem; font-family: "B";
}

/* Section heading */
.wthr-heading {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fafaf6;
  margin: 0; font-family: "R";
}
.wthr-intro-body p { font-family: "R"; line-height:23px; }
.wthr-heading strong {
  font-weight: 700;
  color: #f5c200; font-family: "B";
}

/* ════════════════════════════════════════════
   INTRO
   ════════════════════════════════════════════ */

.wthr-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem,6vw,7rem);
  align-items: start;
  margin-top: 3.5rem;
}

.wthr-intro-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(250,250,246,0.6);
}

.wthr-intro-body p + p { margin-top: 1rem; }
.wthr-intro-body strong { color: #fafaf6; font-weight: 700; }

/* ════════════════════════════════════════════
   WHY CHOOSE US — 2-col checklist
   ════════════════════════════════════════════ */

.wthr-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 3.5rem;
  border-top: 1px solid rgba(250,250,246,0.08);
}

.wthr-why-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 2rem 2.5rem 2rem 0;
  border-bottom: 1px solid rgba(250,250,246,0.08);

  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.wthr-why-item:nth-child(even) { padding-left: 2.5rem; }
.wthr-why-item:nth-child(1) { transition-delay: 0s;    }
.wthr-why-item:nth-child(2) { transition-delay: 0.08s; }
.wthr-why-item:nth-child(3) { transition-delay: 0.16s; }
.wthr-why-item:nth-child(4) { transition-delay: 0.24s; }
.wthr-why-item:nth-child(5) { transition-delay: 0.32s; }
.wthr-why-item.is-visible   { opacity: 1; transform: translateY(0); }

.wthr-check {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid rgba(245,194,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #f5c200;
  margin-top: 2px;
  transition: background 0.3s, border-color 0.3s;
}

.wthr-why-item:hover .wthr-check {
  background: rgba(245,194,0,0.1);
  border-color: #f5c200;
}

.wthr-check svg { width: 0.8rem; height: 0.8rem; }

.wthr-why-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fafaf6;
  margin-bottom: 0.35rem; font-family: "B";
}

.wthr-why-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(250,250,246,0.5); font-family: "R";
}

/* ════════════════════════════════════════════
   PROCESS — numbered horizontal steps
   ════════════════════════════════════════════ */

.wthr-process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 4rem;
  border-top: 1px solid rgba(250,250,246,0.08);
}

.wthr-step {
  padding: 2.5rem 2rem 2.5rem 0;
  border-right: 1px solid rgba(250,250,246,0.08);
  position: relative;

  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16,1,0.3,1);
}

.wthr-step:last-child { border-right: none; padding-right: 0; }
.wthr-step:not(:first-child) { padding-left: 2rem; }
.wthr-step:nth-child(1) { transition-delay: 0s;    }
.wthr-step:nth-child(2) { transition-delay: 0.1s;  }
.wthr-step:nth-child(3) { transition-delay: 0.2s;  }
.wthr-step:nth-child(4) { transition-delay: 0.3s;  }
.wthr-step:nth-child(5) { transition-delay: 0.4s;  }
.wthr-step.is-visible   { opacity: 1; transform: translateY(0); }

.wthr-step-num {
  font-size: clamp(3.5rem, 5vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(245,194,0,0.06);
  margin-bottom: 1.25rem;
  display: block;
}

.wthr-step-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fafaf6;
  margin: 0 0 0.5rem;
  transition: color 0.3s; font-family: "B";
}

.wthr-step:hover .wthr-step-title { color: #f5c200; }

.wthr-step-desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: rgba(250,250,246,0.45); font-family: "R";
}

/* ════════════════════════════════════════════
   PROJECT TYPES — 3 cards
   ════════════════════════════════════════════ */

.wthr-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3.5rem;
}

.wthr-type-card {
  border: 1px solid rgba(250,250,246,0.08);
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s ease, background 0.35s ease;

  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1),
              border-color 0.35s ease, background 0.35s ease;
}

.wthr-type-card:nth-child(1) { transition-delay: 0s;   }
.wthr-type-card:nth-child(2) { transition-delay: 0.1s; }
.wthr-type-card:nth-child(3) { transition-delay: 0.2s; }
.wthr-type-card.is-visible   { opacity: 1; transform: translateY(0); }

.wthr-type-card:hover {
  border-color: rgba(245,194,0,0.3);
  background: rgba(245,194,0,0.03);
}

/* Ghost number */
.wthr-type-card::before {
  content: attr(data-num);
  position: absolute;
  bottom: -0.5rem;
  right: 1rem;
  font-size: 6rem;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: rgba(245,194,0,0.04);
  line-height: 1;
  pointer-events: none;
}

.wthr-type-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(245,194,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5c200;
  margin-bottom: 1.5rem;
  transition: background 0.3s;
}

.wthr-type-icon svg { width: 1.3rem; height: 1.3rem; }
.wthr-type-card:hover .wthr-type-icon { background: rgba(245,194,0,0.15); }

.wthr-type-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fafaf6;
  margin: 0 0 0.75rem;
  transition: color 0.3s;
}

.wthr-type-card:hover .wthr-type-title { color: #f5c200; }

.wthr-type-desc {
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(250,250,246,0.5);
}

/* ════════════════════════════════════════════
   BENEFITS — 2-col list
   ════════════════════════════════════════════ */

.wthr-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 3.5rem;
  border-top: 1px solid rgba(250,250,246,0.08);
}

.wthr-benefit {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.75rem 2.5rem 1.75rem 0;
  border-bottom: 1px solid rgba(250,250,246,0.08);

  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1);
}

.wthr-benefit:nth-child(even) { padding-left: 2.5rem; }
.wthr-benefit:nth-child(1) { transition-delay: 0s;    }
.wthr-benefit:nth-child(2) { transition-delay: 0.07s; }
.wthr-benefit:nth-child(3) { transition-delay: 0.14s; }
.wthr-benefit:nth-child(4) { transition-delay: 0.21s; }
.wthr-benefit:nth-child(5) { transition-delay: 0.28s; }
.wthr-benefit.is-visible   { opacity: 1; transform: translateY(0); }

.wthr-benefit-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #17f1d1;
  flex-shrink: 0;
  margin-top: 0.55rem;
}

.wthr-benefit-text {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(250,250,246,0.65);
  font-weight: 500;
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .wthr-hero-grid    { grid-template-columns: 1fr; gap: 2rem; }
  .wthr-process-steps { grid-template-columns: repeat(3, 1fr); }
  .wthr-step:nth-child(3) { border-right: none; }
  .wthr-step:nth-child(4),
  .wthr-step:nth-child(5) { border-top: 1px solid rgba(250,250,246,0.08); }
}

@media (max-width: 750px) {
  .wthr-intro-grid,
  .wthr-why-grid,
  .wthr-benefits-grid { grid-template-columns: 1fr; }
  .wthr-why-item:nth-child(even),
  .wthr-benefit:nth-child(even) { padding-left: 0; }
  .wthr-types-grid { grid-template-columns: 1fr; }
  .wthr-process-steps { grid-template-columns: 1fr 1fr; gap: 0; }
  .wthr-step:nth-child(2),
  .wthr-step:nth-child(4) { border-right: none; }
  .wthr-step:nth-child(3),
  .wthr-step:nth-child(4),
  .wthr-step:nth-child(5) { border-top: 1px solid rgba(250,250,246,0.08); }
  .wthr-hero-img-inner { aspect-ratio: 16/9; border-radius: 1rem; }
}



/* =============================================
   CTA + FOOTER
   Brand: #0d0d0d · #f5c200 · #fafaf6
   ============================================= */

/* ════════════════════════════════════════════
   CTA SECTION
   ════════════════════════════════════════════ */

.cta-section {
  position: relative;
  z-index: 2;
  padding: 7rem 0 8rem;
  overflow: hidden;
}

/* Subtle radial glow behind CTA content */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 60%,
    rgba(245,194,0,0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.cta-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
}

/* ── Top label row ── */
.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f5c200;
  margin-bottom: 2rem;
}

.cta-eyebrow::before,
.cta-eyebrow::after {
  content: '';
  width: 2rem;
  height: 1px;
  background: #f5c200;
  opacity: 0.5;
}

/* ── Main headline ── */
.cta-heading {
  font-size: clamp(2.8rem, 6.5vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: #fafaf6;
  margin: 0 0 1.75rem;
}

.cta-heading em {
  font-style: normal;
  color: #f5c200;
  position: relative;
  display: inline-block;
}

/* Animated underline under em */
.cta-heading em::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #f5c200;
  transform: scaleX(0);
  transform-origin: left;
  animation: ctaUnderline 0.8s cubic-bezier(0.16,1,0.3,1) 0.6s forwards;
}

@keyframes ctaUnderline {
  to { transform: scaleX(1); }
}

/* ── Sub-text ── */
.cta-sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: rgba(250,250,246,0.55);
  max-width: 540px;
  margin: 0 auto 3rem;
}

/* ── Button group ── */
.cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Primary yellow button */
.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0d0d0d;
  background: #f5c200;
  border: 2px solid #f5c200;
  border-radius: 100px;
  padding: 1rem 2.25rem;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease,
              box-shadow 0.25s ease;
  white-space: nowrap;
}

.cta-btn-primary svg {
  width: 16px; height: 16px;
  transition: transform 0.25s ease;
}

.cta-btn-primary:hover {
  background: transparent;
  color: #f5c200;
  box-shadow: 0 0 0 2px #f5c200 inset;
  transform: translateY(-2px);
}
.cta-btn-primary:hover svg { transform: translateX(4px); }

/* Secondary outline button */
.cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(250,250,246,0.7);
  background: transparent;
  border: 2px solid rgba(250,250,246,0.2);
  border-radius: 100px;
  padding: 1rem 2.25rem;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}

.cta-btn-secondary:hover {
  border-color: rgba(250,250,246,0.6);
  color: #fafaf6;
  transform: translateY(-2px);
}

/* ── Trust bar ── */
.cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(250,250,246,0.07);
  flex-wrap: wrap;
}

.cta-trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(250,250,246,0.4);
}

.cta-trust-item svg {
  width: 1rem; height: 1rem;
  color: #f5c200;
  flex-shrink: 0;
}

/* Scroll reveal */
.cta-eyebrow,
.cta-heading,
.cta-sub,
.cta-buttons,
.cta-trust {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.cta-heading  { transition-delay: 0.08s; }
.cta-sub      { transition-delay: 0.16s; }
.cta-buttons  { transition-delay: 0.24s; }
.cta-trust    { transition-delay: 0.34s; }

.cta-section.is-visible .cta-eyebrow,
.cta-section.is-visible .cta-heading,
.cta-section.is-visible .cta-sub,
.cta-section.is-visible .cta-buttons,
.cta-section.is-visible .cta-trust {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */

.site-footer {
  position: relative;
  z-index: 2;
  background: #0a0a0a;
  border-top: 1px solid rgba(250,250,246,0.08);
  color: #fafaf6;
}

/* Yellow accent top line */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, #f5c200 0%, rgba(245,194,0,0.3) 50%, transparent 100%);
}

.footer-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem clamp(1.5rem, 5vw, 4rem) 4rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 3rem;
}

/* ── Brand col ── */
.footer-brand-logo {
  display: block;
  margin-bottom: 1.25rem;
}

.footer-brand-logo img { height: 28px; }

.footer-tagline {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(250,250,246,0.5);
  margin: 0 0 2rem;
  max-width: 260px;
}

/* Social icons */
.footer-socials {
  display: flex;
  gap: 0.75rem;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1.5px solid rgba(250,250,246,0.15);
  color: rgba(250,250,246,0.5);
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease,
              background 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

.footer-social-link svg { width: 0.95rem; height: 0.95rem; }

.footer-social-link:hover {
  border-color: #f5c200;
  color: #0d0d0d;
  background: #f5c200;
  transform: translateY(-3px);
}

/* ── Nav/link cols ── */
.footer-col-heading {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f5c200;
  margin: 0 0 1.5rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  font-size: 0.9rem;
  color: rgba(250,250,246,0.55);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease, gap 0.2s ease;
  position: relative;
}

.footer-links a::before {
  content: '';
  width: 0;
  height: 1px;
  background: #f5c200;
  transition: width 0.3s ease;
  flex-shrink: 0;
}

.footer-links a:hover {
  color: #fafaf6;
  gap: 10px;
}

.footer-links a:hover::before { width: 12px; }

/* ── Contact col ── */
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.footer-contact-item:last-child { margin-bottom: 0; }

.footer-contact-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: #f5c200;
  margin-top: 1px;
}

.footer-contact-icon svg { width: 100%; height: 100%; }

.footer-contact-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(250,250,246,0.55);
}

.footer-contact-text a {
  color: rgba(250,250,246,0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact-text a:hover { color: #f5c200; }

/* ── Bottom bar ── */
.footer-bottom {
  border-top: 1px solid rgba(250,250,246,0.07);
}

.footer-bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem clamp(1.5rem, 5vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 0.8rem;
  color: rgba(250,250,246,0.3);
}

.footer-copy a {
  color: rgba(245,194,0,0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-copy a:hover { color: #f5c200; }

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

.footer-legal a {
  font-size: 0.8rem;
  color: rgba(250,250,246,0.3);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal a:hover { color: rgba(250,250,246,0.7); }

/* ── Responsive ── */
@media (max-width: 1000px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 4rem;
  }
}

@media (max-width: 600px) {
  .footer-main {
    grid-template-columns: 1fr;
    padding-top: 3.5rem;
    gap: 2.5rem;
  }

  .cta-buttons { flex-direction: column; align-items: stretch; }
  .cta-btn-primary,
  .cta-btn-secondary { justify-content: center; }

  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}


.curve-wrapper{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:150px; 
}

.curve-wrapper svg{
    width:100%;
    height:100%;
}
.cta-inner{ text-align:center; }


 /* =============================================
   ABOUT PAGE — Section Styles
   ============================================= */

/* ════════════════════════════════════════════
   ABOUT HERO (overrides hero.css layout)
   ════════════════════════════════════════════ */

.about-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-h, 80px) + 4rem) clamp(1.5rem,5vw,4rem) 5rem;
  position: relative;
  z-index: 1;
}

.about-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f5c200;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s forwards;
}

.about-hero-label::before,
.about-hero-label::after {
  content: '';
  width: 2rem;
  height: 1px;
  background: #f5c200;
  opacity: 0.5;
}

.about-hero-heading {
  font-size: clamp(5rem, 4vw, 13rem);
  font-weight: 900; 
  line-height: 0.9;
  color: #fafaf6;
  margin: 0 0 2.5rem;
  overflow: hidden; font-family: "B";
}

.about-hero-heading .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  animation: wordReveal 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}

.about-hero-heading .word:nth-child(1) { animation-delay: 0.35s; }
.about-hero-heading .word:nth-child(2) { animation-delay: 0.48s; }

@keyframes wordReveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.about-hero-desc {
  max-width: 780px;
  font-size: clamp(1.05rem, 1.8vw, 1rem);
  line-height: 1.4;
  color: rgba(250,250,246,0.75);
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.7s forwards;
}

.about-hero-desc .svc {
  font-weight: 700;
}

.about-hero-desc .svc-teal   { color: #17f1d1; }
.about-hero-desc .svc-yellow { color: #f5c200; }

/* ── Scroll indicator ── */
.about-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeUp 0.8s ease 1.1s forwards;
}

.about-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(245,194,0,0.7));
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1;   }
}

.about-scroll span {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250,250,246,0.4);
}

/* ════════════════════════════════════════════
   STORY + VIDEO SECTION
   ════════════════════════════════════════════ */

.about-story {
  position: relative;
  z-index: 2;
  padding: 7rem 0;
}

.about-story-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem,5vw,4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}

/* Left: text + stats */
.about-story-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f5c200;
  margin-bottom: 1rem;
}

.about-story-heading {
  font-size: clamp(2.2rem,4vw,3.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fafaf6;
  margin: 0 0 1.5rem;
}

.about-story-body {
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(250,250,246,0.6);
  margin: 0 0 2.5rem;
}

.about-story-body strong { color: #fafaf6; font-weight: 700; }

/* Stats row */
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem; 
  padding-top: 2rem;
}

.about-stat-num {
  display: block;
  font-size: clamp(2.2rem,3.5vw,3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #f5c200;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.about-stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250,250,246,0.45);
}

/* Right: video card */
.about-video-card {
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;  
  aspect-ratio: 4/3; background: none;
}

.about-video-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245,194,0,0.12) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.about-video-card video,
.about-video-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scroll reveal for story */
.about-story-text,
.about-video-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.about-video-card { transition-delay: 0.15s; }

.about-story-text.is-visible,
.about-video-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════
   CORE VALUES
   ════════════════════════════════════════════ */

.about-values {
  position: relative;
  z-index: 2;
  padding: 6rem 0 7rem;
}

.about-values-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem,5vw,4rem);
}

.about-values-header {
  margin-bottom: 4rem;
}

.about-values-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f5c200;
  margin-bottom: 1rem;
}

.about-values-heading {
  font-size: clamp(2.4rem,4.5vw,3.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fafaf6;
  margin: 0;
}

/* Grid of 4 value cards */
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(250,250,246,0.08);
}

.about-value-card {
  padding: 2.5rem 2rem 2.5rem 0;
  border-right: 1px solid rgba(250,250,246,0.08);
  position: relative;

  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16,1,0.3,1);
}

.about-value-card:last-child { border-right: none; }
.about-value-card:not(:first-child) { padding-left: 2rem; }

.about-value-card:nth-child(1) { transition-delay: 0s;    }
.about-value-card:nth-child(2) { transition-delay: 0.1s;  }
.about-value-card:nth-child(3) { transition-delay: 0.2s;  }
.about-value-card:nth-child(4) { transition-delay: 0.3s;  }

.about-value-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Icon */
.about-value-icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 1.5px solid rgba(245,194,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: #f5c200;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.about-value-icon svg { width: 1rem; height: 1rem; }

.about-value-card:hover .about-value-icon {
  background: #f5c200;
  border-color: #f5c200;
  color: #0d0d0d;
}

.about-value-icon svg { transition: color 0.3s ease; }
.about-value-card:hover .about-value-icon svg { color: #0d0d0d; }

.about-value-num {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgba(245,194,0,0.4);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  transition: color 0.3s ease;
}

.about-value-card:hover .about-value-num { color: #f5c200; }

.about-value-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fafaf6;
  margin: 0 0 0.85rem;
  transition: color 0.3s ease;
}

.about-value-card:hover .about-value-title { color: #f5c200; }

.about-value-desc {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(250,250,246,0.5);
  margin: 0;
  transition: color 0.3s ease;
}

.about-value-card:hover .about-value-desc { color: rgba(250,250,246,0.75); }

/* ════════════════════════════════════════════
   TIMELINE
   ════════════════════════════════════════════ */

.about-timeline {
  position: relative;
  z-index: 2;
  padding: 6rem 0 7rem;
  overflow: hidden;
}

.about-timeline-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem,5vw,4rem);
}

.about-timeline-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(250,250,246,0.08);
}

.about-timeline-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f5c200;
  margin-bottom: 0.85rem;
}

.about-timeline-heading {
  font-size: clamp(2.4rem,4.5vw,3.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fafaf6;
  margin: 0;
}

.about-timeline-hint {
  font-size: 0.8rem;
  color: rgba(250,250,246,0.3);
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.about-timeline-hint svg { width: 14px; height: 14px; }

/* Scroll container */
.about-timeline-track-wrap {
  overflow: hidden;
  cursor: grab;
  position: relative;
  padding-bottom: 1rem;

  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.about-timeline-track-wrap.is-dragging { cursor: grabbing; }

.about-timeline-track {
  display: flex;
  gap: 0;
  width: max-content;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

/* Connecting line */
.about-timeline-track::before {
  content: '';
  position: absolute;
  top: 1.2rem;            /* centre of dot */
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(250,250,246,0.1);
  z-index: 0;
}

/* Each node */
.about-tl-node {
  flex-shrink: 0;
  width: clamp(220px, 22vw, 280px);
  padding: 0 2rem 0 0;
  position: relative;
  z-index: 1;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.about-tl-node.is-visible { opacity: 1; transform: translateY(0); }

/* Dot */
.about-tl-dot {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 2px solid rgba(245,194,0,0.35);
  background: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: background 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.about-tl-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f5c200;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.about-tl-node:hover .about-tl-dot {
  border-color: #f5c200;
  background: rgba(245,194,0,0.1);
}

.about-tl-node:hover .about-tl-dot::after { opacity: 1; }

.about-tl-year {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #f5c200;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.about-tl-title {
  font-size: 1rem;
  font-weight: 800;
  color: #fafaf6;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  transition: color 0.3s ease;
}

.about-tl-node:hover .about-tl-title { color: #f5c200; }

.about-tl-desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: rgba(250,250,246,0.45);
  margin: 0;
  padding-right: 1rem;
}

/* ════════════════════════════════════════════
   CLIENT LOGOS MARQUEE
   ════════════════════════════════════════════ */

.about-logos {
  position: relative;
  z-index: 2;
  padding: 5rem 0 6rem;
}

.about-logos-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem,5vw,4rem);
  margin-bottom: 3rem;
}

.about-logos-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,250,246,0.35);
  text-align: center;
  display: block;
}

/* Logo marquee */
.about-logos-outer {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.about-logos-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: logoScroll 28s linear infinite;
}

.about-logos-outer:hover .about-logos-track {
  animation-play-state: paused;
}

@keyframes logoScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.about-logo-item {
  flex-shrink: 0;
  padding: 0 3.5rem;
  opacity: 0.35;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
}

.about-logo-item:hover { opacity: 0.8; }

.about-logo-item img {
  height: 2rem;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Text-based logo fallback */
.about-logo-text {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fafaf6;
  white-space: nowrap;
  font-family: 'R', Helvetica Neue, Arial, sans-serif;
}

/* ── Responsive ── */
@media (max-width: 1000px) {
  .about-values-grid { grid-template-columns: repeat(2, 1fr); }
  .about-value-card:nth-child(2) { border-right: none; }
  .about-value-card:nth-child(3) { border-top: 1px solid rgba(250,250,246,0.08); padding-top: 2.5rem; }
  .about-value-card:nth-child(4) { border-top: 1px solid rgba(250,250,246,0.08); border-right: none; padding-top: 2.5rem; }
}

@media (max-width: 860px) {
  .about-story-inner { grid-template-columns: 1fr; gap: 3rem; }
  .about-timeline-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .about-values-grid { grid-template-columns: 1fr; }
  .about-value-card { border-right: none !important; border-top: 1px solid rgba(250,250,246,0.08); padding: 2rem 0 !important; }
  .about-value-card:first-child { border-top: none; }
  .about-stats { grid-template-columns: repeat(2,1fr); }
}

/* =============================================
   CONTACT PAGE
   ============================================= */

.ct-hero {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--header-h,80px) + 4rem) clamp(2rem,6vw,5rem) 4rem;
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

.ct-hero-label {
  display: block;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #17f1d1; margin-bottom: 1.25rem;
  opacity: 0;
  animation: ctFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s forwards;
}

.ct-hero-heading {
  font-size: clamp(3.5rem, 8vw, 8rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #fafaf6;
  margin: 0;
  opacity: 0;
  animation: ctFadeUp 0.75s cubic-bezier(0.16,1,0.3,1) 0.25s forwards;
}

.ct-hero-heading strong { font-weight: 900; color: #f5c200; }

.ct-hero-sub {
  font-size: clamp(1rem,1.4vw,1.15rem);
  line-height: 1.7; color: rgba(250,250,246,0.55);
  margin-top: 2rem; max-width: 540px;
  opacity: 0;
  animation: ctFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.45s forwards;
}

@keyframes ctFadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Divider ── */
.ct-divider {
  max-width:1300px; margin:0 auto;
  padding:0 clamp(2rem,6vw,5rem);
  position:relative; z-index:2;
}
.ct-divider hr { border:none; border-top:1px solid rgba(250,250,246,0.08); }

/* ── Main grid ── */
.ct-main {
  position:relative; z-index:2;
  padding: 6rem 0 8rem;
}

.ct-main-inner {
  max-width:1300px; margin:0 auto;
  padding:0 clamp(2rem,6vw,5rem);
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(3rem,6vw,8rem);
  align-items:start;
}

/* ── FORM side ── */
.ct-form-title {
  font-size:1.5rem; font-weight:700;
  letter-spacing:-0.02em; color:#fafaf6;
  margin:0 0 2.5rem;
}

.ct-form { display:flex; flex-direction:column; gap:1.25rem; }

.ct-field {
  display:flex; flex-direction:column; gap:0.5rem;
}

.ct-field label {
  font-size:0.72rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(250,250,246,0.4);
}

.ct-field input,
.ct-field textarea,
.ct-field select {
  background: rgba(250,250,246,0.04);
  border: 1px solid rgba(250,250,246,0.1);
  border-radius: 0.65rem;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  color: #fafaf6;
  font-family: inherit;
  outline: none;
  transition: border-color 0.25s, background 0.25s;
  -webkit-appearance: none;
}

.ct-field input::placeholder,
.ct-field textarea::placeholder { color: rgba(250,250,246,0.25); }

.ct-field input:focus,
.ct-field textarea:focus,
.ct-field select:focus {
  border-color: rgba(23,241,209,0.5);
  background: rgba(23,241,209,0.04);
}

.ct-field textarea { resize:vertical; min-height:140px; }

.ct-field select option { background:#1a1a1a; color:#fafaf6; }

.ct-field-row {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}

.ct-submit {
  display:inline-flex; align-items:center; gap:10px;
  background:#f5c200; color:#0d0d0d;
  border:2px solid #f5c200; border-radius:100px;
  padding:1rem 2.25rem;
  font-size:0.88rem; font-weight:800;
  letter-spacing:0.06em; text-transform:uppercase;
  cursor:pointer; font-family:inherit;
  transition:background 0.25s, color 0.25s, transform 0.25s;
  margin-top:0.5rem; width:fit-content;
}
.ct-submit svg { width:16px; height:16px; transition:transform 0.25s; }
.ct-submit:hover { background:transparent; color:#f5c200; transform:translateY(-2px); }
.ct-submit:hover svg { transform:translateX(4px); }

/* ── INFO side ── */
.ct-info { display:flex; flex-direction:column; gap:2.5rem; }

.ct-info-block {
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(250,250,246,0.07);
}
.ct-info-block:last-child { border-bottom:none; padding-bottom:0; }

.ct-info-label {
  display:block; font-size:0.65rem; font-weight:800;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(23,241,209,0.6); margin-bottom:1rem;
}

.ct-info-list { display:flex; flex-direction:column; gap:0.9rem; list-style:none; padding:0; margin:0; }

.ct-info-list li {
  display:flex; align-items:flex-start; gap:0.85rem;
  font-size:0.95rem; color:rgba(250,250,246,0.65);
  line-height:1.55;
}

.ct-info-list li svg { width:18px; height:18px; flex-shrink:0; color:#17f1d1; margin-top:2px; }
.ct-info-list a { color:rgba(250,250,246,0.65); text-decoration:none; transition:color 0.2s; }
.ct-info-list a:hover { color:#17f1d1; }

/* Social icons */
.ct-socials { display:flex; gap:0.75rem; flex-wrap:wrap; }

.ct-social {
  width:2.75rem; height:2.75rem; border-radius:50%;
  border:1px solid rgba(250,250,246,0.12);
  display:flex; align-items:center; justify-content:center;
  color:rgba(250,250,246,0.5); text-decoration:none;
  transition:background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.ct-social svg { width:16px; height:16px; }
.ct-social:hover {
  background:rgba(245,194,0,0.12);
  border-color:rgba(245,194,0,0.4);
  color:#f5c200;
  transform:translateY(-3px);
}

/* Map embed */
.ct-map {
  position:relative; z-index:2;
  padding: 0 clamp(2rem,6vw,5rem) 8rem;
  max-width:1300px; margin:0 auto;
}

.ct-map-inner {
  border-radius:1.25rem; overflow:hidden;
  border:1px solid rgba(250,250,246,0.08);
  aspect-ratio:21/7;
  background:#111;
}
.ct-map-inner iframe { width:100%; height:100%; border:none; display:block; filter:grayscale(1) invert(0.9) hue-rotate(180deg); }

/* ── Responsive ── */
@media(max-width:900px) {
  .ct-main-inner { grid-template-columns:1fr; gap:4rem; }
  .ct-field-row { grid-template-columns:1fr; }
  .ct-map-inner { aspect-ratio:4/3; }
}


/* =============================================
   WORKS / PORTFOLIO PAGE
   ============================================= */

/* ── Hero ── */
.wk-hero {
  min-height: 55vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: calc(var(--header-h,80px) + 4rem) clamp(2rem,6vw,5rem) 4rem;
  position:relative; z-index:2;
  max-width:1300px; margin:0 auto; width:100%;
}

.wk-hero-label {
  display:block; font-size:0.7rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase;
  color:#17f1d1; margin-bottom:1.25rem;
  opacity:0; animation:wkUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s forwards;
}

.wk-hero-heading {
  font-size:clamp(3.5rem, 8vw, 8rem);
  font-weight:300; letter-spacing:-0.04em; line-height:0.95;
  color:#fafaf6; margin:0;
  opacity:0; animation:wkUp 0.75s cubic-bezier(0.16,1,0.3,1) 0.25s forwards;
}
.wk-hero-heading strong { font-weight:900; color:#f5c200; }

.wk-hero-sub {
  font-size:clamp(1rem,1.4vw,1.1rem); line-height:1.7;
  color:rgba(250,250,246,0.5); margin-top:2rem; max-width:480px;
  opacity:0; animation:wkUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.45s forwards;
}

@keyframes wkUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Filter bar ── */
.wk-filters {
  position:sticky; top:var(--header-h,80px);
  z-index:10;
  background:rgba(13,13,13,0.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(250,250,246,0.06);
  padding:0 clamp(2rem,6vw,5rem);
}

.wk-filters-inner {
  max-width:1300px; margin:0 auto;
  display:flex; align-items:center;
  gap:0.5rem; padding:1rem 0; overflow-x:auto;
  scrollbar-width:none;
}
.wk-filters-inner::-webkit-scrollbar { display:none; }

.wk-filter-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:0.5rem 1.25rem; border-radius:100px;
  border:1px solid rgba(250,250,246,0.1);
  background:transparent; color:rgba(250,250,246,0.45);
  font-size:0.78rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; cursor:pointer; font-family:inherit;
  white-space:nowrap;
  transition:all 0.25s ease;
}
.wk-filter-btn:hover { border-color:rgba(245,194,0,0.3); color:#f5c200; }
.wk-filter-btn.active {
  background:#f5c200; border-color:#f5c200;
  color:#0d0d0d;
}
.wk-filter-count {
  background:rgba(0,0,0,0.15); border-radius:100px;
  padding:1px 6px; font-size:0.65rem; font-weight:900;
}
.wk-filter-btn.active .wk-filter-count { background:rgba(0,0,0,0.2); }

/* ── Grid ── */
.wk-grid-section {
  position:relative; z-index:2;
  padding:4rem 0 8rem;
}

.wk-grid-inner {
  max-width:1300px; margin:0 auto;
  padding:0 clamp(2rem,6vw,5rem);
}

.wk-count-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:2.5rem; padding-bottom:1.25rem;
  border-bottom:1px solid rgba(250,250,246,0.07);
}
.wk-count-bar span {
  font-size:0.78rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:rgba(250,250,246,0.3);
}

.wk-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
}

.wk-card {
  border-radius:1.15rem; overflow:hidden;
  background:#111; cursor:pointer;
  position:relative;

  opacity:0; transform:translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.wk-card.is-visible { opacity:1; transform:translateY(0); }
.wk-card.hidden     { display:none; }

.wk-card:nth-child(3n+1) { transition-delay:0s;    }
.wk-card:nth-child(3n+2) { transition-delay:0.07s; }
.wk-card:nth-child(3n)   { transition-delay:0.14s; }

/* First card spans 2 cols */
.wk-card:first-child {
  grid-column: 1 / 3;
}

.wk-card-img {
  aspect-ratio:4/3; overflow:hidden;
}
.wk-card:first-child .wk-card-img { aspect-ratio:16/8; }

.wk-card-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.7s cubic-bezier(0.19,1,0.22,1);
}
.wk-card:hover .wk-card-img img { transform:scale(1.06); }

.wk-card-body {
  padding:1.5rem;
}

.wk-card-cat {
  display:inline-block; margin-bottom:0.65rem;
  font-size:0.65rem; font-weight:800;
  letter-spacing:0.14em; text-transform:uppercase;
  color:#17f1d1;
}

.wk-card-title {
  font-size:1rem; font-weight:700; color:#fafaf6;
  margin:0 0 0.4rem; transition:color 0.25s;
}
.wk-card:hover .wk-card-title { color:#f5c200; }

.wk-card-client {
  font-size:0.8rem; color:rgba(250,250,246,0.35);
}

/* Hover overlay */
.wk-card-overlay {
  position:absolute; inset:0;
  background:rgba(13,13,13,0.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.35s ease;
}
.wk-card:hover .wk-card-overlay { opacity:1; }

.wk-card-zoom {
  width:3.25rem; height:3.25rem; border-radius:50%;
  background:#f5c200; color:#0d0d0d;
  display:flex; align-items:center; justify-content:center;
  transform:scale(0.7);
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.wk-card-zoom svg { width:1.2rem; height:1.2rem; }
.wk-card:hover .wk-card-zoom { transform:scale(1); }

/* ── Lightbox ── */
.wk-lightbox {
  position:fixed; inset:0; z-index:1000;
  background:rgba(8,8,8,0.95);
  backdrop-filter:blur(16px);
  display:flex; align-items:center; justify-content:center;
  padding:2rem;
  opacity:0; pointer-events:none;
  transition:opacity 0.35s ease;
}
.wk-lightbox.open { opacity:1; pointer-events:all; }

.wk-lb-inner {
  max-width:1000px; width:100%;
  background:#111; border-radius:1.5rem;
  overflow:hidden; display:grid;
  grid-template-columns:1.2fr 1fr;
  transform:translateY(24px);
  transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
  max-height:85vh;
}
.wk-lightbox.open .wk-lb-inner { transform:translateY(0); }

.wk-lb-img { overflow:hidden; max-height:85vh; }
.wk-lb-img img { width:100%; height:100%; object-fit:cover; display:block; }

.wk-lb-content {
  padding:3rem 2.5rem; overflow-y:auto;
  display:flex; flex-direction:column; gap:1.5rem;
}

.wk-lb-cat {
  font-size:0.65rem; font-weight:800;
  letter-spacing:0.18em; text-transform:uppercase; color:#17f1d1;
}

.wk-lb-title {
  font-size:1.6rem; font-weight:700;
  letter-spacing:-0.02em; color:#fafaf6; margin:0;
}

.wk-lb-meta { display:flex; flex-direction:column; gap:0.5rem; }
.wk-lb-meta-row {
  display:flex; align-items:center; gap:0.75rem;
  font-size:0.82rem; color:rgba(250,250,246,0.45);
}
.wk-lb-meta-row strong { color:#fafaf6; font-weight:600; }

.wk-lb-desc {
  font-size:0.9rem; line-height:1.75;
  color:rgba(250,250,246,0.6);
}

.wk-lb-tags { display:flex; gap:0.5rem; flex-wrap:wrap; }
.wk-lb-tag {
  padding:0.3rem 0.85rem; border-radius:100px;
  border:1px solid rgba(250,250,246,0.1);
  font-size:0.7rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(250,250,246,0.45);
}

.wk-lb-close {
  position:absolute; top:1.5rem; right:1.5rem;
  width:2.5rem; height:2.5rem; border-radius:50%;
  background:rgba(250,250,246,0.08); border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:rgba(250,250,246,0.6);
  transition:background 0.25s, color 0.25s;
}
.wk-lb-close svg { width:18px; height:18px; }
.wk-lb-close:hover { background:#f5c200; color:#0d0d0d; }

/* ── Responsive ── */
@media(max-width:900px) {
  .wk-grid { grid-template-columns:1fr 1fr; }
  .wk-card:first-child { grid-column:1 / -1; }
  .wk-lb-inner { grid-template-columns:1fr; max-height:92vh; }
  .wk-lb-img { max-height:260px; }
}
@media(max-width:600px) {
  .wk-grid { grid-template-columns:1fr; }
  .wk-lb-inner { grid-template-columns:1fr; }
}

/* =============================================
   CAREERS PAGE
   ============================================= */

/* ── Hero ── */
.car-hero {
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--header-h,80px) + 4rem) clamp(2rem,6vw,5rem) 5rem;
  position: relative; z-index: 2;
  max-width: 1300px; margin: 0 auto; width: 100%;
}

.car-hero-label {
  font-size:0.7rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase;
  color:#f5c200; margin-bottom:1.25rem;
  display:block;
  opacity:0; animation:carUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s forwards;
}

.car-hero-heading {
  font-size: clamp(3.5rem, 8vw, 8.5rem);
  font-weight:300; letter-spacing:-0.04em; line-height:0.95;
  color:#fafaf6; margin:0 0 2rem;
  opacity:0; animation:carUp 0.75s cubic-bezier(0.16,1,0.3,1) 0.25s forwards;
}
.car-hero-heading strong { font-weight:900; color:#f5c200; }

.car-hero-bottom {
  display:flex; align-items:flex-end; justify-content:space-between; gap:3rem;
  opacity:0; animation:carUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.45s forwards;
}

.car-hero-desc {
  max-width:520px; font-size:clamp(1rem,1.3vw,1.1rem);
  line-height:1.75; color:rgba(250,250,246,0.55);
}

.car-open-count {
  flex-shrink:0; text-align:right;
}
.car-open-count span:first-child {
  display:block; font-size:clamp(2.5rem,4vw,4rem);
  font-weight:900; letter-spacing:-0.04em; color:#17f1d1; line-height:1;
}
.car-open-count span:last-child {
  font-size:0.72rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:rgba(250,250,246,0.35);
}

@keyframes carUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Divider ── */
.car-divider {
  max-width:1300px; margin:0 auto;
  padding:0 clamp(2rem,6vw,5rem); position:relative; z-index:2;
}
.car-divider hr { border:none; border-top:1px solid rgba(250,250,246,0.08); }

/* ── Section wrapper ── */
.car-section { position:relative; z-index:2; padding:7rem 0; }
.car-inner {
  max-width:1300px; margin:0 auto;
  padding:0 clamp(2rem,6vw,5rem);
}

.car-label {
  display:block; font-size:0.7rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase;
  color:#17f1d1; margin-bottom:1.25rem;
}
.car-heading {
  font-size:clamp(2rem,3.5vw,3.25rem);
  font-weight:300; letter-spacing:-0.03em; line-height:1.05;
  color:#fafaf6; margin:0;
}
.car-heading strong { font-weight:700; color:#f5c200; }

/* ── Culture / Why us grid ── */
.car-why-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.25rem; margin-top:3.5rem;
}

.car-why-card {
  padding:2.5rem 1.75rem;
  border:1px solid rgba(250,250,246,0.08);
  border-radius:1.25rem;
  transition:border-color 0.35s, background 0.35s;

  opacity:0; transform:translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1),
              border-color 0.35s, background 0.35s;
}

.car-why-card:nth-child(1) { transition-delay:0s;    }
.car-why-card:nth-child(2) { transition-delay:0.08s; }
.car-why-card:nth-child(3) { transition-delay:0.16s; }
.car-why-card:nth-child(4) { transition-delay:0.24s; }
.car-why-card.is-visible   { opacity:1; transform:translateY(0); }
.car-why-card:hover { border-color:rgba(23,241,209,0.3); background:rgba(23,241,209,0.03); }

.car-why-icon {
  width:2.75rem; height:2.75rem; border-radius:0.65rem;
  background:rgba(23,241,209,0.08);
  display:flex; align-items:center; justify-content:center;
  color:#17f1d1; margin-bottom:1.5rem;
}
.car-why-icon svg { width:1.2rem; height:1.2rem; }
.car-why-card:hover .car-why-icon { background:rgba(23,241,209,0.15); }

.car-why-title {
  font-size:0.95rem; font-weight:700; color:#fafaf6; margin:0 0 0.5rem;
  transition:color 0.3s;
}
.car-why-card:hover .car-why-title { color:#17f1d1; }
.car-why-desc { font-size:0.83rem; line-height:1.65; color:rgba(250,250,246,0.45); }

/* ── Job listings ── */
.car-jobs { display:flex; flex-direction:column; gap:0; margin-top:3.5rem; }

.car-job {
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:2rem;
  padding:2rem 0;
  border-bottom:1px solid rgba(250,250,246,0.08);
  cursor:pointer;
  transition:background 0.25s;

  opacity:0; transform:translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1),
              background 0.25s;
}
.car-jobs > .car-job:first-child { border-top:1px solid rgba(250,250,246,0.08); }
.car-job:nth-child(1) { transition-delay:0s;    }
.car-job:nth-child(2) { transition-delay:0.07s; }
.car-job:nth-child(3) { transition-delay:0.14s; }
.car-job:nth-child(4) { transition-delay:0.21s; }
.car-job:nth-child(5) { transition-delay:0.28s; }
.car-job.is-visible   { opacity:1; transform:translateY(0); }

.car-job:hover { background:rgba(245,194,0,0.03); }

.car-job-meta {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-top:0.5rem;
}

.car-job-title {
  font-size:1.1rem; font-weight:700; color:#fafaf6;
  margin:0 0 0.4rem; transition:color 0.25s;
}
.car-job:hover .car-job-title { color:#f5c200; }

.car-job-tag {
  display:inline-block; padding:0.25rem 0.75rem;
  border-radius:100px; font-size:0.68rem;
  font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
}
.car-job-tag.dept {
  background:rgba(245,194,0,0.1); color:#f5c200;
  border:1px solid rgba(245,194,0,0.2);
}
.car-job-tag.type {
  background:rgba(23,241,209,0.08); color:#17f1d1;
  border:1px solid rgba(23,241,209,0.2);
}
.car-job-location {
  font-size:0.82rem; color:rgba(250,250,246,0.4);
  display:flex; align-items:center; gap:5px;
}
.car-job-location svg { width:12px; height:12px; }

.car-job-arrow {
  width:2.5rem; height:2.5rem; border-radius:50%;
  border:1.5px solid rgba(250,250,246,0.12);
  display:flex; align-items:center; justify-content:center;
  color:rgba(250,250,246,0.3); flex-shrink:0;
  transition:background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.car-job-arrow svg { width:14px; height:14px; }
.car-job:hover .car-job-arrow {
  background:#f5c200; border-color:#f5c200; color:#0d0d0d; transform:rotate(45deg);
}

/* ── Apply form ── */
.car-apply-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(3rem,6vw,7rem); align-items:start;
  margin-top:3.5rem;
}

.car-apply-left p {
  font-size:1rem; line-height:1.8; color:rgba(250,250,246,0.6);
  margin-top:1.5rem;
}

.car-apply-form { display:flex; flex-direction:column; gap:1.1rem; }

.car-field { display:flex; flex-direction:column; gap:0.45rem; }

.car-field label {
  font-size:0.68rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(250,250,246,0.35);
}

.car-field input,
.car-field textarea,
.car-field select {
  background:rgba(250,250,246,0.04);
  border:1px solid rgba(250,250,246,0.1);
  border-radius:0.65rem;
  padding:0.9rem 1.15rem;
  font-size:0.92rem; color:#fafaf6;
  font-family:inherit; outline:none;
  transition:border-color 0.25s, background 0.25s;
  -webkit-appearance:none;
}
.car-field input::placeholder,
.car-field textarea::placeholder { color:rgba(250,250,246,0.2); }
.car-field input:focus,
.car-field textarea:focus,
.car-field select:focus {
  border-color:rgba(23,241,209,0.45);
  background:rgba(23,241,209,0.04);
}
.car-field textarea { resize:vertical; min-height:120px; }
.car-field select option { background:#1a1a1a; color:#fafaf6; }

.car-upload {
  border:1.5px dashed rgba(250,250,246,0.15);
  border-radius:0.65rem; padding:1.5rem 1.25rem;
  display:flex; align-items:center; gap:1rem;
  cursor:pointer; transition:border-color 0.25s, background 0.25s;
}
.car-upload:hover { border-color:rgba(23,241,209,0.4); background:rgba(23,241,209,0.03); }
.car-upload-icon { color:#17f1d1; }
.car-upload-icon svg { width:22px; height:22px; }
.car-upload-text { font-size:0.85rem; color:rgba(250,250,246,0.45); }
.car-upload-text strong { color:#fafaf6; display:block; font-size:0.9rem; }

.car-field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.car-apply-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:#f5c200; color:#0d0d0d;
  border:2px solid #f5c200; border-radius:100px;
  padding:1rem 2.25rem; font-size:0.88rem;
  font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  cursor:pointer; font-family:inherit;
  transition:background 0.25s, color 0.25s, transform 0.25s;
  margin-top:0.5rem; width:fit-content;
}
.car-apply-btn svg { width:16px; height:16px; transition:transform 0.25s; }
.car-apply-btn:hover { background:transparent; color:#f5c200; transform:translateY(-2px); }
.car-apply-btn:hover svg { transform:translateX(4px); }

/* ── Responsive ── */
@media(max-width:1000px) {
  .car-why-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:750px) {
  .car-hero-bottom { flex-direction:column; align-items:flex-start; }
  .car-why-grid { grid-template-columns:1fr; }
  .car-apply-grid { grid-template-columns:1fr; gap:3rem; }
  .car-field-row { grid-template-columns:1fr; }
  .car-job { grid-template-columns:1fr auto; }
}


/* =============================================
   OUR PROCESS SECTION
   ============================================= */

.op-section {
  position: relative;
  z-index: 2;
  padding: 7rem 0 8rem;
  color: #fafaf6;
  overflow: hidden;
}

.op-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

/* ── Section header ── */
.op-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(250,250,246,0.1);
}

.op-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f5c200;
  margin-bottom: 0.85rem;
}

.op-heading {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fafaf6;
  margin: 0;
}

.op-header-desc {
  max-width: 340px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(250,250,246,0.5);
  text-align: right;
  flex-shrink: 0;
}

/* ── Steps grid ── */
.op-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

/* Connecting line behind steps */
.op-steps::before {
  content: '';
  position: absolute;
  top: 2.6rem;                   /* vertically centred with the dot */
  left: calc(1rem + 1.6rem);     /* starts at first dot centre */
  right: calc(1rem + 1.6rem);    /* ends at last dot centre */
  height: 1px;
  background: linear-gradient(
    to right,
    #f5c200,
    rgba(245,194,0,0.3) 50%,
    rgba(245,194,0,0.05)
  );
  z-index: 0;
}

/* ── Individual step ── */
.op-step {
  padding: 0 1rem;
  position: relative;
  z-index: 1;

  /* Scroll reveal start state */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.op-step:nth-child(1) { transition-delay: 0s;    }
.op-step:nth-child(2) { transition-delay: 0.12s; }
.op-step:nth-child(3) { transition-delay: 0.24s; }
.op-step:nth-child(4) { transition-delay: 0.36s; }

.op-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Dot / step indicator ── */
.op-step-dot {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #0d0d0d;
  border: 2px solid #f5c200;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  position: relative;
  transition: background 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.op-step:hover .op-step-dot {
  background: #f5c200;
  transform: scale(1.12);
}

/* Arrow icon inside dot */
.op-step-dot svg {
  width: 1rem;
  height: 1rem;
  color: #f5c200;
  transition: color 0.3s ease;
}

.op-step:hover .op-step-dot svg {
  color: #0d0d0d;
}

/* ── Step number ── */
.op-step-num {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(245,194,0,0.5);
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  transition: color 0.3s ease;
}

.op-step:hover .op-step-num { color: #f5c200; }

/* ── Step title ── */
.op-step-title {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fafaf6;
  line-height: 1.15;
  margin: 0 0 0.85rem;
  transition: color 0.3s ease;
}

.op-step:hover .op-step-title { color: #f5c200; }

/* ── Step description ── */
.op-step-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(250,250,246,0.55);
  margin: 0;
  transition: color 0.3s ease;
}

.op-step:hover .op-step-desc { color: rgba(250,250,246,0.8); }

/* ── Large background number (decorative) ── */
.op-step::before {
  content: attr(data-num);
  position: absolute;
  bottom: -1rem;
  right: 0.5rem;
  font-size: clamp(5rem, 8vw, 8rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: rgba(245,194,0,0.04);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  transition: color 0.4s ease;
}

.op-step:hover::before {
  color: rgba(245,194,0,0.09);
}

/* ── Vertical dividers between steps ── */
.op-step + .op-step {
  border-left: 1px solid rgba(250,250,246,0.07);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .op-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 3.5rem;
  }
  .op-header-desc { text-align: left; max-width: 100%; }

  .op-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 0;
  }

  .op-steps::before { display: none; }

  .op-step + .op-step {
    border-left: none;
  }

  .op-step:nth-child(odd) {
    border-right: 1px solid rgba(250,250,246,0.07);
    padding-right: 2rem;
  }

  .op-step:nth-child(even) {
    padding-left: 2rem;
  }

  .op-step:nth-child(3),
  .op-step:nth-child(4) {
    border-top: 1px solid rgba(250,250,246,0.07);
    padding-top: 2.5rem;
  }
}

@media (max-width: 550px) {
  .op-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .op-step {
    padding: 2rem 0;
    border-top: 1px solid rgba(250,250,246,0.07);
    border-left: none !important;
    border-right: none !important;
  }

  .op-step:first-child { border-top: none; padding-top: 0; }
}


/* =============================================
   FAQ SECTION
   ============================================= */

.faq-section {
  position: relative;
  z-index: 2;
  padding: 7rem 0 8rem;
  color: #fafaf6;
}

.faq-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 0 clamp(3rem, 8vw, 8rem);
  align-items: start;
}

/* ── Left: sticky header col ── */
.faq-header {
  position: sticky;
  top: 7rem;
}

.faq-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f5c200;
  margin-bottom: 1rem;
}

.faq-heading {
  font-size: clamp(2.8rem, 4.5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: #fafaf6;
  margin: 0 0 1.75rem;
}

.faq-heading em {
  font-style: normal;
  color: #f5c200;
}

.faq-intro {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(250,250,246,0.5);
  margin: 0 0 2.5rem;
}

.faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250,250,246,0.45);
  position: relative;
  transition: color 0.25s ease;
}

.faq-cta::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: #f5c200;
  transition: width 0.4s cubic-bezier(0.19,1,0.22,1);
}

.faq-cta:hover { color: #f5c200; }
.faq-cta:hover::after { width: 100%; }

.faq-cta svg {
  width: 16px; height: 16px;
  transition: transform 0.25s ease;
}
.faq-cta:hover svg { transform: translateX(5px); }

/* ── Right: accordion list ── */
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Individual FAQ item ── */
.faq-item {
  border-top: 1px solid rgba(250,250,246,0.1);

  /* scroll reveal */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.faq-item:last-child { border-bottom: 1px solid rgba(250,250,246,0.1); }

.faq-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger */
.faq-item:nth-child(1) { transition-delay: 0.05s; }
.faq-item:nth-child(2) { transition-delay: 0.12s; }
.faq-item:nth-child(3) { transition-delay: 0.19s; }
.faq-item:nth-child(4) { transition-delay: 0.26s; }
.faq-item:nth-child(5) { transition-delay: 0.33s; }

/* ── Question button ── */
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.75rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  text-align: left;
  color: #fafaf6;
  -webkit-tap-highlight-color: transparent;
}

.faq-question:focus-visible {
  outline: 2px solid #f5c200;
  outline-offset: 4px;
  border-radius: 4px;
}

.faq-q-inner {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}

/* Question number */
.faq-num {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(245,194,0,0.45);
  flex-shrink: 0;
  min-width: 1.8rem;
  transition: color 0.3s ease;
}

/* Question text */
.faq-q-text {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

/* Plus/minus icon */
.faq-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1.5px solid rgba(250,250,246,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  color: #fafaf6;
}

.faq-icon svg {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), color 0.3s ease;
}

/* Hover state */
.faq-question:hover .faq-q-text { color: #f5c200; }
.faq-question:hover .faq-num    { color: #f5c200; }
.faq-question:hover .faq-icon {
  border-color: #f5c200;
  background: rgba(245,194,0,0.08);
}

/* Open state */
.faq-item.is-open .faq-q-text   { color: #f5c200; }
.faq-item.is-open .faq-num      { color: #f5c200; }
.faq-item.is-open .faq-icon {
  background: #f5c200;
  border-color: #f5c200;
  color: #0d0d0d;
  transform: rotate(45deg);
}
.faq-item.is-open .faq-icon svg { color: #0d0d0d; }

/* ── Answer panel ── */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.16,1,0.3,1);
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer-inner p {
  padding: 0 1rem 1.75rem calc(1.8rem + 1.25rem);  /* indent under the number */
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(250,250,246,0.65);
  margin: 0;
}

/* Active item top border highlight */
.faq-item.is-open {
  border-top-color: rgba(245,194,0,0.5);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .faq-wrap {
    grid-template-columns: 1fr;
    gap: 3.5rem 0;
  }

  .faq-header {
    position: static;
  }
}

@media (max-width: 550px) {
  .faq-answer-inner p {
    padding: 0 0 1.5rem 0;
  }
}


/* =============================================
   DIGITAL JOURNEY — Stats + World Map Section
   Brand colours: #0d0d0d bg · #f5c200 yellow · #fafaf6 text
   ============================================= */

.dj-section {
  position: relative;
  z-index: 2;
  padding: 6rem 0 5rem;
  color: #fafaf6;
  overflow: hidden;
}

.dj-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

/* ── Top row: title left + stat boxes right ── */
.dj-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 5rem;
}

.dj-title-block {
  flex-shrink: 0;
}

.dj-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f5c200;
  margin-bottom: 0.5rem;
}

.dj-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fafaf6;
  margin: 0;
}

/* ── Stat boxes ── */
.dj-stats {
  display: flex;
  gap: 1.25rem;
  flex-shrink: 0;
}

.dj-stat {
  border: 1.5px dashed #f5c200;
  border-radius: 0.5rem;
  padding: 1.4rem 2rem;
  text-align: center;
  min-width: 9rem;
  transition: background 0.3s ease;
}

.dj-stat:hover {
  background: rgba(245, 194, 0, 0.07);
}

.dj-stat-num {
  display: block;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #f5c200;
  line-height: 1;
  margin-bottom: 0.35rem;
}

.dj-stat-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 250, 246, 0.6);
}

/* ── Map heading ── */
.dj-map-header {
  text-align: center;
  margin-bottom: 3rem;
}

.dj-map-heading {
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fafaf6;
  line-height: 1;
  margin: 0 0 0.75rem;
}

.dj-map-sub {
  font-size: 1rem;
  color: rgba(250, 250, 246, 0.55);
  font-weight: 400;
}

/* ── Map container (D3 renders into this) ── */
#dj-map-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

#dj-map-container svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Scroll reveal ── */
.dj-stat,
.dj-title-block,
.dj-map-header,
#dj-map-container {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.dj-stat:nth-child(2) { transition-delay: 0.08s; }
.dj-stat:nth-child(3) { transition-delay: 0.16s; }
.dj-map-header        { transition-delay: 0.1s;  }
#dj-map-container     { transition-delay: 0.2s;  }

.dj-stat.is-visible,
.dj-title-block.is-visible,
.dj-map-header.is-visible,
#dj-map-container.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .dj-top {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3.5rem;
  }
}

@media (max-width: 600px) {
  .dj-stats {
    flex-wrap: wrap;
    gap: 0.85rem;
  }
  .dj-stat {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
    padding: 1.1rem 1rem;
  }
  .dj-map-heading { font-size: clamp(1.6rem, 8vw, 2.4rem); }
}