/* ============================================ */
/* GroAI Website Styles                        */
/* Brand: #FEFFFC bg, #0081C0 accent,          */
/*   #1F1F29 dark, #282834 text, #4D6B6B muted */
/* Typography: PP Mondwest + Inter              */
/* ============================================ */

/* === FONT FACE === */
@font-face {
  font-family: 'PP Mondwest';
  src: url('./fonts/PPMondwest-Regular.woff2') format('woff2'),
       url('./fonts/PPMondwest-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background-color: #FEFFFC;
  overscroll-behavior-y: none;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #282834;
  background-color: #FEFFFC;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, canvas, svg { display: block; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }

/* === FOCUS VISIBLE === */
:focus-visible {
  outline: 2px solid #0081C0;
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid #0081C0;
  outline-offset: 2px;
  border-radius: 4px;
}

/* === PIXEL CANVAS === */
.pixel-canvas {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* === CONTAINER === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 768px) {
  .container { padding-left: 48px; padding-right: 48px; }
}
@media (min-width: 1024px) {
  .container { padding-left: 60px; padding-right: 60px; }
}

/* === TYPOGRAPHY === */
.font-display,
.hero-title,
.hero-subtitle,
.section-heading,
.section-heading-lg,
.section-heading-follow,
.footer-heading {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.section-heading {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: #282834;
  max-width: 700px;
}
.section-work .section-heading {
  font-size: 56px;
  max-width: 100%;
}
.section-heading-lg {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: #282834;
  max-width: 800px;
}
.section-heading-follow {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #282834;
  margin-top: 12px;
  margin-bottom: 64px;
}
.section-heading-light {
  color: #FFFFFF;
  font-size: 52px;
  line-height: 1.3;
  max-width: 920px;
}
@media (max-width: 768px) {
  .section-heading-light { font-size: 32px; }
}

.text-accent { color: #0081C0; }

.body-text {
  font-size: 16px;
  line-height: 1.65;
  color: #282834;
  max-width: 500px;
  margin-bottom: 16px;
}

/* === SECTION SPACING === */
.section {
  padding: 80px 0;
  position: relative;
  z-index: 2;
  background: #FEFFFC;
}
.section-vision {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
}
.section-problem { padding: 40px 0 100px; }
.section-dark { padding: 100px 0; background-color: #1F1F29; } /* legacy */
.section-work {
  padding: 200px 0 0;
  position: relative;
  z-index: 2;
  background: #FEFFFC;
}

@media (min-width: 768px) {
  .section-heading { font-size: 40px; }
  .section-heading-lg { font-size: 40px; }
}
@media (max-width: 768px) {
  .section-heading { font-size: 28px; }
  .section-heading-lg { font-size: 28px; }
  .section-heading-follow { font-size: 24px; margin-bottom: 40px; }
  .section { padding: 60px 0; }
  .section-vision { padding: 40px 0; }
  .section-problem { padding: 30px 0 80px; }
}

/* ============================================ */
/* NAVIGATION                                   */
/* ============================================ */
.nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 8px 8px 8px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 4px 24px rgba(0,0,0,0.08);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.3s ease;
}
.nav.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.12); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 0;
}
.nav-logo-icon { flex-shrink: 0; }
.nav-logo-icon rect { fill: #FFFFFF; }
.nav-dark .nav-logo-icon rect,
.page-partners .nav-logo-icon rect,
.page-briefs .nav-logo-icon rect,
.page-brief-article .nav-logo-icon rect { fill: #282834; }
.page-partners .partners-hero-icon rect,
.page-partners .partners-listings-icon rect { fill: #282834; }

.nav-links {
  display: none;
  align-items: center;
  gap: 2px;
}
@media (min-width: 640px) {
  .nav-links { display: flex; }
}

.nav-link {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 16px;
  transition: color 0.4s ease;
}
.nav-link:hover { color: #FFFFFF; }
.nav-link-active { color: #FFFFFF; font-weight: 600; }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(to right, rgba(15, 15, 20, 0.95), rgba(45, 45, 55, 0.8));
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}
.nav-cta:hover { opacity: 0.85; }

.nav-mobile-btn {
  display: flex;
  color: rgba(255,255,255,0.8);
  padding: 6px;
  transition: color 0.4s ease;
}
@media (min-width: 640px) {
  .nav-mobile-btn { display: none; }
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(31, 31, 41, 0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}
.mobile-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  color: rgba(255,255,255,0.8);
}
.mobile-menu-link {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-size: 28px;
  color: #FFFFFF;
  transition: color 0.2s ease;
}
.mobile-menu-link:hover { color: #0081C0; }

/* ============================================ */
/* HERO                                         */
/* ============================================ */
.hero {
  position: relative;
  z-index: 2;
  min-height: 160vh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.hero-image-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 30%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(31,31,41,0.25) 0%,
    rgba(31,31,41,0.08) 25%,
    rgba(31,31,41,0.1) 50%,
    rgba(31,31,41,0.25) 75%,
    rgba(254,255,252,1) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}
@media (min-width: 768px) {
  .hero-content { padding: 0 48px; }
}

.hero-inner { width: 100%; }

.hero-title {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.4px;
  color: #FFFFFF;
  text-align: center;
  padding-top: 28vh;
  margin-bottom: 0;
  text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-actions-center {
  justify-content: center;
  margin-top: 24px;
}

/* --- Frosted glass card (bottom-left) --- */
.hero-glass-card {
  position: fixed;
  left: 24px;
  bottom: 40px;
  z-index: 99;
  max-width: 500px;
  width: calc(100% - 48px);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 32px 32px 28px;
}
.hero-glass-card.pinned {
  position: absolute;
  left: 24px;
}
.hero-glass-heading {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.2px;
}
.hero-glass-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
}
.hero-glass-name {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 2px;
}
.hero-glass-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.3px;
}
.hero-glass-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin-bottom: 16px;
}
.text-link.text-link-dark {
  color: #FFFFFF;
  font-size: 14px;
}
.text-link.text-link-dark:hover {
  color: #FFFFFF;
}
.text-link-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}

@media (min-width: 640px) {
  .hero-title { font-size: 48px; }
  .hero-glass-card { left: 40px; bottom: 48px; width: auto; }
  .hero-glass-card.pinned { left: 40px; }
  .hero-glass-heading { font-size: 26px; }
}
@media (min-width: 768px) {
  .hero-title { font-size: 56px; }
  .hero-glass-card { left: 48px; bottom: 56px; padding: 36px 36px 30px; }
  .hero-glass-card.pinned { left: 48px; }
  .hero-glass-heading { font-size: 28px; }
}
@media (min-width: 1024px) {
  .hero-title { font-size: 64px; }
  .hero-glass-card { left: 60px; bottom: 64px; max-width: 520px; padding: 40px 40px 32px; }
  .hero-glass-card.pinned { left: 60px; }
  .hero-glass-heading { font-size: 30px; }
}
.btn-hero {
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(0,129,192,0.3);
}

.hero-side-text {
  display: none;
  position: absolute;
  right: 60px;
  bottom: 100px;
  max-width: 200px;
  text-align: right;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
}
@media (min-width: 1024px) { .hero-side-text { display: block; } }

/* === TEXT LINK === */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #282834;
  transition: color 0.2s ease;
  cursor: pointer;
}
.text-link:hover { color: #0081C0; }
.text-link-light { color: rgba(255,255,255,0.85); }
.text-link-light:hover { color: #FFFFFF; }

/* ============================================ */
/* VISION SECTION                               */
/* ============================================ */
.vision-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
@media (min-width: 768px) {
  .vision-layout {
    flex-direction: row;
    gap: 60px;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .vision-layout { gap: 100px; }
}

.vision-flower {
  flex-shrink: 0;
  width: 180px;
}
@media (min-width: 768px) { .vision-flower { width: 220px; } }
@media (min-width: 1024px) { .vision-flower { width: 280px; } }

.vision-plant-img {
  width: 100%;
  height: auto;
  display: block;
}

.vision-text {
  flex: 1;
  max-width: 560px;
}

/* ============================================ */
/* DIAGRAM SECTION                              */
/* ============================================ */

/* Scroll-hijack wrapper: 4 steps + spacer + floating overlay */
.scroll-hijack-wrap {
  position: relative;
  z-index: 2;
  background: #FEFFFC;
  /* height set by content: 100vh diagram + 350vh spacer + 100vh floating = 550vh */
}
.scroll-hijack-wrap .section-problem {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
  background: #FEFFFC;
  will-change: filter, opacity;
}
.scroll-spacer {
  height: 350vh;
}

.diagram-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 768px) {
  .diagram-layout {
    flex-direction: row;
    gap: 48px;
  }
}

.diagram-steps {
  flex: 0 0 35%;
}

.step-dots {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  margin-left: -12px;
}
.step-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.3s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-dot::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D0D0D0;
  transition: background 0.3s ease, transform 0.3s ease;
}
.step-dot:hover::after {
  background: #A0A0A0;
}
.step-dot.active::after { background: #282834; transform: scale(1.3); }

.step-items { position: relative; min-height: 120px; }
.step-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.step-item.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.step-label {
  font-size: 16px;
  font-weight: 600;
  color: #282834;
  margin-bottom: 8px;
}
.step-body {
  font-size: 16px;
  line-height: 1.65;
  color: #282834;
}

.diagram-panel {
  flex: 1;
  background: #F5F5F5;
  border-radius: 12px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.diagram-panel canvas {
  width: 100%;
  max-width: 360px;
  transition: opacity 0.4s ease;
}
.diagram-panel canvas.fade-out {
  opacity: 0;
}
.diagram-caption {
  text-align: center;
  font-size: 13px;
  color: #4D6B6B;
  font-style: italic;
  margin-top: 16px;
  transition: opacity 0.4s ease;
}
.diagram-caption.fade-out {
  opacity: 0;
}

/* ============================================ */
/* FLOATING IMAGE SECTION                       */
/* ============================================ */
.section-floating {
  position: sticky;
  top: 70px;
  z-index: 2;
  min-height: calc(100vh - 130px);
  margin: 0 16px;
  border-radius: 20px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .section-floating {
    top: 80px;
    min-height: calc(100vh - 170px);
    margin: 0 20px;
    border-radius: 24px;
  }
}

.floating-image-wrap {
  position: relative;
  min-height: calc(100vh - 130px);
  display: flex;
  align-items: stretch;
}
@media (min-width: 768px) {
  .floating-image-wrap { min-height: calc(100vh - 170px); }
}

.floating-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
}

.floating-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(31,31,41,0.7) 0%,
    rgba(31,31,41,0.4) 40%,
    rgba(31,31,41,0.05) 70%,
    transparent 100%
  );
}

.floating-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 40px;
  min-height: calc(100vh - 130px);
  padding-top: 80px;
  padding-bottom: 50px;
  max-width: none;
  margin-left: 0;
  padding-left: 48px;
}
@media (min-width: 768px) {
  .floating-content { min-height: calc(100vh - 170px); }
}

.floating-text {
  flex: 0 0 70%;
  max-width: 920px;
}

.floating-subtitle {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
  margin-top: 16px;
  margin-bottom: 8px;
}

.typewriter-cursor {
  display: inline-block;
  color: rgba(255,255,255,0.7);
  font-weight: 300;
  animation: blink 0.6s step-end infinite;
  margin-left: 1px;
}
.hero-typewriter-cursor {
  display: inline-block;
  color: rgba(255,255,255,0.8);
  font-weight: 300;
  animation: blink 0.6s step-end infinite;
  margin-left: 2px;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.floating-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 20px;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-decoration: none;
}
.btn:hover { opacity: 0.85; }
.btn-accent { background: #0081C0; color: #FFFFFF; }
.btn-outline-light {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-outline-light:hover { border-color: #FFFFFF; opacity: 1; }

.floating-tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  color: rgba(255,255,255,0.45);
}
.floating-tagline p { font-size: 15px; }
.floating-tagline strong { color: rgba(255,255,255,0.75); }

/* Notifications */
.floating-notifs {
  flex: 1;
  position: relative;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: flex-end;
}
@media (max-width: 1023px) {
  .floating-notifs { display: none; }
}

.notif-card {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  padding: 14px 18px;
  max-width: 280px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.notif-card.show {
  opacity: 1;
  transform: translateY(0);
}

.notif-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.notif-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notif-icon-blue { background: rgba(0,129,192,0.1); color: #0081C0; }
.notif-icon-green { background: rgba(76,175,80,0.1); color: #2E7D32; }
.notif-icon-purple { background: rgba(156,39,176,0.1); color: #7B1FA2; }
.notif-icon-amber { background: rgba(255,152,0,0.1); color: #E65100; }

.notif-title {
  font-size: 14px;
  font-weight: 600;
  color: #282834;
  margin-bottom: 2px;
}
.notif-body {
  font-size: 13px;
  color: #4D6B6B;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .floating-text { flex: 1; max-width: 100%; }
  .floating-content { flex-direction: column; padding-top: 80px; }
}

/* ============================================ */
/* WORK CARDS                                   */
/* ============================================ */
.section-work .text-link { margin-bottom: 40px; }

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 16px;
}
@media (min-width: 640px) {
  .cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .cards-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.card {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.card-image canvas,
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 40%);
}
.card-image-text {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  padding: 10px 18px;
  text-align: center;
  width: calc(100% - 56px);
}
.card-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 2px;
}
.card-subtitle {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
}

/* ============================================ */
/* MAIN CONTENT WRAPPER                         */
/* ============================================ */
.main-content {
  position: relative;
  z-index: 2;
  background: #FEFFFC;
}

/* ============================================ */
/* FOOTER                                       */
/* ============================================ */
.footer {
  background: #FEFFFC;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  max-height: 100vh;
  overflow: hidden;
}

.footer-statement {
  padding: 64px 24px 40px;
  text-align: center;
}
@media (min-width: 768px) { .footer-statement { padding: 96px 48px 56px; } }

.footer-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.footer-heading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #282834;
  max-width: 600px;
  margin: 0 auto 16px;
}
@media (min-width: 768px) { .footer-heading { font-size: 46px; } }

.footer-cta-text {
  font-size: 17px;
  color: #4D6B6B;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.footer-cta-link {
  color: #282834;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.footer-cta-link:hover { color: #0081C0; }
.footer-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid #bbb;
  border-radius: 50%;
  color: #282834;
}

.footer-nav-row {
  border-top: 1px solid #E5E5E5;
  background: #FEFFFC;
}
.footer-nav-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  padding-bottom: 24px;
}
@media (min-width: 768px) {
  .footer-nav-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.footer-link {
  font-size: 14px;
  color: #4D6B6B;
  transition: color 0.2s ease;
}
.footer-link:hover { color: #0081C0; }

.footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-email {
  font-size: 14px;
  color: #4D6B6B;
  display: none;
}
@media (min-width: 640px) { .footer-email { display: inline; } }

.footer-socials {
  display: flex;
  align-items: center;
  gap: 4px;
}
.social-icon {
  color: #282834;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
}
.social-icon:hover { color: #0081C0; background: rgba(0,129,192,0.06); }

.footer-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  max-height: 85vh;
}
.footer-banner-text {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.footer-banner canvas,
.footer-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  display: block;
}

.footer-copyright {
  padding: 16px 0;
}
.footer-copyright-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
@media (min-width: 640px) {
  .footer-copyright-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}
.footer-copyright p {
  font-size: 13px;
  color: #4D6B6B;
}

/* ============================================ */
/* COOKIE BANNER                                */
/* ============================================ */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 90;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 12px 20px;
  max-width: 520px;
  width: calc(100% - 40px);
  transition: transform 0.5s ease;
}
.cookie-banner.show {
  transform: translateX(-50%) translateY(0);
}
.cookie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-text {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cookie-icon { font-size: 16px; }
.cookie-text p { font-size: 14px; color: #282834; }
.cookie-text em { color: #4D6B6B; }
.cookie-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.cookie-btn {
  font-size: 14px;
  color: #4D6B6B;
  cursor: pointer;
  padding: 8px 12px;
  transition: color 0.2s ease;
}
.cookie-btn:hover { color: #282834; }
.cookie-btn-accept {
  color: #282834;
  font-weight: 500;
}
.cookie-btn-accept:hover { color: #0081C0; }

/* ============================================ */
/* LEGAL PAGES (Privacy / Terms)                */
/* ============================================ */
.legal-main {
  padding-top: 120px;
  background: #FEFFFC;
  position: relative;
  z-index: 2;
}
.legal-container {
  max-width: 720px;
  padding-bottom: 64px;
}
.legal-title {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #282834;
  margin-bottom: 8px;
}
@media (min-width: 768px) { .legal-title { font-size: 46px; } }
.legal-updated {
  font-size: 14px;
  color: #4D6B6B;
  margin-bottom: 48px;
}
.legal-content h2 {
  font-size: 20px;
  font-weight: 600;
  color: #282834;
  margin: 40px 0 12px;
}
.legal-content h3 {
  font-size: 17px;
  font-weight: 600;
  color: #282834;
  margin: 24px 0 8px;
}
.legal-content p {
  font-size: 16px;
  line-height: 1.7;
  color: #4D6B6B;
  margin-bottom: 12px;
}
.legal-content ul {
  padding-left: 24px;
  margin-bottom: 12px;
}
.legal-content li {
  font-size: 16px;
  line-height: 1.7;
  color: #4D6B6B;
  margin-bottom: 6px;
}
.legal-content strong {
  color: #282834;
}

/* Footer legal links */
.footer-legal-links {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.footer-legal-links a {
  color: rgba(255,255,255,0.4);
  transition: color 0.2s ease;
}
.footer-legal-links a:hover {
  color: rgba(255,255,255,0.7);
}

/* ============================================ */
/* SCROLL REVEAL ANIMATIONS                     */
/* ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .notif-card { transition: none; }
  .rotating-item { transition: none; }
  html { scroll-behavior: auto; }
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
  .nav {
    left: 16px;
    right: 16px;
    transform: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .nav-cta {
    margin-left: auto;
  }
  .hero { min-height: 90vh; }
  .hero-title { padding-top: 16vh; }
  .hero-glass-card {
    position: absolute;
    bottom: 12vh;
    top: auto;
  }
  .main-content,
  .about-main,
  .partners-main,
  .briefs-main,
  .brief-article-main {
    margin-bottom: 30vh !important;
  }
  .notif-card { max-width: 240px; font-size: 11px; }
  .scroll-spacer { height: 350vh; }
  .footer-link-services { display: none; }
  .page-enquire .nav {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .page-enquire .nav-logo-icon rect { fill: #FFFFFF; }
  .footer-banner-text {
    font-size: 10px;
    white-space: normal;
    text-align: center;
    width: calc(100% - 48px);
  }
  .hero-image {
    object-position: 65% 30%;
  }
}

/* ============================================ */
/* PARTNERS PAGE                                */
/* ============================================ */

/* -- Nav dark variant (on light background) -- */
.nav-dark {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.nav-dark .nav-link {
  color: rgba(40, 40, 52, 0.6);
}
.nav-dark .nav-link:hover {
  color: #282834;
}
.nav-dark .nav-link-active {
  color: #282834;
  font-weight: 500;
}
.nav-dark .nav-mobile-btn {
  color: #282834;
}

/* -- Partners main wrapper -- */
.partners-main {
  position: relative;
  z-index: 2;
  background: #FEFFFC;
}

/* -- Partners Hero -- */
.partners-hero {
  padding: 160px 0 40px;
  text-align: center;
  background: #FEFFFC;
}
.partners-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}
.partners-hero-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.partners-hero-subtitle {
  font-size: 14px;
  color: #4D6B6B;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.partners-hero-title {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #282834;
}
.partners-typewriter-cursor {
  display: inline-block;
  color: #282834;
  font-weight: 300;
  animation: blink 0.6s step-end infinite;
  margin-left: 2px;
}
@media (min-width: 768px) {
  .partners-hero-title { font-size: 60px; }
}
@media (min-width: 1024px) {
  .partners-hero-title { font-size: 68px; }
  .partners-hero { padding: 180px 0 48px; }
}
@media (max-width: 640px) {
  .partners-hero { padding: 120px 0 48px; }
  .partners-hero-title { font-size: 36px; }
}

/* -- Logos Carousel -- */
.logos-carousel-section {
  padding: 16px 0 56px;
  background: #FEFFFC;
}
.logos-carousel-label {
  font-size: 14px;
  color: #4D6B6B;
  text-align: center;
  margin-bottom: 32px;
  letter-spacing: 0.3px;
}
.logos-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 12px;
}
.logos-carousel-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.logos-carousel-fade-left {
  left: 0;
  background: linear-gradient(to right, #FEFFFC 0%, transparent 100%);
}
.logos-carousel-fade-right {
  right: 0;
  background: linear-gradient(to left, #FEFFFC 0%, transparent 100%);
}
@media (min-width: 768px) {
  .logos-carousel-fade { width: 100px; }
}
.logos-carousel-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  padding: 20px 0;
  animation: carousel-scroll 30s linear infinite;
}
@media (max-width: 640px) {
  .logos-carousel-track { gap: 36px; animation-duration: 22s; }
}
.logos-carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  opacity: 0.45;
  pointer-events: none;
}
.logos-carousel-logo {
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(100%);
}
.logos-carousel-logo-sq {
  height: 44px;
  width: 44px;
  border-radius: 10px;
  object-fit: cover;
}
.logos-carousel-name {
  font-size: 11px;
  color: #4D6B6B;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
@keyframes carousel-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos-carousel-track { animation: none; }
}

/* -- Partners Intro (photos + quote) -- */
.partners-intro {
  padding: 0 0 100px;
  background: #FEFFFC;
}
.partners-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 64px;
  align-items: start;
}
.partners-editorial-right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.partners-photo {
  border-radius: 12px;
  overflow: hidden;
}
.partners-photo-tall {
  aspect-ratio: 4 / 5;
}
.partners-photo-small {
  aspect-ratio: 4 / 3;
}
.partners-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.partners-quote-block {
  max-width: 720px;
}
.partners-quote {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: #282834;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .partners-quote { font-size: 38px; }
}
@media (max-width: 640px) {
  .partners-editorial { gap: 12px; margin-bottom: 40px; }
  .partners-photo-tall { aspect-ratio: 4 / 5; }
  .partners-quote { font-size: 15px; line-height: 1.35; }
  .partners-tagline { font-size: 11px; }
}
.partners-tagline {
  font-size: 14px;
  color: #4D6B6B;
  font-style: italic;
}
.partners-body {
  max-width: 560px;
}
.partners-body p {
  font-size: 15px;
  line-height: 1.7;
  color: #282834;
  margin-bottom: 16px;
}
.partners-body .text-link {
  margin-top: 8px;
}

/* -- Partners Values (dark section) -- */
.partners-values {
  position: relative;
  overflow: hidden;
  padding: 100px 0 120px;
}
.partners-values-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.partners-values-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.partners-values-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(31, 31, 41, 0.45) 0%,
    rgba(31, 31, 41, 0.35) 50%,
    rgba(31, 31, 41, 0.5) 100%
  );
}
.partners-values-content {
  position: relative;
  z-index: 2;
}
.partners-values-heading {
  margin-bottom: 56px;
  max-width: 600px;
}
.values-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 900px;
}
.value-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 16px 18px;
  flex: 0 1 auto;
  width: calc(33.333% - 8px);
}
@media (max-width: 1023px) {
  .value-card { width: calc(50% - 6px); }
}
@media (max-width: 640px) {
  .value-card { width: 100%; }
}
.value-card-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4px;
}
.value-card-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
}

/* -- Partner Listings -- */
.partners-listings {
  padding: 120px 0 80px;
  background: #FEFFFC;
}
.partners-listings-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.partners-listings-heading {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: #282834;
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}
.partners-callout-body {
  max-width: 600px;
  margin: 0 auto 48px;
  text-align: center;
}
.partners-callout-body p {
  font-size: 15px;
  line-height: 1.7;
  color: #282834;
  margin-bottom: 16px;
}
.partners-callout-cta {
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .partners-listings-heading { font-size: 28px; }
  .partners-listings { padding: 80px 0 60px; }
}
.listings-list {
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  overflow: hidden;
}
.listing-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid #E5E5E5;
  transition: background 0.2s ease;
  cursor: pointer;
}
.listing-info {
  text-align: center;
}
.listing-item:last-child {
  border-bottom: none;
}
.listing-item:hover {
  background: rgba(0, 129, 192, 0.03);
}
.listing-title {
  font-size: 15px;
  font-weight: 500;
  color: #282834;
  margin-bottom: 2px;
}
.listing-meta {
  font-size: 13px;
  color: #4D6B6B;
}
.listing-arrow {
  color: #4D6B6B;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}
.listing-item:hover .listing-arrow {
  transform: translateX(3px);
  color: #0081C0;
}
.listings-more {
  text-align: center;
  margin-top: 32px;
  font-size: 14px;
  color: #4D6B6B;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* -- Partners footer section spacing -- */
.section.section-work.partners-footer-section {
  padding: 0 0 20px;
}
.partners-footer-section .footer-statement {
  padding-bottom: 160px;
}

/* ============================================ */
/* ABOUT PAGE                                   */
/* ============================================ */

/* -- Nav active state for about page -- */
.nav-link-about-active {
  color: #FFFFFF !important;
  font-weight: 500;
}
.nav-dark .nav-link-about-active {
  color: #282834 !important;
}

/* -- About main wrapper -- */
.about-main {
  position: relative;
  z-index: 2;
  background: #FEFFFC;
}

/* -- About Hero -- */
.about-hero {
  position: relative;
  min-height: 160vh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.about-hero-image-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.about-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.about-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(31,31,41,0.25) 0%,
    rgba(31,31,41,0.08) 25%,
    rgba(31,31,41,0.1) 50%,
    rgba(31,31,41,0.25) 75%,
    rgba(254,255,252,1) 100%
  );
}
/* About page glass card — uses shared .hero-glass-card styles from homepage */
.about-glass-card {
  z-index: 99;
}
@media (max-width: 640px) {
  .about-hero { min-height: 90vh; }
}

/* -- About Philosophy Bridge -- */
.about-philosophy {
  padding: 100px 0 80px;
  background: #FEFFFC;
}
.about-philosophy-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.about-philosophy-intro {
  font-size: 15px;
  line-height: 1.7;
  color: #4D6B6B;
  margin-bottom: 28px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.about-philosophy-heading {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: #282834;
}
@media (min-width: 768px) {
  .about-philosophy-heading { font-size: 44px; }
  .about-philosophy { padding: 120px 0 100px; }
}
@media (max-width: 640px) {
  .about-philosophy { padding: 64px 0 48px; }
  .about-philosophy-heading { font-size: 28px; }
}

/* -- About Founders Letter -- */
.about-letter {
  padding: 0 0 100px;
  background: #FEFFFC;
}
.about-letter-paper {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  background: #FEFFFC;
  border: 1px solid rgba(40,40,52,0.08);
  border-radius: 4px;
  padding: 56px 48px 64px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.04),
    0 8px 40px rgba(0,0,0,0.06);
}
.about-letter-content {
  max-width: 520px;
}
.about-letter-content {
  position: relative;
}
.about-letter-content p {
  font-size: 15px;
  line-height: 1.75;
  color: #282834;
  margin-bottom: 20px;
}
.letter-ghost {
  visibility: hidden;
}
.letter-typed-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.letter-typed-layer p {
  font-size: 15px;
  line-height: 1.75;
  color: #282834;
  margin-bottom: 20px;
}
.letter-typewriter-cursor {
  display: inline;
  color: #282834;
  font-weight: 300;
  animation: blink 0.6s step-end infinite;
  opacity: 0.6;
}
.about-letter-signoff {
  margin-top: 40px;
}
.about-letter-closing {
  font-size: 15px;
  color: #282834;
  margin-bottom: 2px !important;
}
.about-letter-content p.about-letter-author {
  font-size: 15px;
  color: #b0b0b0;
  font-style: normal;
}
.about-letter-signatures {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 16px;
}
.about-letter-sig {
  height: 52px;
  width: auto;
  opacity: 0.65;
  mix-blend-mode: multiply;
  filter: contrast(1.3) saturate(0);
}
.about-letter-sig:first-child {
  height: 46px;
  transform: rotate(-2deg) translateY(-2px);
}
.about-letter-sig:last-child {
  height: 38px;
  transform: rotate(1.5deg) translateX(-8px);
}

/* Stamp — bottom right of paper */
.about-letter-stamp {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 100px;
  transform: rotate(3deg);
  z-index: 2;
}
.about-letter-stamp-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.about-letter-stamp-border {
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(40,40,52,0.1);
  border-radius: 6px;
  background: rgba(255,255,255,0.6);
  z-index: -1;
}
@media (max-width: 767px) {
  .about-letter-paper {
    padding: 36px 28px 120px;
  }
  .about-letter-stamp {
    bottom: 24px;
    right: 24px;
    width: 80px;
  }
  .about-letter-signatures {
    display: none;
  }
}
@media (min-width: 768px) {
  .about-letter-paper {
    padding: 64px 56px 72px;
  }
}
@media (min-width: 1024px) {
  .about-letter-paper {
    padding: 72px 64px 80px;
  }
  .about-letter-stamp {
    width: 110px;
    bottom: 48px;
    right: 48px;
  }
}

/* -- About CTA Image Section -- */
.about-cta-image {
  position: relative;
  margin: 0 16px;
  border-radius: 20px;
  overflow: hidden;
  min-height: 420px;
}
@media (min-width: 768px) {
  .about-cta-image {
    margin: 0 20px;
    border-radius: 24px;
    min-height: 480px;
  }
}
.about-cta-image-wrap {
  position: relative;
  min-height: inherit;
  display: flex;
  align-items: stretch;
}
.about-cta-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
}
.about-cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(31,31,41,0.75) 0%,
    rgba(31,31,41,0.5) 40%,
    rgba(31,31,41,0.15) 70%,
    transparent 100%
  );
}
.about-cta-content {
  position: relative;
  z-index: 10;
  padding: 60px 32px;
  max-width: 440px;
}
@media (min-width: 768px) {
  .about-cta-content { padding: 80px 60px; }
}
.about-cta-heading {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .about-cta-heading { font-size: 40px; }
}
@media (max-width: 640px) {
  .about-cta-heading { font-size: 26px; }
}
.about-cta-body {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.75);
  margin-bottom: 24px;
}
.about-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  transition: opacity 0.2s ease;
}
.about-cta-link:hover { opacity: 0.75; }

/* -- About Contact Info -- */
.about-contact {
  padding: 80px 0;
  background: #FEFFFC;
}
.about-contact-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 640px) {
  .about-contact-inner {
    flex-direction: row;
    gap: 80px;
  }
}
.about-contact-label {
  font-size: 13px;
  color: #4D6B6B;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}
.about-contact-value {
  font-size: 15px;
  line-height: 1.6;
  color: #282834;
}
.about-contact-email {
  display: inline-block;
  font-weight: 500;
  transition: color 0.2s ease;
}
.about-contact-email:hover { color: #0081C0; }

/* -- About footer section spacing -- */
.section.section-work.about-footer-section {
  padding: 0 0 20px;
}
.about-footer-section .footer-statement {
  padding-bottom: 160px;
}

/* ============================================ */
/* BRIEFS PAGE                                  */
/* ============================================ */

/* -- Nav active state for briefs page -- */
.nav-link-briefs-active {
  color: #FFFFFF !important;
  font-weight: 500;
}
.nav-dark .nav-link-briefs-active {
  color: #282834 !important;
}

/* -- Briefs main wrapper -- */
.briefs-main {
  position: relative;
  z-index: 2;
  background: #FEFFFC;
}

/* -- Featured Brief Hero -- */
.briefs-hero {
  padding: 140px 0 0;
  text-align: center;
}

.briefs-hero-text {
  max-width: 700px;
  margin: 0 auto;
}

.briefs-hero-label {
  font-size: 13px;
  font-weight: 500;
  color: #0081C0;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}

.briefs-hero-title {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #282834;
  margin-bottom: 16px;
}
.briefs-typewriter-cursor {
  display: inline-block;
  color: #282834;
  font-weight: 300;
  animation: blink 0.6s step-end infinite;
  margin-left: 2px;
}
@media (min-width: 768px) {
  .briefs-hero-title { font-size: 64px; }
}

.briefs-hero-author {
  font-size: 14px;
  color: #4D6B6B;
  margin-bottom: 0;
}

/* -- Featured Image -- */
.briefs-featured-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 0;
}
@media (min-width: 768px) {
  .briefs-featured-wrap { padding: 56px 48px 0; }
}
@media (min-width: 1024px) {
  .briefs-featured-wrap { padding: 56px 60px 0; }
}

.briefs-featured-image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.briefs-featured-img {
  width: 100%;
  display: block;
  aspect-ratio: 21 / 7;
  object-fit: cover;
  object-position: top;
}

.briefs-featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 50%);
  pointer-events: none;
}

.briefs-featured-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
  padding: 10px 20px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s ease;
  cursor: pointer;
}
.briefs-featured-btn:hover {
  background: rgba(255,255,255,0.22);
}
@media (min-width: 768px) {
  .briefs-featured-btn { bottom: 28px; padding: 12px 24px; }
}

/* -- Category Filter Tabs -- */
.briefs-filters {
  padding: 48px 0 0;
  border-bottom: 1px solid #E5E5E5;
}

.briefs-filter-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}

.briefs-filter-tab {
  font-size: 14px;
  color: #4D6B6B;
  padding: 6px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  background: none;
}
.briefs-filter-tab:hover {
  color: #282834;
}
.briefs-filter-tab.active {
  color: #282834;
  font-weight: 500;
  border-color: #E5E5E5;
  background: rgba(0,0,0,0.03);
}

/* -- Briefs Grid -- */
.briefs-grid-section {
  padding: 48px 0 80px;
}

.briefs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 640px) {
  .briefs-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (min-width: 1024px) {
  .briefs-grid { grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
}

/* -- Brief Card -- */
.brief-card {
  display: block;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.brief-card:hover {
  transform: translateY(-4px);
}
.brief-card:hover .brief-card-img {
  transform: scale(1.04);
}
.brief-card-hidden {
  display: none;
}

.brief-card-image {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.brief-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.brief-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 40%, transparent 70%);
  pointer-events: none;
}

.brief-card-title {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.35;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
}
@media (min-width: 768px) {
  .brief-card-title { font-size: 15px; bottom: 14px; left: 14px; right: 14px; padding: 18px 16px; }
}

.brief-card-meta {
  padding: 10px 4px 0;
}

.brief-card-author {
  font-size: 12px;
  color: #4D6B6B;
}

/* ============================================ */
/* BRIEF ARTICLE PAGE                           */
/* ============================================ */

.brief-article-main {
  position: relative;
  z-index: 2;
  background: #FEFFFC;
  padding-top: 120px;
}

/* -- Back Link -- */
.brief-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #4D6B6B;
  text-decoration: none;
  transition: color 0.2s ease;
  margin-bottom: 32px;
}
.brief-back:hover {
  color: #282834;
}
.brief-back svg {
  transition: transform 0.2s ease;
}
.brief-back:hover svg {
  transform: translateX(-3px);
}

/* -- Article Header -- */
.brief-article-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

.brief-article-title {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #282834;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .brief-article-title { font-size: 56px; }
}

.brief-article-meta {
  font-size: 14px;
  color: #4D6B6B;
  margin-bottom: 48px;
}

/* -- Hero Image -- */
.brief-article-hero {
  max-width: 860px;
  margin: 0 auto 56px;
  padding: 0 24px;
}

.brief-article-hero img {
  width: 100%;
  border-radius: 14px;
  display: block;
}

/* -- Article Body -- */
.brief-article-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.brief-article-body p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #282834;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .brief-article-body p { font-size: 17px; }
}

.brief-article-body h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: #1F1F29;
  margin-top: 48px;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .brief-article-body h2 { font-size: 28px; }
}

.brief-article-body h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  color: #1F1F29;
  margin-top: 36px;
  margin-bottom: 16px;
}

.brief-article-body ul,
.brief-article-body ol {
  margin-bottom: 24px;
  padding-left: 24px;
}

.brief-article-body li {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #282834;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .brief-article-body li { font-size: 17px; }
}

.brief-article-body strong {
  font-weight: 600;
  color: #1F1F29;
}

.brief-article-body em {
  font-style: italic;
}

.brief-article-body a {
  color: #0081C0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.brief-article-body a:hover {
  color: #006a9e;
}

.brief-article-body blockquote {
  border-left: 3px solid #0081C0;
  margin: 32px 0;
  padding: 16px 24px;
  background: rgba(0, 129, 192, 0.04);
  border-radius: 0 10px 10px 0;
}

.brief-article-body blockquote p {
  color: #1F1F29;
  margin-bottom: 0;
}

/* -- Inline Figure / Diagram -- */
.brief-article-figure {
  margin: 40px 0;
  background: #F6F6F4;
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
}

.brief-article-figure img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.brief-article-figure figcaption {
  font-size: 13px;
  color: #4D6B6B;
  margin-top: 12px;
}

/* -- Divider -- */
.brief-article-divider {
  width: 48px;
  height: 2px;
  background: #E5E5E5;
  margin: 48px auto;
  border: none;
}

/* -- More Briefs Section -- */
.brief-more-section {
  padding: 0 24px 80px;
  max-width: 860px;
  margin: 0 auto;
}

.brief-more-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #1F1F29;
  margin-bottom: 28px;
}

.brief-more-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .brief-more-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .brief-more-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============================================ */
/* ENQUIRE PAGE                                 */
/* ============================================ */

.page-enquire {
  background: #1F1F29;
  overflow: hidden;
  height: 100vh;
}

.enquire-wrapper {
  display: flex;
  height: 100vh;
  width: 100%;
}

/* -- Left: Image Side -- */
.enquire-image-side {
  position: relative;
  flex: 0 0 60%;
  overflow: hidden;
  padding: 16px;
}

.enquire-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 20px;
}

.enquire-image-overlay {
  position: absolute;
  inset: 16px;
  border-radius: 20px;
  background: linear-gradient(
    to top,
    rgba(31, 31, 41, 0.7) 0%,
    rgba(31, 31, 41, 0.2) 40%,
    transparent 70%
  );
  z-index: 1;
}

.enquire-image-content {
  position: absolute;
  bottom: 48px;
  left: 40px;
  z-index: 2;
}

.enquire-brand-icon {
  margin-bottom: 16px;
}

.enquire-image-heading {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  max-width: 320px;
}

/* -- Right: Form Side -- */
.enquire-form-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.enquire-form-inner {
  width: 100%;
  max-width: 480px;
}

/* -- Glass card wrapping form -- */
.enquire-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.enquire-heading {
  font-family: 'PP Mondwest', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.enquire-subtitle {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 28px;
}

/* -- Form Fields -- */
.enquire-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.enquire-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.enquire-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.enquire-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.enquire-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  outline: none;
}

.enquire-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.enquire-input:focus {
  border-color: rgba(0, 129, 192, 0.6);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(0, 129, 192, 0.12);
}

.enquire-textarea {
  resize: none;
  min-height: 110px;
}

.enquire-submit {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #FFFFFF;
  color: #1F1F29;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 13px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  width: 100%;
}

.enquire-submit:hover {
  opacity: 0.88;
}

.enquire-submit:active {
  transform: scale(0.98);
}

/* -- Success state -- */
.enquire-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  min-height: 200px;
}

/* -- Divider -- */
.enquire-divider-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}

.enquire-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.enquire-divider-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
}

/* -- Animated AI Orb -- */
.enquire-orb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.enquire-orb {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: #0a3d5c;
}

/* Fluid blobs that drift, morph, and blend inside the orb */
.enquire-orb-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
}

.enquire-orb-layer-1 {
  width: 120%;
  height: 120%;
  top: -30%;
  left: -20%;
  background: radial-gradient(circle, #00b4d8 0%, transparent 70%);
  animation: orb-flow-1 7s ease-in-out infinite;
}

.enquire-orb-layer-2 {
  width: 100%;
  height: 100%;
  bottom: -20%;
  right: -20%;
  background: radial-gradient(circle, #FFFFFF 0%, rgba(255,255,255,0) 65%);
  opacity: 0.7;
  animation: orb-flow-2 9s ease-in-out infinite;
}

.enquire-orb-layer-3 {
  width: 110%;
  height: 110%;
  top: 10%;
  left: 20%;
  background: radial-gradient(circle, #0081C0 0%, transparent 65%);
  animation: orb-flow-3 11s ease-in-out infinite;
}

/* Fourth blob for extra depth */
.enquire-orb-glow {
  position: absolute;
  width: 90%;
  height: 90%;
  top: -10%;
  right: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144, 224, 239, 0.8) 0%, transparent 60%);
  filter: blur(18px);
  animation: orb-flow-4 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes orb-flow-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(25%, 30%) scale(1.15); }
  66%  { transform: translate(-15%, 10%) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orb-flow-2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  25%  { transform: translate(-30%, -20%) scale(1.2); opacity: 0.9; }
  50%  { transform: translate(10%, -35%) scale(0.85); opacity: 0.5; }
  75%  { transform: translate(20%, 10%) scale(1.1); opacity: 0.8; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
}

@keyframes orb-flow-3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-35%, 20%) scale(1.2); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orb-flow-4 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
  30%  { transform: translate(-20%, 25%) scale(1.3); opacity: 0.9; }
  60%  { transform: translate(15%, -15%) scale(0.8); opacity: 0.5; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
}

/* -- Pill button floating over orb -- */
.enquire-orb-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 5px 10px 5px 5px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #1F1F29;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 2;
}

.enquire-orb-btn:hover {
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.enquire-orb-btn:active {
  transform: translate(-50%, -50%) scale(0.98);
}

.enquire-orb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1F1F29;
  color: #FFFFFF;
  flex-shrink: 0;
}

.enquire-orb-icon svg {
  width: 9px;
  height: 9px;
}

/* Call active state — pulse the orb */
.enquire-orb-wrap.call-active .enquire-orb {
  animation: call-pulse 1.5s ease-in-out infinite;
}
.enquire-orb-wrap.call-active .enquire-orb-btn {
  background: #1F1F29;
  color: #FFFFFF;
}
.enquire-orb-wrap.call-active .enquire-orb-icon {
  background: #e53e3e;
}

@keyframes call-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .enquire-orb-layer,
  .enquire-orb-glow {
    animation: none;
    filter: blur(25px);
  }
}

/* -- Mobile: stack vertically, hide image -- */
@media (max-width: 767px) {
  .page-enquire {
    height: auto;
    min-height: 100vh;
  }

  .enquire-wrapper {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .enquire-image-side {
    display: none;
  }

  .enquire-form-side {
    padding: 100px 20px 40px;
    align-items: flex-start;
  }

  .enquire-card {
    padding: 28px 24px 24px;
  }

  .enquire-heading {
    font-size: 26px;
  }

  .enquire-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .enquire-orb {
    width: 120px;
    height: 120px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .enquire-image-side {
    flex: 0 0 50%;
  }

  .enquire-image-heading {
    font-size: 24px;
    max-width: 260px;
  }

  .enquire-form-inner {
    max-width: 420px;
  }
}