/* ============================================================
   WHITE × STUDIO — Design System
   Editorial Brutalism: cream paper, hairline rules,
   monospaced metadata, single hot-red accent, oversized type.
   ============================================================ */

/* Mobile viewport range: 320px – 767px (Figma frame base: 375px) */
:root {
  --size: 425;
  --clamp-min: 8px;   /* Adjusted to scale down layout for better viewport proportions */
  --clamp-max: 10.5px;   /* Clamped at 10.5px for readable mobile scale */
}

:root {
  --bg:        #F4F1EA;
  --bg-2:      #ECE7DC;
  --rule:      #1A1A1A;
  --rule-soft: rgba(26, 26, 26, .18);
  --ink:       #0F0F0F;
  --ink-2:     #2A2A2A;
  --mute:      #6B6B6B;
  --mute-2:    #8E8E8E;
  --paper:     #FFFFFF;
  --accent:    #CF321E;
  --accent-ink:#FFFFFF;

  --sans: 'Zalando Sans', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-display: 20rem;
  --t-h2:      9.6rem;
  --t-h3:      3.2rem;
  --t-body:    1.6rem;
  --t-mono:    1.2rem;

  --page-inset: 1.6rem;
  --min-desktop-rem: 1.1rem;
  --min-desktop-12px-rem: 1.2rem;



  /* ---- Typography System (Responsive tokens) ---- */
  --typography--typeface--communication: var(--sans);
  --typography--typeface--decoration:   var(--mono);
  --typography--font-weight--regular:   400;
  --typography--font-weight--medium:    500;
  --typography--font-weight--semi-bold: 600;
  --typography--font-weight--bold:      700;

  /* Display sizes — Mobile (320–767) base */
  --typography--font-sizes--display--d1: 8.8rem;
  --typography--font-sizes--display--d2: 6.4rem;
  --typography--font-sizes--display--d3: 5.6rem;
  --typography--font-sizes--display--d4: 4.8rem;
  --typography--font-sizes--display--d5: 4.0rem;

  /* Heading sizes — Mobile base */
  --typography--font-sizes--headings--h1: 5.6rem;
  --typography--font-sizes--headings--h2: 4.4rem;
  --typography--font-sizes--headings--h3: 3.6rem;
  --typography--font-sizes--headings--h4: 2.8rem;
  --typography--font-sizes--headings--h5: 2.4rem;
  --typography--font-sizes--headings--h6: 2.0rem;

  /* Body sizes — Mobile base */
  --typography--font-sizes--body--b1: 1.8rem;
  --typography--font-sizes--body--b2: 1.6rem;
  --typography--font-sizes--body--b3: 1.5rem;
  --typography--font-sizes--body--b4: 1.4rem;
  --typography--font-sizes--body--b5: 1.3rem;

  /* Label sizes — Mobile base */
  --typography--font-sizes--labels--l1: 2.4rem;
  --typography--font-sizes--labels--l2: 1.5rem;
  --typography--font-sizes--labels--l3: 1.4rem;
  --typography--font-sizes--labels--l4: 1.3rem;
  --typography--font-sizes--labels--l5: 1.2rem;
  --typography--font-sizes--labels--l6: 1.2rem;
}

/* Tablet viewport range: 768px – 1199px (Breakpoint start: 768px) */
@media (min-width: 768px) {
  :root {
    --size: 768;
    --clamp-min: 10px;    /* Lock scale at 768px baseline (1rem = 10px) */
    --clamp-max: 12.5px;  /* Cap scaling above 960px width to protect layout */

    --page-inset: 2.4rem;
    --min-desktop-rem: 1.1rem;
    --min-desktop-12px-rem: 1.2rem;

    /* Typography overrides (Tablet 768px base) */
    --typography--font-sizes--display--d1: 12.8rem;
    --typography--font-sizes--display--d2: 8.8rem;
    --typography--font-sizes--display--d3: 7.2rem;
    --typography--font-sizes--display--d4: 6.4rem;
    --typography--font-sizes--display--d5: 5.6rem;
    --typography--font-sizes--headings--h1: 8.0rem;
    --typography--font-sizes--headings--h2: 6.4rem;
    --typography--font-sizes--headings--h3: 4.8rem;
    --typography--font-sizes--headings--h4: 4.0rem;
    --typography--font-sizes--headings--h5: 3.2rem;
    --typography--font-sizes--headings--h6: 2.4rem;
    --typography--font-sizes--body--b1: 2.0rem;
    --typography--font-sizes--body--b2: 1.8rem;
    --typography--font-sizes--body--b3: 1.6rem;
    --typography--font-sizes--body--b4: 1.5rem;
    --typography--font-sizes--body--b5: 1.3rem;
    --typography--font-sizes--labels--l1: 3.2rem;
    --typography--font-sizes--labels--l2: 1.6rem;
    --typography--font-sizes--labels--l3: 1.5rem;
    --typography--font-sizes--labels--l4: 1.3rem;
    --typography--font-sizes--labels--l5: 1.2rem;
    --typography--font-sizes--labels--l6: 1.2rem;
  }
}

/* Desktop viewport range: 1200px+ (Breakpoint start: 1200px) */
@media (min-width: 1200px) {
  :root {
    --size: 1200;
    --clamp-min: 10px;    /* Lock scale at 1200px baseline (1rem = 10px) */
    --clamp-max: 16px;    /* Cap scaling above 1920px width to allow scaling on wider viewports */

    --page-inset: 4.0rem;
    --min-desktop-rem: 1.1rem;
    --min-desktop-12px-rem: 1.2rem;

    /* Typography overrides (Desktop 1200px base) */
    --typography--font-sizes--display--d1: 18.0rem;
    --typography--font-sizes--display--d2: 12.8rem;
    --typography--font-sizes--display--d3: 11.2rem;
    --typography--font-sizes--display--d4: 9.6rem;
    --typography--font-sizes--display--d5: 7.2rem;
    --typography--font-sizes--headings--h1: 11.2rem;
    --typography--font-sizes--headings--h2: 8.0rem;
    --typography--font-sizes--headings--h3: 6.4rem;
    --typography--font-sizes--headings--h4: 4.8rem;
    --typography--font-sizes--headings--h5: 3.6rem;
    --typography--font-sizes--headings--h6: 2.8rem;
    --typography--font-sizes--body--b1: 2.2rem;
    --typography--font-sizes--body--b2: 1.8rem;
    --typography--font-sizes--body--b3: 1.6rem;
    --typography--font-sizes--body--b4: 1.5rem;
    --typography--font-sizes--body--b5: 1.4rem;
    --typography--font-sizes--labels--l1: 4.0rem;
    --typography--font-sizes--labels--l2: 1.6rem;
    --typography--font-sizes--labels--l3: 1.5rem;
    --typography--font-sizes--labels--l4: 1.4rem;
    --typography--font-sizes--labels--l5: 1.3rem;
    --typography--font-sizes--labels--l6: 1.2rem;
  }
}



/* ---- Reset ---- */
@view-transition {
  navigation: auto;
}

/* ---- Lenis smooth scroll (initialised in script.js) ---- */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

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

html {
  font-size: clamp(var(--clamp-min), calc(10 * 100vw / var(--size)), var(--clamp-max));
}
@media (min-width: 768px) {
  html {
    font-size: 10px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  html {
    font-size: clamp(var(--clamp-min), calc(10 * 100vw / var(--size)), var(--clamp-max));
  }
}
@media (min-width: 1440px) {
  html {
    font-size: 12px;
  }
  :root {
    --min-desktop-rem: 0.917rem;
    --min-desktop-12px-rem: 1.0rem;
  }
}
@media (min-width: 1920px) {
  html {
    font-size: 13.33px;
  }
  :root {
    --min-desktop-rem: 0.826rem;
    --min-desktop-12px-rem: 0.901rem;
  }
}
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-size: var(--t-body);
  line-height: 1.45;
  overflow-x: hidden;
  transition: opacity 0.25s ease-in-out;
}
.loading-hash body {
  opacity: 0;
  transition: none !important;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---- Utilities ---- */
.mono  { font-family: var(--mono); letter-spacing: .02em; }
.upcase { text-transform: uppercase; letter-spacing: .06em; }

/* ============================================================
   TYPOGRAPHY SYSTEM — Responsive tokens from CSV
   ============================================================ */

/* Display */
.typography--display--d1, .d1 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--display--d1);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1em;
  letter-spacing: -0.06em;
}

.typography--display--d2, .d2 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--display--d2);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1em;
  letter-spacing: -0.05em;
}

.typography--display--d3, .d3 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--display--d3);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1em;
  letter-spacing: -0.04em;
}

.typography--display--d4, .d4 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--display--d4);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1em;
  letter-spacing: -0.02em;
}

.typography--display--d5, .d5 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--display--d5);
  font-weight: var(--typography--font-weight--medium);
  line-height: 0.78em;
  letter-spacing: -0.02em;
}

/* Headings */
.typography--headings--h1, .h1 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--headings--h1);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1em;
  letter-spacing: -0.03em;
}

.typography--headings--h2, .h2 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--headings--h2);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1em;
  letter-spacing: -0.025em;
}

.typography--headings--h3, .h3 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--headings--h3);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.1em;
  letter-spacing: -0.02em;
}

.typography--headings--h4, .h4 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--headings--h4);
  font-weight: var(--typography--font-weight--bold);
  line-height: 1.1em;
  letter-spacing: -0.015em;
}

.typography--headings--h5, .h5 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--headings--h5);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.2em;
  letter-spacing: -0.01em;
}

.typography--headings--h6, .h6 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--headings--h6);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.2em;
  letter-spacing: -0.005em;
}

/* Body */
.typography--body--b1, .b1 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b1);
  font-weight: var(--typography--font-weight--regular);
  line-height: 1.5em;
  letter-spacing: 0;
}

.typography--body--b2, .b2 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b2);
  font-weight: var(--typography--font-weight--regular);
  line-height: 1.5em;
  letter-spacing: 0;
}

.typography--body--b3, .b3 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b3);
  font-weight: var(--typography--font-weight--regular);
  line-height: 1.5em;
  letter-spacing: 0;
}

.typography--body--b4, .b4 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b4);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.5em;
  letter-spacing: 0.005em;
}

.typography--body--b5, .b5 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b5);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.5em;
  letter-spacing: 0.01em;
}

/* Labels */
.typography--labels--l1, .l1 {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l1);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.2em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.typography--labels--l2, .l2 {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l2);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.2em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.typography--labels--l3, .l3 {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l3);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.2em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.typography--labels--l4, .l4 {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l4);
  font-weight: var(--typography--font-weight--semi-bold);
  line-height: 1.3em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.typography--labels--l5, .l5 {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l5);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.3em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.typography--labels--l6, .l6 {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l6);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.3em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   SIGNAL DOT — animated green status indicator
   ============================================================ */
.signal {
  position: relative;
  display: inline-block;
  width: 0.9rem; height: 0.9rem;
  border-radius: 50%;
  background: #46B07A;
  flex-shrink: 0;
}
.signal::before,
.signal::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 0.1rem solid #46B07A;
  animation: ripple 2.2s ease-out infinite;
}
.signal::after { animation-delay: 1.1s; }

@keyframes ripple {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  column-gap: 2.8rem;
  height: 8.0rem;
  box-sizing: border-box;
  padding: 0 var(--page-inset);
  border-bottom: 0.1rem solid var(--rule);
  position: sticky; top: 0;
  background: var(--bg);
  z-index: 130;
  backdrop-filter: blur(0.40rem);
  -webkit-backdrop-filter: blur(0.40rem);
}
.nav .nav-cta { grid-column: 3; }
.nav .nav-trigger { grid-column: 4; }

/* Logo */
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 3.9rem;
  width: auto;
  display: block;
}

/* Centered meta */
.nav-meta {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  font-family: var(--mono);
  font-size: var(--typography--font-sizes--labels--l6);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.nav-meta-sep {
  color: var(--accent);
  font-size: 1.4rem;
  line-height: 0;
}

/* CTA pill — Component 1 Variant 2 (exact Figma 103:2566) */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  height: 4.8rem;
  border: 0.1rem solid var(--rule);
  padding: 0 1.8rem !important;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l2);
  font-weight: var(--typography--font-weight--medium);
  letter-spacing: 0.054rem;
  line-height: 1.2rem;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 250ms var(--ease-power4-out), color 250ms var(--ease-power4-out), border-color 250ms var(--ease-power4-out);
}
.nav-cta:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nav-cta-arr {
  width: 0 !important;
  height: 1.8rem;
  opacity: 0;
  transform: scale(0);
  transform-origin: left bottom;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: width 250ms var(--ease-power4-out), opacity 200ms var(--ease-power4-out), transform 250ms var(--ease-power4-out), margin-left 250ms var(--ease-power4-out);
  vertical-align: middle;
  margin-left: 0 !important;
}
.nav-cta:hover .nav-cta-arr {
  width: 1.8rem !important;
  opacity: 1;
  transform: scale(1);
  margin-left: 0.8rem !important;
}
/* Component specific size updates for nav-cta arrow on hover with adjusted gaps */
.nav-cta.btn-xl:hover .nav-cta-arr { width: 2.0rem !important; margin-left: 0.8rem !important; }
.nav-cta.btn-l:hover .nav-cta-arr  { width: 1.8rem !important; margin-left: 0.8rem !important; }
.nav-cta.btn-m:hover .nav-cta-arr  { width: 1.6rem !important; margin-left: 0.8rem !important; }
.nav-cta.btn-s:hover .nav-cta-arr  { width: 1.4rem !important; margin-left: 0.6rem !important; }
.nav-cta.btn-xs:hover .nav-cta-arr { width: 1.2rem !important; margin-left: 0.5rem !important; }

/* Menu trigger */
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l2);
  font-weight: var(--typography--font-weight--medium);
  letter-spacing: 0.054rem;
  line-height: 1.2rem;
  text-transform: uppercase;
  padding: 0.8rem 0.4rem;
  cursor: pointer;
}
.nav-trigger-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 2.2rem;
}
.nav-trigger-bars i {
  display: block;
  height: 0.15rem;
  background: var(--ink);
  width: 100%;
  transition: width .25s;
}
.nav-trigger-bars i:nth-child(2) { width: 70%; align-self: flex-end; }
.nav-trigger:hover .nav-trigger-bars i:nth-child(2) { width: 100%; }

/* ============================================================
   FULLSCREEN MENU OVERLAY
   ============================================================ */
.menu-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 120;
  opacity: 1;
  transform: translateX(100%);
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.65s, visibility 0.5s step-end 0.65s;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.menu-overlay.open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s;
}
body.menu-open { overflow: hidden; }

.m-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 8.0rem;
  box-sizing: border-box;
  padding: 0 var(--page-inset);
  border-bottom: 0.1rem solid var(--rule);
  align-items: center;
  flex-shrink: 0;
}
.m-head .logo img {
  height: 3.9rem;
  width: auto;
  display: block;
}
.m-meta {
  font-family: var(--typography--typeface--decoration);
  font-weight: var(--typography--font-weight--medium);
  font-size: var(--typography--font-sizes--labels--l6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute);
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.m-close {
  width: 4.4rem; height: 4.4rem;
  border: 0.1rem solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: var(--typography--font-sizes--labels--l2);
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.m-close:hover {
  background: var(--ink);
  color: var(--bg);
  transform: rotate(90deg);
}
 
.m-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  align-items: stretch;
}
.m-list {
  border-right: 0.1rem solid var(--rule);
  display: flex;
  flex-direction: column;
}
.m-list a {
  display: grid;
  grid-template-columns: 9.6rem 1fr auto;
  align-items: center;
  gap: 3.2rem;
  padding: 2.8rem var(--page-inset);
  border-bottom: 0.1rem solid var(--rule-soft);
  font-family: var(--typography--typeface--communication);
  font-weight: var(--typography--font-weight--medium);
  font-size: var(--typography--font-sizes--display--d5);
  line-height: 0.78;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: background 250ms var(--ease-power4-out), color 250ms var(--ease-power4-out), padding-left 250ms var(--ease-power4-out);
}
.m-num {
  font-family: var(--typography--typeface--decoration);
  font-weight: var(--typography--font-weight--medium);
  font-size: var(--typography--font-sizes--labels--l3);
  letter-spacing: 0.04em;
  color: var(--mute);
  line-height: 1.2;
  align-self: center;
  transition: color 250ms var(--ease-power4-out);
}
.m-arr {
  display: block;
  width: 4.0rem;
  height: 4.0rem;
  opacity: 0;
  transform: scale(0) translateX(-1.2rem);
  transform-origin: left center;
  transition: opacity 250ms var(--ease-power4-out), transform 250ms var(--ease-power4-out), color 250ms var(--ease-power4-out);
  color: var(--mute);
}
.m-list a:hover {
  background: var(--ink);
  color: var(--accent);
  padding-left: 6.4rem;
  transition: background 250ms var(--ease-power4-out) 0ms, color 250ms var(--ease-power4-out) 0ms, padding-left 250ms var(--ease-power4-out) 125ms !important;
}
.m-list a:hover .m-num { color: rgba(244, 241, 234, 0.5); transition: color 250ms var(--ease-power4-out) 0ms !important; }
.m-list a:hover .m-arr { opacity: 1; transform: scale(1) translateX(0); color: var(--accent); transition: opacity 250ms var(--ease-power4-out) 250ms, transform 250ms var(--ease-power4-out) 250ms, color 250ms var(--ease-power4-out) 250ms !important; }
 
.m-aside {
  padding: 4.0rem var(--page-inset);
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}
.m-block h4 {
  font-family: var(--typography--typeface--decoration);
  font-weight: var(--typography--font-weight--medium);
  font-size: var(--typography--font-sizes--labels--l6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute);
  margin-bottom: 1.2rem;
}
.m-block p {
  font-family: var(--typography--typeface--decoration);
  font-weight: var(--typography--font-weight--medium);
  font-size: var(--typography--font-sizes--labels--l3);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: block;
  text-transform: uppercase;
}
.m-block a {
  font-family: var(--typography--typeface--decoration);
  font-weight: var(--typography--font-weight--medium);
  font-size: var(--typography--font-sizes--labels--l3);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: block;
  text-transform: uppercase;
  transition: color 250ms var(--ease-power4-out);
}
.m-block a:hover { color: var(--accent); }
 
.m-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: var(--accent);
  color: #fff;
  height: 6.4rem;
  padding: 0 2.4rem;
  font-family: var(--typography--typeface--decoration);
  font-weight: var(--typography--font-weight--medium);
  font-size: var(--typography--font-sizes--labels--l2);
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 0.1rem solid var(--accent);
  transition: background 250ms var(--ease-power4-out), border-color 250ms var(--ease-power4-out);
}
.m-cta:hover { background: var(--ink); border-color: var(--ink); }
.m-cta-arr {
  width: 3.2rem; height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  border-radius: 0 !important;
  font-size: 1.4rem;
}
.m-cta-arr svg {
  width: 100%;
  height: 100%;
  display: block;
}
 
.m-foot {
  border-top: 0.1rem solid var(--rule);
  padding: 1.8rem var(--page-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--typography--typeface--decoration);
  font-weight: var(--typography--font-weight--medium);
  font-size: var(--typography--font-sizes--labels--l6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute);
  flex-shrink: 0;
}
.m-status {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

/* ============================================================
   SECTION BASE
   24px breathing room above every divider, in addition to
   whatever bottom spacing the section's inner content sets.
   ============================================================ */
section {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2.40rem;
}
#services,
#process,
#work,
#studio {
  border-bottom: 0;
}
#process {
  padding-bottom: 8.8rem;
}

/* ============================================================
   SECTION HEADER — .sec-head
   12-column grid: group (num + h2) spans 7 cols, lede spans 3 cols from right
   ============================================================ */
.sec-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2.0rem;
  padding: 12.0rem var(--page-inset) 7.2rem;
  align-items: start;
}

/* Group container: sec-num + h2 side by side, spanning 7 columns from left */
.sec-head-group {
  grid-column: 1 / 8;
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
}

.sec-num {
  font-family: var(--typography--typeface--decoration);
  text-transform: uppercase;
  color: var(--mute);
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.60rem;
  padding-top: 0.60rem;
  flex-shrink: 0;
}
.sec-num strong {
  color: var(--ink);
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l1);
  font-weight: var(--typography--font-weight--medium);
  letter-spacing: 0.02em;
  line-height: 1.2em;
  display: inline-block;
}
.sec-num span {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l4);
  font-weight: var(--typography--font-weight--semi-bold);
  letter-spacing: 0.11rem;
  line-height: 1.3em;
}

.sec-head h2 {
  font-family: var(--typography--typeface--communication);
  font-weight: var(--typography--font-weight--medium);
  font-size: var(--typography--font-sizes--headings--h2);
  line-height: 1em;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.sec-head h2 .it,
.statement q .it,
.cta-h2 .cta-ac {
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}

/* Lede paragraph: 3 columns from the right */
.sec-lede {
  grid-column: 10 / 13;
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b2);
  font-weight: var(--typography--font-weight--regular);
  line-height: 1.5em;
  letter-spacing: 0;
  color: var(--ink-2);
  align-self: end;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  border-bottom: 0;
  padding-bottom: 0;
}
.hero-display {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: 2.7125rem;
  column-gap: 2.0rem;
  padding: 12.0rem var(--page-inset);
  position: relative;
  border-bottom: 0;
}

/* Eyebrow — spans 6 columns from the left */
.hero-eyebrow-row {
  grid-column: 1 / -1;
  overflow: visible;
  padding-left: 1.5rem;
  margin-left: -1.5rem;
}
.hero-eyebrow-row-inner {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.4rem 0.5rem 0.4rem 1.4rem;
  border: 1px solid #cccccc;
  border-radius: 999px;
  background: transparent;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l4);
  font-weight: var(--typography--font-weight--semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.112rem;
  line-height: 1.3em;
  color: var(--mute);
}
.hero-eyebrow .signal {
  position: relative;
  width: 0.9rem; height: 0.9rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.hero-eyebrow .signal::before {
  display: none !important;
}
.hero-eyebrow .signal::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: none !important;
  background: inherit !important;
  opacity: 0.4;
  animation: pulse-ripple 2s infinite ease-out;
}
@keyframes pulse-ripple {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
.hero-eyebrow .signal.open {
  background: #46B07A;
}
.hero-eyebrow .signal.open::after {
  background: #46B07A;
}
.hero-eyebrow .signal.closed {
  background: #FFAE00;
}
.hero-eyebrow .signal.closed::after {
  background: #FFAE00;
}

/* Visibility toggles for weekend vs weekday signals */
.hero-eyebrow-row-inner:not(.is-weekend) .weekend-only {
  display: none !important;
}
.hero-eyebrow-row-inner.is-weekend .open-closed-only {
  display: none !important;
}

/* Weekend lightning bolt icon with liquid fill animation */
.weekend-signal-icon {
  width: 1.45rem;
  height: 1.45rem;
  flex-shrink: 0;
}
.weekend-signal-icon .liquid-rect {
  transform-origin: bottom;
  animation: liquid-fill-height 3s infinite linear;
}
.weekend-signal-icon .bolt-fg {
  animation: liquid-fill-color 3s infinite linear;
}
@keyframes liquid-fill-height {
  0% {
    transform: translateY(32px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes liquid-fill-color {
  0% {
    fill: #EF4444;
  }
  20% {
    fill: #EF4444;
  }
  20.001% {
    fill: #FFAE00;
  }
  80% {
    fill: #FFAE00;
  }
  80.001% {
    fill: #46B07A;
  }
  100% {
    fill: #46B07A;
  }
}
.hero-eyebrow-group-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
}
.hero-eyebrow-sep {
  display: inline-block;
  width: 0.1rem;
  height: 1.4rem;
  background: var(--rule-soft);
  margin: 0 0.2rem;
  flex-shrink: 0;
}
.hero-eyebrow-loc {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l4);
  font-weight: var(--typography--font-weight--semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.112rem;
  line-height: 1.3em;
  color: var(--mute);
}
.hero-eyebrow-loc .weather-icon {
  width: 2.4rem;
  height: 2.4rem;
  transform: scale(1.3);
}
.time-switcher-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: linear-gradient(to bottom, #444444, #151515);
  border: 1px solid #cccccc;
  border-radius: 99px;
  padding: 0.4rem 0.8rem 0.4rem 1.2rem;
  flex-shrink: 0;
}
.closed-only {
  display: none !important;
}
.time-switcher-pill.is-closed .open-only {
  display: none !important;
}
.time-switcher-pill.is-closed .closed-only {
  display: inline !important;
}
.time-text {
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.072rem;
  color: #ece7dc;
}
.countdown-text {
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.072rem;
  color: #ffffff;
  text-transform: uppercase;
}
.switcher-sep {
  width: 0.1rem;
  height: 1.4rem;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.timezone-text {
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.072rem;
  color: rgba(255, 255, 255, 0.6);
}
.colon-blink {
  animation: colonBlink 1s infinite steps(2, start);
}
@keyframes colonBlink {
  to { opacity: 0; }
}


.hero-eyebrow-star {
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.hero-eyebrow-star svg {
  width: 1.1rem;
  height: 1.1rem;
  color: currentColor;
  display: block;
}

/* H1 — spans 6 columns from the left */
.hero-display h1 {
  grid-column: 1 / -1;
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--display--d1);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.0;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.hero-accent { color: var(--accent); }

/* Sub row */
.hero-sub-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2.0rem;
  padding: 10.4rem 0 4.8rem;
}
/* Sub-text — spans 5 columns from the right */
.hero-sub-inner {
  grid-column: 8 / 13;
  display: flex;
  flex-direction: column;
  gap: 2.0rem;
  width: 100%;
  max-width: 81.8rem;
}
.hero-sub {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b1);
  font-weight: var(--typography--font-weight--regular);
  line-height: 1.5em;
  letter-spacing: 0;
  color: var(--ink);
}
.hero-cta-circle {
  display: inline-flex;
  align-items: center;
  gap: 1.0rem;
  height: 6.4rem;
  border: 0.1rem solid var(--rule);
  padding: 0.9rem 2.3rem 0.9rem 2.5rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l2);
  font-weight: var(--typography--font-weight--medium);
  text-transform: uppercase;
  letter-spacing: 0.054rem;
  line-height: 1.2em;
  color: var(--ink);
  transition: background 250ms var(--ease-power4-out), color 250ms var(--ease-power4-out), border-color 250ms var(--ease-power4-out);
  align-self: flex-start;
}
.hero-cta-circle:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.hero-cta-circle .arr {
  width: 1.8rem; height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Demo reel */
.hero-reel {
  grid-column: 1 / -1;
  aspect-ratio: 1360 / 765;
  background: var(--paper);
  border: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.hero-reel video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.reel-label {
  position: absolute;
  top: 2.0rem; left: 2.0rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l6);
  font-weight: var(--typography--font-weight--medium);
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  line-height: 1.3em;
  color: var(--ink);
  background: var(--bg);
  padding: 0.6rem 1.2rem;
  border: 0.1rem solid var(--rule);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.reel-dot {
  display: inline-block;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.reel-corners > span {
  position: absolute;
  width: 1.8rem; height: 1.8rem;
  border: 0.1rem solid var(--ink);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.reel-corners > span:nth-child(1) { top: 2.0rem; right: 2.0rem; border-left: 0; border-bottom: 0; }
.reel-corners > span:nth-child(2) { bottom: 2.0rem; left: 2.0rem; border-right: 0; border-top: 0; }
.reel-corners > span:nth-child(3) { bottom: 2.0rem; right: 2.0rem; border-left: 0; border-top: 0; }
.reel-play {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.reel-btn {
  width: 9.6rem; height: 9.6rem;
  border-radius: 4.8rem;
  border: 0.1rem solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 250ms var(--ease-power4-out), color 250ms var(--ease-power4-out), border-color 250ms var(--ease-power4-out);
  overflow: hidden;
  cursor: pointer;
}
.reel-btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.reel-btn-text {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l6);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  transition: max-width 250ms var(--ease-power4-out), opacity 250ms var(--ease-power4-out), margin-left 250ms var(--ease-power4-out);
}
.text-play { display: inline-block; }
.text-pause { display: none; }

.hero-reel.playing .text-play { display: none; }
.hero-reel.playing .text-pause { display: inline-block; }

.reel-btn svg {
  width: 2.8rem;
  height: 2.8rem;
  color: var(--accent);
  transition: transform 250ms var(--ease-power4-out);
}
.reel-btn .icon-play {
  transform: translateX(0.4rem); /* Optically centered play icon (for 24x28px size) */
  display: block;
}
.reel-btn .icon-pause {
  display: none;
}
.hero-reel.playing .icon-play {
  display: none;
}
.hero-reel.playing .icon-pause {
  display: block;
}
.hero-reel:hover .reel-btn,
.reel-btn:hover {
  background: var(--ink);
  color: var(--bg);
}
.hero-reel:hover .reel-btn .icon-play,
.reel-btn:hover .icon-play {
  transform: scale(0.5) translateX(0.4rem);
}
.hero-reel:hover .reel-btn .icon-pause,
.reel-btn:hover .icon-pause {
  transform: scale(0.5);
}
.hero-reel:hover .reel-btn .reel-btn-text,
.reel-btn:hover .reel-btn-text {
  max-width: 6.0rem;
  opacity: 1;
  margin-left: 0.3rem;
}

.reel-meta {
  position: absolute;
  bottom: 3.2rem; right: 4.0rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l4);
  font-weight: var(--typography--font-weight--semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.112rem;
  line-height: 1.3em;
  color: var(--mute);
  z-index: 2;
  display: flex;
  gap: 1.4rem;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Show controls on hover of player container */
.hero-reel:hover .reel-label,
.hero-reel:hover .reel-corners > span,
.hero-reel:hover .reel-play,
.hero-reel:hover .reel-meta {
  opacity: 1;
  pointer-events: auto;
}

/* Hide overlays on hover if video is playing, unless just clicked */
.hero-reel.playing:hover .reel-label,
.hero-reel.playing:hover .reel-corners > span,
.hero-reel.playing:hover .reel-play,
.hero-reel.playing:hover .reel-meta {
  opacity: 0;
  pointer-events: none;
}

/* Force show overlays when just clicked */
.hero-reel.just-clicked .reel-label,
.hero-reel.just-clicked .reel-corners > span,
.hero-reel.just-clicked .reel-play,
.hero-reel.just-clicked .reel-meta {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.reel-meta-sep { opacity: 0.5; }

/* Hero strap */
.hero-strap {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 0.1rem solid var(--rule);
  min-height: 11.8rem;
}
.hero-strap > div {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  justify-content: center;
  padding: 2.0rem;
  border-right: 0.1rem solid var(--rule);
}
.hero-strap > div:last-child { border-right: 0; }
.strap-l {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l6);
  font-weight: var(--typography--font-weight--medium);
  text-transform: uppercase;
  color: var(--mute);
  letter-spacing: 0.072rem;
  line-height: 1.3em;
}
.strap-v {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b5);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.5em;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* ============================================================
   SERVICES
   ============================================================ */
#services {
  padding-bottom: 12.0rem;
}


.services {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0 var(--page-inset);
}
.svc {
  padding: 2.4rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  min-height: 38.0rem;
  position: relative;
  transition: background 250ms var(--ease-power4-out);
}
.svc:first-child {
  border-left: 1px solid var(--rule);
}
.svc:hover { background: var(--bg-2); }

.svc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l6);
  font-weight: var(--typography--font-weight--medium);
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  line-height: 1.3em;
}
.svc h3 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--headings--h6);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.2em;
  letter-spacing: -0.02rem;
  max-width: 35rem;
  color: var(--ink);
}

.svc-canvas {
  background: var(--paper);
  border: 1px solid var(--rule);
  aspect-ratio: 1 / 0.56;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.svc-specs {
  list-style: none;
  margin-top: auto;
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b5);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.5em;
  letter-spacing: 0.01rem;
  color: var(--ink-2);
}
.svc-specs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.60rem 0 0.70rem;
  border-top: 1px dashed rgba(26, 26, 26, 0.18);
}
.svc-specs li:last-child { border-bottom: 0; }
.svc-k {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l6);
  font-weight: var(--typography--font-weight--medium);
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  line-height: 1.3em;
}

/* ---- Service Artifacts (code-drawn) ---- */
.art-art {
  position: absolute; inset: 1.80rem;
  display: flex;
  flex-direction: column;
  gap: 0.80rem;
}
.art-art .bar { height: 1.60rem; background: var(--ink); }
.art-art .bar.s { height: 0.70rem; width: 60%; background: var(--ink-2); }
.art-art .grid {
  margin-top: 0.40rem;
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.80rem;
}
.art-art .gA { background: var(--accent); }
.art-art .gB {
  background: transparent;
  background-image:
    linear-gradient(to right, var(--rule-soft) 0.10rem, transparent 0.10rem),
    linear-gradient(to bottom, var(--rule-soft) 0.10rem, transparent 0.10rem);
  background-size: 1.40rem 1.40rem;
  border: 1px solid var(--rule-soft);
  position: relative;
}
.art-art .gB::after {
  content: "";
  position: absolute;
  inset: 30% 30% 30% 30%;
  border: 1px solid var(--ink);
}
.art-art .btns { display: flex; gap: 0.60rem; }
.art-art .btns i { height: 1.80rem; border-radius: 0; }
.art-art .btns i.p { width: 5.60rem; background: var(--ink); }
.art-art .btns i.g { width: 3.60rem; background: transparent; border: 1px solid var(--ink); }

/* Browser artifact */
.art-fe {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
}
.art-fe .chrome {
  display: flex;
  align-items: center;
  gap: 0.50rem;
  padding: 0.70rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.art-fe .chrome i {
  width: 0.80rem; height: 0.80rem;
  border-radius: 50%;
  background: var(--ink);
  opacity: .18;
}
.art-fe .chrome .url {
  margin-left: 0.80rem;
  flex: 1;
  height: 1.60rem;
  background: var(--bg-2);
  border: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--mute);
  padding: 0 0.80rem;
  display: flex;
  align-items: center;
  gap: 0.60rem;
}
.art-fe .chrome .url::before { content: "◆"; color: var(--accent); font-size: 0.80rem; }
.art-fe .page {
  flex: 1;
  padding: 1.40rem 1.40rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.60rem;
  position: relative;
}
.art-fe .page .topbar {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mute);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 0.50rem;
  margin-bottom: 0.40rem;
}
.art-fe .page .topbar b { color: var(--ink); }
.art-fe .page .h { height: 1.20rem; background: var(--ink); width: 70%; }
.art-fe .page .h.s { height: 0.50rem; background: var(--rule-soft); width: 84%; }
.art-fe .page .h.s2 { height: 0.50rem; background: var(--rule-soft); width: 62%; }
.art-fe .page .row2 { display: flex; gap: 0.60rem; margin-top: 0.60rem; flex: 1; }
.art-fe .page .row2 .ph {
  flex: 1; height: auto; min-height: 4.40rem;
  background: repeating-linear-gradient(135deg, var(--rule-soft) 0 0.10rem, transparent 0.10rem 0.70rem);
  border: 1px solid var(--rule-soft);
}
.art-fe .page .row2 .ph.acc { background: var(--accent); border-color: var(--accent); }
.art-fe .page .btn {
  position: absolute;
  right: 1.40rem; bottom: 1.40rem;
  padding: 0.60rem 1rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* DB schema artifact */
.art-be {
  position: absolute; inset: auto 1.80rem;
  height: 50%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.art-be .tbl {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
}
.art-be .tbl .h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.60rem 0.80rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.art-be .tbl .h .dot { width: 0.50rem; height: 0.50rem; border-radius: 50%; background: #46B07A; }
.art-be .tbl .f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding: 0.50rem 0.80rem;
  border-top: 1px dashed var(--rule-soft);
}
.art-be .tbl .f.pk .nm { color: var(--accent); font-weight: 600; }
.art-be .tbl .f.fk .nm { color: var(--ink); font-weight: 600; }
.art-be .tbl .f .ty { color: var(--mute); }
.art-be .wire {
  width: 3rem;
  position: relative;
  align-self: stretch;
}
.art-be .wire::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 0.10rem;
  border-top: 1.5px dashed var(--accent);
}
.art-be .wire::after {
  content: "→";
  position: absolute;
  right: -0.40rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.20rem;
}


/* ============================================================
   PROCESS
   ============================================================ */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 var(--page-inset);
}
.step {
  padding: 2.0rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-right: 0;
  min-height: 33.40rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.step:last-child {
  border-right: 1px solid var(--rule);
}

.step-num {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l6);
  font-weight: var(--typography--font-weight--medium);
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  line-height: 1.3em;
  margin-bottom: 2.0rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.step-circle {
  width: 1.80rem; height: 1.80rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.step h4, .step h3 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--headings--h6);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.2em;
  letter-spacing: -0.005em;
  margin-bottom: 1.60rem;
  max-width: 100%;
}
.step p {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b5);
  font-weight: var(--typography--font-weight--medium);
  color: var(--ink-2);
  line-height: 1.5em;
  letter-spacing: 0.01em;
  max-width: 100%;
}
.step-when {
  margin-top: auto;
  padding-top: 2.20rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l6);
  font-weight: var(--typography--font-weight--medium);
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  line-height: 1.3em;
  border-top: 1px dashed var(--rule-soft);
}
.step-when strong { color: var(--accent); font-weight: 600; }

.process-stepper-wrap {
  display: none;
}

/* ============================================================
   STATEMENT / PULL-QUOTE
   ============================================================ */
.statement {
  padding: 12.0rem var(--page-inset) 12.1rem;
  position: relative;
  border-bottom: 0;
}
.statement::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 11.1rem, var(--rule-soft) 11.1rem 11.2rem);
  pointer-events: none;
  opacity: .35;
}
.statement > * { position: relative; }

.statement-label {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l5);
  font-weight: var(--typography--font-weight--medium);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  line-height: 1.3em;
  color: var(--mute);
  margin-bottom: 3.60rem;
  display: flex;
  align-items: center;
  gap: 1.20rem;
}
.statement-label::before {
  content: "";
  width: 2.80rem;
  height: 0.10rem;
  background: var(--ink);
  flex-shrink: 0;
}

blockquote {
  quotes: none;
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--display--d4);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1em;
  letter-spacing: -0.02em;
  max-width: 16ch;
  text-wrap: balance;
}
blockquote::before {
  content: "\201C ";
  color: var(--accent);
  margin-right: .04em;
}
blockquote::after {
  content: " \201D";
  color: var(--accent);
}
blockquote .it {
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}

.statement-quote-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-items: flex-start;
}

.statement-quote-icon {
  width: 6.2rem;
  height: 5.6rem;
  color: var(--accent);
  display: block;
}

.statement blockquote {
  font-size: var(--typography--font-sizes--display--d3);
  letter-spacing: -0.04em !important;
  max-width: none;
}

.statement blockquote::before,
.statement blockquote::after {
  content: none !important;
  display: none !important;
}

.statement .statement-label {
  margin-bottom: 5.3rem;
}

.statement-sig-line {
  margin-top: 9.60rem;
  max-width: 96ch;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform-origin: left;
}

.statement-sig {
  display: grid;
  grid-template-columns: 1fr 0.85fr 1.15fr;
  gap: 4rem;
  padding-top: 2.50rem;
  max-width: 96ch;
}
.statement-sig .sig-em { font-weight: 700; color: var(--ink); }
.statement-sig div b {
  display: block;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l6);
  font-weight: var(--typography--font-weight--medium);
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  line-height: 1.3em;
  margin-bottom: 0.60rem;
}
.statement-sig div {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b5);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.5em;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

/* ============================================================
   WORK
   ============================================================ */
/* Work-specific sec-head overrides */
.work-sec-head { align-items: start; }
.work-title {
  display: flex;
  flex-direction: column;
  gap: 2.20rem;
}
.work-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l4);
  font-weight: var(--typography--font-weight--semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.11rem;
  line-height: 1.3em;
  color: var(--mute);
}
.work-eyebrow .sep { color: var(--rule-soft); }
.work-aside {
  grid-column: 10 / 13;
  display: flex;
  flex-direction: column;
  gap: 1.80rem;
  align-self: end;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.70rem 1.20rem 0.80rem;
  border: 1px solid var(--rule);
  border-radius: 99.90rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l5);
  font-weight: var(--typography--font-weight--medium);
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  line-height: 1.2em;
  color: var(--ink);
  background: var(--bg-2);
  cursor: pointer;
  transition: background 250ms var(--ease-power4-out), color 250ms var(--ease-power4-out);
}
.filter-pill:hover {
  background: var(--bg);
}
.filter-pill.active {
  background: var(--ink);
  color: var(--bg);
}

.contact-link-mono {
  font-family: var(--mono);
  font-size: var(--typography--font-sizes--labels--l3);
  font-weight: var(--typography--font-weight--medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: color 250ms var(--ease-power4-out);
  display: inline-block;
}
.contact-link-mono:hover {
  color: var(--accent);
}

.work-tag {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l3);
  font-weight: var(--typography--font-weight--medium);
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  line-height: 1.2em;
  color: var(--bg);
  background: var(--ink);
  padding: 0.70rem 1.50rem 0.70rem 1.10rem;
  width: fit-content;
}
.work-tag .work-tag-sep { color: var(--mute-2); font-weight: 400; }
.work-tag .sep { color: var(--rule-soft); font-weight: 400; }
.work-tag-dot {
  position: relative;
  width: 0.70rem;
  height: 0.70rem;
  border-radius: 50%;
  background: #FF3B30;
  flex-shrink: 0;
}
.work-tag-dot::before,
.work-tag-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.1rem solid #FF3B30;
  animation: work-tag-ripple 2.2s ease-out infinite;
}
.work-tag-dot::after {
  animation-delay: 1.1s;
}

@keyframes work-tag-ripple {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(3.5); opacity: 0; }
}
.sep { color: var(--rule-soft); }

/* Work grid */
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.0rem; /* 2.0rem vertical and horizontal gap */
  padding: 4.0rem var(--page-inset) 12.0rem;
}
.work-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  position: relative;
  cursor: pointer;
  transition: background 250ms var(--ease-power4-out);
  text-decoration: none;
  color: inherit;
}
.work-card:hover                     { background: var(--bg-2); }

.work-thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.thumb-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--rule-soft) 0.10rem, transparent 0.10rem),
    linear-gradient(to bottom, var(--rule-soft) 0.10rem, transparent 0.10rem);
  background-size: 2.40rem 2.40rem;
}
.thumb-corners > span {
  position: absolute;
  width: 1.40rem; height: 1.40rem;
  border: 1px solid var(--ink);
}
.thumb-corners > span:nth-child(1) { top: 1.40rem; left: 1.40rem; border-right: 0; border-bottom: 0; }
.thumb-corners > span:nth-child(2) { top: 1.40rem; right: 1.40rem; border-left: 0; border-bottom: 0; }
.thumb-corners > span:nth-child(3) { bottom: 1.40rem; left: 1.40rem; border-right: 0; border-top: 0; }
.thumb-corners > span:nth-child(4) { bottom: 1.40rem; right: 1.40rem; border-left: 0; border-top: 0; }
.thumb-label {
  position: absolute;
  top: 1.40rem; left: 1.40rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l4);
  font-weight: var(--typography--font-weight--semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.11rem;
  line-height: 1.3em;
  background: var(--ink);
  color: var(--bg);
  padding: 0.30rem 0.80rem;
  z-index: 2;
}
.thumb-label--live { background: var(--accent); }
.thumb-ph {
  position: absolute; inset: 4rem;
  background: repeating-linear-gradient(135deg, var(--rule-soft) 0 0.10rem, transparent 0.10rem 0.90rem);
  border: 1px solid var(--rule-soft);
}
.thumb-center {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mute);
  font-family: var(--mono);
  font-size: var(--typography--font-sizes--labels--l6);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.thumb-center:has(img) {
  color: transparent !important;
}
.thumb-img-brief,
.thumb-img-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s var(--ease-out);
}
.thumb-img-hero {
  opacity: 0;
  z-index: 1;
}
.work-card:hover .thumb-img-hero {
  opacity: 1 !important;
}

/* Unified 600ms view transition animations and duration */
@keyframes fade-out-page {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in-page {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fix mix-blend-mode glitches on root transitions */
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal !important;
}
::view-transition-image-pair(root) {
  isolation: isolate;
}

/* Global 600ms view transition duration */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 600ms !important;
}

::view-transition-old(root) {
  animation: 600ms ease-in forwards fade-out-page;
}
::view-transition-new(root) {
  opacity: 0;
  animation: 600ms ease-in-out forwards fade-in-page;
}

/* Remove container border strokes, fills, and overlays when an image or video is present */
.ph-block:has(img),
.ph-block:has(video) {
  border: none !important;
  background: transparent !important;
}
.ph-block:has(img)::before,
.ph-block:has(img)::after,
.ph-block:has(video)::before,
.ph-block:has(video)::after {
  display: none !important;
}
.ph-block img,
.ph-block video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Remove container borders from hero-image-wrap when populated with an image or video */
.hero-image-wrap:has(img),
.hero-image-wrap:has(video) {
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: none !important;
}

.thumb-center--offset {
  inset: auto 0 3.40rem 0;
  height: auto;
}
.thumb-center--offset span {
  background: var(--bg);
  padding: 0.40rem 0.80rem;
}

.work-meta {
  padding: 3.60rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.80rem 1.60rem;
  align-items: baseline;
  flex-grow: 1;
  grid-template-rows: auto auto 1fr auto;
}
.work-meta-l {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l5);
  font-weight: var(--typography--font-weight--medium);
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  line-height: 1.3em;
  grid-column: 1 / -1;
}
.work-meta-l-dt { display: block; }
.work-meta-l-m { display: none; }
.work-meta h4, .work-meta h3 {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--headings--h6);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.2em;
  letter-spacing: -0.005em;
  max-width: none;
  margin-top: 0.40rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-idx {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l6);
  font-weight: var(--typography--font-weight--medium);
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  line-height: 1.3em;
}
.work-meta p {
  grid-column: 1 / -1;
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b5);
  font-weight: var(--typography--font-weight--medium);
  color: var(--ink-2);
  line-height: 1.5em;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-stat {
  grid-column: 1 / -1;
  margin-top: 0.80rem;
  border-top: 1px dashed var(--rule-soft);
  padding-top: 1rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l6);
  font-weight: var(--typography--font-weight--medium);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.07rem;
  line-height: 1.3em;
  display: flex;
  align-items: center;
  gap: 0.80rem;
}
.work-stat::before { content: "▲"; font-size: 0.90rem; }

.m-br {
  display: none;
}

/* Work card — Tablet/Phone variant (max-width: 1199px) */
@media (max-width: 1199px) {
  .work-meta { padding: 1.60rem; }
  .work-meta-l-dt { display: none; }
  .work-meta-l-m {
    display: flex;
    flex-wrap: wrap;
    gap: 0.80rem;
    align-items: center;
  }
  .work-meta h4, .work-meta h3 {
    max-width: none;
  }
}

/* ============================================================
   TEAM
   ============================================================ */
 .team {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: 0 var(--page-inset);
  gap: 1.667rem;
  margin-bottom: 8.0rem;
}
.team-card {
  grid-column: span 3;
  padding: 1.333rem 1.333rem 0.333rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.667rem;
}
.team-ptop {
  display: flex;
  flex-direction: column;
  gap: 1.333rem;
}
.team-portrait {
  width: 10.583rem;
  height: 12.667rem;
  background: repeating-linear-gradient(135deg, var(--rule-soft) 0 0.10rem, transparent 0.10rem 0.90rem);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.team-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-portrait:has(img) {
  background: none;
}
.team-portrait:has(img)::before,
.team-portrait:has(img)::after {
  display: none !important;
}
.team-portrait::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--rule-soft) 0.10rem, transparent 0.10rem),
    linear-gradient(to bottom, var(--rule-soft) 0.10rem, transparent 0.10rem);
  background-size: 2.0rem 2.0rem;
}
.team-portrait::after {
  content: attr(data-cap);
  position: absolute;
  left: 0.667rem; bottom: 0.667rem;
  font-family: var(--typography--typeface--decoration);
  font-size: 1.0rem;
  font-weight: var(--typography--font-weight--medium);
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  line-height: 1.3em;
}
.team-info {
  display: flex;
  flex-direction: column;
  gap: 1.333rem;
}
.team-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.583rem;
}
.team-card h3 {
  font-family: var(--typography--typeface--communication);
  font-size: 3.333rem;
  font-weight: var(--typography--font-weight--medium);
  letter-spacing: -0.015em;
  line-height: 1.1em;
}
.team-role {
  font-family: var(--typography--typeface--decoration);
  font-size: 1.333rem;
  font-weight: var(--typography--font-weight--medium);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  line-height: 1.2em;
}
.team-bio {
  font-family: var(--typography--typeface--communication);
  font-size: 1.5rem;
  font-weight: var(--typography--font-weight--regular);
  line-height: 1.5em;
  color: var(--ink-2);
}
.team-specs {
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.team-specs > div {
  padding: 1.0rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--typography--typeface--communication);
  font-size: 1.167rem;
  font-weight: var(--typography--font-weight--medium);
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.5em;
  text-transform: uppercase;
}
.team-specs > div:last-child {
  border-bottom: 0;
}
.team-specs b {
  display: block;
  font-family: var(--typography--typeface--decoration);
  font-size: 1.0rem;
  font-weight: var(--typography--font-weight--medium);
  color: var(--mute);
  letter-spacing: 0.06rem;
  line-height: 1.3em;
}



/* ============================================================
   FAQ
   ============================================================ */
#faq {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2.0rem;
  padding: 0 var(--page-inset) 6.667rem;
  border-bottom: 1px solid var(--rule);
}

#faq .sec-head {
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6.333rem 0 4.667rem !important;
  margin: 0;
}

#faq .faq-outer-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.6rem;
}

#faq .faq-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.0rem;
}

#faq .faq-sec-num {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.667rem;
  padding-top: 0.5rem;
}

#faq .faq-sec-num-large {
  font-family: var(--mono);
  font-weight: var(--typography--font-weight--medium);
  font-size: 4.0rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--ink);
}

#faq .faq-sec-num-label {
  font-family: var(--mono);
  font-weight: var(--typography--font-weight--semi-bold);
  font-size: 1.167rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: var(--mute);
  text-transform: uppercase;
}

#faq .faq-title {
  font-family: var(--sans);
  font-weight: var(--typography--font-weight--medium);
  font-size: 5.667rem;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--accent);
  margin: 0;
}

#faq .faq-title-sub {
  color: var(--ink);
}

#faq .faq-lede-group {
  align-self: flex-start;
}

#faq .sec-lede {
  grid-column: auto;
  max-width: 100%;
  margin: 0;
  font-family: var(--sans);
  font-size: 1.667rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.faq-content {
  grid-column: 6 / span 7;
  padding: 10.667rem 0 0;
}

.faq-list {
  grid-column: auto;
}

.faq-item {
  border-top: 1px solid var(--rule);
  transition: background-color 250ms var(--ease-power4-out);
}

.faq-item:first-child {
  border-top: none;
}

.faq-item:hover {
  background-color: var(--bg-2);
}

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  background: none;
  border: none;
  padding: 3.333rem 2.0rem;
  cursor: pointer;
  font-family: var(--typography--typeface--communication);
  color: var(--ink);
  outline: none;
  transition: padding 0.25s ease;
}

.faq-trigger:focus-visible {
  background-color: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.faq-q-text {
  font-family: var(--sans);
  font-size: 2.667rem;
  font-weight: var(--typography--font-weight--medium);
  flex-grow: 1;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--ink);
  transition: color 0.3s ease;
}

.faq-icon {
  position: relative;
  width: 21px;
  height: 21px;
  margin-left: 2.0rem;
  flex-shrink: 0;
}

.faq-icon-line {
  position: absolute;
  background-color: var(--ink);
  transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
}

.faq-icon-h {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.faq-icon-v {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

/* Expanded state icon */
.faq-trigger[aria-expanded="true"] .faq-icon-v {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq-trigger[aria-expanded="true"] .faq-icon-h {
  background-color: var(--accent);
}

.faq-trigger[aria-expanded="true"] .faq-q-text {
  color: var(--accent);
}

.faq-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: max-height;
}

.faq-panel-inner {
  padding: 0 2.0rem 3.333rem;
}

.faq-panel-inner p {
  font-family: var(--typography--typeface--communication);
  font-size: 1.667rem;
  font-weight: var(--typography--font-weight--regular);
  line-height: 1.5;
  color: var(--ink-2);
}

.faq-mail-link {
  color: var(--ink);
  text-decoration: underline;
  font-weight: 500;
  transition: color 250ms var(--ease-power4-out);
}

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

@media (max-width: 1199px) {
  #faq {
    padding-bottom: 8.0rem;
  }
  
  #faq .sec-head {
    grid-column: span 12;
    padding: 0 0 3.2rem !important;
  }

  #faq .faq-outer-group {
    gap: 2rem;
  }

  #faq .faq-title-group {
    gap: 2.4rem;
  }

  #faq .faq-sec-num-large {
    font-size: 3.2rem;
  }

  #faq .faq-sec-num-label {
    font-size: 1.3rem;
  }

  #faq .faq-title {
    font-size: 6.4rem;
  }

  #faq .sec-lede {
    margin: 0;
    font-size: 1.8rem;
  }

  #faq .faq-content {
    grid-column: span 12;
    padding-top: 0;
  }

  .faq-trigger {
    padding: 4.0rem 0;
  }

  .faq-q-text {
    font-size: 2.4rem;
  }

  .faq-panel-inner {
    padding: 0 0 4.0rem;
  }

  .faq-panel-inner p {
    font-size: 1.8rem;
  }
}

@media (max-width: 767px) {
  #faq {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 1.6rem;
    padding-bottom: 6.4rem;
  }

  #faq .sec-head {
    grid-column: span 6;
    padding: 0 0 3.2rem !important;
  }

  #faq .faq-outer-group {
    gap: 2.4rem;
  }

  #faq .faq-title-group {
    gap: 3.2rem;
  }

  #faq .faq-sec-num-large {
    font-size: 2.4rem;
  }

  #faq .faq-title {
    font-size: 4.4rem;
  }

  #faq .sec-lede {
    margin: 0;
    font-size: 1.6rem;
  }

  #faq .faq-content {
    grid-column: span 6;
  }

  .faq-trigger {
    padding: 2.4rem 0;
  }

  .faq-q-text {
    font-size: 2.0rem;
  }

  .faq-panel-inner {
    padding: 0 0 2.4rem;
  }

  .faq-panel-inner p {
    font-size: 1.6rem;
  }
}

/* ============================================================
   CONTACT / CTA
   ============================================================ */
.cta {
  padding: 12.0rem var(--page-inset) 12.1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--ink);
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 0.10rem, transparent 0.10rem),
    linear-gradient(to bottom, rgba(255,255,255,.05) 0.10rem, transparent 0.10rem);
  background-size: 3.20rem 3.20rem;
  pointer-events: none;
}
.cta > * { position: relative; }

.cta-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l4);
  font-weight: var(--typography--font-weight--semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.11rem;
  line-height: 1.3em;
  opacity: .7;
  margin-bottom: 8.0rem;
}
.cta-h2 {
  font-family: var(--typography--typeface--communication);
  font-weight: var(--typography--font-weight--medium);
  font-size: var(--typography--font-sizes--display--d4);
  line-height: 1em;
  letter-spacing: -0.02em;
  max-width: 18ch;
  text-wrap: balance;
}
.cta-ac { color: var(--accent); font-style: normal; font-weight: 500; }

.cta-actions {
  margin-top: 5.6rem;
  display: grid;
  grid-template-columns: auto auto;
  gap: 1.6rem;
  justify-content: start;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  height: 5.60rem;
  padding: 1.70rem 2.30rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l2);
  font-weight: var(--typography--font-weight--medium);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  line-height: 1.2em;
  transition: transform 250ms var(--ease-power4-out);
  gap: 0 !important;
}
.btn-primary .arr {
  width: 0 !important;
  height: 1.80rem;
  opacity: 0;
  transform: scale(0);
  transform-origin: left bottom;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: width 250ms var(--ease-power4-out), opacity 200ms var(--ease-power4-out), transform 250ms var(--ease-power4-out), margin-left 250ms var(--ease-power4-out);
  vertical-align: middle;
  margin-left: 0 !important;
}
.btn-primary:hover .arr {
  width: 1.80rem !important;
  opacity: 1;
  transform: scale(1);
  margin-left: 0.80rem !important;
}
/* Component-specific size updates for primary button arrow on hover with adjusted gaps */
.btn-primary.btn-xl:hover .arr { width: 2rem !important; margin-left: 0.80rem !important; }
.btn-primary.btn-l:hover .arr  { width: 1.80rem !important; margin-left: 0.80rem !important; }
.btn-primary.btn-m:hover .arr  { width: 1.60rem !important; margin-left: 0.80rem !important; }
.btn-primary.btn-s:hover .arr  { width: 1.40rem !important; margin-left: 0.60rem !important; }
.btn-primary.btn-xs:hover .arr { width: 1.20rem !important; margin-left: 0.50rem !important; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: transparent;
  color: var(--bg);
  height: 5.60rem;
  padding: 1.70rem 2.30rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l2);
  font-weight: var(--typography--font-weight--medium);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  line-height: 1.2em;
  border: 1px solid var(--bg);
  transition: background 250ms var(--ease-power4-out), color 250ms var(--ease-power4-out), border-color 250ms var(--ease-power4-out);
}
.btn-ghost:hover { background: var(--bg); color: #0F0F0F !important; border-color: var(--bg); }

.cta-bot {
  margin-top: 9.60rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.40rem;
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 2.90rem;
}
.cta-lbl {
  opacity: .6;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l4);
  font-weight: var(--typography--font-weight--semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.11rem;
  line-height: 1.3em;
  margin-bottom: 0.80rem;
}
.cta-bot > div > div:last-child {
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b4);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.5em;
  letter-spacing: 0.005em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  padding: 8rem 0 3.20rem;
  padding-left: var(--page-inset);
  padding-right: var(--page-inset);
  border-top: 1px solid var(--rule);
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2.40rem;
  padding: 0 0 5.6rem;
  border-bottom: 1px solid var(--rule);
}
.foot-brand-col {
  grid-column: 1 / span 5;
  padding-right: 9.60rem;
}
.foot-grid > div:nth-child(2) {
  grid-column: 9 / span 2;
}
.foot-grid > div:nth-child(3) {
  grid-column: 11 / span 2;
}
.foot-brand { width: fit-content; max-width: 50.56rem; min-width: 40.96rem; }
.foot-logo {
  display: block;
  height: 5.60rem;
  width: auto;
}
.foot-sub {
  font-family: var(--typography--typeface--communication);
  font-size: 1.6rem;
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.5em;
  letter-spacing: 0.08px;
  color: var(--ink-2);
  margin-top: 1.80rem;
}
.foot h5, .foot h3 {
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l3);
  font-weight: var(--typography--font-weight--medium);
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  line-height: 1.2em;
  margin-bottom: 2.0rem;
}
.foot a {
  display: block;
  padding: 0.40rem 0;
  font-family: var(--typography--typeface--communication);
  font-size: var(--typography--font-sizes--body--b5);
  font-weight: var(--typography--font-weight--medium);
  line-height: 1.5em;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  transition: color 250ms var(--ease-power4-out);
}
.foot a:hover { color: var(--accent); }
.foot-baseline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding: 2.8rem 0 0.2rem;
  font-family: var(--typography--typeface--decoration);
  font-size: var(--typography--font-sizes--labels--l5);
  font-weight: var(--typography--font-weight--medium);
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.078rem;
  line-height: 1.3em;
}
.foot-baseline span:nth-child(2) {
  text-align: center;
}
.foot-baseline span:last-child {
  text-align: right;
}

/* ============================================================
   RESPONSIVE — single breakpoint at 1199px
   ============================================================ */
@media (max-width: 1199px) {
  /* Generic Section Headers */
  .sec-head {
    grid-template-columns: 1fr;
    row-gap: 2.40rem;
    padding: 4.0rem var(--page-inset) 4.0rem;
  }
  .sec-head-group {
    grid-column: 1 / -1;
    flex-direction: column;
  }
  .sec-head .sec-num {
    margin-bottom: 2.40rem;
  }
  .sec-lede { grid-column: 1 / -1; align-self: auto; }
  .work-aside { grid-column: 1 / -1; }
  
  /* Section Spacings & Paddings */
  #services { padding-bottom: 4.0rem; }
  #process { padding-bottom: 4.0rem; }
  #process .sec-head { padding-top: 4.0rem; }
  .statement { padding: 4.0rem var(--page-inset); }
  .statement-quote-icon {
    width: 4.4rem !important;
    height: 4.0rem !important;
  }
  .statement .statement-label {
    margin-bottom: 4.0rem !important;
  }
  .cta { padding: 4.0rem var(--page-inset); }
  .foot { padding: 6.0rem var(--page-inset) 4.0rem; }

  /* Hero Section */
  .hero-display { padding: 5.6rem var(--page-inset) 4.0rem !important; }
  .hero-eyebrow-row {
    grid-column: 1 / -1;
    margin-bottom: -1.1rem !important;
  }
  .hero-eyebrow-row-inner {
    flex-wrap: wrap !important;
    gap: 1.2rem 1.6rem !important;
  }
  .hero-eyebrow,
  .hero-eyebrow-loc,
  .time-switcher-pill {
    font-size: 1.2rem !important;
    gap: 0.8rem !important;
    letter-spacing: 0.112rem !important;
    flex-wrap: wrap !important;
  }
  .hero-display h1 {
    grid-column: 1 / -1;
    font-size: var(--typography--font-sizes--display--d2) !important;
  }
  .hero-sub-row { padding: 1.6rem 0 4.8rem; }
  .hero-sub-inner { grid-column: 1 / -1; gap: 2.4rem !important; }
  .hero-strap {
    min-height: 9.4rem !important;
  }
  .hero-strap > div {
    padding: 1.6rem 2.5rem 1.6rem 2.4rem !important;
  }
  .hero-strap > div:last-child {
    padding: 1.6rem 2.4rem !important;
  }

  /* Services Grid & Cards (Stacking Scroll) */
  .services {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 50vh !important;
    padding-bottom: 0 !important;
  }
  .svc {
    position: sticky !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 38.0rem !important;
    padding: 2.4rem !important;
    gap: 2.8rem !important;
    background: var(--bg) !important;
    border: 1px solid var(--rule) !important;
    box-sizing: border-box !important;
    transform-origin: top center !important;
    transition: background .25s !important;
  }
  .svc:nth-child(1) {
    top: var(--sticky-top, max(calc(64px + var(--page-inset)), calc((100svh - var(--card-h, 56.0rem)) / 2 - 2.0rem))) !important;
  }
  .svc:nth-child(2) {
    top: calc(var(--sticky-top, max(calc(64px + var(--page-inset)), calc((100svh - var(--card-h, 56.0rem)) / 2 - 2.0rem))) + var(--stack-gap, 4.0rem)) !important;
  }
  .svc:nth-child(3) {
    top: calc(var(--sticky-top, max(calc(64px + var(--page-inset)), calc((100svh - var(--card-h, 56.0rem)) / 2 - 2.0rem))) + calc(var(--stack-gap, 4.0rem) * 2)) !important;
  }

  /* Process Grid */
  .process { grid-template-columns: 1fr 1fr; }
  .step {
    border-bottom: 0;
    border-right: 0;
  }
  .step:nth-child(2n) {
    border-right: 1px solid var(--rule);
  }
  .step:nth-child(n+3) {
    border-bottom: 1px solid var(--rule);
  }

  /* Statement Signature */
  .statement-sig-line {
    margin-top: 3.60rem;
  }
  .statement-sig {
    margin-top: 0;
  }

  /* Work Grid & Header Bottom Padding */
  #work .sec-head { padding-bottom: 0; }
  .work-grid {
    padding: 4.0rem var(--page-inset) 4.0rem;
  }

  /* Team Grid & Card Layout (Tablet & Mobile base) */
  .team {
    grid-template-columns: repeat(12, 1fr);
    padding: 0 var(--page-inset);
    gap: 2.0rem;
    margin-bottom: 8.0rem;
  }
  .team-card {
    grid-column: span 6;
    padding: 1.6rem 1.6rem 0.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between !important;
    gap: 3.2rem;
  }
  .team-ptop {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }
  .team-portrait {
    width: 12.7rem;
    height: 15.2rem;
  }
  .team-info {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }
  .team-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .team-card h3 {
    font-size: 4.0rem;
  }
  .team-role {
    font-size: 1.5rem;
  }
  .team-bio {
    font-size: 1.6rem;
  }
  .team-specs {
    display: flex;
    flex-direction: column;
  }
  .team-specs > div {
    padding: 1.2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--rule-soft);
  }
  .team-specs > div:last-child {
    border-bottom: 0;
  }

  /* CTA Bottom */
  .cta-bot {
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 5.60rem;
  }

  /* Footer Grid */
  .foot {
    padding: 60px 24px 40px !important;
  }

  .foot-grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    column-gap: 20px !important;
    row-gap: 48px !important;
    border-bottom: 1px solid var(--rule) !important;
    padding-bottom: 48px !important;
  }

  .foot-brand-col {
    grid-column: 1 / span 6 !important;
    grid-row: 1 !important;
    padding-right: 0 !important;
  }

  .foot-brand {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .foot-sub {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 14px !important;
    line-height: 20px !important;
    margin-top: 24px !important;
  }

  .foot h5, .foot h3 {
    font-size: 12px !important;
    line-height: 11px !important;
    margin-bottom: 20px !important;
  }

  .foot a {
    font-size: 12px !important;
    line-height: 12px !important;
    margin-bottom: 12px !important;
  }

  .foot-grid > div:nth-child(2) {
    grid-column: 8 / span 2 !important;
    grid-row: 1 !important;
  }

  .foot-grid > div:nth-child(3) {
    grid-column: 11 / span 2 !important;
    grid-row: 1 !important;
  }

  .foot-baseline {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    column-gap: 20px !important;
    border-top: 0 !important;
    padding-top: 24px !important;
    margin-top: 0 !important;
    font-size: 12px !important;
  }

  .foot-baseline span:first-child {
    grid-column: 1 / span 4 !important;
    text-align: left !important;
  }

  .foot-baseline span:nth-child(2) {
    grid-column: 5 / span 4 !important;
    text-align: center !important;
  }

  .foot-baseline span:last-child {
    grid-column: 9 / span 4 !important;
    text-align: right !important;
  }

  /* Navigation Overlay Menu */
  .m-grid { grid-template-columns: 1.1fr 1fr; }
  .m-list { border-right: 0.1rem solid var(--rule); border-bottom: 0; }
  .m-list a {
    padding: 2.8rem 2.4rem 2.9rem;
    grid-template-columns: 6.0rem 1fr auto;
    gap: 2.4rem;
  }
  .m-aside {
    padding: 4.0rem 2.4rem;
    gap: 3.2rem;
  }
  .m-cta {
    height: 5.6rem;
  }
  .m-cta .m-cta-arr {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.25rem;
  }
  .m-head, .m-foot { padding-left: var(--page-inset); padding-right: var(--page-inset); }
}

@media (max-width: 767px) {
  .m-br {
    display: inline !important;
  }
  .statement-quote-line {
    display: inline !important;
  }

  body {
    position: relative !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Hero Section Mobile Redesign */
  .hero-display {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.7125rem !important;
    padding: 5.6rem 1.6rem 6.4rem 1.6rem !important;
  }

  .hero-eyebrow-row {
    margin-bottom: 0.8rem !important;
  }
  .hero-eyebrow-row-inner {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    align-self: flex-start !important;
    gap: 0.8rem !important;
    padding: 0.3rem 0.4rem 0.3rem 1.0rem !important;
    border: 1px solid #cccccc !important;
    border-radius: 999px !important;
    background: transparent !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-eyebrow-group-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-shrink: 1 !important;
  }

  .hero-eyebrow-sep {
    display: inline-block !important;
    margin: 0 !important;
    height: 1.0rem !important;
  }

  .hero-eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 1.0rem !important;
    font-family: var(--mono) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05rem !important;
    text-transform: uppercase !important;
    color: var(--mute) !important;
  }

  .hero-eyebrow .signal {
    width: 0.7rem !important;
    height: 0.7rem !important;
  }

  .weekend-signal-icon {
    width: 1.15rem !important;
    height: 1.15rem !important;
  }

  .hero-eyebrow-loc {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 1.0rem !important;
    font-family: var(--mono) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05rem !important;
    text-transform: uppercase !important;
    color: var(--mute) !important;
  }

  .hero-eyebrow-loc .weather-icon {
    width: 1.8rem !important;
    height: 1.8rem !important;
  }

  .time-switcher-pill {
    margin-top: 0 !important;
    padding: 0.3rem 0.6rem !important;
    gap: 0.4rem !important;
  }

  .time-switcher-pill #switcherTime {
    font-size: 1.0rem !important;
  }

  .time-switcher-pill .countdown-text {
    font-size: 1.0rem !important;
  }

  .time-switcher-pill .switcher-sep {
    height: 1.0rem !important;
  }

  .time-switcher-pill .timezone-text {
    font-size: 1.0rem !important;
  }

  .hero-eyebrow-star {
    display: flex !important;
    width: 0.8rem !important;
    height: 0.8rem !important;
  }

  .hero-display h1 {
    font-size: 6.0rem !important;
    line-height: 1.0 !important;
    letter-spacing: -0.05em !important;
    text-wrap: wrap !important;
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }

  .hero-sub-row {
    padding: 0 !important;
  }

  .hero-sub-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.4rem !important;
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
  }

  .hero-sub {
    font-size: var(--typography--font-sizes--body--b1) !important;
  }

  .hero-display .hero-cta {
    height: 5.6rem !important;
    width: 100% !important;
    padding-left: 2.5rem !important;
    padding-right: 2.3rem !important;
    font-size: 1.8rem !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: stretch !important;
  }

  .hero-display .hero-cta .nav-cta-arr {
    width: 1.8rem !important;
    height: 1.8rem !important;
    margin-left: 1.0rem !important;
  }

  .hero-reel {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border: none !important;
    margin: 0 !important;
  }

  .hero-reel video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .reel-btn {
    width: 5.6rem !important;
    height: 5.6rem !important;
    border-radius: 50% !important;
    border: 0.1rem solid var(--ink) !important;
    background: var(--bg) !important;
    color: var(--accent) !important;
    padding-left: 0.4rem !important;
  }
  .reel-btn svg {
    width: 1.633rem !important;
    height: 1.633rem !important;
    color: var(--accent) !important;
  }
  .reel-btn .icon-play {
    transform: none !important;
  }
  .reel-btn .icon-pause {
    transform: none !important;
  }
  .hero-reel:hover .reel-btn .icon-play,
  .reel-btn:hover .icon-play {
    transform: none !important;
  }
  .hero-reel:hover .reel-btn .icon-pause,
  .reel-btn:hover .icon-pause {
    transform: none !important;
  }
  .reel-btn-text {
    display: none !important;
  }
  .reel-label {
    left: 1.3rem !important;
    top: 1.3rem !important;
    font-size: var(--typography--font-sizes--labels--l6) !important;
    letter-spacing: 0.072rem !important;
  }
  .reel-meta {
    bottom: 1.3rem !important;
    right: 1.3rem !important;
    font-size: var(--typography--font-sizes--labels--l4) !important;
    letter-spacing: 0.104rem !important;
  }
  .reel-corners > span:nth-child(1) {
    top: 1.3rem !important;
    right: 1.3rem !important;
  }
  .reel-corners > span:nth-child(2) {
    bottom: 1.3rem !important;
    left: 1.3rem !important;
  }
  .reel-corners > span:nth-child(3) {
    bottom: 1.3rem !important;
    right: 1.3rem !important;
  }
  .hero-reel.playing .reel-btn {
    background: var(--rule) !important;
    border: none !important;
    color: var(--accent) !important;
    padding-left: 0 !important;
  }
  .hero-reel.playing .reel-btn .icon-pause {
    width: 2.4rem !important;
    height: 2.4rem !important;
    color: var(--accent) !important;
    transform: none !important;
  }

  .hero-reel:not(.playing) .reel-label,
  .hero-reel:not(.playing) .reel-corners > span,
  .hero-reel:not(.playing) .reel-play,
  .hero-reel:not(.playing) .reel-meta {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .hero-reel.playing .reel-label,
  .hero-reel.playing .reel-corners > span,
  .hero-reel.playing .reel-play,
  .hero-reel.playing .reel-meta {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
  }

  .hero-reel.just-clicked .reel-label,
  .hero-reel.just-clicked .reel-corners > span,
  .hero-reel.just-clicked .reel-play,
  .hero-reel.just-clicked .reel-meta {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .hero-strap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border: 1px solid var(--rule) !important;
  }

  .hero-strap > div {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    padding: 1.6rem 1.7rem 1.7rem 1.6rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
  }

  .hero-strap > div:last-child {
    border-bottom: 0 !important;
    padding: 1.6rem !important;
  }

  .hero-strap .strap-l {
    font-size: 1.2rem !important;
  }

  .hero-strap .strap-v {
    font-size: 1.4rem !important;
  }

  /* Generic Section Headers */
  .sec-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.4rem !important;
    padding: 0 1.6rem 4.0rem !important;
  }

  .sec-head-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 3.2rem !important;
    grid-column: 1 / -1 !important;
  }

  .sec-head .sec-num {
    margin-bottom: 0 !important;
    padding-top: 0.6rem !important;
  }

  /* Services Section Mobile Redesign & Spacing */
  #services {
    padding-bottom: 6.4rem !important;
  }

  #services .sec-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.4rem !important;
    padding: 0 1.6rem 4.0rem !important;
  }

  #services .sec-head-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 3.2rem !important;
  }

  #services .sec-num {
    padding-top: 0.6rem !important;
  }

  /* Process Section Spacing */
  #process {
    padding-bottom: 0 !important;
  }

  /* Statement Section Spacing */
  .statement {
    padding: 6.4rem 1.6rem !important;
  }
  .statement::before {
    background-image: repeating-linear-gradient(0deg, transparent 0 4.70rem, var(--rule-soft) 4.70rem 4.80rem) !important;
  }
  .statement-quote-icon {
    width: 3.5rem !important;
    height: 3.2rem !important;
  }
  .statement .statement-label {
    margin-bottom: 3.6rem !important;
  }

  /* Work Section Header overrides */
  .work-sec-head {
    padding: 0 1.6rem !important;
    row-gap: 5.6rem !important;
  }

  .work-sec-head .sec-head-group {
    gap: 3.2rem !important;
  }

  .work-sec-head .work-title {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
  }

  .work-sec-head .work-aside {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
  }

  /* Studio Section Spacing */
  #studio {
    padding-bottom: 0 !important;
  }

  /* CTA Mobile Redesign */
  .cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 6.4rem 1.6rem !important;
    background: var(--ink) !important;
    border-bottom: 1px solid var(--rule) !important;
  }

  .cta-top {
    font-family: var(--mono) !important;
    font-weight: 600 !important;
    font-size: var(--typography--font-sizes--labels--l4) !important;
    line-height: 1.3em !important;
    letter-spacing: 0.112rem !important;
    text-transform: uppercase !important;
    color: var(--bg) !important;
    opacity: 1 !important;
    margin-bottom: 3.2rem !important;
  }

  .cta-h2 {
    font-family: var(--sans) !important;
    font-weight: 500 !important;
    font-size: var(--typography--font-sizes--display--d4) !important;
    line-height: 1.0 !important;
    letter-spacing: -0.04em !important;
    color: var(--bg) !important;
    margin-bottom: 4.0rem !important;
  }

  .cta-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.4rem !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 5.6rem !important;
  }

  .cta-actions .btn-primary,
  .cta-actions .btn-ghost {
    width: 100% !important;
    height: 5.6rem !important;
    font-size: var(--typography--font-sizes--labels--l2) !important;
    font-weight: 500 !important;
    letter-spacing: 0.054rem !important;
    justify-content: center !important;
  }

  .cta-actions .btn-primary .arr {
    display: inline-flex !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
    margin-left: 0.8rem !important;
  }

  .cta-bot {
    margin-top: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    padding-top: 2.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2.4rem !important;
    width: 100% !important;
  }

  .cta-lbl {
    font-family: var(--mono) !important;
    font-weight: 600 !important;
    font-size: var(--typography--font-sizes--labels--l4) !important;
    letter-spacing: 0.112rem !important;
    color: var(--bg) !important;
    opacity: 0.6 !important;
    margin-bottom: 0.7rem !important;
  }

  .cta-bot > div > div:last-child {
    font-family: var(--sans) !important;
    font-weight: 500 !important;
    font-size: var(--typography--font-sizes--body--b4) !important;
    letter-spacing: 0.008rem !important;
    line-height: 1.5em !important;
    color: var(--bg) !important;
  }

  .svc {
    padding: 1.6rem !important;
    gap: 1.6rem !important;
  }

  .svc h3 {
    font-size: 3.2rem !important;
    letter-spacing: -0.015em !important;
    line-height: 1.2 !important;
    max-width: 28.0rem !important;
  }

  .svc:nth-child(1) .svc-canvas {
    aspect-ratio: 311 / 230 !important;
    height: auto !important;
    max-height: none !important;
    padding: 1.6rem !important;
  }

  .svc:nth-child(2) .svc-canvas {
    aspect-ratio: 311 / 230 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0.1rem !important;
  }

  .svc:nth-child(3) .svc-canvas {
    aspect-ratio: 311 / 230 !important;
    height: auto !important;
    max-height: none !important;
    padding: 1.6rem !important;
  }

  .svc-specs li {
    padding: 0.7rem 0 0.6rem !important;
  }

  .svc-k {
    font-size: 1.2rem !important;
  }

  .svc-specs li span:last-child {
    font-size: 1.4rem !important;
  }

  /* Work Grid Mobile Collapse */
  .work-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding: 4.0rem var(--page-inset) 6.4rem !important;
  }

  /* CTA Bottom Mobile Collapse (Handled above in CTA Mobile Redesign) */

  .foot-baseline {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    text-align: center;
  }
  .foot-baseline span:nth-child(2) {
    text-align: center;
  }
  .foot-baseline span:last-child {
    text-align: center;
  }

  /* Navigation menu mobile overrides */
  .menu-overlay {
    height: 100vh;
    height: 100dvh;
    left: 0 !important;
    right: 0 !important;
  }
  .m-head {
    height: 6.4rem;
    height: 64px; /* Fixed physical height to prevent fluid scaling issues */
    padding: 0 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent header from shrinking when overlay overflows */
  }
  .m-head .logo img {
    height: 3.2rem !important;
  }
  .m-meta {
    display: flex !important;
    align-items: center !important;
    gap: 1.4rem !important;
  }
  .m-meta span {
    font-family: var(--mono) !important;
    font-size: var(--typography--font-sizes--labels--l6) !important;
    letter-spacing: 0.072rem !important;
    text-transform: uppercase !important;
    color: var(--mute) !important;
  }
  .m-meta-num {
    display: none !important;
  }
  .m-close {
    width: 2.4rem !important;
    height: 2.4rem !important;
    border: 0.1rem solid var(--ink) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    padding: 0 !important;
  }
  .m-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .m-list {
    border-right: 0;
    border-bottom: 0.1rem solid var(--rule);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 25.0rem;
  }
  .m-list a {
    flex: 1;
    min-height: 5.0rem;
    height: auto;
    padding: 0 1.6rem;
    display: flex;
    align-items: center;
    gap: 2.4rem;
    border-bottom: 0.1rem solid var(--rule-soft);
  }
  .m-list a:hover {
    background: transparent !important;
    color: var(--ink) !important;
    padding-left: 1.6rem !important;
  }
  .m-list a:hover .m-num {
    color: var(--mute) !important;
  }
  .m-arr {
    display: none !important;
  }
  .m-aside {
    flex: 1;
    min-height: 30.0rem;
    padding: 2.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.4rem;
  }
  .m-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem 1.2rem;
    align-items: start;
    width: 100%;
  }
  .m-block h4 {
    grid-column: 1;
    grid-row: 1 / -1;
    margin-bottom: 0;
  }
  .m-block p,
  .m-block a {
    grid-column: 2;
    text-align: right;
    justify-self: end;
  }
  .m-cta {
    height: 5.6rem;
    padding: 0 2.5rem;
    margin-top: 0;
    flex-shrink: 0;
  }
  .m-cta .m-cta-arr {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.25rem;
  }
  .m-foot {
    display: none !important;
  }

  /* Mobile closed nav overrides */
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 6.4rem;
    height: 64px; /* Enforce fixed physical height matching Figma and preventing fluid scaling layout tests mismatch */
    padding: 0 1.6rem;
    box-sizing: border-box;
  }
  .nav-meta {
    display: none !important;
  }
  .nav .logo img {
    height: 3.2rem !important;
  }
  .nav .nav-cta {
    display: none;
  }
  .nav-trigger-label {
    display: none;
  }
  .nav-trigger-bars i:nth-child(2) {
    width: 100% !important;
    align-self: auto !important;
  }

  /* Mobile Process Section Sticky Scroll Redesign */
  #process {
    position: relative !important;
    height: 250vh !important;
    padding-bottom: 6.4rem !important;
  }

  #process .sec-head {
    padding: 0 0 2.4rem !important;
  }

  #process .sec-num {
    padding-top: 0 !important;
  }

  .process .step h4 br, .process .step h3 br {
    display: none !important;
  }

  .process-sticky-wrapper {
    position: sticky !important;
    top: calc(6.4rem + 1.6rem) !important; /* 64px navbar + 16px offset = 80px */
    display: flex !important;
    flex-direction: column !important;
    gap: 2.4rem !important;
    padding: 0 1.6rem 0 !important;
    box-sizing: border-box !important;
  }

  .process-stepper-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
    width: 100% !important;
  }

  .process-stepper-track {
    height: 0.4rem !important;
    background: rgba(26, 26, 26, 0.18) !important;
    width: 100% !important;
    position: relative !important;
  }

  .process-stepper-fill {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    background: var(--accent) !important;
    width: 0%; /* Start from zero */
  }

  .process-stepper-labels {
    display: flex !important;
    justify-content: space-between !important;
    font-family: var(--mono) !important;
    font-size: 1.2rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--mute) !important;
  }

  .process-stepper-labels span {
    transition: color 0.35s ease !important;
  }

  .process {
    position: relative !important;
    width: 100% !important;
    height: 24.0rem; /* Fallback height before JS runs */
    display: block !important;
    grid-template-columns: none !important;
    padding: 1.6rem !important;
    border: 1px solid var(--rule) !important;
    background: var(--bg) !important; /* solid theme background */
    box-sizing: border-box !important;
    transition: height 0.35s ease !important; /* smooth height transition */
  }

  .process .step {
    position: absolute !important;
    left: 1.6rem !important;
    top: 1.6rem !important;
    right: 1.6rem !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important; /* Reset baseline min-height to fit content */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
    pointer-events: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .process .step.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .process .step-when {
    margin-top: 2.0rem !important;
    padding-top: 1.6rem !important;
    border-top: 1px dashed var(--rule-soft) !important;
  }

  /* Mobile Team Section Redesign */
  .team {
    grid-template-columns: 1fr !important;
    margin-bottom: 6.4rem !important;
  }
  .team-card {
    grid-column: span 12 !important;
    padding: 1.6rem !important;
  }
  .team-ptop {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.6rem !important;
    align-items: flex-start !important;
    margin-bottom: 0 !important;
  }
  .team-portrait {
    width: 12.7rem !important;
    height: 15.2rem !important;
    aspect-ratio: 127 / 152 !important;
  }
  .team-role {
    font-size: 1.4rem !important;
  }
  .team-bio {
    font-size: 1.5rem !important;
    margin-bottom: 0 !important;
  }

  /* Mobile Footer Redesign */
  .foot {
    padding: 4.0rem 0 3.2rem !important;
  }

  .foot-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: 2.0rem !important;
    row-gap: 3.2rem !important;
    padding: 0 1.6rem 3.3rem !important;
    border-bottom: 1px solid var(--rule) !important;
  }

  .foot-brand-col {
    grid-column: 1 / span 4 !important;
    grid-row: 1 !important;
    padding-right: 0 !important;
  }

  .foot-grid > div:nth-child(2) {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
  }

  .foot-grid > div:nth-child(3) {
    grid-column: 3 / span 2 !important;
    grid-row: 2 !important;
  }

  .foot-brand {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .foot-logo {
    height: 4.8rem !important;
  }

  .foot-sub {
    font-size: 1.6rem !important;
    letter-spacing: 0.008rem !important;
    line-height: 1.5em !important;
    margin-top: 1.675rem !important;
  }

  .foot h5, .foot h3 {
    font-size: 1.6rem !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 1.6rem !important;
  }

  .foot a {
    font-size: 1.4rem !important;
    letter-spacing: 0.01em !important;
    line-height: 1.5em !important;
    padding: 0.4rem 0 !important;
  }

  .foot-baseline {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.4rem !important;
    align-items: center !important;
    padding: 2.8rem 4.0rem 0 !important;
    text-align: center !important;
    border-top: 0 !important;
    margin-top: 0 !important;
  }

  .foot-baseline span {
    grid-column: auto !important;
    grid-row: auto !important;
    text-align: center !important;
    font-size: 1.3rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  .foot-baseline span:nth-child(2) {
    text-align: center !important;
  }

  .foot-baseline span:last-child {
    text-align: center !important;
  }

  .grid-overlay {
    left: 0 !important;
    right: 0 !important;
  }
}


/* Height-based media query adjustments for shorter viewports to prevent layout overflow in mobile menu */
@media (max-width: 767px) and (max-height: 740px) {
  .m-aside {
    min-height: 24.0rem;
    padding: 1.8rem 1.6rem;
    gap: 1.6rem;
  }
  .m-block {
    gap: 0.4rem 1.2rem;
  }
  .m-list {
    min-height: 20.0rem;
  }
  .m-list a {
    min-height: 4.0rem;
    gap: 1.8rem;
  }
  .m-cta {
    height: 4.8rem;
    padding: 0 2.0rem;
  }
  .m-cta .m-cta-arr {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 767px) and (max-height: 640px) {
  .m-aside {
    min-height: 20.0rem;
    padding: 1.2rem 1.6rem;
    gap: 1.2rem;
  }
  .m-block {
    gap: 0.2rem 1.2rem;
  }
  .m-list {
    min-height: 18.0rem;
  }
  .m-list a {
    min-height: 3.6rem;
    font-size: 3.2rem !important; /* Scale down link text slightly for very short screens */
    gap: 1.2rem;
  }
  .m-cta {
    height: 4.0rem;
    padding: 0 1.6rem;
  }
  .m-cta .m-cta-arr {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.0rem;
  }
}


@media (max-width: 640px) {
  :root { --page-inset: 1.6rem; }

  .process { grid-template-columns: 1fr; }
  .step {
    border-right: 1px solid var(--rule);
    border-bottom: 0;
  }
  .step:last-child {
    border-bottom: 1px solid var(--rule);
  }


  .statement blockquote {
    max-width: 100% !important;
    letter-spacing: -0.04em !important;
  }

  .statement blockquote br {
    display: none !important;
  }

  .statement blockquote::before {
    display: none !important;
  }

  .statement-sig-line {
    margin-top: 3.6rem !important;
  }
  .statement-sig {
    grid-template-columns: 1fr !important;
    gap: 2.4rem !important;
    margin-top: 0 !important;
  }
  /* CTA Bottom and Footer Collapse (Handled in max-width: 767px block) */



  /* Mobile Closed Nav & Menu Overrides are now unified under the max-width: 767px block */
  .hero-eyebrow-row-inner {
    flex-wrap: wrap;
  }
}

/* ============================================================
   COMPONENT BUTTON SIZING
   ============================================================ */
/* XL: 64px */
.btn-primary.btn-xl, .btn-ghost.btn-xl, .nav-cta.btn-xl, .m-cta.btn-xl {
  height: 6.40rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: var(--typography--font-sizes--labels--l2) !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* L: 56px */
.btn-primary.btn-l, .btn-ghost.btn-l, .nav-cta.btn-l, .m-cta.btn-l {
  height: 5.60rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: var(--typography--font-sizes--labels--l2) !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* M: 48px */
.btn-primary.btn-m, .btn-ghost.btn-m, .nav-cta.btn-m, .m-cta.btn-m {
  height: 4.80rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: var(--typography--font-sizes--labels--l3) !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* S: 40px */
.btn-primary.btn-s, .btn-ghost.btn-s, .nav-cta.btn-s, .m-cta.btn-s {
  height: 4rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: var(--typography--font-sizes--labels--l4) !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* XS: 36px */
.btn-primary.btn-xs, .btn-ghost.btn-xs, .nav-cta.btn-xs, .m-cta.btn-xs {
  height: 3.60rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: var(--typography--font-sizes--labels--l5) !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Scaling internal button elements */
.btn-xl .m-cta-arr { width: 3.60rem !important; height: 3.60rem !important; font-size: 1.40rem !important; }
.btn-l .m-cta-arr { width: 3.20rem !important; height: 3.20rem !important; font-size: 1.25rem !important; }
.btn-m .m-cta-arr { width: 3.20rem !important; height: 3.20rem !important; font-size: 1.20rem !important; }
.btn-s .m-cta-arr { width: 2.60rem !important; height: 2.60rem !important; font-size: 1rem !important; }
.btn-xs .m-cta-arr { width: 2.20rem !important; height: 2.20rem !important; font-size: 0.90rem !important; }

/* Padding overrides specifically for nav-cta sizes */
.nav-cta.btn-xl { padding-left: 2.60rem !important; padding-right: 2.60rem !important; }
.nav-cta.btn-l  { padding-left: 2.20rem !important; padding-right: 2.20rem !important; }
.nav-cta.btn-m  { padding-left: 1.80rem !important; padding-right: 1.80rem !important; }
.nav-cta.btn-s  { padding-left: 1.40rem !important; padding-right: 1.40rem !important; }
.nav-cta.btn-xs { padding-left: 1.20rem !important; padding-right: 1.20rem !important; }

.btn-xl .nav-cta-arr { height: 2rem !important; }
.btn-xl:hover .nav-cta-arr { width: 2rem !important; }
.btn-l .nav-cta-arr { height: 1.80rem !important; }
.btn-l:hover .nav-cta-arr { width: 1.80rem !important; }
.btn-m .nav-cta-arr { height: 1.60rem !important; }
.btn-m:hover .nav-cta-arr { width: 1.60rem !important; }
.btn-s .nav-cta-arr { height: 1.40rem !important; }
.btn-s:hover .nav-cta-arr { width: 1.40rem !important; }
.btn-xs .nav-cta-arr { height: 1.20rem !important; }
.btn-xs:hover .nav-cta-arr { width: 1.20rem !important; }

.btn-xl .arr { height: 2rem !important; }
.btn-xl:hover .arr { width: 2rem !important; }
.btn-l .arr { height: 1.80rem !important; }
.btn-l:hover .arr { width: 1.80rem !important; }
.btn-m .arr { height: 1.60rem !important; }
.btn-m:hover .arr { width: 1.60rem !important; }
.btn-s .arr { height: 1.40rem !important; }
.btn-s:hover .arr { width: 1.40rem !important; }
.btn-xs .arr { height: 1.20rem !important; }
.btn-xs:hover .arr { width: 1.20rem !important; }

/* Responsive overrides for hero-cta (.nav-cta) based on breakpoint specifications:
   1. Mobile (<768px): L (56px)
   2. Tablet (768px - 1199px): M (48px)
   3. Desktop small (1200px - 1919px): L (56px)
   4. Desktop large (1920px+): XL (64px)
*/

/* Mobile default: L (56px), full container width */
.hero-display .hero-cta {
  height: 5.6rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: var(--typography--font-sizes--labels--l2) !important;
  padding-left: 2.2rem !important;
  padding-right: 2.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}
.hero-display .hero-cta .nav-cta-arr {
  height: 1.8rem !important;
}
.hero-display .hero-cta:hover .nav-cta-arr {
  width: 1.8rem !important;
  margin-left: 0.8rem !important;
}

/* Tablet (768px - 1199px): M (48px), hug content */
@media (min-width: 768px) {
  .hero-display .hero-cta {
    height: 4.8rem !important;
    font-size: 1.6rem !important;
    padding-left: 2.1rem !important;
    padding-right: 1.9rem !important;
    display: inline-flex !important;
    width: auto !important;
    align-self: flex-start !important;
  }
  .hero-display .hero-cta .nav-cta-arr {
    height: 1.8rem !important;
  }
  .hero-display .hero-cta:hover .nav-cta-arr {
    width: 1.8rem !important;
    margin-left: 0.8rem !important;
  }
}

/* Desktop small (1200px - 1919px): L (56px), hug content & layout overrides */
@media (min-width: 1200px) {
  #faq .faq-outer-group {
    position: sticky;
    top: calc(8.0rem + 40px);
  }

  .hero-display .hero-cta {
    height: 6.4rem !important;
    font-size: var(--typography--font-sizes--labels--l2) !important;
    padding-left: 2.5rem !important;
    padding-right: 2.3rem !important;
    display: inline-flex !important;
    width: auto !important;
    align-self: flex-start !important;
  }
  .hero-display .hero-cta .nav-cta-arr {
    height: 1.8rem !important;
  }
  .hero-display .hero-cta:hover .nav-cta-arr {
    width: 1.8rem !important;
    margin-left: 1.0rem !important;
  }

  /* Layout and Spacing overrides matching Figma */
  .hero-display {
    padding: 9.6rem var(--page-inset) 6.0rem !important;
  }
  .hero-display h1 {
    grid-column: 1 / 11;
    font-size: calc(8.0vw - 0.4rem) !important;
  }
  .hero-sub {
    font-size: calc(1.25vw - 0.05rem) !important;
  }
  .hero-sub-row {
    padding: 10.4rem 0 4.8rem;
  }
  .hero-sub-inner {
    grid-column: 8 / 13 !important;
    max-width: 81.8rem;
  }
  
  .sec-head {
    row-gap: 4.0rem;
  }
  .sec-head-group {
    grid-column: 1 / 10;
  }
  
  #process {
    padding-bottom: 8.8rem;
  }

  /* Services Viewport-Constrained overrides */
  #services {
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding-top: 8.0rem !important;
    padding-bottom: 4.0rem !important;
  }
  #services .sec-head {
    padding-top: 0 !important;
    padding-bottom: 4.0rem !important;
    row-gap: 2.8rem !important;
  }
  .services {
    gap: 2.0rem !important;
  }
  .svc {
    padding: 3.2rem 2.0rem 4.0rem !important;
    gap: 2.8rem !important;
    max-height: calc(100vh - 27.0rem) !important;
    border: 1px solid var(--rule) !important;
  }
  .svc-canvas {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 373 / 310 !important;
    max-height: calc(100vh - 62.0rem) !important;
  }
  .svc h3 {
    max-width: 28.0rem !important;
    font-size: var(--typography--font-sizes--headings--h6) !important;
    line-height: 1.2 !important;
  }
  .svc-specs {
    font-size: var(--typography--font-sizes--body--b5) !important;
  }
  .svc-specs li {
    padding: 0.6rem 0 0.7rem !important;
  }

  /* Mockup illustration scaling on desktop */
  .art-art {
    inset: 1.8rem !important;
    gap: 0.8rem !important;
  }
  .art-art .bar {
    height: 1.6rem !important;
  }
  .art-art .bar.s {
    height: 0.7rem !important;
    width: 60% !important;
  }
  .art-art .grid {
    margin-top: 0.4rem !important;
    gap: 0.8rem !important;
  }
  .art-art .btns {
    gap: 0.6rem !important;
  }
  .art-art .btns i {
    height: 1.8rem !important;
  }
  .art-art .btns i.p {
    width: 5.6rem !important;
  }
  .art-art .btns i.g {
    width: 3.6rem !important;
  }

  .art-fe .chrome {
    padding: 0.7rem 1.0rem !important;
    gap: 0.5rem !important;
  }
  .art-fe .chrome i {
    width: 0.8rem !important;
    height: 0.8rem !important;
  }
  .art-fe .chrome .url {
    margin-left: 0.8rem !important;
    height: 1.6rem !important;
    font-size: 0.95rem !important;
    padding: 0 0.8rem !important;
    gap: 0.6rem !important;
  }
  .art-fe .chrome .url::before {
    font-size: 0.8rem !important;
  }
  .art-fe .page {
    padding: 1.4rem 1.4rem 0 !important;
    gap: 0.6rem !important;
  }
  .art-fe .page .topbar {
    font-size: 0.85rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.4rem !important;
  }
  .art-fe .page .h {
    height: 1.2rem !important;
    width: 70% !important;
  }
  .art-fe .page .h.s {
    height: 0.5rem !important;
    width: 84% !important;
  }
  .art-fe .page .h.s2 {
    height: 0.5rem !important;
    width: 62% !important;
  }
  .art-fe .page .row2 {
    margin-top: 0.6rem !important;
    gap: 0.6rem !important;
    flex: 1 !important;
  }
  .art-fe .page .row2 .ph {
    height: auto !important;
  }
  .art-fe .page .btn {
    right: 1.4rem !important;
    bottom: 1.4rem !important;
    padding: 0.6rem 1.0rem !important;
    font-size: 0.9rem !important;
  }

  .art-be {
    inset: auto 1.8rem !important;
    height: 50% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    gap: 1.0rem !important;
  }
  .art-be .tbl {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    font-size: 0.9rem !important;
  }
  .art-be .tbl .h {
    padding: 0.6rem 0.8rem !important;
    font-size: 0.9rem !important;
  }
  .art-be .tbl .h .dot {
    width: 0.5rem !important;
    height: 0.5rem !important;
  }
  .art-be .tbl .f {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex: 1 !important;
    padding: 0.5rem 0.8rem !important;
  }
  .art-be .wire {
    width: 3.0rem !important;
  }

  .cta-top {
    margin-bottom: 5.6rem;
  }
  .cta-bot {
    margin-top: 5.6rem;
  }
  .cta-actions {
    gap: 1.675rem;
  }

  .team-card {
    padding: 2.4rem;
  }
  .team-card h3 {
    font-size: 4.0rem;
  }

  /* Work Section horizontal sticky scroll overrides */
  #work {
    position: relative;
    padding-top: 8.0rem !important;
    padding-bottom: 0 !important;
  }
  .work-sticky-wrapper {
    position: sticky;
    --wrapper-h: min(calc(100vh - 8.0rem - 1.6rem), 72.0rem);
    top: max(calc(8.0rem + 1.6rem), calc((100vh - var(--wrapper-h)) / 2)) !important;
    height: var(--wrapper-h) !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    overflow-y: hidden !important;
    box-sizing: border-box;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .work-sec-head {
    padding: 0 var(--page-inset) 4rem !important;
    flex-shrink: 0 !important;
  }
  .work-sec-head .sec-num {
    padding-top: 0 !important;
  }
  .work-sec-head .work-title {
    padding-top: 0.80rem !important;
    gap: 1rem !important;
  }
  .work-sec-head .sec-head-group {
    gap: 2.4rem !important;
  }
  .work-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    width: max-content !important;
    overflow-x: visible !important;
    overflow-y: hidden !important;
    gap: 2rem !important;
    padding-left: var(--page-inset) !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: stretch !important;
    scrollbar-width: none !important;
    will-change: transform;
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .work-grid::-webkit-scrollbar {
    display: none !important;
  }
  .work-card {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    width: var(--card-w, 56.0rem) !important;
    max-width: 60.0rem !important;
    opacity: 1 !important;
    transform: none !important;
    transition: background 240ms var(--ease-out) !important;
  }
  .work-card:last-child {
    margin-right: var(--page-inset) !important;
  }
  .work-card .work-thumb {
    aspect-ratio: 16 / 9 !important;
  }
  .work-card .thumb-grid-bg {
    background-size: calc(2.4rem * var(--card-scale, 1)) calc(2.4rem * var(--card-scale, 1)) !important;
  }
  .work-card .thumb-corners > span {
    width: calc(1.4rem * var(--card-scale, 1)) !important;
    height: calc(1.4rem * var(--card-scale, 1)) !important;
  }
  .work-card .thumb-corners > span:nth-child(1) { top: calc(2.4rem * var(--card-scale, 1)) !important; left: calc(2.4rem * var(--card-scale, 1)) !important; }
  .work-card .thumb-corners > span:nth-child(2) { top: calc(2.4rem * var(--card-scale, 1)) !important; right: calc(2.4rem * var(--card-scale, 1)) !important; }
  .work-card .thumb-corners > span:nth-child(3) { bottom: calc(2.4rem * var(--card-scale, 1)) !important; left: calc(2.4rem * var(--card-scale, 1)) !important; }
  .work-card .thumb-corners > span:nth-child(4) { bottom: calc(2.4rem * var(--card-scale, 1)) !important; right: calc(2.4rem * var(--card-scale, 1)) !important; }
  .work-card .thumb-label {
    top: calc(2.4rem * var(--card-scale, 1)) !important;
    left: calc(2.4rem * var(--card-scale, 1)) !important;
    font-size: max(var(--min-desktop-rem), calc(1.3rem * var(--card-scale, 1))) !important;
    padding: calc(0.3rem * var(--card-scale, 1)) calc(0.8rem * var(--card-scale, 1)) !important;
    letter-spacing: calc(0.112rem * var(--card-scale, 1)) !important;
  }
  .work-card .thumb-center {
    font-size: max(var(--min-desktop-rem), calc(1.1rem * var(--card-scale, 1))) !important;
  }
  .work-card .work-meta {
    padding: calc(2.0rem * var(--card-scale, 1)) !important;
    gap: calc(0.8rem * var(--card-scale, 1)) calc(1.6rem * var(--card-scale, 1)) !important;
    flex-grow: 1 !important;
    grid-template-rows: auto auto 1fr auto !important;
  }
  .work-card .work-meta-l {
    font-size: max(var(--min-desktop-rem), calc(1.3rem * var(--card-scale, 1))) !important;
    letter-spacing: calc(0.078rem * var(--card-scale, 1)) !important;
  }
  .work-card .work-meta h4, .work-card .work-meta h3 {
    font-size: max(var(--min-desktop-rem), calc(2.8rem * var(--card-scale, 1))) !important;
    margin-top: calc(0.4rem * var(--card-scale, 1)) !important;
  }
  .work-card .work-idx {
    font-size: max(var(--min-desktop-rem), calc(1.2rem * var(--card-scale, 1))) !important;
    letter-spacing: calc(0.072rem * var(--card-scale, 1)) !important;
  }
  .work-card .work-meta p {
    font-size: max(12px, calc(1.4rem * var(--card-scale, 1))) !important;
  }
  .work-card .work-stat {
    font-size: max(var(--min-desktop-rem), calc(1.2rem * var(--card-scale, 1))) !important;
    letter-spacing: calc(0.072rem * var(--card-scale, 1)) !important;
    margin-top: calc(0.8rem * var(--card-scale, 1)) !important;
    padding-top: calc(1.0rem * var(--card-scale, 1)) !important;
    gap: calc(0.8rem * var(--card-scale, 1)) !important;
  }
  .work-card .work-stat::before {
    font-size: calc(0.9rem * var(--card-scale, 1)) !important;
  }
}


/* Height-based adjustments for viewport-constrained desktop layouts */
@media (min-width: 1200px) and (max-height: 1000px) {
  html {
    font-size: 10px !important;
  }
  :root {
    --min-desktop-rem: 1.1rem !important;
    --min-desktop-12px-rem: 1.2rem !important;
  }
  #services {
    padding-top: 3.2rem !important;
    padding-bottom: 3.2rem !important;
  }
  #services .sec-head {
    padding-bottom: 4.0rem !important;
    row-gap: 2.0rem !important;
  }
  .svc-canvas {
    max-height: 32.0rem !important;
  }
  .svc {
    padding: 2.8rem 2.0rem 3.2rem !important;
    gap: 2.0rem !important;
  }
}

@media (min-width: 1200px) and (max-height: 880px) {
  html {
    font-size: 9px !important;
  }
  :root {
    --min-desktop-rem: 1.223rem !important;
    --min-desktop-12px-rem: 1.334rem !important;
    --typography--font-sizes--labels--l6: 1.23rem !important;
  }
  #services {
    padding-top: 2.4rem !important;
    padding-bottom: 2.4rem !important;
  }
  #services .sec-head {
    padding-bottom: 4.5rem !important;
    row-gap: 1.6rem !important;
  }
  .svc-canvas {
    max-height: 26.0rem !important;
  }
  .svc {
    padding: 2.4rem 2.0rem 2.8rem !important;
    gap: 2.0rem !important;
  }
}

/* ============================================================
   GRID OVERLAY & TOGGLE BUTTON
   ============================================================ */
.grid-overlay {
  position: fixed;
  inset: 0;
  padding: 0 var(--page-inset);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  pointer-events: none;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
}
.grid-overlay.active {
  visibility: visible;
  opacity: 1;
}
.grid-overlay-col {
  height: 100%;
  background: rgba(215, 54, 30, 0.03); /* Extremely soft accent red tint */
  border-left: 1px dashed rgba(215, 54, 30, 0.15); /* Soft dashed red left border */
  border-right: 1px dashed rgba(215, 54, 30, 0.15); /* Soft dashed red right border */
}
/* By default, hide columns 5 to 12 for 4-column mobile layout */
.grid-overlay-col:nth-child(n+5) {
  display: none;
}

@media (min-width: 768px) {
  .grid-overlay {
    grid-template-columns: repeat(8, 1fr);
    gap: 2.0rem;
  }
  /* Show columns 5-8, hide 9-12 for 8-column tablet layout */
  .grid-overlay-col:nth-child(n+5) {
    display: block;
  }
  .grid-overlay-col:nth-child(n+9) {
    display: none;
  }
}

@media (min-width: 1200px) {
  .grid-overlay {
    grid-template-columns: repeat(12, 1fr);
    gap: 2.0rem;
  }
  /* Show all 12 columns for desktop */
  .grid-overlay-col:nth-child(n+9) {
    display: block;
  }
}

.grid-toggle-btn {
  position: fixed;
  bottom: 2.4rem;
  right: 2.4rem;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 1.0rem 1.6rem;
  font-family: var(--mono);
  font-size: var(--typography--font-sizes--labels--l5);
  font-weight: var(--typography--font-weight--medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.grid-toggle-btn:hover {
  background: var(--ink);
  color: var(--bg);
}
.grid-toggle-btn.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ============================================================
   LOCK NAVBAR & MENU OVERLAY TO STATIC PX DIMENSIONS
   ============================================================ */
@media (min-width: 1200px) {
  .nav, .m-head {
    height: 80px !important;
    padding: 0 40px !important;
    column-gap: 28px !important;
  }
  .nav {
    border-bottom: 1px solid var(--rule) !important;
  }
  .logo img, .m-head .logo img {
    height: 39px !important;
    width: auto !important;
  }
  .nav-meta {
    gap: 14px !important;
    font-size: 12px !important;
  }
  .nav-meta-sep {
    font-size: 14px !important;
  }
  .nav-cta {
    height: 48px !important;
    padding: 0 18px !important;
    font-size: 16px !important;
    letter-spacing: 0.54px !important;
    line-height: 12px !important;
    border: 1px solid var(--rule) !important;
  }
  .nav-cta:hover .nav-cta-arr {
    width: 18px !important;
    margin-left: 8px !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  .nav-trigger {
    font-size: 16px !important;
    letter-spacing: 0.54px !important;
    line-height: 12px !important;
    padding: 8px 4px !important;
    gap: 14px !important;
  }
  .nav-trigger-bars {
    width: 22px !important;
    gap: 5px !important;
  }
  .nav-trigger-bars i {
    height: 1.5px !important;
  }
  .m-meta {
    gap: 14px !important;
    font-size: 12px !important;
    letter-spacing: 0.72px !important;
  }
  .m-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
    border: 1px solid var(--ink) !important;
  }
}

@media (min-width: 1440px) {
  .nav, .m-head {
    height: 96px !important;
    padding: 0 57.6px !important;
    column-gap: 33.6px !important;
  }
  .logo img, .m-head .logo img {
    height: 46.8px !important;
  }
  .nav-meta {
    gap: 16.8px !important;
    font-size: 14.4px !important;
  }
  .nav-meta-sep {
    font-size: 16.8px !important;
  }
  .nav-cta {
    height: 57.6px !important;
    padding: 0 21.6px !important;
    font-size: 19.2px !important;
    letter-spacing: 0.648px !important;
    line-height: 14.4px !important;
  }
  .nav-cta:hover .nav-cta-arr {
    width: 21.6px !important;
    margin-left: 9.6px !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  .nav-trigger {
    font-size: 19.2px !important;
    letter-spacing: 0.648px !important;
    line-height: 14.4px !important;
    padding: 9.6px 4.8px !important;
    gap: 16.8px !important;
  }
  .nav-trigger-bars {
    width: 26.4px !important;
    gap: 6px !important;
  }
  .nav-trigger-bars i {
    height: 1.8px !important;
  }
  .m-meta {
    gap: 16.8px !important;
    font-size: 14.4px !important;
    letter-spacing: 0.864px !important;
  }
  .m-close {
    width: 52.8px !important;
    height: 52.8px !important;
    font-size: 19.2px !important;
  }
}

@media (max-width: 1199px) {
  .nav, .m-head {
    height: 64px !important;
    padding: 0 16px !important;
  }
  .logo img, .m-head .logo img {
    height: 32px !important;
    width: auto !important;
  }
  .nav .nav-cta {
    display: none !important;
  }
  .nav-trigger {
    width: auto !important;
    height: auto !important;
    padding: 8px 4px !important;
    font-size: 14px !important;
    gap: 14px !important;
  }
  .nav-trigger-label {
    display: none !important;
  }
  .nav-trigger-bars {
    width: 22px !important;
    gap: 5px !important;
  }
  .nav-trigger-bars i {
    height: 1.5px !important;
  }
  .m-meta {
    gap: 14px !important;
    font-size: 12px !important;
  }
  .m-close {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
    border: 1px solid var(--ink) !important;
  }
}

/* ============================================================
   TOAST NOTIFICATION (Brutalist Style)
   ============================================================ */
.toast {
  position: fixed;
  bottom: 4.0rem;
  left: 50%;
  transform: translate(-50%, 2.0rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--typography--font-sizes--body--b3, 1.5rem);
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  padding: 1.2rem 2.4rem;
  box-shadow: 0.4rem 0.4rem 0px var(--rule);
  opacity: 0;
  pointer-events: none;
  z-index: 100000;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}