/* ============================================================
   Visual Harmony, Child Theme Styles
   visual-harmony.css
   Version: 2.7.0  (hero headline/lead driven by VH Base Settings; em = accent)
   ============================================================ */


/* ============================================================
   1. Design Tokens (CSS custom properties)
   ============================================================ */

:root {
  /* ===== VH Brand Palette =====
     Three brand colors + luminosity-adjusted variants. */

  /* Primary, teal */
  --vh-teal:        #6ecddd;
  --vh-teal-dark:   #3ba0b3;
  --vh-teal-light:  #c7ecf2;
  --vh-teal-soft:   #a5e0e9;

  /* Tertiary accent, orange */
  --vh-orange:      #db5327;
  --vh-orange-dark: #b04220;
  --vh-orange-light: #f7d7c8;

  /* Neutral gray scale */
  --vh-gray:        #c0c0c0;
  --vh-gray-darker: #1a1a1a;
  --vh-gray-dark:   #262626;
  --vh-gray-mid:    #555555;
  --vh-gray-mute:   #888888;
  --vh-gray-line:   #d4d4d4;
  --vh-gray-light:  #ebebeb;
  --vh-gray-bg:     #f5f5f5;

  /* ===== Override parent theme tokens (parent main.css uses these) ===== */
  --accent:      var(--vh-teal);
  --accent-soft: var(--vh-teal-soft);
  --ink:         var(--vh-gray-dark);
  --ink-soft:    var(--vh-gray-mid);
  --ink-mute:    var(--vh-gray-mute);
  --warm:        var(--vh-gray-bg);
  --bg:          #fafafa;
  --bg-deep:     var(--vh-gray-light);
  --line:        var(--vh-gray-line);

  /* ===== Child theme tokens ===== */
  --color-ink:          var(--vh-gray-dark);
  --color-ink-mid:      #3a3a3a;
  --color-ink-soft:     #707070;
  --color-accent:       var(--vh-teal);
  --color-accent-dark:  var(--vh-teal-dark);
  --color-accent-light: var(--vh-teal-light);
  --color-warm:         var(--vh-gray-bg);
  --color-white:        #ffffff;
  --color-border:       var(--vh-gray-line);
  --color-border-dark:  rgba(255, 255, 255, 0.12);
  --color-text:         var(--vh-gray-darker);
  --color-text-mid:     var(--vh-gray-mid);
  --color-text-muted:   var(--vh-gray-mute);

  /* Orange, accent / tertiary */
  --color-orange:       var(--vh-orange);
  --color-orange-dark:  var(--vh-orange-dark);
  --color-orange-light: var(--vh-orange-light);

  /* Typography — single family (Source Sans 3), differentiated by weight/style */
  --font-display: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  /* Override the parent base theme's display font (was Playfair) so its
     --serif / --font-heading headings switch too. */
  --vhbase-display-font: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;

  /* Spacing scale (4px base) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  48px;
  --space-2xl: 80px;
  --space-3xl: 128px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Shadows, neutral (was navy-tinted) */
  --shadow-card:       0 2px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --transition-fast:   250ms ease;
  --transition-reveal: 400ms ease-out;
}


/* ============================================================
   2. Base / Reset overrides
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
}

a:hover {
  color: var(--color-accent-dark);
}


/* ============================================================
   3. Typography
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  color: var(--color-text);
  margin-top: 0;
}

/* Editorial type blend — inner pages only (homepage WIP styled separately).
   Bold primary headings, 600 sub-headings. Eyebrows stay 600, testimonials
   italic 400, large numerals light 300 (all set per-component). */
.site-main--project h1,
.site-main--project h2,
.site-main--archive h1,
.site-main--archive h2,
.site-main--industry h1,
.site-main--industry h2 {
  font-weight: 700;
}

.site-main--project h3,
.site-main--project h4,
.site-main--archive h3,
.site-main--industry h3,
.site-main--industry h4 {
  font-weight: 600;
}

p {
  line-height: 1.65;
  margin-top: 0;
}

.admin-notice {
  background: #fff3cd;
  border: 1px solid #ffe69c;
  color: #664d03;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}


/* ============================================================
   4. Layout utilities
   ============================================================ */

.container {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

.site-main--home {
  padding-top: 0; /* Hero goes edge-to-edge under transparent header */
}

.site-main--archive {
  padding-top: 0;
}

.site-main--industry {
  padding-top: 0;
}


/* ============================================================
   5. Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}

.btn--accent {
  background: var(--color-orange);
  color: var(--color-white);
  border-color: var(--color-orange);
}

.btn--accent:hover,
.btn--accent:focus {
  background: var(--color-orange-dark);
  border-color: var(--color-orange-dark);
  color: var(--color-white);
}

.btn--outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--outline:hover,
.btn--outline:focus {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn--outline-light {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--outline-light:hover,
.btn--outline-light:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn--ghost:hover,
.btn--ghost:focus {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--color-white);
}

.btn--large {
  padding: 1rem 2.25rem;
  font-size: 1.0625rem;
}

.btn--block {
  width: 100%;
  justify-content: center;
}


/* ============================================================
   6. Tags / Badges
   ============================================================ */

.tag {
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  line-height: 1;
}

.tag--light {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}


/* ============================================================
   7. Section headers (shared)
   ============================================================ */

.section-header {
  display: block;
  grid-template-columns: none;
  gap: 0;
  max-width: 640px;
  margin-bottom: var(--space-xl);
}

.section-header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.2;
  margin: var(--space-sm) 0 var(--space-md);
  color: var(--color-text);
  position: relative;
  padding-bottom: var(--space-md);
}

.section-header h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--color-orange);
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.section-header--center h2::after {
  left: 50%;
  transform: translateX(-50%);
}

.section-header--light h2,
.section-header--light p {
  color: var(--color-white);
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.eyebrow--accent {
  color: var(--color-accent);
}

.section-footer {
  margin-top: var(--space-xl);
  text-align: center;
}

.section-footer--center {
  text-align: center;
}


/* ============================================================
   8. Header, always-white, subtle border, sticky
   ============================================================ */

.site-header {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.site-header .site-nav a,
.site-header .site-logo-text {
  color: var(--vh-gray-darker);
}

.site-header .site-nav a:hover,
.site-header .site-nav .current-menu-item > a {
  color: var(--color-accent);
}

.site-header .phone-link {
  color: var(--vh-gray-mid);
}

.site-header .phone-link:hover {
  color: var(--color-accent);
}


/* ============================================================
   9. Section: Hero
   ============================================================ */

/* Apple-style scrollytelling structure:
   .section-hero = invisible scroll-distance container (tall, no bg)
   .hero-stage   = visible hero (position:sticky, has the gradient, clips children)
   .hero-inner   = max-width-constrained content layout (text + mockup)
   Height of .section-hero is set on-demand by scrollytelling.js via the
   --hero-section-h CSS var (stage height + scrub range). The fallback
   value applies only before JS runs or if JS is disabled. */
.section-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  /* padding-top moved INSIDE .hero-stage so the stage's outer edge (= its
     overflow:hidden clip line) is flush with the masthead bottom. States
     exiting upward clip at the header bottom, not 48px below it. */
  padding: 0 0 var(--space-2xl);
  min-height: var(--hero-section-h, calc(100vh * 5));
}

.hero-stage {
  position: sticky;
  top: 80px;
  width: 100%;
  padding-top: var(--space-xl);
  background: linear-gradient(to bottom, #ffffff 0%, var(--vh-teal-light) 100%);
  overflow: hidden;
}

.hero-inner {
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

/* WP admin bar pushes the sticky masthead down; mirror the offset so the
   stage sticks flush below the masthead instead of overlapping it. */
.admin-bar .hero-stage { top: calc(80px + 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .hero-stage { top: calc(80px + 46px); }
}

.hero-content {
  min-width: 0;
}

/* ============================================================
   9b. Hero mockup (3-state scrollytelling)
   ============================================================ */

.hero-mockup {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 11;
  width: 100%;
}

.hero-mockup__stage {
  position: relative;
  width: 100%;
  height: 100%;
  /* Clip extends ABOVE the stage (leaving state slides up past the frame and
     behind the sticky header) AND below (so the next state is visible peeking
     up from beneath the stage as it rises in, instead of popping out of
     nowhere at the bottom edge). Section overflow:hidden bounds the bottom. */
  clip-path: inset(-200vh -80px -100% -80px);
}

.hero-mockup__state {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  will-change: transform, opacity;
  /* Shadow lives on each state so the whole card (rounded frame + shadow +
     content) moves as one unit when the state slides. */
  box-shadow: 0 24px 60px -20px rgba(38, 46, 60, 0.35),
              0 8px 20px -8px rgba(38, 46, 60, 0.18);
}

/* No-JS / mobile fallback: only wire is visible (queued states hidden via
   opacity). On desktop the JS timeline takes full control of yPercent AND
   sets opacity to 1. CSS does NOT define translate3d here — browsers resolve
   percent translates to pixels in getComputedStyle, which would conflict
   with GSAP's yPercent and break the third-state animation. */
.hero-mockup__state--wire    { opacity: 1; }
.hero-mockup__state--refined { opacity: 0; }
.hero-mockup__state--full    { opacity: 0; }

/* ---- Shared mockup structure (sizes/positions are identical across states) ---- */
.mock-browser {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.mock-browser__chrome {
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: #f3f4f6;
  border-bottom: 1px solid #e6e8eb;
}

.mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d4d6da;
}

.mock-urlbar {
  flex: 1;
  height: 11px;
  margin-left: 10px;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid #e0e2e6;
}

.mock-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 18px;
  gap: 14px;
}

.mock-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mock-logo {
  width: 60px;
  height: 14px;
  border-radius: 3px;
  background: #d4d6da;
}

.mock-nav__links {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.mock-nav__links span {
  display: block;
  width: 28px;
  height: 6px;
  border-radius: 2px;
  background: #d4d6da;
}

.mock-nav__cta {
  width: 50px;
  height: 16px;
  border-radius: 3px;
  background: #d4d6da;
}

.mock-hero {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mock-hero__eyebrow {
  width: 30%;
  height: 6px;
  border-radius: 2px;
  background: #d4d6da;
}

.mock-hero__title span {
  display: block;
  height: 14px;
  border-radius: 3px;
  background: #c4c6ca;
  margin-bottom: 6px;
}

.mock-hero__title span:nth-child(1) { width: 78%; }
.mock-hero__title span:nth-child(2) { width: 56%; }

.mock-hero__lead {
  width: 65%;
  height: 8px;
  border-radius: 2px;
  background: #d4d6da;
}

.mock-hero__cta {
  width: 90px;
  height: 22px;
  border-radius: 4px;
  background: #c4c6ca;
  margin-top: 4px;
}

.mock-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}

.mock-card {
  background: #ffffff;
  border: 1px solid #e6e8eb;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mock-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background: #e6e8eb;
}

.mock-card__line {
  height: 5px;
  border-radius: 2px;
  background: #d4d6da;
  width: 80%;
}

.mock-card__line--title {
  width: 50%;
  height: 7px;
  background: #c4c6ca;
}

/* ---- State 1: Wireframe (linework, very flat) ---- */
.hero-mockup__state--wire .mock-browser {
  background: #fafafa;
}

.hero-mockup__state--wire .mock-browser__chrome,
.hero-mockup__state--wire .mock-urlbar,
.hero-mockup__state--wire .mock-card {
  background: #fafafa;
  border-color: #c9cdd2;
}

.hero-mockup__state--wire .mock-dot,
.hero-mockup__state--wire .mock-logo,
.hero-mockup__state--wire .mock-nav__cta,
.hero-mockup__state--wire .mock-hero__cta,
.hero-mockup__state--wire .mock-card__media {
  background: transparent;
  border: 1px dashed #b6bbc2;
}

.hero-mockup__state--wire .mock-nav__links span,
.hero-mockup__state--wire .mock-hero__eyebrow,
.hero-mockup__state--wire .mock-hero__title span,
.hero-mockup__state--wire .mock-hero__lead,
.hero-mockup__state--wire .mock-card__line {
  background: #d8dbe0;
}

/* ---- State 2: Refined (hint of color, subtle shadows) ---- */
.hero-mockup__state--refined .mock-browser__chrome {
  background: #eef2f4;
  border-bottom-color: #d8dde2;
}

.hero-mockup__state--refined .mock-dot:nth-child(1) { background: #f0a8a0; }
.hero-mockup__state--refined .mock-dot:nth-child(2) { background: #f0d8a0; }
.hero-mockup__state--refined .mock-dot:nth-child(3) { background: #a8d8a8; }

.hero-mockup__state--refined .mock-logo {
  background: var(--vh-gray-mid);
}

.hero-mockup__state--refined .mock-nav__cta,
.hero-mockup__state--refined .mock-hero__cta {
  background: var(--vh-gray-mid);
}

.hero-mockup__state--refined .mock-hero__eyebrow {
  background: var(--vh-teal-soft);
}

.hero-mockup__state--refined .mock-hero__title span {
  background: var(--vh-gray-dark);
}

.hero-mockup__state--refined .mock-card {
  box-shadow: 0 2px 6px rgba(38, 46, 60, 0.06);
}

.hero-mockup__state--refined .mock-card__media {
  background: linear-gradient(135deg, #d6e9ec, #e6e8eb);
}

/* ---- State 3: Full (full color, shadows, real-feeling) ---- */
.hero-mockup__state--full .mock-browser {
  background: #ffffff;
}

.hero-mockup__state--full .mock-browser__chrome {
  background: #ecf0f3;
  border-bottom-color: #d4dbe1;
}

.hero-mockup__state--full .mock-dot:nth-child(1) { background: #ff5f57; }
.hero-mockup__state--full .mock-dot:nth-child(2) { background: #ffbd2e; }
.hero-mockup__state--full .mock-dot:nth-child(3) { background: #28ca42; }

.hero-mockup__state--full .mock-urlbar {
  background: #ffffff;
  border-color: #c8d0d6;
}

.hero-mockup__state--full .mock-page {
  background: linear-gradient(to bottom, #ffffff 0%, var(--vh-teal-light) 100%);
}

.hero-mockup__state--full .mock-logo {
  background: linear-gradient(90deg, var(--vh-teal-dark), var(--vh-teal));
}

.hero-mockup__state--full .mock-nav__links span {
  background: var(--vh-gray-mid);
}

.hero-mockup__state--full .mock-nav__cta {
  background: var(--vh-orange);
}

.hero-mockup__state--full .mock-hero__eyebrow {
  background: var(--vh-teal);
}

.hero-mockup__state--full .mock-hero__title span:nth-child(1) {
  background: var(--vh-gray-darker);
}

.hero-mockup__state--full .mock-hero__title span:nth-child(2) {
  background: var(--vh-teal);
}

.hero-mockup__state--full .mock-hero__lead {
  background: var(--vh-gray-mute);
}

.hero-mockup__state--full .mock-hero__cta {
  background: var(--vh-orange);
}

.hero-mockup__state--full .mock-card {
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 6px 16px -4px rgba(38, 46, 60, 0.12),
              0 2px 6px -2px rgba(38, 46, 60, 0.08);
}

.hero-mockup__state--full .mock-card:nth-child(1) .mock-card__media {
  background: linear-gradient(135deg, var(--vh-teal-soft), var(--vh-teal));
}
.hero-mockup__state--full .mock-card:nth-child(2) .mock-card__media {
  background: linear-gradient(135deg, var(--vh-orange-light), var(--vh-orange));
}
.hero-mockup__state--full .mock-card:nth-child(3) .mock-card__media {
  background: linear-gradient(135deg, var(--vh-gray-light), var(--vh-gray));
}

.hero-mockup__state--full .mock-card__line--title {
  background: var(--vh-gray-darker);
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text);
  margin: 0 0 var(--space-xl);
  display: flex;
  flex-direction: column;
}

.hero-line {
  display: block;
}

/* Accent phrases in the hero headline (wrap in <em>...</em> inside the
   Hero Headline option) render in teal, not italic. */
.hero-headline em {
  color: var(--color-accent);
  font-style: normal;
}

/* Legacy class kept for any hardcoded child-template variants. */
.hero-line--accent {
  color: var(--color-accent);
}

.hero-lead {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--color-text-mid);
  max-width: 560px;
  line-height: 1.65;
  margin-bottom: var(--space-xl);
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.hero-scroll-hint {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(38, 38, 38, 0.55);
  transition: opacity var(--transition-fast);
  pointer-events: none;
  z-index: 1;
}

.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(38, 38, 38, 0.5), transparent);
  animation: scrollLinePulse 2s ease-in-out infinite;
}

@keyframes scrollLinePulse {
  0%, 100% { transform: scaleY(1);   opacity: 0.5; }
  50%       { transform: scaleY(0.6); opacity: 0.25; }
}

/* Hero ghost button: light-bg variant, scoped so dark-bg ghost buttons elsewhere keep their white styling. */
.section-hero .btn--ghost {
  color: var(--color-text);
  border-color: rgba(38, 38, 38, 0.35);
  background: transparent;
}

.section-hero .btn--ghost:hover,
.section-hero .btn--ghost:focus {
  background: rgba(38, 38, 38, 0.06);
  border-color: var(--color-text);
  color: var(--color-text);
}


/* ============================================================
   10. Section: Services
   ============================================================ */

.section-services {
  background: var(--color-white);
  padding: var(--space-2xl) 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.service-card {
  padding: var(--space-xl) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition:
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.service-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-accent);
  transform: translateY(-4px);
}

.service-card__icon {
  width: 48px;
  height: 48px;
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Icon, code */
.service-card__icon--code::before {
  content: '</>';
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  letter-spacing: -0.05em;
}

/* Icon, video */
.service-card__icon--video::before {
  content: '▶';
  font-size: 1rem;
  color: var(--color-accent-dark);
}

/* Icon, design */
.service-card__icon--design::before {
  content: '✦';
  font-size: 1.125rem;
  color: var(--color-accent-dark);
}

/* Icon, seo */
.service-card__icon--seo::before {
  content: '↑';
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent-dark);
}

.service-card__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  margin: 0 0 var(--space-md);
  color: var(--color-text);
  line-height: 1.25;
}

.service-card__desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-mid);
  margin: 0 0 var(--space-lg);
}

.service-card__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition-fast);
}

.service-card__link:hover {
  gap: 8px;
  color: var(--color-accent-dark);
}


/* ============================================================
   11. Section: Industries
   ============================================================ */

.section-industries {
  background: var(--color-ink);
  padding: var(--space-2xl) 0;
}

.section-industries .section-header {
  margin-bottom: var(--space-2xl);
}

.section-industries .section-header h2 {
  color: var(--color-white);
}

.industries-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--color-border-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.industry-panel {
  background: var(--color-ink-mid);
  transition: background var(--transition-fast);
}

.industry-panel:hover {
  background: #3a3a3a;
}

.industry-panel__content {
  padding: var(--space-2xl) var(--space-xl);
}

.industry-panel__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.industry-panel h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--color-white);
  margin: 0 0 var(--space-md);
  line-height: 1.2;
}

.industry-panel__content > p {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  margin-bottom: var(--space-lg);
  font-size: 1rem;
}

.industry-panel__points {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
}

.industry-panel__points li {
  padding: var(--space-sm) 0 var(--space-sm) 1.375rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.industry-panel__points li:last-child {
  border-bottom: none;
}

.industry-panel__points li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: 0.875rem;
}

.industry-panel__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.industry-panel__stat .stat-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 300; /* light numerals for editorial light/bold contrast */
  color: var(--color-accent);
  line-height: 1;
}

.industry-panel__stat .stat-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}


/* ============================================================
   12. Section: Work / Portfolio
   ============================================================ */

.section-work {
  background: var(--color-warm);
  padding: var(--space-2xl) 0;
}

.section-work--archive {
  background: var(--color-white);
  padding-top: var(--space-xl);
}

.section-work--industry {
  background: var(--color-warm);
}

.filter-chips {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin: var(--space-xl) 0;
}

.filter-chip {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-mid);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
  line-height: 1;
}

.filter-chip:hover,
.filter-chip.active {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.work-grid--3 {
  /* Exactly 3 equal columns: this grid only ever holds 3 cards, so auto-fill
     would reserve phantom empty tracks and pack the cards into the left. */
  grid-template-columns: repeat(3, 1fr);
}

.work-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.work-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.work-card__link {
  display: flex;
  flex-direction: column;
  height: 100%; /* fill the stretched grid item so the body can reach the card's bottom */
  text-decoration: none;
  color: inherit;
}

.work-card__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.work-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.work-card:hover .work-card__image img {
  transform: scale(1.04);
}

.work-card__body {
  padding: var(--space-lg);
  position: relative;
  z-index: 1;
  background: var(--color-white);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.1);
  /* Fill the remaining card height so the body's bottom meets the card edge:
     the box-shadow's downward bleed is then clipped by the card's overflow
     instead of showing as a stray shadow line on short-content cards. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.work-card__tags {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.work-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--vh-teal-dark);
  margin: 0 0 var(--space-xs);
  line-height: 1.3;
}

.work-card__category {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 calc(var(--space-md) + var(--space-xs)); /* 20px */
}

.work-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-mid);
  line-height: 1.55;
  margin: 0 0 var(--space-md);
}

.work-card__cta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-white);
  margin-top: auto; /* pin to the bottom so CTAs line up across a row regardless of title length */
  /* Full-bleed teal bar across the card's base: cancel the body's side + bottom
     padding so the background reaches the card edges, then restore the left
     padding so the label stays flush with the title/text above it. */
  margin-inline: calc(-1 * var(--space-lg));
  margin-bottom: calc(-1 * var(--space-lg));
  padding-inline: var(--space-lg);
  min-height: 36px;
  display: flex;
  align-items: center; /* vertically center the label in the bar */
  background: var(--vh-teal-dark);
}

.archive-hero {
  background: var(--color-ink);
  padding: calc(var(--space-3xl) + 80px) 0 var(--space-2xl); /* 80px accounts for fixed header */
}

.archive-hero .eyebrow {
  display: block;
  margin-bottom: var(--space-sm);
}

.archive-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--color-white);
  margin: 0 0 var(--space-md);
  line-height: 1.1;
}

.archive-hero__lead {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 560px;
  line-height: 1.65;
  margin: 0;
}

.archive-pagination {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: center;
}

.archive-pagination .nav-links {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-mid);
  text-decoration: none;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  transition: all var(--transition-fast);
}

.archive-pagination .page-numbers.current,
.archive-pagination .page-numbers:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}

.archive-empty {
  text-align: center;
  padding: var(--space-2xl) 0;
  color: var(--color-text-muted);
}


/* ============================================================
   13. Section: Process
   ============================================================ */

.section-process {
  background: var(--color-ink);
  padding: var(--space-2xl) 0;
}

.section-process .section-header h2 {
  color: var(--color-white);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  position: relative;
}

/* Connector line between steps (horizontal, desktop) */
.process-steps::before {
  content: '';
  position: absolute;
  top: 2rem;
  left: calc(var(--space-lg) + 2rem);
  right: calc(var(--space-lg) + 2rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(110, 205, 221, 0.2) 10%,
    rgba(110, 205, 221, 0.2) 90%,
    transparent
  );
  pointer-events: none;
}

.process-step {
  position: relative;
}

.process-step__number {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 300; /* light numerals for editorial light/bold contrast */
  color: rgba(219, 83, 39, 0.55);
  line-height: 1;
  margin-bottom: var(--space-md);
  position: relative;
}

/* Accent dot marker */
.process-step__number::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: calc(100% - 2rem);
  transform: translateY(-50%);
  opacity: 0;
}

.process-step__content h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-white);
  margin: 0 0 var(--space-md);
}

.process-step__content p {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  margin: 0;
}


/* ============================================================
   14. Section: Stats
   ============================================================ */

.section-stats {
  background: var(--color-accent);
  padding: var(--space-xl) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-xl);
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-item__value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300; /* light numerals for editorial light/bold contrast */
  color: var(--color-orange);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-counter {
  font-variant-numeric: tabular-nums;
}

.stat-item__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.65);
  letter-spacing: 0.04em;
  margin-top: var(--space-sm);
}


/* ============================================================
   15. Section: Testimonials
   ============================================================ */

.section-reviews {
  background: var(--color-white);
  padding: var(--space-2xl) 0;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.review {
  padding: var(--space-xl);
  background: var(--color-warm);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent);
  margin: 0;
}

.review--featured {
  max-width: 720px;
  margin: 0 auto;
}

.review__stars {
  color: var(--color-accent);
  font-size: 1rem;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.review__quote {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0 0 var(--space-lg);
}

.review__footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review__author {
  font-weight: 600;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--color-text);
}

.review__company {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.reviews-google-link {
  font-size: 0.875rem;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reviews-google-link:hover {
  text-decoration: underline;
  color: var(--color-accent-dark);
}

.industry-testimonial {
  background: var(--color-warm);
  padding: var(--space-2xl) 0;
}


/* ============================================================
   16. Section: Blog
   ============================================================ */

.section-blog {
  background: var(--color-warm);
  padding: var(--space-2xl) 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.blog-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.blog-card__image {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.blog-card:hover .blog-card__image img {
  transform: scale(1.04);
}

.blog-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__date {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  display: block;
}

.blog-card__title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  margin: var(--space-sm) 0 var(--space-sm);
  line-height: 1.3;
  color: var(--color-text);
}

.blog-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.blog-card__title a:hover {
  color: var(--color-accent);
}

.blog-card__excerpt {
  font-size: 0.875rem;
  color: var(--color-text-mid);
  line-height: 1.55;
  margin-bottom: var(--space-md);
  flex: 1;
}

.blog-card__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition-fast);
}

.blog-card__link:hover {
  gap: 8px;
  color: var(--color-accent-dark);
}


/* ============================================================
   17. Section: CTA
   ============================================================ */

.section-cta {
  background: var(--color-ink);
  padding: var(--space-2xl) 0;
}

.cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.cta-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  color: var(--color-white);
  margin: var(--space-sm) 0 var(--space-md);
  line-height: 1.2;
}

.cta-text > p {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  margin-bottom: var(--space-xl);
  font-size: 1rem;
}

.cta-text .eyebrow {
  display: block;
}

.cta-trust {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cta-trust li {
  padding: var(--space-sm) 0 var(--space-sm) 1.375rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9375rem;
  position: relative;
}

.cta-trust li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.cta-form {
  background: var(--color-ink-mid);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.cta-contact-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Override contact form styling inside dark section */
.cta-form input,
.cta-form textarea,
.cta-form select {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  border-radius: var(--radius-sm);
}

.cta-form input::placeholder,
.cta-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.cta-form label {
  color: rgba(255, 255, 255, 0.8);
}

/* Gravity Forms / CF7 overrides inside .cta-form */
.cta-form .gform_submit input[type="submit"],
.cta-form .wpcf7-submit {
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  padding: 0.875rem 2rem;
  cursor: pointer;
  transition: background var(--transition-fast);
  width: 100%;
}

.cta-form .gform_submit input[type="submit"]:hover,
.cta-form .wpcf7-submit:hover {
  background: var(--color-accent-dark);
}


/* ============================================================
   18. Section: FAQ
   ============================================================ */

.section-faq {
  background: var(--color-white);
  padding: var(--space-2xl) 0;
}

.section-faq .section-header {
  max-width: 600px;
}

.faq-list {
  max-width: 800px;
  margin-top: var(--space-xl);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-lg) 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  transition: color var(--transition-fast);
}

.faq-q:hover {
  color: var(--color-accent);
}

/* Icon rotation handled by parent vhbase CSS via .faq-q-icon */
.faq-q-icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}

.faq-item.open .faq-a {
  max-height: 600px;
}

.faq-a p {
  padding: 0 0 var(--space-lg);
  color: var(--color-text-mid);
  line-height: 1.65;
  margin: 0;
  font-size: 0.9375rem;
}


/* ============================================================
   19. Single Project
   ============================================================ */

.site-main--project {
  padding-top: 0;
}

.project-hero {
  position: relative;
  overflow: hidden;
  /* Lighter grey at the top eases into the base ink toward the bottom, giving
     the dark browser chrome on the right a touch more contrast to sit against. */
  background: linear-gradient(to bottom, var(--vh-gray-mid) 0%, var(--color-ink) 70%);
  padding: var(--space-2xl) 0;
}

/* Two columns: text copy left, screenshot-in-browser-frame right, both
   vertically centred. Collapses to a single stacked column at <=1024px. */
.project-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.project-hero__content {
  min-width: 0;
}

.project-hero__frame {
  min-width: 0;
}

.project-hero__meta {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.project-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--color-white);
  margin: 0 0 var(--space-sm);
  line-height: 1.15;
}

.project-hero__client {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  font-style: italic; /* editorial accent on the client / location / year line */
  margin: 0;
}

.project-hero__client a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.project-hero__client a:hover {
  color: var(--color-accent);
}

.project-hero__visit {
  display: inline-block;
  margin-top: var(--space-sm);
  margin-left: 3px; /* optical nudge to align with the heading's glyph side-bearing */
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.project-hero__visit:hover,
.project-hero__visit:focus {
  color: var(--color-accent-light);
}

.project-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-2xl);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  align-items: start;
}

.project-main {
  min-width: 0; /* Prevent grid blowout */
}

.project-lead {
  font-size: 1.1875rem;
  color: var(--color-text-mid);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-lg);
}

.project-services {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-xl);
  font-size: 0.9375rem;
  color: var(--color-text-mid);
}

.project-case-study {
  margin-bottom: var(--space-xl);
}

.case-study-block {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.case-study-block:last-child {
  border-bottom: none;
}

.case-study-block h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.case-study-block p {
  color: var(--color-text-mid);
  line-height: 1.7;
}

.project-content {
  line-height: 1.7;
  color: var(--color-text-mid);
  margin-bottom: var(--space-xl);
}

.project-metric {
  background: var(--color-ink);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
  border-left: 4px solid var(--color-accent);
}

.project-metric__value {
  display: block;
}

.project-video {
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.project-video iframe,
.project-video video {
  width: 100%;
  border-radius: var(--radius-md);
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.project-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.project-gallery__item img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform 400ms ease;
}

.project-gallery__item:hover img {
  transform: scale(1.05);
}

/* ── Project Showcase: device frames ──────────────────────────────── */
.project-showcase {
  grid-column: 1 / -1; /* span full content width, below case study + sidebar */
  margin-bottom: var(--space-xl);
}

.project-showcase__heading {
  font-family: var(--font-display);
  margin-bottom: var(--space-lg);
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* Browser-window frame (desktop full-page shots) */
.browser-frame {
  --vp-h: 560px; /* viewport height; the hover-scroll calc below references this so the two can't drift */
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #2b2b2b;
  box-shadow: var(--shadow-card);
}

.browser-frame__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: 38px;
  padding: 0 var(--space-md);
}

.browser-frame__dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}

.browser-frame__dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: block;
}

.browser-frame__dots i:nth-child(1) { background: #ff5f57; }
.browser-frame__dots i:nth-child(2) { background: #febc2e; }
.browser-frame__dots i:nth-child(3) { background: #28c840; }

.browser-frame__url {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  background: #1f1f1f;
  border-radius: 6px;
  padding: 4px 12px;
  margin-right: 47px; /* balances the dots so the url stays centered */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-frame__viewport {
  display: block;
  height: var(--vp-h);
  overflow: hidden;
  background: var(--color-white);
}

.browser-frame__shot {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 8s linear; /* duration overridden by JS for constant speed */
}

.browser-frame:hover .browser-frame__shot {
  transform: translateY(calc(-100% + var(--vp-h))); /* scrolls the full page on hover */
}

/* Phone frame (mobile shots) */
.phone-frame {
  --vp-h: 578px; /* viewport height; the hover-scroll calc below references this so the two can't drift */
  margin: 0 auto;
  width: 280px;
  max-width: 100%;
  border: 10px solid #2b2b2b;
  border-radius: 36px;
  overflow: hidden;
  background: #2b2b2b;
  box-shadow: var(--shadow-card);
}

.phone-frame__viewport {
  display: block;
  height: var(--vp-h);
  overflow: hidden;
  border-radius: 26px;
  background: var(--color-white);
}

.phone-frame__shot {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 8s linear; /* duration overridden by JS for constant speed */
}

.phone-frame:hover .phone-frame__shot {
  transform: translateY(calc(-100% + var(--vp-h)));
}

/* Wide screens: homepage browser + phone share the top row, rest stack below */
@media (min-width: 900px) {
  .showcase-grid {
    /* Mirror the .project-body columns above so frames line up with that content */
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-2xl);
  }
  .browser-frame {
    grid-column: 1;
    align-self: start; /* don't stretch to the taller sticky phone row, which exposes frame bg as a fake bottom bar */
  }
  .phone-frame {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 90px;
  }
}

.project-testimonial {
  background: var(--color-warm);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.project-testimonial p {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  line-height: 1.65;
}

.project-testimonial cite {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-mid);
}

.project-tech {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.project-tech strong {
  color: var(--color-text-mid);
}

/* Sidebar */
.project-sidebar__card {
  background: var(--color-warm);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  position: sticky;
  top: calc(80px + var(--space-lg)); /* 80px = approx header height */
}

.project-sidebar__card h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin: 0 0 var(--space-lg);
  color: var(--color-text);
}

.project-sidebar__card dl {
  margin: 0 0 var(--space-xl);
}

.project-sidebar__card dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-md);
}

.project-sidebar__card dt:first-child {
  margin-top: 0;
}

.project-sidebar__card dd {
  font-size: 0.9375rem;
  color: var(--color-text);
  margin: var(--space-xs) 0 0;
}

/* Related projects section */
.section-related {
  background: var(--color-warm);
  padding: var(--space-2xl) 0;
}

.section-related h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--color-text);
  margin-bottom: var(--space-xl);
}


/* ============================================================
   20. Projects Archive
   ============================================================ */

/* Covered by .archive-hero, .section-work--archive, and
   .archive-pagination above. Nothing additional needed. */


/* ============================================================
   21. Industry Page
   ============================================================ */

.industry-intro {
  background: var(--color-white);
  padding: var(--space-2xl) 0;
}

.industry-intro__body {
  max-width: 800px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-mid);
}

.industry-intro__body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.industry-featured-case {
  background: var(--color-ink);
  padding: var(--space-2xl) 0;
}

.industry-featured-case .eyebrow {
  display: block;
  margin-bottom: var(--space-md);
}

.industry-featured-case__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  margin-top: var(--space-xl);
}

.industry-featured-case__image {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.industry-featured-case__image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.industry-featured-case__content {
  color: rgba(255, 255, 255, 0.8);
}

.industry-featured-case__client {
  font-size: 0.875rem;
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-sm);
}

.industry-featured-case__content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  color: var(--color-white);
  margin-bottom: var(--space-md);
  line-height: 1.2;
}

.industry-featured-case__content h2 a {
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.industry-featured-case__content h2 a:hover {
  color: var(--color-accent);
}

.industry-featured-case__content > p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-lg);
}

.industry-featured-case__metric {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--color-accent);
  background: rgba(110, 205, 221, 0.08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}


/* ============================================================
   22. Responsive
   ============================================================ */

@media (max-width: 1100px) {
  .project-body {
    grid-template-columns: 1fr 300px;
    gap: var(--space-xl);
  }
}

@media (max-width: 1024px) {
  .cta-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .industries-grid {
    grid-template-columns: 1fr;
  }

  .project-body {
    grid-template-columns: 1fr;
  }

  /* Project hero stacks: text copy first, then the screenshot frame full
     content-width below it (still inside the container padding). */
  .project-hero {
    padding: var(--space-xl) 0;
  }

  .project-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Single-column hero on tablet/mobile; mockup is reordered ABOVE the text
     copy so the scrollytelling screens are visible immediately on phones
     without scrolling past the headline first. padding-top = top buffer
     above the mockup AT REST (screen exits up through it to the header).
     grid gap is 64px and splits into two 32px zones below the mockup:
     the top 32px is the entry buffer where new screens rise into view
     (clip-path bottom extends 32px past the stage), and the bottom 32px
     is breathing room between the entry point and the headline. */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 64px;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  /* Section stays flush with the header (zero top padding). */
  .section-hero {
    padding-top: 0;
  }

  /* Mobile keeps zero top padding on the stage too: hero-inner's own
     padding-top: 32px already provides the buffer; the desktop stage
     padding-top would stack on top of it and shift the mockup down. */
  .hero-stage { padding-top: 0; }

  .hero-mockup {
    order: -1;
    margin-top: 0;
    padding-top: 0;
    aspect-ratio: 16 / 11;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-content {
    order: 1;
  }

  /* TOP UNCLIPPED (-200vh): the exiting screen extends upward past the stage
     top, travels through the hero-inner padding-top buffer, and is finally
     clipped by the section's own overflow:hidden at the section top — which
     sits flush with the header bottom. Result: the screen exits AT the
     header, not at the stage top. No visible clip line in the buffer area.
     BOTTOM EXTENDS 32px: queued states are visible up to 32px below the
     stage so the incoming screen enters through the bottom buffer (the grid
     gap area between the mockup and the text) instead of popping in flush
     at the stage's bottom edge. -80px left/right keeps drop shadows visible
     past the rounded frame edges. */
  .hero-mockup__stage {
    clip-path: inset(-200vh -80px -32px -80px);
  }

  /* Hide the scroll hint on tablet/mobile so it doesn't float over the next
     section. Scrollytelling itself still runs on mobile. */
  .hero-scroll-hint {
    display: none;
  }

  .project-sidebar__card {
    position: static;
  }

  .industry-featured-case__inner {
    grid-template-columns: 1fr;
  }

  .industry-featured-case__image img {
    height: 300px;
  }
}

@media (max-width: 768px) {
  /* Crop the hero mockup's viewport tighter on phones so the stacked hero
     doesn't get excessively tall. Showcase frames keep their full height. */
  .project-hero__frame .browser-frame {
    --vp-h: 360px;
  }

  .hero-headline {
    font-size: clamp(1.75rem, 6.5vw, 2.75rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .work-grid {
    grid-template-columns: 1fr;
  }

  .work-grid--3 {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  /* Hide the horizontal connector line on mobile */
  .process-steps::before {
    display: none;
  }

  .industry-panel__content {
    padding: var(--space-xl) var(--space-lg);
  }

  .cta-form {
    padding: var(--space-lg);
  }

  .section-work--archive .filter-chips {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-sm);
  }

  .section-work--archive .filter-chips::-webkit-scrollbar {
    display: none;
  }

  .project-gallery {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .archive-hero {
    padding-top: calc(var(--space-2xl) + 80px);
  }
}

@media (max-width: 480px) {
  :root {
    --space-2xl: 56px;
    --space-3xl: 80px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .hero-lead {
    font-size: 1rem;
  }

  .section-hero {
    padding: 0 0 var(--space-2xl);
  }

  .industry-featured-case__image img {
    height: 220px;
  }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
  .section-hero,
  .section-stats,
  .section-cta {
    background: #fff !important;
    color: #000 !important;
  }

  .hero-headline,
  .hero-lead {
    color: #000 !important;
  }
}


/* ============================================================
   N. Core Pages (shared "Core Page" template: About, Contact)
   ============================================================ */

.core-section {
  padding: var(--space-2xl) 0;
}

/* Alternate section backgrounds for rhythm when stacked. */
.core-section + .core-section {
  border-top: 1px solid var(--color-border);
}

/* ---- Intro / story ---------------------------------------------------- */
.core-intro__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0 0 var(--space-lg);
  color: var(--color-text);
}

.core-intro__body {
  max-width: 720px;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-mid);
}

.core-intro__body > :first-child {
  margin-top: 0;
}

.core-intro__body p {
  margin: 0 0 var(--space-md);
}

/* ---- Values / Approach ------------------------------------------------ */
.core-values {
  background: var(--color-warm);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.value-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.value-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.value-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
  padding-bottom: var(--space-sm);
  position: relative;
}

.value-card__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-orange);
}

.value-card__text {
  color: var(--color-text-mid);
  line-height: 1.65;
}

.value-card__text p {
  margin: 0 0 var(--space-sm);
}

.value-card__text p:last-child {
  margin-bottom: 0;
}

/* ---- Team (circular black-and-white portraits) ------------------------ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  gap: var(--space-2xl) var(--space-xl);
  justify-content: center;
}

.team-member {
  margin: 0;
  text-align: center;
}

.team-member__photo {
  width: clamp(150px, 18vw, 210px);
  aspect-ratio: 1 / 1;
  margin: 0 auto var(--space-lg);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--color-border), var(--shadow-card);
  background: var(--color-warm);
}

.team-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Black-and-white for an elegant, consistent look. */
  filter: grayscale(100%);
  transition: transform var(--transition-fast);
}

.team-member:hover .team-member__photo img {
  transform: scale(1.04);
}

.team-member__photo--placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--vh-gray-light), var(--vh-gray));
}

.team-member__photo--placeholder span {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--color-white);
}

.team-member__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
}

.team-member__role {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.team-member__bio {
  margin-top: var(--space-md);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-mid);
}

.team-member__specialties {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.team-member__specialties .tag {
  cursor: default;
}

/* ---- Contact details + form ------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-2xl);
  align-items: start;
}

.contact-grid--single {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}

.contact-info__item {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.contact-info__item:first-child {
  padding-top: 0;
}

.contact-info__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.contact-info__value {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--color-text);
}

a.contact-info__value:hover {
  color: var(--color-accent);
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.contact-social__link {
  font-weight: 600;
}

/* Contact Form 7 — light styling that inherits the theme tokens. */
.contact-form .wpcf7-form p {
  margin: 0 0 var(--space-md);
}

.contact-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-mid);
  margin-bottom: var(--space-xs);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="number"],
.contact-form input[type="date"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.contact-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  padding: 0.85em 1.6em;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-white);
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  width: auto;
}

.contact-form .wpcf7-submit:hover {
  background: transparent;
  color: var(--color-ink);
}

.contact-form .wpcf7-spinner {
  margin: 0 0 0 var(--space-sm);
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

@media (max-width: 600px) {
  .core-section {
    padding: var(--space-xl) 0;
  }

  .value-card {
    padding: var(--space-lg);
  }
}