/*
Theme Name: 262 Studios
Theme URI: https://262studios.co.uk
Author: 262 Studios
Author URI: https://262studios.co.uk
Description: Custom classic WordPress theme for 262 Studios — a London-based marketing, creative and growth partner agency. Built from a locked HTML/CSS prototype, powered by ACF Pro for all editable content.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: Proprietary — All Rights Reserved
Text Domain: two62studios
*/

/* ==========================================================================
   262 STUDIOS — CORE DESIGN SYSTEM v3 (shared stylesheet)
   Same monochrome ink / white base and single accent, tuned for stronger
   headline contrast, slimmer buttons and a few personality details
   (numbered/coloured service dots, marquee band, tilted hero
   thumbnail). Edit here once, it updates every page on the site.

   BREAKPOINT SYSTEM — every media query in this file resolves to one of
   these four tiers. Written desktop-first (max-width), so a viewport
   matches every tier at or below its own size, and later/narrower blocks
   win where rules overlap.
     Extra Large — 1200px and wider   (default styles, no query needed)
     Large       — 1024px – 1200px    @media (max-width: 1199px)
     Medium      — 768px  – 992px     @media (max-width: 991px)
     Small       — 320px  – 480px     @media (max-width: 480px)
   (480–767px is covered by the Medium tier cascading down, matching how
   phones in landscape and small tablets behave in practice.)
   ========================================================================== */

:root {
  --c-cream:        #FFFFFF;
  --c-cream-alt:    #F6F4EF;   /* warmer off-white, alt section background */
  --c-white:        #FFFFFF;
  --c-navy:         #111111;   /* true near-black */
  --c-navy-soft:    #1C1C1C;
  --c-line:         rgba(0, 0, 0, 0.10);
  --c-line-dark:    rgba(255, 255, 255, 0.14);
  --c-accent:       #80D8DF;   /* primary accent, used for fills */
  --c-accent-dim:   #1E8A93;   /* darker accent for text/icons on white */
  --c-accent-tint:  #EAF8F9;

  /* secondary accents — used sparingly as small dots/tags on the services
     grid only, for a bit of colour personality without losing the mono base */
  --c-dot-1: var(--c-accent-dim);
  --c-dot-2: #FF6F59;
  --c-dot-3: #8C7AE6;
  --c-dot-4: #E2A63C;

  --text-muted:     #5B5B58;
  --text-muted-dark:#A3A3A0;

  /* nav colours — kept separate from the core palette so the nav bar can
     be recoloured without touching anything else on the site. */
  --c-nav-bg:       var(--c-navy);
  --c-nav-text:     var(--c-cream);
  --c-nav-text-dim: rgba(255, 255, 255, 0.7);
  --c-nav-hover-bg: rgba(255, 255, 255, 0.14);

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --gap-bento: 14px;

  --space-3xs: 6px;
  --space-2xs: 10px;
  --space-xs:  16px;
  --space-sm:  22px;
  --space-md:  36px;
  --space-lg:  56px;
  --space-xl:  80px;
  --space-2xl: 104px;

  --container-w: 1320px;

  --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--c-cream);
  color: var(--c-navy);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

:focus-visible { outline: none; box-shadow: 0 0 14px 1px rgba(128, 216, 223, 0.55); border-radius: 6px; }
.card-arrow-chip:focus-visible, .text-link:focus-visible { box-shadow: none; outline: none; color: var(--c-accent-dim); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- type: lighter weight, calmer overall sizing */
h1, h2, h3, h4, h5 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--c-navy);
}
.h1, h1 { font-size: clamp(2.3rem, 4.4vw, 4.1rem); font-weight: 600; }
.h2, h2 { font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 600; letter-spacing: -0.018em; }
.h3, h3 { font-size: clamp(1.02rem, 1.3vw, 1.15rem); font-weight: 600; letter-spacing: -0.012em; }
.h4, h4 { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 1em; color: var(--text-muted); font-size: 0.97rem; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-dim);
  margin-bottom: 8px;
}
.section-dark .eyebrow { color: var(--c-accent); }

.lede { font-size: clamp(0.98rem, 1.1vw, 1.08rem); color: var(--text-muted); max-width: 46ch; }

.container { max-width: var(--container-w); margin: 0 auto; padding: 0 32px; }
.section { padding: var(--space-xl) 0; }
.section-tight { padding: var(--space-lg) 0; }
.section-dark { background: var(--c-navy); color: var(--c-cream); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--c-white); }
.section-dark p { color: var(--text-muted-dark); }
.section-alt { background: var(--c-cream-alt); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.section-head--center { text-align: center; flex-direction: column; align-items: center; gap: 0; }

/* ---------------------------------------------------------------- buttons: slim pill, ~40-42px tall */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.81rem;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--c-navy); color: var(--c-cream); }
.btn-primary:hover { background: var(--c-accent); color: var(--c-navy); }
.btn-accent { background: var(--c-accent); color: var(--c-navy); }
.btn-accent:hover { background: var(--c-navy); color: var(--c-cream); }
.btn-outline { background: transparent; border-color: var(--c-navy); color: var(--c-navy); }
.btn-outline:hover { background: var(--c-navy); color: var(--c-cream); }
.btn-outline-light { background: transparent; border-color: var(--c-line-dark); color: var(--c-cream); }
.btn-outline-light:hover { background: var(--c-cream); color: var(--c-navy); border-color: var(--c-cream); }
.btn-arrow { width: 13px; height: 13px; flex-shrink: 0; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

.text-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .87rem;
  color: var(--c-navy);
  border-bottom: 1.5px solid var(--c-accent);
  border-top: none;
  border-left: none;
  border-right: none;
  padding-bottom: 2px;
}
.text-link:hover { color: var(--c-accent-dim); }
.section-dark .text-link { color: var(--c-cream); }

/* ---------------------------------------------------------------- nav */
.site-nav-wrap {
  position: absolute; top: 16px; left: 0; right: 0; z-index: 500;
  display: flex; justify-content: center; padding: 0 24px;
}
body.admin-bar .site-nav-wrap { top: 48px; }
@media (max-width: 782px) {
  body.admin-bar .site-nav-wrap { top: 62px; }
}
.site-nav {
  position: relative;
  width: 100%; max-width: calc(var(--container-w) - 64px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  background: var(--c-nav-bg);
  border-radius: var(--radius-pill);
  padding: 7px 8px 7px 22px;
}
.nav-logo {
  font-weight: 700; font-size: 1.1rem; color: var(--c-nav-text);
  letter-spacing: -0.02em; flex-shrink: 0;
}
.nav-logo span { color: var(--c-nav-text-dim); }
.nav-logo--custom { display: flex; align-items: center; height: 34px; overflow: hidden; }
.nav-logo--custom a { display: flex; align-items: center; height: 100%; }
.nav-logo--custom img { max-height: 100%; max-width: 220px; width: auto; height: 100%; object-fit: contain; display: block; }
.footer-logo--custom { display: flex; align-items: center; height: 40px; overflow: hidden; }
.footer-logo--custom a { display: flex; align-items: center; height: 100%; }
.footer-logo--custom img { max-height: 100%; max-width: 260px; width: auto; height: 100%; object-fit: contain; display: block; }

.nav-menu {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 2px;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 15px;
  border-radius: var(--radius-pill);
  font-weight: 400; font-size: 0.95rem;
  color: var(--c-nav-text);
  transition: background .18s ease;
}
.nav-menu > li > a:hover, .nav-menu > li.is-open > a { background: var(--c-nav-hover-bg); }
.nav-menu > li.current > a { background: var(--c-nav-hover-bg); font-weight: 600; }
.nav-caret { width: 8px; height: 8px; transition: transform .18s ease; }
.nav-menu > li.is-open .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 440px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-menu > li.is-open .nav-dropdown, .nav-menu > li:hover .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dropdown a { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--radius-sm); transition: background .16s ease; }
.nav-dropdown a:hover { background: var(--c-cream-alt); }
.nav-dropdown strong { font-size: 0.84rem; font-weight: 600; color: var(--c-navy); }
.nav-dropdown small { font-size: 0.73rem; color: var(--text-muted); }

.nav-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-cta .btn { padding: 7px 26px; font-size: 0.77rem; white-space: nowrap; }
.nav-cta .btn:hover { background: var(--c-accent-dim); color: var(--c-cream); }

.nav-burger {
  display: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid transparent; background: var(--c-nav-hover-bg);
  align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: ""; display: block; width: 15px; height: 1.5px; background: var(--c-nav-text);
  position: relative; transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-burger span::before { position: absolute; top: -5px; }
.nav-burger span::after { position: absolute; top: 5px; }
/* burger folds into an X to signal the panel is open, reinforcing the fold-out interaction */
.nav-burger.is-open span { background: transparent; }
.nav-burger.is-open span::before { top: 0; transform: rotate(45deg); }
.nav-burger.is-open span::after { top: 0; transform: rotate(-45deg); }

/* True fold-out: the outer element grows from 0 height (an accordion, not a
   fade/scale), border and shadow only painted once there's height to hold
   them, so nothing lingers as a sliver when the panel is closed. */
.nav-mobile-panel {
  position: fixed; inset: 78px 24px auto 24px;
  background: var(--c-white);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: none;
  max-height: 0;
  overflow: hidden;
  z-index: 499;
  display: none;
  transition: max-height .36s cubic-bezier(.22,.8,.24,1), border-color .3s ease, box-shadow .3s ease;
}
.nav-mobile-panel.is-visible { display: block; }
.nav-mobile-panel.is-open {
  max-height: 640px;
  border-color: var(--c-line);
  box-shadow: var(--shadow-card-hover);
}
.nav-mobile-panel-inner { padding: 14px; }
.nav-mobile-panel a { display: block; padding: 12px 8px; font-weight: 600; font-size: 0.95rem; border-bottom: 1px solid var(--c-line); opacity: 0; transform: translateY(-6px); transition: opacity .28s ease, transform .28s ease; }
.nav-mobile-panel a:last-child { border-bottom: none; }
.nav-mobile-panel .btn { margin-top: 12px; width: 100%; }
.nav-mobile-panel.is-open a { opacity: 1; transform: translateY(0); }
.nav-mobile-panel-inner a:nth-child(1) { transition-delay: .04s; }
.nav-mobile-panel-inner a:nth-child(2) { transition-delay: .08s; }
.nav-mobile-panel-inner a:nth-child(3) { transition-delay: .12s; }
.nav-mobile-panel-inner a:nth-child(4) { transition-delay: .16s; }
.nav-mobile-panel-inner a:nth-child(5) { transition-delay: .2s; }
.nav-mobile-panel-inner a:nth-child(6) { transition-delay: .24s; }
body.nav-open { overflow: hidden; }

@media (max-width: 991px) { /* Medium tier: tablets & landscape phones */
  .nav-menu, .nav-cta .btn-accent { display: none; }
  .nav-burger { display: flex; }
  /* nav is logo + burger only below desktop — the Contact CTA already
     lives full-width inside the fold-out panel, so keeping a copy of it
     in the bar too is redundant */
  /* right padding needs to clear the pill's own corner radius (~half the
     bar's height) so the circular burger doesn't visually poke past the
     rounded edge — 7-8px was fine for the smaller pill buttons on desktop
     but not for a 38px circle sitting flush against a fully-rounded bar */
  .site-nav { padding: 7px 22px 7px 18px; }
  .nav-cta { gap: 10px; }
}

.page-shell { padding-top: 92px; }

/* ---------------------------------------------------------------- hero: editorial, not boxed */
.hero-section { padding: 56px 0 var(--space-xl); position: relative; }
.hero-gradient-accent::before {
  content: "";
  position: absolute;
  top: -8%; right: -6%;
  width: 46vw; max-width: 620px; aspect-ratio: 1;
  background: radial-gradient(circle, var(--c-accent) 0%, transparent 72%);
  opacity: 0.28;
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.hero-gradient-accent .hero-grid,
.hero-gradient-accent .split-hero-grid,
.hero-gradient-accent .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-lg); align-items: center; width: 100%; }
.hero-copy h1 { max-width: 16ch; }
.hero-copy .lede { margin-top: 18px; max-width: 58ch; }
/* homepage-only: taller, capped-height hero since it carries no image and
   needs presence above the fold. Scoped to this modifier so About, Services,
   Blog and every other page keep their original compact hero size. */
.hero-section--home {
  min-height: clamp(480px, 78vh, 720px);
  display: flex;
  align-items: center;
  padding: 60px 0;
}
/* homepage hero has no image, so its copy fills the full width */
.hero-grid--no-visual { grid-template-columns: 1fr; }
.hero-grid--no-visual .hero-copy h1 { max-width: 20ch; }
.hero-grid--no-visual .hero-copy .lede { max-width: 54ch; }
.hero-cta-row { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-visual { position: relative; }
.hero-rotator {
  position: relative;
  aspect-ratio: 4 / 3; /* scales with column width instead of staying a fixed 400px tall regardless of viewport */
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: rotate(2deg);
  box-shadow: var(--shadow-card-hover);
}
.hero-rotator .media-placeholder {
  position: absolute; inset: 0;
  border-radius: 0;
  opacity: 0;
  transition: opacity .9s ease;
  min-height: 0;
}
.hero-rotator .media-placeholder.is-active { opacity: 1; }
@media (max-width: 991px) { /* Medium tier: tablets & landscape phones */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; margin: 0 8px 8px; }
  .hero-copy h1 { max-width: none; }
}

/* ---------------------------------------------------------------- small split hero (About / Our Work / Contact / Project intros) */
.split-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: flex-end; }
.split-hero-grid h1 { max-width: 15ch; }
.split-hero-grid .lede { max-width: 48ch; }
@media (max-width: 991px) {
  .split-hero-grid { grid-template-columns: 1fr; gap: var(--space-sm); align-items: flex-start; }
}

/* ---------------------------------------------------------------- bento cards */
.bento-grid { display: grid; gap: var(--gap-bento); }

/* ---------------------------------------------------------------- who we are: split grid that actually collapses on mobile */
.who-grid { display: grid; grid-template-columns: 1.4fr 0.9fr; align-items: center; gap: var(--gap-bento); }
.who-grid-copy { display: flex; flex-direction: column; justify-content: center; padding: 44px 0; }
.who-grid-media { aspect-ratio: 4 / 3; }
@media (max-width: 991px) { /* Medium tier: tablets & landscape phones */
  .who-grid { grid-template-columns: 1fr; }
  .who-grid-copy { padding: 0; }
  .who-grid-media { min-height: 0; aspect-ratio: 16 / 10; order: -1; }
}
.bento-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.bento-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.bento-card--dark { background: var(--c-navy); color: var(--c-cream); border-color: var(--c-navy); }
.bento-card--dark p { color: var(--text-muted-dark); }
.bento-card--dark h1, .bento-card--dark h2, .bento-card--dark h3, .bento-card--dark h4 { color: var(--c-white); }
.bento-card--outline { background: transparent; border: 1px solid var(--c-line); }
.bento-card--accent-line { border-top: 3px solid var(--c-accent); }
.bento-card--accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-navy); }
.bento-card--accent p { color: rgba(0,0,0,0.65); }
.bento-card--static:hover { transform: none; box-shadow: var(--shadow-card); }

.card-arrow-chip {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--c-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-navy);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  flex-shrink: 0;
}
.bento-card:hover .card-arrow-chip { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-navy); }
.bento-card--dark .card-arrow-chip { border-color: var(--c-accent); color: var(--c-accent); }
.bento-card--dark:hover .card-arrow-chip { background: var(--c-accent); color: var(--c-navy); }
.card-arrow-chip svg { width: 14px; height: 14px; }

.bento-span-1 { grid-column: span 1; }
.bento-span-2 { grid-column: span 2; }
.bento-span-3 { grid-column: span 3; }
.bento-span-4 { grid-column: span 4; }
@media (max-width: 767px) { /* Medium/Small transition: single column below tablet */
  .bento-span-1, .bento-span-2, .bento-span-3, .bento-span-4 { grid-column: span 1; }
}

/* ---------------------------------------------------------------- services grid: asymmetric, one featured card instead of four even boxes */
.services-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--gap-bento);
}
.service-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 190px;
  max-height: 260px;
}
.service-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.service-card--feature {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding: 36px;
  max-height: 440px;
}
.service-card--feature h3 { font-size: 1.3rem; }
.service-card--feature p { -webkit-line-clamp: 7; }
.service-card--wide p { display: block; -webkit-line-clamp: unset; overflow: visible; max-width: none; }
.service-card--top-a { grid-column: 2; grid-row: 1; }
.service-card--top-b { grid-column: 3; grid-row: 1; }
.service-card--wide {
  grid-column: 2 / -1; grid-row: 2;
  min-height: 0 !important;
  max-height: none !important;
  padding: 32px 40px;
  border-color: var(--c-accent);
  border-width: 1.5px;
}
@media (max-width: 991px) and (min-width: 768px) { /* Medium tier: tablets & landscape phones */
  .services-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
  .service-card--feature { grid-column: 1 / span 2; grid-row: 1; min-height: 220px; }
  .service-card--top-a { grid-column: 1; grid-row: 2; }
  .service-card--top-b { grid-column: 2; grid-row: 2; }
  .service-card--wide { grid-column: 1 / span 2; grid-row: 3; }
}
@media (max-width: 767px) { /* Medium/Small transition: single column below tablet */
  .services-grid { grid-template-columns: 1fr; }
  .service-card--feature, .service-card--top-a, .service-card--top-b, .service-card--wide {
    grid-column: 1; grid-row: auto;
  }
}

.media-placeholder {
  width: 100%; border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--c-navy-soft), var(--c-navy));
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  color: rgba(255,255,255,0.65);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
}
.media-placeholder img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.media-placeholder::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px);
}
.media-placeholder span { position: relative; padding: 15px 17px; }
.media-placeholder--tint { background: linear-gradient(150deg, var(--c-accent-tint), var(--c-cream-alt)); color: rgba(0,0,0,0.5); }
.media-placeholder--dot {
  background: var(--c-cream-alt);
  color: rgba(0,0,0,0.55);
  background-image: radial-gradient(rgba(0,0,0,0.16) 1.4px, transparent 1.4px);
  background-size: 16px 16px;
}
.media-placeholder--dot::before { display: none; }
.media-placeholder--accent-block {
  background: var(--c-accent);
  color: rgba(0,0,0,0.65);
}
.media-placeholder--accent-block::before { display: none; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--c-cream-alt);
  font-size: 0.76rem; font-weight: 600; color: var(--c-navy);
  border: 1px solid var(--c-line);
}
.pill--dark { background: rgba(255,255,255,0.08); border-color: var(--c-line-dark); color: var(--c-cream); }
.pill--active { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-cream); }
.meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); }
.meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); opacity: .5; }

/* ---------------------------------------------------------------- carousel cards (Insights / blog) */
.work-carousel {
  display: flex; gap: var(--gap-bento);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.work-carousel::-webkit-scrollbar { display: none; }
.work-card {
  flex: 0 0 auto; width: min(500px, 82vw);
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.work-card .media-placeholder { min-height: 300px; border-radius: 0; }
.work-card-body { padding: 22px 24px; }

.carousel-controls { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: var(--space-sm); }
.carousel-arrows { display: flex; gap: 10px; }
.carousel-arrow {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--c-navy);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease;
  cursor: pointer;
}
.carousel-arrow:hover { background: var(--c-navy); color: var(--c-cream); }
.carousel-arrow svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- compact rows (Our Work / related lists) */
.blog-row {
  display: flex; align-items: stretch; gap: 24px;
  padding: 18px; border-radius: var(--radius-lg);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-row:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.blog-row:hover .card-arrow-chip { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-navy); }
.blog-row .media-placeholder { width: 300px; flex-shrink: 0; min-height: 200px; }
.blog-row-body { display: flex; flex-direction: column; justify-content: center; padding: 4px 4px; gap: 4px; flex: 1 1 auto; min-width: 0; }
.blog-row .card-arrow-chip { align-self: center; flex-shrink: 0; }
@media (max-width: 767px) { /* Medium/Small transition */
  .blog-row { flex-direction: column; }
  .blog-row .media-placeholder { width: 100%; min-height: 170px; }
  .blog-row .card-arrow-chip { align-self: flex-end; }
}

/* ---------------------------------------------------------------- Our Work: overlapping sticky stack */
.work-stack { display: flex; flex-direction: column; gap: 16px; }
.work-stack .blog-row {
  position: sticky;
  box-shadow: 0 12px 28px rgba(0,0,0,0.07);
}
.work-stack .blog-row:nth-child(1) { top: 104px; z-index: 1; }
.work-stack .blog-row:nth-child(2) { top: 140px; z-index: 2; }
.work-stack .blog-row:nth-child(3) { top: 176px; z-index: 3; }
.work-stack .blog-row:nth-child(4) { top: 212px; z-index: 4; }
@media (max-width: 767px) { /* Medium/Small transition */
  .work-stack .blog-row { position: relative; top: auto !important; box-shadow: var(--shadow-card); }
}

/* ---------------------------------------------------------------- card grids (blog index / our work index) */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-bento); }
.post-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--c-white); border: 1px solid var(--c-line); transition: box-shadow .2s ease, transform .2s ease; display: flex; flex-direction: column; }
.post-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.post-card .media-placeholder { min-height: 190px; border-radius: 0; }
.post-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card-body h3 { font-size: 1.02rem; }
@media (max-width: 991px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .card-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- mini CTA */
.mini-cta {
  background: var(--c-navy); color: var(--c-cream);
  border-radius: var(--radius-lg);
  padding: 24px 30px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.mini-cta span { font-size: 1.05rem; font-weight: 600; color: var(--c-white); letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- final CTA band: three zones spread across the full row instead of two blocks pinned to the corners */
.cta-band {
  padding: 60px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.cta-band-heading { flex: 1 1 300px; }
.cta-band-heading h2 { max-width: 13ch; }
.cta-band-copy { flex: 1 1 280px; margin: 0; color: var(--text-muted-dark); max-width: 38ch; }
.cta-band-action { flex: 0 0 auto; }
.cta-band--dark { background: var(--c-navy); color: var(--c-cream); border-radius: var(--radius-lg); }
.cta-band--dark h2 { color: var(--c-white); }
.cta-band--dark .eyebrow { color: var(--c-accent); }
@media (max-width: 767px) { /* Medium/Small transition */
  .cta-band { padding: 40px 32px; }
}

/* ---------------------------------------------------------------- testimonial */
.testimonial-split {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-md); align-items: stretch;
}
.testimonial-intro { display: flex; flex-direction: column; justify-content: space-between; }
.testimonial-intro-copy { max-width: 40ch; }
.testimonial-stats { display: flex; gap: var(--space-lg); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--c-line); width: fit-content; }
.testimonial-stats div strong { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.testimonial-stats div span { font-size: 0.82rem; color: var(--text-muted); }

.testimonial-feature {
  background: var(--c-navy); color: var(--c-cream);
  border-radius: var(--radius-lg);
  padding: 38px;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-md);
  min-height: 300px;
  position: relative;
}
.testimonial-feature blockquote {
  margin: 0; font-weight: 400; font-size: clamp(0.98rem, 1.05vw, 1.12rem); line-height: 1.55; color: var(--c-white); letter-spacing: -0.01em;
}
.testimonial-feature-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.testimonial-person { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--c-accent); flex-shrink: 0; }
.testimonial-person strong { display: block; font-size: 0.9rem; }
.testimonial-person span { font-size: 0.79rem; color: var(--text-muted-dark); }
.testimonial-nav { display: flex; gap: 10px; }
.testimonial-nav button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--c-accent); color: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.testimonial-nav button:hover { background: var(--c-accent); color: var(--c-navy); }
.testimonial-nav svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- related testimonial cards (light, small) */
.testimonial-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-bento); margin-top: var(--gap-bento); }
.testimonial-mini { padding: 24px; }
.testimonial-mini blockquote { margin: 0 0 16px; font-size: 0.92rem; color: var(--c-navy); font-weight: 500; line-height: 1.55; }
@media (max-width: 991px) { .testimonial-mini-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .testimonial-mini-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- form fields */
.field { margin-bottom: var(--space-xs); }
.field label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; color: var(--c-navy); }
.field label .req { color: var(--c-accent-dim); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-line); background: var(--c-white); color: var(--c-navy);
  transition: border-color .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-accent); }
.field textarea { resize: vertical; min-height: 130px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-xs); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%235B5B58' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px; }
.field-check { display: flex; align-items: flex-start; gap: 10px; }
.field-check input { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }
.field-check label { margin: 0; font-weight: 400; font-size: 0.82rem; color: var(--text-muted); }
.form-card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-card); }
@media (max-width: 480px) { .field-row, .field-row-3 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- split page layout (contact / project) */
.split-page { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-xl); align-items: flex-start; }
.split-page-info { position: sticky; top: 116px; }
.info-item { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--c-line); }
.info-item:first-of-type { border-top: none; }
.info-item-icon { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--c-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-item-icon svg { width: 16px; height: 16px; color: var(--c-accent-dim); }
.info-item strong { display: block; font-size: 0.92rem; margin-bottom: 3px; }
.info-item span, .info-item a { font-size: 0.87rem; color: var(--text-muted); }
@media (max-width: 991px) {
  .split-page { grid-template-columns: 1fr; }
  .split-page-info { position: static; }
}

/* ---------------------------------------------------------------- numbers / stats grid */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-bento); }
.stat-card { padding: 30px 26px; text-align: left; }
.stat-card strong { display: block; font-size: clamp(2.1rem, 3vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin-bottom: 10px; }
.stat-card span { font-size: 0.85rem; color: var(--text-muted); }
.bento-card--dark .stat-card span, .bento-card--dark.stat-card span { color: var(--text-muted-dark); }
@media (max-width: 991px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- team: split — one featured person + cycling mini bios */
.team-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-md); align-items: stretch; }
.team-feature { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.team-feature .media-placeholder { min-height: 340px; border-radius: 0; }
.team-feature-body { padding: 22px 24px 26px; }
.team-feature-body h3 { font-size: 1.2rem; }
.team-feature-body span.role { display: block; font-size: 0.85rem; color: var(--text-muted); margin: 4px 0 12px; }
.team-carousel-wrap { display: flex; flex-direction: column; }
.team-carousel-track { display: flex; gap: var(--gap-bento); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1; }
.team-carousel-track::-webkit-scrollbar { display: none; }
.team-mini-card { flex: 0 0 auto; width: min(240px, 62vw); scroll-snap-align: start; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.team-mini-avatar { width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); }
.team-mini-card strong { display: block; font-size: 0.94rem; }
.team-mini-card span { font-size: 0.8rem; color: var(--text-muted); }
@media (max-width: 991px) {
  .team-split { grid-template-columns: 1fr; }
  .team-feature .media-placeholder { min-height: 260px; }
}

/* ---------------------------------------------------------------- service tabs */
.tabs-bar { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--c-line); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); }
.tab-btn { padding: 10px 20px; border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 600; border: 1.5px solid var(--c-line); color: var(--c-navy); transition: background .18s ease, border-color .18s ease, color .18s ease; cursor: pointer; }
.tab-btn:hover { border-color: var(--c-navy); }
.tab-btn.is-active { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-cream); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeInTab .35s ease; }
@keyframes fadeInTab { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.tab-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.tab-panel-grid .media-placeholder { aspect-ratio: 4/3; }
.tab-feature-list { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 24px; }
.tab-feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--c-navy); }
.tab-feature-list svg { width: 16px; height: 16px; color: var(--c-accent-dim); flex-shrink: 0; margin-top: 3px; }
@media (max-width: 991px) { .tab-panel-grid { grid-template-columns: 1fr; gap: var(--space-md); } }

/* ---------------------------------------------------------------- service feature list (individual service page) */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: var(--gap-bento); }
.feature-card { padding: 26px; display: flex; flex-direction: column; justify-content: center; min-height: 168px; }
.feature-card .num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-accent-tint); color: var(--c-accent-dim); font-weight: 700; font-size: 0.85rem; margin-bottom: 16px; }
@media (max-width: 991px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- approach / process steps */
.process-list { display: flex; flex-direction: column; }
.process-item { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-md); padding: 28px 0; border-top: 1px solid var(--c-line); }
.process-item:first-child { border-top: none; padding-top: 0; }
.process-item .step-num { font-size: 0.85rem; font-weight: 700; color: var(--c-accent-dim); letter-spacing: 0.05em; }
.process-item h3 { margin-bottom: 8px; }
.process-item p { max-width: 56ch; }
@media (max-width: 767px) { .process-item { grid-template-columns: 1fr; gap: 8px; } }

/* ---------------------------------------------------------------- next steps (project booking) */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-bento); }
.step-card { padding: 26px; }
.step-card .step-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-navy); color: var(--c-cream); font-weight: 700; font-size: 0.78rem; margin-bottom: 14px; }
@media (max-width: 767px) { .steps-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- FAQ accordion */
.accordion { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
.accordion-item { border-bottom: 1px solid var(--c-line); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; text-align: left; font-size: 1rem; font-weight: 600; color: var(--c-navy);
  cursor: pointer;
}
.accordion-icon { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--c-line); flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.accordion-icon::before, .accordion-icon::after { content: ""; position: absolute; background: var(--c-navy); transition: transform .25s ease, opacity .2s ease; }
.accordion-icon::before { width: 10px; height: 1.5px; }
.accordion-icon::after { width: 1.5px; height: 10px; }
.accordion-item.is-open .accordion-icon { background: var(--c-navy); border-color: var(--c-navy); }
.accordion-item.is-open .accordion-icon::before, .accordion-item.is-open .accordion-icon::after { background: var(--c-cream); }
.accordion-item.is-open .accordion-icon::after { transform: rotate(90deg); opacity: 0; }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.accordion-panel-inner { padding: 0 4px 22px; max-width: 68ch; }
.accordion-panel-inner p { font-size: 0.92rem; }
.faq-two-col { columns: 2; column-gap: var(--space-lg); }
.faq-two-col .accordion-item { break-inside: avoid; }
@media (max-width: 767px) { .faq-two-col { columns: 1; } }

/* Two-column FAQ using two independent accordion lists side by side. Use this
   instead of .faq-two-col when the FAQ items are interactive accordions —
   CSS multi-column rebalances column heights as panels open and close,
   which makes questions visibly jump between columns. A grid of two fixed
   .accordion lists avoids that, since each column's item set never changes. */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-lg); max-width: 980px; margin: 0 auto; }
@media (max-width: 767px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- newsletter band (standalone, blog index / homepage variant) */
.newsletter-band { background: var(--c-navy); color: var(--c-cream); border-radius: var(--radius-lg); padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.newsletter-band h1, .newsletter-band h2, .newsletter-band h3, .newsletter-band h4 { color: var(--c-white); }
.newsletter-band-copy { flex: 1 1 320px; }
.newsletter-band-copy h2 { max-width: 16ch; }
.newsletter-band-form { flex: 1 1 340px; }
.newsletter-band-form form { display: flex; gap: 8px; }
.newsletter-band-form input { flex: 1; padding: 13px 18px; border-radius: var(--radius-pill); border: 1px solid var(--c-line-dark); background: rgba(255,255,255,0.06); color: var(--c-white); font-size: 0.92rem; }
.newsletter-band-form input::placeholder { color: #8B8B88; }
.newsletter-band-form small { display: block; margin-top: 10px; color: var(--text-muted-dark); font-size: 0.76rem; }
@media (max-width: 767px) { .newsletter-band { padding: 32px 26px; } .newsletter-band-form form { flex-direction: column; } }

/* ---------------------------------------------------------------- blog toolbar: search + category pills */
.blog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.search-bar { position: relative; flex: 0 1 320px; }
.search-bar input { width: 100%; padding: 12px 18px 12px 42px; border-radius: var(--radius-pill); border: 1.5px solid var(--c-line); background: var(--c-white); font-size: 0.88rem; }
.search-bar input:focus { outline: none; border-color: var(--c-accent); }
.search-bar svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-muted); }
.category-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.category-pills button { padding: 8px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--c-line); font-size: 0.8rem; font-weight: 600; color: var(--c-navy); transition: background .18s ease, color .18s ease, border-color .18s ease; cursor: pointer; }
.category-pills button.is-active, .category-pills button:hover { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-cream); }
.no-results { display: none; padding: 40px 0; text-align: center; color: var(--text-muted); }
.no-results.is-visible { display: block; }

/* ---------------------------------------------------------------- pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--space-lg); }
.pagination a, .pagination span { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; border: 1.5px solid var(--c-line); }
.pagination a:hover { border-color: var(--c-navy); }
.pagination .is-current { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-cream); }
.pagination .pg-arrow { border-color: transparent; }

/* ---------------------------------------------------------------- featured post (blog index) */
.featured-post { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-md); align-items: stretch; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-line); }
.featured-post .media-placeholder { min-height: 100%; border-radius: 0; }
.featured-post-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.featured-post-body h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 12px 0 14px; }
@media (max-width: 991px) { .featured-post { grid-template-columns: 1fr; } .featured-post .media-placeholder { min-height: 240px; } .featured-post-body { padding: 28px; } }

/* ---------------------------------------------------------------- blog post template layout */
.post-title-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-lg); align-items: center; margin-top: var(--space-md); }
.post-hero-media { border-radius: var(--radius-lg); overflow: hidden; margin-top: 0; }
.post-hero-media .media-placeholder { aspect-ratio: 4 / 3; border-radius: 0; }
@media (max-width: 900px) {
  .post-title-grid { grid-template-columns: 1fr; }
  .post-hero-media { order: -1; }
}
.post-header { max-width: 74ch; }
.post-header h1 { max-width: none; font-size: clamp(1.9rem, 3.6vw, 3rem); }
.post-author-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.post-author-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--c-accent); flex-shrink: 0; }
.post-author-row strong { display: block; font-size: 0.9rem; }
.post-author-row span { font-size: 0.8rem; color: var(--text-muted); }
.post-date { font-weight: 600; color: var(--c-navy); letter-spacing: 0.01em; }

.post-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-xl); align-items: flex-start; }
.post-sidebar { position: sticky; top: 116px; display: flex; flex-direction: column; gap: var(--space-lg); }
.post-toc { display: flex; flex-direction: column; gap: 4px; }
.post-toc a { display: block; padding: 8px 0; font-size: 0.84rem; color: var(--text-muted); border-left: 2px solid var(--c-line); padding-left: 14px; transition: color .16s ease, border-color .16s ease; }
.post-toc a:hover, .post-toc a.is-active { color: var(--c-navy); border-color: var(--c-accent); font-weight: 600; }
.share-row { display: flex; gap: 8px; }
.share-row a { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--c-line); display: flex; align-items: center; justify-content: center; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.share-row a:hover { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-cream); }
.share-row svg { width: 14px; height: 14px; }

.post-body { max-width: 74ch; font-size: 1.02rem; }
.post-body h2 { margin: 2.2em 0 0.6em; font-size: 1.5rem; scroll-margin-top: 120px; }
.post-body h2:first-child { margin-top: 0; }
.post-body h3 { margin: 1.8em 0 0.5em; font-size: 1.15rem; scroll-margin-top: 120px; }
.post-body p { font-size: 1rem; line-height: 1.75; margin-bottom: 1.3em; }
.post-body ul, .post-body ol { margin: 0 0 1.3em; padding-left: 1.4em; color: var(--text-muted); }
.post-body li { margin-bottom: 0.5em; font-size: 1rem; line-height: 1.7; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body a { text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 3px; }
.post-body img, .post-body .media-placeholder { margin: 1.6em 0; }

.pull-quote { background: var(--c-accent); color: var(--c-navy); border-radius: var(--radius-lg); padding: 36px 48px; margin: 2.4em auto; max-width: 62ch; text-align: center; position: relative; }
.pull-quote::before { content: "\201C"; display: block; font-size: 2.4rem; line-height: 1; font-weight: 700; color: var(--c-navy); opacity: 0.3; font-family: Georgia, serif; margin-bottom: 2px; }
.pull-quote blockquote { margin: 0; font-size: clamp(0.98rem, 1.3vw, 1.15rem); font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; color: var(--c-navy); position: relative; z-index: 1; }
.pull-quote cite { display: block; margin-top: 14px; font-style: normal; font-size: 0.8rem; color: var(--c-navy); opacity: 0.6; }
/* Dark variant: navy card, large corner quote mark. Used as an alternate pull-quote treatment (about.html / blog-home.html pattern). */
.pull-quote--dark { background: var(--c-navy); color: var(--c-cream); border-radius: var(--radius-lg); padding: 40px 44px; margin: 2.4em 0; max-width: none; text-align: left; position: relative; }
.pull-quote--dark::before { content: "\201C"; position: absolute; top: 6px; left: 30px; font-size: 5rem; line-height: 1; font-weight: 700; color: var(--c-accent); opacity: 0.5; font-family: Georgia, serif; }
.pull-quote--dark blockquote { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--c-white); position: relative; z-index: 1; }
.pull-quote--dark cite { display: block; margin-top: 16px; font-style: normal; font-size: 0.85rem; color: var(--text-muted-dark); }

@media (max-width: 991px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
}
@media (max-width: 480px) { .pull-quote { padding: 30px 26px; } }

/* ---------------------------------------------------------------- project detail meta grid (Our Work single) */
.meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-bento); }
.meta-grid-item { padding: 22px 24px; }
.meta-grid-item span.label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent-dim); margin-bottom: 8px; }
.meta-grid-item strong { font-size: 0.98rem; font-weight: 600; }
@media (max-width: 991px) { .meta-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .meta-grid { grid-template-columns: 1fr; } }

.case-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
@media (max-width: 991px) { .case-split { grid-template-columns: 1fr; } }

.result-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-bento); }
@media (max-width: 767px) { .result-strip { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- legal / policy prose */
.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-xl); align-items: flex-start; }
.legal-nav { position: sticky; top: 116px; display: flex; flex-direction: column; gap: 4px; }
.legal-nav a { padding: 9px 0; font-size: 0.86rem; color: var(--text-muted); border-left: 2px solid var(--c-line); padding-left: 14px; }
.legal-nav a:hover { color: var(--c-navy); border-color: var(--c-accent); }
.legal-content { max-width: 74ch; }
.legal-content section { padding-top: 8px; margin-bottom: 2.6em; scroll-margin-top: 116px; }
.legal-content h2 { font-size: 1.4rem; margin-bottom: 0.7em; }
.legal-content h3 { font-size: 1.05rem; margin: 1.4em 0 0.5em; }
.legal-content p { font-size: 0.96rem; line-height: 1.75; margin-bottom: 1.2em; }
.legal-content ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1.2em; }
.legal-content li { font-size: 0.96rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 0.5em; }
.legal-updated { font-size: 0.82rem; color: var(--text-muted); margin-bottom: var(--space-md); }
@media (max-width: 991px) { .legal-layout { grid-template-columns: 1fr; } .legal-nav { position: static; flex-direction: row; flex-wrap: wrap; } }

/* ---------------------------------------------------------------- breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); margin-bottom: var(--space-sm); flex-wrap: wrap; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--c-navy); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: var(--c-navy); font-weight: 600; }

/* ---------------------------------------------------------------- form success state */
.form-success { display: none; text-align: center; padding: 40px 20px; }
.form-success.is-visible { display: block; }
.form-success .icon { width: 56px; height: 56px; border-radius: 50%; background: var(--c-accent-tint); color: var(--c-accent-dim); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.form-success .icon svg { width: 24px; height: 24px; }
.form-fields.is-hidden { display: none; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--c-navy); color: var(--c-cream);
  padding: var(--space-xl) 0 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-top: 8px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  column-gap: var(--space-lg);
  row-gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--c-line-dark);
}
.footer-nav-cluster { display: flex; gap: 30px; }
.footer-nav-cluster .footer-col { flex: 1; padding-left: 28px; border-left: 1px solid var(--c-line-dark); }
.footer-nav-cluster .footer-col:first-child { padding-left: 0; border-left: none; }
.footer-logo { font-weight: 700; font-size: 1.25rem; margin-bottom: var(--space-md); letter-spacing: -0.02em; }
.footer-logo span { color: var(--c-accent); }
.footer-contact-item { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: #CFCFCC; margin-bottom: var(--space-2xs); }
.footer-contact-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--c-accent); }

.footer-col h5 {
  color: var(--c-accent);
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: var(--space-sm); font-weight: 700;
}
.footer-col a { display: block; color: #CFCFCC; font-size: 0.88rem; margin-bottom: 11px; transition: color .16s ease; }
.footer-col a:hover { color: var(--c-white); }

.footer-newsletter form { display: flex; gap: 8px; margin-top: 4px; }
.footer-newsletter input {
  flex: 1; padding: 11px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--c-line-dark); background: rgba(255,255,255,0.05); color: var(--c-white);
  font-size: 0.88rem;
}
.footer-newsletter input::placeholder { color: #6E6E6B; }
.footer-newsletter button {
  width: 40px; height: 40px; border-radius: 50%; background: var(--c-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .16s ease;
}
.footer-newsletter button:hover { background: var(--c-white); }
.footer-newsletter button svg { width: 14px; height: 14px; color: var(--c-navy); }

.footer-socials { display: flex; gap: 10px; margin-top: var(--space-sm); }
.footer-socials a {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-line-dark);
  display: flex; align-items: center; justify-content: center; margin-bottom: 0 !important;
}
.footer-socials svg { width: 13px; height: 13px; }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; padding: var(--space-sm) 0;
  font-size: 0.79rem; color: var(--text-muted-dark);
}
.footer-bottom-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-bottom-links a:hover { color: var(--c-white); }
.footer-bottom-links .sep { color: var(--c-line-dark); }
.footer-credit {
  padding: 6px 13px; border-radius: var(--radius-pill);
  border: 1px solid var(--c-line-dark); font-size: 0.79rem; color: var(--text-muted-dark);
}
.footer-credit:hover { color: var(--c-white); border-color: var(--c-accent); }

@media (max-width: 1199px) { /* Large tier: small desktops & laptops */
  :root { --space-xl: 68px; --space-2xl: 92px; }
  .container { padding: 0 28px; }
  .services-grid, .card-grid, .feature-grid, .steps-grid, .stats-grid { gap: 12px; }
}

@media (max-width: 991px) { /* Medium tier: tablets & landscape phones */
  .footer-top { grid-template-columns: 1fr; }
  :root { --space-xl: 56px; --space-2xl: 76px; --gap-bento: 12px; }
  .container { padding: 0 22px; }
  .field-row, .field-row-3 { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .testimonial-split { grid-template-columns: 1fr; }
  .feature-grid, .steps-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) { /* Medium/Small transition */
  .footer-nav-cluster { flex-direction: column; gap: var(--space-sm); }
  .footer-nav-cluster .footer-col { padding-left: 0; border-left: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .feature-grid, .steps-grid, .meta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) { /* Small tier: mobile phones */
  .container { padding: 0 18px; }
  .bento-card { padding: 20px; }
  .testimonial-feature { padding: 24px; }
  .hero-rotator { aspect-ratio: 3 / 2; } /* a touch wider/shorter reads better than 4:3 on a narrow phone */
  .cta-band { padding: 30px 22px; gap: var(--space-md); }
  .cta-band-heading h2 { font-size: 1.6rem; }
  .service-card--feature { padding: 26px; }
}

/* ---------------------------------------------------------------- back to top */
.back-to-top {
  position: fixed; right: 24px; bottom: 90px; z-index: 600;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--c-navy); color: var(--c-cream);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card-hover);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .18s ease;
  cursor: pointer;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--c-accent); color: var(--c-navy); }
.back-to-top svg { width: 17px; height: 17px; }
.hide-mobile {}
@media (max-width: 767px) { .hide-mobile { display: none !important; } } /* Medium/Small transition */

/* ==========================================================================
   ADDITIONAL COMPONENTS — merged in from page-specific prototype styles
   (about.html, service-page-template.html, blog-home.html) during the
   WordPress conversion. These selectors did not exist in the original
   standalone style.css but are used by markup on those pages.
   ========================================================================== */

.cta-section { padding-bottom: var(--space-xl); } /* deliberate breathing room before the footer, instead of section padding + footer margin quietly stacking into an uneven gap */

/* Team — full-width row layout (About page team bios) */
.team-row-card { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 0.6fr 1fr; align-items: center; padding: 0; }
.team-row-card .media-placeholder { aspect-ratio: 4 / 3; border-radius: 0; }
.team-row-body { padding: 40px 46px; display: flex; flex-direction: column; justify-content: center; }
.team-row-body strong { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.team-row-body .role { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-accent-dim); margin-bottom: 16px; }
.team-row-body p, .team-row-bio p { max-width: 48ch; color: var(--text-muted); }
.team-row-bio p { margin: 0 0 12px; }
.team-row-bio p:last-child { margin-bottom: 0; }
.team-row-bio strong, .team-row-bio b { color: var(--c-navy); }
@media (max-width: 767px) {
  .team-row-card { grid-template-columns: 1fr; }
  .team-row-card .media-placeholder { min-height: 0; aspect-ratio: 4 / 3; }
  .team-row-body { padding: 26px; }
}

.bento-card--dark .num { background: rgba(255,255,255,0.12); color: var(--c-accent); }

/* Process panel — two-column intro + numbered rows (About + Service pages) */
.process-panel { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-xl); padding: 64px; }
.process-panel-intro h2 { margin-top: 16px; font-size: 2.1rem; }
.process-panel-intro h2 .dim { color: var(--text-muted); font-weight: 600; }
.process-panel-intro p { margin-top: 16px; color: var(--text-muted); max-width: 42ch; }
.process-panel-intro .btn { margin-top: 32px; }
.process-panel-row { padding: 30px 0; border-top: 1px solid var(--c-line); }
.process-panel-row:first-child { border-top: none; padding-top: 0; }
.process-panel-row h3 { font-size: 1.1rem; color: var(--c-navy); margin-bottom: 10px; }
.process-panel-row p { font-size: 0.96rem; color: var(--text-muted); line-height: 1.65; }
@media (max-width: 900px) {
  .process-panel { grid-template-columns: 1fr; padding: 32px 26px; gap: var(--space-md); }
}

/* Blog home — flush bottom section variant, used ahead of the newsletter band */
.section-tight.section-flush-bottom { padding-bottom: 48px; }
.section-tight.section-flush-bottom .newsletter-band { margin-bottom: 0; }

/* ==========================================================================
   CASE STUDY PAGE — merged in from case-study-template.html (added after
   initial theme delivery, once that prototype file was provided).
   ========================================================================== */
.meta-strip { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
.meta-strip .meta-grid-item { padding: 24px 28px; border-left: 1px solid var(--c-line); text-align: center; }
.meta-strip .meta-grid-item:first-child { border-left: none; }
.meta-strip .meta-grid-item strong { font-weight: 500; }
@media (max-width: 991px) {
  .meta-strip { grid-template-columns: 1fr 1fr; }
  .meta-strip .meta-grid-item:nth-child(2n+1) { border-left: none; }
  .meta-strip .meta-grid-item:nth-child(n+3) { border-top: 1px solid var(--c-line); }
}
@media (max-width: 480px) {
  .meta-strip { grid-template-columns: 1fr; }
  .meta-strip .meta-grid-item { border-left: none !important; border-top: 1px solid var(--c-line); }
  .meta-strip .meta-grid-item:first-child { border-top: none; }
}

.case-split .result-strip { margin-top: 32px; }
.case-split .stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 16px; }
.case-split .stat-card strong { font-size: clamp(1.35rem, 1.8vw, 1.6rem); font-weight: 500; margin-bottom: 6px; }
.case-split .stat-card span { font-size: 0.75rem; font-weight: 400; line-height: 1.4; }

.case-quote { min-height: 0; justify-content: flex-start; padding: 40px 44px; gap: 22px; }
.case-quote blockquote { font-size: 1.2rem; max-width: 62ch; }
@media (max-width: 480px) { .case-quote { padding: 30px 26px; } }

.case-study-hero { padding: 20px 0 32px; }
.case-section { padding: 22px 0; }
.case-section--band { padding: 44px 0; }