/* ============================================================
   Fonts — Google Fonts used across The Zenith Visions site
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Nunito+Sans:wght@900&family=Homemade+Apple&family=Inter:wght@300;400;500;600;700&display=swap');

/* Satoshi (primary display/body font) — load from Fontshare */
@font-face {
  font-family: 'Satoshi';
  src: url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
}
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root {
  --color-dark: #141414;
  --color-cream: #fff8eb;
  --color-page: #f8f8f5;
  --color-white: #ffffff;
  --color-text: #303030;
  --color-text-muted: rgba(48,48,48,0.8);
  --color-text-50: rgba(48,48,48,0.5);
  --color-border: rgba(20,20,20,0.1);
  --color-border-light: rgba(255,255,255,0.1);
  --color-cream-50: rgba(255,248,235,0.5);

  --font-display: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  --font-wordmark: 'Nunito Sans', 'Satoshi', sans-serif;
  --font-eyebrow: 'Manrope', 'Satoshi', sans-serif;

  --max-content: 1440px;
  --max-wide: 1900px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; background: var(--color-dark); }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-page);
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* ============================================================
   Typography
   ============================================================ */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1em;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 30px);
  line-height: 1.2em;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.giant-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 70px);
  line-height: 1em;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.2em;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
h4, .h4 {
  font-family: var(--font-eyebrow);
  font-weight: 600;
  font-size: 18px;
  line-height: 1em;
  letter-spacing: -0.033em;
  text-transform: uppercase;
}
p { font-family: var(--font-body); font-weight: 400; line-height: 1.4em; letter-spacing: -0.01em; }

/* ============================================================
   Reusable: Eyebrow badge
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.5em;
  color: var(--color-text);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.eyebrow.light { color: var(--color-cream); }

/* ============================================================
   Reusable: CTA button (pill with animated circle)
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 10px 20px;
  border: 1px solid var(--color-dark);
  border-radius: 54px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 2em;
  text-transform: uppercase;
  color: var(--color-text);
  overflow: hidden;
  transition: gap 0.35s var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.btn .btn-label { position: relative; z-index: 1; }
.btn .btn-arrow {
  position: relative; z-index: 1;
  width: 10px; height: 10px;
  display: inline-block;
}
.btn .btn-arrow svg { width: 100%; height: 100%; transform: rotate(-45deg); transition: transform 0.35s var(--ease-out); }
.btn::after {
  content: '';
  position: absolute;
  top: 50%; right: 15px;
  width: 18px; height: 18px;
  border-radius: 12px;
  background: var(--color-dark);
  transform: translateY(-50%);
  transition: all 0.45s var(--ease-out);
  z-index: 0;
}
.btn:hover { gap: 35px; }
.btn:hover::after {
  top: 0; right: 0;
  width: 100%; height: 100%;
  border-radius: 54px;
  transform: translateY(0);
}
.btn:hover .btn-label { color: var(--color-cream); }
.btn:hover .btn-arrow svg { transform: rotate(0deg); color: var(--color-cream); }
.btn .btn-arrow svg { color: currentColor; }

/* Light variant: white border, dark bg target */
.btn.btn-light {
  border-color: var(--color-cream);
  color: var(--color-cream);
}
.btn.btn-light::after { background: var(--color-cream); }
.btn.btn-light:hover .btn-label { color: var(--color-dark); }
.btn.btn-light:hover .btn-arrow svg { color: var(--color-dark); }

/* ============================================================
   Divider with animated fill (used inside section headings)
   ============================================================ */
.divider {
  position: relative;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  overflow: hidden;
}
.divider .fill {
  position: absolute;
  inset: 0;
  background: var(--color-dark);
  border-radius: 26px;
  transform: translateX(-101%);
  transition: transform 1.2s var(--ease-out);
}
.divider.light { background: var(--color-border-light); }
.divider.light .fill { background: var(--color-cream); opacity: 0.5; }
.divider.in-view .fill { transform: translateX(0); }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 64px;
  padding: 10px 20px;
  background: var(--color-page);
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  color: var(--color-dark);
}
.nav-logo img { width: auto; height: 26px; object-fit: contain; }
.nav-logo .logo-mark {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-logo .logo-mark svg { width: 100%; height: 100%; color: var(--color-dark); }
.nav-logo .logo-text {
  font-family: var(--font-wordmark);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--color-dark);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .nav-logo .logo-text { font-size: 15px; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.nav-links a, .nav-dropdown-trigger {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 5px 0;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-links a:hover, .nav-dropdown-trigger:hover { color: var(--color-text-50); }
.nav-dropdown-trigger .chev {
  width: 11px; height: 14px;
  transition: transform 0.3s var(--ease-out);
}
.nav-dropdown-trigger .chev svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nav-cta { margin-left: 8px; }

.nav-toggle { display: none; width: 44px; height: 44px; position: relative; }
.nav-toggle span {
  position: absolute;
  left: 50%; width: 20px; height: 2px;
  background: #999;
  border-radius: 10px;
  transform: translateX(-50%);
  transition: top 0.3s, transform 0.3s;
}
.nav-toggle span:nth-child(1) { top: 37.5%; }
.nav-toggle span:nth-child(2) { top: 62.5%; }
.nav.open .nav-toggle span:nth-child(1) { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 1199.98px) {
  .nav { padding: 10px 16px; }
  .nav-links { gap: 16px; }
  .nav-links a, .nav-dropdown-trigger { font-size: 14px; }
}
/* Hamburger nav up to 1100px: the full desktop row (logo + 8 links +
   button) needs ~1046px, so on iPad portrait (820/834px) and small
   windows it ran off-screen and scrolled every page sideways. */
@media (max-width: 1099.98px) {
  .nav { flex-wrap: wrap; padding: 0; height: auto; }
  .nav-bar { display: flex; align-items: center; width: 100%; height: 64px; padding: 0 10px 0 20px; }
  .nav-toggle { display: flex; margin-left: auto; }
  .nav-logo { padding: 0; }
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 0 20px;
    gap: 0;
    margin-left: 0;
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a, .nav-dropdown-trigger {
    height: 56px;
    border-bottom: 1px solid #eee;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
  }
  .nav-cta {
    margin: 16px 20px 24px;
    align-self: flex-start;
  }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 47px;
  width: 100%;
  padding: 110px 0 0;
  background: var(--color-white);
  overflow: hidden;
}
.hero-ticker {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%);
}
.hero-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 900;
  font-size: clamp(96px, 18vw, 240px);
  letter-spacing: -0.06em;
  line-height: 1em;
  color: var(--color-dark);
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  width: max-content;
}
.hero-wordmark .wordmark-track {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  animation: hero-marquee 38s linear infinite;
  will-change: transform;
}
.hero-wordmark .wordmark-item {
  display: inline-block;
  padding: 0 0.05em;
}
.hero-wordmark .wordmark-sep {
  display: inline-block;
  margin: 0 0.18em;
  font-size: 0.55em;
  line-height: 1;
  transform: translateY(-0.25em);
  color: var(--color-dark);
}
@keyframes hero-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark .wordmark-track { animation: none; }
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 58px;
  width: 100%;
}
.hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  width: 100%;
  max-width: var(--max-wide);
  padding: 0 50px;
}
.hero-row h1 { flex: 1; max-width: 800px; font-size: clamp(20px, 1.72vw, 33px); line-height: 1.07em; }
.hero-cta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 400px;
  max-width: 400px;
  padding-left: 30px;
}
.hero-cta-block p { width: 100%; max-width: 400px; }

@media (max-width: 1199.98px) {
  .hero { gap: 44px; }
  .hero-row { flex-direction: column; align-items: center; gap: 15px; text-align: center; }
  .hero-row h1 { max-width: 600px; }
  .hero-cta-block { width: 100%; align-items: center; padding-left: 0; gap: 24px; text-align: center; }
}
@media (max-width: 809.98px) {
  .hero { gap: 50px; padding: 80px 0 20px; }
  .hero-row { padding: 0 20px; gap: 10px; }
}

/* Hero image with stats overlay */
.hero-image {
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 480px;
  background: var(--color-dark);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 10px;
}
.hero-image .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-image .bg img,
.hero-image .bg video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-stats {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  gap: 10px;
}
.stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: rgba(248,248,245,0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.stat-card .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 70px);
  letter-spacing: -0.05em;
  line-height: 1em;
  text-transform: uppercase;
  text-align: left;
  width: 100%;
}
.stat-card .label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: right;
  width: 100%;
  color: var(--color-text-muted);
}
@media (max-width: 809.98px) {
  .hero-image { height: 511px; }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
}

/* Home hero: the four stats sit in one slim glass strip so the video
   stays visible (they were separate, 80%-opaque cream boxes covering
   the bottom third of it). Scoped to the hero: About reuses .stat-card. */
.hero-image { padding: 16px; }
.hero-stats {
  gap: 0;
  background: rgba(20, 20, 20, 0.34);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  overflow: hidden;
}
.hero-stats .stat-card {
  gap: 4px;
  padding: 14px 24px;
  align-items: flex-start;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-stats .stat-card + .stat-card { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.hero-stats .stat-card .num { font-size: clamp(26px, 2.6vw, 40px); color: #fff; }
.hero-stats .stat-card .label { text-align: left; font-size: 11px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.8); }
@media (max-width: 809.98px) {
  .hero-image { padding: 10px; }
  .hero-stats .stat-card { padding: 10px 14px; }
  .hero-stats .stat-card + .stat-card { border-left: 0; }
  .hero-stats .stat-card:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, 0.16); }
  .hero-stats .stat-card:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .hero-stats .stat-card .num { font-size: 26px; }
  .hero-stats .stat-card .label { font-size: 10px; }
}

/* ============================================================
   Section base
   ============================================================ */
.section {
  position: relative;
  width: 100%;
  padding: 65px 50px;
  background: var(--color-page);
}
.section-inner {
  width: 100%;
  max-width: var(--max-wide);
  margin: 0 auto;
}
@media (max-width: 1199.98px) {
  .section { padding: 40px; }
}
@media (max-width: 809.98px) {
  .section { padding: 50px 20px; }
}

/* Header pattern: badge + heading + supporting text + divider + button */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 21px;
  width: 100%;
}
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  width: 100%;
}
.section-header-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0.6;
}
.section-header-left .supporting {
  max-width: 400px;
  color: var(--color-text);
}
.section-header-divider { width: 100%; }
.section-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

@media (max-width: 1199.98px) {
  .section-header { align-items: center; gap: 30px; }
  .section-header-row { flex-direction: column; align-items: center; gap: 10px; }
  .section-header-left { align-items: center; text-align: center; flex: none; width: 60%; }
  .section-header-left .supporting { max-width: 800px; }
  .section-header-divider { display: none; }
}
@media (max-width: 809.98px) {
  .section-header-left { width: 100%; }
}

/* ============================================================
   About section (Value quote + Why we are special + Showreel)
   ============================================================ */
.section-about {
  background: var(--color-page);
  padding: 100px 50px 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.values-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 130px;
  width: 100%;
  max-width: var(--max-wide);
}
.value-quote {
  width: 100%;
  max-width: 1200px;
  text-align: center;
  padding-bottom: 60px;
}
.value-quote .word {
  display: inline-block;
  opacity: 0.001;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.value-quote.in-view .word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.about-flex {
  display: flex;
  gap: 58px;
  width: 100%;
  align-items: flex-start;
}
.about-sketch {
  flex: 1;
  position: sticky;
  top: 100px;
  mix-blend-mode: multiply;
  opacity: 0.9;
}
.about-sketch img { width: 100%; height: auto; }
.about-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 42px;
}
.about-overview { max-width: 650px; color: var(--color-text); }

.benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.benefit {
  width: 100%;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.benefit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 8px 0;
  transition: gap 0.35s var(--ease-out);
}
.benefit:hover .benefit-row { gap: 24px; }
.benefit-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--color-dark);
}
.benefit-title { flex: 1; }

/* Expandable answer toggle */
.benefit-toggle {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-dark);
  transition: transform 0.35s var(--ease-out);
}
.benefit-toggle svg { width: 100%; height: 100%; }
.benefit.open .benefit-toggle { transform: rotate(45deg); }

.benefit-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.5s var(--ease-out),
    opacity 0.3s ease,
    padding 0.3s var(--ease-out);
}
.benefit-answer p {
  padding: 0 10px 0 28px;
  margin-top: 4px;
  color: var(--color-text-muted);
  max-width: 640px;
  line-height: 1.5em;
}
.benefit.open .benefit-answer {
  max-height: 240px;
  opacity: 1;
  padding-bottom: 10px;
}

@media (max-width: 1199.98px) {
  .about-flex { flex-direction: column; gap: 60px; }
  .about-sketch { position: relative; top: auto; width: 100%; }
  .about-sketch img { max-height: 600px; object-fit: contain; }
}

/* Showreel (video with play overlay) */
.showreel {
  position: relative;
  width: 100%;
  height: 80vh;
  max-height: 800px;
  background: var(--color-dark);
  overflow: hidden;
  cursor: pointer;
}
.showreel video {
  width: 100%; height: 105%;
  object-fit: cover;
  position: absolute; top: -2.5%; left: 0;
}
.showreel .play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 239px; height: 239px;
  border-radius: 50%;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.5s var(--ease-out), background 0.3s;
  z-index: 2;
}
.showreel .play-btn:hover { transform: translate(-50%, -50%) scale(1.05); background: var(--color-white); }
.showreel .play-btn svg {
  width: 60px; height: 60px;
  color: var(--color-dark);
  margin-left: 8px;
}
@media (max-width: 1199.98px) {
  .showreel .play-btn { width: 151px; height: 151px; }
  .showreel .play-btn svg { width: 40px; height: 40px; }
}
@media (max-width: 809.98px) {
  .showreel { height: 30vh; min-height: 220px; }
  .showreel .play-btn { width: 79px; height: 79px; }
  .showreel .play-btn svg { width: 24px; height: 24px; }
}

/* Lightbox for showreel */
.video-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
}
.video-lightbox.open { display: flex; }
.video-lightbox iframe, .video-lightbox video {
  width: 70vw;
  aspect-ratio: 16/9;
  max-width: 1200px;
}
.video-lightbox .close-btn {
  position: absolute;
  top: 24px; right: 24px;
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.1);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* ============================================================
   Services
   ============================================================ */
.section-services { padding: 65px 50px; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 3px;
  width: 100%;
  margin-top: 64px;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--color-white);
  overflow: hidden;
  cursor: pointer;
  transition: background 0.3s;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 23%; left: 30px;
  width: 1px; height: 1px;
  background: var(--color-dark);
  border-radius: 50%;
  transition: all 0.6s var(--ease-out);
  z-index: 0;
}
.service-card:hover::before {
  width: 150%;
  height: 739px;
  top: 50%;
  left: -123px;
  transform: translateY(-50%);
}
.service-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
.service-card-bg {
  width: 37px; height: 37px;
  background: rgba(20,20,20,0.05);
  border-radius: 26px;
  position: absolute;
  top: -7px; left: -5px;
  transition: all 0.4s var(--ease-out);
}
.service-card:hover .service-card-bg {
  width: 100%; height: calc(100% + 7px);
  top: 0; left: 0;
  background: rgba(255,248,235,0.1);
}
.service-arrow {
  position: relative; z-index: 1;
  width: 37px; height: 37px;
  display: flex; align-items: center; justify-content: center;
}
.service-arrow svg { width: 18px; height: 18px; transform: rotate(-45deg); color: var(--color-text); transition: color 0.3s; }
.service-card:hover .service-arrow svg { color: var(--color-cream); }
.service-card h3 {
  position: relative;
  z-index: 1;
  max-width: 800px;
  transition: color 0.3s;
}
.service-card:hover h3 { color: var(--color-cream); }
@media (max-width: 1199.98px) {
  .services-grid { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 809.98px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Projects
   ============================================================ */
.section-projects { padding: 65px 50px; gap: 39px; display: flex; flex-direction: column; align-items: center; }
.projects-container {
  width: 100%;
  max-width: var(--max-wide);
  display: flex;
  flex-direction: column;
  gap: 91px;
}
.projects-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-page);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
}
.project-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 10px;
  gap: 20px;
}
.project-card-tags {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.project-card-tags .tag {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
}
.project-card-image-wrap {
  position: relative;
  width: 100%;
  height: 90vh;
  max-height: 800px;
  overflow: hidden;
}
.project-card-image {
  position: absolute;
  inset: 0;
  width: 90%; height: 100%;
  left: 10%;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out), left 0.5s var(--ease-out);
}
.project-card:hover .project-card-image {
  width: 100%; left: 0;
  transform: scale(1.02);
}
.project-card-image img { width: 100%; height: 100%; object-fit: cover; }
.project-card-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-text-50);
}
.project-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.project-meta .label {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-text-muted);
}
.project-meta .value {
  font-size: 17px;
  font-weight: 400;
}
.project-meta-group { display: flex; gap: 55px; }
@media (max-width: 809.98px) {
  .project-card-top { flex-direction: column; gap: 23px; }
  .project-card-image-wrap { height: 290px; }
  .project-card-image { width: 100%; left: 0; top: auto; bottom: 0; }
  .project-card-bottom { flex-direction: column; gap: 30px; }
  .project-meta-group { flex-direction: column; gap: 16px; }
}

/* ============================================================
   Value Quote (blue band)
   ============================================================ */
.section-value-quote {
  position: relative;
  height: 100vh;
  background: var(--color-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100px 50px;
  overflow: hidden;
}
.value-quote-bg {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  z-index: 0;
}
.value-quote-bg img { width: 100%; height: 100%; object-fit: cover; }
.value-quote-content {
  position: relative;
  z-index: 2;
  mix-blend-mode: difference;
  max-width: 1200px;
  text-align: center;
}
.value-quote-content p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 70px);
  line-height: 1em;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--color-cream);
}
@media (max-width: 809.98px) {
  .section-value-quote { padding: 50px 20px; }
}

/* ============================================================
   Brands
   ============================================================ */
.section-brands {
  background: var(--color-dark);
  padding: 0 50px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
}
.brands-header { display: flex; flex-direction: column; align-items: flex-end; gap: 30px; width: 100%; max-width: var(--max-wide); }
.brands-header h2 { color: var(--color-cream); }
.brands-header .supporting { color: var(--color-cream); max-width: 600px; }
.brands-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(136px, 1fr));
  flex: 1;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  border-left: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
}
.brand-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  height: 122px;
  border-right: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}
.brand-cell:nth-child(3n) { border-right: none; }
.brand-cell:nth-last-child(-n+3) { border-bottom: none; }
.brand-cell img { max-width: 100%; max-height: 100%; object-fit: contain; }

.brands-row {
  display: flex;
  align-items: stretch;
  gap: 30px;
  width: 100%;
  max-width: var(--max-wide);
}
.brands-row > .brands-grid { flex: 1; }

.brand-testimonial-track {
  flex: 1;
  height: 245px;
  overflow: hidden;
  position: relative;
}
.brand-testimonial-list {
  display: flex;
  flex-direction: column;
  animation: scroll-y 30s linear infinite;
  gap: 20px;
}
.brand-testimonial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 325px;
  padding: 0 0 30px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border-light);
}
.brand-testimonial img { width: 100%; height: 54px; object-fit: contain; object-position: left center; }
.brand-testimonial .quote { color: var(--color-cream); }
.brand-testimonial .author { color: var(--color-cream); text-align: right; width: 100%; font-size: 12px; text-transform: uppercase; }
@keyframes scroll-y {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@media (max-width: 1199.98px) {
  .brands-row { flex-direction: column; }
  .brand-testimonial-track { width: 100%; height: 439px; }
}
@media (max-width: 809.98px) {
  .section-brands { padding: 50px 20px 40px; gap: 40px; }
  .brands-grid { grid-template-columns: 1fr; border-right: none; }
  .brand-cell { border-right: none !important; }
  .brand-testimonial-track { height: 70vh; }
}

/* ============================================================
   Gallery
   ============================================================ */
.section-gallery {
  background: var(--color-dark);
  padding: 0;
  position: relative;
}
.gallery-container {
  display: flex;
  width: 100%;
  max-width: var(--max-wide);
  margin: 0 auto;
  height: 150vh;
  padding: 50px 10px 100px;
  gap: 10px;
  overflow: hidden;
  position: relative;
}
.gallery-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gallery-column.center { justify-content: center; }
.gallery-column.right { justify-content: flex-end; }
.gallery-item {
  position: relative;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transform: translateY(200px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.gallery-item.in-view { opacity: 1; transform: translateY(0); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .caption {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  padding: 20px 20px 90px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0.86) 0%, rgba(255,250,250,0) 100%);
  color: var(--color-cream);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover .caption { opacity: 1; }
.gallery-overlay-cta {
  position: absolute;
  bottom: 60px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.gallery-bottom-gradient {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 43%;
  background: linear-gradient(180deg, rgba(20,20,20,0) 0%, var(--color-dark) 80%);
  z-index: 4;
  pointer-events: none;
}
@media (max-width: 809.98px) {
  .gallery-container { flex-direction: column; height: auto; padding: 20px 10px 100px; }
  .gallery-column { width: 100%; }
}

/* ============================================================
   Testimonial carousel
   ============================================================ */
.section-testimonial {
  background: var(--color-page);
  padding: 100px 50px 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.testimonial-carousel-wrap {
  width: 100%;
  max-width: var(--max-wide);
  height: 526px;
  position: relative;
}
.testimonial-track {
  display: flex;
  gap: 10px;
  height: 100%;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  transition: transform 0.5s var(--ease-out);
}
.testimonial-track.dragging { transition: none; cursor: grabbing; }
.testimonial-card {
  position: relative;
  flex: 0 0 auto;
  width: 365px;
  height: 100%;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  overflow: hidden;
  pointer-events: auto;
}
.testimonial-card-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.testimonial-avatar {
  width: 53px; height: 53px;
  border-radius: 42px;
  overflow: hidden;
  flex-shrink: 0;
}
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card-top h3 { flex: 1; }
.testimonial-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.testimonial-body p { width: 100%; }
.testimonial-author {
  width: 100%;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text-50);
}
.testimonial-card-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--color-border);
}
.testimonial-card-bottom-img {
  flex: 1;
  height: 84px;
  filter: brightness(0.59);
  overflow: hidden;
}
.testimonial-card-bottom-img img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-meta-overlay {
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
.testimonial-meta-overlay h4 { color: var(--color-cream); font-size: 18px; }
.testimonial-meta-overlay .loc {
  display: flex; align-items: center; gap: 7px;
  color: var(--color-cream);
  font-size: 12px;
  text-transform: uppercase;
}

.testimonial-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translateX(-50%);
}
.testimonial-controls button {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s, background 0.3s;
}
.testimonial-controls button:hover { opacity: 0.8; }
.testimonial-controls button img { width: 100%; height: 100%; }

/* ============================================================
   Blogs
   ============================================================ */
.section-blogs { padding: 65px 50px; gap: 64px; display: flex; flex-direction: column; align-items: center; background: var(--color-page); }
.blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: var(--max-wide);
}
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 23px;
  padding: 0 0 20px;
  background: var(--color-page);
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.blog-image-wrap {
  position: relative;
  aspect-ratio: 1.31;
  overflow: hidden;
  background: var(--color-white);
}
.blog-image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.blog-card:hover .blog-image-wrap img { transform: scale(1.04); }
.blog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  padding: 0 10px;
}
.blog-content > .meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
}
.blog-category {
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}
.blog-title { width: 100%; max-width: 800px; }
.blog-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.blog-footer .author, .blog-footer .date {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.blog-footer .author svg, .blog-footer .date svg {
  width: 16px; height: 16px;
  stroke: currentColor;
}
@media (max-width: 1199.98px) {
  .blogs-grid { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 809.98px) {
  .blogs-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ
   ============================================================ */
.section-faq {
  padding: 65px 50px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.faq-container {
  display: flex;
  gap: 94px;
  width: 100%;
  max-width: var(--max-wide);
  align-items: flex-start;
}
.faq-heading-block {
  flex: 0.8;
  position: sticky;
  top: 150px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.faq-list {
  flex: 1;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}
.faq-item {
  padding: 20px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.3s;
}
.faq-item:last-child { border-bottom: none; }
.faq-item:hover { background: rgba(20,20,20,0.02); }
.faq-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 38px;
}
.faq-row h3 { width: 90%; }
.faq-icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon svg { width: 100%; height: 100%; transition: transform 0.3s; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out), padding-top 0.3s, opacity 0.3s;
  opacity: 0;
}
.faq-item.open .faq-answer {
  max-height: 500px;
  padding-top: 20px;
  opacity: 1;
}
@media (max-width: 1199.98px) {
  .faq-container { flex-direction: column; gap: 30px; }
  .faq-heading-block { position: static; width: 80%; flex: none; }
}
@media (max-width: 809.98px) {
  .section-faq { padding: 50px 20px; gap: 40px; }
  .faq-container { gap: 40px; }
  .faq-heading-block { width: 100%; }
  .faq-list { width: 100%; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--color-dark);
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 93px;
  position: relative;
  overflow: hidden;
}
.footer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: 0.06;
}
.footer-bg img { width: 100%; height: 100%; object-fit: cover; }
.footer-ticker-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-wide);
  height: 200px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.footer-ticker {
  display: flex;
  align-items: center;
  gap: 40px;
  animation: scroll-x 30s linear infinite;
  white-space: nowrap;
}
.footer-ticker-item {
  display: flex;
  align-items: center;
  gap: 40px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 70px);
  line-height: 1em;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-wrap: nowrap;
}
.footer-ticker-item .dot {
  width: 98px; height: 5px;
  background: var(--color-cream);
  flex-shrink: 0;
}
@keyframes scroll-x {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.footer-contact {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 66px;
  width: 100%;
  padding: 0 50px;
}
.footer-contact-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--max-content);
  background: rgba(255,255,255,0.05);
}
.footer-contact-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 0;
}
.footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 30px 30px;
  border-bottom: 1px solid var(--color-border-light);
}
.footer-contact-item:last-child { border-bottom: none; }
.footer-contact-item .label-row {
  display: flex; align-items: center; gap: 10px;
  color: var(--color-cream);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  max-width: 168px;
}
.footer-contact-item .label-row svg { width: 17px; height: 17px; }
.footer-contact-item p { color: var(--color-cream); }
.footer-contact-item a { color: var(--color-cream); }
.footer-contact-item .see-map {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--color-cream);
  transition: gap 0.3s;
}
.footer-contact-item .see-map:hover { gap: 15px; }
.footer-form-wrap {
  flex: 1;
  background: var(--color-white);
  padding: 60px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.footer-form-header { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.footer-form-header h3 { color: var(--color-text); }
.footer-form-header p { color: var(--color-text-muted); max-width: 600px; text-align: center; }
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.contact-form .form-row { display: flex; gap: 12px; }
.contact-form .form-row > * { flex: 1; }
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text);
}
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  padding: 12px;
  background: rgba(20,20,20,0.05);
  border: 1px solid rgba(20,20,20,0.2);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #1f3630;
}
.contact-form textarea { min-height: 100px; resize: vertical; }
.contact-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M 3.5 6 L 8 10.5 L 12.5 6' fill='transparent' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.contact-form button[type="submit"] {
  margin-top: 10px;
  height: 50px;
  background: var(--color-dark);
  color: var(--color-cream);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.3s;
}
.contact-form button[type="submit"]:hover { opacity: 0.9; }

.footer-divider-wrap { position: relative; z-index: 1; width: 100%; max-width: var(--max-wide); display: flex; flex-direction: column; align-items: flex-end; gap: 30px; }
.footer-divider { width: 100%; height: 2px; background: var(--color-border-light); position: relative; overflow: hidden; }
.footer-divider .fill { position: absolute; inset: 0; background: rgba(255,255,255,0.5); transform: translateX(-101%); transition: transform 1.5s var(--ease-out); border-radius: 26px; }
.footer-divider.in-view .fill { transform: translateX(0); }

.footer-columns {
  position: relative; z-index: 1;
  display: flex;
  width: 100%;
  max-width: var(--max-content);
  gap: 89px;
  align-items: flex-start;
  padding: 0 50px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}
.footer-col h4 { color: var(--color-cream); margin-bottom: 0; }
.footer-col a {
  color: var(--color-cream);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  text-transform: none;
  transition: opacity 0.2s;
}
.footer-col a:hover { opacity: 0.6; }
.footer-col .links { display: flex; flex-direction: column; gap: 10px; }
.footer-col.template-legal { display: flex; flex-direction: column; gap: 40px; }
.footer-col.template-legal > div { display: flex; flex-direction: column; gap: 20px; }

.footer-newsletter {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  padding: 0 20px;
}
.footer-newsletter h4 { color: var(--color-cream); text-align: center; }
.footer-newsletter form {
  display: flex;
  width: 100%;
  gap: 8px;
}
.footer-newsletter input {
  flex: 1;
  padding: 15px;
  background: rgba(255,255,255,0.1);
  color: var(--color-cream);
  border: 0;
  font-family: var(--font-display);
  font-size: 16px;
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,0.5); }
.footer-newsletter button {
  padding: 15px 35px;
  background: var(--color-cream);
  color: var(--color-dark);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  border: 0;
  cursor: pointer;
}

.footer-social-block {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  padding: 0 50px;
}
.footer-social-block h3 { color: var(--color-cream); text-align: center; }
.social-icons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.social-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 22px 6px 10px;
  background: transparent;
  border-radius: 7px;
  color: var(--color-cream);
  transition: background 0.3s;
}
.social-link:hover { background: rgba(255,255,255,0.05); }
.social-link .icon-circle {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s, height 0.3s;
}
.social-link:hover .icon-circle { width: 44px; height: 44px; }
.social-link .icon-circle svg { width: 26px; height: 26px; color: var(--color-cream); }
.social-link span { font-family: var(--font-display); font-size: 16px; }

.footer-bottom {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 44px;
  width: 100%;
  max-width: var(--max-content);
  padding: 28px 50px 0;
}
.footer-bottom a { color: var(--color-cream); font-size: 17px; font-family: var(--font-display); }
.footer-bottom a:hover { opacity: 0.6; }

@media (max-width: 1199.98px) {
  .footer-contact-row { flex-direction: column; }
  .footer-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: 76px;
  }
  .footer-bottom { flex-wrap: wrap; }
}
@media (max-width: 809.98px) {
  .footer { padding: 50px 0 120px; gap: 50px; }
  .footer-contact { padding: 0 20px; }
  .footer-contact-item { padding: 20px 20px 30px; }
  .footer-columns {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 0 20px;
  }
  .footer-bottom { padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-social-block, .footer-newsletter { padding: 0 20px; }
  .contact-form .form-row { flex-direction: column; }
}

/* ============================================================
   Reveal animations (scroll-triggered + on-load)
   Placed last so they win the cascade over earlier rules like
   `.benefit { transition: all 0.3s }` and `.service-card { transition: background 0.3s }`.
   ============================================================ */

/* Generic fade-up */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1s var(--ease-out),
    transform 1s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal.reveal-delay-1 { transition-delay: 0.12s; }
.reveal.reveal-delay-2 { transition-delay: 0.24s; }
.reveal.reveal-delay-3 { transition-delay: 0.36s; }
.reveal.reveal-delay-4 { transition-delay: 0.48s; }

/* Sequential stagger for grids / lists.
   Higher specificity than `.benefit`, `.service-card` etc. (which set
   their own `transition` shorthand). We re-declare transition here. */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(1)  { transition-delay: 0.00s; }
.reveal-stagger.in-view > *:nth-child(2)  { transition-delay: 0.08s; }
.reveal-stagger.in-view > *:nth-child(3)  { transition-delay: 0.16s; }
.reveal-stagger.in-view > *:nth-child(4)  { transition-delay: 0.24s; }
.reveal-stagger.in-view > *:nth-child(5)  { transition-delay: 0.32s; }
.reveal-stagger.in-view > *:nth-child(6)  { transition-delay: 0.40s; }
.reveal-stagger.in-view > *:nth-child(7)  { transition-delay: 0.48s; }
.reveal-stagger.in-view > *:nth-child(8)  { transition-delay: 0.56s; }
.reveal-stagger.in-view > *:nth-child(9)  { transition-delay: 0.64s; }
.reveal-stagger.in-view > *:nth-child(n+10) { transition-delay: 0.72s; }

/* Word-level blur-in (hero h1, large value quote bands) */
.reveal-words .word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  transition:
    opacity 0.75s var(--ease-out),
    filter 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
  will-change: opacity, transform, filter;
}
.reveal-words.in-view .word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Image scale-in (hero background) */
.reveal-image > img,
.reveal-image .bg img,
.reveal-image .bg video {
  transform: scale(1.18);
  opacity: 0;
  transition:
    transform 1.6s var(--ease-out),
    opacity 1s var(--ease-out);
  will-change: transform, opacity;
}
.reveal-image.in-view > img,
.reveal-image.in-view .bg img,
.reveal-image.in-view .bg video {
  transform: scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .reveal-words .word,
  .reveal-image > img,
  .reveal-image .bg img,
  .reveal-image .bg video {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Contact page
   ============================================================ */

.page-contact { background: var(--color-page); }

/* ---- Hero ---- */
.contact-hero {
  position: relative;
  padding: 130px 50px 80px;
  background: var(--color-page);
  text-align: center;
}
.contact-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.contact-hero h1 {
  font-size: clamp(40px, 5.2vw, 78px);
  max-width: 14ch;
  text-wrap: balance;
}
.contact-hero-sub {
  max-width: 640px;
  font-size: 18px;
  color: var(--color-text-muted);
}
.contact-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 8px;
}
.contact-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.contact-hero-meta svg { width: 16px; height: 16px; color: var(--color-dark); }
@media (max-width: 809.98px) {
  .contact-hero { padding: 100px 20px 60px; }
  .contact-hero-meta { gap: 16px; }
  .contact-hero-meta span { font-size: 11px; }
}

/* ---- Info strip (Phone / Email / Studio / Hours) ---- */
.contact-info-strip {
  padding: 0 50px 80px;
  background: var(--color-page);
}
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: var(--max-wide);
  margin: 0 auto;
}
.contact-info-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px 26px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s var(--ease-out), border-color 0.3s;
}
a.contact-info-card { cursor: pointer; }
a.contact-info-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-dark);
}
.contact-info-card .info-icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(20,20,20,0.05);
  border-radius: 50%;
  color: var(--color-dark);
}
.contact-info-card .info-icon svg { width: 22px; height: 22px; }
.contact-info-card .info-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-text-muted);
}
.contact-info-card .info-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3em;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.contact-info-card .info-meta {
  font-size: 12px;
  color: var(--color-text-50);
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}
@media (max-width: 1199.98px) {
  .contact-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .contact-info-strip { padding: 0 20px 60px; }
  .contact-info-grid { grid-template-columns: 1fr; }
}

/* ---- Main form section ---- */
.contact-form-section {
  background: var(--color-page);
  padding: 30px 50px 100px;
}
.contact-form-grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  max-width: 1300px;
  margin: 0 auto;
  align-items: start;
}
.contact-form-side {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form-side .eyebrow { color: var(--color-text); }
.contact-form-side h2 {
  font-size: clamp(28px, 3vw, 38px);
  text-wrap: balance;
}
.contact-form-side > p {
  color: var(--color-text-muted);
  max-width: 440px;
}
.contact-perks {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 14px;
}
.contact-perks .perk {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid var(--color-border);
}
.contact-perks .perk:last-child { border-bottom: 1px solid var(--color-border); }
.contact-perks .perk-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--color-text);
  min-width: 38px;
}
.contact-perks .perk h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: var(--color-text);
}
.contact-perks .perk p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5em;
}
.contact-side-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  margin-top: 8px;
  background: rgba(20,20,20,0.04);
  border-radius: 4px;
}
.contact-side-cta p {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-text);
}

/* ---- Form ---- */
.contact-page-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
}
.contact-page-form.is-hidden { display: none; }
.contact-page-form .form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-page-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text);
}
.contact-page-form input[type="text"],
.contact-page-form input[type="email"],
.contact-page-form input[type="tel"],
.contact-page-form select,
.contact-page-form textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--color-white);
  border: 1px solid rgba(20,20,20,0.18);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  transition: border-color 0.2s, background 0.2s;
}
.contact-page-form input::placeholder,
.contact-page-form textarea::placeholder { color: var(--color-text-50); }
.contact-page-form input:focus,
.contact-page-form select:focus,
.contact-page-form textarea:focus {
  outline: none;
  border-color: var(--color-dark);
  background: var(--color-page);
}
.contact-page-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2 4L6 8L10 4' fill='none' stroke='%23303030' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.contact-page-form textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.5em;
}
.contact-page-form .field-error {
  display: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #b3261e;
}
.contact-page-form label.has-error input,
.contact-page-form label.has-error select,
.contact-page-form label.has-error textarea {
  border-color: #b3261e;
  background: rgba(179, 38, 30, 0.04);
}
.contact-page-form label.has-error .field-error { display: block; }

.form-consent {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.consent-row {
  flex-direction: row !important;
  align-items: center;
  gap: 12px !important;
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--color-text-muted) !important;
}
.consent-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--color-dark);
  flex-shrink: 0;
  margin: 0;
}
.consent-row span { line-height: 1.4em; }
.form-consent.has-error .consent-row span { color: #b3261e; }
.form-consent.has-error .field-error { display: block; }

.contact-page-form .form-submit {
  margin-top: 6px;
  align-self: flex-start;
  font-size: 13px;
}

/* Success state */
.contact-success {
  padding: 60px 40px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.contact-success[hidden] { display: none; }
.contact-success .success-icon {
  width: 64px; height: 64px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--color-dark);
}
.contact-success .success-icon svg { width: 100%; height: 100%; }
.contact-success h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.contact-success p {
  color: var(--color-text-muted);
  max-width: 480px;
}
.contact-success .success-meta {
  font-size: 13px;
  color: var(--color-text-50);
}
.contact-success .btn { margin-top: 10px; }

@media (max-width: 1199.98px) {
  .contact-form-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-form-side { position: static; max-width: 640px; }
}
@media (max-width: 809.98px) {
  .contact-form-section { padding: 20px 20px 80px; }
  .contact-page-form { padding: 24px 18px; }
  .contact-page-form .form-row-2 { grid-template-columns: 1fr; }
}

/* ---- Visit / Map ---- */
.contact-visit {
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 100px 50px;
}
.contact-visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: var(--max-wide);
  margin: 0 auto;
  align-items: stretch;
}
.contact-visit-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-right: 20px;
}
.contact-visit-content h2 {
  color: var(--color-cream);
  font-size: clamp(32px, 3.5vw, 50px);
  max-width: 14ch;
}
.contact-visit-content > p {
  color: var(--color-cream-50, rgba(255,248,235,0.7));
  max-width: 480px;
}
.visit-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 14px;
  padding: 26px 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}
.visit-details .label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: rgba(255,248,235,0.55);
  margin-bottom: 10px;
}
.visit-details p {
  color: var(--color-cream);
  line-height: 1.5em;
  font-size: 15px;
}
.visit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.visit-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-cream);
  transition: opacity 0.2s;
}
.visit-call:hover { opacity: 0.7; }
.visit-call svg { width: 18px; height: 18px; }

.contact-visit-map {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  min-height: 420px;
  background: rgba(255,255,255,0.04);
}
.contact-visit-map iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(0.4) contrast(0.95);
  transition: filter 0.4s;
  position: absolute;
  inset: 0;
}
.contact-visit-map:hover iframe { filter: grayscale(0) contrast(1); }

@media (max-width: 1199.98px) {
  .contact-visit-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-visit-map { min-height: 360px; }
}
@media (max-width: 809.98px) {
  .contact-visit { padding: 60px 20px; }
  .visit-details { grid-template-columns: 1fr; gap: 22px; }
}

/* ---- Alternative contact ---- */
.contact-alt {
  background: var(--color-page);
  padding: 100px 50px;
}
.contact-alt-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.contact-alt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.alt-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 34px 28px 28px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s var(--ease-out), border-color 0.3s;
  position: relative;
  overflow: hidden;
}
.alt-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-dark);
}
.alt-card .alt-icon {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--color-dark);
  color: var(--color-cream);
  border-radius: 50%;
}
.alt-card .alt-icon svg { width: 26px; height: 26px; }
.alt-card .alt-content { display: flex; flex-direction: column; gap: 10px; }
.alt-card h3 {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.alt-card p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5em;
  max-width: 320px;
}
.alt-card .alt-cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-text);
  transition: gap 0.3s var(--ease-out);
}
.alt-card:hover .alt-cta { gap: 14px; }
.alt-card .alt-cta svg { width: 12px; height: 12px; }

@media (max-width: 1199.98px) {
  .contact-alt-grid { grid-template-columns: 1fr; }
  .alt-card { padding: 26px 22px; }
}
@media (max-width: 809.98px) {
  .contact-alt { padding: 60px 20px; }
}

/* ============================================================
   Blogs page
   ============================================================ */

.page-blogs { background: var(--color-page); }

/* ---- Hero ---- */
.blogs-hero {
  padding: 130px 50px 70px;
  background: var(--color-page);
  text-align: center;
}
.blogs-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.blogs-hero h1 {
  font-size: clamp(40px, 5.2vw, 78px);
  text-wrap: balance;
  max-width: 16ch;
}
.blogs-hero-sub {
  max-width: 640px;
  font-size: 18px;
  color: var(--color-text-muted);
}
.blogs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.blogs-hero-meta strong { font-weight: 700; }
.blogs-hero-meta .dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-text-50);
}
@media (max-width: 809.98px) {
  .blogs-hero { padding: 100px 20px 50px; }
}

/* ---- Featured post ---- */
.blogs-featured-section {
  padding: 0 50px 80px;
  background: var(--color-page);
}
.blogs-featured-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
}
.blog-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: stretch;
  background: var(--color-white);
  border: 1px solid var(--color-border);
}
.blog-featured-image {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 460px;
}
.blog-featured-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.blog-featured:hover .blog-featured-image img { transform: scale(1.03); }
.featured-badge {
  position: absolute;
  top: 18px; left: 18px;
  padding: 6px 12px;
  background: var(--color-cream);
  color: var(--color-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blog-featured-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 50px 44px;
}
.blog-featured-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.blog-featured-meta .blog-category { /* uses existing styling */ }
.blog-featured-meta .featured-read {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-50);
}
.blog-featured-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1em;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.blog-featured-title a {
  color: inherit;
  transition: opacity 0.3s;
}
.blog-featured:hover .blog-featured-title a { opacity: 0.7; }
.blog-featured-excerpt {
  color: var(--color-text-muted);
  max-width: 56ch;
  line-height: 1.5em;
}
.blog-featured-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
}
.blog-featured-footer .author,
.blog-featured-footer .date {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-text-muted);
}
.blog-featured-footer svg { width: 16px; height: 16px; stroke: currentColor; }
.blog-featured-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-text);
  transition: gap 0.3s var(--ease-out);
}
.blog-featured-cta:hover { gap: 14px; }
.blog-featured-cta svg { width: 12px; height: 12px; }

@media (max-width: 1199.98px) {
  .blog-featured { grid-template-columns: 1fr; gap: 0; }
  .blog-featured-image { min-height: 320px; }
  .blog-featured-content { padding: 36px 28px; }
}
@media (max-width: 809.98px) {
  .blogs-featured-section { padding: 0 20px 60px; }
  .blog-featured-content { padding: 28px 22px; }
  .blog-featured-image { min-height: 260px; }
}

/* ---- Listing / filters / grid ---- */
.blogs-listing-section {
  padding: 30px 50px 100px;
  background: var(--color-page);
}
.blogs-listing-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.blogs-listing-header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 21px;
}

.blog-filters,
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0;
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 60px;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.25s var(--ease-out), color 0.25s, border-color 0.25s;
}
.filter-btn .filter-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-50);
  transition: color 0.25s;
}
.filter-btn:hover {
  border-color: var(--color-dark);
}
.filter-btn.active {
  background: var(--color-dark);
  color: var(--color-cream);
  border-color: var(--color-dark);
}
.filter-btn.active .filter-count { color: rgba(255,248,235,0.6); }

.blogs-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 16px;
}
.blogs-page-grid .blog-card {
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.blogs-page-grid .blog-card.is-hidden { display: none; }

/* Empty state when filter yields no results */
.blog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 80px 20px;
  color: var(--color-text);
}
.blog-empty[hidden] { display: none; }
.blog-empty .empty-icon { width: 48px; height: 48px; color: var(--color-dark); opacity: 0.6; }
.blog-empty h3 { font-size: 20px; }
.blog-empty p { max-width: 420px; color: var(--color-text-muted); }

@media (max-width: 1199.98px) {
  .blogs-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .blogs-listing-section { padding: 20px 20px 80px; }
  .blogs-page-grid { grid-template-columns: 1fr; gap: 24px; }
  .filter-btn { font-size: 12px; padding: 8px 14px; }
}

/* ---- Newsletter band ---- */
.blogs-newsletter {
  padding: 100px 50px;
  background: var(--color-dark);
  color: var(--color-cream);
}
.blogs-newsletter-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.blogs-newsletter-text { display: flex; flex-direction: column; gap: 16px; }
.blogs-newsletter-text h2 {
  color: var(--color-cream);
  font-size: clamp(28px, 3vw, 42px);
  text-wrap: balance;
}
.blogs-newsletter-text p {
  color: rgba(255,248,235,0.7);
  max-width: 50ch;
  line-height: 1.5em;
}
.blogs-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.blogs-newsletter-form .input-row {
  display: flex;
  gap: 10px;
}
.blogs-newsletter-form input[type="email"] {
  flex: 1;
  padding: 16px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: 15px;
  transition: border-color 0.2s, background 0.2s;
}
.blogs-newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-cream);
  background: rgba(255,255,255,0.10);
}
.blogs-newsletter-form input::placeholder { color: rgba(255,248,235,0.4); }
.blogs-newsletter-form .form-note {
  font-size: 12px;
  color: rgba(255,248,235,0.45);
}
.blogs-newsletter-form .success {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-cream);
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
}
.blogs-newsletter-form .success[hidden] { display: none; }

@media (max-width: 1199.98px) {
  .blogs-newsletter-inner { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 809.98px) {
  .blogs-newsletter { padding: 60px 20px; }
  .blogs-newsletter-form .input-row { flex-direction: column; }
}

/* ============================================================
   Projects page
   ============================================================ */

.page-projects { background: var(--color-page); }

/* ---- Hero (dark band, title-left / copy-right) ---- */
.projects-hero-dark {
  position: relative;
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 140px 50px 110px;
  overflow: hidden;
}
.projects-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(255, 248, 235, 0.06), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(255, 248, 235, 0.04), transparent 55%);
  pointer-events: none;
}
.projects-hero-dark-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: end;
}
.projects-hero-dark h1 {
  color: var(--color-cream);
  font-size: clamp(48px, 6.2vw, 110px);
  line-height: 1em;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 11ch;
}
.projects-hero-dark-sub {
  font-size: 17px;
  line-height: 1.5em;
  color: rgba(255, 248, 235, 0.72);
  max-width: 50ch;
  justify-self: end;
}
@media (max-width: 1199.98px) {
  .projects-hero-dark-inner { grid-template-columns: 1fr; gap: 30px; align-items: flex-start; }
  .projects-hero-dark-sub { justify-self: start; }
}
@media (max-width: 809.98px) {
  .projects-hero-dark { padding: 110px 20px 70px; }
}

/* ---- Filter (text-only with dot indicator on active) ---- */
.projects-filter-section,
.services-filter-section {
  background: var(--color-page);
  padding: 36px 20px 20px;
  border-bottom: 1px solid var(--color-border);
}
/* Services filter sits inside cream area — drop the divider to keep it light */
.services-filter-section { border-bottom: 0; padding-bottom: 8px; }
.projects-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 44px;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0;
}
.projects-filter-bar .filter-link {
  position: relative;
  padding: 8px 4px 16px;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-text-50);
  cursor: pointer;
  transition: color 0.25s;
}
.projects-filter-bar .filter-link:hover { color: var(--color-text); }
.projects-filter-bar .filter-link.active { color: var(--color-text); }
.projects-filter-bar .filter-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-dark);
  transform: translateX(-50%);
}
@media (max-width: 809.98px) {
  .projects-filter-section { padding: 28px 16px 12px; }
  .projects-filter-bar { gap: 18px 24px; }
  .projects-filter-bar .filter-link { font-size: 13px; }
}

/* ---- Projects list (image-left / content-right rows) ---- */
.projects-list-section {
  background: var(--color-page);
  padding: 70px 50px 100px;
}
.projects-list-section .projects-list {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.project-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.project-row.is-hidden { display: none; }

.project-row-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-page);
  text-decoration: none;
}
.project-row-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}
.project-row-overlay-title {
  position: absolute;
  bottom: 22px;
  left: 24px;
  z-index: 1;
  max-width: 80%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15em;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  pointer-events: none;
}
/* Overlay title slide-up on row reveal */
.project-row-overlay-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out) 0.2s, transform 0.8s var(--ease-out) 0.2s;
}
.project-row.reveal.in-view .project-row-overlay-title {
  opacity: 1;
  transform: translateY(0);
}
.project-row-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

.project-row-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: space-between;
  padding: 6px 0;
  transition: transform 0.4s var(--ease-out);
}
.project-row:hover .project-row-content { transform: translateX(4px); }
.project-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.project-row-tags .tag {
  padding: 5px 14px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}
.project-row-desc {
  font-size: 16px;
  line-height: 1.55em;
  color: var(--color-text);
  max-width: 56ch;
}
.project-row-meta {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  transition: border-color 0.3s;
}
.project-row:hover .project-row-meta { border-color: var(--color-text); }
.project-row-meta .meta-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-row-meta .meta-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.project-row-meta .meta-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* Empty state */
.project-empty {
  max-width: var(--max-wide);
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 80px 20px;
}
.project-empty[hidden] { display: none; }
.project-empty .empty-icon { width: 48px; height: 48px; color: var(--color-dark); opacity: 0.6; }
.project-empty h3 { font-size: 20px; }
.project-empty p { max-width: 420px; color: var(--color-text-muted); }

@media (max-width: 1199.98px) {
  .projects-list-section .projects-list { gap: 50px; }
  .project-row { grid-template-columns: 1fr; gap: 28px; }
  .project-row-overlay-title { font-size: 22px; bottom: 18px; left: 20px; }
}
@media (max-width: 809.98px) {
  .projects-list-section { padding: 50px 20px 80px; }
  .projects-list-section .projects-list { gap: 40px; }
  .project-row-meta { grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 18px; }
  .project-row-overlay-title { font-size: 18px; }
}

/* ---- Get a free quote section ---- */
.projects-quote-section {
  background: var(--color-dark);
  padding: 100px 50px;
}
.projects-quote-section > .footer-contact-row {
  max-width: var(--max-content);
  margin: 0 auto;
  background: rgba(255,255,255,0.05);
}
@media (max-width: 809.98px) {
  .projects-quote-section { padding: 60px 20px; }
}

/* ============ Gallery page ============ */
.gallery-hero {
  background: var(--color-cream);
  padding: 130px 50px 70px;
  text-align: center;
}
.gallery-hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.gallery-hero h1 {
  font-size: clamp(40px, 5.2vw, 78px);
  text-wrap: balance;
  letter-spacing: -0.02em;
  line-height: 1.05em;
}
.gallery-hero-sub {
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.55em;
  max-width: 660px;
}
.gallery-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.gallery-hero-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-text-muted);
  display: inline-block;
}

/* Filter row wrapper */
.gallery-filter-section {
  padding: 30px 50px 0;
}
.gallery-filter-section .filter-row {
  justify-content: center;
  gap: 24px 44px;
}

/* Grid section */
.gallery-grid-section {
  padding: 50px 50px 100px;
}
.gallery-page-grid {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.gallery-page-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: var(--color-cream);
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  font: inherit;
  color: inherit;
  /* Scroll-reveal */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.gallery-page-item.in-view {
  opacity: 1;
  transform: translateY(0);
}
.gallery-page-item.is-hidden { display: none; }

.gallery-page-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transform-origin: center;
  transition: transform 1s var(--ease-out), filter 0.6s ease;
  display: block;
}
.gallery-page-item:hover img {
  transform: scale(1.14);
  filter: brightness(0.78);
}

/* Bottom subtle gradient always present */
.gallery-page-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.gallery-page-item:hover::after { opacity: 1; }

/* Magnifier "+" badge — appears centered on hover */
.gallery-page-item::before {
  content: "+";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-dark);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.5s var(--ease-out);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
.gallery-page-item:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.gallery-page-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 14px 16px 14px;
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  z-index: 2;
  pointer-events: none;
}
.gallery-page-item:hover .caption {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-page-item {
    opacity: 1 !important;
    transform: none !important;
  }
  .gallery-page-item img,
  .gallery-page-item::before,
  .gallery-page-item::after,
  .gallery-page-item .caption { transition: none !important; }
}

/* Variety spans */
.gallery-page-item[data-span="wide"] { grid-column: span 2; }
.gallery-page-item[data-span="tall"] { grid-row: span 2; }

/* CTA section */
.gallery-cta-section {
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 100px 50px 110px;
  text-align: center;
}
.gallery-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.gallery-cta-inner h2 {
  color: var(--color-cream);
  font-size: clamp(32px, 3.5vw, 50px);
  letter-spacing: -0.02em;
  line-height: 1.1em;
  text-wrap: balance;
}
.gallery-cta-inner p {
  color: rgba(255, 248, 235, 0.7);
  max-width: 50ch;
  line-height: 1.5em;
  font-size: 16px;
}
.gallery-cta-section .btn {
  border-color: var(--color-cream);
  color: var(--color-cream);
}
.gallery-cta-section .btn::after { background: var(--color-cream); }
.gallery-cta-section .btn:hover .btn-label { color: var(--color-dark); }
.gallery-cta-section .btn:hover .btn-arrow svg { color: var(--color-dark); }

/* Lightbox */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: 60px;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.gallery-lightbox.is-open {
  display: flex;
  opacity: 1;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: none;
  border: 0;
  color: var(--color-cream);
  cursor: pointer;
  z-index: 2;
  opacity: 0.7;
  transition: opacity 0.2s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { opacity: 1; }

.lightbox-close {
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  font-size: 28px;
  line-height: 1;
}
.lightbox-prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
}
.lightbox-next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
}
.lightbox-prev svg,
.lightbox-next svg {
  width: 24px;
  height: 24px;
}

.lightbox-figure {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.gallery-lightbox.is-open .lightbox-figure {
  opacity: 1;
  transform: scale(1);
}
.lightbox-figure img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
  width: auto;
  height: auto;
}
.lightbox-figure figcaption {
  color: rgba(255, 248, 235, 0.8);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}

.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 248, 235, 0.5);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

body.lightbox-open { overflow: hidden; }

/* Tablet */
@media (max-width: 1199.98px) {
  .gallery-page-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 809.98px) {
  .gallery-hero { padding: 100px 20px 50px; }
  .gallery-hero-sub { font-size: 16px; }
  .gallery-filter-section { padding: 20px 20px 0; }
  .gallery-grid-section { padding: 30px 20px 60px; }
  .gallery-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .gallery-page-item[data-span="wide"] { grid-column: span 2; }
  .gallery-page-item[data-span="tall"] { grid-row: span 2; }
  .gallery-page-item .caption {
    opacity: 1;
    transform: translateY(0);
    font-size: 11px;
    padding: 12px 12px 10px;
  }
  .gallery-cta-section { padding: 70px 20px 80px; }

  .gallery-lightbox { padding: 20px; }
  .lightbox-close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: 20px;
    transform: none;
    width: 48px;
    height: 48px;
  }
  .lightbox-prev { left: 25%; }
  .lightbox-next { right: 25%; }
  .lightbox-figure { max-width: 100%; max-height: 70vh; }
  .lightbox-figure img { max-height: 60vh; }
  .lightbox-counter { bottom: 80px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gallery-page-item img,
  .gallery-page-item .caption,
  .gallery-lightbox,
  .lightbox-figure {
    transition: none;
  }
  .gallery-page-item:hover img { transform: scale(1.05); }
  .gallery-lightbox.is-open .lightbox-figure {
    transform: none;
  }
}

/* ============================================================
   Project detail page (project-<slug>.html)
   ============================================================ */

.page-project-detail { background: var(--color-page); }

/* ---- Hero: full-bleed image + title overlay ---- */
.project-detail-hero {
  position: relative;
  width: 100%;
  height: 82vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--color-dark);
}
.project-detail-hero-image { position: absolute; inset: 0; }
.project-detail-hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1.4s var(--ease-out);
}
.project-detail-hero.in-view .project-detail-hero-image img { transform: scale(1); }
.project-detail-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.project-detail-hero-title-wrap {
  position: absolute;
  bottom: 50px; left: 50px; right: 50px;
  z-index: 2;
}
.project-detail-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 86px);
  line-height: 1em;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-wrap: balance;
  max-width: 22ch;
}

/* ---- Intro: breadcrumb + 2-col (tagline / meta) ---- */
.project-detail-intro {
  padding: 70px 50px 80px;
  background: var(--color-page);
}
.project-detail-intro-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.breadcrumb a {
  color: var(--color-text);
  transition: opacity 0.2s;
}
.breadcrumb a:hover { opacity: 0.6; }
.breadcrumb span[aria-hidden] { color: var(--color-text-50); }

.project-detail-intro-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: start;
}
.project-detail-intro-left {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.project-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.project-detail-tags .tag {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.project-detail-intro-left h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  text-wrap: balance;
  max-width: 22ch;
}
.project-detail-summary {
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.6em;
  max-width: 62ch;
}
.project-detail-intro-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 30px;
  padding: 22px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.meta-block { display: flex; flex-direction: column; gap: 4px; }
.meta-block .label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.meta-block p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
}

/* ---- Feature image (full-width band) ---- */
.project-detail-feature-image {
  padding: 0 50px 80px;
  background: var(--color-page);
}
.project-detail-feature-image > div {
  max-width: var(--max-wide);
  margin: 0 auto;
  aspect-ratio: 16 / 8;
  overflow: hidden;
}
.project-detail-feature-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---- Narrative: brief + approach 2-col ---- */
.project-detail-narrative {
  padding: 0 50px 90px;
  background: var(--color-page);
}
.project-detail-narrative-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.narrative-block { display: flex; flex-direction: column; gap: 14px; }
.narrative-block h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  text-wrap: balance;
}
.narrative-block p {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6em;
}

/* ---- Image gallery ---- */
.project-detail-gallery {
  padding: 0 50px 100px;
  background: var(--color-page);
}
.project-detail-gallery-grid {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  grid-auto-flow: dense;
}
.project-gallery-item {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.project-gallery-item--wide { grid-column: span 4; aspect-ratio: 16 / 9; }
.project-gallery-item--tall { grid-column: span 3; grid-row: span 2; aspect-ratio: 2 / 3; }
.project-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.project-gallery-item:hover img { transform: scale(1.04); }

/* ---- Stats band (dark) — reuses .stat-block and .stat-num from projects.html ---- */
.project-detail-stats {
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 70px 50px;
}
.project-detail-stats-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

/* ---- Related projects (prev / next) ---- */
.project-detail-related {
  padding: 90px 50px;
  background: var(--color-page);
}
.project-detail-related-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.related-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.related-header h2 {
  font-size: clamp(28px, 3vw, 40px);
}
.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.related-project {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: inherit;
}
.related-project-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.related-project-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.related-project:hover .related-project-image img { transform: scale(1.04); }
.related-project-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}
.related-project-info .label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.related-project-info h3 {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  transition: opacity 0.3s;
}
.related-project:hover .related-project-info h3 { opacity: 0.7; }
.related-project-info .meta {
  font-size: 13px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* ---- CTA band ---- */
.project-detail-cta {
  padding: 100px 50px;
  background: var(--color-page);
  border-top: 1px solid var(--color-border);
}
.project-detail-cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.project-detail-cta .cta-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.project-detail-cta h2 {
  font-size: clamp(32px, 3.5vw, 48px);
  text-wrap: balance;
  max-width: 14ch;
}
.project-detail-cta p {
  color: var(--color-text-muted);
  max-width: 52ch;
  line-height: 1.5em;
}
.project-detail-cta .cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
  .project-detail-hero { height: 70vh; }
  .project-detail-hero-title-wrap { left: 30px; right: 30px; bottom: 30px; }
  .project-detail-intro-grid { grid-template-columns: 1fr; gap: 50px; }
  .project-detail-intro-right { grid-template-columns: repeat(3, 1fr); }
  .project-detail-narrative-inner { grid-template-columns: 1fr; gap: 40px; }
  .project-detail-gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .project-gallery-item,
  .project-gallery-item--wide,
  .project-gallery-item--tall {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
  .project-detail-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
  .project-detail-cta-inner { grid-template-columns: 1fr; }
}
@media (max-width: 809.98px) {
  .project-detail-hero { height: 60vh; min-height: 420px; }
  .project-detail-hero-title-wrap { left: 20px; right: 20px; bottom: 24px; }
  .project-detail-intro,
  .project-detail-feature-image,
  .project-detail-narrative,
  .project-detail-gallery,
  .project-detail-stats,
  .project-detail-related,
  .project-detail-cta {
    padding-left: 20px;
    padding-right: 20px;
  }
  .project-detail-intro-right { grid-template-columns: 1fr 1fr; }
  .project-detail-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .related-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Services page
   ============================================================ */

.page-services { background: var(--color-page); }

/* ---- Hero (dark band, 2-col title/copy — matches projects hero pattern) ---- */
.services-hero-dark {
  position: relative;
  width: 100%;
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 130px 50px 110px;
  overflow: hidden;
}
.services-hero-dark-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end;
}
.services-hero-dark h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 110px);
  line-height: 0.98em;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-wrap: balance;
}
.services-hero-dark-sub {
  font-size: 17px;
  line-height: 1.6em;
  color: rgba(255, 248, 235, 0.75);
  max-width: 38ch;
  justify-self: end;
}
@media (max-width: 1199.98px) {
  .services-hero-dark { padding: 110px 40px 80px; }
  .services-hero-dark-inner { grid-template-columns: 1fr; gap: 30px; }
  .services-hero-dark-sub { justify-self: start; }
}
@media (max-width: 809.98px) {
  .services-hero-dark { padding: 90px 20px 60px; }
}

/* ---- Services cards grid (bento: 4-col with mixed wide/narrow tiles) ---- */
.services-cards-section {
  padding: 60px 50px 100px;
  background: var(--color-page);
}
.services-cards-grid {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;  /* all cards in a row match the tallest */
}
/* Wide tile spans 2 columns. Image aspect-ratio 5/3 is calibrated so its
   height equals the narrow tile's 4/5 portrait image — rows align perfectly. */
.service-card-tile.tile--wide { grid-column: span 2; }
.service-card-tile.tile--wide .service-tile-image { aspect-ratio: 5 / 3; }

/* Extra-wide finale tile spans the full 4 columns (used by the last card). */
.service-card-tile.tile--xwide { grid-column: span 4; }
.service-card-tile.tile--xwide .service-tile-image { aspect-ratio: 21 / 9; }
.service-card-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 22px 22px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition:
    background 0.55s var(--ease-out),
    color 0.45s var(--ease-out),
    border-color 0.35s var(--ease-out),
    transform 0.45s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}
.service-card-tile.is-hidden { display: none; }
/* Whole card flips dark on hover */
.service-card-tile:hover {
  background: var(--color-dark);
  color: var(--color-cream);
  border-color: var(--color-dark);
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(20, 20, 20, 0.18);
  cursor: none; /* hide system cursor — the View Service badge takes its place */
}
/* The View Service badge also covers card hover area; nested children
   should not show the system cursor either. */
.service-card-tile:hover * { cursor: none; }

.service-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 4px;
}
.service-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  flex-shrink: 0;
  transition: background 0.4s var(--ease-out), color 0.4s, transform 0.4s var(--ease-out);
}
.service-tile-icon svg { width: 22px; height: 22px; }
.service-card-tile:hover .service-tile-icon {
  background: rgba(255, 248, 235, 0.12);
  color: var(--color-cream);
}
.service-tile-counter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  transition: color 0.4s;
}
.service-tile-counter strong {
  color: var(--color-text);
  font-weight: 700;
  transition: color 0.4s;
}
.service-card-tile:hover .service-tile-counter,
.service-card-tile:hover .service-tile-counter strong {
  color: var(--color-cream);
}

.service-tile-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.05em;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 0 4px;
  /* Reserve room for 2 lines so all cards line up regardless of name length */
  min-height: calc(1.05em * 2);
  display: flex;
  align-items: flex-end;
  transition: color 0.4s;
}
.service-card-tile:hover .service-tile-name { color: var(--color-cream); }

/* Portrait image — matches template proportions */
.service-tile-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-page);
}
.service-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
  will-change: transform;
}
.service-card-tile:hover .service-tile-image img { transform: scale(1.04); }

/* Circular "VIEW SERVICE" badge — acts as a custom cursor that follows
   the mouse over the card. JS sets `top` / `left` inline; CSS handles the
   smooth follow via short transition on those properties. */
.service-tile-view-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.4s var(--ease-out),
    top 0.18s var(--ease-out),
    left 0.18s var(--ease-out);
  z-index: 10;
  pointer-events: none;
  will-change: top, left, transform, opacity;
}
.service-card-tile:hover .service-tile-view-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* One-line description that expands below the image on hover */
.service-tile-desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5em;
  color: rgba(255, 248, 235, 0.82);
  padding: 0 4px;
  margin: 0;
  transition:
    max-height 0.5s var(--ease-out),
    opacity 0.4s var(--ease-out),
    margin-top 0.4s var(--ease-out);
}
.service-card-tile:hover .service-tile-desc {
  max-height: 140px;
  opacity: 1;
  margin-top: -2px;
}

@media (max-width: 1199.98px) {
  .services-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Wide + xwide both span full row at tablet */
  .service-card-tile.tile--wide,
  .service-card-tile.tile--xwide { grid-column: span 2; }
  .service-card-tile.tile--wide .service-tile-image,
  .service-card-tile.tile--xwide .service-tile-image { aspect-ratio: 16 / 9; }
}
@media (max-width: 809.98px) {
  .services-cards-section { padding: 40px 20px 70px; }
  .services-cards-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-card-tile { padding: 18px; gap: 16px; }
  .service-card-tile.tile--wide,
  .service-card-tile.tile--xwide { grid-column: auto; }
  .service-tile-image,
  .service-card-tile.tile--wide .service-tile-image,
  .service-card-tile.tile--xwide .service-tile-image { aspect-ratio: 4 / 3; }
  .service-tile-view-btn { width: 100px; height: 100px; font-size: 11px; }
}

/* ---- Get a Free Quote section (reuses footer-contact-row markup) ---- */
.services-quote-section {
  background: var(--color-dark);
  padding: 80px 50px;
}
.services-quote-section .footer-contact-row {
  max-width: var(--max-content);
  margin: 0 auto;
}
@media (max-width: 809.98px) {
  .services-quote-section { padding: 60px 20px; }
}

/* ============================================================
   Service detail page (service-<slug>.html) — reuses project-detail
   ============================================================ */

.page-service-detail { background: var(--color-page); }

/* Hero counter ("01 / 10") above the service name */
.project-detail-hero .hero-counter {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: 0.7;
  margin-bottom: 18px;
}
.project-detail-hero .hero-counter strong { font-weight: 700; opacity: 1; }

/* Deliverables / capabilities checklist */
.service-detail-capabilities-section {
  padding: 0 50px 90px;
  background: var(--color-page);
}
.service-detail-capabilities-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: start;
}
.service-detail-capabilities-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service-detail-capabilities-header h3 {
  font-size: clamp(24px, 2.4vw, 34px);
  text-wrap: balance;
}
.service-detail-capabilities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
}
.service-detail-capabilities li {
  padding: 18px 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 14px;
}
.service-detail-capabilities li::before {
  content: '';
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-dark) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M5 12L10 17L19 8' stroke='%23fff8eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
  flex-shrink: 0;
}

@media (max-width: 1199.98px) {
  .service-detail-capabilities-inner { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 809.98px) {
  .service-detail-capabilities-section { padding: 0 20px 60px; }
  .service-detail-capabilities { grid-template-columns: 1fr; }
}

/* Other-services prev/next strip (reuses .related-* patterns visually) */
.service-other-section {
  padding: 90px 50px;
  background: var(--color-page);
  border-top: 1px solid var(--color-border);
}
.service-other-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.service-other-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-other-header h2 {
  font-size: clamp(26px, 2.8vw, 38px);
}
.service-other-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.service-other-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 30px;
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.service-other-card:hover {
  background: var(--color-dark);
  color: var(--color-cream);
  border-color: var(--color-dark);
}
.service-other-card-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.service-other-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color 0.3s;
}
.service-other-card:hover .service-other-label { color: rgba(255, 248, 235, 0.65); }
.service-other-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.service-other-card .arrow {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out);
}
.service-other-card.prev .arrow svg { transform: rotate(180deg); }
.service-other-card:hover .arrow { transform: translateX(6px); }
.service-other-card.prev:hover .arrow { transform: translateX(-6px); }
.service-other-card .arrow svg { width: 20px; height: 20px; }

@media (max-width: 809.98px) {
  .service-other-section { padding: 60px 20px; }
  .service-other-grid { grid-template-columns: 1fr; }
  .service-other-card { padding: 22px 22px; }
}

/* ============================================================
   Nav: Services hover dropdown
   ============================================================ */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-dropdown .chev {
  width: 11px;
  height: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s var(--ease-out);
}
.nav-dropdown .chev svg { width: 100%; height: 100%; }
.nav-dropdown:hover .chev,
.nav-dropdown:focus-within .chev { transform: rotate(45deg); }

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 0;
  min-width: 260px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.3s var(--ease-out),
    visibility 0s linear 0.3s;
  z-index: 150;
  box-shadow: 0 18px 48px rgba(20, 20, 20, 0.12);
  margin-top: 4px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.nav-dropdown-menu::before {
  /* invisible hover bridge so the menu stays open between trigger and menu */
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, padding 0.25s var(--ease-out);
}
.nav-dropdown-menu a:hover {
  background: var(--color-dark);
  color: var(--color-cream);
  padding-left: 24px;
}
.nav-dropdown-menu a .menu-num {
  display: inline-block;
  width: 22px;
  font-size: 11px;
  color: var(--color-text-muted);
  transition: color 0.2s;
}
.nav-dropdown-menu a:hover .menu-num { color: rgba(255, 248, 235, 0.6); }

/* "View all services" entry — visually distinct from the numbered list */
.nav-dropdown-menu a.menu-all {
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 6px;
  padding-bottom: 14px;
}
.nav-dropdown-menu a.menu-all .menu-num {
  font-size: 8px;
  color: var(--color-text);
  vertical-align: middle;
}
.nav-dropdown-menu a.menu-all:hover .menu-num { color: var(--color-cream); }

@media (max-width: 1099.98px) {
  /* Mobile nav: dropdown menu becomes inline list */
  .nav-dropdown { display: block; width: 100%; }
  .nav-dropdown > a {
    width: 100%;
    height: 56px;
    border-bottom: 1px solid #eee;
    padding: 0;
    justify-content: space-between;
  }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    border: 0;
    border-radius: 0;
    background: rgba(20,20,20,0.03);
    box-shadow: none;
    min-width: 0;
    margin-top: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-menu a {
    padding: 12px 24px;
    border-bottom: 1px solid #eee;
  }
  .nav-dropdown-menu a:hover { padding-left: 32px; }
}

/* ============================================================
   Gallery — premium animations (masked text + parallax + easing)
   ============================================================ */

/* Masked text reveal — each word slides up from below an overflow-hidden mask.
   Stacks on the existing .reveal-words splitter (which wraps words in .word
   spans + sets per-word transition-delay inline). */
.reveal-mask {
  display: block;
  overflow: hidden;
  /* tiny extra room so descenders (g, y, p) aren't clipped at rest */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.reveal-mask .word {
  display: inline-block;
  opacity: 1;            /* override .reveal-words opacity:0 */
  filter: none;          /* override .reveal-words blur */
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.6, 0, 0.2, 1);
  will-change: transform;
}
.reveal-mask.in-view .word { transform: translateY(0); }

/* Parallax on gallery images.
   JS updates `--py` on the .gallery-page-item element. We add it to the
   image transform so it composes with scale (rest + hover) cleanly. */
.gallery-page-item {
  --py: 0px;
}
.gallery-page-item img {
  /* override the existing transform that only had scale */
  transform: scale(1.04) translateY(var(--py));
  transition:
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s ease;
}
.gallery-page-item:hover img {
  transform: scale(1.16) translateY(var(--py));
  filter: brightness(0.78);
}

/* Smoother stagger across reveal items in the gallery grid */
.gallery-page-grid .gallery-page-item {
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-page-grid .gallery-page-item:nth-child(1)  { transition-delay: 0s; }
.gallery-page-grid .gallery-page-item:nth-child(2)  { transition-delay: 0.05s; }
.gallery-page-grid .gallery-page-item:nth-child(3)  { transition-delay: 0.10s; }
.gallery-page-grid .gallery-page-item:nth-child(4)  { transition-delay: 0.15s; }
.gallery-page-grid .gallery-page-item:nth-child(5)  { transition-delay: 0.20s; }
.gallery-page-grid .gallery-page-item:nth-child(6)  { transition-delay: 0.25s; }
.gallery-page-grid .gallery-page-item:nth-child(7)  { transition-delay: 0.30s; }
.gallery-page-grid .gallery-page-item:nth-child(8)  { transition-delay: 0.05s; }
.gallery-page-grid .gallery-page-item:nth-child(9)  { transition-delay: 0.10s; }
.gallery-page-grid .gallery-page-item:nth-child(10) { transition-delay: 0.15s; }
.gallery-page-grid .gallery-page-item:nth-child(n+11) { transition-delay: 0.08s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-mask .word,
  .gallery-page-item img {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   About page
   ============================================================ */

.page-about { background: var(--color-page); }

/* ---- Hero ---- */
.about-hero {
  padding: 130px 50px 80px;
  background: var(--color-page);
}
.about-hero-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-hero h1 {
  font-size: clamp(48px, 7vw, 110px);
  text-wrap: balance;
  max-width: 14ch;
}
.about-hero-sub {
  font-size: 18px;
  line-height: 1.55em;
  color: var(--color-text-muted);
  max-width: 56ch;
}
@media (max-width: 809.98px) {
  .about-hero { padding: 100px 20px 60px; }
}

/* ---- About company ---- */
.about-company {
  padding: 60px 50px 30px;
  background: var(--color-page);
}
.about-company-inner {
  max-width: var(--max-wide);
  margin: 0 auto 40px;
}
.about-company-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 62ch;
}
.about-company-body {
  font-size: 17px;
  line-height: 1.6em;
  color: var(--color-text-muted);
}
.about-company-media {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 50px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.about-company-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-dark);
}
.about-company-image img,
.about-company-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 1199.98px) {
  .about-company-media { grid-template-columns: 1fr; }
}
@media (max-width: 809.98px) {
  .about-company,
  .about-company-media { padding-left: 20px; padding-right: 20px; }
}

/* ---- Mission + Vision ---- */
.mission-vision {
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 100px 50px;
}
.mission-vision-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.mv-card {
  position: relative;
  padding: 50px 44px;
  background: rgba(255, 248, 235, 0.04);
  border: 1px solid rgba(255, 248, 235, 0.12);
  overflow: hidden;
  min-height: 520px;
  display: flex;
}
.mv-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mv-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: brightness(0.6);
}
.mv-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: stretch;
}
.mv-card h2 {
  font-size: clamp(28px, 3vw, 40px);
  color: var(--color-cream);
  text-wrap: balance;
  max-width: 22ch;
}
.mv-card p {
  font-size: 16px;
  line-height: 1.6em;
  color: rgba(255, 248, 235, 0.78);
  max-width: 50ch;
}
.mv-attribution {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 248, 235, 0.15);
}
.mv-portrait {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-cream);
  flex-shrink: 0;
}
.mv-portrait img { width: 100%; height: 100%; object-fit: cover; }
.mv-attribution-meta {
  display: flex;
  flex-direction: column;
}
.mv-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-cream);
}
.mv-role {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 248, 235, 0.65);
}
@media (max-width: 1199.98px) {
  .mission-vision-inner { grid-template-columns: 1fr; }
  .mv-card { min-height: 380px; padding: 40px 30px; }
}
@media (max-width: 809.98px) {
  .mission-vision { padding: 70px 20px; }
}

/* ---- Brands (about page) ---- */
.brands-section {
  padding: 90px 50px;
  background: var(--color-page);
}
.brands-section-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.about-brands-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--color-border);
}
.about-brands-grid .brand-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  min-height: 110px;
  border-right: 1px solid var(--color-border);
}
.about-brands-grid .brand-cell:last-child { border-right: 0; }
.about-brands-grid .brand-cell img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity 0.3s, filter 0.3s;
}
.about-brands-grid .brand-cell:hover img {
  opacity: 1;
  filter: grayscale(0);
}

/* Brand quotes horizontal ticker */
.about-brand-quote-ticker {
  overflow: hidden;
  margin-top: 20px;
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.about-brand-quote-track {
  display: flex;
  gap: 24px;
  animation: aboutQuoteScroll 60s linear infinite;
  width: max-content;
}
.brand-quote-card {
  flex-shrink: 0;
  width: 380px;
  padding: 26px 28px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.brand-quote-card .quote {
  font-size: 15px;
  line-height: 1.55em;
  color: var(--color-text);
}
.brand-quote-card .author {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: auto;
}
@keyframes aboutQuoteScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 1199.98px) {
  .about-brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-brands-grid .brand-cell:nth-child(3n) { border-right: 0; }
  .about-brands-grid .brand-cell:nth-child(n+4) { border-top: 1px solid var(--color-border); }
}
@media (max-width: 809.98px) {
  .brands-section { padding: 70px 20px; }
  .about-brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-quote-card { width: 280px; padding: 20px 22px; }
}

/* ---- Process (about) ---- */
.process-about-section {
  padding: 90px 50px;
  background: var(--color-page);
}
.process-about-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.process-about-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.process-about-step {
  display: grid;
  grid-template-columns: 200px 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid var(--color-border);
}
.process-about-step:last-child { border-bottom: 1px solid var(--color-border); }
.process-about-number {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.step-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.step-big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(60px, 7vw, 110px);
  line-height: 1em;
  letter-spacing: -0.05em;
  color: var(--color-dark);
}
.process-about-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.process-about-body h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  text-wrap: balance;
}
.process-about-body p {
  color: var(--color-text-muted);
  line-height: 1.6em;
  max-width: 48ch;
}
.process-about-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.process-about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.process-about-step:hover .process-about-image img { transform: scale(1.05); }

@media (max-width: 1199.98px) {
  .process-about-step { grid-template-columns: 1fr; gap: 18px; }
  .process-about-image { max-width: 100%; }
}
@media (max-width: 809.98px) {
  .process-about-section { padding: 70px 20px; }
}

/* ---- Principles (dark band) ---- */
.principles-section {
  padding: 100px 50px;
  background: var(--color-dark);
  color: var(--color-cream);
}
.principles-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.principles-section h2 { color: var(--color-cream); }
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.principle {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 248, 235, 0.18);
}
.principle-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.05em;
  line-height: 1em;
  color: var(--color-cream);
}
.principle h3 {
  font-size: 22px;
  color: var(--color-cream);
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.principle p {
  font-size: 15px;
  line-height: 1.55em;
  color: rgba(255, 248, 235, 0.72);
  max-width: 36ch;
}
@media (max-width: 1199.98px) {
  .principles-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 809.98px) {
  .principles-section { padding: 70px 20px; }
}

/* ---- Our Story (horizontal scroll) ---- */
.story-section {
  padding: 90px 0 60px;
  background: var(--color-page);
  position: relative;
}
.story-inner {
  max-width: var(--max-wide);
  margin: 0 auto 40px;
  padding: 0 50px;
}
.story-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px 50px 30px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.story-scroller::-webkit-scrollbar { display: none; }
.story-scroller { scrollbar-width: none; }
.story-scroller.dragging { cursor: grabbing; user-select: none; }
.story-track {
  display: flex;
  gap: 24px;
  width: max-content;
}
.story-card {
  flex-shrink: 0;
  width: 360px;
  min-height: 400px;
  padding: 36px 32px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 24px;
  scroll-snap-align: start;
  transition: border-color 0.3s, transform 0.4s var(--ease-out);
}
.story-card:hover {
  border-color: var(--color-dark);
  transform: translateY(-4px);
}
.story-card-year {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 4.5vw, 64px);
  letter-spacing: -0.05em;
  line-height: 1em;
  color: var(--color-dark);
}
.story-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.story-card-body h3 {
  font-size: 22px;
  text-wrap: balance;
}
.story-card-body p {
  font-size: 15px;
  line-height: 1.55em;
  color: var(--color-text-muted);
}
.story-progress {
  max-width: var(--max-wide);
  margin: 30px auto 0;
  padding: 0 50px;
  height: 2px;
  background: var(--color-border);
}
.story-progress-fill {
  height: 100%;
  width: 0;
  background: var(--color-dark);
  transition: width 0.15s linear;
}
@media (max-width: 809.98px) {
  .story-inner,
  .story-scroller,
  .story-progress { padding-left: 20px; padding-right: 20px; }
  .story-card { width: 280px; min-height: 340px; padding: 26px 22px; }
}

/* ---- Team grid ---- */
.team-section {
  padding: 100px 50px;
  background: var(--color-page);
}
.team-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.team-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-page);
}
.team-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out), filter 0.4s ease;
}
.team-card:hover .team-card-image img {
  transform: scale(1.04);
  filter: brightness(0.7);
}
.team-socials {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
  display: flex;
  gap: 8px;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out);
}
.team-card:hover .team-socials {
  opacity: 1;
  transform: translateY(0);
}
.team-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.team-socials a:hover { background: var(--color-dark); color: var(--color-cream); }
.team-socials a svg { width: 16px; height: 16px; }
.team-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 2px;
}
.team-card-meta h3 {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.team-role {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.team-blurb {
  font-size: 14px;
  line-height: 1.5em;
  color: var(--color-text-muted);
  margin-top: 4px;
}
@media (max-width: 1199.98px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .team-section { padding: 70px 20px; }
  .team-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---- Achievements (dark stats band) ---- */
.achievements-section {
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 90px 50px;
}
.achievements-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.achievements-section h2 { color: var(--color-cream); }
.achievements-section .divider.light { background: rgba(255, 248, 235, 0.18); }
.achievements-section .divider.light .fill { background: var(--color-cream); opacity: 0.7; }
.achievements-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}
.achievements-stats .stat-card {
  background: transparent;
  padding: 28px 0 0;
  border-top: 1px solid rgba(255, 248, 235, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.achievements-stats .stat-card .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 5.5vw, 78px);
  letter-spacing: -0.05em;
  line-height: 1em;
  color: var(--color-cream);
  background: none;
}
.achievements-stats .stat-card .label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 248, 235, 0.7);
}
@media (max-width: 1199.98px) {
  .achievements-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
}
@media (max-width: 809.98px) {
  .achievements-section { padding: 70px 20px; }
  .achievements-stats { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- Accreditations ---- */
.accreditations-section {
  padding: 100px 50px;
  background: var(--color-page);
}
.accreditations-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.awards-year-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.awards-year {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 60px);
  letter-spacing: -0.05em;
  line-height: 1em;
  color: var(--color-dark);
}
.awards-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.award-row {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 22px;
  align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid var(--color-border);
}
.award-row:last-child { border-bottom: 1px solid var(--color-border); }
.award-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  flex-shrink: 0;
}
.award-icon svg { width: 20px; height: 20px; }
.award-body { display: flex; flex-direction: column; gap: 6px; }
.award-body h3 {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.award-body p {
  font-size: 14px;
  line-height: 1.55em;
  color: var(--color-text-muted);
  max-width: 56ch;
}
@media (max-width: 809.98px) {
  .accreditations-section { padding: 70px 20px; }
  .award-row { grid-template-columns: 36px 1fr; gap: 16px; }
}

/* ---- Contact CTA on about page (reuses footer-contact-row) ---- */
.about-contact-cta {
  background: var(--color-dark);
  padding: 80px 50px;
}
.about-contact-cta .footer-contact-row {
  max-width: var(--max-content);
  margin: 0 auto;
}
@media (max-width: 809.98px) {
  .about-contact-cta { padding: 60px 20px; }
}


/* ============================================================
   About page (from H drive design — exact integration)
   ============================================================ */

body.page-about {
/* ============================================================
   ========== ABOUT PAGE ==========
   ============================================================ */

/* ---------- Animation engine contract ---------- */
[data-animate] { opacity: 0; transition: opacity var(--anim-dur,800ms) var(--ease-out), transform var(--anim-dur,800ms) var(--ease-out), filter var(--anim-dur,800ms) var(--ease-out); will-change: transform, opacity; }
[data-animate="fade-up"] { transform: perspective(1200px) translateY(60px); }
[data-animate="blur-in"] { filter: blur(12px); transform: perspective(1200px) translateY(40px); }
[data-animate="scale-in"] { transform: perspective(1200px) scale(0.9); }
[data-animate="slide-left"] { transform: perspective(1200px) translateX(-50px); }
[data-animate="slide-right"] { transform: perspective(1200px) translateX(50px); }
[data-animate].is-in { opacity: 1; transform: perspective(1200px); filter: none; }
[data-animate="word-stagger"] { opacity: 1; }
[data-animate="word-stagger"] .word { display: inline-block; opacity: 0; transform: translateY(20px); filter: blur(8px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), filter 800ms var(--ease-out); transition-delay: calc(var(--i) * var(--word-stagger, 60ms)); }
[data-animate="word-stagger"].is-in .word { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { [data-animate], [data-animate] .word { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* ---------- About hero ---------- */
.about-hero {
  position: relative;
  width: 100%;
  padding: clamp(120px, 18vh, 220px) 50px 60px;
  background: var(--color-page);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.about-hero .eyebrow { justify-content: center; }
.about-hero-title {
  max-width: 1100px;
  margin: 0 auto;
}
.about-hero-sub {
  max-width: 720px;
  margin: 0 auto;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.5em;
}
@media (max-width: 1199.98px) {
  .about-hero { padding: clamp(100px, 14vh, 180px) 40px 50px; }
}
@media (max-width: 809.98px) {
  .about-hero { padding: clamp(80px, 12vh, 140px) 20px 40px; gap: 18px; }
  .about-hero-sub { font-size: 16px; }
}

/* ---------- About company ---------- */
.about-company {
  width: 100%;
  padding: 100px 50px;
  background: var(--color-page);
}
.about-company .section-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
}
.about-company-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.about-company-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about-company-text h2 {
  max-width: 600px;
}
.about-company-text p {
  max-width: 560px;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.5em;
}
.about-company-stats {
  display: flex;
  flex-direction: row;
  gap: 0;
  margin-top: 16px;
}
.about-company-stats .stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 28px;
  border-right: 1px solid var(--color-border);
}
.about-company-stats .stat-item:first-child { padding-left: 0; }
.about-company-stats .stat-item:last-child { border-right: 0; padding-right: 0; }
.about-company-stats .stat-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.5vw, 44px);
  line-height: 1em;
  letter-spacing: -0.04em;
  color: var(--color-dark);
}
.about-company-stats .stat-label {
  font-family: var(--font-eyebrow);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.about-company-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.about-company-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1199.98px) {
  .about-company { padding: 80px 40px; }
  .about-company-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-company-image { aspect-ratio: 5 / 4; }
}
@media (max-width: 809.98px) {
  .about-company { padding: 60px 20px; }
  .about-company-grid { gap: 32px; }
  .about-company-stats { flex-wrap: wrap; gap: 20px 0; }
  .about-company-stats .stat-item { flex: 1 1 33%; padding: 0 14px; }
}

/* ---------- Mission + Vision ---------- */
.mission-vision {
  width: 100%;
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 100px 50px;
}
.mission-vision .section-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.mv-panel {
  position: relative;
  padding: 60px;
  background: rgba(255,248,235,0.04);
  border: 1px solid rgba(255,248,235,0.08);
  overflow: hidden;
}
.mv-panel .eyebrow,
.mv-panel .eyebrow.light { color: var(--color-cream); }
.mv-panel h2 {
  color: var(--color-cream);
  max-width: 900px;
  margin-top: 18px;
}
.mv-panel p {
  color: rgba(255,248,235,0.8);
  max-width: 680px;
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.5em;
}
.mv-attribution {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}
.mv-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,248,235,0.1);
  flex-shrink: 0;
}
.mv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-cream);
  line-height: 1.2em;
}
.mv-role {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255,248,235,0.6);
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.mv-panel.vision {
  background-image: linear-gradient(rgba(20,20,20,0.7), rgba(20,20,20,0.7)), var(--mv-bg, none);
  background-size: cover;
  background-position: center;
}
@media (max-width: 1199.98px) {
  .mission-vision { padding: 80px 40px; }
  .mv-panel { padding: 48px; }
}
@media (max-width: 809.98px) {
  .mission-vision { padding: 60px 20px; }
  .mv-panel { padding: 32px 24px; }
  .mv-panel p { font-size: 16px; }
}

/* ---------- Brands section ---------- */
.brands-section {
  width: 100%;
  background: var(--color-cream);
  padding: 100px 50px;
}
.brands-section .section-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.brands-section .section-header h2,
.brands-section .section-header .supporting {
  color: var(--color-dark);
}
.brands-grid-about {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  width: 100%;
  align-items: center;
}
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 120px;
}
.brand-logo img {
  max-width: 160px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 400ms ease, opacity 400ms ease;
}
.brand-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.brands-ticker {
  width: 100%;
}
.brands-ticker .ticker-track > span {
  color: var(--color-dark);
}
.brands-ticker .ticker-track > span:not(:last-child)::after {
  content: " — ";
  margin-left: 60px;
  color: rgba(20,20,20,0.3);
}
@media (max-width: 1199.98px) {
  .brands-section { padding: 80px 40px; }
  .brands-grid-about { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .brands-section .section-inner { gap: 60px; }
}
@media (max-width: 809.98px) {
  .brands-section { padding: 60px 20px; }
  .brands-grid-about { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .brand-logo { padding: 16px; min-height: 90px; }
}

/* ---------- Process section ---------- */
.process-section {
  width: 100%;
  padding: 100px 0 0;
  background: var(--color-page);
}
.process-section .section-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 50px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.process-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.process-step {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.3fr;
  gap: 60px;
  align-items: center;
  padding: 60px 0;
  border-top: 1px solid var(--color-border);
}
.process-step:last-child {
  border-bottom: 1px solid var(--color-border);
}
.process-step-num {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.process-step-num .step-eyebrow {
  font-family: var(--font-eyebrow);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.process-step-num .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(70px, 9vw, 140px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-dark);
}
.process-step-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.process-step-text h3 {
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.04em;
}
.process-step-text p {
  max-width: 540px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.5em;
}
.process-step-image {
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 8px;
}
.process-step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1199.98px) {
  .process-section { padding: 80px 0 0; }
  .process-section .section-inner { padding: 0 40px; gap: 40px; }
  .process-step { grid-template-columns: 1fr 1.4fr; gap: 40px; padding: 48px 0; }
  .process-step-image { grid-column: 1 / -1; }
}
@media (max-width: 809.98px) {
  .process-section { padding: 60px 0 0; }
  .process-section .section-inner { padding: 0 20px; gap: 30px; }
  .process-step {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 0;
  }
  .process-step-image { grid-column: auto; }
}

/* ---------- Principles section ---------- */
.principles-section {
  width: 100%;
  padding: 100px 50px;
  background: var(--color-page);
}
.principles-section .section-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
}
.principle {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.principle .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(60px, 7vw, 100px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-dark);
}
.principle h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -0.04em;
}
.principle p {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.5em;
  max-width: 360px;
}
@media (max-width: 1199.98px) {
  .principles-section { padding: 80px 40px; }
  .principles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .principles-section .section-inner { gap: 60px; }
}
@media (max-width: 809.98px) {
  .principles-section { padding: 60px 20px; }
  .principles-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Story / Timeline ---------- */
.story-section {
  width: 100%;
  padding: 100px 50px;
  background: var(--color-page);
}
.story-section .section-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.timeline {
  position: relative;
  padding-left: 60px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  width: 2px;
  background: var(--color-border);
}
.timeline-entry {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 60px;
  align-items: flex-start;
}
.timeline-entry::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -50px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-dark);
}
.timeline-year {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-dark);
}
.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.timeline-content h3 {
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.04em;
}
.timeline-content p {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.5em;
  max-width: 640px;
}
.timeline-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  margin-top: 8px;
}
.timeline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1199.98px) {
  .story-section { padding: 80px 40px; }
  .story-section .section-inner { gap: 60px; }
  .timeline { padding-left: 48px; gap: 60px; }
  .timeline-entry { grid-template-columns: 140px 1fr; gap: 40px; }
  .timeline-year { font-size: 30px; }
}
@media (max-width: 809.98px) {
  .story-section { padding: 60px 20px; }
  .timeline { padding-left: 32px; gap: 48px; }
  .timeline::before { left: 8px; }
  .timeline-entry {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .timeline-entry::before { left: -30px; top: 8px; width: 10px; height: 10px; }
  .timeline-year { font-size: 26px; }
}

/* ---------- Team section ---------- */
.team-section {
  width: 100%;
  padding: 100px 50px;
  background: var(--color-page);
}
.team-section .section-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.team-card-media {
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  background: rgba(20,20,20,0.05);
}
.team-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 700ms var(--ease-out), filter 500ms ease;
}
.team-card:hover .team-card-media img,
.team-card.is-hover .team-card-media img {
  filter: grayscale(0);
  transform: scale(1.05);
}
.team-card-socials {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(20,20,20,0.9), transparent);
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 500ms var(--ease-out), opacity 400ms ease;
}
.team-card:hover .team-card-socials,
.team-card.is-hover .team-card-socials {
  transform: translateY(0);
  opacity: 1;
}
.team-card-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-cream);
  transition: opacity 0.2s ease;
}
.team-card-socials a:hover { opacity: 0.7; }
.team-card-socials a svg { width: 18px; height: 18px; }
.team-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2em;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-dark);
}
.team-card .role {
  font-family: var(--font-eyebrow);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(48,48,48,0.7);
}
@media (max-width: 1199.98px) {
  .team-section { padding: 80px 40px; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 809.98px) {
  .team-section { padding: 60px 20px; }
  .team-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Achievements section ---------- */
.achievements-section {
  width: 100%;
  background: var(--color-dark);
  padding: 100px 50px;
}
.achievements-section .section-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.achievements-section .section-header h2,
.achievements-section .section-header .supporting,
.achievements-section .eyebrow,
.achievements-section .eyebrow.light {
  color: var(--color-cream);
}
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}
.achievement {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,248,235,0.15);
}
.achievement .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-cream);
}
.achievement .label {
  font-family: var(--font-eyebrow);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(255,248,235,0.7);
  letter-spacing: 0.02em;
}
@media (max-width: 1199.98px) {
  .achievements-section { padding: 80px 40px; }
  .achievements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 809.98px) {
  .achievements-section { padding: 60px 20px; }
  .achievements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* ---------- Accreditations section ---------- */
.accreditations-section {
  width: 100%;
  background: var(--color-cream);
  padding: 100px 50px;
}
.accreditations-section .section-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.award-year-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.award-year {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 7vw, 80px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-dark);
}
.award-rows {
  display: flex;
  flex-direction: column;
}
.award-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: flex-start;
  border-top: 1px solid rgba(20,20,20,0.1);
  padding: 28px 0;
}
.award-row:last-child {
  border-bottom: 1px solid rgba(20,20,20,0.1);
}
.award-icon {
  width: 32px;
  height: 32px;
  color: var(--color-dark);
}
.award-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.2;
  fill: none;
}
.award-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.award-content h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.03em;
  color: var(--color-dark);
}
.award-content p {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5em;
  max-width: 680px;
}
@media (max-width: 1199.98px) {
  .accreditations-section { padding: 80px 40px; }
  .accreditations-section .section-inner { gap: 60px; }
}
@media (max-width: 809.98px) {
  .accreditations-section { padding: 60px 20px; }
  .award-year { font-size: 48px; }
  .award-row { grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 0; }
  .award-icon { width: 26px; height: 26px; }
}

/* ---------- Ticker (shared) ---------- */
.ticker {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.ticker-track {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 60px;
  white-space: nowrap;
  will-change: transform;
  padding: 24px 0;
}
.ticker-track > span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(60px, 11vw, 160px);
  line-height: 1;
  color: var(--color-cream);
  text-transform: uppercase;
}
.contact-ticker .ticker-track > span:not(:last-child)::after {
  content: " \00B7 ";
  margin-left: 60px;
  color: rgba(255,248,235,0.4);
}

/* ---------- Contact section ---------- */
.contact-section {
  width: 100%;
  background: var(--color-dark);
  color: var(--color-cream);
}
.contact-ticker {
  width: 100%;
  background: var(--color-dark);
  border-top: 1px solid rgba(255,248,235,0.08);
  border-bottom: 1px solid rgba(255,248,235,0.08);
}
.contact-body {
  width: 100%;
  padding: 100px 50px;
}
.contact-body .section-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.contact-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  width: 100%;
}
.contact-info-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,248,235,0.15);
}
.contact-info-item .label {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,248,235,0.5);
}
.contact-info-item .value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.3em;
  letter-spacing: -0.03em;
  color: var(--color-cream);
}
.contact-info-item a {
  color: var(--color-cream);
  transition: opacity 0.2s ease;
}
.contact-info-item a:hover { opacity: 0.7; }
.contact-info-item .map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-eyebrow);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(255,248,235,0.7);
  margin-top: 4px;
  transition: gap 0.3s var(--ease-out);
}
.contact-info-item .map-link:hover { gap: 12px; }

.contact-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}
.contact-form-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 700px;
}
.contact-form-header h2 {
  color: var(--color-cream);
}
.contact-form-header p {
  color: rgba(255,248,235,0.7);
  font-size: 17px;
  line-height: 1.5em;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}
.contact-form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-column: span 12;
}
.contact-form-grid .field.half { grid-column: span 6; }
.contact-form-grid .field.full { grid-column: span 12; }
.contact-form-grid label {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,248,235,0.5);
}
.contact-form-grid input,
.contact-form-grid select,
.contact-form-grid textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,248,235,0.2);
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-cream);
  transition: border-color 0.25s ease;
}
.contact-form-grid input:focus,
.contact-form-grid select:focus,
.contact-form-grid textarea:focus {
  outline: 0;
  border-bottom-color: var(--color-cream);
}
.contact-form-grid input::placeholder,
.contact-form-grid textarea::placeholder {
  color: rgba(255,248,235,0.35);
}
.contact-form-grid select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M 3.5 6 L 8 10.5 L 12.5 6' fill='transparent' stroke='%23fff8eb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 28px;
}
.contact-form-grid select option {
  background: var(--color-dark);
  color: var(--color-cream);
}
.contact-form-grid textarea {
  min-height: 100px;
  resize: vertical;
}
.contact-form-grid .submit-row {
  grid-column: span 12;
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}
@media (max-width: 1199.98px) {
  .contact-body { padding: 80px 40px; }
  .contact-body .section-inner { gap: 60px; }
  .contact-info { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 809.98px) {
  .contact-body { padding: 60px 20px; }
  .contact-form-grid { gap: 18px; }
  .contact-form-grid .field.half { grid-column: span 12; }
  .contact-form-header p { font-size: 16px; }
}

/* ---------- Site footer (About page) ---------- */
.site-footer {
  width: 100%;
  background: var(--color-dark);
  color: var(--color-cream);
  padding: 80px 50px 40px;
}
.site-footer .section-inner {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.site-footer-newsletter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,248,235,0.15);
}
.site-footer-newsletter h3 {
  color: var(--color-cream);
  font-size: clamp(20px, 2vw, 28px);
  max-width: 480px;
}
.site-footer-newsletter form {
  display: flex;
  gap: 12px;
  flex: 1;
  max-width: 480px;
}
.site-footer-newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,248,235,0.2);
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-cream);
}
.site-footer-newsletter input::placeholder { color: rgba(255,248,235,0.4); }
.site-footer-newsletter input:focus { outline: 0; border-bottom-color: var(--color-cream); }
.site-footer-newsletter button {
  padding: 12px 24px;
  background: var(--color-cream);
  color: var(--color-dark);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 54px;
  transition: opacity 0.25s ease;
}
.site-footer-newsletter button:hover { opacity: 0.85; }
.site-footer-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px;
}
.site-footer-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site-footer-col h4 {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,248,235,0.5);
}
.site-footer-col .links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer-col .links a {
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: 14px;
  transition: opacity 0.2s ease;
}
.site-footer-col .links a:hover { opacity: 0.7; }
.site-footer-social {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,248,235,0.15);
}
.site-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-cream);
  transition: color 0.2s ease;
}
.site-footer-social a:hover { color: rgba(255,248,235,0.7); }
.site-footer-social a svg { width: 20px; height: 20px; }
.site-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,248,235,0.1);
  font-family: var(--font-display);
  font-size: 13px;
  color: rgba(255,248,235,0.6);
}
.site-footer-bottom a { color: rgba(255,248,235,0.6); transition: color 0.2s ease; }
.site-footer-bottom a:hover { color: var(--color-cream); }
@media (max-width: 1199.98px) {
  .site-footer { padding: 60px 40px 30px; }
  .site-footer .section-inner { gap: 48px; }
  .site-footer-newsletter { flex-direction: column; align-items: flex-start; gap: 24px; }
  .site-footer-newsletter form { max-width: 100%; }
  .site-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (max-width: 809.98px) {
  .site-footer { padding: 50px 20px 24px; }
  .site-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-footer-social { flex-wrap: wrap; gap: 16px; }
}

/* ============================================================
   ========== ABOUT PAGE — SPEC ADDITIONS ==========
   Aliases, missing components, sticky-nav states, accordion
   ============================================================ */

/* ---------- Sticky-nav scrolled / hidden states ---------- */
.nav {
  transition: transform 400ms var(--ease-out),
              padding 300ms var(--ease-out),
              background 300ms var(--ease-out);
}
.nav.nav--scrolled {
  padding-top: 14px;
  padding-bottom: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(248, 248, 245, 0.85);
}
.nav.nav--hidden { transform: translateY(-100%); }

/* ---------- Section dark modifier ---------- */
.section--dark {
  background: var(--color-dark);
  color: var(--color-cream);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--color-cream); }
.section--dark p { color: rgba(255, 248, 235, 0.8); }
.section--dark .eyebrow,
.section--dark .eyebrow.light { color: var(--color-cream); }

/* ---------- Mission/Vision spec aliases (.mv-grid / .mv-card / .ceo) ---------- */
.mv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
}
.mv-card {
  position: relative;
  padding: 60px;
  background: rgba(255, 248, 235, 0.04);
  border: 1px solid rgba(255, 248, 235, 0.08);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mv-card .eyebrow,
.mv-card .eyebrow.light { color: var(--color-cream); }
.mv-card h2 {
  color: var(--color-cream);
  max-width: 900px;
}
.mv-card p {
  color: rgba(255, 248, 235, 0.8);
  max-width: 680px;
  font-size: 17px;
  line-height: 1.5em;
  margin-top: 6px;
}
.mv-card.vision {
  background-image: linear-gradient(rgba(20, 20, 20, 0.65), rgba(20, 20, 20, 0.65)), var(--mv-bg, none);
  background-size: cover;
  background-position: center;
}
.mv-card .ceo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.mv-card .ceo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.mv-card .ceo .ceo-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-cream);
  line-height: 1.2em;
}
.mv-card .ceo .ceo-role {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 248, 235, 0.6);
}
@media (max-width: 1199.98px) {
  .mv-grid { gap: 24px; }
  .mv-card { padding: 48px; }
}
@media (max-width: 809.98px) {
  .mv-grid { grid-template-columns: 1fr; gap: 20px; }
  .mv-card { padding: 32px 24px; }
  .mv-card p { font-size: 16px; }
}

/* ---------- Testimonial ticker (brands-section) ---------- */
.testimonial-ticker { width: 100%; }
.testimonial-ticker .ticker-track {
  display: flex;
  gap: 60px;
  width: max-content;
  will-change: transform;
  padding: 0;
}
.testimonial-ticker .ticker-track > * { flex-shrink: 0; }
.testimonial-ticker .testimonial-card {
  position: static;
  flex: 0 0 auto;
  width: 100%;
  max-width: 420px;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 32px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.testimonial-ticker .testimonial-card .quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.45em;
  letter-spacing: -0.01em;
  color: var(--color-text);
  white-space: normal;
}
.testimonial-ticker .testimonial-card .attribution {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: normal;
}

/* ---------- Process vertical divider between steps ---------- */
.process-step { position: relative; }
.process-step + .process-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}

/* ---------- Year-block alias for accreditations ---------- */
.year-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.year-block h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-dark);
  text-transform: none;
}

/* ---------- Contact info row + quote form aliases ---------- */
.contact-info-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  width: 100%;
}
.contact-info-row .contact-info-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 248, 235, 0.15);
}
.contact-info-row h3 {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 248, 235, 0.5);
}
.contact-info-row .value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.3em;
  letter-spacing: -0.03em;
  color: var(--color-cream);
}

.quote-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}
.quote-form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quote-form .field.full { grid-column: 1 / -1; }
.quote-form label {
  font-family: var(--font-eyebrow);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 248, 235, 0.5);
}
.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 248, 235, 0.2);
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-cream);
  transition: border-color 0.25s ease;
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: 0;
  border-bottom-color: var(--color-cream);
}
.quote-form input::placeholder,
.quote-form textarea::placeholder { color: rgba(255, 248, 235, 0.35); }
.quote-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M 3.5 6 L 8 10.5 L 12.5 6' fill='transparent' stroke='%23fff8eb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 28px;
}
.quote-form select option {
  background: var(--color-dark);
  color: var(--color-cream);
}
.quote-form textarea {
  min-height: 100px;
  resize: vertical;
}
.quote-form .submit-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}
@media (min-width: 1200px) {
  .quote-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .contact-info-row { grid-template-columns: 1fr; gap: 24px; }
  .quote-form { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Ticker (base — spec) ---------- */
.ticker { overflow: hidden; }
.ticker-track {
  display: flex;
  gap: 60px;
  width: max-content;
  will-change: transform;
}
.ticker-track > * { flex-shrink: 0; }

/* ---------- Accordion (FAQ-style rows) ---------- */
.accordion-item { border-top: 1px solid var(--color-border); }
.accordion-trigger {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  text-align: left;
}
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 600ms var(--ease-out);
}
.accordion-content > div { overflow: hidden; }
.accordion-item.is-open .accordion-content { grid-template-rows: 1fr; }
.accordion-icon { transition: transform 400ms var(--ease-out); }
.accordion-item.is-open .accordion-icon { transform: rotate(45deg); }

/* ---------- Responsive collapse for spec additions ---------- */
@media (max-width: 1199.98px) {
  .contact-info-row { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   ABOUT PAGE — class aliases & layout for the HTML structure
   ============================================================ */

/* Active nav state */
.nav-links a.active { color: var(--color-text); position: relative; }
.nav-links a.active::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: var(--color-text); transform-origin: left; }

/* Shared *-inner alias */
.about-hero-inner,
.about-company-inner,
.mission-vision-inner,
.brands-section-inner,
.process-inner,
.principles-inner,
.story-inner,
.team-inner,
.achievements-inner,
.accreditations-inner,
.contact-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
  width: 100%;
}

/* ---------- 2. About Hero ---------- */
.about-hero { padding: clamp(120px, 18vh, 220px) 0 clamp(60px, 9vh, 120px); text-align: center; background: var(--color-page); }
.about-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.about-hero .eyebrow { justify-content: center; }
.about-hero-title { font-size: clamp(64px, 10vw, 160px); line-height: 0.95; letter-spacing: -0.06em; text-transform: uppercase; }
.about-hero-sub { max-width: 720px; color: var(--color-text-muted); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; }

/* ---------- 3. About Our Company ---------- */
.about-company { padding: clamp(60px, 9vh, 120px) 0; background: var(--color-page); }
.about-company-inner { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.about-company-left { display: flex; flex-direction: column; gap: 28px; }
.about-company-left h2 { margin-top: 10px; }
.about-company-body { color: var(--color-text-muted); font-size: 17px; line-height: 1.55; max-width: 540px; }
.about-company-stats { display: flex; gap: 0; border-top: 1px solid var(--color-border); padding-top: 24px; margin-top: 8px; }
.about-company-stats .stat-card { flex: 1; padding: 0 24px; border-right: 1px solid var(--color-border); text-align: left; background: transparent; }
.about-company-stats .stat-card:first-child { padding-left: 0; }
.about-company-stats .stat-card:last-child { border-right: 0; }
.about-company-stats .num { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.04em; color: var(--color-dark); }
.about-company-stats .label { font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 8px; }
.about-company-image { border-radius: 4px; overflow: hidden; aspect-ratio: 4/3; }
.about-company-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 4. Mission + Vision ---------- */
.mission-vision { padding: clamp(80px, 10vh, 140px) 0; background: var(--color-dark); color: var(--color-cream); }
.mission-vision-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mv-card { position: relative; padding: clamp(40px, 5vw, 60px); border-radius: 4px; overflow: hidden; min-height: 480px; display: flex; }
.mv-mission { background: rgba(255,248,235,0.04); border: 1px solid rgba(255,248,235,0.08); }
.mv-vision { background: var(--color-dark); }
.mv-card-bg { position: absolute; inset: 0; z-index: 0; }
.mv-card-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.mv-card-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; width: 100%; align-self: flex-start; }
.mv-card-content h2 { color: var(--color-cream); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; text-transform: none; letter-spacing: -0.02em; }
.mv-card-content p { color: rgba(255,248,235,0.78); font-size: 16px; line-height: 1.55; max-width: 460px; }
.mv-attribution { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 22px; }
.mv-portrait { width: 48px; height: 48px; border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.mv-portrait img { width: 100%; height: 100%; object-fit: cover; }
.mv-attribution-meta { display: flex; flex-direction: column; gap: 2px; }
.mv-name { font-family: var(--font-display); font-weight: 500; color: var(--color-cream); font-size: 15px; }
.mv-role { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,248,235,0.6); }

/* ---------- 5. Brands ---------- */
.brands-section { padding: clamp(80px, 10vh, 140px) 0; background: var(--color-page); }
.brands-section-inner { display: flex; flex-direction: column; gap: 60px; }
.brands-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.brand-cell { display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0.55; filter: grayscale(1); transition: opacity 400ms var(--ease-out), filter 400ms var(--ease-out), transform 400ms var(--ease-out); }
.brand-cell:hover { opacity: 1; filter: grayscale(0); transform: translateY(-2px); }
.brand-cell img { max-width: 100%; max-height: 36px; object-fit: contain; }

.brands-testimonial-ticker { padding: 24px 0; }
.brands-testimonial-ticker .ticker-track { gap: 32px; }
.brands-testimonial-ticker .ticker-track > span { display: flex; gap: 32px; }
.brand-quote-card { display: flex; flex-direction: column; gap: 14px; width: 380px; border: 1px solid var(--color-border); border-radius: 4px; padding: 32px; background: var(--color-page); flex-shrink: 0; }
.brand-quote-card .quote { font-family: var(--font-display); font-size: 16px; line-height: 1.5; color: var(--color-text); }
.brand-quote-card .author { font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

/* ---------- 6. Process ---------- */
.process-section { padding: clamp(80px, 10vh, 140px) 0; background: var(--color-page); }
.process-steps { display: flex; flex-direction: column; }
.process-step { display: grid; grid-template-columns: 220px 1fr 1fr; gap: clamp(24px, 4vw, 60px); padding: clamp(40px, 5vh, 64px) 0; border-top: 1px solid var(--color-border); align-items: start; }
.process-step:last-child { border-bottom: 1px solid var(--color-border); }
.process-step-number { display: flex; flex-direction: column; gap: 8px; }
.step-label { font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.step-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(70px, 9vw, 130px); line-height: 1; letter-spacing: -0.06em; color: var(--color-dark); }
.process-step-body { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; max-width: 440px; }
.process-step-body h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; }
.process-step-body p { color: var(--color-text-muted); font-size: 16px; line-height: 1.55; }
.process-step-image { border-radius: 4px; overflow: hidden; aspect-ratio: 16/11; }
.process-step-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.process-step:hover .process-step-image img { transform: scale(1.04); }

/* ---------- 7. Principles ---------- */
.principles-section { padding: clamp(80px, 10vh, 140px) 0; background: var(--color-dark); color: var(--color-cream); }
.principles-section h2 { color: var(--color-cream); }
.principles-section .eyebrow { color: var(--color-cream); }
.principles-section .divider { background: rgba(255,248,235,0.15); }
.principles-section .divider .fill { background: rgba(255,248,235,0.5); }
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
.principle { display: flex; flex-direction: column; gap: 16px; padding: 32px 0; border-top: 1px solid rgba(255,248,235,0.15); }
.principle-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 4vw, 64px); line-height: 1; color: rgba(255,248,235,0.35); letter-spacing: -0.04em; }
.principle h3 { font-size: clamp(22px, 2vw, 28px); color: var(--color-cream); line-height: 1.1; }
.principle p { font-size: 15px; line-height: 1.55; color: rgba(255,248,235,0.75); }

/* ---------- 8. Story / Timeline ---------- */
.story-section { padding: clamp(80px, 10vh, 140px) 0; background: var(--color-white); }
.story-timeline { display: flex; flex-direction: column; margin-top: 60px; position: relative; }
.timeline-entry { display: grid; grid-template-columns: 160px 1fr; gap: 40px; padding: 40px 0; border-top: 1px solid var(--color-border); align-items: start; position: relative; }
.timeline-entry:last-child { border-bottom: 1px solid var(--color-border); }
.timeline-year { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.04em; color: var(--color-dark); padding-top: 4px; }
.timeline-card { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: center; }
.timeline-card .timeline-image { aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; }
.timeline-card .timeline-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.timeline-entry:hover .timeline-image img { transform: scale(1.04); }
.timeline-body { display: flex; flex-direction: column; gap: 12px; }
.timeline-body h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; }
.timeline-body p { color: var(--color-text-muted); font-size: 15px; line-height: 1.55; max-width: 540px; }

/* ---------- 9. Team ---------- */
.team-section { padding: clamp(80px, 10vh, 140px) 0; background: var(--color-page); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px; }
.team-card { position: relative; overflow: hidden; border-radius: 4px; background: transparent; }
.team-card-image { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 4px; }
.team-card-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 600ms var(--ease-out), transform 600ms var(--ease-out); }
.team-card:hover .team-card-image img,
.team-card.is-hover .team-card-image img { filter: grayscale(0); transform: scale(1.05); }
.team-socials { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; display: flex; gap: 8px; justify-content: center; background: linear-gradient(to top, rgba(20,20,20,0.55), transparent); transform: translateY(100%); opacity: 0; transition: transform 500ms var(--ease-out), opacity 500ms var(--ease-out); }
.team-card:hover .team-socials,
.team-card.is-hover .team-socials,
.team-card.socials-in .team-socials { transform: translateY(0); opacity: 1; }
.team-socials a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-cream); color: var(--color-dark); transition: transform 300ms var(--ease-out), background 300ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.team-socials a:hover { transform: translateY(-2px); background: var(--color-white); }
.team-socials a svg { width: 16px; height: 16px; }
.team-card-meta { padding: 20px 4px 0; display: flex; flex-direction: column; gap: 4px; }
.team-card-meta h3 { font-size: 18px; text-transform: uppercase; letter-spacing: -0.02em; }
.team-role { font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.team-blurb { font-size: 13.5px; line-height: 1.5; color: var(--color-text-muted); margin-top: 6px; }

/* ---------- 10. Achievements ---------- */
.achievements-section { padding: clamp(80px, 10vh, 140px) 0; background: var(--color-dark); color: var(--color-cream); }
.achievements-section h2, .achievements-section .eyebrow.light { color: var(--color-cream); }
.achievements-section .divider.light { background: rgba(255,248,235,0.15); }
.achievements-section .divider.light .fill { background: var(--color-cream); }
.achievements-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 60px; border-top: 1px solid rgba(255,248,235,0.15); padding-top: 32px; }
.achievements-stats .stat-card { padding: 0 24px; border-right: 1px solid rgba(255,248,235,0.15); background: transparent; text-align: left; }
.achievements-stats .stat-card:first-child { padding-left: 0; }
.achievements-stats .stat-card:last-child { border-right: 0; }
.achievements-stats .num { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.05em; color: var(--color-cream); }
.achievements-stats .label { font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,248,235,0.7); margin-top: 12px; }

/* ---------- 11. Accreditations ---------- */
.accreditations-section { padding: clamp(80px, 10vh, 140px) 0; background: var(--color-cream); }
.accreditations-section .eyebrow { color: var(--color-dark); }
.awards-year-group { display: grid; grid-template-columns: 200px 1fr; gap: 40px; padding: 48px 0; border-top: 1px solid rgba(20,20,20,0.15); align-items: start; }
.awards-year-group:last-of-type { border-bottom: 1px solid rgba(20,20,20,0.15); }
.awards-year { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -0.04em; color: var(--color-dark); }
.awards-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.award-row { display: grid; grid-template-columns: 40px 1.2fr 2fr; gap: 24px; padding: 22px 0; border-top: 1px solid rgba(20,20,20,0.12); align-items: start; }
.award-row:first-child { border-top: 0; }
.award-icon { width: 32px; height: 32px; color: var(--color-dark); display: flex; align-items: center; justify-content: center; }
.award-icon svg { width: 100%; height: 100%; }
.award-body { display: flex; flex-direction: column; gap: 6px; }
.award-body h3 { font-size: 16px; text-transform: uppercase; letter-spacing: -0.02em; color: var(--color-dark); }
.award-body p { font-size: 14px; line-height: 1.5; color: rgba(20,20,20,0.7); }

/* ---------- 12. Contact ---------- */
.contact-section { padding: 0 0 clamp(80px, 10vh, 140px); background: var(--color-dark); color: var(--color-cream); }
.contact-ticker-wrap { background: var(--color-dark); border-top: 1px solid rgba(255,248,235,0.12); border-bottom: 1px solid rgba(255,248,235,0.12); padding: 28px 0; overflow: hidden; }
.contact-ticker-wrap .ticker-track { gap: 60px; }
.contact-ticker-wrap .ticker-track > span { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 8vw, 120px); line-height: 1; letter-spacing: -0.05em; color: var(--color-cream); text-transform: uppercase; white-space: nowrap; padding-right: 60px; }

.contact-inner { padding-top: clamp(60px, 8vh, 100px); }
.contact-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 36px; }
.contact-info-item { display: flex; flex-direction: column; gap: 8px; }
.contact-info-label { display: flex; align-items: center; gap: 10px; font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,248,235,0.7); }
.contact-info-label svg { width: 16px; height: 16px; }
.contact-info-item > p { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; color: var(--color-cream); }
.contact-info-item > p a { color: inherit; }
.contact-info-item .see-map { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,248,235,0.7); margin-top: 4px; }
.contact-info-item .see-map:hover { color: var(--color-cream); }

.contact-form-wrap { display: flex; flex-direction: column; gap: 32px; padding: 40px; background: rgba(255,248,235,0.04); border: 1px solid rgba(255,248,235,0.08); border-radius: 4px; }
.contact-form-header h3 { font-size: clamp(28px, 2.6vw, 36px); color: var(--color-cream); text-transform: none; letter-spacing: -0.02em; }
.contact-form-header p { color: rgba(255,248,235,0.7); margin-top: 8px; font-size: 14px; line-height: 1.5; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,248,235,0.7); }
.contact-form input,
.contact-form select,
.contact-form textarea { background: transparent; border: 0; border-bottom: 1px solid rgba(255,248,235,0.25); padding: 10px 0 8px; font-family: var(--font-display); font-size: 15px; color: var(--color-cream); transition: border-color 300ms var(--ease-out); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,248,235,0.35); }
.contact-form select { color: var(--color-cream); }
.contact-form select option { color: var(--color-dark); background: var(--color-cream); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--color-cream); }
.contact-form textarea { min-height: 100px; resize: vertical; }
.contact-form button[type="submit"] { align-self: flex-start; margin-top: 12px; padding: 14px 32px; border-radius: 999px; background: var(--color-cream); color: var(--color-dark); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: transform 250ms var(--ease-out), background 250ms var(--ease-out); }
.contact-form button[type="submit"]:hover { transform: translateY(-2px); background: var(--color-white); }

/* ---------- Footer ticker block ---------- */
.footer-ticker-wrap { overflow: hidden; padding: 32px 0; }
.footer-ticker { display: flex; gap: 60px; width: max-content; animation: footerTicker 30s linear infinite; }
.footer-ticker-item { display: flex; align-items: center; gap: 60px; font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 8vw, 120px); line-height: 1; letter-spacing: -0.05em; color: var(--color-cream); text-transform: uppercase; white-space: nowrap; padding-right: 60px; flex-shrink: 0; }
.footer-ticker-item .dot { width: 14px; height: 14px; border-radius: 999px; background: var(--color-cream); display: inline-block; flex-shrink: 0; }
@keyframes footerTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- About page responsive ---------- */
@media (max-width: 1199.98px) {
  .about-company-inner { grid-template-columns: 1fr; }
  .mission-vision-inner { grid-template-columns: 1fr; }
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
  .process-step { grid-template-columns: 160px 1fr; }
  .process-step-image { grid-column: 1 / -1; }
  .principles-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .achievements-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .achievements-stats .stat-card:nth-child(2) { border-right: 0; }
  .contact-row { grid-template-columns: 1fr; }
  .awards-year-group { grid-template-columns: 1fr; gap: 16px; }
  .timeline-entry { grid-template-columns: 120px 1fr; gap: 24px; }
  .timeline-card { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 809.98px) {
  .about-hero { padding-top: 110px; }
  .about-hero-title { font-size: clamp(48px, 16vw, 96px); }
  .about-company-stats { flex-direction: column; gap: 16px; }
  .about-company-stats .stat-card { padding: 0; border-right: 0; border-bottom: 1px solid var(--color-border); padding-bottom: 16px; }
  .about-company-stats .stat-card:last-child { border-bottom: 0; }
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step { grid-template-columns: 1fr; gap: 16px; }
  .team-grid { grid-template-columns: 1fr; gap: 32px; }
  .achievements-stats { grid-template-columns: 1fr; }
  .achievements-stats .stat-card { border-right: 0; border-bottom: 1px solid rgba(255,248,235,0.15); padding-bottom: 24px; padding-left: 0; }
  .achievements-stats .stat-card:last-child { border-bottom: 0; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .timeline-entry { grid-template-columns: 1fr; }
}
}

/* ====== BAND / WATERMARK additions from current about-page work ======
   MISSION + VISION as two distinct full-width bands
   - .band--mission : dark bg, image LEFT, ghosted text watermark
   - .band--vision  : cream bg, image RIGHT, bright white watermark
   =========================================================== */
.band {
  position: relative;
  width: 100%;
  min-height: 720px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.band-image { position: relative; z-index: 1; height: 100%; min-height: 600px; }
.band-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-image--right { grid-column: 2; }

.band-content {
  position: relative;
  z-index: 4;
  padding: clamp(48px, 7vw, 110px);
  max-width: 640px;
}
.band-content--right { grid-column: 2; justify-self: end; }
.band-content--left { grid-column: 1; }

/* Give the content a small backdrop on the LIGHT (vision) band so the
   body copy stays legible if a watermark line happens to sit under it.
   Subtle: matches the cream bg so it's invisible unless overlapping. */
.band--vision .band-content { background: linear-gradient(180deg, rgba(248,248,245,0.92) 0%, rgba(248,248,245,0.96) 100%); border-radius: 4px; }
.band--vision .band-content--left { padding-left: clamp(48px, 7vw, 110px); }

.band-content h2 {
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-top: 16px;
}
.band-content p {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.55;
  max-width: 460px;
}

/* Watermark: giant section name stack, full bleed across the band.
   Sized so 3 instances fit inside a 720px band without overflowing,
   with breathing room between each line. */
.band-watermark {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: clamp(40px, 5vw, 90px);
  padding-right: clamp(40px, 5vw, 90px);
  gap: 8px;
  pointer-events: none;
  overflow: hidden;
}
.band-watermark span {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 10vw, 150px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  margin: 0;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), opacity 800ms ease-out;
  transition-delay: calc(var(--w, 0) * 90ms);
}
.band-watermark span:nth-child(1) { --w: 0; }
.band-watermark span:nth-child(2) { --w: 1; }
.band-watermark span:nth-child(3) { --w: 2; }
.band-watermark span:nth-child(4) { --w: 3; display: none; } /* 3 instances is plenty */
.band[data-animate].is-in .band-watermark span { transform: translateY(0); opacity: 1; }

/* DARK band (Mission): scrim over image so right content reads, ghosted watermark */
.band--mission { background: var(--color-dark); color: var(--color-cream); }
.band--mission .band-image { grid-column: 1; }
.band--mission::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,20,20,0) 0%, rgba(20,20,20,0.55) 40%, rgba(20,20,20,0.95) 65%, var(--color-dark) 100%);
  z-index: 2;
  pointer-events: none;
}
.band--mission .band-watermark { z-index: 2; }
.band-watermark--dark span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,248,235,0.06);
  -webkit-text-fill-color: rgba(255,248,235,0.045);
}
.band--mission .band-content h2 { color: var(--color-cream); }
.band--mission .band-content p { color: rgba(255,248,235,0.85); }

/* LIGHT band (Vision): cream bg, BRIGHT white watermark, image on right */
.band--vision { background: var(--color-page); color: var(--color-dark); }
.band--vision .band-content h2 { color: var(--color-dark); }
.band--vision .band-content p { color: var(--color-text-muted); }
.band-watermark--light span {
  color: rgba(255,255,255,0.85);
  -webkit-text-fill-color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 0 rgba(20,20,20,0.03);
}
/* On the vision band, the watermark sits BEHIND the image on the right
   but in FRONT of the cream bg on the left. Image is z:1, watermark z:2,
   content z:3. The watermark thus appears over the image where it overlaps. */

/* Re-use mv-attribution / mv-portrait styles already in place */

/* Responsive: stack the band vertically on smaller viewports */
@media (max-width: 1199.98px) {
  .band { grid-template-columns: 1fr; min-height: auto; }
  .band-image { grid-column: 1 !important; min-height: 360px; aspect-ratio: 4/3; }
  .band-image--right { grid-row: 1; }
  .band-content { grid-column: 1 !important; max-width: 100%; padding: clamp(40px, 6vw, 80px); }
  .band-content--right { justify-self: stretch; }
  .band-watermark span { font-size: clamp(80px, 14vw, 160px); }
}
@media (max-width: 809.98px) {
  .band-watermark { display: none; }
  .band--mission::before { background: linear-gradient(180deg, rgba(20,20,20,0.4) 0%, rgba(20,20,20,0.9) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .band-watermark span { transform: none; opacity: 1; transition: none; }
}

/* ===========================================================
   about-company-media: 2-column grid (image left, video right)
   This was an orphan class — adding proper layout now.
   =========================================================== */
.about-company-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 32px);
  margin-top: clamp(40px, 5vw, 80px);
  padding: 0 clamp(20px, 5vw, 80px);
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.about-company-media .about-company-image {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
}
.about-company-media .about-company-image img,
.about-company-media .about-company-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* On narrower viewports, stack vertically */
@media (max-width: 809.98px) {
  .about-company-media { grid-template-columns: 1fr; gap: 16px; }
}

/* ===========================================================
   Mission/Vision band entrance: ensure the band itself animates
   in via the same data-animate="fade-up" engine — confirm the
   transform/opacity transition fires when band enters viewport.
   =========================================================== */
.band[data-animate] {
  /* Match the engine's default initial state but with a softer rise */
  transform: perspective(1200px) translateY(40px);
  opacity: 0;
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), opacity 800ms ease-out;
  will-change: transform, opacity;
}
.band[data-animate].is-in {
  transform: perspective(1200px) translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .band[data-animate] { transform: none; opacity: 1; transition: none; }
}

/* ===========================================================
   FIXES: story-pin sizing + brand quote card text wrap
   These were lost in the folder merge; restore now.
   =========================================================== */

/* Story horizontal pin needs 600vh runway so the track has scroll
   distance to translate horizontally as user scrolls vertically. */
.story-section.story-pinned { position: relative; }
.story-section.story-pinned .story-pin-outer {
  position: relative;
  height: 600vh;
  min-height: 600vh;
}
.story-section.story-pinned .story-pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.story-section.story-pinned .story-pin-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  height: 100%;
  justify-content: center;
}
.story-section.story-pinned .story-track {
  display: flex;
  flex-direction: row;
  gap: 32px;
  flex-shrink: 0;
  will-change: transform;
  align-items: stretch;
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
}

/* Below 810px: drop the pin, let the timeline stack vertically */
@media (max-width: 809.98px) {
  .story-section.story-pinned .story-pin-outer { height: auto; min-height: auto; }
  .story-section.story-pinned .story-pin-inner { position: static; height: auto; }
  .story-section.story-pinned .story-track {
    flex-direction: column;
    gap: 40px;
    transform: none !important;
  }
}

/* Brand quote cards: force proper text wrap, min-height for consistency */
.brand-quote-card {
  width: 380px !important;
  min-height: 180px;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  background: var(--color-page);
  border: 1px solid rgba(20,20,20,0.1);
  border-radius: 8px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.brand-quote-card .quote {
  display: block !important;
  width: 100%;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: -0.005em;
  margin: 0;
}
.brand-quote-card .author {
  display: block !important;
  width: 100%;
  font-family: var(--font-eyebrow);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

/* Brand testimonial ticker layout: gap between cards inside ticker group */
.brands-testimonial-ticker .ticker-track,
.brands-testimonial-ticker .ticker-track > * {
  display: flex !important;
  flex-direction: row;
  gap: 24px;
  align-items: stretch;
}
.brands-testimonial-ticker .ticker-track > .ticker-group,
.brands-testimonial-ticker .ticker-track > span {
  flex-shrink: 0;
}

/* ============================================================
   Legal pages — Privacy Policy & Terms & Conditions
   ============================================================ */
.page-legal { background: var(--color-page); }
.legal-hero {
  padding: 130px 50px 46px;
  text-align: center;
}
.legal-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.legal-hero h1 {
  font-size: clamp(40px, 5vw, 70px);
  max-width: 16ch;
  text-wrap: balance;
}
.legal-hero-sub {
  max-width: 640px;
  font-size: 18px;
  color: var(--color-text-muted);
}
.legal-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-50);
}
.legal-section { padding: 16px 50px 110px; }
.legal-wrap { max-width: 860px; margin: 0 auto; }
.legal-intro {
  font-size: 18px;
  line-height: 1.65em;
  color: var(--color-text-muted);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-border);
}
.legal-block { padding: 30px 0; border-bottom: 1px solid var(--color-border); }
.legal-block h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: none;
  margin-bottom: 14px;
}
.legal-num {
  font-family: var(--font-eyebrow);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text-50);
}
.legal-block p { color: var(--color-text-muted); line-height: 1.7em; margin-bottom: 12px; }
.legal-block p:last-child { margin-bottom: 0; }
.legal-block ul { margin: 0 0 12px; padding-left: 20px; color: var(--color-text-muted); line-height: 1.7em; }
.legal-block li { margin-bottom: 8px; }
.legal-block strong { color: var(--color-text); font-weight: 600; }
.legal-contact {
  margin-top: 40px;
  padding: 34px 36px;
  border-radius: 18px;
  background: var(--color-dark);
  color: var(--color-cream);
}
.legal-contact h2 {
  color: var(--color-cream);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.legal-contact p { color: var(--color-cream-50); line-height: 1.7em; margin-bottom: 6px; }
.legal-contact a { color: var(--color-cream); text-decoration: underline; text-underline-offset: 3px; }
.legal-contact a:hover { opacity: 0.75; }
@media (max-width: 809.98px) {
  .legal-hero { padding: 100px 20px 36px; }
  .legal-section { padding: 8px 20px 72px; }
  .legal-contact { padding: 26px 22px; }
}

/* ============================================================
   Software ticker — continuous horizontal scroll
   Grey/desaturated by default; hover the strip to pause and colourize.
   ============================================================ */
.software-section { padding: 100px 0 90px; background: var(--color-page); overflow: hidden; }
.software-section-inner { max-width: var(--max-wide); margin: 0 auto 40px; padding: 0 50px; }
.software-track-wrap { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.software-track {
  display: flex;
  gap: 64px;
  width: max-content;
  align-items: center;
  animation: software-marquee 30s linear infinite;
  will-change: transform;
}
/* Marquee scrolls continuously like the footer ticker (no pause-on-hover). */
.software-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.3vw, 32px);
  letter-spacing: -0.015em;
  color: rgba(48, 48, 48, 0.32);
  filter: grayscale(1);
  transition: color 0.45s var(--ease-out), filter 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  white-space: nowrap;
  user-select: none;
}
.software-track-wrap:hover .software-item {
  color: var(--color-dark);
  filter: grayscale(0);
}
.software-track-wrap:hover .software-item:hover { transform: translateY(-2px); }
.software-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
@keyframes software-marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 809.98px) {
  .software-section { padding: 70px 0 60px; }
  .software-section-inner { padding: 0 20px; margin-bottom: 28px; }
  .software-track { gap: 40px; animation-duration: 40s; }
  .software-item { font-size: 20px; }
  .software-dot { width: 8px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .software-track { animation: none; }
  .software-item { color: var(--color-dark); filter: grayscale(0); }
}

/* ============================================================
   FAQ accordion — pill list with chevron toggle
   ============================================================ */
.faq-section { padding: 110px 50px 100px; background: var(--color-page); }
.faq-inner { max-width: 980px; margin: 0 auto; }
.faq-inner .section-header { margin-bottom: 50px; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.faq-item:hover { border-color: rgba(20, 20, 20, 0.22); }
.faq-item[open] { border-color: rgba(20, 20, 20, 0.3); box-shadow: 0 10px 24px rgba(20, 20, 20, 0.05); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-dark);
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  margin-right: 6px;
  transition: transform 0.35s var(--ease-out);
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-answer {
  padding: 0 28px 24px;
  color: var(--color-text-muted);
  line-height: 1.65em;
  font-size: 15px;
  max-width: 720px;
}
@media (max-width: 809.98px) {
  .faq-section { padding: 70px 20px 80px; }
  .faq-inner .section-header { margin-bottom: 32px; }
  .faq-item summary { padding: 18px 22px; font-size: 15px; gap: 12px; }
  .faq-answer { padding: 0 22px 18px; font-size: 14px; }
}

/* ============================================================
   Footer software-logo ticker — replaces the old text ticker
   on every page; greyscale + low-opacity by default, hover the
   strip to pause the marquee and restore full colour.
   ============================================================ */
.footer-ticker--logos { gap: 80px; }
.footer-ticker--logos .footer-ticker-item {
  gap: 80px;
  padding-right: 80px;
  font-size: 0;            /* drop inherited 120px text size */
  letter-spacing: 0;
  text-transform: none;
}
.footer-ticker--logos .footer-ticker-item img {
  height: 84px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  filter: grayscale(1) brightness(1.25);
  opacity: 0.55;
  transition: filter 0.45s var(--ease-out), opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.footer-ticker-wrap:hover .footer-ticker--logos { animation-play-state: paused; }
.footer-ticker-wrap:hover .footer-ticker--logos .footer-ticker-item img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}
.footer-ticker--logos .footer-ticker-item img:hover { transform: translateY(-4px); }
/* Blend fix: the logo PNGs have a near-white (#fdfefe) background baked in, so the strip uses that
   same near-white. The logo backgrounds then disappear into the strip (no boxes); logos sit in grey
   and show true colours on hover. */
.footer-ticker-wrap:has(.footer-ticker--logos) { background: #fdfdfd; height: 132px; }
.footer-ticker--logos .footer-ticker-item img { filter: grayscale(1); opacity: 0.78; }
.footer-ticker-wrap:hover .footer-ticker--logos .footer-ticker-item img { filter: grayscale(0); opacity: 1; }
@media (max-width: 809.98px) {
  .footer-ticker--logos { gap: 50px; }
  .footer-ticker--logos .footer-ticker-item { gap: 50px; padding-right: 50px; }
  .footer-ticker--logos .footer-ticker-item img { height: 56px; max-width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-ticker--logos { animation: none; }
  .footer-ticker--logos .footer-ticker-item img { filter: grayscale(0); opacity: 1; }
}

/* ============================================================
   About-page "Tools we work with" ticker — image variant.
   Same hover-to-pause + colourize treatment on a light background.
   ============================================================ */
.software-track .software-logo-item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.45s var(--ease-out), opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.software-track-wrap:hover .software-logo-item {
  filter: grayscale(0);
  opacity: 1;
}
.software-track-wrap:hover .software-logo-item:hover { transform: translateY(-3px); }
.software-logo-item img {
  height: 72px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}
@media (max-width: 809.98px) {
  .software-logo-item img { height: 48px; max-width: 160px; }
}


/* ============================================================
   Site tweaks: bigger marquee logos, full-width white logo strip,
   and a light (cream) Achievements & Milestones section.
   ============================================================ */
.footer-ticker--logos .footer-ticker-item img { height: 100px; max-width: 240px; }
.footer { padding-top: 0; }
.footer-ticker-wrap:has(.footer-ticker--logos) { max-width: none; width: 100%; background: #fdfdfd; height: 160px; }
.achievements-section { background: var(--color-white); color: var(--color-dark); }
.achievements-section h2 { color: var(--color-dark); }
.achievements-section .num, .achievements-section .label { color: var(--color-dark); }


/* Force light Achievements section + flush white logo strip (override merged dark rules) */
#achievements.achievements-section { background: var(--color-white) !important; color: var(--color-dark) !important; }
#achievements h2, #achievements .num, #achievements .label, #achievements .eyebrow { color: var(--color-dark) !important; }
#achievements .divider .fill { background: var(--color-dark) !important; }
.footer { padding-top: 0 !important; }

/* Pure-white logo strip (footer + about contact band) */
.footer-ticker-wrap:has(.footer-ticker--logos) { background: #ffffff !important; height: 170px; }

/* Taller white logo strip: more white space around/above the logos */
.footer-ticker-wrap:has(.footer-ticker--logos) { height: 200px; }

/* === Achievements & Milestones — light (white) theme override === */
.achievements-section { background: #ffffff; color: var(--color-dark); }
.achievements-section h2,
.achievements-section .section-header h2 { color: var(--color-dark); }
.achievements-section .eyebrow { color: var(--color-dark); }
.achievements-section .divider { background: rgba(20,20,20,0.12); }
.achievements-section .divider .fill { background: var(--color-dark); }
.achievements-stats .stat-card { border-top-color: rgba(20,20,20,0.14); }
.achievements-stats .stat-card .num { color: var(--color-dark); }
.achievements-stats .stat-card .label { color: var(--color-text-muted); }

/* === Footer: socials relocated under Terms & Conditions === */
.footer-legal-socials { display: flex; gap: 10px; margin-top: 4px; }
.footer-legal-socials .social-link { padding: 0; gap: 0; }


/* === Testimonials: quote + star rating (sourced from legacy site, no photos/names) === */
.testimonial-carousel-wrap { height: 320px; }
.testimonial-card { width: 380px; justify-content: center; gap: 20px; padding: 34px 32px; border: 1px solid var(--color-border); }
.testimonial-stars { display: inline-flex; gap: 5px; color: #e0a02a; }
.testimonial-stars svg { width: 19px; height: 19px; }
.testimonial-quote { font-size: 17px; line-height: 1.62; color: var(--color-dark); margin: 0; }
@media (max-width: 809.98px) {
  .testimonial-carousel-wrap { height: 360px; }
  .testimonial-card { width: 290px; padding: 28px 24px; }
  .testimonial-quote { font-size: 15.5px; }
}

/* Email link under the Call CTA (contact + career) */
.contact-side-mail { display: inline-block; margin-top: 14px; font-family: var(--font-display); font-size: 15px; color: var(--color-dark); text-decoration: underline; text-underline-offset: 3px; }
.contact-side-mail:hover { opacity: 0.6; }


/* === Blog article (detail page) === */
.blog-article { max-width: 860px; margin: 0 auto; padding: 130px 24px 90px; }
.blog-article-crumb { display:inline-flex; align-items:center; gap:6px; color:var(--color-text-muted); text-decoration:none; font-size:14px; font-family:var(--font-display); }
.blog-article-crumb:hover { color:var(--color-dark); }
.blog-article-head .blog-category { display:inline-block; margin:22px 0 14px; font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-text-muted); }
.blog-article-head h1 { font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4.4vw,52px); letter-spacing:-0.03em; line-height:1.08; color:var(--color-dark); }
.blog-article-meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:20px; color:var(--color-text-muted); font-size:14px; }
.blog-article-meta span { display:inline-flex; align-items:center; gap:7px; }
.blog-article-meta svg { width:15px; height:15px; }
.blog-article-hero { margin:36px 0 44px; border-radius:10px; overflow:hidden; }
.blog-article-hero img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
.blog-article-body h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(22px,2.6vw,30px); letter-spacing:-0.01em; color:var(--color-dark); margin:42px 0 14px; }
.blog-article-body p { color:var(--color-text-muted); line-height:1.8; font-size:clamp(16px,1.6vw,18px); margin-bottom:18px; }
.blog-article-body ul { margin:0 0 18px; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.blog-article-body li { position:relative; padding-left:24px; color:var(--color-text-muted); line-height:1.65; font-size:clamp(15px,1.5vw,17px); }
.blog-article-body li::before { content:''; position:absolute; left:2px; top:9px; width:7px; height:7px; border:1.5px solid var(--color-dark); border-radius:50%; opacity:0.7; }
.blog-article-cta { background:var(--color-dark); color:var(--color-cream); border-radius:12px; padding:40px; margin-top:54px; }
.blog-article-cta h3 { font-family:var(--font-display); font-weight:500; font-size:clamp(20px,2.4vw,28px); color:var(--color-cream); margin-bottom:12px; }
.blog-article-cta p { color:rgba(255,248,235,0.75); line-height:1.7; margin-bottom:24px; }
.blog-article-related { max-width:860px; margin:80px auto 0; }
.blog-article-related > h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(22px,2.4vw,28px); color:var(--color-dark); margin-bottom:26px; }
.blog-related-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:700px){ .blog-article{ padding:110px 20px 60px; } .blog-article-cta{ padding:28px; } .blog-related-grid{ grid-template-columns:1fr; } }


/* ═══════════════════════════════════════════════════════════
   CASE STUDY PAGES
   ═══════════════════════════════════════════════════════════ */
.cs-hero { position:relative; height:70vh; min-height:420px; overflow:hidden; }
.cs-hero-image { position:absolute; inset:0; }
.cs-hero-image img { width:100%; height:100%; object-fit:cover; }
.cs-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.2) 60%, transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:60px 80px; }
.cs-tag { display:inline-block; padding:4px 14px; border:1px solid rgba(255,255,255,.5); border-radius:100px; color:#fff; font-size:12px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; }
.cs-hero-title { color:#fff; font-size:clamp(1.8rem,4vw,3rem); line-height:1.15; max-width:800px; margin-bottom:12px; }
.cs-hero-tagline { color:rgba(255,255,255,.75); font-size:17px; max-width:600px; }

.cs-meta-bar { background:var(--color-dark); color:#fff; }
.cs-meta-bar-inner { max-width:var(--max-content); margin:0 auto; padding:24px 50px; display:flex; gap:0; }
.cs-meta-item { flex:1; padding:0 24px; border-right:1px solid rgba(255,255,255,.12); }
.cs-meta-item:first-child { padding-left:0; }
.cs-meta-item:last-child { border-right:none; }
.cs-meta-item .label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.5); margin-bottom:4px; }
.cs-meta-item strong { font-size:15px; font-family:var(--font-display); }

.cs-body { padding:80px 0 60px; }
.cs-body-inner { max-width:860px; margin:0 auto; padding:0 50px; }
.cs-section { margin-bottom:64px; }
.cs-section .eyebrow { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--color-text-muted); margin-bottom:10px; }
.cs-section h2 { font-size:clamp(1.4rem,2.5vw,2rem); margin-bottom:20px; }
.cs-section p { color:var(--color-text-muted); line-height:1.75; font-size:17px; }
.cs-solution-list { margin:20px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.cs-solution-list li { display:flex; align-items:flex-start; gap:10px; color:var(--color-text-muted); font-size:16px; line-height:1.6; }
.cs-solution-list li::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--color-accent,#141414); flex-shrink:0; margin-top:8px; }

.cs-results { background:transparent; }
.cs-results h2 { margin-bottom:30px; }
.cs-results-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:24px; }
.cs-result-card { border:1px solid var(--color-border); border-radius:8px; padding:24px 20px; text-align:center; }
.cs-result-num { font-size:2.2rem; font-weight:700; font-family:var(--font-display); line-height:1; }
.cs-result-label { font-size:13px; color:var(--color-text-muted); margin-top:8px; line-height:1.4; }

.cs-testimonial { background:var(--color-surface-muted,#f7f7f7); border-radius:12px; padding:48px 40px; position:relative; margin-top:16px; }
.cs-quote-icon { position:absolute; top:24px; left:32px; opacity:.12; }
.cs-testimonial-quote { font-size:19px; font-style:italic; line-height:1.7; color:var(--color-dark); margin:0 0 20px; }
.cs-testimonial-cite { font-size:14px; font-family:var(--font-display); color:var(--color-text-muted); font-style:normal; }
.cs-testimonial-cite span { color:var(--color-dark); }

/* Case Studies Index */
.cs-index-section { padding:40px 0 100px; }
.cs-index-inner { max-width:var(--max-content); margin:0 auto; padding:0 50px; display:flex; flex-direction:column; gap:60px; }
.cs-index-card { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--color-border); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .25s; }
.cs-index-card:hover { box-shadow:0 8px 40px rgba(0,0,0,.1); }
.cs-index-card:nth-child(even) { direction:rtl; }
.cs-index-card:nth-child(even) .cs-index-body { direction:ltr; }
.cs-index-image { aspect-ratio:4/3; overflow:hidden; }
.cs-index-image img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.cs-index-card:hover .cs-index-image img { transform:scale(1.04); }
.cs-index-body { direction:ltr; padding:40px; display:flex; flex-direction:column; justify-content:center; }
.cs-index-title { font-size:clamp(1.1rem,1.8vw,1.5rem); margin:12px 0 16px; line-height:1.25; }
.cs-index-excerpt { color:var(--color-text-muted); font-size:15px; line-height:1.7; flex:1; }
.cs-index-meta { display:flex; gap:16px; margin:16px 0; }
.cs-index-meta span { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); border:1px solid var(--color-border); padding:3px 10px; border-radius:100px; }
.cs-index-link { font-size:14px; font-family:var(--font-display); display:inline-flex; align-items:center; gap:6px; color:var(--color-dark); margin-top:8px; }

/* ═══════════════════════════════════════════════════════════
   STICKY QUOTE BUTTON (CRO)
   ═══════════════════════════════════════════════════════════ */
.sticky-quote-btn { position:fixed; bottom:28px; right:28px; z-index:900; display:inline-flex; align-items:center; gap:9px; background:var(--color-dark,#141414); color:#fff; padding:13px 22px; border-radius:100px; font-family:var(--font-display); font-size:14px; font-weight:600; text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,.28); opacity:0; transform:translateY(14px); transition:opacity .3s, transform .3s, background .2s; pointer-events:none; letter-spacing:.01em; }
.sticky-quote-btn.visible { opacity:1; transform:translateY(0); pointer-events:all; }
.sticky-quote-btn:hover { background:#333; }
@media (max-width:600px) { .sticky-quote-btn { bottom:16px; right:16px; padding:11px 18px; font-size:13px; } }

/* ═══════════════════════════════════════════════════════════
   EXIT-INTENT POPUP (CRO)
   ═══════════════════════════════════════════════════════════ */
.exit-popup-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9900; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.exit-popup-overlay.active { opacity:1; visibility:visible; }
.exit-popup { background:#fff; color:#141414; max-width:480px; width:100%; padding:44px 40px; border-radius:12px; position:relative; box-shadow:0 24px 80px rgba(0,0,0,.25); }
.exit-popup-close { position:absolute; top:16px; right:16px; background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:#999; padding:4px 8px; }
.exit-popup-close:hover { color:#141414; }
.exit-popup-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:#888; margin-bottom:10px; }
.exit-popup-title { font-size:1.6rem; font-family:var(--font-display); margin:0 0 14px; }
.exit-popup-text { font-size:15px; color:#555; line-height:1.65; margin-bottom:24px; }
.exit-popup-form { display:flex; flex-direction:column; gap:12px; }
.exit-popup-form input[type="email"] { padding:13px 16px; border:1.5px solid #ddd; border-radius:8px; font-size:15px; outline:none; font-family:inherit; transition:border-color .2s; }
.exit-popup-form input[type="email"]:focus { border-color:#141414; }
.exit-popup-form .btn { width:100%; justify-content:center; }
.exit-popup-note { font-size:12px; color:#aaa; margin-top:10px; text-align:center; }

/* ═══════════════════════════════════════════════════════════
   QUOTE FORM (request-a-quote.html)
   ═══════════════════════════════════════════════════════════ */
.form-row--2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-group label { font-size:13px; font-family:var(--font-display); font-weight:600; letter-spacing:.03em; }
.form-group input, .form-group select, .form-group textarea { padding:12px 14px; border:1.5px solid var(--color-border,#e0e0e0); border-radius:8px; font-size:15px; font-family:inherit; background:var(--color-bg,#fff); color:var(--color-dark,#141414); outline:none; transition:border-color .2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--color-dark,#141414); }
.form-group textarea { resize:vertical; min-height:110px; }
.form-group select { cursor:pointer; }
.form-submit-btn { margin-top:8px; }

/* ═══════════════════════════════════════════════════════════
   TRUST BAR (index + quote page)
   ═══════════════════════════════════════════════════════════ */
.trust-bar { border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); padding:32px 0; }
.trust-bar-inner { max-width:var(--max-content); margin:0 auto; padding:0 50px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--color-text-muted); }
.trust-item svg { flex-shrink:0; }

/* btn-outline variant */
.btn-outline { background:transparent; border:1.5px solid var(--color-dark,#141414); color:var(--color-dark,#141414); }
.btn-outline:hover { background:var(--color-dark,#141414); color:#fff; }

@media (max-width:900px) {
  .cs-index-card { grid-template-columns:1fr; direction:ltr !important; }
  .cs-index-card:nth-child(even) { direction:ltr; }
  .cs-meta-bar-inner { flex-wrap:wrap; gap:16px; }
  .cs-meta-item { border-right:none; padding-left:0; }
  .cs-hero-overlay { padding:40px 30px; }
  .form-row--2 { grid-template-columns:1fr; }
}


/* ═══════════════════════════════════════════════════════════
   GUIDE / PILLAR PAGES (Month 5)
   ═══════════════════════════════════════════════════════════ */
.guide-hero { padding:130px 0 40px; border-bottom:1px solid var(--color-border); }
.guide-hero-inner { max-width:860px; margin:0 auto; padding:0 50px; }
.guide-crumb { font-size:13px; color:var(--color-text-muted); margin-bottom:20px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.guide-crumb a { color:var(--color-text-muted); text-decoration:none; }
.guide-crumb a:hover { color:var(--color-dark); }
.guide-hero h1 { font-size:clamp(2rem,4.5vw,3.2rem); line-height:1.12; margin:12px 0 18px; }
.guide-lede { font-size:19px; line-height:1.6; color:var(--color-text-muted); max-width:680px; }
.guide-hero-meta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:24px; font-size:13px; color:var(--color-text-muted); }
.guide-hero-meta .dot { opacity:.5; }

.guide-layout { max-width:var(--max-content); margin:0 auto; padding:50px 50px 40px; display:grid; grid-template-columns:240px 1fr; gap:60px; align-items:start; }
.guide-toc { position:relative; }
.guide-toc-sticky { position:sticky; top:110px; }
.guide-toc-label { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--color-text-muted); display:block; margin-bottom:14px; }
.guide-toc ol { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:2px; counter-reset:toc; }
.guide-toc li { counter-increment:toc; }
.guide-toc a { display:block; padding:7px 0 7px 26px; font-size:14px; color:var(--color-text-muted); text-decoration:none; border-left:2px solid var(--color-border); position:relative; transition:color .2s, border-color .2s; line-height:1.35; }
.guide-toc a::before { content:counter(toc,decimal-leading-zero); position:absolute; left:8px; font-size:10px; top:9px; opacity:.6; }
.guide-toc a:hover, .guide-toc a.is-active { color:var(--color-dark); border-color:var(--color-dark); }
.btn-sm { padding:9px 16px; font-size:13px; }
.guide-toc-cta { width:100%; justify-content:center; }

.guide-content { max-width:720px; min-width:0; }
.guide-section { margin-bottom:46px; scroll-margin-top:100px; }
.guide-section h2 { font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:18px; line-height:1.2; }
.guide-section p { font-size:17px; line-height:1.78; color:var(--color-text-muted); margin-bottom:16px; }
.guide-section p a, .calc-explainer a, .chk-done a { color:var(--color-dark); text-decoration:underline; text-underline-offset:2px; }
.guide-bullets, .guide-numbered { margin:0 0 16px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.guide-bullets li { position:relative; padding-left:26px; font-size:16px; line-height:1.65; color:var(--color-text-muted); }
.guide-bullets li::before { content:''; position:absolute; left:4px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--color-dark); }
.guide-bullets li strong, .guide-numbered li strong { color:var(--color-dark); }
.guide-numbered { counter-reset:gn; }
.guide-numbered li { position:relative; padding-left:38px; font-size:16px; line-height:1.65; color:var(--color-text-muted); counter-increment:gn; }
.guide-numbered li::before { content:counter(gn); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:var(--color-dark); color:#fff; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); }

.guide-takeaways { background:var(--color-surface-muted,#f7f7f7); border-radius:12px; padding:36px 36px 32px; margin:8px 0 46px; }
.guide-takeaways h2 { font-size:1.4rem; margin-bottom:18px; }
.guide-takeaway-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.guide-takeaway-list li { position:relative; padding-left:30px; font-size:16px; line-height:1.6; }
.guide-takeaway-list li::before { content:''; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:var(--color-dark); -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l4 4 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l4 4 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat; }

.guide-faq { display:flex; flex-direction:column; gap:10px; }
.guide-faq-item { border:1px solid var(--color-border); border-radius:10px; padding:0 20px; }
.guide-faq-item summary { cursor:pointer; padding:18px 0; font-family:var(--font-display); font-weight:600; font-size:16px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.guide-faq-item summary::-webkit-details-marker { display:none; }
.guide-faq-item summary::after { content:'+'; font-size:22px; font-weight:400; flex-shrink:0; transition:transform .2s; }
.guide-faq-item[open] summary::after { transform:rotate(45deg); }
.guide-faq-a { padding:0 0 18px; }
.guide-faq-a p { font-size:15px; line-height:1.7; color:var(--color-text-muted); margin:0; }

.guide-cta { margin-top:40px; }
.guide-cta-card { background:var(--color-dark); color:#fff; border-radius:14px; padding:48px 44px; text-align:center; }
.guide-cta-card h2 { color:#fff; font-size:1.7rem; margin-bottom:12px; }
.guide-cta-card p { color:rgba(255,255,255,.72); font-size:16px; line-height:1.6; max-width:520px; margin:0 auto 26px; }
.guide-cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.guide-cta-card .btn-outline { border-color:rgba(255,255,255,.6); color:#fff; }
.guide-cta-card .btn-outline:hover { background:#fff; color:var(--color-dark); }

/* ═══════════════════════════════════════════════════════════
   COST CALCULATOR (Month 5)
   ═══════════════════════════════════════════════════════════ */
.calc-wrap { max-width:var(--max-content); margin:0 auto; padding:50px 50px 30px; }
.calc-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; }
.calc-inputs { display:flex; flex-direction:column; gap:26px; }
.calc-field { display:flex; flex-direction:column; gap:10px; }
.calc-field label { font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.4; }
.calc-hint { display:block; font-weight:400; font-size:12.5px; color:var(--color-text-muted); margin-top:3px; font-family:var(--font-body,inherit); }
.calc-field select, .calc-field input[type="number"] { padding:12px 14px; border:1.5px solid var(--color-border); border-radius:8px; font-size:15px; font-family:inherit; background:#fff; color:var(--color-dark); outline:none; }
.calc-field select:focus, .calc-field input[type="number"]:focus { border-color:var(--color-dark); }
.calc-field input[type="range"] { width:100%; accent-color:var(--color-dark); height:6px; cursor:pointer; }
.calc-range-scale { display:flex; justify-content:space-between; font-size:12px; color:var(--color-text-muted); margin-top:-2px; }

.calc-results { background:var(--color-surface-muted,#f7f7f7); border-radius:14px; padding:32px 30px; display:flex; flex-direction:column; gap:16px; position:sticky; top:100px; }
.calc-result-block { display:flex; flex-direction:column; gap:4px; }
.calc-result-muted .calc-result-num { font-size:1.5rem; color:var(--color-text-muted); }
.calc-result-label { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); }
.calc-result-num { font-family:var(--font-display); font-weight:700; line-height:1; }
.calc-result-hero { background:var(--color-dark); color:#fff; border-radius:10px; padding:22px 22px 20px; margin-top:6px; }
.calc-result-hero .calc-result-label { color:rgba(255,255,255,.6); }
.calc-result-hero .calc-result-num { font-size:2.4rem; color:#fff; }
.calc-result-sub { font-size:13px; color:rgba(255,255,255,.7); margin-top:6px; }
.calc-cta { width:100%; justify-content:center; margin-top:4px; }
.calc-disclaimer { font-size:12px; color:var(--color-text-muted); line-height:1.5; margin:0; }
.calc-disclaimer a { color:var(--color-dark); }

.calc-explainer { border-top:1px solid var(--color-border); margin-top:30px; }
.calc-explainer-inner { max-width:760px; margin:0 auto; padding:50px 50px 70px; }
.calc-explainer-inner h2 { font-size:1.5rem; margin-bottom:16px; }
.calc-explainer-inner p { font-size:16px; line-height:1.75; color:var(--color-text-muted); margin-bottom:14px; }

/* ═══════════════════════════════════════════════════════════
   CHECKLIST (Month 5)
   ═══════════════════════════════════════════════════════════ */
.chk-wrap { max-width:820px; margin:0 auto; padding:46px 50px 20px; }
.chk-progress-bar { position:sticky; top:84px; background:var(--color-bg,#fff); padding:16px 0 14px; z-index:50; border-bottom:1px solid var(--color-border); margin-bottom:32px; }
.chk-progress-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:16px; }
.chk-progress-label { font-size:14px; color:var(--color-text-muted); }
.chk-progress-label strong { color:var(--color-dark); font-size:18px; font-family:var(--font-display); }
.chk-progress-actions { display:flex; gap:8px; }
.chk-action { background:none; border:1px solid var(--color-border); border-radius:100px; padding:6px 14px; font-size:12.5px; cursor:pointer; font-family:var(--font-display); color:var(--color-dark); transition:background .2s,color .2s; }
.chk-action:hover { background:var(--color-dark); color:#fff; border-color:var(--color-dark); }
.chk-progress-track { height:7px; background:var(--color-border); border-radius:100px; overflow:hidden; }
.chk-progress-fill { height:100%; width:0; background:var(--color-dark); border-radius:100px; transition:width .35s ease; }

.chk-group { margin-bottom:34px; }
.chk-group-title { font-size:1.15rem; font-family:var(--font-display); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--color-border); }
.chk-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; }
.chk-item label { display:flex; align-items:flex-start; gap:13px; padding:11px 12px; border-radius:8px; cursor:pointer; transition:background .15s; }
.chk-item label:hover { background:var(--color-surface-muted,#f7f7f7); }
.chk-box { position:absolute; opacity:0; width:0; height:0; }
.chk-mark { flex-shrink:0; width:20px; height:20px; border:1.7px solid var(--color-border); border-radius:6px; margin-top:1px; position:relative; transition:background .15s,border-color .15s; }
.chk-box:focus-visible + .chk-mark { outline:2px solid var(--color-dark); outline-offset:2px; }
.chk-item.is-checked .chk-mark { background:var(--color-dark); border-color:var(--color-dark); }
.chk-item.is-checked .chk-mark::after { content:''; position:absolute; inset:0; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l4 4 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l4 4 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat; background:#fff; }
.chk-text { font-size:15.5px; line-height:1.5; color:var(--color-dark); }
.chk-item.is-checked .chk-text { color:var(--color-text-muted); text-decoration:line-through; }
.chk-done { background:var(--color-dark); color:#fff; border-radius:10px; padding:20px 24px; font-size:15px; line-height:1.6; margin-top:8px; }
.chk-done a { color:#fff; }

@media print {
  .nav, .footer, .sticky-quote-btn, .exit-popup-overlay, .chk-progress-actions, .guide-hero-meta, .calc-cta { display:none !important; }
  .chk-progress-bar { position:static; }
  body { color:#000; }
}

/* ═══════════════════════════════════════════════════════════
   RESOURCES HUB (Month 5)
   ═══════════════════════════════════════════════════════════ */
.res-section { max-width:var(--max-content); margin:0 auto; padding:40px 50px 90px; }
.res-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.res-card { display:flex; flex-direction:column; border:1px solid var(--color-border); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .25s, transform .25s; background:var(--color-bg,#fff); }
.res-card:hover { box-shadow:0 10px 40px rgba(0,0,0,.1); transform:translateY(-3px); }
.res-card-img { aspect-ratio:16/10; overflow:hidden; }
.res-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.res-card:hover .res-card-img img { transform:scale(1.05); }
.res-card-body { padding:24px 24px 22px; display:flex; flex-direction:column; flex:1; }
.res-tag { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--color-text-muted); margin-bottom:10px; }
.res-card-title { font-size:1.2rem; line-height:1.25; margin-bottom:10px; }
.res-card-desc { font-size:14.5px; line-height:1.6; color:var(--color-text-muted); flex:1; }
.res-card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:18px; font-size:13px; color:var(--color-dark); font-family:var(--font-display); }
.res-card-arrow { display:inline-flex; }

@media (max-width:980px) {
  .guide-layout { grid-template-columns:1fr; gap:0; }
  .guide-toc { display:none; }
  .calc-grid { grid-template-columns:1fr; gap:32px; }
  .calc-results { position:static; }
  .res-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .res-grid { grid-template-columns:1fr; }
  .guide-hero-inner, .guide-layout, .calc-wrap, .chk-wrap, .calc-explainer-inner, .res-section { padding-left:24px; padding-right:24px; }
  .guide-cta-card, .guide-takeaways { padding-left:24px; padding-right:24px; }
}

/* Blog resources banner */
.blog-resources-banner { border-top:1px solid var(--color-border); }
.blog-resources-inner { max-width:var(--max-content); margin:0 auto; padding:50px 50px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.blog-resources-text h2 { font-size:1.6rem; margin:8px 0 8px; }
.blog-resources-text p { color:var(--color-text-muted); font-size:15px; max-width:560px; line-height:1.6; }

/* ═══════════════════════════════════════════════════════════
   QUOTE / BROCHURE — two-column layout (overrides centered hero)
   Scoped to .quote-hero so the real contact page is unaffected.
   ═══════════════════════════════════════════════════════════ */
.quote-hero { text-align: left; }
.quote-hero .contact-hero-inner {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  gap: 56px;
  max-width: 1140px;
}
.quote-hero .contact-hero-text { flex: 1 1 0; max-width: 460px; }
.quote-hero .contact-hero-text .eyebrow { display: block; margin-bottom: 14px; }
.quote-hero .contact-hero-text h1 {
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.1;
  max-width: none;
  text-align: left;
  margin-bottom: 16px;
}
.quote-hero .contact-hero-text > p {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.7;
}
.quote-hero .contact-form-wrap {
  flex: 1 1 0;
  max-width: 580px;
  width: 100%;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 36px 34px;
}
.quote-hero .contact-side-info a { text-decoration: none; }
@media (max-width: 900px) {
  .quote-hero .contact-hero-inner { flex-direction: column; gap: 36px; }
  .quote-hero .contact-hero-text,
  .quote-hero .contact-form-wrap { max-width: none; }
}
@media (max-width: 600px) {
  .quote-hero .contact-form-wrap { padding: 26px 20px; }
}


/* ═══════════════════════════════════════════════════════════
   SCAN TO BIM — LOCATION PAGES
   ═══════════════════════════════════════════════════════════ */
.loc-why-section { padding: 80px 50px; background: var(--color-page, #fff); }
.loc-why-inner { max-width: var(--max-content, 1280px); margin: 0 auto; }
.loc-why-header { margin-bottom: 36px; max-width: 640px; }
.loc-why-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; margin-top: 8px; }
.loc-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.loc-why-card { border: 1px solid var(--color-border, #e5e5e5); border-radius: 12px; padding: 28px 26px; }
.loc-why-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.loc-why-card p { color: var(--color-text-muted, #666); line-height: 1.65; font-size: 15.5px; }

.loc-faq-section { padding: 20px 50px 80px; }
.loc-faq-inner { max-width: 860px; margin: 0 auto; }
.loc-faq-header { margin-bottom: 28px; }
.loc-faq-header h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-top: 8px; }
.loc-faq { display: flex; flex-direction: column; gap: 10px; }
.loc-faq-item { border: 1px solid var(--color-border, #e5e5e5); border-radius: 10px; padding: 0 20px; }
.loc-faq-item summary { cursor: pointer; padding: 18px 0; font-family: var(--font-display, inherit); font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.loc-faq-item summary::-webkit-details-marker { display: none; }
.loc-faq-item summary::after { content: '+'; font-size: 22px; font-weight: 400; flex-shrink: 0; transition: transform .2s; }
.loc-faq-item[open] summary::after { transform: rotate(45deg); }
.loc-faq-a { padding: 0 0 18px; }
.loc-faq-a p { font-size: 15px; line-height: 1.7; color: var(--color-text-muted, #666); margin: 0; }

/* Geo links block — monochrome, blends with site content sections */
.geo-links-section { background: var(--color-white); padding: 80px 50px; border-top: 1px solid var(--color-border); }
.geo-links-section.geo-links-states { border-top: 1px solid var(--color-border); }
.geo-links-inner { max-width: var(--max-content); margin: 0 auto; text-align: center; }
.geo-links-inner h2 { color: var(--color-dark); font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-bottom: 30px; }
.geo-links-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 0; max-width: 100%; margin: 0 auto; }
.geo-links-list a { color: var(--color-text); text-decoration: none; font-size: 16px; padding: 3px 16px; white-space: nowrap; transition: color .2s; }
.geo-links-list a:hover { color: var(--color-dark); text-decoration: underline; text-underline-offset: 3px; }
.geo-links-list .sep { color: var(--color-text-50); margin: 0; font-size: 13px; }
.geo-links-list .current { color: var(--color-dark); font-weight: 700; font-size: 16px; padding: 3px 16px; white-space: nowrap; }
@media (max-width: 640px) {
  .loc-why-section, .loc-faq-section, .geo-links-section { padding-left: 22px; padding-right: 22px; }
  .loc-why-grid { grid-template-columns: 1fr; }
  .geo-links-list a, .geo-links-list .current { font-size: 14px; padding: 3px 11px; }
}

/* ============================================================
   Our Story — animated vertical timeline (about page)
   ============================================================ */
.story-timeline { position: relative; max-width: 940px; margin: 56px auto 0; padding: 0 50px; }
.story-timeline-line { position: absolute; top: 6px; bottom: 44px; left: 50%; width: 2px; transform: translateX(-50%); background: var(--color-border); overflow: hidden; border-radius: 2px; }
.story-timeline-fill { position: absolute; inset: 0; background: var(--color-dark); transform: scaleY(1); transform-origin: top center; animation: storyLineGrow 1.6s var(--ease-out, ease); }
@keyframes storyLineGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.story-tl-item { position: relative; width: 50%; box-sizing: border-box; padding-bottom: 44px; }
.story-tl-item:last-of-type { padding-bottom: 0; }
.story-tl-item:nth-of-type(odd) { margin-left: 0; padding-right: 46px; text-align: right; }
.story-tl-item:nth-of-type(even) { margin-left: 50%; padding-left: 46px; text-align: left; }

.story-tl-marker { position: absolute; top: 8px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.story-tl-item:nth-of-type(odd) .story-tl-marker { right: -10px; }
.story-tl-item:nth-of-type(even) .story-tl-marker { left: -10px; }
.story-tl-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--color-dark); border: 2px solid var(--color-dark); box-shadow: 0 0 0 4px var(--color-page); }

.story-tl-card { display: inline-block; text-align: left; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 14px; padding: 24px 26px; max-width: 380px; transition: box-shadow .3s var(--ease-out, ease), transform .3s var(--ease-out, ease); }
.story-tl-card:hover { box-shadow: 0 14px 44px rgba(20,20,20,.09); transform: translateY(-4px); }
.story-tl-year { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; margin-bottom: 10px; letter-spacing: -.02em; }
.story-tl-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.story-tl-card p { color: var(--color-text-muted); font-size: 14.5px; line-height: 1.62; margin: 0; }

.story-tl-card { animation: aboutFade .7s var(--ease-out, ease); }

@media (max-width: 760px) {
  .story-timeline { padding: 0 20px; margin-top: 36px; }
  .story-timeline-line { left: 10px; }
  .story-tl-item,
  .story-tl-item:nth-of-type(odd),
  .story-tl-item:nth-of-type(even) { width: 100%; margin-left: 0; padding-left: 36px; padding-right: 0; text-align: left; }
  .story-tl-item:nth-of-type(odd) .story-tl-marker,
  .story-tl-item:nth-of-type(even) .story-tl-marker { left: 1px; right: auto; }
  .story-tl-item:nth-of-type(odd).reveal,
  .story-tl-item:nth-of-type(even).reveal { transform: translateY(24px); }
  .story-tl-card { max-width: none; display: block; }
}

/* ============================================================
   About-page footer fix — match the home footer.
   body.page-about applies a nested CSS block that re-styles the
   shared .contact-form (cream text for the old dark section) and
   .footer-ticker (footerTicker keyframes that don't resolve here).
   These higher-specificity rules restore the home/base styling.
   ============================================================ */
@keyframes tzvFooterMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.page-about .footer .footer-ticker { animation: tzvFooterMarquee 30s linear infinite; }

.page-about .footer .contact-form label { color: var(--color-text); }
.page-about .footer .contact-form input,
.page-about .footer .contact-form select,
.page-about .footer .contact-form textarea {
  background: rgba(20,20,20,0.05);
  border: 1px solid rgba(20,20,20,0.2);
  padding: 12px;
  color: #1f3630;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.page-about .footer .contact-form input::placeholder,
.page-about .footer .contact-form textarea::placeholder { color: rgba(20,20,20,0.4); }
.page-about .footer .contact-form select { color: #1f3630; }
.page-about .footer .contact-form select option { color: var(--color-dark); background: #fff; }
.page-about .footer .contact-form button[type="submit"] { background: var(--color-dark); color: var(--color-cream); }

/* ═══════════════════════════════════════════════════════════
   PROJECTS PAGINATION (6 per page)
   ═══════════════════════════════════════════════════════════ */
.projects-pager { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; padding: 30px 50px 90px; }
.projects-page-btn { min-width: 42px; height: 42px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: transparent; color: var(--color-dark); font-family: var(--font-display); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 6px; transition: background .2s, color .2s, border-color .2s; }
.projects-page-btn:hover:not(:disabled):not(.active) { border-color: var(--color-dark); }
.projects-page-btn.active { background: var(--color-dark); color: var(--color-white, #fff); border-color: var(--color-dark); cursor: default; }
.projects-page-btn:disabled { opacity: .35; cursor: default; }
.projects-page-btn.pager-arrow { font-size: 20px; }
.projects-page-ellipsis { min-width: 24px; text-align: center; color: var(--color-text-muted); user-select: none; }
@media (max-width: 640px) {
  .projects-pager { padding: 20px 20px 70px; gap: 6px; }
  .projects-page-btn { min-width: 38px; height: 38px; font-size: 14px; }
}
/* Small phones: the section already pads the sides, so drop the pager's
   own side padding and tighten the buttons to keep a single row. */
@media (max-width: 400px) {
  .projects-pager { padding-left: 0; padding-right: 0; gap: 4px; }
  .projects-page-btn { min-width: 34px; padding: 0 8px; }
  .projects-page-ellipsis { min-width: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE HARDENING — phone / tablet / laptop
   Root-cause fixes for sideways scroll, cut-off content and
   tap targets. No page-wide overflow guard (see 1): each source
   of overflow is fixed where it starts.
   ═══════════════════════════════════════════════════════════ */

/* 1. NO overflow guard on html/body.
      Tried and reverted: overflow-x:clip froze scrolling entirely (clip
      creates no scroll container), and overflow-x:hidden turned <body>
      into its own scroll container (y computed to auto), so window.scrollY
      stopped working. Sideways scroll is instead fixed at the source
      (carousel clipping, grid min-width, .band collapse) below. */

/* 2. No image may exceed its container. */
img { max-width: 100%; }

/* 3. Testimonial drag-carousel: its track is a long flex row
      (~3040px). Without clipping it scrolled the whole page. */
.testimonial-carousel-wrap { overflow: hidden; }

/* 4. Grid/flex children default to min-width:auto, which stops them
      shrinking and forces the parent wider than the screen. */
.band > *,
.cs-index-card > *,
.footer-columns > *,
.project-row > *,
.contact-row > *,
.footer-contact-row > * { min-width: 0; }

/* ---- Tablet and below ------------------------------------ */
@media (max-width: 1199.98px) {
  /* .band children were forced into column 1 but the grid itself
     stayed 2-up, so content overflowed and was clipped. */
  .band { grid-template-columns: 1fr; min-height: 0; }
  .band-image,
  .band-content { grid-column: 1 !important; width: auto; max-width: 100%; }
}

/* ---- Phone ----------------------------------------------- */
@media (max-width: 640px) {
  .section-testimonial { padding: 70px 20px 110px; }

  /* Comfortable tap targets (Apple/Google guidance is ~44px;
     these link lists were 20-24px tall). */
  .footer-col .links a,
  .site-footer-col .links a,
  .footer-legal-socials a { min-height: 36px; display: flex; align-items: center; }
  .nav-links a { min-height: 40px; display: flex; align-items: center; }

  /* Long unbroken strings (emails, URLs) must not push the layout. */
  a[href^="mailto:"], a[href^="tel:"] { word-break: break-word; }
}

/* ---- Mobile nav: menu must never exceed the screen ---------
   The nav is position:sticky, so anything below the fold was
   unreachable — "Contact" and "Career" could not be tapped.
   Cap the open menu to the viewport and let it scroll.
   (184px = the two-row phone header; the one-row header below
   overrides it with 64px.) */
@media (max-width: 1099.98px) {
  .nav.open .nav-links {
    max-height: calc(100vh - 184px);
    max-height: calc(100dvh - 184px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
  }
  /* The menu is a flex column, so the height cap made its rows shrink
     (56px links squashed to their text height) instead of scrolling. */
  .nav.open .nav-links > * { flex-shrink: 0; }
}

/* ---- Forms on mobile --------------------------------------
   iOS Safari auto-zooms the page when a focused control has a
   font-size below 16px, which jerks the layout around. Bump all
   controls to 16px on small screens (also just more legible). */
@media (max-width: 809.98px) {
  /* !important: component rules like .contact-form input are more
     specific than a bare element selector and were still 14-15px. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }
}

/* The floating quote button must not sit on top of the open mobile menu. */
@media (max-width: 1099.98px) {
  body:has(.nav.open) .sticky-quote-btn { opacity: 0; pointer-events: none; }
}

/* ---- Mobile menu as an overlay panel -----------------------
   Previously the open menu sat in normal flow, so it pushed ~724px
   of content down; closing it threw the reader ~700px up the page.
   Anchoring it to the nav keeps the page from reflowing at all. */
@media (max-width: 1099.98px) {
  .nav.open .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-page);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 18px 40px rgba(20, 20, 20, 0.12);
    z-index: 200;
  }
}

/* ---- Industry-page FAQ ------------------------------------
   .faq-section already pads 20px on phones; .faq-container added
   another 50px each side, leaving the FAQ list only 220px of a
   375px screen and clipping the question text. */
@media (max-width: 809.98px) {
  /* the 50px is an inline style on the element, so !important is required */
  .faq-container { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---- Touch targets on tablets ------------------------------
   iPad is a touch device too, but the tap-target sizing only ran
   below 640px, leaving ~30 footer links ~20px tall at 768/1024.
   (Nav links stay scoped to the hamburger breakpoint above.) */
@media (max-width: 1024px) {
  .footer-col .links a,
  .site-footer-col .links a,
  .footer .links a,
  .footer-legal-socials a,
  .see-map { min-height: 36px; display: flex; align-items: center; }
}

/* ---- Mobile services submenu: kill the desktop hover transform ----
   `.nav-dropdown:hover .nav-dropdown-menu` (specificity 0,2,1) sets
   transform: translateX(-50%) for the floating desktop dropdown, and
   it out-ranks the mobile `.nav-dropdown-menu` reset (0,1,0). So on
   touch/hover the inline submenu slid half its width off-screen and
   looked blank. Re-neutralise it at the same specificity. */
@media (max-width: 1099.98px) {
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    min-width: 0;
    box-shadow: none;
    border: 0;
  }
}

/* ---- Footer newsletter: Subscribe button ran off-screen -----
   The email input is `flex:1` but keeps its default min-width:auto,
   so it refuses to shrink and pushed the button ~61px past the right
   edge on phones (clipped, partly untappable). Let it shrink, and
   allow the button to wrap onto its own line if space is tight. */
@media (max-width: 809.98px) {
  .footer-newsletter form { flex-wrap: wrap; }
  .footer-newsletter input { min-width: 0; flex: 1 1 120px; }
  .footer-newsletter button { flex: 0 0 auto; padding: 15px 24px; white-space: nowrap; }
}

/* ---- Long CTA button labels on narrow screens ---------------
   .btn is white-space:nowrap, so long labels (e.g. "Explore Interior
   Documentation") stayed on one line and pushed ~17px past a 320px
   column, scrolling the page sideways on blog/service pages. */
@media (max-width: 809.98px) {
  .btn { max-width: 100%; white-space: normal; }
  .btn .btn-label { white-space: normal; }
}

/* ---- Brochure popup on short screens + a proper close target ----
   On a landscape phone (375px tall) the 402px box overflowed the
   viewport with no way to scroll to its bottom, and the close button
   was 31x30px — the main way to dismiss it on a touchscreen. */
.exit-popup-overlay { overflow-y: auto; }
.exit-popup { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; }
.exit-popup-close { top: 6px; right: 6px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; }
@media (max-height: 500px) {
  .exit-popup { padding: 22px 26px 18px; }
  .exit-popup-eyebrow { margin-bottom: 6px; }
  .exit-popup-title { font-size: 1.25rem; margin-bottom: 8px; }
  .exit-popup-text { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
  .exit-popup-note { margin-top: 8px; }
}

/* ---- Checklist progress bar --------------------------------
   It sticks at top:84px, which suits the 64px desktop header, but
   the phone header is ~173px (logo row + "Get a Quote" row), so the
   bar slid underneath it and was never visible while scrolling.
   Its background also used an undefined token and fell back to
   white — a white box on the off-white page. */
.chk-progress-bar { background: var(--color-page); }
@media (max-width: 809.98px) {
  .chk-progress-bar { top: 172px; padding: 12px 0 10px; }
  .chk-progress-row { flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px; }
  .chk-progress-label { white-space: nowrap; font-size: 13px; }
  .chk-progress-label strong { font-size: 16px; }
  .chk-action { padding: 7px 12px; font-size: 12px; white-space: nowrap; }
}

/* ---- One-row header for tablets and landscape phones -------
   The two-row phone header (logo row + button row, 174px) is sticky:
   on a landscape phone (~375px tall) it covered ~46% of the screen,
   and on a tablet it wasted a whole row. From 520px up there is room
   beside the logo, so the button moves into the top row (64px). */
@media (min-width: 520px) and (max-width: 1099.98px) {
  .nav-cta { position: absolute; top: 7px; right: 66px; margin: 0; }
  .nav.open .nav-links { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
  .chk-progress-bar { top: 63px; }
}

/* ---- About page: header jumped when scrolling on phones -------
   The About styles (nested under body.page-about) add 14px top and
   bottom padding once the page scrolls. The desktop header has a
   fixed height so nothing moves, but the mobile header is height:auto:
   it grew 174px -> 202px and shoved the whole page down 28px mid-scroll.
   Same selector weight as the nested rule so this one wins. */
@media (max-width: 1099.98px) {
  body.page-about .nav.nav--scrolled { padding-top: 0; padding-bottom: 0; }
}

/* ---- About page: empty space below the footer -----------------
   cursor.js appends .v-cursor / .v-cursor-ring to the end of <body>
   and moves them with the mouse every frame, but nothing styled them.
   As full-width blocks in the page flow, their transform stretched the
   page by the pointer's height: up to a screen of blank space below
   the footer. Take them out of the flow (still invisible, as before). */
.v-cursor,
.v-cursor-ring { position: fixed; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }

/* ---- Touch targets: breadcrumbs, email/phone links, text CTAs ----
   On phones these were 18-21px tall (under the 24px minimum), and the
   breadcrumbs sit right under the sticky header, easy to mis-tap. */
@media (max-width: 1024px) {
  .breadcrumb a,
  .pd2-crumb a,
  .guide-crumb a { display: inline-block; padding: 4px 0; }
  .blog-article-crumb { min-height: 28px; }
  /* padding only (display untouched): plain inline links just gain hit
     area; the icon links keep their inline-flex layout. */
  a[href^="mailto:"]:not([class]),
  a[href^="tel:"]:not([class]),
  .contact-side-mail,
  .visit-call,
  .alt-cta,
  .blog-featured-cta { padding-top: 4px; padding-bottom: 4px; }
}

/* ═══════════════════════════════════════════════════════════
   SITE-WIDE FORMS (js/forms.js) — inline result messages
   ═══════════════════════════════════════════════════════════ */
/* Rows, labels and buttons in these forms set their own display,
   which beats the hidden attribute forms.js uses on success. */
.contact-form [hidden],
.footer-newsletter [hidden],
.blogs-newsletter-form [hidden] { display: none !important; }
.form-status {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}
.form-status.is-success { color: var(--color-text); background: rgba(20, 20, 20, 0.04); border: 1px solid rgba(20, 20, 20, 0.15); }
.form-status.is-error { color: #b3261e; background: rgba(179, 38, 30, 0.05); border: 1px solid rgba(179, 38, 30, 0.35); }
/* Newsletters sit on dark bands; the message gets its own line.
   min-width:0 lets the email field shrink, otherwise its built-in
   width wrapped the Subscribe button onto a second row. */
.footer-newsletter form { flex-wrap: wrap; }
.footer-newsletter input { min-width: 0; }
.footer-newsletter .form-status,
.blogs-newsletter-form .form-status { flex: 1 1 100%; }
.footer-newsletter .form-status.is-success,
.blogs-newsletter-form .form-status.is-success { color: var(--color-cream); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.footer-newsletter .form-status.is-error,
.blogs-newsletter-form .form-status.is-error { color: #ffb4ab; background: rgba(255, 180, 171, 0.08); border-color: rgba(255, 180, 171, 0.4); }

/* ═══════════════════════════════════════════════════════════
   PROJECT PAGES — full project write-up + longer info values
   (the base .pd2-* styles live in each project page's <style>)
   ═══════════════════════════════════════════════════════════ */
.pd2-v { max-width: 560px; line-height: 1.45; }
.pd2-overview p + p { margin-top: 16px; }
.pd2-overview strong { color: var(--color-dark); font-weight: 600; }
.pd2-overview h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(17px, 1.7vw, 21px);
  color: var(--color-dark);
  margin: 44px 0 18px;
}
.pd2-overview ul { list-style: none; margin: 0; padding: 0; max-width: 840px; display: grid; gap: 14px; }
.pd2-overview li { position: relative; padding-left: 28px; color: var(--color-text-muted); line-height: 1.7; font-size: clamp(15px, 1.5vw, 18px); }
.pd2-scope li::before { content: ''; position: absolute; left: 6px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-dark); }
.pd2-highlights li::before { content: ''; position: absolute; left: 6px; top: 0.4em; width: 6px; height: 12px; border: solid var(--color-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pd2-overview ul + p { margin-top: 36px; }