:root {
  --bg:      #FFFFFF;
  --bg-alt:  #FFFFFF;
  --card:    #FFFFFF;
  --border:  #E2DDD5;
  --muted:   #8A8480;
  --text:    #2A2420;
  --ink:     #104840;
  --gold:    #eec827;
  --orange:  #FC7942;
  --forest:  #104840;

  /* PRIMARY = forest green, SECONDARY = gold */
  --black:   #FFFFFF;
  --dark:    #F5F5F5;
  --muted:   #8A8480;
  --text:    #2A2420;
  --light:   #104840;
  --white:   #104840;
  --accent:  #104840;   /* primary action colour */
  --accent2: #FC7942;
  --gold:    #eec827;   /* secondary / highlight */
  --green:   #104840;
  --site-button-height: 56px;
}

/* Scoped to .site so these resets never leak into the AMS dashboard */
.site * { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

.site {
  background: #FFFFFF;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  line-height: 32px;
}

/* CUSTOM CURSOR */
.cursor { display: none; }
.cursor-ring { display: none; }



/* Pointer cursor on all interactive elements */
.site a, .site button, .site [onclick], .work-item, .service-item, .filter-btn, .price-btn, .hero-dot-btn { cursor: pointer; }

/* NAV */
.site nav {
  position: fixed;
  top: 38px; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: padding 0.25s, background 0.25s;
  padding: 0 clamp(24px, 4vw, 60px);
}
.site nav.is-scrolled {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 2px 24px rgba(0,0,0,0.05);
}
.nav-inner {
  width: 100%;
  max-width: clamp(1200px, 90vw, 1440px);
  margin: 0 auto;
  padding: 17px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 0;
}
.nav-logo img { display: block; height: 40px; width: auto; max-width: 200px; }
.nav-links {
  display: flex;
  align-items: stretch;
  gap: clamp(17px, 2.4vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.nav-links li { display: flex; align-items: stretch; }
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: #104840;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}
.nav-links li:not(:last-child) > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #104840;
  transform: scaleX(0);
  transition: transform 0.2s ease;
  transform-origin: center;
}
.nav-links li:not(:last-child) > a:hover::after,
.nav-links li:not(:last-child) > a.active-link::after { transform: scaleX(1); }
.nav-links a:hover { color: #104840; }
.nav-links a.active-link { color: #104840; }
.nav-cta {
  background: #104840;
  color: #FFFFFF !important;
  padding: 11px 22px;
  border: none;
  border-radius: 0;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s !important;
}
.nav-cta:hover { background: #0d3c35 !important; }

/* Hamburger — hidden on desktop */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #104840;
  transition: transform 0.2s, opacity 0.2s;
}

/* PAGE SECTIONS */
.page { display: block; }
.page.active { display: block; }

/* ================================
   HOMEPAGE
================================ */

/* HERO */

.hero-content-wrap {
  max-width: clamp(1200px, 90vw, 1440px);
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(24px, 4vw, 60px);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 50%, rgba(237,201,38,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(16,72,64,0.03) 0%, transparent 50%);
}

.hero-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 0.8s 0.1s forwards;
}
.hero-dot { display: none; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.hero-eyebrow span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px, 12vw, 160px);
  line-height: 0.92;
  color: var(--white);
  letter-spacing: 0.01em;
  margin-bottom: 40px;
  opacity: 0;
  text-align: left;
  animation: fadeUp 0.8s 0.2s forwards;
}
.hero-headline .line2 { 
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(16,72,64,0.35);
}
.hero-headline .accent { color: #eec827; }

.hero-bottom {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  opacity: 0;
  text-align: left;
  animation: fadeUp 0.8s 0.4s forwards;
}
.hero-desc {
  max-width: none;
  width: 100%;
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.8;
  text-align: left;
}
.hero-desc strong { color: var(--white); font-weight: 600; }
.hero-actions { display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; }
.btn-primary {
  background: var(--accent);
  color: var(--black);
  min-height: var(--site-button-height);
  padding: 14px 28px;
  border-radius: 0;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(16,72,64,0.25); }
.btn-ghost {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}
.btn-ghost:hover { color: var(--white); }

.hero-scroll {
  position: absolute;
  bottom: 40px;
  right: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--muted));
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(0.5);opacity:0.4} }
.hero-scroll span { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); writing-mode: vertical-rl; }

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

/* TICKER */
.ticker {
  background: #eec827;
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker-inner {
  display: inline-flex;
  animation: ticker 25s linear infinite;
}
.ticker-inner span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #000000;
  padding: 0 32px;
}
.ticker-inner .dot { color: rgba(255,255,255,0.35); }
@keyframes ticker { from{transform:translateX(-50%)} to{transform:translateX(0)} }

/* SECTION WRAPPER - matches .pricing-inner exactly */
.section {
  padding: 80px clamp(24px, 4vw, 60px);
  max-width: clamp(1200px, 90vw, 1440px);
  margin: 0 auto;
}
.section-full { padding: 0; }
.overline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  text-decoration: none;
  color: #104840;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.overline::before { display: none; }
.section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 48px);
  color: #000000;
  line-height: 1.28;
  letter-spacing: 0em !important;
  margin-bottom: 24px;
  font-weight: 800 !important;
}
.section-sub {
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  max-width: none;
  width: 100%;
  margin-bottom: 60px;
  line-height: 32px;
}

/* WORK GRID */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 8px;
  margin-bottom: 48px;
}
.work-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  group: true;
}
.work-item:first-child { grid-column: 1 / 3; }
.work-item:nth-child(4) { grid-column: 1 / 3; }
.work-thumb {
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.work-item:first-child .work-thumb { aspect-ratio: 21/9; }
.work-thumb-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  color: rgba(0,0,0,0.06);
  letter-spacing: 0.1em;
}
.work-item:hover .work-thumb-inner { transform: scale(1.04); }

/* Work colour themes */
.aurora { background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 30%, #1a3a2e 70%, #0d1f18 100%); }
.cavannah,
.cavannah-christian-networking-community { background: linear-gradient(135deg, #1a2a1a 0%, #2a3a1a 50%, #1a2a2a 100%); }
.lekki { background: linear-gradient(135deg, #1a1a2e 0%, #2e1a3a 100%); }
.harvesters { background: linear-gradient(135deg, #2e1a1a 0%, #3a2a1a 100%); }
.benneys { background: linear-gradient(135deg, #2a1a10 0%, #3a2a18 100%); }
.zunio { background: linear-gradient(135deg, #0a1a2e 0%, #1a2a3e 100%); }

.work-info {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
/* Progress-bar fill from left on hover — slower, more deliberate */
.work-info::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #104840;
  transform: translateX(-100%);
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.work-item:hover .work-info::before {
  transform: translateX(0);
}
.work-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 4px;
}
.work-tags { font-size: 13px; font-weight: 500; color: var(--muted); }
.work-arrow {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.2s;
}
.work-item:hover .work-arrow {
  background: #eec827;
  border-color: #eec827;
  color: #104840;
}
/* work-info fill handled by ::before pseudo */
.work-item:hover .work-name {
  color: #FFFFFF;
}
.work-item:hover .work-tags {
  color: rgba(255,255,255,0.75);
}

/* New badge */
.work-new {
  position: absolute;
  top: 16px; right: 16px;
  background: #eec827;
  color: #104840;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0;
}

/* ================================
   PRICING SECTION
================================ */
.pricing-section {
  background: var(--dark);
  padding: 80px clamp(24px, 4vw, 60px);
}
.pricing-inner, .content-wrap { max-width: clamp(1200px, 90vw, 1440px); margin: 0 auto; }

/* ── Marketing page hero — forest band (matches /services) ───────────────── */
.site .mkt-page-hero {
  background: #104840;
  padding: 280px clamp(24px, 4vw, 60px) 96px;
  position: relative;
  overflow: hidden;
}
.site .mkt-page-hero--faq::after {
  content: '';
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 50%;
  height: 80%;
  background: radial-gradient(circle at top right, rgba(237, 201, 38, 0.07), transparent 60%);
  pointer-events: none;
}
.site .mkt-page-hero--pricing::after {
  content: '';
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle at top right, rgba(237, 201, 38, 0.08), transparent 60%);
  pointer-events: none;
}
.site .mkt-page-hero-inner-narrow {
  max-width: 780px;
  margin: 0 auto;
}
.site .mkt-page-hero-overline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 20px;
  display: block;
}
.site .mkt-page-hero-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4.1vw, 56px);
  color: #FFFFFF;
  line-height: 1.24;
  letter-spacing: -0.03em;
  margin: 0;
}
.site .mkt-page-hero-accent {
  color: #eec827;
}
.site .mkt-page-hero-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.72;
  max-width: 680px;
  margin: 14px 0 0;
}
.site .mkt-page-hero-subtitle--narrow {
  max-width: 580px;
}
.site .mkt-page-hero-meta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.75;
  margin: 14px 0 0;
}
.site .mkt-page-hero-back {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  transition: color 0.2s ease;
}
.site .mkt-page-hero-back:hover {
  color: #eec827;
}
.site .mkt-page-hero-kicker {
  margin: 0 0 20px;
}
.site .mkt-page-hero-kicker .mkt-page-hero-overline {
  margin: 0 0 8px;
}
.site .mkt-page-hero-kicker .mkt-page-hero-meta {
  margin: 0;
}
.site .mas-content-meta {
  font-size: 14px;
  color: #8a8480;
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 720px;
}
.site .mas-content-lead {
  font-size: 18px;
  color: #232221;
  line-height: 1.75;
  max-width: 680px;
  margin: 0 0 32px;
}
.pricing-audit {
  background: linear-gradient(135deg, rgba(237,201,38,0.08) 0%, rgba(16,72,64,0.03) 100%);
  border: 2px solid #104840;
  border-radius: 0;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}
.audit-left {}
.audit-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.audit-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  color: var(--white);
  margin-bottom: 4px;
}
.audit-desc { font-size: 14px; color: var(--text); }
.audit-right { text-align: right; flex-shrink: 0; }
.audit-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: #104840;
  line-height: 1;
}
.audit-note { font-size: 12px; color: var(--muted); margin-top: 4px; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.price-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 32px 28px;
  position: relative;
  transition: border-color 0.3s, transform 0.3s;
}
.price-card:hover { border-color: rgba(16,72,64,0.3); transform: translateY(-4px); }
.price-card.featured {
  background: var(--accent);
  border-color: var(--accent);
}
.featured-label {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: #FFFFFF;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 0;
  white-space: nowrap;
  border: 1px solid var(--accent);
}
.price-tier {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.price-card.featured .price-tier { color: rgba(255,255,255,0.6); }
.price-amount {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  color: var(--white);
  line-height: 1;
  margin-bottom: 4px;
}
.price-card.featured .price-amount { color: #FFFFFF; }
.price-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  color: var(--white);
  margin-bottom: 6px;
}
.price-card.featured .price-name { color: #FFFFFF; }
.price-desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.65;
}
.price-card.featured .price-desc { color: rgba(255,255,255,0.7); }
.price-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 20px;
}
.price-card.featured .price-divider { background: rgba(255,255,255,0.2); }
.price-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.price-list li {
  font-size: 14px;
  color: var(--text);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.price-card.featured .price-list li { color: rgba(255,255,255,0.85); }
.price-list li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.price-card.featured .price-list li::before { color: #FFFFFF; }
.price-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--site-button-height);
  padding: 0 17px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
  border: 1px solid var(--border);
  color: var(--white);
}
.price-card:not(.featured) .price-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--black);
}
.price-card.featured .price-btn {
  background: #eec827;
  color: #104840;
  border-color: #eec827;
}
.price-card.featured .price-btn:hover {
  background: #0a302b;
}

.pricing-note {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 17px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--text);
}
.pricing-note strong { color: var(--white); }
.note-icon { font-size: 20px; flex-shrink: 0; }

/* ================================
   SERVICES
================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 0;
}
.service-item {
  background: rgba(255,255,255,0.06);
  padding: 32px 28px;
  border: 2px solid rgba(255,255,255,0.15);
  position: relative;
  overflow: visible;
  transition: background 0.3s;
}
/*
  True clockwise border draw using 4 absolutely positioned lines.
  overflow:visible so they aren't clipped. Each line sits inside the border area.
  Top: width 0→100%, delay 0s
  Right: height 0→100%, delay 0.2s
  Bottom: width 0→100% from right, delay 0.4s
  Left: height 0→100% from bottom, delay 0.6s
*/
/* Top edge */
.service-item::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  height: 2px; width: 0;
  background: #eec827;
  z-index: 2;
  pointer-events: none;
  transition: width 0s linear 0s;
}
/* Bottom edge (right→left via rtl direction trick: start right, go left) */
.service-item::after {
  content: '';
  position: absolute;
  bottom: -2px; right: -2px;
  height: 2px; width: 0;
  background: #eec827;
  z-index: 2;
  pointer-events: none;
  transition: width 0s linear 0s;
}
.service-item:hover::before {
  width: calc(100% + 4px);
  transition: width 0.22s linear 0s;
}
.service-item:hover::after {
  width: calc(100% + 4px);
  transition: width 0.22s linear 0.44s;
}
/* Right + Left edges via border-color with delay */
.service-item {
  border-right-color:  rgba(255,255,255,0.15);
  border-left-color:   rgba(255,255,255,0.15);
}
.service-item:hover {
  background: rgba(255,255,255,0.06);
  border-top-color:    rgba(255,255,255,0.0);
  border-right-color:  #eec827;
  border-bottom-color: rgba(255,255,255,0.0);
  border-left-color:   #eec827;
  transition:
    background 0.3s,
    border-top-color    0s 0s,
    border-bottom-color 0s 0s,
    border-right-color  0.22s linear 0.22s,
    border-left-color   0.22s linear 0.66s;
}
.service-item:not(:hover) {
  border-color: rgba(255,255,255,0.15);
  transition: background 0.3s, border-color 0s;
}
.service-item:not(:hover)::before,
.service-item:not(:hover)::after { width: 0; transition: width 0s; }
.service-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
}
.service-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 10px;
}
.service-desc { font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.75; margin-bottom: 16px; }
.service-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.service-tag {
  font-size: 11px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ================================
   TESTIMONIALS
================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 60px;
}
.testimonial {
  background: #FFFFFF;
  border: 1px solid #E2DDD5;
  border-radius: 0;
  padding: 32px;
}
.testimonial-stars { color: #eec827; font-size: 16px; letter-spacing: 3px; margin-bottom: 14px; }
.testimonial-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 500;
  color: #2A2420;
  line-height: 1.8;
  margin-bottom: 20px;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.author-avatar {
  width: 36px; height: 36px;
  background: #eec827;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #104840;
}
.author-name { font-weight: 700; font-size: 14px; color: #104840; }
.author-role { font-size: 12px; color: #8A8480; }
.result-badge {
  display: inline-block;
  background: rgba(16,72,64,0.07);
  border: 1px solid rgba(16,72,64,0.18);
  color: #104840;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 0;
  margin-top: 12px;
}

/* ================================
   SEO CONTENT SECTION
================================ */
.seo-section {
  background: #FFFFFF;
  padding: 0;
}
.seo-inner { max-width: clamp(1200px, 90vw, 1440px); margin: 0 auto; }
.seo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.seo-content h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  color: var(--white);
  line-height: 0.95;
  margin-bottom: 24px;
}
.seo-content p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 16px;
}
.seo-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.stat-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 20px;
}
.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-label { font-size: 13px; color: var(--text); }

/* ================================
   CTA SECTION
================================ */
.cta-section {
  padding: 80px clamp(24px, 4vw, 60px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(237,201,38,0.06) 0%, transparent 70%);
}
.cta-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(60px, 10vw, 120px);
  color: #FFFFFF;
  line-height: 0.92;
  margin-bottom: 32px;
}
.cta-title span { color: #FFFFFF; }
.cta-sub {
  font-size: 17px;
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  max-width: 500px;
  margin: 0 auto 40px;
}
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ================================
   SOCIAL SECTION
================================ */
.social-section { background: var(--dark); padding: 0; }

.social-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 48px;
}
.social-tab {
  padding: 20px 28px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-tab:hover { color: var(--white); }
.social-tab.active { color: var(--white); border-bottom-color: var(--accent); }
.platform-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.ig-dot { background: #e1306c; }
.li-dot { background: #0077b5; }
.tt-dot { background: #ff0050; }

.social-content { padding: 80px clamp(24px, 4vw, 60px); max-width: clamp(1200px, 90vw, 1440px); margin: 0 auto; }
.social-panel { display: none; }
.social-panel.active { display: block; animation: fadeUp 0.3s ease; }

.platform-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}
.platform-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  color: var(--white);
  line-height: 1;
  margin-bottom: 6px;
}
.platform-strategy { font-size: 14px; color: var(--text); max-width: 440px; }
.platform-meta { text-align: right; }
.platform-freq {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--accent);
  line-height: 1;
}
.platform-freq-label { font-size: 12px; color: var(--muted); }

.content-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}
.pillar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 20px;
}
.pillar-pct {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}
.pillar-name { font-weight: 600; font-size: 14px; color: var(--white); margin-bottom: 6px; }
.pillar-desc { font-size: 12px; color: var(--muted); }

.post-ideas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}
.post-idea {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
.post-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--border);
  width: 28px;
}
.post-title { font-weight: 600; font-size: 14px; color: var(--white); margin-bottom: 3px; }
.post-format { font-size: 12px; color: var(--muted); }
.post-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0;
  flex-shrink: 0;
}
.type-reel { background: rgba(225,48,108,0.12); color: #e1306c; border: 1px solid rgba(225,48,108,0.2); }
.type-carousel { background: rgba(237,201,38,0.1); color: var(--accent); border: 1px solid rgba(237,201,38,0.22); }
.type-post { background: rgba(0,119,181,0.12); color: #0077b5; border: 1px solid rgba(0,119,181,0.2); }
.type-tiktok { background: rgba(255,0,80,0.1); color: #ff0050; border: 1px solid rgba(255,0,80,0.2); }
.type-text { background: rgba(0,0,0,0.05); color: var(--text); border: 1px solid var(--border); }
.type-video { background: rgba(16,72,64,0.08); color: var(--forest); border: 1px solid rgba(16,72,64,0.2); }

.caption-example {
  background: rgba(237,201,38,0.06);
  border: 1px solid rgba(237,201,38,0.2);
  border-radius: 0;
  padding: 24px 28px;
}
.caption-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.caption-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  color: var(--white);
  line-height: 1.8;
  white-space: pre-line;
}
.hashtags { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: rgba(0,119,181,0.8); margin-top: 12px; }

/* ================================
   FOOTER
================================ */
.site footer {
  background: #0D0D0D;
  border-top: 3px solid #104840;
  padding: 80px clamp(24px, 4vw, 60px) 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 48px;
  max-width: clamp(1200px, 90vw, 1440px);
  margin: 0 auto 48px;
}
.footer-brand-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  color: #FFFFFF;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.footer-brand-name span { color: #eec827; }
.footer-tagline { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.78; max-width: 320px; margin-bottom: 20px; }
.footer-socials { display: flex; gap: 10px; }
.social-link {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s;
}
.social-link:hover { border-color: #eec827; color: #eec827; }
.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col li { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.78; }
.footer-col a { font-size: 15px; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: #FFFFFF; }
.footer-bottom {
  max-width: clamp(1200px, 90vw, 1440px);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; gap: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom .footer-bottom-text { font-size: 10px !important; color: rgba(255,255,255,0.45); line-height: 1.75; }
.schema-note {
  background: #eec827;
  border: 1px solid #eec827;
  border-radius: 0;
  padding: 5px 12px;
  font-size: 12px;
  color: #000000;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand-cta-band {
  background: #104840;
  padding: 96px clamp(24px, 4vw, 60px);
}

.brand-cta-band-inner {
  max-width: clamp(1200px, 90vw, 1440px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) auto;
  gap: 32px 48px;
  align-items: end;
}

.brand-cta-band .overline {
  color: rgba(255, 255, 255, 0.65) !important;
  margin-bottom: 17px;
}

.brand-cta-band h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4vw, 48px);
  color: #FFFFFF;
  line-height: 1.24;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: none;
  width: 100%;
}

.brand-cta-band p {
  margin-top: 17px;
  max-width: none;
  width: 100%;
  font-size: 17px;
  color: rgba(255,255,255,0.76);
  line-height: 1.85;
}

.brand-cta-band-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 280px;
}

.brand-cta-band-actions a {
  min-height: var(--site-button-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.brand-cta-band-primary {
  background: #eec827;
  border: 2px solid #eec827;
  color: #000000;
}

.brand-cta-band-primary:hover {
  background: #F3D54B;
  border-color: #F3D54B;
  transform: translateY(-1px);
}

.brand-cta-band-secondary {
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.2);
  color: #FFFFFF;
}

.brand-cta-band-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-1px);
}

.split-start-cta {
  background: #FFFFFF;
  padding: 96px clamp(24px, 4vw, 60px);
}

.split-start-cta-soft {
  background: #F5F5F3;
}

.split-start-cta-inner {
  max-width: clamp(1200px, 90vw, 1440px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(560px, 1.06fr);
  gap: 8px !important;
  align-items: stretch;
}

.split-start-cta-left,
.split-start-cta-right {
  padding: 40px !important;
}

.split-start-cta-right {
  padding: 40px !important;
}

.split-start-cta-left {
  background: #F5F5F5;
  border-top: 3px solid #104840;
}

.split-start-cta-soft .split-start-cta-left {
  background: #FFFFFF;
}

.split-start-cta-right {
  background: #104840;
  color: #FFFFFF;
  padding: 56px clamp(17px, 2vw, 28px);
}

.split-start-cta-overline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  margin-bottom: 24px !important;
}


.split-start-cta-left .split-start-cta-overline {
  color: #104840;
}

.split-start-cta-right .split-start-cta-overline {
  color: rgba(255, 255, 255, 0.68);
}

.split-start-cta-left h2,
.split-start-cta-right h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(32px,4vw,40px) !important;
  letter-spacing: 0em;
  line-height: 1.3 !important;
  margin: 0;
  text-wrap: normal;
}

.split-start-cta-left h2 {
  font-size: clamp(32px, 4vw,40px) !important;
  line-height: 1.5 !important;
  color: #000000;
  max-width: none;
  width: 100%;
}

.split-start-cta-right h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  color: #FFFFFF;
  max-width: none;
  width: 100%;
}

.split-start-cta-left p,
.split-start-cta-right p {
  font-size: 17px;
  line-height: 32px;
  margin: 24px 0 0;
}

.split-start-cta-left p {
  color: #232221;
  max-width: none;
  width: 100%;
}

.split-start-cta-right p {
  color: rgba(255, 255, 255, 0.82);
  max-width: none;
  width: 100%;
}

.home-brief-card h3,
.home-start-copy h2,
.about-story-copy h2,
.about-process-head h2,
.about-proof-panel.light h2,
.about-cta-inner h2,
.about-principle.feature h3,
.about-step h3,
.section-title,
.split-start-cta-left h2 {
  color: #000000 !important;
  letter-spacing: 0em !important;
  font-weight: 800 !important;
  font-size: clamp(32px, 4vw,40px) !important;
  line-height: 1.3 !important;
}

[style*="background:#104840"] .section-title {
  color: #FFFFFF !important;
  letter-spacing: 0em !important;
  font-weight: 800 !important;
}

.cs-btn-gold,
.about-btn-secondary,
.split-start-cta-primary,
.brand-cta-band-primary,
.slide-btn-primary,
.schema-note {
  color: #000000 !important;
}

.cs-btn-gold:hover,
.about-btn-secondary:hover,
.split-start-cta-primary:hover,
.brand-cta-band-primary:hover,
.slide-btn-primary:hover {
  color: #000000 !important;
}

.about-principle.feature,
.about-principle.feature h3,
.about-principle.feature p,
.about-principle.feature .about-principle-kicker {
  color: #000000 !important;
}

[style*="background:#eec827"],
[style*="background: #eec827"],
[style*="background:#F3D54B"],
[style*="background: #F3D54B"] {
  color: #000000 !important;
}

[style*="background:#eec827"] h1,
[style*="background:#eec827"] h2,
[style*="background:#eec827"] h3,
[style*="background:#eec827"] h4,
[style*="background:#eec827"] p,
[style*="background:#eec827"] span,
[style*="background:#eec827"] strong,
[style*="background:#eec827"] a,
[style*="background: #eec827"] h1,
[style*="background: #eec827"] h2,
[style*="background: #eec827"] h3,
[style*="background: #eec827"] h4,
[style*="background: #eec827"] p,
[style*="background: #eec827"] span,
[style*="background: #eec827"] strong,
[style*="background: #eec827"] a,
[style*="background:#F3D54B"] h1,
[style*="background:#F3D54B"] h2,
[style*="background:#F3D54B"] h3,
[style*="background:#F3D54B"] h4,
[style*="background:#F3D54B"] p,
[style*="background:#F3D54B"] span,
[style*="background:#F3D54B"] strong,
[style*="background:#F3D54B"] a,
[style*="background: #F3D54B"] h1,
[style*="background: #F3D54B"] h2,
[style*="background: #F3D54B"] h3,
[style*="background: #F3D54B"] h4,
[style*="background: #F3D54B"] p,
[style*="background: #F3D54B"] span,
[style*="background: #F3D54B"] strong,
[style*="background: #F3D54B"] a {
  color: #000000 !important;
}

.split-start-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
  width: 100%;
}

.split-start-cta-actions a {
  min-height: var(--site-button-height, 56px);
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.split-start-cta-primary {
  background: #eec827;
  color: #000000;
}

.split-start-cta-primary:hover {
  background: #F2D64A;
  transform: translateY(-1px);
}

.split-start-cta-secondary {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.split-start-cta-secondary:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.04);
}

.split-start-cta a:focus-visible {
  outline: 3px solid #eec827;
  outline-offset: 3px;
}

/* ================================
   PAGE NAVIGATION (for demo)
================================ */
.demo-nav {
  /* Page switcher — use this if top nav links don't respond */
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: rgba(13,13,13,0.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 40px;
  padding: 6px 8px;
  display: flex;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}
.demo-btn {
  padding: 8px 16px;
  border-radius: 0;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
}
.demo-btn:hover { color: #104840; }
.demo-btn.active { background: #104840; color: #FFFFFF; border-radius: 30px; }

/* ================================
   SEO PAGE
================================ */
.seo-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 60px;
}
.seo-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 28px;
  margin-bottom: 16px;
}
.seo-card h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  color: var(--white);
  margin-bottom: 10px;
}
.seo-card p { font-size: 14px; color: var(--text); line-height: 1.7; }
.seo-card code {
  display: block;
  background: #104840;
  border: 1px solid #1d6e62;
  border-radius: 0;
  padding: 14px 16px;
  font-size: 13px;
  color: #eec827;
  margin-top: 10px;
  font-family: 'Courier New', monospace;
  line-height: 1.6;
}
.seo-priority {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 0;
  margin-bottom: 8px;
}
.p-urgent { background: rgba(255,107,53,0.15); color: var(--accent2); border: 1px solid rgba(255,107,53,0.25); }
.p-high { background: rgba(237,201,38,0.1); color: var(--accent); border: 1px solid rgba(237,201,38,0.22); }
.p-medium { background: rgba(16,72,64,0.08); color: var(--forest); border: 1px solid rgba(16,72,64,0.2); }
.blog-list { display: flex; flex-direction: column; gap: 10px; }
.blog-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.blog-title { font-size: 14px; color: var(--white); font-weight: 500; }
.blog-vol {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  color: var(--accent);
}


/* ── GREEN SECTION TEXT OVERRIDES ── */
[style*="background:#104840"] .overline { color: rgba(255,255,255,0.62); }
[style*="background:#104840"] .overline::before { background: rgba(255,255,255,0.42); }
[style*="background:#104840"] .section-title { color: #FFFFFF; letter-spacing: 0em !important;font-weight: 800 !important;}
[style*="background:#104840"] .section-sub { color: rgba(255,255,255,0.8); }
[style*="background:#104840"] .testimonial-stars { color: #FFFFFF; }
[style*="background:#FFFFFF"] .overline { color: #104840; }
[style*="background:#FFFFFF"] .section-title { color: #104840; letter-spacing: 0em !important; font-weight: 800 !important;}
[style*="background:#FFFFFF"] .section-sub { color: #232221; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .nav-links { display: none !important; }
  .nav-hamburger { display: inline-flex !important; }
}
@media (max-width: 900px) {
  .site nav { padding: 0 16px; }
  .nav-inner { padding: 14px 0; gap: 12px; }
  .nav-logo img { height: 34px; max-width: 170px; }
  /* hero padding removed — slider layout */
  .section, .pricing-section, .seo-section, .cta-section { padding: 60px 20px; }
  .section-full { padding: 0; }
  /* hero padding removed — slider layout */
  .hero-content-wrap { padding: 0 20px; }
  .section-title { font-size: clamp(24px, 5.3vw, 36px); line-height: 1.3; letter-spacing: 0em !important;font-weight: 800 !important;}
  .hero-headline { font-size: clamp(52px, 14vw, 80px); }
  .hero-bottom { flex-direction: column; align-items: flex-start; }
  .work-grid { grid-template-columns: 1fr; }
  .work-item:first-child, .work-item:nth-child(4) { grid-column: 1; }
  .pricing-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .seo-grid, .seo-page-grid { grid-template-columns: 1fr; }
  .social-nav { padding: 0 20px; }
  .social-content { padding: 40px 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { padding: 0 20px; }
  footer { padding: 40px 20px 24px; }
  .demo-nav { bottom: 12px; padding: 6px 10px; }
  .demo-btn { padding: 6px 10px; font-size: 11px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { padding: 0 16px; }
  footer { padding: 32px 16px 20px; }
  .section, .pricing-section, .seo-section, .cta-section { padding: 48px 16px; }
  .hero-content-wrap { padding: 0 16px; }
}

/* Filter buttons (work page) */
.filter-btn {
  padding: 16px 24px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.filter-btn:hover { color: #104840; }
.filter-btn.active { color: #104840; border-bottom-color: #104840; }

/* ── ANNOUNCEMENT BAR ── */
.announcement-bar {
  background: #0d3c35;
  padding: 0 clamp(16px, 4vw, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 102;
  border-bottom: 1px solid rgba(237,201,38,0.18);
}
.ann-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: clamp(1200px, 90vw, 1440px);
  margin: 0 auto;
  gap: 10px 14px;
  row-gap: 8px;
}
.announcement-bar .ann-text {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes annBadgeBeep {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(237, 201, 38, 0);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(237, 201, 38, 0.55);
  }
}
.announcement-bar .ann-badge {
  background: #eec827;
  color: #104840;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 9px;
  flex-shrink: 0;
  border-radius: 2px;
  animation: annBadgeBeep 1.65s ease-in-out infinite;
  transform-origin: center center;
}
.announcement-bar .ann-cta {
  color: #eec827;
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(237,201,38,0.4);
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.announcement-bar .ann-cta:hover { border-color: #eec827; color: #FFE57A; }
@media (max-width: 640px) {
  .announcement-bar { padding: 7px 12px; height: auto; min-height: 38px; }
  .ann-inner { gap: 6px 10px; flex-wrap: wrap; }
  .announcement-bar .ann-text { font-size: 10px !important; letter-spacing: 0.02em; white-space: normal; }
  .announcement-bar .ann-badge { font-size: 8px !important; padding: 2px 6px !important; letter-spacing: 0.06em !important; }
  .announcement-bar .ann-cta { font-size: 10px !important; }
}
@media (max-width: 380px) {
  .announcement-bar { padding: 6px 8px; height: auto; min-height: 38px; }
  .ann-inner { gap: 5px 8px; }
  .announcement-bar .ann-text { font-size: 9px !important; white-space: normal; }
  .announcement-bar .ann-badge { font-size: 7px !important; padding: 2px 5px !important; }
  .announcement-bar .ann-cta { font-size: 9px !important; }
}
/* Legacy: pages without ann-inner (before site-chrome) */
.announcement-bar:not(:has(.ann-inner)) {
  gap: 12px;
  padding: 10px clamp(24px,4vw,60px);
}
.ann-dot { width: 6px; height: 6px; background: #eec827; border-radius: 50%; flex-shrink:0; }

/* ══════════════════════════════════════════════════════════
   HERO — primary.studio faithful layout
   White headline panel top, full-bleed visual fills rest
   ══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background: #FFFFFF;
  margin-top: 104px; /* ann-bar 38px + nav 66px */
  /* Full viewport minus the two fixed bars */
  height: calc(100vh - 104px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Each slide: absolute, full hero, flex column */
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.hero-slide.active { opacity: 1; pointer-events: auto; }

/* ── WHITE TOP TEXT PANEL ── */
.slide-top {
  background: #FFFFFF;
  padding: clamp(24px,3.5vh,44px) clamp(24px,4vw,60px) clamp(20px,3vh,36px);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.slide-top-inner {
  max-width: clamp(1200px,90vw,1440px);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 8px;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.hero-dot { display: none; }
.hero-eyebrow span {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #8A8480;
}
/* Headline — large, serif-weight sans, left-aligned, black, like reference */
.hero-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 3.2vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #0D0D0D;
  margin: 0;
  max-width: clamp(480px, 58vw, 680px);
}
.hero-headline .accent { color: #104840; }
/* Right column: desc + CTAs */
.slide-top-right {
  flex-shrink: 0;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-desc {
  font-size: 14px; line-height: 1.85; color: #232221;
}
.hero-desc strong { color: #0D0D0D; font-weight: 700; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Solid buttons — always visible on white */
.slide-btn-primary {
  min-height: var(--site-button-height);
  padding: 14px 28px;
  background: #eec827; color: #000000;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: 0.04em;
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s; cursor: pointer; border: 2px solid #eec827;
  white-space: nowrap;
}
.slide-btn-primary:hover { background: #F3D54B; color: #000000; border-color: #F3D54B; }
.slide-btn-secondary {
  min-height: var(--site-button-height);
  padding: 14px 28px;
  background: transparent; color: #104840;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  justify-content: center;
  border: 2px solid #104840; transition: background 0.2s, color 0.2s; cursor: pointer;
  white-space: nowrap;
}
.slide-btn-secondary:hover { background: #104840; color: #FFFFFF; }

/* ── FULL-BLEED VISUAL PANEL ── */
.slide-visual {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
/* Each slide gets its own brand-world gradient */
.slide-bg-1 .slide-visual {
  background: linear-gradient(135deg, #104840 0%, #0a3028 35%, #165a4a 65%, #0d3d32 100%);
}
.slide-bg-2 .slide-visual {
  background: linear-gradient(125deg, #0a0e1a 0%, #111830 40%, #1a2448 70%, #0d1428 100%);
}
.slide-bg-3 .slide-visual {
  background: linear-gradient(135deg, #1c1400 0%, #2e2000 40%, #3d2c00 65%, #1a1200 100%);
}
.slide-bg-4 .slide-visual {
  background: linear-gradient(130deg, #1a0a04 0%, #2e1208 40%, #3d1a0a 65%, #1a0804 100%);
}
.slide-bg-5 .slide-visual {
  background: linear-gradient(135deg, #050d1a 0%, #0a1628 45%, #0d2035 70%, #06111e 100%);
}

/* Noise grain overlay on visuals */
.slide-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

/* Giant ghost word — bottom-left, like primary.studio lettering */
.slide-visual-text {
  position: absolute;
  bottom: -0.08em;
  left: clamp(24px,4vw,60px);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(120px, 22vw, 320px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.1);
  letter-spacing: 0.02em;
  pointer-events: none; user-select: none; white-space: nowrap;
  z-index: 2;
}

/* Branded mockup card — centre-right, like the Lovable billboard */
.slide-mockup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-20%, -50%);
  width: clamp(320px, 52%, 700px);
  aspect-ratio: 16/10;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.5);
  z-index: 3;
}
.slide-mockup-inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px,4%,40px);
  position: relative;
}
/* Each mockup has its own gradient inside */
.mockup-s1 { background: linear-gradient(135deg, #b89a18 0%, #6e5e10 45%, #0a2820 100%); }
.mockup-s2 { background: linear-gradient(135deg, #104840 0%, #0d3c35 100%); }
.mockup-s3 { background: linear-gradient(120deg, #1a1a00 0%, #eec827 150%); }
.mockup-s4 { background: linear-gradient(135deg, #2a1206 0%, #FC7942 100%); }
.mockup-s5 { background: linear-gradient(120deg, #0a1628 0%, #104840 100%); }

.mockup-logo {
  position: absolute; top: clamp(14px,3%,24px); left: clamp(14px,3%,24px);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(14px,2%,17px); letter-spacing: 0.12em;
  color: rgba(255,255,255,0.9);
}
.mockup-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(17px,3.5%,32px);
  color: #FFFFFF; line-height: 1.15;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.2);
  margin-bottom: clamp(10px,2%,17px);
  position: relative; z-index: 2;
}
.mockup-url {
  font-size: clamp(10px,1.5%,13px); color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
  position: relative; z-index: 2;
}
/* Decorative shape inside mockup */
.mockup-shape {
  position: absolute;
  right: clamp(16px,5%,48px); top: 50%;
  transform: translateY(-50%);
  width: clamp(80px,18%,160px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  z-index: 1;
}
.mockup-shape::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 40%;
  aspect-ratio: 1;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
}

/* Stat pills — bottom-right of visual */
.slide-stat-block {
  position: absolute;
  bottom: clamp(24px,4vh,48px);
  left: clamp(24px,4vw,60px);
  display: flex;
  gap: 2px;
  z-index: 4;
}
.slide-stat {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 14px 20px;
  backdrop-filter: blur(8px);
}
.slide-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px; color: #eec827; line-height: 1;
}
.slide-stat-label {
  font-size: 10px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em; margin-top: 2px;
}

/* Thin dividing line between white and visual */
.slide-divider { height: 1px; background: #E8E4DF; flex-shrink: 0; }

/* ── SLIDER CHROME ── */
.hero-controls {
  position: absolute;
  bottom: 20px; right: clamp(24px,4vw,60px);
  display: flex; gap: 6px; z-index: 10;
}
.hero-dot-btn {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: transparent; cursor: pointer;
  transition: all 0.3s; padding: 0;
}
.hero-dot-btn.active {
  background: #eec827; border-color: #eec827;
  width: 26px; border-radius: 4px;
}
.hero-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: rgba(255,255,255,0.08); z-index: 10;
}
.hero-progress-fill { height: 100%; background: #eec827; width: 0%; }
.hero-counter {
  position: absolute; bottom: 14px; right: clamp(24px,4vw,60px);
  font-family: 'Bebas Neue', sans-serif; font-size: 13px;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.35); z-index: 10;
}

/* ── BENEFIT MARQUEE (like primary.studio's scrolling tags) ── */
.hero-marquee-wrap {
  background: #FFFFFF;
  border-top: 1px solid #E8E4DF;
  overflow: hidden;
  flex-shrink: 0;
  /* sits just below the hero */
}
.hero-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.hero-marquee-track:hover { animation-play-state: paused; }
.hero-marquee-item {
  display: flex; align-items: center; gap: 0;
  white-space: nowrap;
}
.hero-marquee-tag {
  padding: 14px 28px;
  font-size: 13px; font-weight: 600; color: #232221;
  letter-spacing: 0.01em;
  border-right: 1px solid #E8E4DF;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.hero-marquee-tag:hover { color: #104840; background: #F5F5F3; }
.hero-marquee-tag .tag-arrow { color: #104840; font-weight: 800; margin-right: 8px; }

/* ── BOTTOM VISUAL PANEL ── */
.slide-visual {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
/* Each slide's visual bg */
.slide-bg-1 .slide-visual { background: linear-gradient(135deg, #104840 0%, #0d3c35 40%, #1a5c50 70%, #104840 100%); }
.slide-bg-2 .slide-visual { background: linear-gradient(125deg, #0D0D0D 0%, #1a1a2e 50%, #2d1b4e 100%); }
.slide-bg-3 .slide-visual { background: linear-gradient(135deg, #1a1a10 0%, #2a2a0a 40%, #3a3a10 100%); }
/* Slide 4 Harvesters: brand royal blue → much darker royal blue contrast */
.slide-bg-4 .slide-visual { background: linear-gradient(135deg, #08163a 0%, #112566 50%, #050d22 100%); }
/* Slide 5 Glenville: navy card → darker navy contrast */
.slide-bg-5 .slide-visual { background: linear-gradient(135deg, #02091e 0%, #061538 50%, #010410 100%); }

/* Large ghost text inside the visual — editorial feel */
.slide-visual-text {
  position: absolute;
  bottom: -0.15em;
  left: clamp(24px,4vw,60px);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(100px, 20vw, 280px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.12);
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Visual content overlay — project thumbnail or stat */
.slide-visual-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(24px,4vw,60px);
}
.slide-stat-block {
  display: flex;
  gap: 2px;
  flex-direction: column;
}
.slide-stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 20px 28px;
  backdrop-filter: blur(4px);
}
.slide-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: #eec827;
  line-height: 1;
}
.slide-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* Visual divider line */
.slide-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  flex-shrink: 0;
}

/* ── SLIDER CONTROLS ── */
.hero-controls {
  position: absolute;
  bottom: 24px;
  left: clamp(24px,4vw,60px);
  display: flex;
  gap: 6px;
  z-index: 10;
}
.hero-dot-btn {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}
.hero-dot-btn.active {
  background: #eec827;
  border-color: #eec827;
  width: 28px;
  border-radius: 4px;
}
.hero-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.12);
  z-index: 10;
}
.hero-progress-fill {
  height: 100%;
  background: #eec827;
  width: 0%;
}
.hero-counter {
  position: absolute;
  bottom: 17px;
  right: clamp(24px,4vw,60px);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  z-index: 10;
}

/* ── WHY WORK WITH US ── */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.why-item {
  background: #FFFFFF;
  padding: 40px 36px;
  border: 1px solid #E2DDD5;
  transition: border-color 0.3s;
  position: relative;
}
.why-item:hover { border-color: #104840; }
.why-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #eec827;
  margin-bottom: 16px;
}
.why-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #104840;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.why-desc { font-size: 15px; color: #232221; line-height: 1.75; }
.why-item.featured-why {
  background: #104840;
  border-color: #104840;
}
.why-item.featured-why .why-num { color: rgba(255,255,255,0.4); }
.why-item.featured-why .why-title { color: #FFFFFF; }
.why-item.featured-why .why-desc { color: rgba(255,255,255,0.8); }

/* ── NEWSLETTER ── */

.newsletter-left {}
.newsletter-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #eec827;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.newsletter-tag::before { content:''; width:20px; height:1px; background:#eec827; }
.newsletter-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(24px,2.5vw,36px);
  color: #FFFFFF;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.newsletter-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  max-width: 420px;
}
.newsletter-right {}
.newsletter-form {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
}
.newsletter-input {
  flex: 1;
  padding: 16px 17px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-right: none;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.newsletter-input::placeholder { color: rgba(255,255,255,0.35); }
.newsletter-input:focus { border-color: #eec827; }
.newsletter-btn {
  width: 100%;
  padding: 16px 28px;
  background: #eec827;
  color: #104840;
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.newsletter-btn:hover { background: #FFFFFF; color: #104840; }
.newsletter-note { font-size: 12px; color: rgba(255,255,255,0.35); line-height: 1.6; }
.newsletter-perks {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.newsletter-perk {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}
.newsletter-perk::before {
  content: '✓';
  color: #eec827;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}



/* === SERVICE PAGE EXTRAS === */
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ══ CASE STUDY PAGES ══════════════════════════════════════════ */
.cs-hero {
  padding: 200px clamp(24px,4vw,60px) 100px;
}
.cs-hero::after {
  background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(237,201,38,0.07) 0%, transparent 65%);
.cs-hero-inner { max-width: clamp(1200px,90vw,1440px); margin: 0 auto; position: relative; z-index: 1; }
}
.cs-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(255,255,255,0.45);
.cs-back:hover { color: #eec827; }
}
.cs-category {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;
}
.cs-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
}
.cs-title {
  font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1.0;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cs-title .cs-title-accent {
  display: inline;
.cs-title .cs-title-accent { color: #eec827; }
}
.cs-subtitle {
  font-size: 17px; color: rgba(255,255,255,0.65);
  max-width: 600px; line-height: 1.85;
}
.cs-hero-meta {
  display: flex; gap: 48px; margin-top: 56px;
.cs-meta-item {}
}
.cs-meta-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
.cs-meta-value { font-size: 15px; font-weight: 600; color: #FFFFFF; }
/* Content area — matches .pricing-inner exactly */
.cs-body { padding: 0; }
}
.cs-body-inner {
  padding: 0 clamp(24px,4vw,60px);
/* Section divider — canonical definition */
.cs-section { padding: 96px 0; border-bottom: 1px solid #E8E4DF; }
.cs-section:last-of-type { border-bottom: none; }
}
.cs-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #104840;
}
.cs-section-title {
  font-weight: 800; font-size: clamp(28px,3vw,42px);
  color: #0D0D0D; letter-spacing: -0.03em;
  line-height: 1.1; margin-bottom: 24px;
}
.cs-body-text {
  font-size: 16px; color: #232221; line-height: 1.9;
  max-width: 720px;
.cs-body-text + .cs-body-text { margin-top: 17px; }
/* Two-col layout */
}
.cs-two-col {
  display: grid; grid-template-columns: 3fr 2fr; gap: 80px; align-items: start;
}
.cs-three-col {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
/* Process steps */
.cs-process-grid { display: flex; flex-direction: column; gap: 0; }
}
.cs-process-step {
  display: grid; grid-template-columns: 80px 1fr; gap: 32px;
  padding: 32px 0; border-bottom: 1px solid #E8E4DF;
.cs-process-step:last-child { border-bottom: none; }
}
.cs-step-num {
  font-size: 48px; color: #E8E4DF; line-height: 1;
}
.cs-step-title {
  font-weight: 800; font-size: 17px; color: #0D0D0D;
  margin-bottom: 8px; letter-spacing: -0.01em;
.cs-step-desc { font-size: 15px; color: #232221; line-height: 1.75; }
/* Deliverables */
}
.cs-deliverables {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  margin-top: 32px;
}
.cs-deliverable {
  background: #F5F5F3;
  display: flex; align-items: flex-start; gap: 12px;
}
.cs-deliverable-check {
  width: 20px; height: 20px;
  background: #104840; color: #eec827;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0; margin-top: 1px;
.cs-deliverable-text { font-size: 14px; font-weight: 600; color: #2A2420; line-height: 1.4; }
/* Results stats */
}
.cs-results-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin-top: 40px;
}
.cs-result-card {
  background: #104840; padding: 36px 28px;
.cs-result-card:first-child { background: #0a3528; }
.cs-result-card:last-child { background: #0d3c32; }
}
.cs-result-num {
  font-size: 64px; color: #eec827; line-height: 1;
.cs-result-label { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; }
/* Testimonial */
}
.cs-quote {
  background: #F5F5F3;
  border-left: 4px solid #104840;
  padding: 40px 48px;
}
.cs-quote::before {
  content: '"';
  font-size: 120px; color: #E8E4DF;
  position: absolute; top: -20px; left: 36px;
  line-height: 1; pointer-events: none;
}
.cs-quote-text {
  font-size: 19px; color: #2A2420; line-height: 1.8;
  font-style: italic; margin-bottom: 24px;
  position: relative; z-index: 1;
.cs-quote-author { display: flex; align-items: center; gap: 14px; }
}
.cs-quote-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: #104840; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #eec827; flex-shrink: 0;
.cs-quote-name { font-size: 15px; font-weight: 700; color: #0D0D0D; }
.cs-quote-role { font-size: 12px; color: #8A8480; }
/* Mockup screens */
}
.cs-screens {
  display: grid; grid-template-columns: 3fr 2fr; gap: 8px;
  margin: 40px 0;
}
.cs-screen {
  aspect-ratio: 16/10; border-radius: 2px; overflow: hidden;
  position: relative; display: flex; align-items: flex-end;
}
.cs-screen-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.cs-screen-ghost {
  position: absolute; bottom: -0.1em; right: 16px;
  font-size: clamp(60px,10vw,120px);
  -webkit-text-stroke: 1px rgba(255,255,255,0.08);
  pointer-events: none; user-select: none;
/* CTA strip */
}
.cs-cta-strip {
  padding: 96px clamp(24px,4vw,60px);
.cs-cta-strip-inner { max-width: clamp(1200px,90vw,1440px); margin: 0 auto; }
}
.cs-cta-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.cs-cta-title {
  font-weight: 800; font-size: clamp(32px,4vw,56px);
  color: #FFFFFF; letter-spacing: -0.03em;
  line-height: 1.1; margin-bottom: 16px;
}
.cs-cta-sub {
  font-size: 16px; color: rgba(255,255,255,0.6);
  max-width: 480px; margin: 0 auto 40px;
.cs-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
}
.cs-btn-gold {
  padding: 15px 36px;
  background: #eec827; color: #104840;
  font-size: 14px; font-weight: 800; letter-spacing: 0.05em;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.2s; cursor: pointer; border: none;
.cs-btn-gold:hover { background: #f5e030; }
}
.cs-btn-outline {
  padding: 15px 36px;
  background: transparent; color: #FFFFFF;
  font-size: 14px; font-weight: 700; letter-spacing: 0.05em;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid rgba(255,255,255,0.3);
  transition: border-color 0.2s, background 0.2s; cursor: pointer;
.cs-btn-outline:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.06); }
/* Nav strip between projects */
}
.cs-nav-strip {
  display: flex; justify-content: space-between; align-items: center;
  padding: 32px 0;
  margin-top: 0;
}
.cs-nav-link {
  font-size: 14px; font-weight: 700; color: #104840;
  text-decoration: none; display: flex; align-items: center; gap: 6px;
  transition: gap 0.2s;
.cs-nav-link:hover { gap: 10px; }
/* ── Case study extras ── */
}
.cs-screens-three {
  grid-template-columns: 1fr 1fr 1fr;
  margin: 48px 0 0;
.cs-screens-three .cs-screen { aspect-ratio: 3/4; }
}
.cs-scope-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #104840;
  margin-bottom: 16px; margin-top: 8px;
.cs-body-inner > .cs-section:first-child { padding-top: 96px; } /* same as all sections */
  .cs-two-col { grid-template-columns: 1fr; gap: 40px; }
  .cs-three-col { grid-template-columns: 1fr; }
  .cs-results-row { grid-template-columns: 1fr; gap: 2px; }
  .cs-deliverables { grid-template-columns: 1fr 1fr; }
  .cs-screens { grid-template-columns: 1fr; }
  .cs-screens-three { grid-template-columns: 1fr; }
  .cs-screens-three .cs-screen { aspect-ratio: 16/9; }
  .cs-cta-title { font-size: clamp(28px,6vw,42px); }
  .cs-process-step { grid-template-columns: 48px 1fr; gap: 8px; }
  .cs-quote { padding: 32px 28px; }
  .cs-quote::before { font-size: 80px; left: 20px; }
/* ══ IMAGE GALLERY — 10 slots ══════════════════════════════════ */
}
.cs-gallery {
  margin-top: 48px;
/* Alternate layout: first and last rows span full width for variety */
.cs-gallery-slot:nth-child(1),
}
.cs-gallery-slot:nth-child(10) {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-gallery-slot {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/10;   /* large, landscape — like the reference */
}
.cs-gallery-slot img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform 0.5s ease;
.cs-gallery-slot:hover img { transform: scale(1.03); }
/* Upload placeholder state */
}
.cs-gallery-placeholder {
  position: absolute; inset: 0;
  align-items: flex-end; justify-content: flex-end;
  padding: 20px 24px; text-align: right;
  background: inherit;
.cs-gallery-placeholder-icon { display: none; }
}
.cs-gallery-placeholder-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  line-height: 1.3;
}
.cs-gallery-placeholder-sub {
  font-size: 10px; color: rgba(255,255,255,0.3); line-height: 1.4;
/* Gallery section label row */
}
.cs-gallery-header {
  display: flex; align-items: flex-end; justify-content: space-between;
}
.cs-gallery-note {
  font-size: 11px; color: #8A8480; font-style: italic;
/* ══ BRAND SHOWCASE — Colour + Typography ══════════════════════ */
}
.cs-brand-showcase {
  margin-top: 56px;
  gap: 64px;
/* Colour palette */
}
.cs-palette-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #104840;
}
.cs-palette-swatches {
  display: flex; gap: 0;
}
.cs-palette-swatch {
  flex: 1; height: 80px;
  transition: flex 0.3s ease;
.cs-palette-swatch:hover { flex: 2; }
}
.cs-palette-swatch-info {
  font-size: 11px; color: #232221;
  line-height: 1.5;
  padding-left: 12px;
.cs-palette-swatch-name { font-weight: 700; color: #2A2420; font-size: 12px; }
.cs-palette-swatch-hex  { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 0.06em; color: #8A8480; }
/* Typography showcase */
.cs-type-showcase { display: flex; flex-direction: column; gap: 24px; }
}
.cs-type-pair {
  background: #F5F3F0;
  border-left: 3px solid #104840;
}
.cs-type-role {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #104840;
}
.cs-type-sample-display {
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; color: #0D0D0D;
}
.cs-type-sample-body {
  font-size: 14px; color: #232221; line-height: 1.8;
}
.cs-type-meta {
  margin-top: 8px; font-size: 11px; color: #8A8480;
  .cs-gallery { grid-template-columns: 1fr; gap: 12px; }
  .cs-gallery-slot { aspect-ratio: 16/10; }
  .cs-gallery-slot:nth-child(1), .cs-gallery-slot:nth-child(10) { aspect-ratio: 16/9; }
  .cs-brand-showcase { grid-template-columns: 1fr; }
  .cs-palette-swatches { flex-wrap: wrap; }
  .cs-palette-swatch { flex: 0 0 calc(50% - 4px); height: 48px; }
/* ══════════════════════════════════════════════════════════════
   LAYOUT A — EDITORIAL SPLIT (Zunio)
   Left-anchored label column + right content, magazine feel
════════════════════════════════════════════════════════════════ */
}
.cs-a-hero {
}
.cs-a-hero-left {
  background: #0b1e38;
  padding: 200px clamp(40px,5vw,80px) 80px clamp(24px,4vw,60px);
}
.cs-a-hero-right {
}
.cs-a-hero-right-bg {
  background: linear-gradient(135deg,#1a2d50 0%,#0b1e38 50%,#104840 100%);
}
.cs-a-hero-ghost {
  font-size: clamp(120px, 18vw, 280px);
  -webkit-text-stroke: 1px rgba(255,255,255,0.06);
  line-height: 0.85;
}
.cs-a-number {
  font-size: 13px; letter-spacing: 0.3em;
  color: #eec827; margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;
}
.cs-a-number::before {
  content: ''; display: block;
  width: 40px; height: 1px; background: #eec827;
}
.cs-a-title {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
.cs-a-title .cs-a-accent { color: #eec827; }
}
.cs-a-subtitle {
  font-size: 16px; color: rgba(255,255,255,0.6);
  max-width: 440px; line-height: 1.85;
}
.cs-a-meta {
  display: flex; flex-direction: column; gap: 0;
  padding-top: 32px;
}
.cs-a-meta-row {
  display: grid; grid-template-columns: 120px 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cs-a-meta-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  padding-top: 2px;
}
.cs-a-meta-value {
  font-size: 14px; font-weight: 600; color: #FFFFFF;
/* Editorial body */
}
.cs-a-body {
  grid-template-columns: 220px 1fr;
  padding: 0 clamp(24px,4vw,60px);
}
.cs-a-sidebar {
  padding: 96px 48px 96px 0;
  position: sticky; top: 103px;
  align-self: start;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
}
.cs-a-sidebar-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #104840;
.cs-a-sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
}
.cs-a-sidebar-link {
  font-size: 13px; color: #8A8480; padding: 8px 0;
  border-bottom: 1px solid #F0EDEA;
  text-decoration: none; cursor: pointer;
}
.cs-a-sidebar-link::before {
  content: ''; width: 16px; height: 1px;
  background: #E8E4DF; flex-shrink: 0;
  transition: width 0.2s, background 0.2s;
.cs-a-sidebar-link:hover { color: #104840; }
.cs-a-sidebar-link:hover::before { width: 24px; background: #104840; }
.cs-a-content { padding: 96px 0 96px 64px; }
}
.cs-a-section {
  padding: 0 0 80px; margin-bottom: 80px;
  border-bottom: 1px solid #E8E4DF;
.cs-a-section:last-child { border-bottom: none; }
}
.cs-a-section-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: #104840; margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.cs-a-section-kicker::after {
  content: ''; flex: 1; height: 1px; background: #E8E4DF;
}
.cs-a-section-title {
  font-weight: 800; font-size: clamp(28px,3vw,44px);
  color: #0D0D0D; letter-spacing: -0.03em;
  line-height: 1.1; margin-bottom: 28px;
}
.cs-a-body-text {
  font-size: 16px; color: #232221; line-height: 1.95;
  max-width: 640px;
.cs-a-body-text + .cs-a-body-text { margin-top: 17px; }
}
.cs-a-two-col {
  display: grid; grid-template-columns: 3fr 2fr; gap: 64px;
}
.cs-a-scope-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #104840;
  margin-bottom: 16px; margin-top: 4px;
/* Stats row for layout A */
}
.cs-a-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; margin-top: 40px;
}
.cs-a-stat {
  background: #0b1e38; padding: 36px 28px;
.cs-a-stat:nth-child(2) { background: #0f2444; }
.cs-a-stat:nth-child(3) { background: #132850; }
}
.cs-a-stat-num {
  font-size: 60px; color: #eec827; line-height: 1;
.cs-a-stat-label { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; }
/* Gallery A */
}
.cs-a-gallery {
  margin-top: 48px;
}
.cs-a-gallery-slot {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}
.cs-a-gallery-slot:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-a-gallery-slot:last-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-a-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  position: relative; z-index: 1;
/* Process steps A */
.cs-a-process { display: flex; flex-direction: column; gap: 0; }
}
.cs-a-step {
  display: grid; grid-template-columns: 64px 1fr;
  gap: 32px; padding: 32px 0;
  border-bottom: 1px solid #E8E4DF; align-items: start;
.cs-a-step:last-child { border-bottom: none; }
}
.cs-a-step-num {
  font-size: 44px; color: #E8E4DF; line-height: 1;
}
.cs-a-step-title {
  font-weight: 800; font-size: 17px; color: #0D0D0D;
.cs-a-step-desc { font-size: 15px; color: #232221; line-height: 1.75; }
/* Brand showcase A */
}
.cs-a-brand-showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  margin-top: 48px;
/* ══════════════════════════════════════════════════════════════
   LAYOUT B — DARK IMMERSIVE (Veritas)
   Full-bleed dark sections, large type, magazine editorial
════════════════════════════════════════════════════════════════ */
}
.cs-b-hero {
  padding: 220px clamp(24px,4vw,60px) 100px;
  position: relative; overflow: hidden;
}
.cs-b-hero-inner {
  gap: 80px;
  align-items: end;
}
.cs-b-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
.cs-b-title {
  font-size: clamp(40px,5.5vw,80px);
  letter-spacing: -0.04em;
.cs-b-title .cs-b-accent { color: #eec827; }
.cs-b-right { display: flex; flex-direction: column; justify-content: flex-end; }
}
.cs-b-subtitle {
  font-size: 17px; color: rgba(255,255,255,0.55);
  line-height: 1.85; margin-bottom: 48px;
}
.cs-b-tags {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px;
}
.cs-b-tag {
  padding: 6px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
}
.cs-b-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cs-b-meta-item {
  padding: 20px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
.cs-b-meta-item:nth-child(odd) { padding-right: 32px; border-right: 1px solid rgba(255,255,255,0.06); }
.cs-b-meta-item:nth-child(even) { padding-left: 32px; }
}
.cs-b-meta-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
.cs-b-meta-value { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); }
/* Scrolling ticker between sections */
}
.cs-b-ticker {
  padding: 16px 0;
}
.cs-b-ticker-inner {
  display: inline-flex; gap: 48px;
  animation: tickerScroll 20s linear infinite;
}
.cs-b-ticker-item {
  font-size: 17px; letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 48px;
}
.cs-b-ticker-item::after {
  content: '◆'; font-size: 10px;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
/* Body B */
.cs-b-body { background: #FFFFFF; }
}
.cs-b-section {
  padding: 96px clamp(24px,4vw,60px);
  border-bottom: 1px solid #E8E4DF;
.cs-b-section:last-child { border-bottom: none; }
}
.cs-b-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: #104840;
}
.cs-b-section-title {
  font-weight: 800; font-size: clamp(32px,4vw,56px);
  color: #0D0D0D; letter-spacing: -0.03em;
  line-height: 1.0; margin-bottom: 32px;
}
.cs-b-two-col {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 80px; align-items: start;
}
.cs-b-body-text {
  font-size: 17px; color: #232221; line-height: 1.9;
  max-width: 600px;
.cs-b-body-text + .cs-b-body-text { margin-top: 20px; }
/* Dark stat strip */
}
.cs-b-stat-strip {
  padding: 80px clamp(24px,4vw,60px);
}
.cs-b-stat-strip-inner {
  max-width: clamp(1200px,90vw,1440px); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3,1fr);
}
.cs-b-stat-card {
  background: #181818; padding: 48px 36px;
.cs-b-stat-card:nth-child(2) { background: #1e1e1e; }
.cs-b-stat-card:nth-child(3) { background: #242424; }
}
.cs-b-stat-num {
  font-size: 72px; color: #eec827; line-height: 1;
.cs-b-stat-label { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.5; }
/* Gallery B */
}
.cs-b-gallery {
  margin-top: 64px;
}
.cs-b-gallery-slot {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
.cs-b-gallery-slot:first-child,
}
.cs-b-gallery-slot:last-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-b-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
/* Testimonial B — full bleed pull quote */
}
.cs-b-pullquote {
  padding: 80px clamp(24px,4vw,60px);
}
.cs-b-pullquote-inner {
  max-width: clamp(1200px,90vw,1440px); margin: 0 auto;
}
.cs-b-pullquote-mark {
  font-size: 120px; color: rgba(237,201,38,0.25);
  line-height: 0.7; margin-bottom: 24px;
}
.cs-b-pullquote-text {
  font-size: clamp(22px,3vw,36px); font-weight: 700;
  color: #FFFFFF; line-height: 1.4; letter-spacing: -0.02em;
  max-width: 900px; margin-bottom: 40px;
}
.cs-b-pullquote-author {
  display: flex; align-items: center; gap: 16px;
}
.cs-b-pullquote-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #eec827; display: flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 800;
  color: #104840; flex-shrink: 0;
.cs-b-pullquote-name { font-size: 15px; font-weight: 700; color: #FFFFFF; }
.cs-b-pullquote-role { font-size: 12px; color: rgba(255,255,255,0.5); }
/* Process B */
.cs-b-process { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 48px; }
}
.cs-b-process-item {
  background: #F5F5F3; padding: 40px 36px;
}
.cs-b-process-num {
  font-size: 52px; color: #E8E4DF; line-height: 1;
.cs-b-process-title { font-weight: 800; font-size: 17px; color: #0D0D0D; margin-bottom: 10px; }
.cs-b-process-desc { font-size: 15px; color: #232221; line-height: 1.75; }
/* Brand showcase B */
}
.cs-b-brand-showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  margin-top: 48px;
/* ══════════════════════════════════════════════════════════════
   LAYOUT C — CRAFT & TEXTURE (Aurora Brews)
   Warm, organic, editorial. Section-based with large imagery.
════════════════════════════════════════════════════════════════ */
}
.cs-c-hero {
  background: #080f04;
  padding: 220px clamp(24px,4vw,60px) 0;
  position: relative; overflow: hidden;
}
.cs-c-hero::before {
  position: absolute; inset: 0;
    radial-gradient(ellipse 60% 70% at 30% 60%, rgba(237,201,38,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(252,121,66,0.06) 0%, transparent 55%);
}
.cs-c-hero-inner {
  position: relative; z-index: 1;
}
.cs-c-hero-tags {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px;
}
.cs-c-tag {
  padding: 6px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
}
.cs-c-title {
  font-size: clamp(72px,12vw,180px);
  color: #FFFFFF; line-height: 0.88;
.cs-c-title .cs-c-accent { color: #eec827; }
}
.cs-c-hero-bottom {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; padding: 48px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 40px;
}
.cs-c-subtitle {
  font-size: 17px; color: rgba(255,255,255,0.6); line-height: 1.85;
}
.cs-c-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  align-content: start;
.cs-c-meta-item {}
}
.cs-c-meta-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
.cs-c-meta-value { font-size: 15px; font-weight: 600; color: #FFFFFF; }
/* Hero image strip */
}
.cs-c-hero-img-strip {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 4px; margin-top: 40px;
  max-width: 100%;
}
.cs-c-hero-img-slot {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 24px;
.cs-c-hero-img-slot:first-child { aspect-ratio: 16/9; }
}
.cs-c-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
/* Body C */
}
.cs-c-body {
}
.cs-c-section {
  padding: 96px clamp(24px,4vw,60px);
  border-bottom: 1px solid #E8E4DF;
.cs-c-section:last-child { border-bottom: none; }
}
.cs-c-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: #104840;
}
.cs-c-section-title {
  font-size: clamp(40px,5vw,72px);
  color: #0D0D0D; line-height: 0.92;
  letter-spacing: -0.01em; margin-bottom: 32px;
}
.cs-c-body-text {
  font-size: 17px !important; color: #232221 !important; line-height: 1.9 !important; font-weight: 500 !important;
  max-width: 640px;
.cs-c-body-text + .cs-c-body-text { margin-top: 17px; }
}
.cs-c-two-col {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 80px; align-items: start;
/* Results C — horizontal scrolling row */
}
.cs-c-stat-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2px; margin-top: 48px;
}
.cs-c-stat-card {
  background: #1e3c18; padding: 48px 36px;
.cs-c-stat-card:nth-child(2) { background: #142810; }
.cs-c-stat-card:nth-child(3) { background: #0a1a08; }
}
.cs-c-stat-num {
  font-size: 72px; color: #eec827; line-height: 1;
.cs-c-stat-label { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.5; }
/* Gallery C */
}
.cs-c-gallery {
  margin-top: 48px;
}
.cs-c-gallery-slot {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
.cs-c-gallery-slot:first-child,
}
.cs-c-gallery-slot:last-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-c-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
/* Process C — numbered row */
}
.cs-c-process {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; margin-top: 48px;
.cs-c-process-item { border-top: 3px solid #104840; padding-top: 28px; }
}
.cs-c-process-num {
  font-size: 56px; color: #E8E4DF; line-height: 1;
.cs-c-process-title { font-weight: 800; font-size: 17px; color: #0D0D0D; margin-bottom: 10px; }
.cs-c-process-desc { font-size: 15px; color: #232221; line-height: 1.75; }
/* Brand showcase C */
}
.cs-c-brand-showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  margin-top: 48px;
/* Responsive all new layouts */
  .cs-a-hero { grid-template-columns: 1fr; }
  .cs-a-hero-right { display: none; }
  .cs-a-body { grid-template-columns: 1fr; }
  .cs-a-sidebar { display: none; }
  .cs-a-content { padding: 48px 0; }
  .cs-a-two-col, .cs-b-two-col, .cs-c-two-col { grid-template-columns: 1fr; gap: 40px; }
  .cs-b-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .cs-b-process, .cs-c-process { grid-template-columns: 1fr; }
  .cs-b-stat-strip-inner, .cs-c-stat-row, .cs-a-stats { grid-template-columns: 1fr; }
  .cs-b-brand-showcase, .cs-a-brand-showcase, .cs-c-brand-showcase { grid-template-columns: 1fr; }
  .cs-b-meta { grid-template-columns: 1fr; }
  .cs-c-hero-bottom { grid-template-columns: 1fr; }
  .cs-c-title { font-size: clamp(56px,15vw,100px); }
  .cs-b-title { font-size: clamp(36px,10vw,56px); white-space: normal; }
  .cs-a-title { white-space: normal; font-size: clamp(32px,8vw,52px); }
  .cs-a-gallery, .cs-b-gallery, .cs-c-gallery { grid-template-columns: 1fr; }
  .cs-a-gallery-slot:first-child, .cs-a-gallery-slot:last-child,
  .cs-b-gallery-slot:first-child, .cs-b-gallery-slot:last-child,
}
  .cs-c-gallery-slot:first-child, .cs-c-gallery-slot:last-child {
    aspect-ratio: 16/9;
  }
  .cs-c-hero-img-strip { grid-template-columns: 1fr; }
/* === PORTFOLIO IMAGE FIXES === */
.work-thumb-img {
  object-fit: cover;
  filter: brightness(0.92);
}
.work-item:hover .work-thumb-img {
  transform: scale(1.04);
  filter: brightness(1);
/* === CASE STUDY GALLERY IMG === */
.cs-c-gallery-slot img,
}
.cs-c-hero-img-slot img {
  object-fit: cover;
  transition: transform 0.5s ease;
.cs-c-gallery-slot:hover img,
}
.cs-c-hero-img-slot:hover img {
  transform: scale(1.03);
/* === SERVICES PAGE === */
}
.svc-hub-grid {
  gap: 3px;
  margin: 64px 0 0;
}
.svc-hub-card {
  aspect-ratio: 4/3;
  background: #0D1A17;
}
.svc-hub-card img {
  object-fit: cover;
  filter: brightness(0.45) saturate(0.7);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.svc-hub-card:hover img {
  filter: brightness(0.25) saturate(0.5);
  transform: scale(1.05);
}
.svc-hub-card-body {
  padding: 36px 40px;
}
.svc-hub-card::after {
  background: linear-gradient(to top, rgba(10,26,20,0.92) 0%, rgba(10,26,20,0.3) 55%, transparent 100%);
  transition: opacity 0.4s;
}
.svc-hub-card:hover::after {
  background: linear-gradient(to top, rgba(10,26,20,0.96) 0%, rgba(10,26,20,0.7) 100%);
}
.svc-hub-num {
  letter-spacing: 0.18em;
}
.svc-hub-title {
  font-size: clamp(20px, 2.4vw, 30px);
}
.svc-hub-desc {
  line-height: 1.7;
  max-width: 340px;
  max-height: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}
.svc-hub-card:hover .svc-hub-desc {
  max-height: 80px;
  opacity: 1;
}
.svc-hub-tags {
  margin-top: 14px;
}
.svc-hub-tag {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
}
.svc-hub-arrow {
  top: 32px;
  right: 36px;
  width: 40px;
  height: 40px;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.svc-hub-card:hover .svc-hub-arrow {
/* Featured card — spans 2 cols */
}
.svc-hub-card.featured {
  grid-column: 1 / 3;
  aspect-ratio: 21/7;
}
.svc-hub-card.featured .svc-hub-title {
  font-size: clamp(28px, 3.5vw, 48px);
/* Process strip on services page */
}
.svc-process-strip {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 80px;
}
.svc-process-cell {
  border-bottom: 1px solid #E8E4DF;
.svc-process-cell:last-child { border-right: none; }
}
.svc-process-n {
  color: rgba(16,72,64,0.12);
}
.svc-process-title {
}
.svc-process-desc {
  color: #232221;
/* Capability bar on services page */
}
.svc-capability-row {
  padding: 22px 0;
  border-bottom: 1px solid #E8E4DF;
  transition: background 0.2s;
.svc-capability-row:hover { background: #FAFAF8; }
}
.svc-capability-num {
  color: rgba(16,72,64,0.3);
  width: 56px;
}
.svc-capability-name {
}
.svc-capability-price {
  color: #8A8480;
  margin-right: 24px;
}
.svc-capability-arrow {
  opacity: 0.3;
  transition: opacity 0.2s, transform 0.2s;
}
.svc-capability-row:hover .svc-capability-arrow {
  opacity: 1;
  transform: translateX(4px);
/* === PORTFOLIO PAGE REDESIGN === */
}
.portfolio-hero {
  padding: 280px clamp(24px,4vw,60px) 80px;
}
.portfolio-hero-bg {
  object-fit: cover;
  opacity: 0.08;
  filter: saturate(0);
}
.portfolio-masonry {
  gap: 3px;
/* Featured — item 1: full width tall */
}
.portfolio-masonry .work-item:nth-child(1) {
  grid-column: 1 / 3;
}
.portfolio-masonry .work-item:nth-child(1) .work-thumb {
  aspect-ratio: 16/7;
/* Item 4: full width */
}
.portfolio-masonry .work-item:nth-child(4) {
  grid-column: 1 / 3;
}
.portfolio-masonry .work-item:nth-child(4) .work-thumb {
  aspect-ratio: 16/7;
/* Filter strip redesign */
}
.portfolio-filter-strip {
  border-bottom: 2px solid #E8E4DF;
  position: sticky;
  top: 103px;
  z-index: 90;
}
.portfolio-filter-inner {
  padding: 0 clamp(24px,4vw,60px);
}
.portfolio-filter-tabs {
  overflow-x: auto;
}
.portfolio-filter-tab {
  color: #8A8480;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
.portfolio-filter-tab:hover { color: #104840; }
}
.portfolio-filter-tab.active {
  border-bottom-color: #eec827;
}
.portfolio-count {
  color: #8A8480;
}
@media (max-width: 768px) {
  .svc-hub-grid { grid-template-columns: 1fr; }
  .svc-hub-card.featured { grid-column: 1; aspect-ratio: 4/3; }
  .svc-process-strip { grid-template-columns: 1fr 1fr; }
  .portfolio-masonry .work-item:nth-child(1),
  .portfolio-masonry .work-item:nth-child(4) { grid-column: 1; }
  .portfolio-masonry .work-item:nth-child(1) .work-thumb,
  .portfolio-masonry .work-item:nth-child(4) .work-thumb { aspect-ratio: 16/9; }
  .portfolio-masonry { grid-template-columns: 1fr; }

/* === PROJECT PAGE EXTRAS === */
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ══ CASE STUDY PAGES ══════════════════════════════════════════ */
}
.cs-hero {
  padding: 200px clamp(24px,4vw,60px) 100px;
}
.cs-hero::after {
  background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(237,201,38,0.07) 0%, transparent 65%);
.cs-hero-inner { max-width: clamp(1200px,90vw,1440px); margin: 0 auto; position: relative; z-index: 1; }
}
.cs-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(255,255,255,0.45);
.cs-back:hover { color: #eec827; }
}
.cs-category {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;
}
.cs-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
}
.cs-title {
  font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1.0;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cs-title .cs-title-accent {
  display: inline;
.cs-title .cs-title-accent { color: #eec827; }
}
.cs-subtitle {
  font-size: 17px; color: rgba(255,255,255,0.65);
  max-width: 600px; line-height: 1.85;
}
.cs-hero-meta {
  display: flex; gap: 48px; margin-top: 56px;
.cs-meta-item {}
}
.cs-meta-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
.cs-meta-value { font-size: 15px; font-weight: 600; color: #FFFFFF; }
/* Content area — matches .pricing-inner exactly */
.cs-body { padding: 0; }
}
.cs-body-inner {
  padding: 0 clamp(24px,4vw,60px);
/* Section divider — canonical definition */
.cs-section { padding: 96px 0; border-bottom: 1px solid #E8E4DF; }
.cs-section:last-of-type { border-bottom: none; }
}
.cs-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #104840;
}
.cs-section-title {
  font-weight: 800; font-size: clamp(28px,3vw,42px);
  color: #0D0D0D; letter-spacing: -0.03em;
  line-height: 1.1; margin-bottom: 24px;
}
.cs-body-text {
  font-size: 16px; color: #232221; line-height: 1.9;
  max-width: 720px;
.cs-body-text + .cs-body-text { margin-top: 17px; }
/* Two-col layout */
}
.cs-two-col {
  display: grid; grid-template-columns: 3fr 2fr; gap: 80px; align-items: start;
}
.cs-three-col {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
/* Process steps */
.cs-process-grid { display: flex; flex-direction: column; gap: 0; }
}
.cs-process-step {
  display: grid; grid-template-columns: 80px 1fr; gap: 32px;
  padding: 32px 0; border-bottom: 1px solid #E8E4DF;
.cs-process-step:last-child { border-bottom: none; }
}
.cs-step-num {
  font-size: 48px; color: #E8E4DF; line-height: 1;
}
.cs-step-title {
  font-weight: 800; font-size: 17px; color: #0D0D0D;
  margin-bottom: 8px; letter-spacing: -0.01em;
.cs-step-desc { font-size: 15px; color: #232221; line-height: 1.75; }
/* Deliverables */
}
.cs-deliverables {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  margin-top: 32px;
}
.cs-deliverable {
  background: #F5F5F3;
  display: flex; align-items: flex-start; gap: 12px;
}
.cs-deliverable-check {
  width: 20px; height: 20px;
  background: #104840; color: #eec827;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0; margin-top: 1px;
.cs-deliverable-text { font-size: 14px; font-weight: 600; color: #2A2420; line-height: 1.4; }
/* Results stats */
}
.cs-results-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin-top: 40px;
}
.cs-result-card {
  background: #104840; padding: 36px 28px;
.cs-result-card:first-child { background: #0a3528; }
.cs-result-card:last-child { background: #0d3c32; }
}
.cs-result-num {
  font-size: 64px; color: #eec827; line-height: 1;
.cs-result-label { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; }
/* Testimonial */
}
.cs-quote {
  background: #F5F5F3;
  border-left: 4px solid #104840;
  padding: 40px 48px;
}
.cs-quote::before {
  content: '"';
  font-size: 120px; color: #E8E4DF;
  position: absolute; top: -20px; left: 36px;
  line-height: 1; pointer-events: none;
}
.cs-quote-text {
  font-size: 19px; color: #2A2420; line-height: 1.8;
  font-style: italic; margin-bottom: 24px;
  position: relative; z-index: 1;
.cs-quote-author { display: flex; align-items: center; gap: 14px; }
}
.cs-quote-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: #104840; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #eec827; flex-shrink: 0;
.cs-quote-name { font-size: 15px; font-weight: 700; color: #0D0D0D; }
.cs-quote-role { font-size: 12px; color: #8A8480; }
/* Mockup screens */
}
.cs-screens {
  display: grid; grid-template-columns: 3fr 2fr; gap: 8px;
  margin: 40px 0;
}
.cs-screen {
  aspect-ratio: 16/10; border-radius: 2px; overflow: hidden;
  position: relative; display: flex; align-items: flex-end;
}
.cs-screen-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.cs-screen-ghost {
  position: absolute; bottom: -0.1em; right: 16px;
  font-size: clamp(60px,10vw,120px);
  -webkit-text-stroke: 1px rgba(255,255,255,0.08);
  pointer-events: none; user-select: none;
/* CTA strip */
}
.cs-cta-strip {
  padding: 96px clamp(24px,4vw,60px);
.cs-cta-strip-inner { max-width: clamp(1200px,90vw,1440px); margin: 0 auto; }
}
.cs-cta-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.cs-cta-title {
  font-weight: 800; font-size: clamp(32px,4vw,56px);
  color: #FFFFFF; letter-spacing: -0.03em;
  line-height: 1.1; margin-bottom: 16px;
}
.cs-cta-sub {
  font-size: 16px; color: rgba(255,255,255,0.6);
  max-width: 480px; margin: 0 auto 40px;
.cs-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
}
.cs-btn-gold {
  padding: 15px 36px;
  background: #eec827; color: #104840;
  font-size: 14px; font-weight: 800; letter-spacing: 0.05em;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.2s; cursor: pointer; border: none;
.cs-btn-gold:hover { background: #f5e030; }
}
.cs-btn-outline {
  padding: 15px 36px;
  background: transparent; color: #FFFFFF;
  font-size: 14px; font-weight: 700; letter-spacing: 0.05em;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid rgba(255,255,255,0.3);
  transition: border-color 0.2s, background 0.2s; cursor: pointer;
.cs-btn-outline:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.06); }
/* Nav strip between projects */
}
.cs-nav-strip {
  display: flex; justify-content: space-between; align-items: center;
  padding: 32px 0;
  margin-top: 0;
}
.cs-nav-link {
  font-size: 14px; font-weight: 700; color: #104840;
  text-decoration: none; display: flex; align-items: center; gap: 6px;
  transition: gap 0.2s;
.cs-nav-link:hover { gap: 10px; }
/* ── Case study extras ── */
}
.cs-screens-three {
  grid-template-columns: 1fr 1fr 1fr;
  margin: 48px 0 0;
.cs-screens-three .cs-screen { aspect-ratio: 3/4; }
}
.cs-scope-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #104840;
  margin-bottom: 16px; margin-top: 8px;
.cs-body-inner > .cs-section:first-child { padding-top: 96px; } /* same as all sections */
  .cs-two-col { grid-template-columns: 1fr; gap: 40px; }
  .cs-three-col { grid-template-columns: 1fr; }
  .cs-results-row { grid-template-columns: 1fr; gap: 2px; }
  .cs-deliverables { grid-template-columns: 1fr 1fr; }
  .cs-screens { grid-template-columns: 1fr; }
  .cs-screens-three { grid-template-columns: 1fr; }
  .cs-screens-three .cs-screen { aspect-ratio: 16/9; }
  .cs-cta-title { font-size: clamp(28px,6vw,42px); }
  .cs-process-step { grid-template-columns: 48px 1fr; gap: 8px; }
  .cs-quote { padding: 32px 28px; }
  .cs-quote::before { font-size: 80px; left: 20px; }
/* ══ IMAGE GALLERY — 10 slots ══════════════════════════════════ */
}
.cs-gallery {
  margin-top: 48px;
/* Alternate layout: first and last rows span full width for variety */
.cs-gallery-slot:nth-child(1),
}
.cs-gallery-slot:nth-child(10) {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-gallery-slot {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/10;   /* large, landscape — like the reference */
}
.cs-gallery-slot img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform 0.5s ease;
.cs-gallery-slot:hover img { transform: scale(1.03); }
/* Upload placeholder state */
}
.cs-gallery-placeholder {
  position: absolute; inset: 0;
  align-items: flex-end; justify-content: flex-end;
  padding: 20px 24px; text-align: right;
  background: inherit;
.cs-gallery-placeholder-icon { display: none; }
}
.cs-gallery-placeholder-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  line-height: 1.3;
}
.cs-gallery-placeholder-sub {
  font-size: 10px; color: rgba(255,255,255,0.3); line-height: 1.4;
/* Gallery section label row */
}
.cs-gallery-header {
  display: flex; align-items: flex-end; justify-content: space-between;
}
.cs-gallery-note {
  font-size: 11px; color: #8A8480; font-style: italic;
/* ══ BRAND SHOWCASE — Colour + Typography ══════════════════════ */
}
.cs-brand-showcase {
  margin-top: 56px;
  gap: 64px;
/* Colour palette */
}
.cs-palette-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #104840;
}
.cs-palette-swatches {
  display: flex; gap: 0;
}
.cs-palette-swatch {
  flex: 1; height: 80px;
  transition: flex 0.3s ease;
.cs-palette-swatch:hover { flex: 2; }
}
.cs-palette-swatch-info {
  font-size: 11px; color: #232221;
  line-height: 1.5;
  padding-left: 12px;
.cs-palette-swatch-name { font-weight: 700; color: #2A2420; font-size: 12px; }
.cs-palette-swatch-hex  { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 0.06em; color: #8A8480; }
/* Typography showcase */
.cs-type-showcase { display: flex; flex-direction: column; gap: 24px; }
}
.cs-type-pair {
  background: #F5F3F0;
  border-left: 3px solid #104840;
}
.cs-type-role {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #104840;
}
.cs-type-sample-display {
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; color: #0D0D0D;
}
.cs-type-sample-body {
  font-size: 14px; color: #232221; line-height: 1.8;
}
.cs-type-meta {
  margin-top: 8px; font-size: 11px; color: #8A8480;
  .cs-gallery { grid-template-columns: 1fr; gap: 12px; }
  .cs-gallery-slot { aspect-ratio: 16/10; }
  .cs-gallery-slot:nth-child(1), .cs-gallery-slot:nth-child(10) { aspect-ratio: 16/9; }
  .cs-brand-showcase { grid-template-columns: 1fr; }
  .cs-palette-swatches { flex-wrap: wrap; }
  .cs-palette-swatch { flex: 0 0 calc(50% - 4px); height: 48px; }
/* ══════════════════════════════════════════════════════════════
   LAYOUT A — EDITORIAL SPLIT (Zunio)
   Left-anchored label column + right content, magazine feel
════════════════════════════════════════════════════════════════ */
}
.cs-a-hero {
}
.cs-a-hero-left {
  background: #0b1e38;
  padding: 200px clamp(40px,5vw,80px) 80px clamp(24px,4vw,60px);
}
.cs-a-hero-right {
}
.cs-a-hero-right-bg {
  background: linear-gradient(135deg,#1a2d50 0%,#0b1e38 50%,#104840 100%);
}
.cs-a-hero-ghost {
  font-size: clamp(120px, 18vw, 280px);
  -webkit-text-stroke: 1px rgba(255,255,255,0.06);
  line-height: 0.85;
}
.cs-a-number {
  font-size: 13px; letter-spacing: 0.3em;
  color: #eec827; margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;
}
.cs-a-number::before {
  content: ''; display: block;
  width: 40px; height: 1px; background: #eec827;
}
.cs-a-title {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
.cs-a-title .cs-a-accent { color: #eec827; }
}
.cs-a-subtitle {
  font-size: 16px; color: rgba(255,255,255,0.6);
  max-width: 440px; line-height: 1.85;
}
.cs-a-meta {
  display: flex; flex-direction: column; gap: 0;
  padding-top: 32px;
}
.cs-a-meta-row {
  display: grid; grid-template-columns: 120px 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cs-a-meta-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  padding-top: 2px;
}
.cs-a-meta-value {
  font-size: 14px; font-weight: 600; color: #FFFFFF;
/* Editorial body */
}
.cs-a-body {
  grid-template-columns: 220px 1fr;
  padding: 0 clamp(24px,4vw,60px);
}
.cs-a-sidebar {
  padding: 96px 48px 96px 0;
  position: sticky; top: 103px;
  align-self: start;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
}
.cs-a-sidebar-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #104840;
.cs-a-sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
}
.cs-a-sidebar-link {
  font-size: 13px; color: #8A8480; padding: 8px 0;
  border-bottom: 1px solid #F0EDEA;
  text-decoration: none; cursor: pointer;
}
.cs-a-sidebar-link::before {
  content: ''; width: 16px; height: 1px;
  background: #E8E4DF; flex-shrink: 0;
  transition: width 0.2s, background 0.2s;
.cs-a-sidebar-link:hover { color: #104840; }
.cs-a-sidebar-link:hover::before { width: 24px; background: #104840; }
.cs-a-content { padding: 96px 0 96px 64px; }
}
.cs-a-section {
  padding: 0 0 80px; margin-bottom: 80px;
  border-bottom: 1px solid #E8E4DF;
.cs-a-section:last-child { border-bottom: none; }
}
.cs-a-section-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: #104840; margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.cs-a-section-kicker::after {
  content: ''; flex: 1; height: 1px; background: #E8E4DF;
}
.cs-a-section-title {
  font-weight: 800; font-size: clamp(28px,3vw,44px);
  color: #0D0D0D; letter-spacing: -0.03em;
  line-height: 1.1; margin-bottom: 28px;
}
.cs-a-body-text {
  font-size: 16px; color: #232221; line-height: 1.95;
  max-width: 640px;
.cs-a-body-text + .cs-a-body-text { margin-top: 17px; }
}
.cs-a-two-col {
  display: grid; grid-template-columns: 3fr 2fr; gap: 64px;
}
.cs-a-scope-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #104840;
  margin-bottom: 16px; margin-top: 4px;
/* Stats row for layout A */
}
.cs-a-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; margin-top: 40px;
}
.cs-a-stat {
  background: #0b1e38; padding: 36px 28px;
.cs-a-stat:nth-child(2) { background: #0f2444; }
.cs-a-stat:nth-child(3) { background: #132850; }
}
.cs-a-stat-num {
  font-size: 60px; color: #eec827; line-height: 1;
.cs-a-stat-label { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; }
/* Gallery A */
}
.cs-a-gallery {
  margin-top: 48px;
}
.cs-a-gallery-slot {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}
.cs-a-gallery-slot:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-a-gallery-slot:last-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-a-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  position: relative; z-index: 1;
/* Process steps A */
.cs-a-process { display: flex; flex-direction: column; gap: 0; }
}
.cs-a-step {
  display: grid; grid-template-columns: 64px 1fr;
  gap: 32px; padding: 32px 0;
  border-bottom: 1px solid #E8E4DF; align-items: start;
.cs-a-step:last-child { border-bottom: none; }
}
.cs-a-step-num {
  font-size: 44px; color: #E8E4DF; line-height: 1;
}
.cs-a-step-title {
  font-weight: 800; font-size: 17px; color: #0D0D0D;
.cs-a-step-desc { font-size: 15px; color: #232221; line-height: 1.75; }
/* Brand showcase A */
}
.cs-a-brand-showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  margin-top: 48px;
/* ══════════════════════════════════════════════════════════════
   LAYOUT B — DARK IMMERSIVE (Veritas)
   Full-bleed dark sections, large type, magazine editorial
════════════════════════════════════════════════════════════════ */
}
.cs-b-hero {
  padding: 220px clamp(24px,4vw,60px) 100px;
  position: relative; overflow: hidden;
}
.cs-b-hero-inner {
  gap: 80px;
  align-items: end;
}
.cs-b-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
.cs-b-title {
  font-size: clamp(40px,5.5vw,80px);
  letter-spacing: -0.04em;
.cs-b-title .cs-b-accent { color: #eec827; }
.cs-b-right { display: flex; flex-direction: column; justify-content: flex-end; }
}
.cs-b-subtitle {
  font-size: 17px; color: rgba(255,255,255,0.55);
  line-height: 1.85; margin-bottom: 48px;
}
.cs-b-tags {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px;
}
.cs-b-tag {
  padding: 6px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
}
.cs-b-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cs-b-meta-item {
  padding: 20px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
.cs-b-meta-item:nth-child(odd) { padding-right: 32px; border-right: 1px solid rgba(255,255,255,0.06); }
.cs-b-meta-item:nth-child(even) { padding-left: 32px; }
}
.cs-b-meta-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
.cs-b-meta-value { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); }
/* Scrolling ticker between sections */
}
.cs-b-ticker {
  padding: 16px 0;
}
.cs-b-ticker-inner {
  display: inline-flex; gap: 48px;
  animation: tickerScroll 20s linear infinite;
}
.cs-b-ticker-item {
  font-size: 17px; letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 48px;
}
.cs-b-ticker-item::after {
  content: '◆'; font-size: 10px;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
/* Body B */
.cs-b-body { background: #FFFFFF; }
}
.cs-b-section {
  padding: 96px clamp(24px,4vw,60px);
  border-bottom: 1px solid #E8E4DF;
.cs-b-section:last-child { border-bottom: none; }
}
.cs-b-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: #104840;
}
.cs-b-section-title {
  font-weight: 800; font-size: clamp(32px,4vw,56px);
  color: #0D0D0D; letter-spacing: -0.03em;
  line-height: 1.0; margin-bottom: 32px;
}
.cs-b-two-col {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 80px; align-items: start;
}
.cs-b-body-text {
  font-size: 17px; color: #232221; line-height: 1.9;
  max-width: 600px;
.cs-b-body-text + .cs-b-body-text { margin-top: 20px; }
/* Dark stat strip */
}
.cs-b-stat-strip {
  padding: 80px clamp(24px,4vw,60px);
}
.cs-b-stat-strip-inner {
  max-width: clamp(1200px,90vw,1440px); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3,1fr);
}
.cs-b-stat-card {
  background: #181818; padding: 48px 36px;
.cs-b-stat-card:nth-child(2) { background: #1e1e1e; }
.cs-b-stat-card:nth-child(3) { background: #242424; }
}
.cs-b-stat-num {
  font-size: 72px; color: #eec827; line-height: 1;
.cs-b-stat-label { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.5; }
/* Gallery B */
}
.cs-b-gallery {
  margin-top: 64px;
}
.cs-b-gallery-slot {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
.cs-b-gallery-slot:first-child,
}
.cs-b-gallery-slot:last-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-b-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
/* Testimonial B — full bleed pull quote */
}
.cs-b-pullquote {
  padding: 80px clamp(24px,4vw,60px);
}
.cs-b-pullquote-inner {
  max-width: clamp(1200px,90vw,1440px); margin: 0 auto;
}
.cs-b-pullquote-mark {
  font-size: 120px; color: rgba(237,201,38,0.25);
  line-height: 0.7; margin-bottom: 24px;
}
.cs-b-pullquote-text {
  font-size: clamp(22px,3vw,36px); font-weight: 700;
  color: #FFFFFF; line-height: 1.4; letter-spacing: -0.02em;
  max-width: 900px; margin-bottom: 40px;
}
.cs-b-pullquote-author {
  display: flex; align-items: center; gap: 16px;
}
.cs-b-pullquote-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #eec827; display: flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 800;
  color: #104840; flex-shrink: 0;
.cs-b-pullquote-name { font-size: 15px; font-weight: 700; color: #FFFFFF; }
.cs-b-pullquote-role { font-size: 12px; color: rgba(255,255,255,0.5); }
/* Process B */
.cs-b-process { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 48px; }
}
.cs-b-process-item {
  background: #F5F5F3; padding: 40px 36px;
}
.cs-b-process-num {
  font-size: 52px; color: #E8E4DF; line-height: 1;
.cs-b-process-title { font-weight: 800; font-size: 17px; color: #0D0D0D; margin-bottom: 10px; }
.cs-b-process-desc { font-size: 15px; color: #232221; line-height: 1.75; }
/* Brand showcase B */
}
.cs-b-brand-showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  margin-top: 48px;
/* ══════════════════════════════════════════════════════════════
   LAYOUT C — CRAFT & TEXTURE (Aurora Brews)
   Warm, organic, editorial. Section-based with large imagery.
════════════════════════════════════════════════════════════════ */
}
.cs-c-hero {
  background: #080f04;
  padding: 220px clamp(24px,4vw,60px) 0;
  position: relative; overflow: hidden;
}
.cs-c-hero::before {
  position: absolute; inset: 0;
    radial-gradient(ellipse 60% 70% at 30% 60%, rgba(237,201,38,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(252,121,66,0.06) 0%, transparent 55%);
}
.cs-c-hero-inner {
  position: relative; z-index: 1;
}
.cs-c-hero-tags {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px;
}
.cs-c-tag {
  padding: 6px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
}
.cs-c-title {
  font-size: clamp(72px,12vw,180px);
  color: #FFFFFF; line-height: 0.88;
.cs-c-title .cs-c-accent { color: #eec827; }
}
.cs-c-hero-bottom {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; padding: 48px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 40px;
}
.cs-c-subtitle {
  font-size: 17px; color: rgba(255,255,255,0.6); line-height: 1.85;
}
.cs-c-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  align-content: start;
.cs-c-meta-item {}
}
.cs-c-meta-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
.cs-c-meta-value { font-size: 15px; font-weight: 600; color: #FFFFFF; }
/* Hero image strip */
}
.cs-c-hero-img-strip {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 4px; margin-top: 40px;
  max-width: 100%;
}
.cs-c-hero-img-slot {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 24px;
.cs-c-hero-img-slot:first-child { aspect-ratio: 16/9; }
}
.cs-c-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
/* Body C */
}
.cs-c-body {
}
.cs-c-section {
  padding: 96px clamp(24px,4vw,60px);
  border-bottom: 1px solid #E8E4DF;
.cs-c-section:last-child { border-bottom: none; }
}
.cs-c-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: #104840;
}
.cs-c-section-title {
  font-size: clamp(40px,5vw,72px);
  color: #0D0D0D; line-height: 0.92;
  letter-spacing: -0.01em; margin-bottom: 32px;
}
.cs-c-body-text {
  font-size: 16px; color: #232221; line-height: 1.95;
  max-width: 640px;
.cs-c-body-text + .cs-c-body-text { margin-top: 17px; }
}
.cs-c-two-col {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 80px; align-items: start;
/* Results C — horizontal scrolling row */
}
.cs-c-stat-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2px; margin-top: 48px;
}
.cs-c-stat-card {
  background: #1e3c18; padding: 48px 36px;
.cs-c-stat-card:nth-child(2) { background: #142810; }
.cs-c-stat-card:nth-child(3) { background: #0a1a08; }
}
.cs-c-stat-num {
  font-size: 72px; color: #eec827; line-height: 1;
.cs-c-stat-label { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.5; }
/* Gallery C */
}
.cs-c-gallery {
  margin-top: 48px;
}
.cs-c-gallery-slot {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
.cs-c-gallery-slot:first-child,
}
.cs-c-gallery-slot:last-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-c-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
/* Process C — numbered row */
}
.cs-c-process {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; margin-top: 48px;
.cs-c-process-item { border-top: 3px solid #104840; padding-top: 28px; }
}
.cs-c-process-num {
  font-size: 56px; color: #E8E4DF; line-height: 1;
.cs-c-process-title { font-weight: 800; font-size: 17px; color: #0D0D0D; margin-bottom: 10px; }
.cs-c-process-desc { font-size: 15px; color: #232221; line-height: 1.75; }
/* Brand showcase C */
}
.cs-c-brand-showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  margin-top: 48px;
/* Responsive all new layouts */
  .cs-a-hero { grid-template-columns: 1fr; }
  .cs-a-hero-right { display: none; }
  .cs-a-body { grid-template-columns: 1fr; }
  .cs-a-sidebar { display: none; }
  .cs-a-content { padding: 48px 0; }
  .cs-a-two-col, .cs-b-two-col, .cs-c-two-col { grid-template-columns: 1fr; gap: 40px; }
  .cs-b-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .cs-b-process, .cs-c-process { grid-template-columns: 1fr; }
  .cs-b-stat-strip-inner, .cs-c-stat-row, .cs-a-stats { grid-template-columns: 1fr; }
  .cs-b-brand-showcase, .cs-a-brand-showcase, .cs-c-brand-showcase { grid-template-columns: 1fr; }
  .cs-b-meta { grid-template-columns: 1fr; }
  .cs-c-hero-bottom { grid-template-columns: 1fr; }
  .cs-c-title { font-size: clamp(56px,15vw,100px); }
  .cs-b-title { font-size: clamp(36px,10vw,56px); white-space: normal; }
  .cs-a-title { white-space: normal; font-size: clamp(32px,8vw,52px); }
  .cs-a-gallery, .cs-b-gallery, .cs-c-gallery { grid-template-columns: 1fr; }
  .cs-a-gallery-slot:first-child, .cs-a-gallery-slot:last-child,
  .cs-b-gallery-slot:first-child, .cs-b-gallery-slot:last-child,
}
  .cs-c-gallery-slot:first-child, .cs-c-gallery-slot:last-child {
    aspect-ratio: 16/9;
  }
  .cs-c-hero-img-strip { grid-template-columns: 1fr; }

/* === RESOURCE PAGE EXTRAS === */
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ══ CASE STUDY PAGES ══════════════════════════════════════════ */
.cs-hero {
  padding: 200px clamp(24px,4vw,60px) 100px;
}
.cs-hero::after {
  background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(237,201,38,0.07) 0%, transparent 65%);
.cs-hero-inner { max-width: clamp(1200px,90vw,1440px); margin: 0 auto; position: relative; z-index: 1; }
}
.cs-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(255,255,255,0.45);
.cs-back:hover { color: #eec827; }
}
.cs-category {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;
}
.cs-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
}
.cs-title {
  font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1.0;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cs-title .cs-title-accent {
  display: inline;
.cs-title .cs-title-accent { color: #eec827; }
}
.cs-subtitle {
  font-size: 17px; color: rgba(255,255,255,0.65);
  max-width: 600px; line-height: 1.85;
}
.cs-hero-meta {
  display: flex; gap: 48px; margin-top: 56px;
.cs-meta-item {}
}
.cs-meta-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
.cs-meta-value { font-size: 15px; font-weight: 600; color: #FFFFFF; }
/* Content area — matches .pricing-inner exactly */
.cs-body { padding: 0; }
}
.cs-body-inner {
  padding: 0 clamp(24px,4vw,60px);
/* Section divider — canonical definition */
.cs-section { padding: 96px 0; border-bottom: 1px solid #E8E4DF; }
.cs-section:last-of-type { border-bottom: none; }
}
.cs-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #104840;
}
.cs-section-title {
  font-weight: 800; font-size: clamp(28px,3vw,42px);
  color: #0D0D0D; letter-spacing: -0.03em;
  line-height: 1.1; margin-bottom: 24px;
}
.cs-body-text {
  font-size: 16px; color: #232221; line-height: 1.9;
  max-width: 720px;
.cs-body-text + .cs-body-text { margin-top: 17px; }
/* Two-col layout */
}
.cs-two-col {
  display: grid; grid-template-columns: 3fr 2fr; gap: 80px; align-items: start;
}
.cs-three-col {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
/* Process steps */
.cs-process-grid { display: flex; flex-direction: column; gap: 0; }
}
.cs-process-step {
  display: grid; grid-template-columns: 80px 1fr; gap: 32px;
  padding: 32px 0; border-bottom: 1px solid #E8E4DF;
.cs-process-step:last-child { border-bottom: none; }
}
.cs-step-num {
  font-size: 48px; color: #E8E4DF; line-height: 1;
}
.cs-step-title {
  font-weight: 800; font-size: 17px; color: #0D0D0D;
  margin-bottom: 8px; letter-spacing: -0.01em;
.cs-step-desc { font-size: 15px; color: #232221; line-height: 1.75; }
/* Deliverables */
}
.cs-deliverables {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  margin-top: 32px;
}
.cs-deliverable {
  background: #F5F5F3;
  display: flex; align-items: flex-start; gap: 12px;
}
.cs-deliverable-check {
  width: 20px; height: 20px;
  background: #104840; color: #eec827;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0; margin-top: 1px;
.cs-deliverable-text { font-size: 14px; font-weight: 600; color: #2A2420; line-height: 1.4; }
/* Results stats */
}
.cs-results-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin-top: 40px;
}
.cs-result-card {
  background: #104840; padding: 36px 28px;
.cs-result-card:first-child { background: #0a3528; }
.cs-result-card:last-child { background: #0d3c32; }
}
.cs-result-num {
  font-size: 64px; color: #eec827; line-height: 1;
.cs-result-label { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; }
/* Testimonial */
}
.cs-quote {
  background: #F5F5F3;
  border-left: 4px solid #104840;
  padding: 40px 48px;
}
.cs-quote::before {
  content: '"';
  font-size: 120px; color: #E8E4DF;
  position: absolute; top: -20px; left: 36px;
  line-height: 1; pointer-events: none;
}
.cs-quote-text {
  font-size: 19px; color: #2A2420; line-height: 1.8;
  font-style: italic; margin-bottom: 24px;
  position: relative; z-index: 1;
.cs-quote-author { display: flex; align-items: center; gap: 14px; }
}
.cs-quote-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: #104840; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #eec827; flex-shrink: 0;
.cs-quote-name { font-size: 15px; font-weight: 700; color: #0D0D0D; }
.cs-quote-role { font-size: 12px; color: #8A8480; }
/* Mockup screens */
}
.cs-screens {
  display: grid; grid-template-columns: 3fr 2fr; gap: 8px;
  margin: 40px 0;
}
.cs-screen {
  aspect-ratio: 16/10; border-radius: 2px; overflow: hidden;
  position: relative; display: flex; align-items: flex-end;
}
.cs-screen-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.cs-screen-ghost {
  position: absolute; bottom: -0.1em; right: 16px;
  font-size: clamp(60px,10vw,120px);
  -webkit-text-stroke: 1px rgba(255,255,255,0.08);
  pointer-events: none; user-select: none;
/* CTA strip */
}
.cs-cta-strip {
  padding: 96px clamp(24px,4vw,60px);
.cs-cta-strip-inner { max-width: clamp(1200px,90vw,1440px); margin: 0 auto; }
}
.cs-cta-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.cs-cta-title {
  font-weight: 800; font-size: clamp(32px,4vw,56px);
  color: #FFFFFF; letter-spacing: -0.03em;
  line-height: 1.1; margin-bottom: 16px;
}
.cs-cta-sub {
  font-size: 16px; color: rgba(255,255,255,0.6);
  max-width: 480px; margin: 0 auto 40px;
.cs-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
}
.cs-btn-gold {
  padding: 15px 36px;
  background: #eec827; color: #104840;
  font-size: 14px; font-weight: 800; letter-spacing: 0.05em;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.2s; cursor: pointer; border: none;
.cs-btn-gold:hover { background: #f5e030; }
}
.cs-btn-outline {
  padding: 15px 36px;
  background: transparent; color: #FFFFFF;
  font-size: 14px; font-weight: 700; letter-spacing: 0.05em;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid rgba(255,255,255,0.3);
  transition: border-color 0.2s, background 0.2s; cursor: pointer;
.cs-btn-outline:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.06); }
/* Nav strip between projects */
}
.cs-nav-strip {
  display: flex; justify-content: space-between; align-items: center;
  padding: 32px 0;
  margin-top: 0;
}
.cs-nav-link {
  font-size: 14px; font-weight: 700; color: #104840;
  text-decoration: none; display: flex; align-items: center; gap: 6px;
  transition: gap 0.2s;
.cs-nav-link:hover { gap: 10px; }
/* ── Case study extras ── */
}
.cs-screens-three {
  grid-template-columns: 1fr 1fr 1fr;
  margin: 48px 0 0;
.cs-screens-three .cs-screen { aspect-ratio: 3/4; }
}
.cs-scope-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #104840;
  margin-bottom: 16px; margin-top: 8px;
.cs-body-inner > .cs-section:first-child { padding-top: 96px; } /* same as all sections */
  .cs-two-col { grid-template-columns: 1fr; gap: 40px; }
  .cs-three-col { grid-template-columns: 1fr; }
  .cs-results-row { grid-template-columns: 1fr; gap: 2px; }
  .cs-deliverables { grid-template-columns: 1fr 1fr; }
  .cs-screens { grid-template-columns: 1fr; }
  .cs-screens-three { grid-template-columns: 1fr; }
  .cs-screens-three .cs-screen { aspect-ratio: 16/9; }
  .cs-cta-title { font-size: clamp(28px,6vw,42px); }
  .cs-process-step { grid-template-columns: 48px 1fr; gap: 8px; }
  .cs-quote { padding: 32px 28px; }
  .cs-quote::before { font-size: 80px; left: 20px; }
/* ══ IMAGE GALLERY — 10 slots ══════════════════════════════════ */
}
.cs-gallery {
  margin-top: 48px;
/* Alternate layout: first and last rows span full width for variety */
.cs-gallery-slot:nth-child(1),
}
.cs-gallery-slot:nth-child(10) {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-gallery-slot {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/10;   /* large, landscape — like the reference */
}
.cs-gallery-slot img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform 0.5s ease;
.cs-gallery-slot:hover img { transform: scale(1.03); }
/* Upload placeholder state */
}
.cs-gallery-placeholder {
  position: absolute; inset: 0;
  align-items: flex-end; justify-content: flex-end;
  padding: 20px 24px; text-align: right;
  background: inherit;
.cs-gallery-placeholder-icon { display: none; }
}
.cs-gallery-placeholder-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  line-height: 1.3;
}
.cs-gallery-placeholder-sub {
  font-size: 10px; color: rgba(255,255,255,0.3); line-height: 1.4;
/* Gallery section label row */
}
.cs-gallery-header {
  display: flex; align-items: flex-end; justify-content: space-between;
}
.cs-gallery-note {
  font-size: 11px; color: #8A8480; font-style: italic;
/* ══ BRAND SHOWCASE — Colour + Typography ══════════════════════ */
}
.cs-brand-showcase {
  margin-top: 56px;
  gap: 64px;
/* Colour palette */
}
.cs-palette-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #104840;
}
.cs-palette-swatches {
  display: flex; gap: 0;
}
.cs-palette-swatch {
  flex: 1; height: 80px;
  transition: flex 0.3s ease;
.cs-palette-swatch:hover { flex: 2; }
}
.cs-palette-swatch-info {
  font-size: 11px; color: #232221;
  line-height: 1.5;
  padding-left: 12px;
.cs-palette-swatch-name { font-weight: 700; color: #2A2420; font-size: 12px; }
.cs-palette-swatch-hex  { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 0.06em; color: #8A8480; }
/* Typography showcase */
.cs-type-showcase { display: flex; flex-direction: column; gap: 24px; }
}
.cs-type-pair {
  background: #F5F3F0;
  border-left: 3px solid #104840;
}
.cs-type-role {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #104840;
}
.cs-type-sample-display {
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; color: #0D0D0D;
}
.cs-type-sample-body {
  font-size: 14px; color: #232221; line-height: 1.8;
}
.cs-type-meta {
  margin-top: 8px; font-size: 11px; color: #8A8480;
  .cs-gallery { grid-template-columns: 1fr; gap: 12px; }
  .cs-gallery-slot { aspect-ratio: 16/10; }
  .cs-gallery-slot:nth-child(1), .cs-gallery-slot:nth-child(10) { aspect-ratio: 16/9; }
  .cs-brand-showcase { grid-template-columns: 1fr; }
  .cs-palette-swatches { flex-wrap: wrap; }
  .cs-palette-swatch { flex: 0 0 calc(50% - 4px); height: 48px; }
/* ══════════════════════════════════════════════════════════════
   LAYOUT A — EDITORIAL SPLIT (Zunio)
   Left-anchored label column + right content, magazine feel
════════════════════════════════════════════════════════════════ */
}
.cs-a-hero {
}
.cs-a-hero-left {
  background: #0b1e38;
  padding: 200px clamp(40px,5vw,80px) 80px clamp(24px,4vw,60px);
}
.cs-a-hero-right {
}
.cs-a-hero-right-bg {
  background: linear-gradient(135deg,#1a2d50 0%,#0b1e38 50%,#104840 100%);
}
.cs-a-hero-ghost {
  font-size: clamp(120px, 18vw, 280px);
  -webkit-text-stroke: 1px rgba(255,255,255,0.06);
  line-height: 0.85;
}
.cs-a-number {
  font-size: 13px; letter-spacing: 0.3em;
  color: #eec827; margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;
}
.cs-a-number::before {
  content: ''; display: block;
  width: 40px; height: 1px; background: #eec827;
}
.cs-a-title {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
.cs-a-title .cs-a-accent { color: #eec827; }
}
.cs-a-subtitle {
  font-size: 16px; color: rgba(255,255,255,0.6);
  max-width: 440px; line-height: 1.85;
}
.cs-a-meta {
  display: flex; flex-direction: column; gap: 0;
  padding-top: 32px;
}
.cs-a-meta-row {
  display: grid; grid-template-columns: 120px 1fr;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cs-a-meta-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  padding-top: 2px;
}
.cs-a-meta-value {
  font-size: 14px; font-weight: 600; color: #FFFFFF;
/* Editorial body */
}
.cs-a-body {
  grid-template-columns: 220px 1fr;
  padding: 0 clamp(24px,4vw,60px);
}
.cs-a-sidebar {
  padding: 96px 48px 96px 0;
  position: sticky; top: 103px;
  align-self: start;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
}
.cs-a-sidebar-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #104840;
.cs-a-sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
}
.cs-a-sidebar-link {
  font-size: 13px; color: #8A8480; padding: 8px 0;
  border-bottom: 1px solid #F0EDEA;
  text-decoration: none; cursor: pointer;
}
.cs-a-sidebar-link::before {
  content: ''; width: 16px; height: 1px;
  background: #E8E4DF; flex-shrink: 0;
  transition: width 0.2s, background 0.2s;
.cs-a-sidebar-link:hover { color: #104840; }
.cs-a-sidebar-link:hover::before { width: 24px; background: #104840; }
.cs-a-content { padding: 96px 0 96px 64px; }
}
.cs-a-section {
  padding: 0 0 80px; margin-bottom: 80px;
  border-bottom: 1px solid #E8E4DF;
.cs-a-section:last-child { border-bottom: none; }
}
.cs-a-section-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: #104840; margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.cs-a-section-kicker::after {
  content: ''; flex: 1; height: 1px; background: #E8E4DF;
}
.cs-a-section-title {
  font-weight: 800; font-size: clamp(28px,3vw,44px);
  color: #0D0D0D; letter-spacing: -0.03em;
  line-height: 1.1; margin-bottom: 28px;
}
.cs-a-body-text {
  font-size: 16px; color: #232221; line-height: 1.95;
  max-width: 640px;
.cs-a-body-text + .cs-a-body-text { margin-top: 17px; }
}
.cs-a-two-col {
  display: grid; grid-template-columns: 3fr 2fr; gap: 64px;
}
.cs-a-scope-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #104840;
  margin-bottom: 16px; margin-top: 4px;
/* Stats row for layout A */
}
.cs-a-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; margin-top: 40px;
}
.cs-a-stat {
  background: #0b1e38; padding: 36px 28px;
.cs-a-stat:nth-child(2) { background: #0f2444; }
.cs-a-stat:nth-child(3) { background: #132850; }
}
.cs-a-stat-num {
  font-size: 60px; color: #eec827; line-height: 1;
.cs-a-stat-label { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; }
/* Gallery A */
}
.cs-a-gallery {
  margin-top: 48px;
}
.cs-a-gallery-slot {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}
.cs-a-gallery-slot:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-a-gallery-slot:last-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-a-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  position: relative; z-index: 1;
/* Process steps A */
.cs-a-process { display: flex; flex-direction: column; gap: 0; }
}
.cs-a-step {
  display: grid; grid-template-columns: 64px 1fr;
  gap: 32px; padding: 32px 0;
  border-bottom: 1px solid #E8E4DF; align-items: start;
.cs-a-step:last-child { border-bottom: none; }
}
.cs-a-step-num {
  font-size: 44px; color: #E8E4DF; line-height: 1;
}
.cs-a-step-title {
  font-weight: 800; font-size: 17px; color: #0D0D0D;
.cs-a-step-desc { font-size: 15px; color: #232221; line-height: 1.75; }
/* Brand showcase A */
}
.cs-a-brand-showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  margin-top: 48px;
/* ══════════════════════════════════════════════════════════════
   LAYOUT B — DARK IMMERSIVE (Veritas)
   Full-bleed dark sections, large type, magazine editorial
════════════════════════════════════════════════════════════════ */
}
.cs-b-hero {
  padding: 220px clamp(24px,4vw,60px) 100px;
  position: relative; overflow: hidden;
}
.cs-b-hero-inner {
  gap: 80px;
  align-items: end;
}
.cs-b-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
.cs-b-title {
  font-size: clamp(40px,5.5vw,80px);
  letter-spacing: -0.04em;
.cs-b-title .cs-b-accent { color: #eec827; }
.cs-b-right { display: flex; flex-direction: column; justify-content: flex-end; }
}
.cs-b-subtitle {
  font-size: 17px; color: rgba(255,255,255,0.55);
  line-height: 1.85; margin-bottom: 48px;
}
.cs-b-tags {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px;
}
.cs-b-tag {
  padding: 6px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
}
.cs-b-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cs-b-meta-item {
  padding: 20px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
.cs-b-meta-item:nth-child(odd) { padding-right: 32px; border-right: 1px solid rgba(255,255,255,0.06); }
.cs-b-meta-item:nth-child(even) { padding-left: 32px; }
}
.cs-b-meta-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
.cs-b-meta-value { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); }
/* Scrolling ticker between sections */
}
.cs-b-ticker {
  padding: 16px 0;
}
.cs-b-ticker-inner {
  display: inline-flex; gap: 48px;
  animation: tickerScroll 20s linear infinite;
}
.cs-b-ticker-item {
  font-size: 17px; letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 48px;
}
.cs-b-ticker-item::after {
  content: '◆'; font-size: 10px;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
/* Body B */
.cs-b-body { background: #FFFFFF; }
}
.cs-b-section {
  padding: 96px clamp(24px,4vw,60px);
  border-bottom: 1px solid #E8E4DF;
.cs-b-section:last-child { border-bottom: none; }
}
.cs-b-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: #104840;
}
.cs-b-section-title {
  font-weight: 800; font-size: clamp(32px,4vw,56px);
  color: #0D0D0D; letter-spacing: -0.03em;
  line-height: 1.0; margin-bottom: 32px;
}
.cs-b-two-col {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 80px; align-items: start;
}
.cs-b-body-text {
  font-size: 17px; color: #232221; line-height: 1.9;
  max-width: 600px;
.cs-b-body-text + .cs-b-body-text { margin-top: 20px; }
/* Dark stat strip */
}
.cs-b-stat-strip {
  padding: 80px clamp(24px,4vw,60px);
}
.cs-b-stat-strip-inner {
  max-width: clamp(1200px,90vw,1440px); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3,1fr);
}
.cs-b-stat-card {
  background: #181818; padding: 48px 36px;
.cs-b-stat-card:nth-child(2) { background: #1e1e1e; }
.cs-b-stat-card:nth-child(3) { background: #242424; }
}
.cs-b-stat-num {
  font-size: 72px; color: #eec827; line-height: 1;
.cs-b-stat-label { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.5; }
/* Gallery B */
}
.cs-b-gallery {
  margin-top: 64px;
}
.cs-b-gallery-slot {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
.cs-b-gallery-slot:first-child,
}
.cs-b-gallery-slot:last-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-b-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
/* Testimonial B — full bleed pull quote */
}
.cs-b-pullquote {
  padding: 80px clamp(24px,4vw,60px);
}
.cs-b-pullquote-inner {
  max-width: clamp(1200px,90vw,1440px); margin: 0 auto;
}
.cs-b-pullquote-mark {
  font-size: 120px; color: rgba(237,201,38,0.25);
  line-height: 0.7; margin-bottom: 24px;
}
.cs-b-pullquote-text {
  font-size: clamp(22px,3vw,36px); font-weight: 700;
  color: #FFFFFF; line-height: 1.4; letter-spacing: -0.02em;
  max-width: 900px; margin-bottom: 40px;
}
.cs-b-pullquote-author {
  display: flex; align-items: center; gap: 16px;
}
.cs-b-pullquote-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #eec827; display: flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 800;
  color: #104840; flex-shrink: 0;
.cs-b-pullquote-name { font-size: 15px; font-weight: 700; color: #FFFFFF; }
.cs-b-pullquote-role { font-size: 12px; color: rgba(255,255,255,0.5); }
/* Process B */
.cs-b-process { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 48px; }
}
.cs-b-process-item {
  background: #F5F5F3; padding: 40px 36px;
}
.cs-b-process-num {
  font-size: 52px; color: #E8E4DF; line-height: 1;
.cs-b-process-title { font-weight: 800; font-size: 17px; color: #0D0D0D; margin-bottom: 10px; }
.cs-b-process-desc { font-size: 15px; color: #232221; line-height: 1.75; }
/* Brand showcase B */
}
.cs-b-brand-showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  margin-top: 48px;
/* ══════════════════════════════════════════════════════════════
   LAYOUT C — CRAFT & TEXTURE (Aurora Brews)
   Warm, organic, editorial. Section-based with large imagery.
════════════════════════════════════════════════════════════════ */
}
.cs-c-hero {
  background: #080f04;
  padding: 220px clamp(24px,4vw,60px) 0;
  position: relative; overflow: hidden;
}
.cs-c-hero::before {
  position: absolute; inset: 0;
    radial-gradient(ellipse 60% 70% at 30% 60%, rgba(237,201,38,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(252,121,66,0.06) 0%, transparent 55%);
}

.cs-c-hero-inner, .cs-c-hero-img-strip, .ann-inner, .pc-shell, .seo-inner, .social-content {
  width: min(1440px, calc(100vw - (clamp(24px, 4vw, 56px) * 2)));
  max-width: 1440px !important;
  margin-left: auto;
  margin-right: auto;
}

.cs-c-hero-inner {
  position: relative; z-index: 1;
}
.cs-c-hero-tags {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px;
}
.cs-c-tag {
  padding: 6px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
}
.cs-c-title {
  font-size: clamp(72px,12vw,180px);
  color: #FFFFFF; line-height: 0.88;
.cs-c-title .cs-c-accent { color: #eec827; }
}
.cs-c-hero-bottom {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; padding: 48px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 40px;
}
.cs-c-subtitle {
  font-size: 17px; color: rgba(255,255,255,0.6); line-height: 1.85;
}
.cs-c-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  align-content: start;
.cs-c-meta-item {}
}
.cs-c-meta-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
.cs-c-meta-value { font-size: 15px; font-weight: 600; color: #FFFFFF; }
/* Hero image strip */
}
.cs-c-hero-img-strip {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 4px; margin-top: 40px;
  max-width: 100%;
}
.cs-c-hero-img-slot {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 24px;
.cs-c-hero-img-slot:first-child { aspect-ratio: 16/9; }
}
.cs-c-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
/* Body C */
}
.cs-c-body {
}
.cs-c-section {
  padding: 96px clamp(24px,4vw,60px);
  border-bottom: 1px solid #E8E4DF;
.cs-c-section:last-child { border-bottom: none; }
}
.cs-c-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: #104840;
}
.cs-c-section-title {
  font-size: clamp(40px,5vw,72px);
  color: #0D0D0D; line-height: 0.92;
  letter-spacing: -0.01em; margin-bottom: 32px;
}
.cs-c-body-text {
  font-size: 16px; color: #232221; line-height: 1.95;
  max-width: 640px;
.cs-c-body-text + .cs-c-body-text { margin-top: 17px; }
}
.cs-c-two-col {
  display: grid; grid-template-columns: 3fr 2fr;
  gap: 80px; align-items: start;
/* Results C — horizontal scrolling row */
}
.cs-c-stat-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2px; margin-top: 48px;
}
.cs-c-stat-card {
  background: #1e3c18; padding: 48px 36px;
.cs-c-stat-card:nth-child(2) { background: #142810; }
.cs-c-stat-card:nth-child(3) { background: #0a1a08; }
}
.cs-c-stat-num {
  font-size: 72px; color: #eec827; line-height: 1;
.cs-c-stat-label { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.5; }
/* Gallery C */
}
.cs-c-gallery {
  margin-top: 48px;
}
.cs-c-gallery-slot {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
.cs-c-gallery-slot:first-child,
}
.cs-c-gallery-slot:last-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-c-slot-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
/* Process C — numbered row */
}
.cs-c-process {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; margin-top: 48px;
.cs-c-process-item { border-top: 3px solid #104840; padding-top: 28px; }
}
.cs-c-process-num {
  font-size: 56px; color: #E8E4DF; line-height: 1;
.cs-c-process-title { font-weight: 800; font-size: 17px; color: #0D0D0D; margin-bottom: 10px; }
.cs-c-process-desc { font-size: 15px; color: #232221; line-height: 1.75; }
/* Brand showcase C */
}
.cs-c-brand-showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  margin-top: 48px;
/* Responsive all new layouts */
  .cs-a-hero { grid-template-columns: 1fr; }
  .cs-a-hero-right { display: none; }
  .cs-a-body { grid-template-columns: 1fr; }
  .cs-a-sidebar { display: none; }
  .cs-a-content { padding: 48px 0; }
  .cs-a-two-col, .cs-b-two-col, .cs-c-two-col { grid-template-columns: 1fr; gap: 40px; }
  .cs-b-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .cs-b-process, .cs-c-process { grid-template-columns: 1fr; }
  .cs-b-stat-strip-inner, .cs-c-stat-row, .cs-a-stats { grid-template-columns: 1fr; }
  .cs-b-brand-showcase, .cs-a-brand-showcase, .cs-c-brand-showcase { grid-template-columns: 1fr; }
  .cs-b-meta { grid-template-columns: 1fr; }
  .cs-c-hero-bottom { grid-template-columns: 1fr; }
  .cs-c-title { font-size: clamp(56px,15vw,100px); }
  .cs-b-title { font-size: clamp(36px,10vw,56px); white-space: normal; }
  .cs-a-title { white-space: normal; font-size: clamp(32px,8vw,52px); }
  .cs-a-gallery, .cs-b-gallery, .cs-c-gallery { grid-template-columns: 1fr; }
  .cs-a-gallery-slot:first-child, .cs-a-gallery-slot:last-child,
  .cs-b-gallery-slot:first-child, .cs-b-gallery-slot:last-child,
}
  .cs-c-gallery-slot:first-child, .cs-c-gallery-slot:last-child {
    aspect-ratio: 16/9;
  }
  .cs-c-hero-img-strip { grid-template-columns: 1fr; }
/* === ACTIVE NAV LINK === */
.nav-links .active-link {
  color: #104840 !important;
  font-weight: 700 !important;
}
/* === NAV CTA (ensure consistent across all pages) === */
.nav-links li:last-child {
  align-self: stretch;
}
.nav-links li a.nav-cta {
  background: #104840;
  color: #FFFFFF !important;
  padding: 0 28px;
  height: 100%;
  border: none;
  border-radius: 0;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s !important;
}
.nav-links li a.nav-cta:hover { background: #0d3c35 !important; }


/* ── VISUALLY HIDDEN (SEO H1s) ── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── SERVICE PAGE RESPONSIVE ── */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
}
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns: 1fr 360px"] {
    grid-template-columns: 1fr !important;
  }
/* removed extra brace */

/* ═══════════════════════════════════════════════
   REFINEMENT UPDATE — March 2026
═══════════════════════════════════════════════ */

/* ── NAV LOGO SIZE ── */
.nav-logo img { height: 32px !important; width: auto !important; }

/* ── NAV PADDING (increased) ── */
.nav-inner {
  padding: 0;
  height: 78px;
}
.site nav {
  height: 78px;
  display: flex;
  align-items: center;
}


/* ── SECTION TITLE LINE-HEIGHT ── */
.section-title { line-height: 1.28 !important; white-space: normal !important; letter-spacing: 0em !important;}
h1.section-title { line-height: 1.28 !important;letter-spacing: 0em !important; font-weight: 800 !important;}

/* TESTIMONIAL CARDS */
.tcard {
  cursor: pointer;
  transition: transform 0.35s ease;
}

.tcard:hover {
  transform: translateY(-6px);
}

/* No full card borders — keep only the short accent bar */
.tcard-gold,
.tcard-featured,
.tcard-orange { border: none; outline: 0; box-shadow: none !important; }

/* Hover: keep the animated top bar only */
.tcard-gold:hover,
.tcard-featured:hover,
.tcard-orange:hover { box-shadow: none !important; }

/* Top accent bar: 20% → 100% */
.tcard-topbar {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 20%;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}
.tcard:hover .tcard-topbar { width: 100%; }

.tcard-topbar-gold     { background: #eec827; }
.tcard-topbar-featured { background: #FFFFFF; }
.tcard-topbar-orange   { background: #FC7942; }

/* ── SERVICES — YELLOW ACCENTS ── */
.service-num { color: #eec827 !important; }

/* Top border on service cards — same pattern as testimonials */
.service-item {
  position: relative;
  overflow: hidden;
}
.service-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 20%;
  background: #eec827;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-item:hover::before { width: 100%; }

/* ── FOOTER LOGO ── */
.footer-brand-name img {
  height: 32px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* ── PAGE BANNER H1 LINE-HEIGHT FIX ── */
/* All inline-styled h1s on hero banners */
section h1, .cs-c-hero h1, .cs-hero h1 {
  line-height: 1.2 !important;
}

/* ── RESPONSIVE TESTIMONIALS ── */
@media (max-width: 900px) {
  [style*="grid-template-columns:repeat(3,1fr)"].tcard-grid,
  .tcard-grid { grid-template-columns: 1fr !important; }
  .brand-cta-band-inner { grid-template-columns: 1fr; }
  .brand-cta-band-actions { min-width: 100%; }
  .split-start-cta-inner { grid-template-columns: 1fr; }
  .split-start-cta-left h2 { max-width: none; }
}

@media (max-width: 720px) {
  .brand-cta-band { padding: 72px clamp(16px, 4vw, 32px); }
  .split-start-cta { padding: 72px clamp(16px, 4vw, 32px); }
  .split-start-cta-left,
  .split-start-cta-right { padding: 40px 24px; }
}

/* ── SERVICE CARD LINK COLOUR OVERRIDES ── */
a.service-item .service-name { color: #FFFFFF; }
a.service-item .service-desc { color: rgba(255,255,255,0.8); }
a.service-item { display: block; text-decoration: none; }

/* ── HOMEPAGE WORK GALLERY ── */
.hp-work-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 4px;
}

/* Full-width item spans both columns */
.hp-work-item.hp-work-full {
  grid-column: 1 / 3;
}

.hp-work-item {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  background: #111;
  cursor: pointer;
  width: 100%;         /* fill grid cell exactly */
  min-width: 0;        /* prevent grid blowout */
  min-height: 100px;
}

/* Full-width image: fixed height, covers slot */
.hp-work-item.hp-work-full img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
}

/* 2-col images: square aspect ratio */
.hp-work-item:not(.hp-work-full) img {
  width: 100%;
  aspect-ratio: 1/1;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
}

/* Hover: subtle scale + darken */
.hp-work-item:hover img {
  transform: scale(1.04);
  opacity: 0.75;
}

/* Label sits at bottom of image, always visible */
.hp-work-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 20px 14px;
  background: rgba(13,13,13,0.82);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Project name — always visible */
.hp-work-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Service tag — hidden by default, slides in on hover */
.hp-work-tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #eec827;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
  text-align: right;
}

.hp-work-item:hover .hp-work-tag {
  opacity: 1;
  transform: translateY(0);
}

/* ── SERVICES ACCORDION LIST (homepage) ── */
.svc-list {
  border-top: 1px solid rgba(255,255,255,0.12);
}

.svc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 0fr;
  gap: 0 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: background 0.25s;
  overflow: hidden;
  position: relative;
}

.svc-row:hover {
  background: rgba(255,255,255,0.04);
}

/* Main row: number + name + tags in a flex line */
.svc-row-main {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  grid-column: 1;
  grid-row: 1;
}

.svc-row-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  color: #eec827;
  letter-spacing: 0.12em;
  flex-shrink: 0;
  width: 28px;
}

.svc-row-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(17px, 2.2vw, 26px);
  color: #FFFFFF;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

/* Tag pills — hidden at rest, fade in on hover */
.svc-row-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s, transform 0.3s;
}

.svc-row:hover .svc-row-tags {
  opacity: 1;
  transform: translateX(0);
}

.svc-row-tags span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.15);
}

/* Description — hidden at rest, expands on hover */
.svc-row-desc {
  grid-column: 1;
  grid-row: 2;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.75;
  max-width: 640px;
  max-height: 0;
  overflow: hidden;
  padding-left: 52px; /* align with name */
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s,
              padding 0.3s;
  opacity: 0;
}

.svc-row:hover .svc-row-desc {
  max-height: 80px;
  opacity: 1;
  padding-top: 10px;
}

/* Arrow — right side, slides right on hover */
.svc-row-arrow {
  grid-column: 2;
  grid-row: 1 / 3;
  font-size: 20px;
  color: rgba(255,255,255,0.25);
  transition: transform 0.3s, color 0.3s;
  align-self: center;
  justify-self: end;
}

.svc-row:hover .svc-row-arrow {
  transform: translateX(4px) rotate(-45deg);
  color: #eec827;
}

@media (max-width: 640px) {
  .hp-work-grid { grid-template-columns: 1fr; }
  .hp-work-item.hp-work-full { grid-column: 1; }
}

/* ── GLOBAL TYPE SYSTEM OVERRIDES (scoped to marketing .site wrapper) ── */
.site,
.site p {
  font-size: 17px;
  line-height: 1.9 !important;
  font-weight: 500 !important;
}

.section-sub,
.home-brief-story p,
.home-brief-card p,
.home-start-copy p,
.home-start-panel-copy,
.svc-row-desc,
.split-start-cta-left p,
.split-start-cta-right p,
.brand-cta-band-copy,
.resource-card p,
.resources-brief-copy p,
.resources-brief-benefits p,
.audit-card p,
.audit-question p,
.audit-result-copy,
.pricing-audit p,
.pricing-card p,
.faq-body,
.contact-layout p,
.pc-hero-copy-text,
.pc-section-copy,
.pc-body-copy,
.pc-cta-copy,
.pc-scope-item,
.pc-process-card p,
.pc-stat-label {
  font-size: 17px !important;
  line-height: 1.9 !important;
  font-weight: 500 !important;
}

.split-start-cta-overline,
.about-hero-overline,
.work-hero-overline {
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0.2em !important;
}

.about-hero-overline::before,
.work-hero-overline::before {
  display: none !important;
}

.site > section[style*="margin-top:103px"] > div > p[style*="letter-spacing:0.18em"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
}

.site > section[style*="margin-top:103px"] > div > p[style*="letter-spacing:0.18em"]::before {
  content: "" !important;
  width: 24px !important;
  height: 1px !important;
  background: #eec827 !important;
}

.about-hero h1,
.work-hero h1,
.site > .page.active > div:first-of-type h1,
.site > section[style*="margin-top:103px"] h1,
.site > div[style*="background:#104840"] > .pricing-inner > h1 {
  font-size: 48px !important;
  line-height: 72px !important;
}

.home-brief-form button,
.ann-badge,
.wp-badge,
.work-cta-btn,
.audit-actions .primary,
.schema-note,
.brand-cta-band-primary,
.split-start-cta-primary,
.slide-btn-primary,
.pc-btn-primary,
.pc-quote-avatar,
[style*="background:#eec827"],
[style*="background: #eec827"],
[style*="background:#F3D54B"],
[style*="background: #F3D54B"] {
  color: #000000 !important;
}

[style*="background:#eec827"] *,
[style*="background: #eec827"] *,
[style*="background:#F3D54B"] *,
[style*="background: #F3D54B"] * {
  color: #000000 !important;
}

/* ── Project page refinements: scope of work, testimonial ── */
.cs-scope-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  margin-bottom: 20px;
}
.cs-deliverables {
  gap: 4px;
  margin-top: 24px;
}
.cs-deliverable {
  padding: 14px 17px;
  gap: 14px;
}
.cs-deliverable-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: #2A2420;
}
.pc-card-title {
  font-size: 12px;
  letter-spacing: 0.16em;
}
.pc-scope-list .pc-scope-item {
  font-size: 16px;
  line-height: 1.6;
}
/* Testimonial: font-size 40px → line-height 64px (1.6 ratio) for better visibility */
.pc-quote p,
.cs-quote-text,
.cs-testimonial-block p {
  font-size: 32px !important;
  line-height: 1.6 !important;
  max-width: 1080px !important;
}
/* Testimonial decorative element — subtle right-side fill */
.cs-testimonial-block {
  position: relative;
  overflow: hidden;
}
.cs-testimonial-block::after {
  content: '"';
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(120px, 18vw, 200px);
  line-height: 1;
  color: rgba(237, 201, 38, 0.08);
  pointer-events: none;
}

/* ── SLIDE 6 (UI/UX) backgrounds & mockup ── */
.slide-bg-6 .slide-visual {
  background: linear-gradient(135deg, #082018 0%, #0e3a2c 40%, #145040 70%, #082018 100%);
}
.mockup-s6 { background: linear-gradient(135deg, #14523f 0%, #2c7a5e 100%); }

/* ── DASHBOARD MOCKUPS (slide-4 apps, slide-5 ops) ── */
.dash-mock {
  width: 100%;
  height: 100%;
  display: flex;
  background: #FAFAF7;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1a1a1a;
  overflow: hidden;
}
.dash-mock__sidebar {
  width: 28%;
  min-width: 110px;
  padding: clamp(10px, 2.2%, 17px);
  background: #F4F2EE;
  border-right: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2%, 16px);
}
.dash-mock__sidebar--dark {
  background: #1a2240;
  border-right-color: rgba(255,255,255,0.08);
}
.dash-mock__brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-mock__brand-mark {
  width: clamp(20px, 3.6%, 28px);
  aspect-ratio: 1;
  border-radius: 4px;
  background: #104840;
  color: #eec827;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: clamp(8px, 1.4%, 11px);
  letter-spacing: 0.05em;
}
.dash-mock__brand-mark--blue { background: #3a5fff; color: #fff; }
.dash-mock__brand-text { line-height: 1.05; }
.dash-mock__brand-name {
  font-size: clamp(9px, 1.5%, 12px);
  font-weight: 700;
}
.dash-mock__brand-name--light { color: #fff; }
.dash-mock__brand-sub {
  font-size: clamp(7px, 1.1%, 9px);
  color: #6b6b6b;
  letter-spacing: 0.04em;
}
.dash-mock__brand-sub--light { color: rgba(255,255,255,0.65); }
.dash-mock__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.dash-mock__nav-item {
  font-size: clamp(8px, 1.3%, 11px);
  padding: 5px 8px;
  border-radius: 4px;
  color: #232221;
  font-weight: 500;
}
.dash-mock__nav-item--light { color: rgba(255,255,255,0.7); }
.dash-mock__nav-item--active {
  background: #104840;
  color: #fff;
}
.dash-mock__nav-item--active.dash-mock__nav-item--blue {
  background: #3a5fff;
  color: #fff;
}
.dash-mock__main {
  flex: 1;
  padding: clamp(12px, 2.6%, 22px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2%, 16px);
  background: #FAFAF7;
  overflow: hidden;
}
.dash-mock__main--ops { background: #F5F7FB; }
.dash-mock__header { line-height: 1.1; }
.dash-mock__title {
  font-size: clamp(12px, 2.2%, 17px);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.dash-mock__subtitle {
  font-size: clamp(8px, 1.2%, 10px);
  color: #6b6b6b;
  margin-top: 3px;
}
.dash-mock__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1.2%, 10px);
}
.dash-mock__kpi {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 4px;
  padding: clamp(6px, 1.4%, 12px);
}
.dash-mock__kpi-label {
  font-size: clamp(7px, 1%, 9px);
  color: #6b6b6b;
  letter-spacing: 0.02em;
}
.dash-mock__kpi-value {
  font-size: clamp(11px, 2%, 17px);
  font-weight: 800;
  margin-top: 3px;
  letter-spacing: -0.01em;
}
.dash-mock__chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 1%, 10px);
  padding: clamp(8px, 1.6%, 14px);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 4px;
  min-height: 0;
}
.dash-mock__bar {
  flex: 1;
  background: linear-gradient(180deg, #104840 0%, #1a5c50 100%);
  border-radius: 2px 2px 0 0;
  min-height: 8px;
}
.dash-mock__bar--accent {
  background: linear-gradient(180deg, #eec827 0%, #d4a800 100%);
}
.dash-mock__health {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(5px, 1%, 8px);
}
.dash-mock__health-tile {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 4px;
  padding: clamp(5px, 1.2%, 10px);
  text-align: left;
}
.dash-mock__health-tile--ok { border-left: 3px solid #2da567; }
.dash-mock__health-tile--warn { border-left: 3px solid #e8a326; background: #fffaf0; }
.dash-mock__health-tile--accent { border-left: 3px solid #3a5fff; }
.dash-mock__health-num {
  font-size: clamp(11px, 2%, 17px);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.dash-mock__health-label {
  font-size: clamp(7px, 1%, 9px);
  color: #6b6b6b;
  margin-top: 2px;
}
.dash-mock__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 4px;
  padding: clamp(6px, 1.2%, 10px);
}
.dash-mock__row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: clamp(8px, 1.2%, 10px);
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.dash-mock__row:last-child { border-bottom: 0; }
.dash-mock__row-id { color: #6b6b6b; font-family: 'JetBrains Mono', monospace; font-size: 0.85em; }
.dash-mock__row-name { color: #1a1a1a; font-weight: 600; }
.dash-mock__row-tag {
  font-size: clamp(6px, 0.9%, 8px);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.dash-mock__row-tag--new { background: #e6efff; color: #3a5fff; }
.dash-mock__row-tag--assigned { background: #fff4d6; color: #b87f00; }
.dash-mock__row-tag--converted { background: #d6f5e3; color: #1a7a4a; }

/* When dashboard mock fills the slide-mockup, kill the default gradient/headline padding */
.slide-mockup:has(.dash-mock) { padding: 0; }

/* ── DASH MOCK · DARK MODE + BRAND VARIANTS ── */
.dash-mock--dark { background: #0d1424; }

/* Harvesters Academy — yellow + navy brand */
.dash-mock__sidebar--academy {
  background: #1a3a8a;
  border-right-color: rgba(255,255,255,0.08);
}
.dash-mock__brand-mark--academy { background: #eec827; color: #0a1424; }
.dash-mock__nav-item--active.dash-mock__nav-item--academy {
  background: #eec827;
  color: #0a1424;
}
.dash-mock__main--academy {
  background: #122c70;
}
.dash-mock__bar--academy {
  background: linear-gradient(180deg, #eec827 0%, #b8970b 100%);
}
.dash-mock__bar--academy-accent {
  background: linear-gradient(180deg, #fff1a3 0%, #eec827 100%);
}

/* Glenville Heights — navy brand */
.dash-mock__sidebar--dark { background: #1a2240 !important; }
.dash-mock__main--ops-dark {
  background: #0f1530;
}
.dash-mock__brand-mark--blue { background: #3a5fff !important; color: #ffffff !important; }
.dash-mock__nav-item--active.dash-mock__nav-item--blue {
  background: #3a5fff !important;
  color: #ffffff !important;
}

/* Shared dark-mode primitives */
.dash-mock__title--light { color: #f5f7fb; }
.dash-mock__subtitle--light { color: rgba(255,255,255,0.55); }
.dash-mock__kpi--dark {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.dash-mock__kpi-value--light { color: #ffffff; }
.dash-mock__chart--dark {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
.dash-mock__health-tile--dark {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.dash-mock__health-tile--warn.dash-mock__health-tile--dark {
  background: rgba(232,163,38,0.08);
}
.dash-mock__health-num--light { color: #ffffff; }
.dash-mock__rows--dark {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
.dash-mock__row--dark { border-bottom-color: rgba(255,255,255,0.06); }
.dash-mock__row-name--light { color: #f5f7fb; }

/* Dark-mode row tag tints */
.dash-mock__row--dark .dash-mock__row-tag--new { background: rgba(74,143,255,0.18); color: #8fbcff; }
.dash-mock__row--dark .dash-mock__row-tag--assigned { background: rgba(232,163,38,0.18); color: #f0c878; }
.dash-mock__row--dark .dash-mock__row-tag--converted { background: rgba(45,165,103,0.2); color: #6ad99a; }

/* Match KPI label colour to dark sub-text */
.dash-mock__kpi--dark .dash-mock__kpi-label { color: rgba(255,255,255,0.55); }
.dash-mock__health-tile--dark .dash-mock__health-label { color: rgba(255,255,255,0.55); }

/* ──────────────────────────────────────────────────────────────────
   Responsive overrides — nav, announcement bar, hero slider
   ────────────────────────────────────────────────────────────────── */

/* Hamburger hidden by default; shown on mobile */
.nav-hamburger { display: none !important; }

/* Mobile-only secondary hero CTA */
.slide-btn-mobile-only { display: none !important; }

/* Mobile-only CTA shown only ≤900px */
.slide-btn-mobile-only { display: none !important; }

@media (max-width: 900px) {
  /* Nav: hamburger replaces inline links */
  .nav-hamburger { display: inline-flex !important; align-items: center; }
  .nav-links { display: none !important; }
  .nav-inner { padding: 17px 20px !important; align-items: center; }

  /* Announcement bar: keep single-row, hide long text */
  .announcement-bar { padding: 0 16px; }
  .ann-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    padding: 0;
    flex-wrap: wrap;
  }
  .announcement-bar .ann-badge { font-size: 9px !important; padding: 2px 7px !important; letter-spacing: 0.08em !important; }
  .announcement-bar .ann-text { font-size: 11px !important; line-height: 1.35 !important; }
  .announcement-bar .ann-cta { font-size: 11px !important; }

  /* Mobile-only Start a Project CTA appears under Take Free Audit */
  .slide-btn-mobile-only { display: inline-flex !important; }
  .hero-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }

  /* Hero slider: ensure adequate height instead of viewport-based */
  .hero { margin-top: 90px !important; height: auto !important; min-height: calc(100vh - 90px) !important; }
  .slide-top { padding: 28px 20px 24px !important; }
  .slide-top-inner { flex-direction: column !important; align-items: stretch !important; gap: 24px !important; padding-top: 8px !important; padding-bottom: 0 !important; }
  .slide-top-right { max-width: 100% !important; }
  .hero-actions { width: 100%; }
  .slide-btn-primary, .slide-btn-secondary { width: 100%; }
  .hero-headline { font-size: clamp(22px, 6.4vw, 32px) !important; max-width: 100% !important; line-height: 1.22 !important; letter-spacing: -0.02em !important; }
  .hero-eyebrow span { font-size: 10px !important; letter-spacing: 0.12em !important; }

  /* Show secondary "Start a Project" CTA on mobile, stacked below primary */
  .slide-btn-mobile-only { display: inline-flex !important; }
  .hero-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }

  /* Visual area: keep mockup contained */
  .slide-visual { padding: 20px !important; min-height: 320px; display: flex; align-items: center; justify-content: center; }
  .slide-mockup { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; max-width: calc(100vw - 40px) !important; width: 100% !important; margin: 0 auto !important; }
  .slide-mockup-inner { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; }
  .slide-mockup .dash-mock, .slide-mockup .dash-mock-academy { max-width: 100% !important; transform: none !important; }
  .slide-visual-text { font-size: clamp(80px, 28vw, 140px) !important; left: 12px !important; opacity: 0.5; }
  .hero-counter { right: 16px !important; bottom: 12px !important; }
  .hero-controls { bottom: 56px !important; }
  .hero-progress { display: block; }
}

@media (max-width: 480px) {
  .ann-inner { gap: 8px; }
  .hero-headline { font-size: clamp(20px, 6vw, 28px) !important; }
  .slide-visual { min-height: 280px; padding: 16px !important; }
  .slide-mockup-headline { font-size: 17px !important; }
  .slide-visual-text { font-size: clamp(72px, 30vw, 120px) !important; }
}

/* ── MOBILE SLIDE-IN MENU ── */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 200;
}
.mobile-menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(420px, 88vw);
  background: #FFFFFF;
  z-index: 201;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 32px;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
}
.mobile-menu-eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #104840;
}
.mobile-menu-close {
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
  padding: 0;
}
.mobile-menu-close span {
  position: absolute;
  top: 50%;
  left: 8px;
  right: 8px;
  height: 2px;
  background: #104840;
  transform-origin: center;
}
.mobile-menu-close span:first-child { transform: rotate(45deg); }
.mobile-menu-close span:last-child { transform: rotate(-45deg); }
.mobile-menu-links {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.mobile-menu-links li {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: calc(0.05s * var(--i, 0));
}
.mobile-menu.is-open .mobile-menu-links li {
  opacity: 1;
  transform: translateX(0);
}
.mobile-menu-links a {
  display: block;
  padding: 14px 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #104840;
  text-decoration: none;
  border-bottom: 1px solid rgba(16, 72, 64, 0.1);
  letter-spacing: -0.01em;
  transition: color 0.2s, padding-left 0.2s;
}
.mobile-menu-links a:hover,
.mobile-menu-links a.active-link { color: #eec827; padding-left: 8px; }
.mobile-menu-cta {
  display: block;
  background: #eec827;
  color: #104840;
  padding: 17px 24px;
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 24px;
  transition: background 0.2s, transform 0.2s;
}
.mobile-menu-cta:hover { background: #d6b314; transform: translateY(-2px); }
.mobile-menu-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #232221;
  letter-spacing: 0.04em;
}
.mobile-menu-footer a { color: #104840; text-decoration: none; font-weight: 600; }

/* Hamburger animates to X when open */
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .announcement-bar .ann-badge { animation: none; }
  .mobile-menu, .mobile-menu-backdrop, .mobile-menu-links li { transition: none; }
}

/* ── HERO CTA: hide audit on mobile, yellow start-a-project ── */
@media (max-width: 900px) {
  .slide-btn-primary { display: none !important; }
  .slide-btn-mobile-only {
    display: inline-flex !important;
    background: #eec827 !important;
    color: #104840 !important;
    border: none !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
  }
  .slide-btn-mobile-only:hover { background: #d6b314 !important; }
}

/* ── Marketing article Markdown (CMS blog posts & guides) ─────────────────── */
.marketing-md { font-size: 16px; color: #232221; line-height: 1.92; max-width: 720px; }
.marketing-md p { margin: 0 0 17px; }
.marketing-md h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.5vw, 28px);
  color: #104840;
  letter-spacing: -0.02em;
  margin: 52px 0 17px;
  line-height: 1.2;
}
.marketing-md h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(17px, 2vw, 22px);
  color: #104840;
  margin: 32px 0 14px;
}
.marketing-md a { color: #104840; font-weight: 700; text-underline-offset: 3px; }
.marketing-md ul,
.marketing-md ol { padding-left: 1.35em; margin: 0 0 17px; }
.marketing-md li { margin-bottom: 8px; }
.marketing-md blockquote {
  border-left: 3px solid rgba(237, 201, 38, 0.65);
  margin: 24px 0;
  padding: 12px 0 12px 20px;
  color: #2a2420;
  font-style: italic;
}
.marketing-md-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px auto;
  border-radius: 8px;
}