/* ============================================================
   SIX SIDES AI — Monochrome Design System
   Palette: Pure white backgrounds · Near-black text · Grayscale levels
   Fonts:   Futura Bold (headings) · Futura Medium (body + labels)
   ------------------------------------------------------------
   Architecture:
     1. Fonts            6. Components (nav, buttons, cards, footer…)
     2. Design tokens    7. Page hero
     3. Reset            8. Responsive
     4. Typography       9. Motion
     5. Layout & utils  10. Page-specific styles
   ============================================================ */

/* ── 1. Fonts ── */
@font-face {
  font-family: 'Futura';
  src: url('../../src/fonts/Futura Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* @font-face {
  font-family: 'Futura';
  src: url('../../src/fonts/Futura Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
} */
@font-face {
  font-family: 'Futura';
  src: url('../../src/fonts/Futura Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Futura';
  src: url('../../src/fonts/Futura Medium.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Design Tokens ── */
:root {
  /* Surfaces (white → grey levels) */
  --bg:          #FFFFFF;
  --bg-subtle:   #FAFAFA;
  --bg-muted:    #F4F4F5;
  --bg-invert:   #0A0A0A;

  /* Text (black → grey levels) */
  --ink:         #0A0A0A;
  --ink-soft:    #1C1C1E;
  --text:        #2E2E32;
  --text-muted:  #6B6B70;
  --text-faint:  #9A9AA0;
  --on-dark:     #F5F5F5;
  --on-dark-dim: #A1A1A6;

  /* Lines */
  --border:        #E6E6E8;
  --border-strong: #D2D2D6;
  --border-ink:    #0A0A0A;

  /* Dark navy theme tokens */
  --navy:       #0A0F1E;
  --navy-mid:   #0F1829;
  --navy-light: #172035;
  --gold:       #C9A84C;
  --gold-light: #D4B865;
  --gold-dim:   #9E8038;
  --grey:       #8A97B0;
  --grey-light: #B8C2D4;
  --white:      #FFFFFF;

  /* Fonts — 3 Futura styles: Bold (headings) · Regular (body) · Medium (labels) */
  --font-display: 'Futura', system-ui, sans-serif;
  --font-body:    'Futura', system-ui, sans-serif;
  --font-mono:    'Futura', system-ui, sans-serif;

  /* Metrics */
  --max-w:       1240px;
  --section-gap: 120px;
  --radius:      0;
  --radius-lg:   0;
  --nav-h:       76px;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition:  0.3s var(--ease);

  /* Elevation */
  --shadow-sm:   0 1px 2px rgba(10,10,10,0.04);
  --shadow-md:   0 12px 30px rgba(10,10,10,0.08);
  --shadow-lg:   0 28px 60px rgba(10,10,10,0.12);
}

/* ── 3. Base Overrides (layered above Bootstrap 5 Reboot) ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; padding-left: 0; margin-bottom: 0; }
::selection { background: var(--ink); color: var(--bg); }

/* ── 4. Typography ── */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.8rem, 6.2vw, 5.2rem); }

h2 { font-size: clamp(2.6rem, 4.4vw, 3.55rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
h4 { font-size: 1.3rem; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--text-faint); }

/* Staggered heading lines — line 2 indented to align with last word of line 1 */
h1:has(.h-line), h2:has(.h-line), h3:has(.h-line) {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.h-line { display: block; }
.h-pad  { visibility: hidden; user-select: none; pointer-events: none; }

/* On mobile, drop the staggered-indent spacer so the "How We Work"
   heading stacks as clean centered lines instead of wrapping off-screen. */
@media (max-width: 767.98px) {
  .section--textured-2 .section-header h2 .h-pad { display: none; }
  #capabilities .section-header h2 .h-pad { display: none; }
  #technologies .section-header h2 .h-pad { display: none; }
  .page-about .page-hero h1 .h-pad { display: none; }
  .about-cta h2 .h-pad { display: none; }
  .page-contact .page-hero h1 .h-pad { display: none; }
  .page-contact .section--textured .text-center h2 .h-pad { display: none; }
  .page-services .section--subtle .section-header h2 .h-pad { display: none; }
}

/* On mobile and tablet, center the "Ready to Begin" CTA heading and drop
   its staggered-indent spacer. */
@media (max-width: 991.98px) {
  .cta .cta-inner h2 { width: auto; text-align: center; }
  .cta .cta-inner h2 .h-pad { display: none; }
  /* "Reach Us Directly" heading: stack as 2 clean lines */
  .contact-info-block h2 > span:not(.h-pad) { display: block; }
  .contact-info-block h2 .h-pad { display: none; }
}
p { color: var(--text); font-size: 0.975rem; }
strong { color: var(--ink); font-weight: 700; }

/* Futura Medium for all label / UI text */
.eyebrow, .tag, .stat-label, .footer-heading, .arrow-link, .filter-btn,
.marquee-item, .hero-note, .process-num, .client-logo, .hex-cell,
.timeline-year, .tk-mark, .tk-name, .demo-badge, .demo-duration,
.demo-industry, .gallery-overlay-label, .gallery-caption-sub,
.leader-title, .leader-linkedin, .profile-role, .profile-linkedin, .attr-role,
.metric-label, .case-client, .contact-detail-label, .office-card-country,
.form-label, .map-pin-label, .btn-submit,
.mockup-bar .url { font-weight: 500; }

/* ── 5. Layout & Utilities ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }
.section { padding: var(--section-gap) 0; }
.section--subtle { background: var(--bg-subtle); }
.section--muted  { background: var(--bg-muted); }
.section--ink    { background: var(--bg-invert); }
.text-center { text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 20px;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--border-ink); }
.text-center .eyebrow { justify-content: center; }

.rule { width: 56px; height: 2px; background: var(--ink); margin: 24px 0 0; }
.text-center .rule { margin: 24px auto 0; }

.section-header { margin-bottom: 64px; }
.section-header p { color: var(--text-muted); max-width: 560px; margin-top: 20px; }
.section-header.text-center p { margin-left: auto; margin-right: auto; }

.lead { font-size: 1.1rem; line-height: 1.8; color: var(--text-muted); }

.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--on-dark); }
.section--ink p { color: var(--on-dark-dim); }
.section--ink .eyebrow { color: var(--on-dark-dim); }
.section--ink .eyebrow::before { background: var(--on-dark-dim); }
.section--ink .rule { background: var(--on-dark); }

/* ── 6. Components ── */

/* Navigation */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}
.nav.scrolled {
  background: rgba(255,255,255,0.92);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
/* While the side-drawer is open, remove the nav's backdrop-filter. A filtered
   element becomes the containing block for fixed-position children, which would
   otherwise trap the drawer inside the bar (it only worked on the home page
   because .nav--hero already disables the filter). */
.nav--menu-open {
  background: var(--bg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ── Transparent hero state (index page, dark video background) ── */
.nav--hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* Desktop: white nav links over dark hero (drawer takes over below 992px) */
@media (min-width: 992px) {
  .nav--hero .nav-links a { color: rgba(255,255,255,0.8); }
  .nav--hero .nav-links a:hover,
  .nav--hero .nav-links a.active { color: #ffffff; }
  .nav--hero .nav-links a::after { background: #ffffff; }
}
/* Hamburger bars white on all screen sizes in hero state */
.nav--hero .hamburger span { background: #ffffff; }
.nav--hero .hamburger { border-color: rgba(255,255,255,0.4); }
.nav--hero .hamburger:hover { border-color: #ffffff; background: rgba(255,255,255,0.08); }
/* When mobile menu opens over the hero, solidify the nav bar */
.nav--hero.nav--menu-open {
  background: rgba(255,255,255,0.96);
  border-bottom-color: var(--border);
}
.nav--hero.nav--menu-open .hamburger span { background: var(--ink); }
.nav--hero.nav--menu-open .hamburger { border-color: var(--border-strong); }
.nav--hero.nav--menu-open .hamburger:hover { border-color: var(--ink); background: var(--bg-subtle); }

.nav-logo {
  display: flex; align-items: center;
  position: relative;
}
.nav-logo-img { height: 70px; width: auto; display: block; }
/* Crossfade between black (solid nav) and white (transparent hero) logo variants */
.nav-logo-img--black,
.nav-logo-img--white { transition: opacity var(--transition); }
.nav-logo-img--white {
  position: absolute; top: 0; left: 0; height: 100%; pointer-events: none;
}
/* Default solid nav → show black logo */
.nav-logo-img--white { opacity: 0; }
.nav-logo-img--black { opacity: 1; }
/* Transparent state over the dark hero → show white logo */
.nav--hero .nav-logo-img--white { opacity: 1; }
.nav--hero .nav-logo-img--black { opacity: 0; }
/* Mobile menu opened over the hero solidifies the bar → revert to black logo */
.nav--hero.nav--menu-open .nav-logo-img--white { opacity: 0; }
.nav--hero.nav--menu-open .nav-logo-img--black { opacity: 1; }
.nav-logo-img--footer { height: 100px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  position: relative;
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--text-muted); transition: color var(--transition);
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1.5px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition), background var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-cta {
  padding: 9px 20px;
  background: var(--ink); color: var(--bg) !important;
  border-radius: 0; font-size: 12.5px;
  transition: var(--transition) !important;
}
.nav-cta:hover { background: var(--ink-soft); transform: translateY(-1px); }
.nav-cta::after { display: none !important; }
/* Trendy icon button: circular frame + asymmetric bars that morph to an X */
.hamburger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--border-strong); border-radius: 0;
  cursor: pointer; padding: 0;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.hamburger:hover { border-color: var(--ink); background: var(--bg-subtle); }
.hamburger:active { transform: scale(0.94); }
.hamburger span {
  position: absolute; left: 13px; width: 18px; height: 2px;
  background: var(--ink); border-radius: 0;
  transition: transform 0.35s var(--ease-smooth), opacity 0.2s var(--ease),
              width 0.3s var(--ease-smooth), left 0.3s var(--ease-smooth), top 0.35s var(--ease-smooth);
}
.hamburger span:nth-child(1) { top: 16px; }
.hamburger span:nth-child(2) { top: 22px; width: 11px; left: 20px; } /* shorter + offset = modern asymmetry */
.hamburger span:nth-child(3) { top: 28px; }
.hamburger:hover span:nth-child(2) { width: 18px; left: 13px; }       /* the line "completes" on hover */
.hamburger.active span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  border-radius: 0; border: 1px solid transparent;
  cursor: pointer; transition: all var(--transition); white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: var(--ink-soft); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--ink); transform: translateY(-2px); }
.section--ink .btn-primary, .btn-invert { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.section--ink .btn-primary:hover, .btn-invert:hover { background: var(--bg-muted); }
.section--ink .btn-outline { color: var(--on-dark); border-color: rgba(255,255,255,0.25); }
.section--ink .btn-outline:hover { border-color: var(--on-dark); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); transition: gap var(--transition);
}
.arrow-link svg { width: 14px; height: 14px; }
.arrow-link:hover { gap: 13px; }

/* Card */
.card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 0; transition: all var(--transition);
}
.card:hover { border-color: var(--border-ink); transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Tag */
.tag {
  display: inline-block; padding: 5px 12px;
  background: var(--bg-muted); border: 1px solid var(--border);
  color: var(--text-muted); font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em; border-radius: 0;
}
.section--ink .tag { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--on-dark-dim); }

/* Stat block */
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 700;
  color: #fff; line-height: 1; letter-spacing: -0.03em;
  /* color: var(--ink); line-height: 1; letter-spacing: -0.03em; */
}
.stat-number span { color: var(--text-faint); }
.stat-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 12px;
}

/* Stats on dark/black background */
.section--ink .stat-number { color: var(--on-dark); }
.section--ink .stat-number span { color: rgba(255,255,255,0.8); }
.section--ink .stat-label { color: var(--on-dark-dim); }
.section--ink .stat-cell + .stat-cell::before,
.section--ink .stat-item + .stat-item::before { background: rgba(255,255,255,0.12); }
.stats-band.section--ink { border-top-color: rgba(255,255,255,0.08); border-bottom-color: rgba(255,255,255,0.08); }

/* Footer */
/* footer {
  background: var(--bg-invert); color: var(--on-dark-dim);
  padding: 88px 0 36px;
} */

footer {
  position: relative;
  isolation: isolate;            /* keep the bg layer scoped behind footer content */
  background-color: #0A0A0A;     /* fallback so the area is never bare */
  color: var(--on-dark-dim);
  padding: 88px 0 36px;
}
/* Full-bleed background layer pinned to all four edges, so the image
   always covers the ENTIRE footer (full width AND height) at any
   content height — tablet and mobile footers included. */
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url('../../src/images/bg/footer-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.footer-grid { margin-bottom: 56px; }
.footer-brand .nav-logo { color: var(--on-dark); }
.footer-brand .nav-logo span { color: var(--on-dark-dim); }
.footer-brand p { font-size: 0.875rem; line-height: 1.8; margin: 22px 0 26px; color: var(--on-dark-dim); max-width: 340px; }
.footer-contact-item {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 0.85rem; color: var(--on-dark-dim); margin-bottom: 11px;
}
.footer-contact-item svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; }
.footer-contact-item a:hover { color: var(--on-dark); }

/* Country tag before a phone number (footer + contact page) */
.phone-region {
  display: inline-block; min-width: 46px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--text-muted);
}
.footer-contact-item .phone-region { color: var(--on-dark-dim); opacity: 0.75; }
.footer-heading {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--on-dark); margin-bottom: 22px;
}
.footer-links { display: flex; flex-direction: column; gap: 13px; }
.footer-links a { font-size: 0.875rem; color: var(--on-dark-dim); transition: color var(--transition); }
.footer-links a:hover { color: var(--on-dark); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem; color: var(--on-dark-dim);
}

/* ── 7. Page Hero (interior pages — white theme) ── */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + 80px) 0 80px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 0%, transparent 75%);
  opacity: 0.6;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { margin-bottom: 8px; }
.page-hero p { max-width: 580px; margin-top: 26px; }

/* ── 8. Responsive ── */
/* Tablet + mobile: collapse the nav into a right side-drawer (≤991px) */
@media (max-width: 991.98px) {
  .hamburger { display: flex; }

  /* No backdrop-filter on the bar at these sizes: a filtered ancestor becomes
     the containing block for the fixed drawer, so toggling it on open caused a
     reframe "jump". Keeping it off always = the drawer slides in smoothly. */
  .nav { -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Dimmed, frosted-glass backdrop behind the drawer */
  .nav-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(10, 10, 10, 0.22);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
  }
  .nav-overlay.open { opacity: 1; visibility: visible; }

  /* Right side-drawer. No box-shadow here: translateX(100%) only moves the
     drawer by its own width, not the viewport width, so a shadow set on the
     base rule keeps bleeding onto the screen (to the left of the drawer)
     even while it's closed. Scoping the shadow to .open keeps it minimal
     and only present while the drawer is actually visible. */
  .nav-links {
    position: fixed; top: var(--nav-h); right: 0; bottom: 0;
    width: min(380px, 84vw);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-left: 1px solid var(--border);
    padding: 30px 34px 40px; overflow-y: auto; counter-reset: navitem;
    transform: translateX(100%); pointer-events: none;
    transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth);
  }
  .nav-links.open {
    transform: translateX(0); pointer-events: auto;
    box-shadow: -6px 0 24px rgba(10, 10, 10, 0.10);
  }
  .nav-links li { width: 100%; }

  /* New-age link styling: large display type, numbered, staggered reveal */
  .nav-links a {
    display: flex; align-items: center; width: 100%; padding: 17px 0;
    font-family: var(--font-display); font-weight: 300; font-size: 1.5rem;
    color: var(--ink); border-bottom: 1px solid var(--border);
    opacity: 0; transform: translateX(26px);
    transition: opacity 0.45s var(--ease-smooth), transform 0.45s var(--ease-smooth),
                color var(--transition), padding-left var(--transition);
  }
  .nav-links a::after { display: none; }
  .nav-links a:not(.nav-cta)::before {
    counter-increment: navitem;
    content: counter(navitem, decimal-leading-zero);
    margin-right: 16px;
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.08em; color: var(--text-muted);
  }
  .nav-links a:not(.nav-cta):hover { padding-left: 10px; }
  .nav-links.open a { opacity: 1; transform: translateX(0); }
  .nav-links.open li:nth-child(1) a { transition-delay: 0.10s; }
  .nav-links.open li:nth-child(2) a { transition-delay: 0.16s; }
  .nav-links.open li:nth-child(3) a { transition-delay: 0.22s; }
  .nav-links.open li:nth-child(4) a { transition-delay: 0.28s; }
  .nav-links.open li:nth-child(5) a { transition-delay: 0.34s; }
  .nav-links.open li:nth-child(6) a { transition-delay: 0.40s; }
  .nav-links.open li:nth-child(7) a { transition-delay: 0.46s; }

  /* CTA rendered as a full-width button at the foot of the drawer */
  .nav-cta {
    justify-content: center; margin-top: 28px;
    padding: 15px 22px !important; border-radius: 0;
    font-family: var(--font-body) !important; font-size: 0.95rem !important;
    border-bottom: none !important;
  }
}
/* Keep the backdrop out of the way on desktop entirely */
@media (min-width: 992px) { .nav-overlay { display: none; } }
/* Lock page scroll while the drawer is open */
body.nav-open { overflow: hidden; }
@media (max-width: 767.98px) {
  :root { --section-gap: 84px; }
  .container { padding: 0 22px; }
  .nav { padding: 0 22px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ── 9. Motion ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.07s; }
[data-reveal][data-delay="2"] { transition-delay: 0.14s; }
[data-reveal][data-delay="3"] { transition-delay: 0.21s; }
[data-reveal][data-delay="4"] { transition-delay: 0.28s; }
[data-reveal][data-delay="5"] { transition-delay: 0.35s; }
[data-reveal][data-delay="6"] { transition-delay: 0.42s; }
[data-reveal][data-delay="7"] { transition-delay: 0.49s; }
[data-reveal][data-delay="8"] { transition-delay: 0.56s; }
[data-reveal][data-delay="9"] { transition-delay: 0.63s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Hero cinematic text entrance ── */
.hero h1 .h-line {
  display: block;
  overflow: hidden;
  line-height: 1.25;
}
.hero h1 .h-line-inner {
  display: block;
  will-change: transform, opacity;
}
@keyframes line-up {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Typewriter cursor */
.tw-cursor {
  display: inline-block;
  width: 2px;
  height: 0.82em;
  background: rgba(255, 255, 255, 0.88);
  margin-left: 2px;
  vertical-align: middle;
  border-radius: 0;
  animation: tw-blink 0.85s step-start infinite;
}
.tw-cursor.tw-done {
  animation: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Stat cells — hover accent */
.stat-cell { transition: var(--transition); }
.stat-cell:hover .stat-number { color: var(--ink); }

/* ── Directional reveal variants ── */
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.93); }
[data-reveal="fade"]  { transform: none; }

/* ── Hover lifts ── */
.value-card  { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.value-card:hover  { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.faq-card    { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.faq-card:hover    { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testi-card  { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.testi-card:hover  { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.demo-card   { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.demo-card:hover   { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.leader-card { transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease); }
.leader-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.industry-card { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.industry-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Bio-detail hover: photo zoom + avatar lift + accent, all on the smooth curve */
.profile-photo { transition: transform 0.7s var(--ease-smooth); will-change: transform; }
.profile-name  { transition: transform 0.5s var(--ease-smooth); }
.profile-tags .tag { transition: border-color 0.4s var(--ease-smooth), background 0.4s var(--ease-smooth); }
.profile-row:hover .profile-photo { transform: scale(1.05); }
.profile-row:hover .profile-name  { transform: translateX(6px); }
.profile-row:hover .profile-tags .tag { border-color: var(--border-strong); }
.case-item   { transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.case-item:hover   { background: var(--bg); box-shadow: var(--shadow-sm); }

/* ── Industry pill hover ── */
.industry-pill { transition: transform 0.25s var(--ease), background 0.25s var(--ease); }
.industry-pill:hover { transform: translateY(-2px); background: var(--bg-muted); }

/* ── Gallery image zoom on hover ── */
.gallery-item { overflow: hidden; }
.gallery-ph { transition: transform 0.55s var(--ease); }
.gallery-item:hover .gallery-ph { transform: scale(1.05); }

/* ── Hex cluster subtle float ── */
@keyframes hex-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
.hex-cluster { animation: hex-float 5s ease-in-out infinite; }

/* ── Timeline dot pop-in ── */
@keyframes dot-pop {
  from { transform: scale(0) translateX(-50%); opacity: 0; }
  to   { transform: scale(1) translateX(-50%); opacity: 1; }
}
.timeline-item[data-reveal].is-visible .timeline-dot {
  animation: dot-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

/* ── Page hero stagger ── */
.page-hero [data-reveal] { will-change: opacity, transform; }

/* ══════════════════════════════════════════════════════════════
   10. PAGE-SPECIFIC STYLES
   ══════════════════════════════════════════════════════════════ */

/* ── What We Do — textured background ── */
.section--textured {
  background-image: url('../../src/images/bg/white-7.png');
  /* background-image: url('../../src/images/bg/white-5.png'); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* .section--textured-2 {
  background-image: url('../../src/images/bg/white-10.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */

.section--textured-2 {
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.75)
    ),
    url('../../src/images/bg/white-10.jpg');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section--textured-dark {
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.77),
      rgba(0, 0, 0, 0.77)
    ),
    url('../../src/images/bg/black-3.jpg');
    /* linear-gradient(
      rgba(0, 0, 0, 0.33),
      rgba(0, 0, 0, 0.33)
    ),
    url('../../src/images/bg/blacksixsides-cubes.png'); */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* ── Shared: CTA section (index, services, demos) ── */
.cta { text-align: center; }
.cta-inner { max-width: 680px; margin: 0 auto; }
.cta h2 { margin-bottom: 18px; margin-left: 0 !important; margin-right: auto !important; }
.cta p { margin-bottom: 36px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Shared: Filter bar (demos white theme) ── */
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; scroll-margin-top: 120px; /* deep-link jump target — keep clear of the fixed nav */ }
.filter-btn {
  padding: 9px 18px; border: 1px solid var(--border); background: var(--bg);
  color: var(--text-muted); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; cursor: pointer; border-radius: 0; transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ── Shared: Stats grid (layout via Bootstrap row/col-* classes) ── */
.stats-grid { display: flex; flex-wrap: wrap; }
.stat-cell { padding: 8px 30px; text-align: center; position: relative; }
.stat-cell + .stat-cell::before { content:''; position:absolute; left:0; top:10%; bottom:10%; width:1px; background:var(--border); }
.stat-item { text-align: center; padding: 24px 30px; position: relative; }
.stat-item + .stat-item::before { content:''; position:absolute; left:0; top:20%; bottom:20%; width:1px; background:var(--border); }

/* ── CTA Band ── */
.cta-band-inner { max-width: 680px; margin: 0 auto; }


/* ─────────────────────────────────────
   Page: INDEX
   ───────────────────────────────────── */

/* Hero */
.hero { position: relative; padding: calc(var(--nav-h) + 80px) 0 calc(var(--nav-h) + 80px); min-height: 100vh; text-align: center; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero .container { position: relative; z-index: 2; width: 100%; }

/* Video background */
.hero-video {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.hero-video-overlay {
  position: absolute; inset: 0; z-index: -2;
  background: rgba(0, 0, 0, 0.58);
}

.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 70%);
  opacity: 1;
}
/* Hero text — light on dark video */
.hero h1 { color: #ffffff; }
.hero-sub { color: rgba(255,255,255,0.92); }
.hero-desc { color: rgba(255,255,255,0.80); }
.hero-note { color: rgba(255,255,255,0.45); }
/* Subtitle is JS-controlled — hidden until typewriter fires */
#heroTyped { opacity: 0; transition: opacity 0.65s ease; }

/* Hero buttons — white-finished for dark background */
.hero .btn-primary {
  background: #ffffff;
  color: #0A0A0A;
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 8px 24px rgba(0,0,0,0.35);
}
.hero .btn-primary:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 12px 32px rgba(0,0,0,0.4);
}
.hero .btn-outline {
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero .btn-outline:hover {
  border-color: #ffffff;
  background: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}
.hero h1 { font-size: clamp(2.7rem, 7vw, 5.4rem); max-width: 14ch; margin: 0 auto 24px; }
.hero-sub { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 640px; margin: 0 auto 18px; line-height: 1.7; }
.hero-desc { max-width: 560px; margin: 0 auto 36px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }

/* Product mockup */
.hero-mockup { position: relative; z-index: 2; max-width: 1060px; margin: 64px auto 0; padding: 0 40px; }
.mockup-frame { border: 1px solid var(--border); border-radius: 0; background: var(--bg); box-shadow: 0 -2px 0 var(--bg), var(--shadow-lg); overflow: hidden; }
.mockup-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.mockup-bar i { width: 11px; height: 11px; border-radius: 0; border: 1px solid var(--border-strong); display: block; }
.mockup-bar .url {
  margin-left: 12px; flex: 1; max-width: 320px; height: 24px;
  border: 1px solid var(--border); border-radius: 0; background: var(--bg);
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  display: flex; align-items: center; padding: 0 14px;
}
.mockup-body { display: block; width: 100%; }
.hero-mockup::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none;
}

/* Marquee */
.marquee { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 0; overflow: hidden; background: var(--bg-subtle); }
.marquee-track { display: flex; gap: 52px; width: max-content; animation: marquee 32s linear infinite; }
.marquee-item {
  display: flex; align-items: center; gap: 14px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.marquee-item::before { content: ''; width: 5px; height: 5px; background: var(--ink); border-radius: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Service categories: 4 practice-area cards sharing hairline dividers.
   Each card is a link to services.html#<category>, which pre-applies
   that filter on the Services page. */
.svc-cats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 0;
}
.svc-cat {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg); padding: 44px 30px 36px; min-height: 400px;
  overflow: hidden; border: 1px solid transparent;
  transition: border-color 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
}
.svc-cat-num {
  position: absolute; top: 16px; right: 20px; z-index: 0;
  font-family: var(--font-display); font-size: 4.4rem; font-weight: 600; line-height: 1;
  color: var(--bg-muted); transition: color 0.45s var(--ease-smooth);
}
.svc-cat-icon {
  position: relative; z-index: 1;
  width: 46px; height: 46px;
  border: 1px solid var(--border-strong); border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); transition: all var(--transition);
}
.svc-cat-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.svc-cat-count {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint); margin-top: 26px; transition: color 0.45s var(--ease-smooth);
}
.svc-cat h3 {
  position: relative; z-index: 1;
  font-size: 1.45rem; line-height: 1.2; margin: 10px 0 14px;
  transition: color 0.45s var(--ease-smooth);
}
.svc-cat p {
  position: relative; z-index: 1;
  font-size: 0.87rem; color: var(--text-muted); line-height: 1.75; margin: 0;
  flex-grow: 1; transition: color 0.45s var(--ease-smooth);
}
.svc-cat-link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); transition: color 0.45s var(--ease-smooth);
}
.svc-cat-link svg { width: 15px; height: 15px; transition: transform var(--transition); }
.svc-cat:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-md); z-index: 2; }
.svc-cat:hover .svc-cat-num { color: var(--border); }
.svc-cat:hover .svc-cat-icon { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.svc-cat:hover .svc-cat-link svg { transform: translateX(5px); }
.svc-cats-cta { margin-top: 44px; }

@media (max-width: 1199.98px) {
  .svc-cats { grid-template-columns: repeat(2, 1fr); }
  .svc-cat { min-height: 340px; }
}
@media (max-width: 640px) {
  .svc-cats { grid-template-columns: 1fr; }
  .svc-cat { min-height: 0; padding: 36px 26px 32px; }
}

/* Process (layout via Bootstrap row/col-* classes) */
.process-card { height: 100%; border: 1px solid var(--border); border-radius: 0; padding: 30px; background: var(--bg); transition: all var(--transition); }
.process-card:hover { background: var(--bg-subtle); border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.process-num { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-bottom: 18px; }
.process-card h4 { margin-bottom: 8px; }
.process-card p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.6; }

/* Technologies — category tabs + chip cloud */
.tech-explorer {
  border: 1px solid var(--border); border-radius: 0;
  background: var(--bg-subtle); padding: 40px;
}
.tech-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.tech-tab.filter-btn { display: inline-flex; align-items: center; gap: 8px; }
.tech-tab-count {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  background: var(--bg); border: 1px solid var(--border); border-radius: 0;
  padding: 1px 7px; transition: var(--transition);
}
.tech-tab.active .tech-tab-count { color: var(--bg); background: rgba(255,255,255,0.2); border-color: transparent; }

.tech-group { display: none; flex-wrap: wrap; gap: 10px; }
.tech-group.active { display: flex; }
.tech-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 0;
  padding: 9px 16px; transition: all var(--transition);
}
.tech-chip:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.tech-chip i {
  font-style: normal; font-family: var(--font-body); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--bg);
  background: var(--ink); border-radius: 0; padding: 2px 6px;
}
.tech-chip:hover i { background: var(--bg); color: var(--ink); }

@media (max-width: 640px) {
  .tech-explorer { padding: 26px 22px; }
  .tech-tabs { gap: 8px; }
  .tech-chip { font-size: 12px; padding: 8px 14px; }
}

.clients-lede { color: var(--text-muted); max-width: 560px; margin: 16px auto 0; }

/* Clients — auto-scrolling marquee, pauses on hover */
.clients-marquee {
  position: relative; overflow: hidden;
  margin-top: 44px; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.clients-track {
  display: flex; align-items: center; gap: 14px; width: max-content;
  animation: marquee 38s linear infinite;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }
.client-logo {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  min-width: 200px; height: 100px; padding: 0 32px;
  border: 1px solid var(--border); border-radius: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--text-muted);
  transition: border-color 0.4s var(--ease-smooth), color 0.4s var(--ease-smooth),
              transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth), background 0.4s var(--ease-smooth);
}
.client-logo:hover {
  border-color: var(--ink); color: var(--ink); background: var(--bg);
  transform: translateY(-5px) scale(1.04); box-shadow: var(--shadow-md);
}
.client-logo img {
  max-width: 100%; max-height: 60px; object-fit: contain;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}
.client-logo:hover img { filter: grayscale(0) opacity(1); transform: scale(1.06); }
.client-logo img.client-logo--black { max-height: 42px; filter: brightness(0) opacity(0.55); }
.client-logo img.client-logo--tall { max-height: 56px; }
.client-logo:hover img.client-logo--black { filter: brightness(0) opacity(1); }

@media (max-width: 640px) {
  .clients-track { animation-duration: 26s; }
  .client-logo { min-width: 160px; height: 84px; padding: 0 22px; }
}

/* Testimonials — scroll-snap carousel with autoplay and dots. No arrow
   buttons: the track scrolls natively (touch/trackpad) and also supports
   click-and-drag via JS for mouse users. Card width is computed as an
   even share of the track (not a fixed px), so exactly N cards always
   fill the row edge-to-edge — never a partial card cut off at the side. */
.testi-carousel {
  max-width: 1360px; margin: 0 auto; padding: 0 40px;
}
.testi-track {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 2px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; user-select: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-track.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
/* Desktop: 3 full cards visible at once */
.testi-slide { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; }
/* Pin divider + author block to the card bottom so names align across cards */
.testi-slide .testi-divider { margin-top: auto; }

.testi-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 32px; }
.testi-dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 0;
  background: var(--border-strong); cursor: pointer;
  transition: width 0.35s var(--ease-smooth), border-radius 0.35s var(--ease-smooth), background 0.35s var(--ease-smooth);
}
.testi-dot:hover { background: var(--text-muted); }
.testi-dot.active { width: 24px; border-radius: 0; background: var(--ink); }

/* Tablet: 2 full cards visible at once */
@media (max-width: 1140px) {
  .testi-slide { flex-basis: calc((100% - 24px) / 2); }
}
/* Mobile: 1 full card visible at once */
@media (max-width: 640px) {
  .testi-carousel { padding: 0 22px; }
  .testi-track { gap: 16px; }
  .testi-slide { flex-basis: 100%; }
}

@media (max-width: 991.98px) {
  .stat-cell:nth-child(3)::before, .stat-item:nth-child(3)::before { display: none; }
}
@media (max-width: 767.98px) {
  .hero-mockup { padding: 0 22px; }
  .stat-cell::before, .stat-item::before { display: none !important; }
}


/* ─────────────────────────────────────
   Page: ABOUT
   ───────────────────────────────────── */

.mission-grid { --bs-gutter-x: 80px; --bs-gutter-y: 56px; }
.mission-content p { color: var(--text-muted); line-height: 1.85; margin-bottom: 18px; }

/* Vision & Mission — split panel: outlined vision card + inverted mission card */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vm-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 0;
  padding: 52px 46px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.vm-card:hover { border-color: var(--ink); transform: translateY(-5px); box-shadow: var(--shadow-md); }
.vm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.vm-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: 0; color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.vm-icon svg { width: 26px; height: 26px; }
.vm-card:hover .vm-icon { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.vm-num { font-family: var(--font-display); font-size: 3.4rem; font-weight: 600; line-height: 1; color: var(--bg-muted); }
.vm-card .eyebrow { margin-bottom: 14px; }
.vm-card h3 { font-size: 1.55rem; line-height: 1.25; margin: 0; }
.vm-card .rule { margin: 22px 0 26px; }
.vm-card p { color: var(--text-muted); line-height: 1.85; margin: 0; }
.vm-card--ink { background: var(--bg-invert); border-color: var(--bg-invert); }
.vm-card--ink h3 { color: var(--on-dark); }
.vm-card--ink p { color: var(--on-dark-dim); }
.vm-card--ink .eyebrow { color: var(--on-dark-dim); }
.vm-card--ink .eyebrow::before { background: var(--on-dark-dim); }
.vm-card--ink .rule { background: var(--on-dark); }
.vm-card--ink .vm-icon { border-color: rgba(255,255,255,0.25); color: var(--on-dark); }
.vm-card--ink .vm-num { color: rgba(255,255,255,0.14); }
.vm-card--ink:hover { border-color: rgba(255,255,255,0.4); }
.vm-card--ink:hover .vm-icon { background: var(--bg); color: var(--ink); border-color: var(--bg); }
@media (max-width: 767.98px) {
  .vm-grid { grid-template-columns: 1fr; gap: 18px; }
  .vm-card { padding: 40px 30px; }
}
.hex-cluster { display: grid; grid-template-columns: repeat(3, 88px); gap: 10px; justify-content: center; }
.hex-cell {
  width: 88px; height: 100px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; text-align: center; padding: 8px;
}
.hex-cell.filled  { background: var(--ink); color: var(--bg); font-weight: 500; }
.hex-cell.outline { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-strong); }
.hex-cell.muted   { background: var(--bg-muted); color: var(--text-muted); }
.hex-cell.offset  { transform: translateY(55px); }
.stats-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 0; overflow: hidden; }
.value-card { background: var(--bg); padding: 44px 36px; transition: var(--transition); }
.value-card:hover { background: var(--bg-subtle); }
.value-icon { width: 46px; height: 46px; color: var(--ink); margin-bottom: 22px; }
.value-card h3 { font-size: 1.35rem; margin-bottom: 12px; }
.value-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.75; }
.timeline { position: relative; max-width: 820px; margin: 0 auto; }
.timeline::before { content:''; position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:1px; background:var(--border); }
.timeline-item { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; margin-bottom: 48px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-content { padding: 28px 30px; background: var(--bg); border: 1px solid var(--border); border-radius: 0; transition: var(--transition); }
.timeline-content:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.timeline-content.right { grid-column: 3; }
.timeline-content.left  { grid-column: 1; text-align: right; }
.timeline-dot { grid-column: 2; width: 14px; height: 14px; background: var(--ink); border-radius: 0; margin: 0 auto; box-shadow: 0 0 0 5px var(--bg); }
.timeline-year { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.timeline-content h4 { margin-bottom: 8px; }
.timeline-content p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.65; }
/* .industries-list layout via Bootstrap row/col-* */
.industry-pill {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 26px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 0; transition: var(--transition);
}
.industry-pill:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.industry-icon { width: 34px; height: 34px; color: var(--ink); flex-shrink: 0; }
.industry-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.hcs-card { background: var(--bg); border: 1px solid var(--border); border-radius: 0; padding: 60px; }
.hcs-card h3 { font-size: 1.9rem; margin-bottom: 16px; }
.hcs-card p { color: var(--text-muted); line-height: 1.8; margin-bottom: 16px; }
.about-cta { text-align: center; }
.about-cta h2 { margin-bottom: 18px; }
.about-cta p { color: var(--on-dark-dim); max-width: 540px; margin: 0 auto 36px; }

@media (max-width: 991.98px) {
  .mission-visual { display: none; }
  .mission-content { flex: 0 0 100%; max-width: 100%; }
  .values-grid { grid-template-columns: 1fr; }
  .timeline::before { left: 18px; }
  .timeline-item { grid-template-columns: 38px 1fr; }
  .timeline-content.left { grid-column: 2; text-align: left; }
  .timeline-content.right { grid-column: 2; }
  .timeline-dot { grid-column: 1; }
  .hcs-card { grid-template-columns: 1fr; gap: 36px; padding: 40px 28px; }
}


/* ─────────────────────────────────────
   Page: SERVICES
   ───────────────────────────────────── */

/* Extra breathing room above the "capabilities" section heading, which
   otherwise sits flush against the hero on this page. */
body.page-services .filter-head { padding-top: 48px; }

/* Service capability grid — filterable tiles with a large ghost index numeral */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-tile {
  position: relative; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border); border-radius: 0;
  padding: 32px 28px; display: flex; flex-direction: column;
  transition: border-color 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
  scroll-margin-top: 120px;
}
.service-tile:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-tile-num {
  position: absolute; top: 10px; right: 20px; z-index: 0;
  font-family: var(--font-display); font-size: 3.4rem; font-weight: 600;
  color: var(--bg-muted); line-height: 1; transition: color 0.4s var(--ease-smooth);
}
.service-tile:hover .service-tile-num { color: var(--border); }
.service-tile-icon {
  position: relative; z-index: 1;
  width: 46px; height: 46px; border: 1px solid var(--border-strong); border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); flex-shrink: 0; margin-bottom: 20px;
  transition: all var(--transition);
}
.service-tile-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.service-tile:hover .service-tile-icon { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.service-tile-cat {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px;
}
.service-tile h3 { position: relative; z-index: 1; font-size: 1.1rem; line-height: 1.35; margin-bottom: 10px; }
.service-tile p { position: relative; z-index: 1; font-size: 0.87rem; color: var(--text-muted); line-height: 1.7; flex-grow: 1; margin: 0; }

@media (max-width: 991.98px) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)    { .service-grid { grid-template-columns: 1fr; } }

/* Technology stack explorer — sidebar category list + tech-mark grid */
.tk-panel { display: grid; grid-template-columns: 280px 1fr; border: 1px solid var(--border); border-radius: 0; overflow: hidden; }
.tk-sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg); }
.tk-cat {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  color: var(--text-muted); background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 20px 26px; cursor: pointer; transition: all var(--transition);
}
.tk-sidebar .tk-cat:last-child { border-bottom: none; }
.tk-cat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ink); transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s var(--ease-smooth);
}
.tk-cat:hover { color: var(--ink); background: var(--bg-subtle); }
.tk-cat.active { color: var(--ink); background: var(--bg-subtle); font-weight: 600; }
.tk-cat.active::before { transform: scaleY(1); }
.tk-cat-count {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 0; padding: 2px 9px; flex-shrink: 0;
}
.tk-cat.active .tk-cat-count { color: var(--ink); border-color: var(--ink); }

.tk-content { padding: 40px; }
.tk-group { display: none; }
.tk-group.active { display: block; }
.tk-group-head { margin-bottom: 26px; }
.tk-group-head h3 { font-size: 1.35rem; }
.tk-group-head p { color: var(--text-muted); font-size: 0.88rem; margin-top: 6px; }

.tk-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tk-card {
  position: relative;
  border: 1px solid var(--border); border-radius: 0;
  padding: 22px 10px 18px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  transition: border-color 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}
.tk-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.tk-card.is-new::after {
  content: 'NEW'; position: absolute; top: 8px; right: 8px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--bg); background: var(--ink); padding: 2px 6px; border-radius: 0;
}
.tk-mark {
  width: 46px; height: 46px; border-radius: 0; border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: var(--ink);
  transition: all var(--transition);
}
.tk-card:hover .tk-mark { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tk-name { font-size: 0.75rem; font-weight: 500; line-height: 1.35; color: var(--text); }

@media (max-width: 991.98px) { .tk-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px) {
  .tk-panel { grid-template-columns: 1fr; }
  .tk-sidebar { border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; overflow-x: auto; }
  .tk-cat { border-bottom: none; border-right: 1px solid var(--border); flex-shrink: 0; white-space: nowrap; }
  .tk-sidebar .tk-cat:last-child { border-right: none; }
  .tk-cat::before { left: 0; top: auto; bottom: 0; right: 0; width: auto; height: 3px; transform: scaleX(0); transform-origin: left; }
  .tk-cat.active::before { transform: scaleX(1); }
}
@media (max-width: 640px) {
  .tk-content { padding: 26px 22px; }
  .tk-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) { .tk-grid { grid-template-columns: repeat(2, 1fr); } }

/* .industries-grid layout via Bootstrap row/col-* */
.industry-card { background: var(--bg); border: 1px solid var(--border); border-radius: 0; padding: 36px 32px; transition: var(--transition); }
.industry-card:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.industry-card .ic { width: 46px; height: 46px; border: 1px solid var(--border-strong); border-radius: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); margin-bottom: 20px; }
.industry-card h4 { margin-bottom: 10px; }
.industry-card p { font-size: 0.88rem; color: var(--text-muted); }


/* ─────────────────────────────────────
   Page: DEMOS
   ───────────────────────────────────── */

.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.demo-card { border: 1px solid var(--border); border-radius: 0; overflow: hidden; background: var(--bg); cursor: pointer; transition: all var(--transition); display: flex; flex-direction: column; }
.demo-card:hover { border-color: var(--ink); transform: translateY(-5px); box-shadow: var(--shadow-md); }
.demo-card.featured { grid-column: span 2; }
.demo-thumb { position: relative; background: var(--bg-muted); overflow: hidden; }
.demo-card:not(.featured) .demo-thumb { aspect-ratio: 16/9; }
.demo-card.featured .demo-thumb { aspect-ratio: 16/7; }
.demo-thumb-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.demo-thumb-inner::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.5; }
.play-btn { position: relative; z-index: 2; width: 66px; height: 66px; border-radius: 0; background: var(--bg); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: all var(--transition); }
.demo-card.featured .play-btn { width: 80px; height: 80px; }
.demo-card:hover .play-btn { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.play-btn svg { width: 24px; height: 24px; }
.demo-badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bg); background: var(--ink); padding: 4px 10px; border-radius: 0; }
.demo-duration { position: absolute; bottom: 12px; right: 12px; z-index: 2; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink); background: var(--bg); border: 1px solid var(--border); padding: 3px 8px; border-radius: 0; }
.demo-info { padding: 24px 26px; display: flex; flex-direction: column; flex: 1; }
.demo-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.demo-industry { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.demo-dot { width: 3px; height: 3px; background: var(--text-faint); border-radius: 0; }
.demo-date { font-size: 0.8rem; color: var(--text-faint); }
.demo-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--ink); margin-bottom: 10px; line-height: 1.3; }
.demo-card.featured .demo-title { font-size: 1.5rem; }
.demo-desc { font-size: 0.86rem; color: var(--text-muted); line-height: 1.65; }
.demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.demo-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.modal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(10,10,10,0.5); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-inner { width: 100%; max-width: 880px; background: var(--bg); border: 1px solid var(--border); border-radius: 0; overflow: hidden; position: relative; box-shadow: var(--shadow-lg); }
.modal-video { aspect-ratio: 16/9; background: var(--bg-muted); display: flex; align-items: center; justify-content: center; color: var(--text-faint); text-align: center; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 0; background: var(--bg); color: var(--ink); cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; z-index: 3; transition: var(--transition); }
.modal-close:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.modal-body { padding: 30px; }
.modal-body h3 { margin-bottom: 12px; }
.modal-body p { color: var(--text-muted); font-size: 0.92rem; }

@media (max-width: 1024px) { .demo-grid { grid-template-columns: 1fr 1fr; } .demo-card.featured { grid-column: span 2; } }
@media (max-width: 640px) { .demo-grid { grid-template-columns: 1fr; } .demo-card.featured { grid-column: span 1; } }


/* ─────────────────────────────────────
   Page: PROJECTS
   ───────────────────────────────────── */

.source-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--text-muted);
  padding: 14px 18px;
  border: 1px dashed var(--border-strong); border-radius: 0;
  margin-bottom: 36px;
}
.source-note strong { color: var(--ink); }

.project-list { display: flex; flex-direction: column; gap: 22px; }

.project-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 0;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.project-card:hover { border-color: var(--ink); box-shadow: var(--shadow-md); }

.project-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 30px 32px 24px; border-bottom: 1px solid var(--border);
}
.project-card-intro { max-width: 660px; }
.project-id {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--text-faint); margin-bottom: 10px;
}
.project-card-head h3 { font-size: 1.4rem; line-height: 1.3; margin-bottom: 10px; }
.project-client { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 0; }
.project-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.project-cat { text-transform: uppercase; letter-spacing: 0.08em; font-size: 9.5px; white-space: nowrap; }
.project-source {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-faint); white-space: nowrap;
}

.project-card-body { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
.project-col { padding: 26px 28px; border-right: 1px solid var(--border); }
.project-col:last-child { border-right: none; }
.project-col h4 {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px;
}
.project-col li {
  font-size: 0.865rem; color: var(--text); line-height: 1.6;
  padding-left: 15px; position: relative; margin-bottom: 9px;
}
.project-col li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; background: var(--ink); border-radius: 0;
}
.project-col li:last-child { margin-bottom: 0; }

.project-card-tech {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
  padding: 22px 32px;
}
.project-tech-left { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.project-tech-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
}
.project-tech-chips { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 991.98px) {
  .project-card-body { grid-template-columns: 1fr; }
  .project-col { border-right: none; border-bottom: 1px solid var(--border); }
  .project-col:last-child { border-bottom: none; }
  .project-card-meta { flex-direction: row; align-items: center; }
}
@media (max-width: 767.98px) {
  .project-card-head { padding: 24px 22px 20px; }
  .project-col { padding: 22px; }
  .project-card-tech { padding: 20px 22px; }
}


/* ─────────────────────────────────────
   Page: CASE STUDIES
   ───────────────────────────────────── */

/* Filter heading + live counter — shared by case-studies and projects */
.usecase-head, .filter-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 26px;
}
.usecase-head h2, .filter-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.usecase-count, .filter-count {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em; color: var(--text-muted);
}
.usecase-count strong, .filter-count strong { color: var(--ink); font-weight: 700; }

.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.usecase-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 0;
  padding: 32px 28px; display: flex; flex-direction: column;
  transition: all var(--transition);
}
.usecase-card:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.usecase-icon {
  width: 46px; height: 46px;
  border: 1px solid var(--border-strong); border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); flex-shrink: 0; margin-bottom: 20px;
  transition: all var(--transition);
}
.usecase-icon svg { width: 20px; height: 20px; }
.usecase-card:hover .usecase-icon { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.usecase-cat {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px;
}
.usecase-card h3 { font-size: 1.15rem; line-height: 1.35; margin-bottom: 10px; }
.usecase-card p { font-size: 0.87rem; color: var(--text-muted); line-height: 1.7; flex-grow: 1; margin-bottom: 0; }
.usecase-card .arrow-link { margin-top: 20px; }

@media (max-width: 991.98px) { .usecase-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)    { .usecase-grid { grid-template-columns: 1fr; } }


/* ─────────────────────────────────────
   Page: GALLERY (black & white theme)
   ───────────────────────────────────── */

.gallery-grid { columns: 3; column-gap: 16px; }
.gallery-item { break-inside: avoid; margin-bottom: 16px; position: relative; overflow: hidden; border-radius: 0; border: 1px solid var(--border); cursor: pointer; display: block; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-ph { width: 100%; background: var(--bg-muted); position: relative; overflow: hidden; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.gallery-ph-inner { display: flex; align-items: center; justify-content: center; position: relative; height: 100%; }
.gallery-overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.72); opacity: 0; transition: opacity var(--transition); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.gallery-overlay-icon { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,0.7); border-radius: 0; display: flex; align-items: center; justify-content: center; color: var(--white); }
.gallery-overlay-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); }
.gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(0deg, rgba(10,10,10,0.85) 0%, transparent 100%); opacity: 0; transition: opacity var(--transition); }
.gallery-item:hover .gallery-caption { opacity: 1; }
.gallery-caption-title { font-size: 0.825rem; color: var(--white); font-weight: 500; }
.gallery-caption-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 4px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(10,10,10,0.95); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(20px); }
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox-inner { width: 90%; max-width: 1000px; position: relative; }
.lightbox-img { width: 100%; background: var(--bg-muted); border: 1px solid var(--border-strong); border-radius: 0; display: flex; align-items: center; justify-content: center; min-height: 400px; }
.lightbox-close { position: fixed; top: 24px; right: 24px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.25); border-radius: 0; background: rgba(10,10,10,0.8); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; z-index: 10; transition: all var(--transition); }
.lightbox-close:hover { border-color: var(--white); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 1px solid rgba(255,255,255,0.2); border-radius: 0; background: rgba(10,10,10,0.7); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all var(--transition); }
.lightbox-nav:hover { border-color: var(--white); }
.lightbox-nav.prev { left: -68px; }
.lightbox-nav.next { right: -68px; }
.lightbox-caption { margin-top: 20px; text-align: center; }
.lightbox-caption h4 { font-size: 1.1rem; color: var(--white); }
.lightbox-caption p { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin-top: 6px; }

@media (max-width: 768px) { .gallery-grid { columns: 2; } .lightbox-nav { display: none; } }
@media (max-width: 480px) { .gallery-grid { columns: 1; } }


/* ─────────────────────────────────────
   Page: LEADERSHIP (black & white theme)
   ───────────────────────────────────── */

/* The .leader-card styles below remain in use on the About page's
   leadership preview grid. */
.leadership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); border: 1px solid var(--border); }
.leader-card { background: var(--bg); position: relative; overflow: hidden; border: 1px solid transparent; transition: var(--transition); cursor: pointer; }
.leader-card:hover { background: var(--bg-subtle); border-color: var(--ink); }
.leader-card:hover .leader-overlay { opacity: 1; }
.leader-card:hover .leader-img-wrap { transform: scale(1.03); }
.leader-img-wrap { width: 100%; aspect-ratio: 3/4; overflow: hidden; position: relative; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); background: var(--bg-muted); display: flex; align-items: center; justify-content: center; }
.leader-avatar { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-muted); }
/* Photo covers the wrap; if it fails to load it's removed, revealing the initials avatar */
.leader-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 1; }
.avatar-initials { width: 100px; height: 100px; border-radius: 0; background: var(--bg); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; color: var(--ink); margin-bottom: 16px; }
.avatar-hex { position: absolute; inset: 0; opacity: 0.06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='69.3'%3E%3Cpolygon points='40,0 80,20 80,60 40,80 0,60 0,20' fill='none' stroke='%230A0A0A' stroke-width='0.5'/%3E%3C/svg%3E"); background-size: 80px 69.3px; }
.leader-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,0.42) 100%); opacity: 0; transition: var(--transition); z-index: 2; }
.leader-info { padding: 28px 32px 32px; border-top: 1px solid var(--border); }
.leader-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 8px; }
.leader-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 300; color: var(--ink); margin-bottom: 12px; }
.leader-linkedin { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-muted); transition: color var(--transition); position: relative; z-index: 2; }
.leader-linkedin:hover { color: var(--ink); }
/* Stretched link: makes the whole card scroll to the bio, no JS.
   Sits above the card but below the LinkedIn link so that still works. */
.leader-scroll { position: absolute; inset: 0; z-index: 1; }
@media (max-width: 1024px) { .leadership-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .leadership-grid { grid-template-columns: 1fr; } }

/* Studio intro — short editorial statement between the stats band and roster */
.studio-intro { padding: 64px 0; border-bottom: 1px solid var(--border); }
.studio-intro-grid { display: grid; grid-template-columns: 260px 1fr; gap: 48px; }
.studio-intro-grid .eyebrow { margin-bottom: 0; }
.studio-intro-grid p { font-size: 1rem; color: var(--text-muted); line-height: 1.85; max-width: 680px; margin: 0; }

/* Roster heading */
.roster-head { max-width: 620px; margin-bottom: 12px; }
.roster-head p { color: var(--text-muted); margin-top: 18px; }

/* Alternating executive profile rows: full-height portrait beside a full
   biography, flipping sides on every other row. */
.profile-list { margin-top: 40px; }
.profile-row {
  display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center;
  padding: 56px 0; border-top: 1px solid var(--border);
  scroll-margin-top: 120px;
}
.profile-list .profile-row:last-child { border-bottom: 1px solid var(--border); }
.profile-row--reverse { grid-template-columns: 1fr 340px; }

.profile-portrait {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  border-radius: 0; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.profile-portrait--dark  { background: var(--ink); }
.profile-portrait--light { background: var(--bg-subtle); }
.profile-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.profile-initials {
  font-family: var(--font-display); font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 300;
}
.profile-portrait--dark .profile-initials  { color: var(--on-dark); }
.profile-portrait--light .profile-initials { color: var(--ink); }

.profile-name { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 4px; }
.profile-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 22px; }
.profile-bio p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 14px; }
.profile-bio p:last-child { margin-bottom: 0; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.profile-linkedin {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 3px; transition: gap var(--transition);
}
.profile-linkedin:hover { gap: 12px; }

@media (max-width: 900px) {
  .studio-intro-grid { grid-template-columns: 1fr; gap: 16px; }
  .profile-row, .profile-row--reverse { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .profile-portrait { order: -1; max-width: 380px; margin: 0 auto; width: 100%; }
}


/* ─────────────────────────────────────
   Page: TESTIMONIALS (black & white theme)
   ───────────────────────────────────── */

.featured-quote {
  padding: 100px 0; position: relative; overflow: hidden;
  background:
    linear-gradient(rgba(0, 0, 0, 0.77), rgba(0, 0, 0, 0.77)),
    url('../../src/images/bg/black-3.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.featured-quote::before { content: '\201C'; position: absolute; top: -20px; left: 40px; font-family: var(--font-display); font-size: 20rem; color: rgba(255,255,255,0.04); line-height: 1; pointer-events: none; }
.featured-quote-inner { max-width: 880px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.featured-quote-text { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 300; font-style: italic; color: var(--on-dark); line-height: 1.5; margin-bottom: 40px; }
.featured-attribution { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.attr-name { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--on-dark); }
.attr-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-dark-dim); }
.stars { display: flex; gap: 4px; margin-bottom: 32px; justify-content: center; }
.star { color: var(--on-dark); font-size: 1.1rem; }
/* .testi-grid — responsive CSS grid: 3 cols (lg) → 2 cols (md) → 1 col (mobile) */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* let the grid control sizing — neutralise the Bootstrap col-* widths on the cards */
.testi-grid > [class*="col-"] { width: auto; max-width: none; }
@media (max-width: 991.98px) { .testi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .testi-grid { grid-template-columns: 1fr; } }
.testi-card { background: var(--bg); border: 1px solid var(--border); border-radius: 0; padding: 40px 36px; position: relative; transition: all var(--transition); }
.testi-card:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-md); }
a.testi-card { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.testi-quote-mark { font-family: var(--font-display); font-size: 4rem; color: var(--border-strong); line-height: 1; margin-bottom: 16px; }
.testi-text { font-size: 0.9rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 28px; font-style: italic; }
.testi-divider { width: 40px; height: 1px; background: linear-gradient(90deg, var(--ink), transparent); margin-bottom: 20px; }
.testi-person { display: flex; align-items: center; gap: 14px; }
.testi-avatar { width: 44px; height: 44px; border-radius: 0; background: var(--bg-muted); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1rem; color: var(--ink); flex-shrink: 0; }
.testi-name { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.testi-role { font-size: 0.775rem; color: var(--text-muted); margin-top: 2px; }
.testi-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.testi-stars .star { font-size: 0.95rem; color: #F5A623; }
.testi-company-tag { position: absolute; top: 24px; right: 24px; }
.testi-company-tag.tag { font-size: 9px; }
.metrics-band { background: var(--bg-muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 80px 0; }
.metrics-grid { text-align: center; }
.metric-value { font-family: var(--font-display); font-size: 3.5rem; font-weight: 300; color: var(--ink); line-height: 1; }
.metric-value span { color: var(--text-faint); }
.metric-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-top: 10px; }
.metric-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
.case-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.case-item { display: grid; grid-template-columns: 180px 1fr 240px; gap: 48px; align-items: center; padding: 40px 36px; background: var(--bg); border-bottom: 1px solid var(--border); transition: var(--transition); }
.case-item:hover { background: var(--bg-subtle); }
.case-client { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); }
.case-item h4 { font-size: 1rem; font-weight: 500; font-family: var(--font-body); color: var(--ink); margin-bottom: 6px; }
.case-item p { font-size: 0.85rem; color: var(--text-muted); }
.case-result { text-align: right; }
.case-metric { font-family: var(--font-display); font-size: 2rem; font-weight: 300; color: var(--ink); line-height: 1; }
.case-metric-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

@media (max-width: 1024px) { .case-item { grid-template-columns: 1fr; gap: 16px; } .case-result { text-align: left; } }


/* ─────────────────────────────────────
   Page: CONTACT (black & white theme)
   ───────────────────────────────────── */

body.page-contact .page-hero {
  min-height: 55vh; display: flex; align-items: center;
  background: var(--bg-subtle);
  padding: 160px 0 90px;
  border-bottom-color: var(--border);
}
body.page-contact .page-hero::before {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 0%, transparent 75%);
  opacity: 0.6;
}
body.page-contact .page-hero h1 { color: var(--ink); margin-bottom: 20px; }
body.page-contact .page-hero p { color: var(--text-muted); max-width: 560px; font-size: 1.1rem; line-height: 1.8; }
body.page-contact .page-hero .eyebrow { color: var(--text-muted); }

.page-hero-content { position: relative; }
.contact-layout { --bs-gutter-x: 80px; --bs-gutter-y: 60px; }
.contact-info-block { position: sticky; top: 120px; }
.contact-info-block h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 20px; color: var(--ink); }
.contact-info-block > p { color: var(--text-muted); line-height: 1.85; margin-bottom: 48px; }
.contact-detail { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 36px; }
.contact-detail-icon { width: 44px; height: 44px; background: var(--bg-muted); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink); }
.contact-detail-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.contact-detail-value { color: var(--ink); font-size: .95rem; line-height: 1.6; }
.contact-detail-value a { color: var(--ink); transition: color var(--transition); }
.contact-detail-value a:hover { color: var(--text-muted); }
.office-cards { margin-top: 40px; gap: 12px; }
.office-card { background: var(--bg); border: 1px solid var(--border); padding: 24px 20px; transition: var(--transition); }
.office-card:hover { border-color: var(--ink); }
.office-card-flag { font-size: 1.6rem; margin-bottom: 10px; }
.office-card-country { font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.office-card-phone { color: var(--text); font-size: .85rem; }
.contact-social { display: flex; gap: 12px; margin-top: 40px; }
.social-btn { width: 40px; height: 40px; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: var(--transition); }
.social-btn:hover { border-color: var(--ink); color: var(--ink); }
.contact-form-wrap { background: var(--bg); border: 1px solid var(--border); padding: 56px 52px; }
.form-heading { font-family: var(--font-display); font-size: 1.9rem; font-weight: 300; margin-bottom: 8px; color: var(--ink); }
.form-sub { color: var(--text-muted); font-size: .9rem; margin-bottom: 40px; }
/* .form-row uses Bootstrap row g-3 */
.form-group { margin-bottom: 24px; }
.form-group.full { grid-column: 1 / -1; }
.form-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.form-input, .form-select, .form-textarea { width: 100%; background: var(--bg); border: 1px solid var(--border-strong); color: var(--ink); font-family: var(--font-body); font-size: .9rem; padding: 14px 18px; outline: none; transition: border-color var(--transition); appearance: none; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--ink); background: var(--bg); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-faint); }
.form-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%236B6B70' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.form-select option { background: var(--bg); color: var(--ink); }
.form-textarea { resize: vertical; min-height: 130px; line-height: 1.65; }
.form-checkbox-group { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
.form-checkbox-group input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ink); flex-shrink: 0; margin-top: 3px; cursor: pointer; }
.form-checkbox-group label { font-size: .85rem; color: var(--text-muted); line-height: 1.6; cursor: pointer; }
.form-checkbox-group a { color: var(--ink); text-decoration: underline; }
.btn-submit { display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--bg); font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 18px 40px; border: none; cursor: pointer; transition: var(--transition); width: 100%; justify-content: center; font-weight: 600; }
.btn-submit:hover { background: var(--ink-soft); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-submit:active { transform: translateY(0); }
.form-success { display: none; text-align: center; padding: 60px 20px; }
.form-success.visible { display: block; }
.success-hex { width: 80px; height: 80px; margin: 0 auto 24px; color: var(--ink); }
.form-success h3 { font-size: 2rem; margin-bottom: 12px; color: var(--ink); }
.form-success p { color: var(--text-muted); }
.map-section { background: var(--bg-subtle); padding: 0; position: relative; overflow: hidden; height: 340px; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.map-placeholder { position: relative; width: 100%; height: 100%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; gap: 60px; }
.map-pin { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.map-pin-dot { width: 14px; height: 14px; background: var(--ink); border-radius: 0; box-shadow: 0 0 24px rgba(10,10,10,.25); position: relative; }
.map-pin-dot::after { content: ''; position: absolute; inset: -6px; border: 1px solid rgba(10,10,10,.3); border-radius: 0; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0; } }
.map-pin-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); text-align: center; }
.map-pin-city { color: var(--text-muted); font-size: .8rem; margin-top: 2px; }
/* .faq-grid — responsive CSS grid: 3 cols (lg) → 2 cols (tablet) → 1 col (mobile) */
.faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* let the grid control sizing — neutralise the Bootstrap col-* widths on the cards */
.faq-grid > [class*="col-"] { width: auto; max-width: none; }
@media (max-width: 991.98px) { .faq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-card { background: var(--bg); border: 1px solid var(--border); padding: 32px 28px; transition: var(--transition); }
.faq-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.faq-card h4 { font-size: 1.2rem; margin-bottom: 12px; color: var(--ink); }
.faq-card p { color: var(--text-muted); font-size: .9rem; line-height: 1.75; }

@media (max-width: 991.98px) { .contact-info-block { position: static; } .contact-form-wrap { padding: 40px 32px; } }
@media (max-width: 767.98px) { .contact-form-wrap { padding: 32px 24px; } .map-placeholder { flex-direction: column; gap: 30px; } }


/* ─────────────────────────────────────
   11. Inline-style extractions
   (helpers moved out of the HTML so no
   page carries internal/inline CSS)
   ───────────────────────────────────── */

/* Spacing utilities */
.mt-12 { margin-top: 12px; }
.mt-32 { margin-top: 32px; }
.mb-24 { margin-bottom: 24px; }
.mb-28 { margin-bottom: 28px; }
.mb-30 { margin-bottom: 30px; }
.mb-56 { margin-bottom: 56px; }
.py-56 { padding-top: 56px; padding-bottom: 56px; }
.p-24 { padding: 24px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }

/* Section padding helpers */
.section--flush-top  { padding-top: 0; }
.section--pad-top-64 { padding-top: 64px; }

/* Shared page-hero overrides (testimonials / leadership / gallery).
   Scoped under .page-hero so they win over `.page-hero p`. */
.page-hero .page-hero-title { font-size: clamp(2.5rem, 5vw, 5rem); }
.page-hero .page-hero-lead  { margin-top: 28px; max-width: 560px; font-size: 1rem; line-height: 1.9; }

/* Centred rule used on the About CTA */
.rule-centered { margin: 0 auto 28px; }

/* Small muted note (e.g. contact response-time hours) */
.text-muted-sm { color: var(--text-muted); font-size: .85rem; }

/* Leadership avatar role label */
.avatar-role { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--text-muted); text-transform: uppercase; }

/* Gallery aspect-ratio helpers */
.ar-3-4  { aspect-ratio: 3 / 4; }
.ar-1-1  { aspect-ratio: 1 / 1; }
.ar-4-3  { aspect-ratio: 4 / 3; }
.ar-3-2  { aspect-ratio: 3 / 2; }
.ar-2-3  { aspect-ratio: 2 / 3; }
.ar-16-9 { aspect-ratio: 16 / 9; }

/* Gallery lightbox placeholder */
.lightbox-placeholder       { color: var(--text-muted); text-align: center; }
.lightbox-placeholder-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }
.lightbox-placeholder-note  { font-size: 0.8rem; margin-top: 8px; opacity: 0.6; }

/* Contact map decorative SVGs */
.map-bg      { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .08; }
.map-divider { opacity: .25; }

/* Demos modal video placeholder */
.modal-video-icon  { font-size: 2.5rem; opacity: 0.3; }
.modal-video-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 10px; }

/* Back-to-top button (injected on every page by components.js) */
.back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 46px;
  height: 46px;
  border-radius: 0;
  border: none;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition), background var(--transition);
  z-index: 800;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--ink-soft); }
.back-to-top:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }
@media (max-width: 640px) {
  .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}
.modal-video-note  { font-size: 0.8rem; margin-top: 6px; }