/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  font-family: var(--ff-ui);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius);
  border: var(--border-ink);
  background: var(--tissa-ink);
  color: var(--tissa-paper);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn:hover { background: var(--tissa-seal); border-color: var(--tissa-seal); color: var(--tissa-paper); }

.btn--secondary {
  background: transparent;
  color: var(--tissa-ink);
}
.btn--secondary:hover { background: var(--tissa-ink); color: var(--tissa-paper); border-color: var(--tissa-ink); }

.btn--on-ink { background: var(--tissa-paper); color: var(--tissa-ink); border-color: var(--tissa-paper); }
.btn--on-ink:hover { background: var(--tissa-seal); color: var(--tissa-paper); border-color: var(--tissa-seal); }

.btn--tertiary {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--tissa-ink);
  text-decoration: none;
  font-weight: 600;
  position: relative;
}
.btn--tertiary::after {
  content: "";
  display: block;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--transition), background-color var(--transition);
}
.btn--tertiary:hover { color: var(--tissa-seal); }

.micro {
  font-size: var(--fs-small);
  color: var(--tissa-graphite);
  margin-top: var(--space-2);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--border-thin);
  transition: transform 320ms cubic-bezier(0.2, 0, 0, 1), background 220ms ease, border-color 220ms ease;
  will-change: transform;
}

/* Smart navbar: hide on scroll down, show on scroll up (with background) */
body.nav-hidden .site-header { transform: translateY(-100%); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;                        /* vertical only — preserve container horizontal padding */
  padding-bottom: 16px;
  gap: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.04em;
}
.brand__seal { width: 32px; height: 32px; flex: 0 0 32px; }
.brand__word { color: var(--tissa-ink); }

/* Official Tissa wordmark logo (PNG with alpha) */
.brand__mark {
  display: block;
  height: 64px;
  width: auto;
  object-fit: contain;
  transition: filter var(--transition);
}
@media (max-width: 600px) {
  .brand__mark { height: 48px; }
}

/* Invert to white on dark surfaces (hero, footer, scrolled header over video hero) */
body.has-video-hero .site-header .brand__mark,
.site-footer .brand__mark,
.brand__mark--invert {
  filter: invert(1);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav__list {
  display: flex;
  gap: var(--space-4);
  list-style: none;
}
/* Desktop nav links — match the section eyebrow/badge style: mono caps,
   tight tracking, muted carbon. Same visual register as "TIER 1 · DIAGNOSTIC"
   and "POWERED BY INTELLIGENCE" labels throughout the site. */
.nav__link {
  font-family: var(--ff-ui, var(--ff-body));
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--tissa-carbon-muted);
  position: relative;
  padding: 4px 0;
  transition: color var(--transition);
}
.nav__link:hover { color: var(--tissa-carbon); }

/* Navbar CTA — outlined "badge pill" using the same mono-caps eyebrow
   register as .nav__link and section pretitles. Outlined on all surfaces
   so it reads as a label, not a heavy button. */
.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-family: var(--ff-ui, var(--ff-body));
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  line-height: 1;
  border-radius: 2px;
  background: transparent;
  color: var(--tissa-carbon);
  border: 1px solid var(--tissa-carbon);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  border-color: var(--tissa-carbon);
}

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 0;                                /* no outlined box — just clean bars */
  background: transparent;
  padding: 0;
  margin-right: -10px;                      /* visually align bars with the container's right edge */
  cursor: pointer;
}
.nav-toggle__bars {
  display: block;
  width: 18px; height: 2px;
  background: var(--tissa-ink);
  position: relative;
}
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--tissa-ink);
}

/* Hamburger color follows the navbar text color — white over dark heroes,
   carbon when the navbar is scrolled to white surface or on plain pages.
   Forced back to carbon when the mobile nav panel is open (cream panel bg). */
body.has-video-hero .nav-toggle__bars,
body.has-video-hero .nav-toggle__bars::before,
body.has-video-hero .nav-toggle__bars::after,
body.has-image-hero .nav-toggle__bars,
body.has-image-hero .nav-toggle__bars::before,
body.has-image-hero .nav-toggle__bars::after {
  background: var(--tissa-white);
}
body.has-video-hero.scrolled .nav-toggle__bars,
body.has-video-hero.scrolled .nav-toggle__bars::before,
body.has-video-hero.scrolled .nav-toggle__bars::after,
body.has-image-hero.scrolled .nav-toggle__bars,
body.has-image-hero.scrolled .nav-toggle__bars::before,
body.has-image-hero.scrolled .nav-toggle__bars::after {
  background: var(--tissa-ink);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top:  6px; }

/* ============================================================
   MOBILE NAV — full-screen editorial panel
   When open, .nav itself becomes the panel (flex column).
   .nav__list grows; .nav__cta is pushed to the bottom via
   margin-top: auto. The toggle (hamburger / X) is absolutely
   positioned in the top-right of the panel.
   ============================================================ */
@media (max-width: 900px) {
  /* Default mobile state — desktop items hidden, toggle visible */
  .nav__list,
  .nav__cta { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Hamburger → X animation (toggle button bars) */
  .nav-toggle {
    position: relative;
    z-index: 60;                            /* always above the panel */
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    transition:
      transform 320ms cubic-bezier(0.2, 0, 0, 1),
      opacity 200ms ease,
      top 320ms cubic-bezier(0.2, 0, 0, 1),
      background-color 200ms ease;
  }
  .nav.is-open .nav-toggle__bars { background: transparent; }
  .nav.is-open .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
  .nav.is-open .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }
  /* When the panel is open, force the X back to carbon so it stays visible
     on the cream panel background (regardless of hero/scroll state). */
  body.has-video-hero .nav.is-open .nav-toggle__bars::before,
  body.has-video-hero .nav.is-open .nav-toggle__bars::after,
  body.has-image-hero .nav.is-open .nav-toggle__bars::before,
  body.has-image-hero .nav.is-open .nav-toggle__bars::after {
    background: var(--tissa-ink);
  }

  /* When open, .nav becomes the full-screen panel */
  .nav.is-open {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;                         /* dynamic viewport — handles iOS toolbar */
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 64px var(--container-pad-m, 24px) calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--tissa-paper);
    overflow-y: auto;                       /* default fits; scroll kicks in only if Services submenu is expanded */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    animation: navPanelIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes navPanelIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Toggle floats in the top-right corner of the panel */
  .nav.is-open .nav-toggle {
    position: absolute;
    top: 16px;
    right: var(--container-pad-m, 24px);
  }

  /* The list of items — flex column, takes available height */
  .nav.is-open .nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    list-style: none;
  }

  /* List items — full-width rows with hairlines */
  .nav.is-open .nav__list > .nav__item,
  .nav.is-open .nav__list > li {
    width: 100%;
    border-bottom: 1px solid var(--tissa-border);
    padding: 0;
  }
  .nav.is-open .nav__list > li:first-child {
    border-top: 1px solid var(--tissa-border);
  }

  /* Each link — italic Playfair, compact so 6 items + CTA fit in viewport */
  .nav.is-open .nav__list .nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: clamp(10px, 1.6vh, 16px) 0;     /* responsive to viewport height */
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(20px, 5.4vw, 26px);
    line-height: 1.1;
    letter-spacing: -0.014em;
    color: var(--tissa-carbon);
  }
  .nav.is-open .nav__link:hover { color: var(--tissa-carbon); }

  /* Stagger entrance for nav items */
  .nav.is-open .nav__list > li {
    opacity: 0;
    transform: translateY(8px);
    animation: navItemIn 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .nav.is-open .nav__list > li:nth-child(1) { animation-delay: 120ms; }
  .nav.is-open .nav__list > li:nth-child(2) { animation-delay: 170ms; }
  .nav.is-open .nav__list > li:nth-child(3) { animation-delay: 220ms; }
  .nav.is-open .nav__list > li:nth-child(4) { animation-delay: 270ms; }
  .nav.is-open .nav__list > li:nth-child(5) { animation-delay: 320ms; }
  .nav.is-open .nav__list > li:nth-child(6) { animation-delay: 370ms; }
  .nav.is-open .nav__list > li:nth-child(7) { animation-delay: 420ms; }
  @keyframes navItemIn {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Services dropdown — inline expand on mobile (no floating menu) */
  .nav.is-open .nav__item--has-submenu .nav__caret {
    transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
  }
  .nav.is-open .nav__item--has-submenu[data-open="true"] .nav__caret {
    transform: rotate(180deg);
  }
  .nav.is-open .nav__submenu {
    display: block;
    position: static;
    inset: auto;
    width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--space-3);
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 360ms cubic-bezier(0.2, 0, 0, 1),
      opacity 240ms ease 60ms,
      padding 360ms cubic-bezier(0.2, 0, 0, 1);
    visibility: visible;
    transform: none;
    pointer-events: none;
  }
  .nav.is-open .nav__item--has-submenu[data-open="true"] .nav__submenu {
    max-height: 600px;
    opacity: 1;
    pointer-events: auto;
  }
  /* Submenu link — clean compact row, single line, title only */
  .nav.is-open .nav__submenu-link {
    display: flex;
    align-items: center;
    padding: 6px 0;
    background: transparent;
    border-radius: 0;
  }
  .nav.is-open .nav__submenu-link:hover { background: transparent; }

  /* Hide num and meta on mobile — too much noise on a small viewport */
  .nav.is-open .nav__submenu-num,
  .nav.is-open .nav__submenu-meta { display: none; }

  /* Title wrapper takes the whole row */
  .nav.is-open .nav__submenu-text {
    display: block;
    min-width: 0;
  }
  .nav.is-open .nav__submenu-title {
    display: block;
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    color: var(--tissa-carbon-muted);
  }

  /* CTA button — pushed to the bottom of the panel via margin-top: auto */
  .nav.is-open .nav__cta {
    display: inline-flex;
    align-self: stretch;
    margin-top: auto;                       /* pushed to bottom of flex column */
    justify-content: center;
    padding: 14px 22px;                     /* slimmer pill so it fits at the bottom */
    background: var(--tissa-carbon);
    color: var(--tissa-paper);
    border: 1px solid var(--tissa-carbon);
    border-radius: 999px;
    font-family: var(--ff-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    animation: navCtaIn 520ms cubic-bezier(0.16, 1, 0.3, 1) 480ms both;
  }
  @keyframes navCtaIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Lock page scroll when the panel is open */
  body.nav-open {
    overflow: hidden;
    touch-action: none;
  }

  /* Reduced motion — skip animations */
  @media (prefers-reduced-motion: reduce) {
    .nav.is-open,
    .nav.is-open .nav__list > li,
    .nav.is-open .nav__cta {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after,
    .nav__caret { transition: none !important; }
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: var(--space-7) 0 var(--space-7);
  position: relative;
}
@media (min-width: 1024px) {
  .hero { padding: 120px 0 var(--space-7); }
}

.hero__eyebrow { margin-bottom: var(--space-3); }
.hero__title { margin-bottom: var(--space-3); max-width: 14ch; }
.hero__title--narrow { max-width: 18ch; }
.hero__sub {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--tissa-graphite);
  max-width: 60ch;
  margin-bottom: var(--space-4);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ============================================================
   HERO — VIDEO / AMBIENT VARIANT
   Layers (z-index):
     0: hero__media   — animated dark base + watermark logo + scan lines
     1: hero__video   — real <video> when present (assets/video/hero.mp4)
     2: hero__overlay — gradient for text legibility
     3: hero__content — copy + CTAs
   ============================================================ */
.hero--video {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* iOS Safari address-bar-aware */
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 80%, #2c2d30 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, #1f2022 0%, transparent 55%),
    linear-gradient(165deg, #1a1b1d 0%, #252628 50%, #2e2f31 100%);
  color: var(--tissa-offwhite);
  isolation: isolate;
}

/* PINNED HERO — hero stays in place; sections slide up over it.
   Hero is fixed at top, main reserves 100vh of space so its sections
   start at the bottom of the viewport and rise as the user scrolls. */
body.has-video-hero .hero--video {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  z-index: 1;
}
body.has-video-hero main {
  position: relative;
  padding-top: 100vh;
  padding-top: 100svh;
}
/* Every section after the hero must have an opaque background AND a higher
   z-index, otherwise the fixed hero behind them would show through. */
body.has-video-hero main > .section,
body.has-video-hero main > .cta-bar {
  position: relative;
  z-index: 2;
}
/* Footer on home: flows normally at end of body, no special positioning. */
body.has-video-hero main > .section:not(.section--bone):not(.section--ink) {
  background: var(--tissa-white);
}

.hero--video .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Big drifting wordmark watermark — uses the real Tissa logo, inverted to white at ~7% opacity */
.hero__watermark {
  position: absolute;
  bottom: -8%;
  right: -10%;
  width: 90%;
  max-width: 1200px;
  aspect-ratio: 1 / 1;
  background-image: url("../img/tissa-seal.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: invert(1);
  opacity: 0.06;
  animation: heroWatermarkDrift 36s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes heroWatermarkDrift {
  0%   { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); opacity: 0.05; }
  50%  { opacity: 0.09; }
  100% { transform: translate3d(-4%, -3%, 0) rotate(1deg) scale(1.04); opacity: 0.07; }
}

/* Slow horizontal rule lines descending — "manual being written" */
.hero__rules {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 110px,
    rgba(247, 244, 238, 0.06) 110px,
    rgba(247, 244, 238, 0.06) 111px
  );
  mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 75%, transparent 100%);
  animation: heroRulesScroll 22s linear infinite;
}
@keyframes heroRulesScroll {
  from { background-position-y: 0; }
  to   { background-position-y: 111px; }
}

/* Grain / paper texture via inline SVG noise */
.hero__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.35;
  pointer-events: none;
}

/* 4C words rotating typewriter */
.hero__cycle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(80px, 14vw, 220px);
  font-weight: 700;
  color: rgba(247, 244, 238, 0.04);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.hero__cycle span {
  display: block;
  opacity: 0;
  animation: heroCycleWord 16s steps(1) infinite;
}
.hero__cycle span:nth-child(1) { animation-delay: 0s; }
.hero__cycle span:nth-child(2) { animation-delay: 4s; }
.hero__cycle span:nth-child(3) { animation-delay: 8s; }
.hero__cycle span:nth-child(4) { animation-delay: 12s; }
@keyframes heroCycleWord {
  0%, 1%   { opacity: 0; transform: translateY(8px); }
  2%, 23%  { opacity: 1; transform: translateY(0); }
  24%, 100%{ opacity: 0; transform: translateY(-8px); }
}

.hero--video .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.12);
  transform-origin: center center;
  will-change: opacity, transform;
}
/* Cinematic entrance: fade in + slow zoom out when video has playable frames */
.hero--video .hero__video.is-ready {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.7s ease,
    transform 4s cubic-bezier(0.22, 0, 0.08, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hero--video .hero__video {
    transform: scale(1);
  }
  .hero--video .hero__video.is-ready {
    transition: opacity 0.4s ease;
  }
}

.hero--video .hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.78) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 55%);
  pointer-events: none;
}
.hero--video .hero__content {
  position: relative;
  z-index: 3;
  /* Vertical only — preserve .container's horizontal padding (24/48/80px) */
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  width: 100%;
}
@media (min-width: 1024px) {
  .hero--video .hero__content {
    padding-top: var(--space-8);
    padding-bottom: var(--space-7);
  }
}
.hero--video .hero__title {
  color: var(--tissa-offwhite);
  max-width: 22ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.hero--video .hero__sub {
  color: rgba(247, 244, 238, 0.85);
  max-width: 56ch;
}
.hero--video .hero__pretitle {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--space-4);
}
.hero--video .hero__pretitle-text {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--tissa-offwhite);
}
.hero--video .hero__pretitle-line {
  display: inline-block;
  width: 80px;
  height: 1px;
  background: rgba(247, 244, 238, 0.65);
  transform: scaleX(0);
  transform-origin: left center;
  animation: heroLineDraw 1s cubic-bezier(0.2, 0, 0, 1) 0.45s forwards;
}
.hero--video .btn--secondary {
  color: var(--tissa-offwhite);
  border-color: rgba(247, 244, 238, 0.5);
}
.hero--video .btn--secondary:hover {
  background: var(--tissa-offwhite);
  color: var(--tissa-carbon);
  border-color: var(--tissa-offwhite);
}
.hero--video .micro { color: rgba(247, 244, 238, 0.65); }

/* Entrance reveal — applies to anything tagged [data-animate-item] inside [data-animate] */
[data-animate] [data-animate-item] {
  opacity: 0;
  transform: translateY(20px);
  animation: heroReveal 0.8s cubic-bezier(0.2, 0, 0, 1) forwards;
}
[data-animate] [data-animate-item]:nth-child(1) { animation-delay: 0.15s; }
[data-animate] [data-animate-item]:nth-child(2) { animation-delay: 0.30s; }
[data-animate] [data-animate-item]:nth-child(3) { animation-delay: 0.45s; }
[data-animate] [data-animate-item]:nth-child(4) { animation-delay: 0.60s; }
[data-animate] [data-animate-item]:nth-child(5) { animation-delay: 0.75s; }
[data-animate] [data-animate-item]:nth-child(6) { animation-delay: 0.90s; }

@keyframes heroReveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroLineDraw {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] [data-animate-item] {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .hero--video .hero__pretitle-line { transform: scaleX(1); animation: none; }
  .hero--video .hero__video { display: none; }
}

/* Header treatment when sitting on top of a video hero
   IMPORTANT: position: fixed (not sticky) so the hero can extend to the
   top of the viewport BEHIND the navbar — sticky takes flow space and
   would push the hero down, leaving a cream strip where the body bg shows. */
body.has-video-hero .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(247, 244, 238, 0.12);
}
body.has-video-hero .site-header .brand__script { color: var(--tissa-offwhite); }
body.has-video-hero .site-header .nav__link { color: var(--tissa-offwhite); }
body.has-video-hero .site-header .nav__link:hover { color: var(--tissa-white); }
/* Outlined by default → solid white on hover (Vivre-style flip) */
body.has-video-hero .site-header .nav__cta {
  background: transparent;
  color: var(--tissa-white);
  border: 1px solid var(--tissa-white);
}
body.has-video-hero .site-header .nav__cta:hover {
  background: var(--tissa-white);
  color: var(--tissa-carbon);
  border-color: var(--tissa-white);
}

/* Scrolled state — navbar flips to Tissa pure white (#fff) with dark carbon
   text + logo + CTA. Pure white is the dominant brand surface. */
body.has-video-hero.scrolled .site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--tissa-border);
}
body.has-video-hero.scrolled .site-header .brand__script { color: var(--tissa-carbon); }
body.has-video-hero.scrolled .site-header .nav__link { color: var(--tissa-carbon-muted); }
body.has-video-hero.scrolled .site-header .nav__link:hover { color: var(--tissa-carbon); }
body.has-video-hero.scrolled .site-header .brand__mark { filter: none; }
/* Scrolled state — outlined carbon → solid carbon on hover */
body.has-video-hero.scrolled .site-header .nav__cta {
  background: transparent;
  color: var(--tissa-carbon);
  border: 1px solid var(--tissa-carbon);
}
body.has-video-hero.scrolled .site-header .nav__cta:hover {
  background: var(--tissa-carbon);
  color: var(--tissa-white);
  border-color: var(--tissa-carbon);
}

/* ============================================================
   4C CARDS
   ============================================================ */
.cards-4c {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 768px) {
  .cards-4c { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
.card-4c {
  background: var(--tissa-paper);
  border: var(--border-thin);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--transition);
}
.card-4c:hover { border-color: var(--tissa-ink); }
.card-4c__num {
  font-family: var(--ff-display);
  font-size: 56px;
  line-height: 1;
  font-weight: 500;
  color: var(--tissa-seal);
  margin-bottom: var(--space-2);
}
.card-4c__title { font-size: var(--fs-h4); font-weight: 600; }
.card-4c__body { color: var(--tissa-graphite); }

/* ============================================================
   SERVICE TIER CARDS
   ============================================================ */
.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 1024px) {
  .tiers { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); align-items: stretch; }
}
.tier {
  background: var(--tissa-paper);
  border: var(--border-thin);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
}
.tier--featured {
  border-color: var(--tissa-ink);
  box-shadow: var(--shadow-soft);
}
.tier--featured::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--tissa-seal);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.tier__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  color: var(--tissa-seal);
}
.tier__title { font-size: var(--fs-h3); }
.tier__tag { color: var(--tissa-graphite); }
.tier__meta {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 12px;
  font-size: var(--fs-small);
  padding: var(--space-2) 0;
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
  margin: var(--space-2) 0;
}
.tier__meta dt { color: var(--tissa-graphite); }
.tier__meta dd { color: var(--tissa-ink); font-weight: 500; }
.tier__deliv {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--fs-small);
  color: var(--tissa-graphite);
}
.tier__deliv li { padding-left: 16px; position: relative; }
.tier__deliv li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 1px; background: var(--tissa-seal);
}
.tier__cta { margin-top: auto; padding-top: var(--space-3); }

/* ============================================================
   CASE CARDS
   ============================================================ */
.cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 768px) { .cases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cases { grid-template-columns: repeat(3, 1fr); } }

.case {
  display: flex;
  flex-direction: column;
  background: var(--tissa-paper);
  border: var(--border-thin);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}
.case:hover { border-color: var(--tissa-ink); }
.case__media {
  aspect-ratio: 4 / 3;
  background: var(--tissa-bone);
  position: relative;
  overflow: hidden;
}
.case__media-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  color: var(--tissa-graphite);
  letter-spacing: -0.02em;
  filter: grayscale(1);
  transition: color var(--transition), background var(--transition);
}
.case:hover .case__media-mark {
  color: var(--tissa-seal);
  background: rgba(107, 31, 26, 0.06);
}
.case__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.case__tag {
  font-family: var(--ff-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tissa-graphite);
}
.case__title { font-size: var(--fs-h4); font-weight: 600; }
.case__sub {
  font-size: var(--fs-small);
  color: var(--tissa-graphite);
  font-style: italic;
}
.case__cta { margin-top: auto; font-size: var(--fs-small); font-weight: 600; }

/* ============================================================
   WHY-TISSA (2 cols rows)
   ============================================================ */
.diffs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 768px) { .diffs { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }
.diff {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-thin);
}
.diff__num {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  color: var(--tissa-seal);
  padding-top: 4px;
}
.diff__title { font-size: var(--fs-h4); font-weight: 600; }
.diff__body { color: var(--tissa-graphite); font-size: var(--fs-body); margin-top: 8px; }

/* ============================================================
   FAQ (native details)
   ============================================================ */
.faq { margin-top: var(--space-5); border-top: var(--border-thin); }
.faq__item {
  border-bottom: var(--border-thin);
  padding: var(--space-3) 0;
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--tissa-ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--ff-ui);
  font-size: 24px;
  font-weight: 400;
  color: var(--tissa-seal);
  transition: transform var(--transition);
}
.faq__item[open] summary::after { content: "−"; }
.faq__answer {
  margin-top: var(--space-2);
  color: var(--tissa-graphite);
  max-width: 70ch;
}

/* ============================================================
   FINAL CTA BAR
   ============================================================ */
.cta-bar {
  background: var(--tissa-ink);
  color: var(--tissa-paper);
  padding: var(--space-7) 0;
  text-align: center;
}
.cta-bar h2 { color: var(--tissa-paper); margin-bottom: var(--space-2); }
.cta-bar p { color: var(--tissa-line); margin-bottom: var(--space-4); }

/* Services-page CTA — extra breathing room + single-line title */
.cta-bar--services {
  padding: calc(var(--space-8) + var(--space-3)) 0;
}
@media (min-width: 1024px) {
  .cta-bar--services { padding: calc(var(--space-8) + var(--space-7)) 0; }
}
.cta-bar__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--tissa-paper);
  margin: 0;
}
.cta-bar__title--single {
  /* Loud enough to be the hero of the section, but bounded so it doesn't
     stretch edge-to-edge on wide viewports. */
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.05;
  white-space: normal;
  /* Space the question off from the surrounding text so it stands alone. */
  margin-top: calc(var(--space-4) + 6px);
  margin-bottom: calc(var(--space-4) + 6px);
  position: relative;
}
@media (min-width: 720px) {
  /* On comfortable widths, force a single line — there's room. */
  .cta-bar__title--single { white-space: nowrap; max-width: none; }
}
@media (min-width: 1024px) {
  .cta-bar__title--single {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
  }
}

/* Lead / tail copy that frames the question */
.cta-bar__tail {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--tissa-line);
  margin: 0 auto var(--space-5);
  max-width: 52ch;
}
.cta-bar__lead {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tissa-border);
  margin: var(--space-3) auto 0;
  opacity: 0.85;
  /* Mono caps line is too long for 52ch — let it use the full container width
     and force a single line where viewport allows. */
  max-width: none;
}
@media (min-width: 760px) {
  .cta-bar__lead { white-space: nowrap; }
}

/* ============================================================
   FOOTER + PAGE-END
   ============================================================ */
.site-footer {
  background: var(--tissa-ink);
  color: var(--tissa-paper);
  padding: var(--space-7) 0 var(--space-4);
}

/* Page-end — unified dark band (CTA + site footer) at the end of body.
   Lives in normal flow. Content inside reveals via the standard
   data-reveal-item / data-text-reveal observers (IntersectionObserver).
   This is the standard pattern used by premium editorial sites: no
   fixed positioning, no scroll listeners, fully accessible.
   z-index 2 so it sits above the fixed video hero on the home page. */
.page-end {
  position: relative;
  z-index: 2;
  background: var(--tissa-ink);
  view-timeline-name: --page-end-view;
}

/* Modern Chromium: a subtle native scroll-driven fade-up on the wrapper
   as it enters the viewport. Fully degraded fallback for everyone else
   (footer appears normally — already covered by data-reveal). */
@supports (animation-timeline: view()) {
  .page-end {
    animation: page-end-enter linear both;
    animation-timeline: view(--page-end-view);
    animation-range: entry 0% entry 35%;
  }
  @keyframes page-end-enter {
    from { opacity: 0.35; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-end { animation: none !important; opacity: 1; transform: none; }
}

/* When inside .page-end: generous breathing room above the CTA and
   between CTA and footer columns (single unified dark band). */
.page-end .cta-bar {
  padding: var(--space-7) 0 var(--space-6);
}
@media (min-width: 1024px) {
  .page-end .cta-bar {
    padding: calc(var(--space-7) + var(--space-2)) 0 var(--space-7);
  }
}
/* Compact title size — overrides the larger default so multi-line
   headlines (e.g. the home page) don't push the band below viewport. */
.page-end .cta-bar h2,
.page-end .cta-bar__title,
.page-end .cta-bar__title--single {
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.1;
  max-width: 26ch;
}
.page-end .cta-bar p {
  font-size: clamp(14px, 1.1vw, 16px);
  margin-bottom: var(--space-2);
}
.page-end .cta-bar .eyebrow {
  margin-bottom: 4px;
}

.page-end .site-footer {
  padding: var(--space-5) 0 var(--space-4);
  position: relative;
}
@media (min-width: 768px) {
  .page-end .site-footer { padding: var(--space-6) 0 var(--space-4); }
}
/* (Hairline between CTA and footer removed — single unified dark band) */

/* Compact the footer grid inside .page-end for better vertical fit */
.page-end .footer-grid {
  gap: var(--space-3);
}
.page-end .footer-grid h4 {
  margin-bottom: 6px;
}
.page-end .footer-grid ul {
  gap: 4px;
}
.page-end .footer-bottom {
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

/* Legacy fallback removed — all pages now use .page-end wrapper in
   normal flow. The site-footer flows naturally at end of body. */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-4); } }
.footer-grid h4 {
  font-family: var(--ff-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tissa-line);
  margin-bottom: var(--space-3);
}
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a {
  font-size: var(--fs-small);
  color: var(--tissa-paper);
  text-decoration: underline transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 240ms ease, color 240ms ease;
}
.footer-grid a:hover {
  color: var(--tissa-paper);                  /* keep light — override global a:hover which goes carbon (invisible on dark footer) */
  text-decoration-color: var(--tissa-paper);  /* underline appears */
}
/* Footer bottom row (Privacy / Refund Policy) — same fix */
.footer-bottom a {
  color: var(--tissa-line);
  text-decoration: underline transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 240ms ease, color 240ms ease;
}
.footer-bottom a:hover {
  color: var(--tissa-paper);
  text-decoration-color: var(--tissa-paper);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 380px;
}
.footer-brand .brand__word { color: var(--tissa-paper); }
.footer-brand p { color: var(--tissa-line); font-size: var(--fs-small); }
.footer-brand address {
  font-style: normal;
  color: var(--tissa-line);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(247, 244, 238, 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--tissa-line);
}
.footer-bottom ul {
  list-style: none;
  display: flex;
  gap: var(--space-3);
}

/* ============================================================
   MOBILE CTA BAR + SMS floating button
   ============================================================ */
.mobile-cta-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--tissa-ink);
  color: var(--tissa-paper);
  padding: 12px 16px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  z-index: 40;
  border-top: 1px solid rgba(247, 244, 238, 0.1);
}
.mobile-cta-bar a { color: var(--tissa-paper); font-size: var(--fs-small); font-weight: 600; }
.mobile-cta-bar .btn { padding: 10px 16px; font-size: var(--fs-small); }

@media (max-width: 768px) {
  body.scrolled .mobile-cta-bar { display: flex; }
  body.scrolled { padding-bottom: 68px; }
}

.sms-fab {
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--tissa-seal);
  color: var(--tissa-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 38, 40, 0.25);
  z-index: 30;
  transition: transform var(--transition), background var(--transition);
}
.sms-fab:hover { transform: translateY(-2px); background: var(--tissa-carbon-light); color: var(--tissa-offwhite); }
.sms-fab svg { width: 22px; height: 22px; }

@media (max-width: 768px) {
  body.scrolled .sms-fab { bottom: calc(68px + var(--space-3)); }
}

/* ============================================================
   EYEBROW SPACING
   ============================================================ */
.section__head { margin-bottom: var(--space-4); max-width: 60ch; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head .eyebrow { margin-bottom: var(--space-2); }
.section__head h2 { margin-bottom: var(--space-3); }
.section__head p { color: var(--tissa-graphite); }

/* ============================================================
   HOW WE WORK — editorial spec-sheet rows
   ============================================================ */
.how__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.how__heading { margin-top: var(--space-2); max-width: 14ch; }
.how__lead {
  color: var(--tissa-carbon-muted);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  max-width: 56ch;
}

@media (min-width: 1024px) {
  .how__head {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
    row-gap: var(--space-4);
    align-items: end;
    margin-bottom: var(--space-7);
  }
  .how__head .section-pretitle { grid-column: 1 / -1; margin-bottom: 0; }
  .how__heading { margin: 0; }
  .how__lead { margin: 0; padding-bottom: 8px; max-width: 48ch; }
}

/* Container-bound alternating tier panels with rounded corners */
.how__tiers {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 1024px) {
  .how__tiers { gap: var(--space-8); margin-top: var(--space-7); }
}

.how-tier {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .how-tier {
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
    gap: var(--space-6);
    align-items: stretch;
    overflow: hidden;                                 /* hide the slide off-screen state */
  }
  .how-tier--reversed .how-tier__visual { order: 2; }
  .how-tier--reversed .how-tier__copy { order: 1; }

  /* Slide-from-opposite-edges entrance — same pattern as .about-stance.
     :first-child (visually LEFT in both normal and reversed tiers thanks to
     the order: rules above) starts off-screen left; :last-child starts off
     right. Both meet at translateX(0) when the tier crosses the IO threshold. */
  .how-tier > .how-tier__visual,
  .how-tier > .how-tier__copy {
    opacity: 0;
    transition:
      opacity 0.9s cubic-bezier(0.2, 0, 0, 1),
      transform 1.1s cubic-bezier(0.2, 0, 0, 1);
    will-change: transform, opacity;
  }
  .how-tier > *:first-child { transform: translateX(-110%); }
  .how-tier > *:last-child  { transform: translateX(110%); }

  .how-tier--in-view > .how-tier__visual,
  .how-tier--in-view > .how-tier__copy {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-tier > .how-tier__visual,
  .how-tier > .how-tier__copy {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.how-tier__visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--tissa-carbon);
  border-radius: 10px;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .how-tier__visual { aspect-ratio: auto; }
}
.how-tier__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) brightness(0.78) contrast(1.05);
  transition: transform 9s ease-out, filter 0.6s ease;
}
.how-tier:hover .how-tier__visual img {
  transform: scale(1.05);
  filter: grayscale(0.1) brightness(0.85) contrast(1.05);
}

/* Subtle gradient overlay for legibility of the giant number */
.how-tier__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
  z-index: 1;
}

.how-tier__num {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-5);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(120px, 18vw, 240px);
  line-height: 0.82;
  color: var(--tissa-offwhite);
  letter-spacing: -0.04em;
  z-index: 2;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.how-tier__copy {
  background: transparent;
  display: flex;
  align-items: center;
  padding: 0;
}

.how-tier__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 56ch;
  position: relative;
}

/* Featured tier — keep editorial differentiation via badge only (no card bg) */
.how-tier__badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--tissa-carbon);
  color: var(--tissa-offwhite);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 2px;
  margin-bottom: var(--space-1);
}

/* Tier identifier — same black-bg pill style as .how-tier__badge.
   One badge per tier, no separate eyebrow text below. */
.how-tier__label {
  display: inline-block;
  align-self: flex-start;
  background: var(--tissa-carbon);
  color: var(--tissa-offwhite);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 2px;
}

.how-tier__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
}

/* Price — single clean numeric line, body serif (not italic Playfair),
   so the only italic statement on the card is the title. */
.how-tier__price {
  margin: 0;
}
.how-tier__price-num {
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
  line-height: 1.1;
}

.how-tier__tag {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--tissa-carbon);
  max-width: 50ch;
}

/* Deliverables — clean stacked list, no decorative bullets.
   Each line separated by a hairline rule for an editorial spec-sheet feel. */
.how-tier__deliv {
  list-style: none;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-body);
  color: var(--tissa-carbon);
  margin-top: var(--space-3);
  border-top: 1px solid var(--tissa-border);
}
.how-tier__deliv li {
  padding: 12px 0;
  border-bottom: 1px solid var(--tissa-border);
  line-height: 1.4;
}

.how-tier__cta {
  margin-top: var(--space-3);
  align-self: flex-start;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--tissa-carbon);
  padding: 4px 0;
  border-bottom: 1px solid var(--tissa-carbon);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  transition: gap var(--transition);
}
.how-tier__cta span { transition: transform var(--transition); display: inline-block; }
.how-tier__cta:hover { gap: 18px; }
.how-tier__cta:hover span { transform: translateX(4px); }

/* ============================================================
   INTELLIGENCE — Powered by Intelligence (visual + accordion)
   ============================================================ */
.intelligence__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.intelligence__heading {
  margin-top: var(--space-2);
  max-width: 18ch;
}
@media (min-width: 1024px) {
  .intelligence__head { margin-bottom: var(--space-7); }
}

/* Pretitle line color override for dark surfaces */
.section-pretitle--on-ink .section-pretitle__text { color: rgba(247, 244, 238, 0.65); }
.section-pretitle--on-ink .section-pretitle__line { background: rgba(247, 244, 238, 0.4); opacity: 1; }

.intelligence__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .intelligence__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: start;
  }
}

/* ============================================================
   Intelligence visual — Swiper-creative-style stack.
   All images live stacked on top of each other. The active image
   sits at z-index 5 with opacity 1; outgoing images sit underneath
   at z-index 3 and fade. Active images get a subtle Ken-Burns drift
   (scale 1.08 → 1) over 1.4s for the "fresh slide arriving" feel
   that defines Vivre's swiper section.
   ============================================================ */
.intelligence__visual {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: rgba(255, 255, 255, 0.05);
  position: relative;
  isolation: isolate;
}
.intelligence__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) brightness(0.92);
  opacity: 0;
  transform: scale(1);
  z-index: 3;
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.intelligence__visual img.is-active {
  opacity: 1;
  z-index: 5;
  /* Subtle Ken-Burns drift on entry only — outgoing image just fades, no reverse zoom */
  animation: intelKenBurnsIn 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes intelKenBurnsIn {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Subtle vignette overlay so the dark section's text reads cleanly
   when stacked next to bright imagery — matches Vivre's editorial look */
.intelligence__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.25) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.18) 100%);
}

@media (min-width: 1024px) {
  .intelligence__visual { aspect-ratio: 5 / 6; }
}

@media (prefers-reduced-motion: reduce) {
  .intelligence__visual img,
  .intelligence__visual img.is-active {
    animation: none;
    transform: none;
    transition: opacity 0.3s linear;
  }
}

/* Accordion on dark */
.intelligence__accordion { display: flex; flex-direction: column; }

.intel-acc {
  border-bottom: 1px solid rgba(247, 244, 238, 0.14);
  padding: 0;
  transition: border-color 320ms cubic-bezier(0.2, 0, 0, 1);
  position: relative;
}
.intel-acc:first-child { border-top: 1px solid rgba(247, 244, 238, 0.14); }
.intel-acc:hover { border-color: rgba(247, 244, 238, 0.42); }
.intel-acc[open] { border-color: rgba(247, 244, 238, 0.55); }
.intel-acc[open] + .intel-acc { border-top-color: rgba(247, 244, 238, 0.55); }

.intel-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--tissa-offwhite);
  transition: padding 280ms cubic-bezier(0.2, 0, 0, 1);
}
.intel-acc summary::-webkit-details-marker { display: none; }
.intel-acc summary:focus-visible { outline: 2px solid var(--tissa-offwhite); outline-offset: 4px; }
.intel-acc summary:hover .intel-acc__title { transform: translateX(4px); }

.intel-acc__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
}

/* Vivre-style +/× icon — drawn as two thin lines, prominent but balanced */
.intel-acc__icon {
  position: relative;
  width: clamp(26px, 2.4vw, 34px);
  height: clamp(26px, 2.4vw, 34px);
  flex: 0 0 auto;
  display: inline-block;
}
.intel-acc__icon::before,
.intel-acc__icon::after {
  content: "";
  position: absolute;
  background: var(--tissa-offwhite);
  border-radius: 2px;
  transition:
    transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 280ms ease;
}
.intel-acc__icon::before {
  left: 0; top: 50%;
  width: 100%; height: 1.5px;
  transform: translateY(-50%);
}
.intel-acc__icon::after {
  left: 50%; top: 0;
  width: 1.5px; height: 100%;
  transform: translateX(-50%);
}
/* Active state — the vertical bar rotates 90° to lay flat over the horizontal,
   producing a single line (a minus) instead of a plus. Matches the Vivre swap. */
.intel-acc[open] .intel-acc__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.intel-acc[open] .intel-acc__title {
  transform: translateX(0);
}

.intel-acc__body {
  overflow: hidden;
  padding: 0 0 var(--space-3);
  max-width: 56ch;
}
.intel-acc__body p {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: rgba(247, 244, 238, 0.72);
}

/* Smooth open/close (Chromium-only — others get instant). Keep no JS. */
@supports (interpolate-size: allow-keywords) {
  .intel-acc { interpolate-size: allow-keywords; }
  .intel-acc::details-content {
    height: 0;
    overflow: hidden;
    transition: height 320ms cubic-bezier(0.2, 0, 0, 1), content-visibility 320ms;
    transition-behavior: allow-discrete;
  }
  .intel-acc[open]::details-content { height: auto; }
}

/* ============================================================
   SERVICES page — Three tier blocks + intro + add-ons
   ============================================================ */

/* Intro paragraph */
.services-intro {
  padding: calc(var(--space-7) + var(--space-3)) 0 calc(var(--space-7) + var(--space-2));
}
@media (min-width: 1024px) {
  .services-intro { padding: calc(var(--space-8) + var(--space-6)) 0 calc(var(--space-8) + var(--space-4)); }
}
.services-intro__lead {
  font-family: var(--ff-body);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.45;
  font-weight: 400;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 64ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 1024px) {
  .services-intro__lead { gap: var(--space-4); }
}
.services-intro__line {
  display: block;
}
.services-intro__question {
  display: block;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  color: var(--tissa-carbon);
  /* The question is the loudest beat in the paragraph. */
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Tier block — editorial spread per tier */
.tier-block {
  padding: calc(var(--space-8) + var(--space-3)) 0;
  border-top: 1px solid var(--tissa-border);
  background: var(--tissa-white);                    /* opaque so sticky stacking covers cleanly */
}
@media (min-width: 1024px) {
  .tier-block { padding: calc(var(--space-8) + var(--space-7)) 0; }
}
.tier-block.section--bone { background: var(--tissa-offwhite); }

/* ============================================================
   SCROLL-DRIVEN ANIMATIONS — modern browsers (Chromium 115+).
   The carbon price block "fills in" as the card enters, and the
   massive $price scales in dramatically. Title slides in from
   the left. Graceful degradation on older browsers.
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Title — slide in from left, fade in */
    .tier-v2__title {
      animation: tierTitleIn linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 25%;
    }
    @keyframes tierTitleIn {
      from { opacity: 0; transform: translateX(-40px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    /* Rail (the "01 — THE DIAGNOSTIC" header) — slide in earlier */
    .tier-v2__rail {
      animation: tierRailIn linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
    @keyframes tierRailIn {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Lead body — gentle fade-up, delayed */
    .tier-v2__lead {
      animation: tierFadeUp linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes tierFadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* The dark CARBON block — fills in from the left as the card enters */
    .tier-v2__stats { position: relative; }
    .tier-v2__stat:nth-child(2) {
      position: relative;
      overflow: hidden;
    }
    .tier-v2__stat:nth-child(2)::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--tissa-paper);
      transform-origin: right center;
      animation: blockReveal linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 32%;
      z-index: 1;
    }
    @keyframes blockReveal {
      from { transform: scaleX(1); }
      to   { transform: scaleX(0); }
    }
    .tier-v2__stat:nth-child(2) > * { position: relative; z-index: 2; }

    /* The massive $price — scales in with an overshoot */
    .tier-v2__stat:nth-child(2) .tier-v2__stat-value {
      animation: priceScaleIn linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 42%;
    }
    @keyframes priceScaleIn {
      0%   { opacity: 0; transform: scale(0.55) translateY(20px); }
      60%  { opacity: 1; transform: scale(1.08) translateY(0); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* Right-side cells (Duration + Outcome) — staggered fade-up */
    .tier-v2__stat:nth-child(1),
    .tier-v2__stat:nth-child(3) {
      animation: tierFadeUp linear both;
      animation-timeline: view();
    }
    .tier-v2__stat:nth-child(1) { animation-range: entry 18% cover 35%; }
    .tier-v2__stat:nth-child(3) { animation-range: entry 22% cover 40%; }

    /* The accordion + CTA — gentle reveal */
    .tier-v2__more,
    .tier-v2__cta {
      animation: tierFadeUp linear both;
      animation-timeline: view();
    }
    .tier-v2__more { animation-range: entry 28% cover 45%; }
    .tier-v2__cta  { animation-range: entry 32% cover 50%; }

    /* Subtle parallax on the tier number — drifts slightly during scroll */
    .tier-v2__num {
      animation: tierNumDrift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes tierNumDrift {
      from { transform: translateY(20px); }
      to   { transform: translateY(-20px); }
    }
  }
}

.tier-block__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (min-width: 1024px) {
  .tier-block__head {
    grid-template-columns: 1fr auto;
    column-gap: var(--space-6);
    align-items: end;
    margin-bottom: var(--space-7);
  }
  .tier-block__head .section-pretitle { grid-column: 1 / -1; margin-bottom: 0; }
}

.tier-block__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--tissa-carbon);
  margin: var(--space-2) 0 0;
  max-width: 18ch;
}

.tier-block__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--tissa-border);
  border-bottom: 1px solid var(--tissa-border);
  margin: 0;
}
@media (min-width: 640px) {
  .tier-block__meta { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-4); }
}
@media (min-width: 1024px) {
  .tier-block__meta {
    min-width: 480px;
    border: 0;
    padding: 0;
    column-gap: var(--space-5);
  }
}
.tier-block__meta > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
}
@media (min-width: 640px) {
  .tier-block__meta > div + div { border-left: 1px solid var(--tissa-border); padding-left: var(--space-4); }
}
@media (min-width: 1024px) {
  .tier-block__meta > div + div { padding-left: var(--space-5); }
}
.tier-block__meta dt {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin: 0;
}
.tier-block__meta dd {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
  margin: 0;
}
.tier-block__meta-suffix {
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--tissa-carbon-muted);
  margin-left: 4px;
}

/* Body — 2 columns: copy left, list right */
.tier-block__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .tier-block__body {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
    align-items: start;
  }
}

.tier-block__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tier-block__lead {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 52ch;
}

/* Gate / Cadence callout box */
.tier-block__gate,
.tier-block__cadence {
  padding: var(--space-3) var(--space-3);
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tier-block.section--bone .tier-block__gate,
.tier-block.section--bone .tier-block__cadence {
  background: rgba(37, 38, 40, 0.03);
  border-color: rgba(37, 38, 40, 0.08);
}
.tier-block__gate-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
}
.tier-block__gate p,
.tier-block__cadence p {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: 1.4;
  color: var(--tissa-carbon);
  margin: 0;
}

/* Multiple gates (Tier 2 has A + B) */
.tier-block__gates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .tier-block__gates { grid-template-columns: 1fr 1fr; }
}

.tier-block__note {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--tissa-carbon-muted);
  font-style: italic;
  margin: 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--tissa-border);
}

.tier-block__cta {
  align-self: flex-start;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--tissa-carbon);
  padding: 4px 0;
  border-bottom: 1px solid var(--tissa-carbon);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  transition: gap var(--transition);
  margin-top: var(--space-2);
}
.tier-block__cta span { transition: transform var(--transition); display: inline-block; }
.tier-block__cta:hover { gap: 18px; color: var(--tissa-carbon); }
.tier-block__cta:hover span { transform: translateX(4px); }

/* Numbered list (Deliverables / Workstreams / Includes) */
.tier-block__list-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tier-block__list-label {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin: 0;
}
.tier-block__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}
.tier-block__list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--tissa-border);
}
.tier-block__list li:last-child { border-bottom: 1px solid var(--tissa-border); }
.tier-block__list-num {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--tissa-carbon-muted);
}
.tier-block__list-text {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
}

/* ============================================================
   TIER CARD v2 — quiet editorial, hover-driven
   Three levels of hierarchy only:
     1. Title (loudest)        — XL italic
     2. Lead + stats (medium)  — body serif + small mono
     3. Rail / toggle / CTA    — all small mono, quiet
   Animations carry the richness, not chrome.
   ============================================================ */
.tier-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 980px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .tier-v2 { gap: var(--space-6); }
}

/* ── 1. Rail: tiny number — hairline — tiny kicker ─────────── */
.tier-v2__rail {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--tissa-carbon-muted);
}
.tier-v2__num {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--tissa-carbon);
  flex-shrink: 0;
  transition: color 400ms ease, transform 600ms cubic-bezier(0.2, 0, 0, 1);
}
.tier-v2__rail-line {
  flex: 1;
  height: 1px;
  background: var(--tissa-border);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(0.2, 0, 0, 1) 0.15s;
}
[data-reveal-item].is-revealed .tier-v2__rail-line,
.tier-v2__rail.is-revealed .tier-v2__rail-line { transform: scaleX(1); }
.tier-v2--bone .tier-v2__rail-line { background: rgba(37, 38, 40, 0.18); }
.tier-v2__kicker {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  flex-shrink: 0;
  transition: color 400ms ease;
}
.tier-v2:hover .tier-v2__num { color: var(--tissa-carbon); }
.tier-v2:hover .tier-v2__kicker { color: var(--tissa-carbon); }

/* ── 2. Title — dominant, italic ───────────────────────────── */
.tier-v2__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(48px, 8vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 14ch;
}

/* ── 3. Lead ───────────────────────────────────────────────── */
.tier-v2__lead {
  font-family: var(--ff-body);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 60ch;
}
.tier-v2__lead em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  color: var(--tissa-carbon);
}

/* ── 4. Stats — three quiet lines, hairlines only ──────────── */
/* PRICING BLOCK — dramatic dark/light split block.
   LEFT cell (Investment, nth-child 2): solid carbon dark with HUGE
     $price in italic Playfair paper — a magazine cover price tag.
   RIGHT cells (Duration + Outcome): light, stacked with a hairline
     between them. Whole block framed by a carbon border. */
.tier-v2__stats {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--tissa-carbon);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 640px) {
  .tier-v2__stats {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

.tier-v2--bone .tier-v2__stats { border-color: var(--tissa-carbon); }

.tier-v2__stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-4);
  position: relative;
}

.tier-v2__stat-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin: 0;
}

.tier-v2__stat-value {
  align-self: flex-start;
  margin: 0;
  line-height: 1.1;
}

/* CELL 1 · Duration — top-right cell on desktop, hairline below */
.tier-v2__stat:nth-child(1) .tier-v2__stat-value {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
}
@media (min-width: 640px) {
  .tier-v2__stat:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
    border-bottom: 1px solid var(--tissa-border);
  }
}

/* CELL 2 · Investment — DARK CARBON BLOCK, dominant.
   Spans the entire LEFT column (both rows on desktop). */
.tier-v2__stat:nth-child(2) {
  background: var(--tissa-carbon);
  padding: var(--space-5);
  justify-content: center;
  gap: 16px;
  border-top: 1px solid transparent;       /* avoid double border on mobile */
  border-bottom: 1px solid transparent;
}
@media (min-width: 640px) {
  .tier-v2__stat:nth-child(2) {
    grid-column: 1;
    grid-row: 1 / 3;
    padding: var(--space-5) var(--space-5);
  }
}
.tier-v2__stat:nth-child(2) .tier-v2__stat-label {
  color: rgba(247, 244, 238, 0.55);
}
.tier-v2__stat:nth-child(2) .tier-v2__stat-value {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(56px, 9.5vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.026em;
  color: var(--tissa-paper);
}

/* CELL 3 · Outcome — bottom-right cell on desktop */
.tier-v2__stat:nth-child(3) .tier-v2__stat-value {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
}
@media (min-width: 640px) {
  .tier-v2__stat:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Mobile order — Investment first (dominant), then Duration, then Outcome */
@media (max-width: 639px) {
  .tier-v2__stat:nth-child(1) { order: 2; border-top: 1px solid var(--tissa-border); }
  .tier-v2__stat:nth-child(2) { order: 1; }
  .tier-v2__stat:nth-child(3) { order: 3; border-top: 1px solid var(--tissa-border); }
}

.tier-v2__stat:hover .tier-v2__stat-label { color: inherit; }

/* ── 5. Collapsible details (native <details> + interpolate-size) ── */
.tier-v2__more {
  margin: 0;
  border-top: 1px solid var(--tissa-border);
  border-bottom: 1px solid var(--tissa-border);
}
.tier-v2--bone .tier-v2__more {
  border-top-color: rgba(37, 38, 40, 0.18);
  border-bottom-color: rgba(37, 38, 40, 0.18);
}
.tier-v2__toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  transition: color 300ms ease, letter-spacing 400ms ease;
}
.tier-v2__toggle::-webkit-details-marker { display: none; }
.tier-v2__toggle::marker { content: ""; }
.tier-v2__toggle:hover {
  letter-spacing: 0.26em;
}
.tier-v2__toggle-label {
  position: relative;
  display: inline-block;
}
.tier-v2__toggle-label::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--tissa-carbon);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 450ms cubic-bezier(0.2, 0, 0, 1);
}
.tier-v2__toggle:hover .tier-v2__toggle-label::after { transform: scaleX(1); }

/* Plus → minus icon */
.tier-v2__toggle-icon {
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.tier-v2__toggle-icon::before,
.tier-v2__toggle-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--tissa-carbon);
  transition: transform 400ms cubic-bezier(0.2, 0, 0, 1), opacity 300ms ease;
}
.tier-v2__toggle-icon::before {
  width: 100%; height: 1.5px;
}
.tier-v2__toggle-icon::after {
  width: 1.5px; height: 100%;
}
.tier-v2__more[open] .tier-v2__toggle-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}
.tier-v2__more[open] .tier-v2__toggle-icon::before {
  transform: rotate(180deg);
}

/* Panel content */
.tier-v2__panel {
  padding: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tier-v2__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tier-v2__list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-2);
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(37, 38, 40, 0.08);
  position: relative;
  transition: padding-left 400ms cubic-bezier(0.2, 0, 0, 1),
              color 300ms ease;
}
.tier-v2__list li:first-child { padding-top: 4px; }
.tier-v2__list li:last-child { border-bottom: 0; }
.tier-v2__list li::before {
  content: "";
  position: absolute;
  left: -12px; top: 0; bottom: 0;
  width: 2px;
  background: var(--tissa-carbon);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 350ms cubic-bezier(0.2, 0, 0, 1);
}
.tier-v2__list li:hover {
  padding-left: 10px;
}
.tier-v2__list li:hover::before { transform: scaleY(1); }

.tier-v2__list-num {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.tier-v2__list--cadence .tier-v2__list li {
  grid-template-columns: 110px 1fr;
}
.tier-v2__list-text {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.5;
  color: var(--tissa-carbon);
}

.tier-v2__panel-note {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tissa-carbon-muted);
  margin: var(--space-2) 0 0;
  padding-left: var(--space-3);
  border-left: 1px solid var(--tissa-border);
}
.tier-v2--bone .tier-v2__panel-note { border-left-color: rgba(37, 38, 40, 0.18); }
.tier-v2__panel-note-label {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  margin-right: 8px;
}

/* Smooth open/close (Chromium; others get instant). */
@supports (interpolate-size: allow-keywords) {
  .tier-v2__more { interpolate-size: allow-keywords; }
  .tier-v2__more::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 550ms cubic-bezier(0.2, 0, 0, 1),
                opacity 400ms ease,
                content-visibility 550ms allow-discrete;
    transition-behavior: allow-discrete;
  }
  .tier-v2__more[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

/* ── 6. CTA — animated arrow line that draws on hover ──────── */
.tier-v2__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  text-decoration: none;
  position: relative;
}
.tier-v2__cta-text {
  position: relative;
}
.tier-v2__cta-text::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--tissa-carbon);
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 450ms cubic-bezier(0.7, 0, 0.3, 1);
}
.tier-v2__cta:hover .tier-v2__cta-text::after {
  transform-origin: left center;
  transform: scaleX(0);
  transition-delay: 0s;
}

/* Animated arrow: a line that extends + a tip */
.tier-v2__cta-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 28px; height: 12px;
  transition: width 450ms cubic-bezier(0.7, 0, 0.3, 1);
}
.tier-v2__cta-arrow-line {
  position: absolute;
  left: 0; top: 50%;
  width: 100%;
  height: 1.5px;
  background: var(--tissa-carbon);
  transform: scaleX(0.6);
  transform-origin: left center;
  transition: transform 450ms cubic-bezier(0.7, 0, 0.3, 1);
}
.tier-v2__cta-arrow-tip {
  position: absolute;
  right: 0; top: 50%;
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--tissa-carbon);
  border-right: 1.5px solid var(--tissa-carbon);
  transform: translateY(-50%) rotate(45deg);
  transition: transform 450ms cubic-bezier(0.7, 0, 0.3, 1);
}
.tier-v2__cta:hover .tier-v2__cta-arrow { width: 48px; }
.tier-v2__cta:hover .tier-v2__cta-arrow-line { transform: scaleX(1); }
.tier-v2__cta:hover .tier-v2__cta-arrow-tip {
  transform: translateY(-50%) rotate(45deg) translateX(4px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tier-v2__rail-line,
  .tier-v2__stat-value::after,
  .tier-v2__toggle-label::after,
  .tier-v2__list li,
  .tier-v2__list li::before,
  .tier-v2__cta-arrow,
  .tier-v2__cta-arrow-line,
  .tier-v2__cta-arrow-tip,
  .tier-v2__cta-text::after {
    transition: none !important;
  }
}

/* Strategic Add-ons — dark section, 4-col grid */
.services-addons {
  padding: calc(var(--space-8) + var(--space-3)) 0;
}
@media (min-width: 1024px) {
  .services-addons { padding: calc(var(--space-8) + var(--space-7)) 0; }
}

/* PINNED SCROLL — on desktop, the section grows to ~2× viewport height and
   the inner .services-addons__pin sticks to top. The progressive rule fills
   as the user scrolls through that range, gating advance until all 4 cards
   are revealed. On mobile/tablet, the pin is a no-op (natural flow). */
.services-addons__pin {
  /* default: passthrough wrapper */
  padding: 0;
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .services-addons {
    /* Override the padding above — replaced by internal pin spacing */
    padding: 0;
    height: 220vh;                              /* extra scroll room for the timeline */
    position: relative;
  }
  .services-addons__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: var(--space-6) 0;
  }
}
.services-addons__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.services-addons__heading {
  margin-top: var(--space-2);
  max-width: 18ch;
}
.services-addons__lead {
  color: rgba(247, 244, 238, 0.75);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  max-width: 56ch;
  margin: 0;
}
@media (min-width: 1024px) {
  .services-addons__head {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
    align-items: end;
    margin-bottom: var(--space-7);
  }
  .services-addons__head .section-pretitle { grid-column: 1 / -1; margin-bottom: 0; }
  .services-addons__heading { margin: 0; }
  .services-addons__lead { padding-bottom: 8px; max-width: 44ch; }
}

/* Progressive horizontal timeline rule — sits above the 4-column grid.
   The fill bar inside it is width-animated by JS as the user scrolls. */
.services-addons__rule {
  position: relative;
  height: 1px;
  width: 100%;
  background: rgba(247, 244, 238, 0.18);
  margin: var(--space-5) 0 var(--space-4);
  display: none;
}
@media (min-width: 1024px) {
  .services-addons__rule { display: block; }
}
.services-addons__rule-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--tissa-paper);
  transition: width 80ms linear;
  will-change: width;
}

.services-addons__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px)  { .services-addons__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .services-addons__grid { grid-template-columns: repeat(4, 1fr); column-gap: var(--space-4); } }

.services-addon {
  padding-top: var(--space-3);
  border-top: 1px solid rgba(247, 244, 238, 0.18);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Desktop only — cards become driven by --card-progress (set by nav.js as the
   horizontal rule fills). The per-card border-top is removed since the unified
   rule above the grid provides the timeline. */
@media (min-width: 1024px) {
  .services-addon {
    border-top: 0;
    padding-top: var(--space-2);
    opacity: var(--card-progress, 0);
    transform: translateY(calc((1 - var(--card-progress, 0)) * 16px));
    transition: opacity 80ms linear, transform 80ms linear;
    will-change: opacity, transform;
  }
}
@media (prefers-reduced-motion: reduce) {
  .services-addon { opacity: 1 !important; transform: none !important; }
  .services-addons__rule-fill { width: 100% !important; transition: none; }
}
.services-addon__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(247, 244, 238, 0.55);
}
.services-addon__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--tissa-offwhite);
}
.services-addon__body {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: rgba(247, 244, 238, 0.75);
  margin: 0;
}

.services-addons__more {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(247, 244, 238, 0.14);
}
.services-addons__link {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--tissa-offwhite);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--tissa-offwhite);
  padding-bottom: 2px;
  transition: gap var(--transition);
}
.services-addons__link span { display: inline-block; transition: transform var(--transition); }
.services-addons__link:hover { gap: 18px; color: var(--tissa-offwhite); }
.services-addons__link:hover span { transform: translateX(6px); }

/* ============================================================
   ABOUT page
   ============================================================ */

/* Section padding override — generous breathing room (~150-200px) */
.about-origin,
.about-values,
.about-stance,
.about-founder,
.about-security,
.about-philosophy {
  padding: calc(var(--space-8) + var(--space-3)) 0;
}
@media (min-width: 1024px) {
  .about-origin,
  .about-values,
  .about-stance,
  .about-founder,
  .about-security,
  .about-philosophy {
    padding: calc(var(--space-8) + var(--space-6)) 0;
  }
}

/* ============================================================
   WORD-BY-WORD REVEAL — impactful editorial scroll motion
   Each word slides up + fades in with a stagger when the heading
   enters the viewport. Works on any [data-text-reveal] element
   that contains plain text (no nested HTML).
   ============================================================ */
[data-text-reveal] {
  overflow: visible;
}
[data-text-reveal] .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
[data-text-reveal] .word-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.2, 0, 0, 1),
    opacity 0.5s cubic-bezier(0.2, 0, 0, 1);
}
[data-text-reveal].is-revealed .word-inner {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-text-reveal] .word-inner {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* When an element has BOTH data-text-reveal and data-reveal-item, disable
   the outer fade-up — the word-by-word reveal alone handles the entrance. */
[data-text-reveal][data-reveal-item] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Origin story */
.about-origin {
  padding: var(--space-7) 0;
}
.about-origin__lead {
  font-family: var(--ff-body);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: 0 0 var(--space-5);
}
.about-origin__body {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--tissa-carbon-muted);
  margin: 0 0 var(--space-3);
}
.about-origin__body:last-child { margin-bottom: 0; }

/* Pullquote block (the chalk-signed sentence) */
.about-pullquote {
  margin: var(--space-5) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--tissa-border);
  border-bottom: 1px solid var(--tissa-border);
  text-align: center;
}
.about-pullquote p {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
  margin: 0 0 var(--space-3);
  max-width: 24ch;
  margin-inline: auto;
}
.about-pullquote footer {
  font-family: var(--ff-script);
  color: var(--tissa-carbon);
}

/* Founder split */
.about-founder { padding: var(--space-7) 0; }
.about-founder__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .about-founder__grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-7);
    align-items: center;
  }
}
.about-founder__photo {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--tissa-carbon);
}
.about-founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.1) contrast(1.05);
}
.about-founder__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.about-founder__name {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: var(--space-2) 0 0;
}
.about-founder__title {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin: 0;
}
.about-founder__bio {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--tissa-carbon-muted);
  max-width: 48ch;
  margin: 0;
}

/* Values — 4 columns */
.about-values { padding: var(--space-7) 0; }
.about-values__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.about-values__heading {
  margin-top: var(--space-2);
  max-width: 14ch;
}
@media (min-width: 1024px) {
  .about-values__head {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
    align-items: end;
    margin-bottom: var(--space-7);
  }
  .about-values__head .section-pretitle { grid-column: 1 / -1; margin-bottom: 0; }
  .about-values__heading { margin: 0; }
}
.about-values__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px)  { .about-values__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .about-values__grid { grid-template-columns: repeat(4, 1fr); column-gap: var(--space-4); } }

.about-value {
  padding-top: var(--space-3);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Progressive scroll-linked variant ───────────────────────
   A single continuous hairline above the cards extends from left to
   right as the user scrolls through the section. Each card fades in
   when the line crosses it (driven by --card-progress 0..1 set by JS). */
.about-values--progressive .about-values__rule {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--tissa-border);
  margin: var(--space-3) 0 var(--space-4);
  overflow: hidden;
}
.about-values--progressive .about-values__rule-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--tissa-carbon);
  transition: width 80ms linear;
}

/* Cards start hidden, opacity & translateY driven by --card-progress */
.about-values--progressive .about-value {
  padding-top: 0;
  opacity: var(--card-progress, 0);
  transform: translateY(calc((1 - var(--card-progress, 0)) * 16px));
  transition: opacity 80ms linear, transform 80ms linear;
}

/* PINNED SCROLL — on desktop the section grows to 220vh and the inner
   pin sticks. The progressive rule fills as the user scrolls through
   that extra range, gating advance until all 4 conditions are revealed. */
.about-values__pin { padding: 0; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .about-values--progressive {
    padding: 0 !important;                /* override the .section padding */
    height: 220vh;
    position: relative;
  }
  .about-values--progressive .about-values__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: var(--space-6) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-values--progressive .about-values__rule-fill { width: 100% !important; transition: none; }
  .about-values--progressive .about-value { opacity: 1 !important; transform: none !important; }
}
.about-value__num {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--tissa-carbon-muted);
}
.about-value__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
}
.about-value__body {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--tissa-carbon-muted);
  margin: 0;
}

/* ── Horizontal scroll variant (about-values--hscroll) ──────── */
/* On wide viewports: the section pins to top, the cards slide left
   as the user scrolls down. On mobile/tablet: falls back to a normal
   stack via media query. */
.about-values--hscroll { padding: 0; }
.about-values--hscroll .about-values__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: calc(var(--space-7) + var(--space-2));
  margin-bottom: var(--space-5);
}
.about-values--hscroll .about-values__progress {
  display: block;
  width: 120px;
  height: 2px;
  background: rgba(37, 38, 40, 0.14);
  overflow: hidden;
  border-radius: 2px;
  margin-top: var(--space-3);
}
.about-values--hscroll .about-values__progress-bar {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--tissa-carbon);
  transition: width 80ms linear;
}

/* Track + viewport */
.about-values__wrap {
  position: relative;
}
.about-values__pin {
  position: relative;
  padding-bottom: var(--space-7);
}
.about-values__viewport {
  overflow: hidden;
  padding: var(--space-3) 0 var(--space-5);
}
.about-values__track {
  display: flex;
  gap: var(--space-4);
  padding: 0 var(--container-px, 24px);
  will-change: transform;
}
.about-values--hscroll .about-value {
  flex: 0 0 auto;
  width: 320px;
  padding: var(--space-4);
  border: 1px solid var(--tissa-border);
  background: var(--tissa-white);
  border-radius: 6px;
  border-top: 1px solid var(--tissa-border);
}
@media (min-width: 760px) {
  .about-values--hscroll .about-value { width: 360px; padding: var(--space-5); }
}

/* Desktop scroll-jack — sticky pin + tall outer container */
@media (min-width: 900px) {
  .about-values--hscroll .about-values__wrap {
    /* Tall container = 4x viewport. User scrolls through this, cards
       translate horizontally. Tweak vh value to slow/speed the slide. */
    height: 360vh;
  }
  .about-values--hscroll .about-values__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
    overflow: hidden;
  }
  .about-values--hscroll .about-values__viewport {
    padding: var(--space-4) 0;
  }
  .about-values--hscroll .about-values__track {
    padding-left: 0;
    padding-right: 0;
    margin: 0 calc(-1 * var(--container-px, 24px));
    padding-left: var(--container-px, 24px);
    padding-right: var(--container-px, 24px);
  }
  .about-values--hscroll .about-value { width: 420px; }
}

/* Reduced motion: disable scroll-jack, stack normally */
@media (prefers-reduced-motion: reduce) {
  .about-values--hscroll .about-values__wrap { height: auto !important; }
  .about-values--hscroll .about-values__pin {
    position: relative !important;
    height: auto !important;
  }
  .about-values--hscroll .about-values__viewport { overflow: visible; }
  .about-values--hscroll .about-values__track {
    flex-wrap: wrap;
    transform: none !important;
  }
}

/* For / Against — 2 columns, "against" on a carbon-dark block, both
   columns slide in from opposite sides when revealed. */
.about-stance {
  padding: var(--space-7) 0;
  overflow-x: hidden;                       /* prevents off-screen slide-in from causing horizontal scroll */
}
.about-stance__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .about-stance__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
    row-gap: var(--space-5);
    align-items: stretch;
  }
}
.about-stance__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Slide-in default state — starts fully off-screen at the viewport edge,
     opacity 0. Revealed when the SECTION is centered in viewport (custom
     observer in nav.js adds `.about-stance--in-view`). */
  opacity: 0;
  transform: translateX(-110%);
  transition:
    opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.about-stance__col--against {
  transform: translateX(110%);
}

/* Trigger via parent class (set by the dedicated observer in nav.js).
   The data-reveal-item attribute was removed from these cols so the
   global reveal pattern (which uses translateY) doesn't override our
   horizontal slide. */
.about-stance--in-view .about-stance__col,
.about-stance--in-view .about-stance__col--against {
  opacity: 1;
  transform: translateX(0);
}

/* On stacked mobile, both columns slide in from below (single axis is vertical) */
@media (max-width: 767px) {
  .about-stance__col,
  .about-stance__col--against {
    transform: translateY(48px);
  }
  .about-stance__col.is-revealed,
  .about-stance__col--against.is-revealed {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-stance__col,
  .about-stance__col--against {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.about-stance__heading {
  margin: 0;
  max-width: 18ch;
}
.about-stance__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.about-stance__list li {
  padding: var(--space-3) 0 var(--space-3) 28px;
  position: relative;
  border-top: 1px solid var(--tissa-border);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--tissa-carbon);
}
.about-stance__list li:last-child { border-bottom: 1px solid var(--tissa-border); }
.about-stance__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  width: 14px;
  height: 1px;
  background: var(--tissa-carbon);
}

/* AGAINST column — carbon dark block with paper text. Strong visual contrast.
   The slide-in from the right makes the block read as "imposed from outside". */
.about-stance__col--against {
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  padding: var(--space-5) var(--space-4);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .about-stance__col--against {
    padding: var(--space-6) var(--space-5);
  }
}
.about-stance__col--against .about-stance__heading {
  color: var(--tissa-paper);
}
.about-stance__col--against .about-stance__list li {
  color: rgba(247, 244, 238, 0.7);
  border-top-color: rgba(247, 244, 238, 0.16);
  text-decoration: line-through;
  text-decoration-color: rgba(247, 244, 238, 0.22);
  text-decoration-thickness: 1px;
}
.about-stance__col--against .about-stance__list li:last-child {
  border-bottom-color: rgba(247, 244, 238, 0.16);
}
.about-stance__col--against .about-stance__list li::before {
  background: var(--tissa-red);
}

/* Founder photo caption (small label under image) */
.about-founder__caption {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin-top: var(--space-2);
  padding: 0 4px;
}

/* Security — 5 items in editorial grid */
.about-security { padding: var(--space-7) 0; }
.about-security__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.about-security__heading {
  margin-top: var(--space-2);
  max-width: 18ch;
}
@media (min-width: 1024px) {
  .about-security__head {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
    align-items: end;
    margin-bottom: var(--space-7);
  }
  .about-security__head .section-pretitle { grid-column: 1 / -1; margin-bottom: 0; }
  .about-security__heading { margin: 0; }
}

.about-security__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px)  { .about-security__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .about-security__grid { grid-template-columns: repeat(3, 1fr); } }

/* Adjust security grid for flip cards — slightly taller gap */
.about-security__grid { row-gap: var(--space-4); }
@media (min-width: 1024px) {
  .about-security__grid { row-gap: var(--space-5); }
}

/* ============================================================
   SECURITY — Static stacked cards with dark-wash hover (same
   pattern as .addon-card in sub-services). Number + title + body
   are all visible at once; hovering sweeps a carbon wash from the
   bottom-left corner and inverts text to offwhite.
   ============================================================ */
.security-card {
  position: relative;
  aspect-ratio: auto;
  perspective: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  border-radius: 4px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--tissa-carbon);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--transition), color var(--transition);
  min-height: 220px;
}
.security-card:focus-visible {
  outline: 2px solid var(--tissa-carbon);
  outline-offset: 4px;
}
/* Overlay wash — grows from bottom-left to fill on hover */
.security-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  background: var(--tissa-carbon);
  z-index: -1;
  transition: width 520ms cubic-bezier(0.2, 0, 0, 1),
              height 520ms cubic-bezier(0.2, 0, 0, 1);
}
.security-card:hover {
  border-color: var(--tissa-carbon);
  color: var(--tissa-offwhite);
}
.security-card:hover::after { width: 100%; height: 100%; }

/* Inner/face wrappers — flatten so all content cascades to the card flex column */
.security-card__inner,
.security-card__face,
.security-card__face--front,
.security-card__face--back { display: contents !important; }

/* Hint (legacy "Reveal ↻") — no longer needed in static layout */
.security-card__hint { display: none !important; }

/* Number — mono caps small label at the top */
.security-card__num {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--tissa-carbon);
  transition: color var(--transition);
}
.security-card:hover .security-card__num { color: rgba(247, 244, 238, 0.6); }

/* Title — italic Playfair */
.security-card__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
  margin: 0;
  transition: color var(--transition);
}
.security-card:hover .security-card__title { color: var(--tissa-offwhite); }

/* Back-label — hide since the title already serves as identifier */
.security-card__back-label { display: none; }

/* Body — body serif description (no longer italic Playfair) */
.security-card__body {
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: 0;
  transition: color var(--transition);
}
.security-card:hover .security-card__body { color: var(--tissa-offwhite); }

/* ============================================================
   DELIVERABLE FLIP CARDS — flippable 3D, icon + italic title
   Used on service detail pages ("What you get" sections).
   Front: icon + title + body. Back: format + detail.
   ============================================================ */
.deliverable-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .deliverable-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
@media (min-width: 1024px) {
  .deliverable-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Force-static override — convert .deliverable-flip 3D cards to the same
   stacked layout as .addon-card. All content visible at once, no flip.
   Hover: dark wash sweeps from bottom-left to fill the card. */
.deliverable-flip {
  position: relative !important;
  aspect-ratio: auto !important;
  perspective: none !important;
  cursor: default !important;
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  border-radius: 4px;
  padding: var(--space-4);
  display: flex !important;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  color: var(--tissa-carbon);
  transition: border-color var(--transition), color var(--transition);
  overflow: hidden;
  isolation: isolate;
}
.deliverable-flip::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  background: var(--tissa-carbon);
  z-index: -1;
  transition: width 520ms cubic-bezier(0.2, 0, 0, 1),
              height 520ms cubic-bezier(0.2, 0, 0, 1);
}
.deliverable-flip:hover {
  border-color: var(--tissa-carbon);
  color: var(--tissa-offwhite);
}
.deliverable-flip:hover::after { width: 100%; height: 100%; }
.deliverable-flip__inner,
.deliverable-flip__face,
.deliverable-flip__face--front,
.deliverable-flip__face--back { display: contents !important; }
.deliverable-flip__inner { transform: none !important; }
.deliverable-flip__hint,
.deliverable-flip__back-label { display: none !important; }
.deliverable-flip__icon {
  width: 56px;
  height: 56px;
  color: var(--tissa-carbon-muted);
  transition: color var(--transition);
}
.deliverable-flip:hover .deliverable-flip__icon { color: var(--tissa-offwhite); }
.deliverable-flip__title {
  color: var(--tissa-carbon);
  margin: 0;
  max-width: none;
  transition: color var(--transition);
}
.deliverable-flip:hover .deliverable-flip__title { color: var(--tissa-offwhite); }
.deliverable-flip__face--front .deliverable-flip__desc { display: block; }
.deliverable-flip__desc {
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: 0;
  transition: color var(--transition);
}
.deliverable-flip:hover .deliverable-flip__desc { color: var(--tissa-offwhite); }
.deliverable-flip__face--back {
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.deliverable-flip__back-body {
  font-family: var(--ff-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--tissa-carbon) !important;
  transition: color var(--transition);
}
.deliverable-flip:hover .deliverable-flip__back-body { color: var(--tissa-offwhite) !important; }
.deliverable-flip__format {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--tissa-border);
  transition: border-color var(--transition);
}
.deliverable-flip:hover .deliverable-flip__format { border-top-color: rgba(247, 244, 238, 0.2); }
.deliverable-flip__format-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  transition: color var(--transition);
}
.deliverable-flip__format-value {
  color: var(--tissa-carbon);
  transition: color var(--transition);
}
.deliverable-flip:hover .deliverable-flip__format-label { color: rgba(247, 244, 238, 0.6); }
.deliverable-flip:hover .deliverable-flip__format-value { color: var(--tissa-offwhite); }

.deliverable-flip {
  position: relative;
  /* Portrait orientation so longer descriptions don't crop. */
  aspect-ratio: 4 / 5;
  perspective: 1400px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
}
@media (min-width: 1024px) {
  /* On wider columns we get more horizontal room — relax to 5:6. */
  .deliverable-flip { aspect-ratio: 5 / 6; }
}
.deliverable-flip:focus-visible {
  outline: 2px solid var(--tissa-carbon);
  outline-offset: 6px;
  border-radius: 10px;
}

.deliverable-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .deliverable-flip:hover .deliverable-flip__inner { transform: rotateY(180deg); }
}
.deliverable-flip.is-flipped .deliverable-flip__inner { transform: rotateY(180deg); }

.deliverable-flip__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 8px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .deliverable-flip__face { padding: var(--space-4) var(--space-4); gap: var(--space-3); }
}

/* FRONT — light, icon + title + body */
.deliverable-flip__face--front {
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  color: var(--tissa-carbon);
  transition: border-color 360ms ease, transform 360ms cubic-bezier(0.2, 0, 0, 1);
}
.deliverable-flip:hover .deliverable-flip__face--front {
  border-color: var(--tissa-carbon);
}

.deliverable-flip__icon {
  width: 30px;
  height: 30px;
  color: var(--tissa-carbon);
  flex-shrink: 0;
}
.deliverable-flip__icon svg { width: 100%; height: 100%; display: block; }

.deliverable-flip__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
  margin: 6px 0 0;
  max-width: 14ch;
}

/* Front description hidden — front face stays minimal: icon + title + hint.
   The full description lives on the back, matching the simplified addon-card
   pattern used across all service detail pages. */
.deliverable-flip__face--front .deliverable-flip__desc { display: none; }
.deliverable-flip__desc {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 38ch;
}
@media (min-width: 1024px) {
  .deliverable-flip__desc { font-size: 14.5px; line-height: 1.55; }
}

.deliverable-flip__hint {
  margin-top: auto;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  transition: color 280ms ease, gap 280ms ease;
}
.deliverable-flip__hint span {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0;
  transition: transform 480ms cubic-bezier(0.2, 0, 0, 1);
}
.deliverable-flip:hover .deliverable-flip__hint { color: var(--tissa-carbon); gap: 14px; }
.deliverable-flip:hover .deliverable-flip__hint span { transform: rotate(180deg); }

/* BACK — dark carbon */
.deliverable-flip__face--back {
  transform: rotateY(180deg);
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  border: 1px solid var(--tissa-carbon);
  padding: var(--space-4);
  gap: var(--space-2);
}
@media (min-width: 1024px) {
  .deliverable-flip__face--back { padding: var(--space-4); gap: var(--space-3); }
}

.deliverable-flip__back-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.6);
}

.deliverable-flip__back-body {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.4;
  color: var(--tissa-offwhite);
  margin: 0;
}

.deliverable-flip__format {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(247, 244, 238, 0.18);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.deliverable-flip__format-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.6);
}
.deliverable-flip__format-value {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--tissa-paper);
}

@media (prefers-reduced-motion: reduce) {
  .deliverable-flip__inner { transition: none; }
  .deliverable-flip:hover .deliverable-flip__inner { transform: none; }
}

/* ============================================================
   WORK INDEX PAGE — Selected work / Case studies grid
   Hero + filter + staggered editorial grid + footnote.
   ============================================================ */

/* Hero */
.work-hero {
  padding: calc(var(--space-7) + var(--space-2)) 0 calc(var(--space-7) + var(--space-2));
  background: var(--tissa-white);
}
@media (min-width: 1024px) {
  .work-hero { padding: calc(var(--space-8) + var(--space-3)) 0 calc(var(--space-8) + var(--space-2)); }
}
.work-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.work-hero__eyebrow,
.work-hero__count {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.work-hero__count { display: inline-flex; align-items: center; gap: 8px; }
.work-hero__count::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--tissa-carbon-muted);
}
.work-hero__stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 1100px;
}
.work-hero__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(44px, 6.5vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 16ch;
}
.work-hero__lead {
  font-family: var(--ff-body);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 58ch;
}
.work-hero__lead em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
}

/* ── Work features — full editorial spread per case study ─────── */
.work-features {
  padding: calc(var(--space-7) + var(--space-2)) 0 0;
}
.work-feature {
  padding: calc(var(--space-6) + var(--space-2)) 0;
}
@media (min-width: 1024px) {
  .work-feature { padding: calc(var(--space-8) + var(--space-2)) 0; }
}
.work-feature + .work-feature {
  border-top: 1px solid var(--tissa-border);
}
.work-feature__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 1024px) {
  .work-feature__grid {
    grid-template-columns: 5fr 7fr;
    column-gap: var(--space-7);
  }
  .work-feature--flip .work-feature__grid {
    grid-template-columns: 7fr 5fr;
  }
  .work-feature--flip .work-feature__media { order: 0; }
  .work-feature--flip .work-feature__text { order: 1; }
}
.work-feature__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-2);
}
@media (min-width: 1024px) { .work-feature__text { padding-top: var(--space-5); } }
.work-feature__header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.work-feature__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}
.work-feature__logo.is-broken { display: none; }
.work-feature__id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.work-feature__client {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  line-height: 1.3;
}
.work-feature__service {
  font-family: var(--ff-body);
  font-size: 14px;
  font-style: italic;
  color: var(--tissa-carbon-muted);
  line-height: 1.4;
}
.work-feature__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 16ch;
}
.work-feature__desc {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 52ch;
}
.work-feature__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.work-feature__list li {
  font-family: var(--ff-body);
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.5;
  color: var(--tissa-carbon);
  padding-left: 16px;
  position: relative;
}
.work-feature__list li::before {
  content: "·";
  position: absolute;
  left: 4px;
  top: -2px;
  font-size: 22px;
  line-height: 1;
  color: var(--tissa-carbon);
}
.work-feature__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--tissa-carbon);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  padding-bottom: 4px;
  margin-top: var(--space-2);
  border-bottom: 1px solid var(--tissa-carbon);
  transition: gap 360ms cubic-bezier(0.2, 0, 0, 1);
}
.work-feature__cta:hover { gap: 20px; }
.work-feature__arrow {
  position: relative;
  width: 24px;
  height: 10px;
  display: inline-block;
  transition: transform 360ms cubic-bezier(0.2, 0, 0, 1);
}
.work-feature__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: var(--tissa-carbon);
  transform: translateY(-50%);
}
.work-feature__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--tissa-carbon);
  border-right: 1.5px solid var(--tissa-carbon);
  transform: translateY(-50%) rotate(45deg);
}
.work-feature__cta:hover .work-feature__arrow { transform: translateX(4px); }

/* MEDIA — 1 main + 2 supporting in a sub-grid */
.work-feature__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.work-feature__media-main,
.work-feature__media-support {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--tissa-offwhite);
  margin: 0;
}
.work-feature__media-main { aspect-ratio: 16 / 11; }
.work-feature__media-support { aspect-ratio: 1 / 1; }
.work-feature__media-main img,
.work-feature__media-support img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}
.work-feature__media-main:hover img,
.work-feature__media-support:hover img {
  transform: scale(1.03);
}
.work-feature__media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
/* Fallback for failed images */
.work-feature__media-main.is-fallback,
.work-feature__media-support.is-fallback {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 22px,
      rgba(37, 38, 40, 0.04) 22px 23px
    ),
    var(--tissa-offwhite);
}
.work-feature__media-main.is-fallback::before,
.work-feature__media-support.is-fallback::before {
  content: "Tissa";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-script);
  font-size: clamp(40px, 5vw, 72px);
  color: var(--tissa-carbon);
  opacity: 0.22;
  letter-spacing: -0.02em;
}

/* ── Legacy work-card/grid styles (kept hidden in case of cache) ── */
.work-index { display: none; }
.work-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 760px) {
  .work-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
    row-gap: var(--space-7);
  }
  /* Editorial offset: every even-indexed card sits ~80px lower for rhythm */
  .work-grid > .work-card:nth-child(even) {
    margin-top: var(--space-7);
  }
}
@media (min-width: 1024px) {
  .work-grid {
    column-gap: var(--space-6);
    row-gap: var(--space-8);
  }
  .work-grid > .work-card:nth-child(even) {
    margin-top: calc(var(--space-8) + var(--space-2));
  }
}

/* Each card */
.work-card {
  margin: 0;
  transition:
    opacity 380ms cubic-bezier(0.2, 0, 0, 1),
    transform 480ms cubic-bezier(0.2, 0, 0, 1),
    margin 480ms cubic-bezier(0.2, 0, 0, 1);
}
.work-card.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  /* Collapse grid track so the layout reflows */
  display: none;
}
.work-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--tissa-carbon);
}

.work-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 5;
  background: var(--tissa-offwhite);
  margin: 0;
}

/* If the image fails to load (onerror handler removes the <img> and adds
   this modifier), show an editorial fallback with the wordmark + diagonal
   hatching — quiet, on-brand, still framed by the plate badge. */
.work-card__media--fallback {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 24px,
      rgba(37, 38, 40, 0.04) 24px 25px
    ),
    var(--tissa-offwhite);
}
.work-card__media--fallback::before {
  content: "Tissa";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-script);
  font-size: clamp(48px, 6vw, 88px);
  color: var(--tissa-carbon);
  opacity: 0.22;
  letter-spacing: -0.02em;
  pointer-events: none;
}
.work-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.08) contrast(1.02);
  transition: transform 1.1s cubic-bezier(0.2, 0, 0, 1), filter 700ms ease;
  will-change: transform;
}
.work-card__link:hover .work-card__img {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1.04);
}
.work-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: var(--space-2);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.work-card__meta > span + span::before {
  content: "·";
  margin-right: 10px;
  color: var(--tissa-border);
}
.work-card__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 22ch;
  transition: transform 480ms cubic-bezier(0.2, 0, 0, 1);
}
.work-card__link:hover .work-card__title { transform: translateX(4px); }

.work-card__client {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
}
.work-card__cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  transition: gap 360ms cubic-bezier(0.2, 0, 0, 1);
}
.work-card__link:hover .work-card__cta { gap: 18px; }
.work-card__arrow {
  position: relative;
  width: 26px;
  height: 10px;
  display: inline-block;
}
.work-card__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: var(--tissa-carbon);
  transform: translateY(-50%);
}
.work-card__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--tissa-carbon);
  border-right: 1.5px solid var(--tissa-carbon);
  transform: translateY(-50%) rotate(45deg);
}

/* Index footnote */
.work-footnote {
  padding: var(--space-6) 0 calc(var(--space-7) + var(--space-2));
  background: var(--tissa-offwhite);
  border-top: 1px solid var(--tissa-border);
  text-align: center;
}
.work-footnote__text {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
  color: var(--tissa-carbon);
  margin: 0 auto;
  max-width: 32ch;
}
.work-footnote__text em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
}

/* "What you get" section header — simple title above the grid */
.deliverable-grid__head {
  margin-bottom: var(--space-5);
}
.deliverable-grid__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--tissa-carbon);
  margin: 0;
}

/* Philosophy section (dark ink bg) */
.about-philosophy { padding: var(--space-7) 0; }
.about-philosophy__heading {
  margin-top: var(--space-3);
  max-width: 22ch;
  margin-inline: auto;
}
.about-philosophy__body {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: rgba(247, 244, 238, 0.78);
  margin-top: var(--space-4);
  max-width: 56ch;
  margin-inline: auto;
}

/* ============================================================
   CASE STUDY pages — Vivre-style portfolio detail layout
   ============================================================ */

/* Navbar for image hero pages — mirrors has-video-hero behavior
   (transparent over hero, white when scrolled) but no pinned hero */
body.has-image-hero .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(247, 244, 238, 0.12);
}
body.has-image-hero .site-header .brand__mark { filter: invert(1); }
body.has-image-hero .site-header .nav__link { color: var(--tissa-offwhite); }
body.has-image-hero .site-header .nav__link:hover { color: var(--tissa-white); }
body.has-image-hero .site-header .nav__cta {
  background: transparent;
  color: var(--tissa-white);
  border: 1px solid var(--tissa-white);
}
body.has-image-hero .site-header .nav__cta:hover {
  background: var(--tissa-white);
  color: var(--tissa-carbon);
  border-color: var(--tissa-white);
}
body.has-image-hero.scrolled .site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--tissa-border);
}
body.has-image-hero.scrolled .site-header .brand__mark { filter: none; }
body.has-image-hero.scrolled .site-header .nav__link { color: var(--tissa-carbon-muted); }
body.has-image-hero.scrolled .site-header .nav__link:hover { color: var(--tissa-carbon); }
body.has-image-hero.scrolled .site-header .nav__cta {
  background: transparent;
  color: var(--tissa-carbon);
  border: 1px solid var(--tissa-carbon);
}
body.has-image-hero.scrolled .site-header .nav__cta:hover {
  background: var(--tissa-carbon);
  color: var(--tissa-white);
  border-color: var(--tissa-carbon);
}

/* Hero — full-width image with title + meta overlaid at bottom */
.case-hero {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 560px;
  max-height: 820px;
  overflow: hidden;
  background: var(--tissa-carbon);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.case-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.04);
  animation: caseHeroZoom 5s cubic-bezier(0.2, 0, 0, 1) 0.2s forwards;
}
@keyframes caseHeroZoom {
  to { transform: scale(1); }
}
.case-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0.78) 100%);
  pointer-events: none;
}
.case-hero__content {
  position: relative;
  z-index: 2;
  /* Vertical only — preserve .container's horizontal padding when both
     classes are on the same element (the canonical pattern). */
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  width: 100%;
}

/* ============================================================
   Case-hero REVEAL modifier — same animation as the manifesto:
   image slides up from below while a cover panel slides down to
   uncurtain it. Trigger: nav.js adds .is-revealed via observer
   on the section's [data-reveal-item] attribute.
   ============================================================ */
.case-hero--reveal .case-hero__image {
  animation: none;                       /* disable the default zoom keyframes */
  transform: translateY(20%);
  opacity: 0;
  transition:
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1) 150ms,
    opacity 800ms ease 150ms;
  will-change: transform, opacity;
}
.case-hero--reveal.is-revealed .case-hero__image {
  transform: translateY(0);
  opacity: 1;
}

.case-hero__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--tissa-ink);
  transform: translateY(0);
  transition: transform 1100ms cubic-bezier(0.85, 0, 0.15, 1) 600ms;
  pointer-events: none;
  will-change: transform;
}
.case-hero--reveal.is-revealed .case-hero__cover {
  transform: translateY(100%);
}

/* Lift the content above the cover so the text reveal stays unblocked */
.case-hero--reveal .case-hero__content {
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .case-hero--reveal .case-hero__image,
  .case-hero--reveal .case-hero__cover {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .case-hero--reveal .case-hero__cover { display: none; }
}
.case-hero__title {
  color: var(--tissa-offwhite);
  margin-bottom: var(--space-4);
  max-width: 20ch;
}
.case-hero__title h1,
.case-hero__title { /* if h1 used directly with class */
  color: var(--tissa-offwhite);
}
.case-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}
.case-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.case-hero__meta-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.55);
}
.case-hero__meta-value {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--tissa-offwhite);
  line-height: 1.2;
}

/* Sections inside case page */
.case-section { padding: var(--space-7) 0; }
.case-section--tight { padding: var(--space-5) 0; }
.case-section--bone { background: var(--tissa-white); }

.case-description {
  font-family: var(--ff-body);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.55;
  color: var(--tissa-carbon);
  max-width: 64ch;
}
.case-description p + p { margin-top: var(--space-3); }

/* 2-col image gallery */
.case-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .case-gallery { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}
.case-gallery__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* Overview sections (Strategy / What we did) */
.case-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .case-overview { grid-template-columns: minmax(180px, 220px) 1fr; gap: var(--space-7); }
}
.case-overview__heading {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin: 6px 0 0;
}
.case-overview__body {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--tissa-carbon);
  max-width: 64ch;
}
.case-overview__body p + p { margin-top: var(--space-3); }

.case-overview__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.case-overview__list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--tissa-border);
}
.case-overview__list li:last-child { border-bottom: 1px solid var(--tissa-border); }
.case-overview__list-num {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--tissa-carbon-muted);
  letter-spacing: 0.1em;
}
.case-overview__list-text {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
}

/* Stats / Results */
.case-stats__head {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin-bottom: var(--space-5);
}
.case-stat {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--tissa-border);
}
.case-stat:last-child { border-bottom: 1px solid var(--tissa-border); }
@media (min-width: 768px) {
  .case-stat {
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: var(--space-6);
    align-items: end;
  }
}
.case-stat__num {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(64px, 9vw, 124px);
  line-height: 0.92;
  color: var(--tissa-carbon);
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums;
}
.case-stat__desc {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--tissa-carbon-muted);
  max-width: 56ch;
  padding-bottom: 14px;
}

/* Next project nav */
.case-nav {
  border-top: 1px solid var(--tissa-border);
  padding: var(--space-6) 0;
}
.case-nav__inner {
  display: flex;
  justify-content: flex-end;
}
.case-nav__link {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-decoration: none;
  color: var(--tissa-carbon);
}
.case-nav__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.case-nav__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: gap var(--transition);
}
.case-nav__title span { transition: transform var(--transition); display: inline-block; }
.case-nav__link:hover .case-nav__title { gap: 24px; }
.case-nav__link:hover .case-nav__title span { transform: translateX(6px); }

/* ============================================================
   WORK — Brand Universe horizontal scroll-snap carousel
   ============================================================ */
.work { padding-bottom: var(--space-7); }

.work__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
  .work__head {
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: var(--space-5);
    margin-bottom: var(--space-7);
  }
}

.work__head-left { display: flex; flex-direction: column; gap: var(--space-3); }
.work__heading {
  margin: 0;
  max-width: 16ch;
  line-height: 1.0;
}

.work__nav {
  display: flex;
  gap: 12px;
  justify-self: end;
}
.work__btn {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--tissa-carbon);
  background: transparent;
  color: var(--tissa-carbon);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.work__btn:hover {
  background: var(--tissa-carbon);
  color: var(--tissa-white);
}
.work__btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.work__btn:disabled:hover {
  background: transparent;
  color: var(--tissa-carbon);
}

.work__carousel {
  position: relative;
  overflow: hidden;
}
.work__track {
  display: flex;
  gap: var(--space-3);
  padding: 0 var(--container-pad-m) var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.work__track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .work__track { gap: var(--space-4); padding-left: var(--container-pad-t); padding-right: var(--container-pad-t); }
}
@media (min-width: 1024px) {
  .work__track { padding-left: var(--container-pad-d); padding-right: var(--container-pad-d); }
}

.work-case {
  flex: 0 0 auto;
  width: 80vw;
  max-width: 360px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--tissa-carbon);
  transition: transform var(--transition);
  position: relative;
}
@media (min-width: 768px) { .work-case { width: 50vw; max-width: 420px; } }
@media (min-width: 1024px) { .work-case { width: 32vw; max-width: 460px; } }
.work-case:hover { color: var(--tissa-carbon); }

.work-case__media {
  position: relative;
  margin: 0 0 var(--space-3);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--tissa-carbon);
  border-radius: 8px;
  isolation: isolate;
  transition: box-shadow 0.5s cubic-bezier(0.2, 0, 0, 1), transform 0.5s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}
.work-case:hover .work-case__media {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(37, 38, 40, 0.28);
}

.work-case__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) brightness(0.78) contrast(1.05);
  transform: scale(1.01);
  transition: transform 1.2s cubic-bezier(0.2, 0, 0, 1), filter 0.6s ease;
}
.work-case:hover .work-case__media img {
  transform: scale(1.08);
  filter: grayscale(0) brightness(1) contrast(1.03);
}

/* Bottom-fade overlay for number legibility — softens on hover for cleaner image */
.work-case__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
  transition: background 0.5s ease;
}
.work-case:hover .work-case__media::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%);
}

.work-case__num { display: none; }

/* Arrow icon — slides in from top-right on hover */
.work-case__arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--tissa-offwhite);
  color: var(--tissa-carbon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transform: translate3d(8px, -8px, 0) scale(0.78);
  transition: opacity 0.4s cubic-bezier(0.2, 0, 0, 1),
              transform 0.4s cubic-bezier(0.2, 0, 0, 1),
              background var(--transition),
              color var(--transition);
}
.work-case:hover .work-case__arrow {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.work-case__arrow svg { display: block; }
@media (max-width: 767px) {
  /* On touch devices, show the arrow by default (no hover state to discover it) */
  .work-case__arrow { opacity: 1; transform: none; }
}

.work-case__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px;
}
.work-case__tag {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.work-case__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.work-case__copy {
  color: var(--tissa-carbon-muted);
  font-size: var(--fs-body);
  line-height: 1.5;
  max-width: 40ch;
}
.work-case__cta {
  margin-top: 6px;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--tissa-carbon);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--tissa-carbon);
  align-self: flex-start;
  padding-bottom: 2px;
  transition: gap var(--transition);
}
.work-case__cta span { transition: transform var(--transition); display: inline-block; }
.work-case:hover .work-case__cta { gap: 16px; }
.work-case:hover .work-case__cta span { transform: translateX(4px); }

/* ============================================================
   CLIENTS — "Brands that trust us" logo cards row
   ============================================================ */
.clients__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.clients__heading {
  margin-top: var(--space-2);
  max-width: 14ch;
}
@media (min-width: 1024px) {
  .clients__head { margin-bottom: var(--space-6); }
}

.clients__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px)  { .clients__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .clients__grid { grid-template-columns: repeat(6, 1fr); gap: 16px; } }

.client-card {
  position: relative;
  aspect-ratio: 16 / 10;
  background: rgba(37, 38, 40, 0.045);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-3);
  color: var(--tissa-carbon);
  text-decoration: none;
  text-align: center;
  transition: background var(--transition), transform var(--transition);
  overflow: hidden;
}
.client-card:hover {
  background: rgba(37, 38, 40, 0.08);
  transform: translateY(-2px);
  color: var(--tissa-carbon);
}

.client-card__name {
  display: block;
  line-height: 1;
  color: var(--tissa-carbon);
}
.client-card__tag {
  display: block;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  line-height: 1;
}
.client-card__tag--mono { letter-spacing: 0.15em; }

/* Per-brand typographic styling (stand-ins for real logos) */
.client-card__name--script {
  font-family: var(--ff-script);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  letter-spacing: 0;
}
.client-card__name--mono {
  font-family: var(--ff-mono);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.client-card__name--serif {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.01em;
}
.client-card__name--display {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: 0.04em;
}
.client-card__name--italic {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.01em;
}
.client-card__name--san {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: -0.01em;
}

/* ============================================================
   TESTIMONIALS — Client Perspective section
   ============================================================ */
/* Tinted section background — anchors the slideshow visually */
.section.testimonials,
.section.section--ink.testimonials { background: var(--tissa-carbon); }
.section.testimonials .section-pretitle__text { color: rgba(251, 249, 245, 0.7); }
.section.testimonials .section-pretitle__line { background: rgba(251, 249, 245, 0.25); }
.section.testimonials .testimonials__heading { color: var(--tissa-paper); }
.section.testimonials .testimonials__lead { color: rgba(251, 249, 245, 0.65); }
.section.testimonials .testimonial::before { color: var(--tissa-paper); opacity: 0.06; }
.section.testimonials .testimonial__quote { color: var(--tissa-paper); }
.section.testimonials .testimonial__attr { color: rgba(251, 249, 245, 0.55); }
.section.testimonials .testimonial__attr::before { background: rgba(251, 249, 245, 0.4); }
.section.testimonials .testimonials__btn {
  border-color: rgba(251, 249, 245, 0.3);
  color: var(--tissa-paper);
}
.section.testimonials .testimonials__btn:hover {
  background: var(--tissa-paper);
  border-color: var(--tissa-paper);
  color: var(--tissa-carbon);
}
.section.testimonials .testimonials__dot { background: rgba(251, 249, 245, 0.25); }
.section.testimonials .testimonials__dot:hover { background: rgba(251, 249, 245, 0.55); }
.section.testimonials .testimonials__dot.is-active { background: var(--tissa-paper); }

/* Centered head — heading, quote, and controls now share one axis */
.testimonials__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  margin: 0 auto var(--space-4);
  max-width: 680px;
}
.testimonials__heading {
  margin: 0;
  max-width: 22ch;
  text-align: center;
  font-size: clamp(32px, 4.6vw, 56px);
}
.testimonials__lead {
  color: var(--tissa-carbon-muted);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  max-width: 56ch;
  margin: 0;
}

/* Slideshow */
.testimonials__slideshow {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

.testimonials__viewport {
  overflow: hidden;
  width: 100%;
}

.testimonials__track {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}

.testimonial {
  flex: 0 0 100%;
  min-width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6) var(--space-3) var(--space-4);
  min-height: 260px;
}
@media (min-width: 768px) {
  .testimonial { padding: var(--space-6) var(--space-5) var(--space-4); min-height: 300px; }
}

/* Giant ornamental quote mark behind the testimonial */
.testimonial::before {
  content: "\201C";                                       /* curly left quote */
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(120px, 18vw, 200px);
  line-height: 1;
  color: var(--tissa-carbon);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.testimonial__quote {
  position: relative;
  z-index: 1;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--tissa-carbon);
  margin: 0 auto;
  max-width: 38ch;
}

.testimonial__attr {
  position: relative;
  z-index: 1;
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.testimonial__attr::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 1px;
  background: var(--tissa-border-dark);
}

/* Controls — hairline ticks (not dots), refined arrows */
.testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.testimonials__btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--tissa-border-dark);
  background: transparent;
  color: var(--tissa-carbon);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.testimonials__btn:hover {
  background: var(--tissa-carbon);
  border-color: var(--tissa-carbon);
  color: var(--tissa-paper);
}

/* Editorial hairline ticks instead of dot indicators */
.testimonials__dots {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0 var(--space-2);
}
.testimonials__dot {
  width: 24px;
  height: 1px;
  background: var(--tissa-border-dark);
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition), height var(--transition), width var(--transition);
}
.testimonials__dot:hover { background: var(--tissa-carbon-muted); }
.testimonials__dot.is-active {
  background: var(--tissa-carbon);
  height: 2px;
  width: 36px;
}

/* ============================================================
   FRAMEWORK — The 4C section (sticky stacking cards + parallax)
   ============================================================ */
.framework { padding: var(--space-7) 0 0; }
@media (min-width: 1024px) { .framework { padding-top: var(--space-8); } }

.framework__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.framework__heading {
  margin: var(--space-2) 0 0;
  max-width: 14ch;
}
.framework__lead {
  color: var(--tissa-carbon-muted);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  max-width: 56ch;
}
.framework__lead a { color: var(--tissa-carbon); }
.framework__lead a:hover { color: var(--tissa-carbon); }

/* ============================================================
   FRAMEWORK GRID — viewfinder tiles with animated icons
   OROYA-style corner brackets framing an SVG icon that animates
   continuously and gets a stronger choreography on hover.
   ============================================================ */
.framework-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-7);
}
@media (min-width: 1024px) {
  .framework-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

.framework-tile { position: relative; }
.framework-tile__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--tissa-carbon);
  text-decoration: none;
  transition: color var(--transition);
}

/* Viewfinder frame — the box where corner brackets live around the icon */
.framework-tile__frame {
  position: relative;
  width: clamp(110px, 13vw, 150px);
  height: clamp(110px, 13vw, 150px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Corner brackets removed — icon stands alone inside the frame. */
.framework-tile__corner { display: none; }

/* Icon — sits inside the viewfinder, ~55% of frame width */
.framework-tile__icon {
  width: 56%;
  height: 56%;
  stroke: var(--tissa-carbon);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.framework-tile__icon * {
  transform-box: fill-box;
  transform-origin: center;
}

/* Number + title + copy */
.framework-tile__num {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.framework-tile__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
  margin: 0;
}
.framework-tile__copy {
  font-family: var(--ff-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tissa-carbon-muted);
  max-width: 28ch;
  margin: 0;
}

/* ============================================================
   ICON ANIMATIONS — one keyframe set per principle
   ============================================================ */

/* ============================================================
   IDLE STATE — icons render as static SVG. No animation runs.
   On hover, each tile's icon animation kicks in and loops.
   ============================================================ */

/* 01 Clarity — concentric rings + center dot (static by default) */
.framework-tile__icon--clarity .ring { opacity: 0.5; }
.framework-tile__icon--clarity .dot { fill: var(--tissa-carbon); stroke: none; }

.framework-tile:hover .framework-tile__icon--clarity .ring {
  animation: clarityRipple 0.9s cubic-bezier(0.2, 0, 0, 1) infinite;
}
.framework-tile:hover .framework-tile__icon--clarity .ring--outer { animation-delay: 0s; }
.framework-tile:hover .framework-tile__icon--clarity .ring--mid   { animation-delay: 0.12s; }
.framework-tile:hover .framework-tile__icon--clarity .ring--inner { animation-delay: 0.24s; }
.framework-tile:hover .framework-tile__icon--clarity .dot {
  animation: clarityDot 0.9s cubic-bezier(0.2, 0, 0, 1) infinite;
}
@keyframes clarityRipple {
  0%   { transform: scale(0.5); opacity: 0; }
  20%  { opacity: 0.9; }
  100% { transform: scale(1); opacity: 0.25; }
}
@keyframes clarityDot {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.6); }
}

/* 02 Coherence — interlinked circles (static by default) */
.framework-tile:hover .framework-tile__icon--coherence .link--a {
  animation: coherenceOrbit 1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.framework-tile:hover .framework-tile__icon--coherence .link--b {
  animation: coherenceOrbit2 1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes coherenceOrbit {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
@keyframes coherenceOrbit2 {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-4px); }
}

/* 03 Consistency — bars rise/fall equalizer (static by default — all bars at full height) */
.framework-tile__icon--consistency .bar { transform-origin: bottom center; }
.framework-tile:hover .framework-tile__icon--consistency .bar {
  animation: consistencyPulse 0.5s cubic-bezier(0.2, 0, 0, 1) infinite;
}
.framework-tile:hover .framework-tile__icon--consistency .bar--1 { animation-delay: 0s; }
.framework-tile:hover .framework-tile__icon--consistency .bar--2 { animation-delay: 0.05s; }
.framework-tile:hover .framework-tile__icon--consistency .bar--3 { animation-delay: 0.1s; }
.framework-tile:hover .framework-tile__icon--consistency .bar--4 { animation-delay: 0.15s; }
.framework-tile:hover .framework-tile__icon--consistency .bar--5 { animation-delay: 0.2s; }
@keyframes consistencyPulse {
  0%, 100% { transform: scaleY(0.55); }
  50%      { transform: scaleY(1); }
}

/* 04 Control — gate icon (static = full gate + check rendered by default) */
.framework-tile__icon--control .post { fill: var(--tissa-carbon); stroke: none; }
.framework-tile:hover .framework-tile__icon--control .beam {
  stroke-dasharray: 30;
  animation: controlBeam 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.framework-tile:hover .framework-tile__icon--control .check {
  stroke-dasharray: 30;
  animation: controlCheck 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.35s;
}
@keyframes controlBeam {
  0%   { stroke-dashoffset: 30; }
  35%  { stroke-dashoffset: 0; }
  85%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -30; }
}
@keyframes controlCheck {
  0%, 25% { stroke-dashoffset: 30; }
  50%     { stroke-dashoffset: 0; }
  90%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: -30; }
}

@media (prefers-reduced-motion: reduce) {
  .framework-tile__icon *,
  .framework-tile__corner {
    animation: none !important;
    transition: none !important;
  }
}

/* Mobile spacing tweaks */
@media (max-width: 640px) {
  .framework-grid { gap: var(--space-3); padding-bottom: var(--space-6); }
  .framework-tile__frame { width: 110px; height: 110px; }
  .framework-tile__copy { font-size: 13px; max-width: 32ch; }
}

@media (min-width: 1024px) {
  .framework__head {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
    row-gap: var(--space-4);
    align-items: end;
    margin-bottom: var(--space-7);
  }
  .framework__head .section-pretitle {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  .framework__heading { margin: 0; }
  .framework__lead {
    margin: 0;
    padding-bottom: 8px;
    max-width: 48ch;
  }
}

.framework__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-7);
}

.framework-card {
  position: relative;
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  border-radius: 6px;
  padding: var(--space-5) var(--space-4);
  min-height: 280px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: 0 1px 2px rgba(37, 38, 40, 0.03);
}

@media (min-width: 768px) {
  .framework-card {
    grid-template-columns: minmax(180px, 280px) 1fr;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-6);
    min-height: 360px;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  /* Sticky stacking — each card pins with a staggered top so users see the
     top edge of every previous card as it stacks. */
  .framework-card {
    position: sticky;
    top: 100px;
  }
  .framework-card--1 { top: 100px; }
  .framework-card--2 { top: 124px; }
  .framework-card--3 { top: 148px; }
  .framework-card--4 { top: 172px; }
}

.framework-card__num {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(96px, 14vw, 200px);
  line-height: 0.85;
  color: var(--tissa-carbon);
  letter-spacing: -0.04em;
  display: block;
  position: relative;
}
.framework-card__num > span {
  display: inline-block;
  will-change: transform;
}

.framework-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 56ch;
}

.framework-card__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  color: var(--tissa-carbon);
  letter-spacing: -0.015em;
}

.framework-card__copy {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--tissa-carbon-muted);
  max-width: 48ch;
}

.framework-card__verb {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--tissa-carbon);
  text-transform: uppercase;
  border-top: 1px solid var(--tissa-border);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}

.framework-card:hover {
  border-color: var(--tissa-carbon);
}

@media (prefers-reduced-motion: reduce) {
  @media (min-width: 1024px) {
    .framework-card {
      position: relative;
      top: 0 !important;
    }
  }
}

/* ============================================================
   RESULTS — Facts & Numbers section (Vivre-style)
   ============================================================ */
.results__head {
  margin-bottom: var(--space-6);
  max-width: 760px;
}
.results__heading {
  max-width: 12ch;
  margin-top: var(--space-2);
}

/* Reusable section pretitle: caps mono text + horizontal accent line.
   Used inside light sections (the hero variant lives under .hero--video). */
.section-pretitle {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--space-3);
}
.section-pretitle__text {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  white-space: nowrap;
}
.section-pretitle__line {
  display: inline-block;
  width: 80px;
  height: 1px;
  background: var(--tissa-carbon-muted);
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: left center;
}

.results__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (min-width: 768px)  { .results__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .results__grid { column-gap: var(--space-5); row-gap: var(--space-6); } }

/* 4-col centered variant — plain badges (no cards), italic Playfair numbers */
.results__grid--4 {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 768px)  { .results__grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }

.result {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: var(--space-3);
  border-top: var(--border-thin);
}

/* Centered (badge) variant — no border, centered, item-aligned to middle */
.result--center {
  align-items: center;
  text-align: center;
  border-top: 0;
  padding-top: 0;
  gap: 14px;
}

.result__num {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(56px, 7vw, 88px);
  line-height: 1;
  color: var(--tissa-carbon);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.result__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--tissa-carbon-muted);
  text-transform: uppercase;
  line-height: 1.4;
}

/* ============================================================
   SCROLL REVEAL — per-element trigger
   Each [data-reveal-item] is observed individually. It animates when
   ITS OWN top edge crosses the viewport reveal line, not when the
   parent section appears. Scroll-driven, no per-section stagger.
   ============================================================ */
[data-reveal-item] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0, 0, 1),
              transform 0.7s cubic-bezier(0.2, 0, 0, 1);
  will-change: opacity, transform;
}
[data-reveal-item].is-revealed { opacity: 1; transform: translateY(0); }

/* Pretitle line draws in when its container item is revealed */
.is-revealed .section-pretitle__line,
[data-reveal-item].is-revealed .section-pretitle__line {
  transform: scaleX(1);
  transition: transform 1s cubic-bezier(0.2, 0, 0, 1) 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-item] { opacity: 1; transform: none; transition: none; }
  .section-pretitle__line { transform: scaleX(1); }
}

/* ============================================================
   ASSESSMENT STRIP (numbers row used on Home & Services)
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4) 0;
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
}
@media (min-width: 768px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metric__num {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--tissa-ink);
}
.metric__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  color: var(--tissa-graphite);
  margin-top: 6px;
}

/* ============================================================
   NAV SUBMENU — desktop dropdown + mobile inline expansion
   The Services link gets a dropdown listing the 4 sub-services.
   On ≥1024px: hover/focus reveals a floating dropdown below.
   On mobile: clicking expands inline within the mobile menu.
   ============================================================ */
.nav__item--has-submenu { position: relative; }

.nav__link--has-submenu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.nav__caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
  display: inline-block;
}
.nav__item--has-submenu[data-open="true"] .nav__caret {
  transform: translateY(1px) rotate(-135deg);
}

/* Submenu panel — quiet, single-column list, light shadow */
.nav__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 220px;
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  border-radius: 8px;
  box-shadow:
    0 4px 12px -4px rgba(0, 0, 0, 0.10),
    0 14px 28px -14px rgba(0, 0, 0, 0.14);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 240ms cubic-bezier(0.2, 0, 0, 1),
    transform 280ms cubic-bezier(0.2, 0, 0, 1),
    visibility 0s linear 240ms;
  z-index: 60;
}
/* Bridge so cursor can move from link to panel without losing hover */
.nav__submenu::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}

/* Open states — hover, focus-within, JS-driven data-open */
.nav__item--has-submenu:hover .nav__submenu,
.nav__item--has-submenu:focus-within .nav__submenu,
.nav__item--has-submenu[data-open="true"] .nav__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(8px);
  transition:
    opacity 280ms cubic-bezier(0.2, 0, 0, 1),
    transform 320ms cubic-bezier(0.2, 0, 0, 1),
    visibility 0s linear 0s;
}

/* Submenu links — bare-minimum: just the service name */
.nav__submenu-link {
  display: block;
  padding: 7px 12px;
  border-radius: 5px;
  color: var(--tissa-carbon);
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
  position: relative;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.3;
}
.nav__submenu-link:hover,
.nav__submenu-link:focus-visible {
  background: var(--tissa-offwhite);
  outline: none;
}
.nav__submenu-link--active {
  background: rgba(37, 38, 40, 0.04);
  color: var(--tissa-carbon);
}

/* Hide everything except the title — least info possible */
.nav__submenu-num,
.nav__submenu-meta { display: none; }
.nav__submenu-text { display: contents; }
.nav__submenu-title {
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--tissa-carbon);
  letter-spacing: 0;
}

/* When the header has scrolled (light bg), submenu sits as-is.
   When over a transparent hero (no .scrolled), still use white panel. */
body.has-video-hero .nav__submenu,
body.has-image-hero .nav__submenu {
  background: var(--tissa-white);
}

/* ── Mobile: submenu becomes an inline expansion in the drawer ── */
@media (max-width: 1023px) {
  .nav__item--has-submenu { width: 100%; }
  .nav__caret { margin-left: auto; }
  .nav__submenu {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin-top: 6px;
    /* Animate height via grid-rows trick — works inside mobile drawer */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 380ms cubic-bezier(0.2, 0, 0, 1),
                opacity 280ms ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .nav__submenu > * { min-height: 0; }
  .nav__item--has-submenu[data-open="true"] .nav__submenu {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  /* Hover open should NOT trigger on touch — only the data-open does */
  .nav__item--has-submenu:hover .nav__submenu,
  .nav__item--has-submenu:focus-within .nav__submenu {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .nav__item--has-submenu[data-open="true"]:hover .nav__submenu,
  .nav__item--has-submenu[data-open="true"]:focus-within .nav__submenu,
  .nav__item--has-submenu[data-open="true"] .nav__submenu {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav__submenu-link {
    padding: 14px 12px 14px 18px;
  }
  .nav__submenu-title { font-size: 22px; }
}

/* ============================================================
   SERVICE DETAIL PAGES
   ============================================================ */

/* Hero — bounded so the title sits within a screen-height from the navbar */
.service-hero {
  padding: calc(var(--space-6) + var(--space-2)) 0 calc(var(--space-7) + var(--space-2));
  background: var(--tissa-white);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .service-hero { padding: calc(var(--space-6) + var(--space-3)) 0 calc(var(--space-8) + var(--space-3)); }
}

/* Image hero variant — overlays a background photo on the service-hero,
   flips text to paper, matches the editorial /about pattern. */
.service-hero--image {
  background: var(--tissa-carbon);
  min-height: 70vh;
  padding: calc(var(--space-7) + var(--space-3)) 0 calc(var(--space-7) + var(--space-2));
}
@media (min-width: 1024px) {
  .service-hero--image { padding: calc(var(--space-8) + var(--space-3)) 0 calc(var(--space-8) + var(--space-2)); }
}
.service-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: grayscale(0.25) contrast(1.05) brightness(0.92);
}
.service-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(37, 38, 40, 0.45) 0%,
    rgba(37, 38, 40, 0.6) 50%,
    rgba(37, 38, 40, 0.85) 100%
  );
  z-index: -1;
}
.service-hero--image .service-hero__back {
  background: rgba(247, 244, 238, 0.08);
  border-color: rgba(247, 244, 238, 0.25);
  color: var(--tissa-paper);
  backdrop-filter: blur(2px);
}
.service-hero--image .service-hero__back:hover {
  background: var(--tissa-paper);
  color: var(--tissa-carbon);
  border-color: var(--tissa-paper);
}
.service-hero--image .service-hero__tier {
  color: rgba(247, 244, 238, 0.85);
}
.service-hero--image .service-hero__title { color: var(--tissa-paper); }
.service-hero--image .service-hero__tagline {
  color: rgba(247, 244, 238, 0.92);
}
.service-hero--image .service-hero__tagline em {
  color: var(--tissa-paper);
}
.service-hero--image .service-hero__watermark {
  color: var(--tissa-paper);
  opacity: 0.08;
}
.service-hero--image .service-hero__jump {
  color: var(--tissa-paper);
}
.service-hero--image .service-hero__jump::after {
  background: var(--tissa-paper);
}
.service-hero--image .btn:not(.btn--on-ink) {
  background: var(--tissa-paper);
  color: var(--tissa-carbon);
  border-color: var(--tissa-paper);
}
.service-hero--image .btn:not(.btn--on-ink):hover {
  background: transparent;
  color: var(--tissa-paper);
  border-color: var(--tissa-paper);
}

/* Top rail — Back button (left) + Tier label (right) */
.service-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .service-hero__top { margin-bottom: var(--space-7); }
}

/* Back to Services button */
.service-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  text-decoration: none;
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  border-radius: 999px;
  transition: background 280ms ease, color 280ms ease, gap 320ms cubic-bezier(0.2, 0, 0, 1), border-color 280ms ease;
}
.service-hero__back:hover {
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  border-color: var(--tissa-carbon);
  gap: 16px;
}
.service-hero__back-arrow {
  position: relative;
  width: 22px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* Drawn arrow: horizontal line + chevron tip on the left */
.service-hero__back-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
}
.service-hero__back-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
}
.service-hero__back:hover .service-hero__back-arrow::before,
.service-hero__back:hover .service-hero__back-arrow::after {
  transform: translateY(-50%) translateX(-4px);
}
.service-hero__back:hover .service-hero__back-arrow::after {
  transform: translateY(-50%) translateX(-4px) rotate(45deg);
}

.service-hero__tier {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  text-align: right;
}

/* Legacy crumbs class — kept for backwards-compat with other places, hidden in hero */
.service-hero__crumbs { display: none; }

/* ── HERO V3 — editorial briefing, no cinematic tricks ─────── */
.service-hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  max-width: 1100px;
}
@media (min-width: 1024px) {
  .service-hero__stage { gap: var(--space-5); margin-bottom: var(--space-7); }
}

/* Watermark disabled — kept selector so old markup doesn't error visually */
.service-hero__watermark { display: none; }

.service-hero__title {
  position: relative;
  z-index: 1;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 18ch;
}
.service-hero__tagline {
  position: relative;
  z-index: 1;
  font-family: var(--ff-body);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 56ch;
}
.service-hero__tagline em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  color: var(--tissa-carbon);
}

/* CTA row */
.service-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
@media (min-width: 1024px) {
  .service-hero__cta-row { margin-bottom: var(--space-8); }
}
.service-hero__jump {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap 320ms cubic-bezier(0.2, 0, 0, 1);
  position: relative;
}
.service-hero__jump::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: calc(100% - 22px);
  height: 1px;
  background: var(--tissa-carbon);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 380ms cubic-bezier(0.2, 0, 0, 1);
}
.service-hero__jump:hover { gap: 14px; }
.service-hero__jump:hover::after { transform: scaleX(1); }
.service-hero__jump > span:last-child {
  transition: transform 380ms cubic-bezier(0.2, 0, 0, 1);
  font-size: 16px;
  letter-spacing: 0;
}
.service-hero__jump:hover > span:last-child { transform: translateY(3px); }

/* Stats strip is now folded into the meta-glance band below the hero —
   hidden in the hero itself to keep the hero quiet. */
.service-hero__stats { display: none; }

/* ── Sticky sidenav — REMOVED (too noisy for editorial direction) ── */
.srv-sidenav { display: none !important; }
@media (min-width: 1280px) {
  .srv-sidenav {
    display: none !important;
    position: fixed;
    top: 50%;
    right: var(--space-4);
    transform: translateY(-50%);
    z-index: 40;
    pointer-events: none; /* let the page scroll, only links catch */
  }
  .srv-sidenav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    pointer-events: auto;
  }
  .srv-sidenav__link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--tissa-carbon-muted);
    font-family: var(--ff-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: color 280ms ease;
  }
  .srv-sidenav__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--tissa-carbon-muted);
    transition:
      background 320ms cubic-bezier(0.2, 0, 0, 1),
      border-color 320ms ease,
      width 320ms cubic-bezier(0.2, 0, 0, 1);
    flex-shrink: 0;
  }
  .srv-sidenav__label {
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 320ms ease, transform 320ms cubic-bezier(0.2, 0, 0, 1);
    white-space: nowrap;
    background: var(--tissa-white);
    padding: 6px 12px;
    border: 1px solid var(--tissa-border);
    border-radius: 999px;
  }
  .srv-sidenav__link:hover .srv-sidenav__label,
  .srv-sidenav__link:focus-visible .srv-sidenav__label,
  .srv-sidenav__link.is-active .srv-sidenav__label {
    opacity: 1;
    transform: translateX(0);
  }
  .srv-sidenav__link:hover .srv-sidenav__dot,
  .srv-sidenav__link:focus-visible .srv-sidenav__dot {
    border-color: var(--tissa-carbon);
    background: var(--tissa-carbon);
  }
  .srv-sidenav__link:hover,
  .srv-sidenav__link.is-active { color: var(--tissa-carbon); }
  .srv-sidenav__link.is-active .srv-sidenav__dot {
    background: var(--tissa-carbon);
    border-color: var(--tissa-carbon);
    width: 18px;
    border-radius: 999px;
  }
}

/* ── Section chapter marker V3 — quiet editorial section opener ── */
.service-section { position: relative; }
.service-chapter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  max-width: 56ch;
}
@media (min-width: 1024px) {
  .service-chapter { margin-bottom: var(--space-6); }
}
/* Number badge legacy — removed from HTML, hidden here too */
.service-chapter__num {
  display: none !important;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.service-chapter__num::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--tissa-carbon-muted);
  flex-shrink: 0;
}
.service-section--ink .service-chapter__num { color: var(--tissa-border); }
.service-section--ink .service-chapter__num::before { background: var(--tissa-border); }

.service-chapter__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.service-chapter__eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin-bottom: var(--space-2);
}
.service-section--ink .service-chapter__eyebrow {
  color: rgba(247, 244, 238, 0.65);
}
.service-chapter__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 22ch;
}
.service-section--ink .service-chapter__title { color: var(--tissa-paper); }
.service-chapter__sub {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--tissa-carbon-muted);
  margin: var(--space-2) 0 0;
  max-width: 56ch;
}
.service-section--ink .service-chapter__sub { color: var(--tissa-line); }

/* ── Editorial section divider — small centered hairline ornament ── */
.service-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) 0;
  background: var(--tissa-white);
}
.service-divider::before,
.service-divider::after {
  content: "";
  width: 60px;
  height: 1px;
  background: var(--tissa-border);
}
.service-divider__dot {
  width: 4px;
  height: 4px;
  background: var(--tissa-carbon);
  border-radius: 50%;
  margin: 0 18px;
}

/* ── Drop cap — for opening paragraphs of editorial prose ── */
.service-prose--editorial p:first-of-type::first-letter {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(64px, 6vw, 92px);
  line-height: 0.85;
  float: left;
  margin: 6px 12px 0 0;
  color: var(--tissa-carbon);
}

/* ── Sign-off block — masthead-style at the bottom of each page ── */
.service-signoff {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--tissa-border);
  background: var(--tissa-white);
}
.service-signoff__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 760px) {
  .service-signoff__inner {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--space-5);
  }
}
.service-signoff__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.service-signoff__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.service-signoff__value {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.35;
  color: var(--tissa-carbon);
}

/* ── At-a-glance meta panel — quiet inset right after hero ── */
.service-glance {
  background: var(--tissa-offwhite);
  border-top: 1px solid var(--tissa-border);
  border-bottom: 1px solid var(--tissa-border);
  padding: var(--space-5) 0;
}
.service-glance__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (min-width: 760px) {
  .service-glance__inner { grid-template-columns: repeat(4, 1fr); }
}
.service-glance__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px var(--space-3) 14px 0;
  border-bottom: 1px solid var(--tissa-border);
}
.service-glance__item:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 760px) {
  .service-glance__item {
    padding: 0 var(--space-3) 0 0;
    border-right: 1px solid var(--tissa-border);
    border-bottom: 0;
  }
  .service-glance__item + .service-glance__item { padding-left: var(--space-3); }
  .service-glance__item:last-child { border-right: 0; padding-right: 0; }
}
.service-glance__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.service-glance__value {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
}
.service-glance__note {
  font-family: var(--ff-body);
  font-size: 12.5px;
  color: var(--tissa-carbon-muted);
  margin-top: 2px;
}

/* ── Editorial pullquote — for a single mid-page moment ── */
.service-pull {
  padding: var(--space-7) 0;
  text-align: center;
  background: var(--tissa-white);
}
.service-pull__mark {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--tissa-carbon);
  opacity: 0.18;
  margin: 0 0 var(--space-2);
}
.service-pull__text {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--tissa-carbon);
  margin: 0 auto;
  max-width: 24ch;
}
.service-pull__cite {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  display: block;
  margin-top: var(--space-3);
}

/* ── Pull-quote callout — for big editorial moments mid-page ── */
.service-pullquote {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--tissa-border);
  border-bottom: 1px solid var(--tissa-border);
  position: relative;
}
.service-pullquote__mark {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(80px, 10vw, 140px);
  line-height: 0.7;
  color: var(--tissa-carbon);
  opacity: 0.12;
  align-self: flex-start;
  margin: 0;
  user-select: none;
}
.service-pullquote__text {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 26ch;
}
.service-pullquote__attribution {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin-top: var(--space-2);
}

/* Generic section padding for service detail pages */
.service-section {
  padding: calc(var(--space-7) + var(--space-3)) 0;
}
@media (min-width: 1024px) {
  .service-section { padding: calc(var(--space-8) + var(--space-5)) 0; }
}
.service-section--bone { background: var(--tissa-white); }
.service-section--ink {
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
}

/* Service prose blocks */
.service-prose { display: flex; flex-direction: column; gap: var(--space-3); }
.service-prose__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tissa-carbon);
  margin: 0 0 var(--space-2);
  max-width: 22ch;
}
.service-prose p {
  font-family: var(--ff-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 64ch;
}
.service-prose p em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  color: var(--tissa-carbon);
}
.service-prose p strong {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
}
.service-prose__list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.service-prose__list li {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--tissa-carbon);
  padding-left: var(--space-3);
  border-left: 2px solid var(--tissa-border);
}
.service-prose__list li strong {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
}

/* Deliverables / Workstreams head */
.service-deliverables__head,
.service-timeline__head,
.service-fit__head,
.service-faq__head,
.service-pricing__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.service-deliverables__heading,
.service-timeline__heading,
.service-fit__heading,
.service-faq__heading,
.service-pricing__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: inherit;
  margin: 0;
  max-width: 22ch;
}
.service-section--ink .service-deliverables__heading,
.service-section--ink .service-timeline__heading,
.service-section--ink .gate-explainer__heading {
  color: var(--tissa-paper);
}
.service-pricing__lead {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--tissa-carbon-muted);
  margin: 0;
  max-width: 60ch;
}

/* Numbered deliverables list */
/* ===========================================================================
   DELIVERABLES LIST — redesigned with massive italic numerals, format pills,
   and a 3-col layout on desktop. Each item shifts right on hover with a
   subtle ornament and the format pill inverts to carbon.
   =========================================================================== */
.service-deliverables__list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--tissa-border);
}
.service-section--bone .service-deliverables__list { border-top-color: rgba(37, 38, 40, 0.16); }

.deliverable {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--tissa-border);
  transition: padding-left 480ms cubic-bezier(0.2, 0, 0, 1);
}
@media (min-width: 768px) {
  .deliverable {
    grid-template-columns: 110px 1fr auto;
    column-gap: var(--space-5);
    padding: var(--space-5) 0;
  }
}
@media (min-width: 1024px) {
  .deliverable {
    grid-template-columns: 140px 1fr auto;
    column-gap: var(--space-6);
    padding: var(--space-6) 0;
  }
}
.service-section--bone .deliverable { border-bottom-color: rgba(37, 38, 40, 0.16); }
.deliverable:hover { padding-left: 14px; }

/* MASSIVE italic numeral — the visual anchor of each row */
.deliverable__num {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(44px, 6.5vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--tissa-carbon);
  padding-top: 4px;
  transition: transform 480ms cubic-bezier(0.2, 0, 0, 1), color 320ms ease;
  align-self: start;
}
.deliverable:hover .deliverable__num { transform: translateX(4px); }
.service-section--bone .deliverable__num { color: var(--tissa-carbon); }

/* Body */
.deliverable__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 60ch;
  align-self: start;
  padding-top: 8px;
}
.deliverable__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--tissa-carbon);
  margin: 0;
}
.deliverable__desc {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--tissa-carbon-muted);
  margin: 0;
}

/* Format pill — outlined badge, inverts on row hover */
.deliverable__format {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-2);
  padding: 7px 14px;
  border: 1px solid var(--tissa-border);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  white-space: nowrap;
  width: fit-content;
  align-self: start;
  transition:
    background-color 280ms ease,
    color 280ms ease,
    border-color 280ms ease,
    transform 480ms cubic-bezier(0.2, 0, 0, 1);
}
@media (min-width: 768px) {
  .deliverable__format {
    margin-top: 0;
    align-self: center;
    padding-top: 8px;
  }
}
.deliverable:hover .deliverable__format {
  background: var(--tissa-carbon);
  border-color: var(--tissa-carbon);
  color: var(--tissa-paper);
  transform: translateX(-4px);
}
.service-section--bone .deliverable__format {
  border-color: rgba(37, 38, 40, 0.22);
}

/* Faint inline divider under the numeral on desktop — adds editorial gravitas */
@media (min-width: 1024px) {
  .deliverable::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 0;
    height: 1px;
    background: var(--tissa-carbon);
    transition: width 520ms cubic-bezier(0.2, 0, 0, 1);
    z-index: 0;
  }
  .deliverable:hover::before { width: 6px; }
}

/* ============================================================
   PROCESS SECTION — pinned scroll-jacking layout.
   The whole section pins to the viewport while the user scrolls;
   the active step advances as scroll progresses, switching the
   sticky image and filling the vertical line indicator. The user
   only moves past the section when they've scrolled through all
   the steps. Disabled on mobile (vertical stack instead).
   ============================================================ */
.process-section {
  position: relative;
  padding: 0 0 var(--space-5);                        /* tighter exit buffer after the runway */
}
.process-section__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;                        /* anchor to top so heading isn't clipped */
  padding-top: calc(76px + var(--space-4));           /* clear the fixed navbar */
  padding-bottom: var(--space-5);
  overflow: hidden;
}
/* Scroll runway height — viewport per step + tight exit buffer */
.process-section[data-steps="3"] { min-height: 280vh; }
.process-section[data-steps="4"] { min-height: 360vh; }
.process-section[data-steps="5"] { min-height: 440vh; }
.process-section[data-steps="6"] { min-height: 520vh; }
.process-section[data-steps="7"] { min-height: 600vh; }

/* On smaller screens, skip the scroll-jacking — stack everything
   linearly so the page reads normally. */
@media (max-width: 1023px) {
  .process-section {
    min-height: 0 !important;
    padding: var(--space-7) 0;
  }
  .process-section__pin {
    position: static;
    height: auto;
    padding: 0;
    overflow: visible;
  }
}

.process-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);                      /* tighter so pin content fits 100vh */
}
@media (min-width: 900px) {
  .process-header {
    grid-template-columns: 1.1fr 1fr;
    column-gap: var(--space-6);
    align-items: end;
    margin-bottom: var(--space-5);
  }
}
.process-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
}
.process-header__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tissa-carbon);
  flex: 0 0 8px;
}
.process-header__label {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
}
.process-header__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);                /* slimmed so pin content fits 100vh */
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 18ch;
}
.process-header__desc {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--tissa-carbon-muted);
  margin: 0;
  max-width: 48ch;
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .process-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
    align-items: start;
  }
}

/* Steps column — vertical line indicator runs on the left */
.process-steps {
  position: relative;
  padding-left: 56px;
}
.process-line {
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--tissa-border);
  overflow: hidden;
}
.process-line__fill {
  position: absolute;
  inset: 0;
  background: var(--tissa-carbon);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 600ms cubic-bezier(0.2, 0, 0, 1);
}

.process-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                                /* tighter so pin content fits 100vh */
}
/* When pinned with many steps, the list scrolls internally so every step
   stays visible even if the column overflows the viewport */
@media (min-width: 1024px) {
  .process-steps__list {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
    padding-right: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--tissa-border) transparent;
    scroll-behavior: smooth;
  }
  .process-steps__list::-webkit-scrollbar { width: 4px; }
  .process-steps__list::-webkit-scrollbar-track { background: transparent; }
  .process-steps__list::-webkit-scrollbar-thumb {
    background: var(--tissa-border);
    border-radius: 2px;
  }
}
.process-step { position: relative; }
.process-step__number {
  position: absolute;
  left: -56px;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 2px;                                 /* squared, not circular */
  border: 1px solid var(--tissa-border);
  background: var(--tissa-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 360ms cubic-bezier(0.2, 0, 0, 1),
              border-color 360ms cubic-bezier(0.2, 0, 0, 1),
              color 360ms cubic-bezier(0.2, 0, 0, 1);
}
.process-step__number span {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--tissa-carbon-muted);
  transition: color 360ms ease;
}
.process-step.is-active .process-step__number,
.process-step.is-passed .process-step__number {
  background: var(--tissa-carbon);
  border-color: var(--tissa-carbon);
}
.process-step.is-active .process-step__number span,
.process-step.is-passed .process-step__number span { color: var(--tissa-offwhite); }

.process-step__when {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin-bottom: 6px;
  display: block;
}
.process-step__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);                /* slimmer so 4 steps + image fit pin */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
  margin: 0 0 6px;
}
.process-step__desc {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 48ch;
}

/* Images column — stacked images that swap per active step.
   Inside the pinned section, no sticky needed (the whole section is sticky). */
.process-images {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  background: var(--tissa-offwhite);
}
@media (min-width: 1024px) {
  .process-images {
    aspect-ratio: auto;
    height: calc(100vh - 240px);                      /* fill remaining viewport inside pin */
    max-height: 600px;
  }
}
.process-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.process-image.is-active {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .process-image, .process-line__fill, .process-step__number, .process-step__number span {
    transition: none !important;
  }
}

/* Mobile: stack stages vertically + reduce sticky image to small banner */
@media (max-width: 1023px) {
  .process-images { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .process-section { padding: var(--space-7) 0; }
  .process-steps { padding-left: 44px; }
  .process-step__number { left: -44px; width: 26px; height: 26px; }
  .process-step__number span { font-size: 11px; }
  .process-line { left: 12px; }
}

/* Legacy: original timeline kept for backwards compat */

/* Timeline list (Diagnostic) */
.service-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  counter-reset: step;
  border-top: 1px solid var(--tissa-border);
}
.timeline-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--tissa-border);
}
@media (min-width: 720px) {
  .timeline-step {
    grid-template-columns: 140px 1fr;
    gap: var(--space-5);
  }
}
.timeline-step__week {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  padding-top: 6px;
}
.timeline-step__body { display: flex; flex-direction: column; gap: 8px; }
.timeline-step__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
  margin: 0;
}
.timeline-step__body p {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 60ch;
}

/* Gate explainer (Diagnostic) */
.gate-explainer { display: flex; flex-direction: column; gap: var(--space-4); }
.gate-explainer__tag {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-border);
  padding: 6px 12px;
  border: 1px solid rgba(247, 244, 238, 0.2);
  border-radius: 999px;
  align-self: flex-start;
}
.gate-explainer__lead {
  font-family: var(--ff-body);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  color: var(--tissa-line);
  margin: 0 0 var(--space-3);
  max-width: 60ch;
}
.gate-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);                         /* breathing room from chapter header */
  width: 100%;                                        /* fill the container width */
}
@media (min-width: 760px) {
  .gate-options { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .gate-options--two { grid-template-columns: 1fr 1fr; }
}
.gate-option {
  padding: var(--space-4);
  background: rgba(247, 244, 238, 0.04);
  border: 1px solid rgba(247, 244, 238, 0.14);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 280ms ease, transform 380ms cubic-bezier(0.2, 0, 0, 1);
}
.gate-option:hover {
  background: rgba(247, 244, 238, 0.08);
  transform: translateY(-2px);
}
.gate-option__label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tissa-border);
  align-self: flex-start;
  padding: 3px 8px;
  border: 1px solid rgba(247, 244, 238, 0.2);
  border-radius: 4px;
}
.gate-option__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.15;
  color: var(--tissa-paper);
  margin: 0;
}
.gate-option__when {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tissa-border);
}
.gate-option p {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--tissa-line);
  margin: 0;
}

/* Service fit (built for / not built for) */
.service-fit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 760px) {
  .service-fit__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}
.service-fit__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  border-radius: 10px;
}
.service-fit__col--against { background: rgba(37, 38, 40, 0.02); }
.service-fit__col-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.service-fit__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.service-fit__list li {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  color: var(--tissa-carbon);
  padding: 10px 0;
  border-bottom: 1px solid rgba(37, 38, 40, 0.08);
}
.service-fit__list li:last-child { border-bottom: 0; }
.service-fit__col--against .service-fit__list li {
  color: var(--tissa-carbon-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(37, 38, 40, 0.25);
}

/* ============================================================
   FAQ SECTION — dark split layout
   LEFT col: badge + heading + contact info
   RIGHT col: list of questions with + icons, hairline rules
   ============================================================ */
/* Bumped specificity · zebra-stripe rule for main > section:nth-of-type(2n) was overriding · 2026-05-15 fix */
main > section.faq-section,
.faq-section {
  background: var(--tissa-carbon) !important;
  color: var(--tissa-offwhite) !important;
  padding: var(--space-8) 0;
}
.faq-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .faq-section__grid {
    grid-template-columns: 1fr 1.4fr;
    column-gap: var(--space-7);
  }
}

.faq-section__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-section__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: var(--tissa-offwhite);
  color: var(--tissa-carbon);
  padding: 6px 12px;
  border-radius: 4px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.faq-section__badge-dot { display: none; }
.faq-section__heading {
  font-family: var(--ff-ui);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tissa-offwhite);
  margin: 0;
  max-width: 12ch;
}

.faq-section__contact {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-section__contact-lead {
  font-family: var(--ff-ui);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tissa-offwhite);
  margin: 0 0 var(--space-2);
}
.faq-section__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-ui);
  font-size: 14px;
  color: var(--tissa-offwhite);
  text-decoration: none;
  transition: color var(--transition);
}
.faq-section__contact-link:hover { color: var(--tissa-white); }
.faq-section__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(247, 244, 238, 0.3);
  border-radius: 50%;
  font-size: 11px;
  flex: 0 0 22px;
}

/* Questions list */
.faq-section__list {
  display: flex;
  flex-direction: column;
}
.faq-row {
  border-bottom: 1px solid rgba(247, 244, 238, 0.15);
  padding: 0;
}
.faq-row:first-child { border-top: 1px solid rgba(247, 244, 238, 0.15); }

.faq-row summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--tissa-offwhite);
  transition: color var(--transition);
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::marker { content: ""; }
.faq-row summary:hover { color: var(--tissa-white); }

.faq-row__q {
  font-family: var(--ff-ui);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.3;
  color: inherit;
}

/* + / × icon (drawn with two lines) */
.faq-row__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;
}
.faq-row__icon::before,
.faq-row__icon::after {
  content: "";
  position: absolute;
  background: var(--tissa-offwhite);
  transition: transform 300ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms ease;
}
.faq-row__icon::before {
  left: 0; top: 50%;
  width: 18px; height: 1.5px;
  transform: translateY(-50%);
}
.faq-row__icon::after {
  left: 50%; top: 0;
  width: 1.5px; height: 18px;
  transform: translateX(-50%);
}
.faq-row[open] .faq-row__icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.faq-row__a {
  overflow: hidden;
  padding: 0 0 var(--space-3);
  max-width: 64ch;
}
.faq-row__a p {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(247, 244, 238, 0.72);
  margin: 0;
}

/* Smooth open/close for browsers that support interpolate-size */
@supports (interpolate-size: allow-keywords) {
  .faq-row { interpolate-size: allow-keywords; }
  .faq-row::details-content {
    height: 0;
    overflow: hidden;
    transition: height 320ms cubic-bezier(0.2, 0, 0, 1), content-visibility 320ms;
    transition-behavior: allow-discrete;
  }
  .faq-row[open]::details-content { height: auto; }
}

@media (max-width: 640px) {
  .faq-section { padding: var(--space-7) 0; }
  .faq-section__heading { font-size: clamp(30px, 9vw, 44px); }
  .faq-row__q { font-size: 15px; }
}

/* FAQ accordion (legacy — kept for any pages still using it) */
.service-faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--tissa-border);
}
.faq-item {
  border-bottom: 1px solid var(--tissa-border);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item__q {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
  transition: transform 360ms cubic-bezier(0.2, 0, 0, 1);
}
.faq-item:hover .faq-item__q { transform: translateX(4px); }
.faq-item__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--tissa-carbon);
  transition: transform 380ms cubic-bezier(0.2, 0, 0, 1), opacity 280ms ease;
}
.faq-item__icon::before { width: 100%; height: 1.5px; }
.faq-item__icon::after { width: 1.5px; height: 100%; }
.faq-item[open] .faq-item__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}
.faq-item[open] .faq-item__icon::before { transform: rotate(180deg); }

.faq-item__a {
  padding: 0 0 var(--space-4);
}
.faq-item__a p {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 64ch;
}
@supports (interpolate-size: allow-keywords) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 480ms cubic-bezier(0.2, 0, 0, 1),
                opacity 360ms ease,
                content-visibility 480ms allow-discrete;
    transition-behavior: allow-discrete;
  }
  .faq-item[open]::details-content { height: auto; opacity: 1; }
}

/* Pricing tiers (Master Book) */
.service-pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 760px) {
  .service-pricing__grid { grid-template-columns: repeat(3, 1fr); }
}
.pricing-tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  border-radius: 10px;
  position: relative;
  transition: transform 380ms cubic-bezier(0.2, 0, 0, 1), box-shadow 380ms ease;
}
.pricing-tier:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.18);
}
.pricing-tier--feature {
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  border-color: var(--tissa-carbon);
}
.pricing-tier__head { display: flex; flex-direction: column; gap: 4px; }
.pricing-tier__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.pricing-tier--feature .pricing-tier__label { color: var(--tissa-border); }
.pricing-tier__price {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: inherit;
}
.pricing-tier__note {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--tissa-carbon-muted);
}
.pricing-tier--feature .pricing-tier__note { color: var(--tissa-line); }
.pricing-tier__list {
  list-style: none;
  padding: var(--space-3) 0 0;
  margin: 0;
  border-top: 1px solid var(--tissa-border);
  display: flex;
  flex-direction: column;
}
.pricing-tier--feature .pricing-tier__list { border-top-color: rgba(247, 244, 238, 0.16); }
.pricing-tier__list li {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.55;
  padding: 10px 0;
  border-bottom: 1px solid rgba(37, 38, 40, 0.08);
}
.pricing-tier--feature .pricing-tier__list li { border-bottom-color: rgba(247, 244, 238, 0.1); }
.pricing-tier__list li:last-child { border-bottom: 0; }
.pricing-tier__pin {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--tissa-paper);
  color: var(--tissa-carbon);
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Cadence list (Owner's Rep) */
.cadence-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--tissa-border);
}
.service-section--bone .cadence-list { border-top-color: rgba(37, 38, 40, 0.16); }
.cadence-item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--tissa-border);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.service-section--bone .cadence-item { border-bottom-color: rgba(37, 38, 40, 0.16); }
@media (min-width: 760px) {
  .cadence-item { grid-template-columns: 200px 1fr; gap: var(--space-6); }
}
.cadence-item__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cadence-item__when {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
}
.cadence-item__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
  margin: 0;
}
.cadence-item__body { display: flex; flex-direction: column; gap: var(--space-2); }
.cadence-item__body p {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 64ch;
}
.cadence-item__list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cadence-item__list li {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  padding: 4px 10px;
  border: 1px solid var(--tissa-border);
  border-radius: 999px;
}

/* Always-on grid (Owner's Rep) */
.always-on-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .always-on-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .always-on-grid { grid-template-columns: repeat(3, 1fr); }
}
.always-on {
  padding: var(--space-4);
  background: rgba(247, 244, 238, 0.04);
  border: 1px solid rgba(247, 244, 238, 0.14);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 280ms ease, transform 380ms cubic-bezier(0.2, 0, 0, 1);
}
.always-on:hover {
  background: rgba(247, 244, 238, 0.08);
  transform: translateY(-2px);
}
.always-on__num {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--tissa-border);
}
.always-on__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tissa-paper);
  margin: 0;
}
.always-on p {
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tissa-line);
  margin: 0;
}

/* Add-on grid (Strategic Add-ons) */
.addons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .addons-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .addons-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}

/* ============================================================
   ADD-ON CARDS — static stacked layout (no flip, no hover swap).
   Pattern: number (auto-generated) → icon → title + description + meta.
   All content visible at once. Used on every sub-service page.
   ============================================================ */
.addon-card {
  position: relative;
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  border-radius: 4px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  color: var(--tissa-carbon);
  transition: border-color var(--transition), color var(--transition);
  cursor: default;
  outline: 0;
  overflow: hidden;
  aspect-ratio: auto;
  isolation: isolate;
}
.addon-card:focus-visible {
  outline: 2px solid var(--tissa-carbon);
  outline-offset: 4px;
}

/* Overlay wash — grows from bottom-left to fill the card on hover.
   Flips the card to dark carbon; text on top inverts to offwhite. */
.addon-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  background: var(--tissa-carbon);
  z-index: -1;
  transition: width 520ms cubic-bezier(0.2, 0, 0, 1),
              height 520ms cubic-bezier(0.2, 0, 0, 1);
}
.addon-card:hover { border-color: var(--tissa-carbon); color: var(--tissa-offwhite); }
.addon-card:hover::after { width: 100%; height: 100%; }
.addon-card:hover .addon-card__title,
.addon-card:hover .addon-card__desc { color: var(--tissa-offwhite); }
.addon-card:hover .addon-card__icon { color: var(--tissa-offwhite); }
.addon-card:hover .addon-card__meta dt { color: rgba(247, 244, 238, 0.6); }
.addon-card:hover .addon-card__meta dd { color: var(--tissa-offwhite); }
.addon-card:hover .addon-card__meta { border-top-color: rgba(247, 244, 238, 0.2); }

/* Inner wrappers (kept for HTML compatibility) — pass-through */
.addon-card__inner,
.addon-card__face,
.addon-card__face--front,
.addon-card__face--back { display: contents; }

/* Override any back-face dark color overrides — every text on the card is carbon */
.addon-card__face--back .addon-card__num,
.addon-card__face--back .addon-card__desc { color: var(--tissa-carbon); }
.addon-card__face--back .addon-card__meta { border-top: 1px solid var(--tissa-border); }
.addon-card__face--back .addon-card__meta dt { color: var(--tissa-carbon-muted); }
.addon-card__face--back .addon-card__meta dd { color: var(--tissa-carbon); }

/* Icon — bigger and more present (40 → 56px) since it's the visual anchor */
.addon-card__icon {
  width: 56px;
  height: 56px;
  color: var(--tissa-carbon-muted);
  flex: 0 0 auto;
  transition: color var(--transition);
}
.addon-card:hover .addon-card__icon { color: var(--tissa-carbon); }
.addon-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Title (h3) — italic Playfair editorial */
.addon-card__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
  margin: 0;
}

/* Description — body serif under the title */
.addon-card__desc {
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: 0;
}

/* Hint + head (legacy front-face) — no longer rendered as decorative chrome */
.addon-card__hint { display: none; }
.addon-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.addon-card__num {
  display: none;                                      /* now handled by counter ::before */
}
.addon-card__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
  margin: 0;
}
.addon-card__desc {
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: 0;
  flex: 1;
}
.addon-card__meta {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--tissa-border);
}
.addon-card__meta > div { display: flex; flex-direction: column; gap: 2px; }
.addon-card__meta dt {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin: 0;
}
.addon-card__meta dd {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  color: var(--tissa-carbon);
  margin: 0;
}

/* Service-to-service nav at bottom of detail pages */
.service-nav {
  background: var(--tissa-white);
  border-top: 1px solid var(--tissa-border);
  padding: var(--space-6) 0;
}
.service-nav__inner {
  display: flex;
  justify-content: flex-end;
}
.service-nav__inner--split { justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.service-nav__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--tissa-carbon);
  transition: transform 380ms cubic-bezier(0.2, 0, 0, 1);
}
.service-nav__link:hover { transform: translateX(4px); }
.service-nav__link--prev:hover { transform: translateX(-4px); }
.service-nav__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.service-nav__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
}

/* ============================================================
   SERVICE PAGE — VISUAL RESOURCES
   Editorial imagery + designed-not-photographed artifact cards.
   ============================================================ */

/* ── Masthead photo — large editorial image right after the hero ── */
.service-masthead {
  padding: var(--space-2) 0 var(--space-6);
  background: var(--tissa-white);
}
@media (min-width: 1024px) {
  .service-masthead { padding: var(--space-4) 0 var(--space-7); }
}
.service-masthead__frame {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 16 / 7;
  background: var(--tissa-offwhite);
}
@media (max-width: 760px) {
  .service-masthead__frame { aspect-ratio: 4 / 3; }
}
.service-masthead__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Heavy desaturation + warm cast — any photo reads as on-brand editorial
     instead of stock photography. */
  filter: grayscale(0.7) sepia(0.12) contrast(1.06) brightness(0.96);
  transition: transform 1.2s cubic-bezier(0.2, 0, 0, 1), filter 600ms ease;
}
.service-masthead:hover .service-masthead__img {
  filter: grayscale(0.55) sepia(0.08) contrast(1.06) brightness(0.98);
}
.service-masthead:hover .service-masthead__img { transform: scale(1.02); }

/* Caption strip overlay at the bottom — solid dark strip for guaranteed legibility */
.service-masthead__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background:
    linear-gradient(to top,
      rgba(37, 38, 40, 0.96) 0%,
      rgba(37, 38, 40, 0.9) 30%,
      rgba(37, 38, 40, 0.55) 70%,
      rgba(37, 38, 40, 0) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  color: #ffffff;
  flex-wrap: wrap;
}
.service-masthead__cap-text {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.4;
  max-width: 56ch;
  margin: 0;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  flex: 1 1 320px;
}
.service-masthead__cap-credit {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

/* Plate number — like an editorial figure number, top-left */
.service-masthead__plate {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: var(--tissa-paper);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  z-index: 2;
}
.service-masthead__plate::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--tissa-carbon);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Inline figure — inset photo between sections ─────────────── */
.service-figure {
  padding: 0 0 var(--space-5);
}
.service-figure__frame {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--tissa-offwhite);
  aspect-ratio: 3 / 2;
}
.service-figure--portrait .service-figure__frame { aspect-ratio: 3 / 4; }
.service-figure--wide .service-figure__frame { aspect-ratio: 21 / 9; }
.service-figure__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.7) sepia(0.12) contrast(1.06) brightness(0.96);
  transition: transform 900ms cubic-bezier(0.2, 0, 0, 1);
}
.service-figure:hover .service-figure__img { transform: scale(1.025); }
.service-figure__caption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 4px 0;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.service-figure__caption em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tissa-carbon);
}

/* ── Split spread — image + text side-by-side ────────────────── */
.service-spread {
  padding: var(--space-7) 0;
}
.service-spread__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 1024px) {
  .service-spread__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
  }
}
.service-spread__media {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4 / 5;
  background: var(--tissa-offwhite);
}
.service-spread--flip .service-spread__media { order: 2; }
.service-spread__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.7) sepia(0.12) contrast(1.06) brightness(0.96);
  transition: transform 900ms cubic-bezier(0.2, 0, 0, 1);
}
.service-spread:hover .service-spread__img { transform: scale(1.03); }
.service-spread__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.service-spread__eyebrow {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.service-spread__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--tissa-carbon-muted);
}
.service-spread__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 18ch;
}
.service-spread__body p {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 50ch;
}
.service-spread__body p em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
}

/* ── Specimen card — designed artifact, no photo ──────────────── */
/* A stylized representation of the deliverable (Decision Memo,
   Master Book cover, Quality Mark, etc.) drawn entirely in CSS. */
.service-specimen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 1024px) {
  .service-specimen {
    grid-template-columns: minmax(280px, 400px) 1fr;
    column-gap: var(--space-7);
  }
}

/* MOBILE — specimen card adjustments so it doesn't feel cramped at 320–640px */
@media (max-width: 640px) {
  .specimen-card {
    aspect-ratio: 5 / 6;                              /* less portrait — more horizontal room */
    padding: 22px 20px;                               /* tighter padding for narrow viewport */
    transform: none;                                  /* no rotation — keeps card aligned to grid */
    gap: 12px;
    margin: 0 auto;
    max-width: 320px;
  }
  .specimen-card:hover { transform: translateY(-2px); }
  .specimen-card__brand-mark img { height: 16px; }
  .specimen-card__brand-meta { font-size: 8px; }
  .specimen-card__title { font-size: 26px; max-width: none; }
  .specimen-card__subtitle { font-size: 11px; max-width: none; }
  .specimen-card__stamp {
    width: 56px;
    height: 56px;
    bottom: 18px;
    right: 18px;
  }
  .specimen-card__stamp-text { font-size: 6px; }
  .specimen-card__stamp-mark { font-size: 11px; }
  .specimen-card__rows { gap: 4px; }
  .specimen-card__row { padding: 4px 0; }
  .specimen-card__signature {
    bottom: 22px;
    left: 20px;
    font-size: 18px;
  }
}

/* The artifact card — letter-sized paper mockup */
.specimen-card {
  position: relative;
  aspect-ratio: 8.5 / 11;
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 18px 32px -16px rgba(0, 0, 0, 0.18),
    0 32px 64px -32px rgba(0, 0, 0, 0.22);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: rotate(-1.2deg);
  transition: transform 600ms cubic-bezier(0.2, 0, 0, 1), box-shadow 500ms ease;
  overflow: hidden;
}
.specimen-card:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 24px 48px -16px rgba(0, 0, 0, 0.22),
    0 48px 80px -32px rgba(0, 0, 0, 0.26);
}
.specimen-card__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(37, 38, 40, 0.12);
}
.specimen-card__brand-mark {
  display: inline-flex;
  align-items: center;
  color: var(--tissa-carbon);
}
.specimen-card__brand-mark img {
  display: block;
  height: 20px;
  width: auto;
}
.specimen-card__brand-meta {
  font-family: var(--ff-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  text-align: right;
  line-height: 1.4;
}
.specimen-card__tag {
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin-top: 8px;
}
.specimen-card__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 10ch;
}
.specimen-card__subtitle {
  font-family: var(--ff-body);
  font-size: 11px;
  line-height: 1.5;
  color: var(--tissa-carbon-muted);
  max-width: 22ch;
  margin: 0;
}
.specimen-card__divider {
  margin: 12px 0 4px;
  height: 1px;
  background: rgba(37, 38, 40, 0.12);
}
.specimen-card__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.specimen-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  padding: 6px 0;
  border-bottom: 1px dashed rgba(37, 38, 40, 0.14);
}
.specimen-card__row strong {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tissa-carbon);
}
.specimen-card__stamp {
  position: absolute;
  bottom: 32px;
  right: 28px;
  width: 76px;
  height: 76px;
  border: 1.5px solid var(--tissa-carbon);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  transform: rotate(-8deg);
  opacity: 0.78;
}
.specimen-card__stamp::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--tissa-carbon);
  border-radius: 50%;
}
.specimen-card__stamp-text {
  font-family: var(--ff-mono);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  position: relative;
}
.specimen-card__stamp-mark {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  color: var(--tissa-carbon);
  position: relative;
}
.specimen-card__signature {
  position: absolute;
  bottom: 38px;
  left: 28px;
  font-family: var(--ff-script);
  font-size: 22px;
  color: var(--tissa-carbon);
  letter-spacing: -0.01em;
  transform: rotate(-3deg);
}

/* Body next to the specimen */
.service-specimen__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.service-specimen__eyebrow {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.service-specimen__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--tissa-carbon-muted);
}
.service-specimen__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 16ch;
}
.service-specimen__body p {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 50ch;
}
.service-specimen__list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.service-specimen__list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tissa-border);
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tissa-carbon);
}
.service-specimen__list li::before {
  content: "";
  width: 16px;
  height: 1.5px;
  background: var(--tissa-carbon);
  align-self: center;
  margin-top: 8px;
}
.service-specimen__list li:last-child { border-bottom: 0; }

/* ============================================================
   INSIGHTS PAGE — Magazine cover grid
   Each article is a card with a CSS-drawn poster cover instead
   of stock photos. Three cover variants rotate to create rhythm.
   ============================================================ */

/* Category palette (subtle, on-brand muted hues) */
:root {
  --ins-governance: 36 32% 90%;   /* warm beige */
  --ins-audit:      28 14% 86%;   /* stone grey */
  --ins-framework:  30 22% 92%;   /* champagne */
  --ins-strategy:   24 8% 84%;    /* cool grey */
  /* Cluster-post categories — each cluster gets its own subtle tint */
  --ins-roi:        45 30% 88%;   /* honey gold — finance/ROI */
  --ins-stack:      200 18% 88%; /* cool slate — tech/saas/stack */
  --ins-process:    215 14% 89%; /* teal-grey — process */
  --ins-cadence:    18 26% 90%;  /* warm peach — rhythm/cadence */
  --ins-book:       32 26% 91%;  /* soft champagne — artifact */
  --ins-vocab:      355 18% 90%; /* warm pink-clay — vocabulary */
  --ins-system-blue: 260 14% 90%;/* cool lavender — systems */
  --ins-ai:         195 22% 87%; /* sky blue — AI/tech */
  --ins-model:      12 22% 89%;  /* warm clay — practice model */
  --ins-ownership:  145 14% 88%; /* soft sage — control/ownership */
}

/* ── Hero with massive backdrop lettermark ────────────────── */
.ins-hero {
  position: relative;
  padding: calc(var(--space-7) + var(--space-3)) 0 calc(var(--space-7) + var(--space-2));
  background: var(--tissa-white);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .ins-hero { padding: calc(var(--space-8) + var(--space-5)) 0 calc(var(--space-8) + var(--space-3)); }
}
/* Massive backdrop "I" letterform — sits behind the title */
.ins-hero__mark {
  position: absolute;
  top: 50%;
  right: -2vw;
  transform: translateY(-48%);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(280px, 50vw, 720px);
  line-height: 0.78;
  color: var(--tissa-carbon);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -0.04em;
}
.ins-hero .container { position: relative; z-index: 1; }
.ins-hero__eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-4);
}
.ins-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--tissa-carbon-muted);
}
.ins-hero__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.94;
  letter-spacing: -0.028em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 14ch;
}
.ins-hero__lead {
  font-family: var(--ff-body);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: var(--space-4) 0 0;
  max-width: 48ch;
}
.ins-hero__lead em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
}

/* ── Featured article — magazine-style cover ──────────────── */
.ins-featured {
  padding: calc(var(--space-7) + var(--space-2)) 0;
  background: var(--tissa-offwhite);
  border-top: 1px solid var(--tissa-border);
  border-bottom: 1px solid var(--tissa-border);
}
@media (min-width: 1024px) {
  .ins-featured { padding: calc(var(--space-8) + var(--space-2)) 0; }
}
.ins-feat {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  text-decoration: none;
  color: var(--tissa-carbon);
}
@media (min-width: 880px) {
  .ins-feat {
    grid-template-columns: 5fr 6fr;
    column-gap: var(--space-7);
  }
}

/* Featured cover — CSS-drawn poster */
.ins-feat__cover {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  border-radius: 6px;
  overflow: hidden;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 480ms cubic-bezier(0.2, 0, 0, 1);
}
.ins-feat:hover .ins-feat__cover { transform: translateY(-6px); }
/* Decorative diagonal hatch overlay */
.ins-feat__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 26px,
    rgba(247, 244, 238, 0.025) 26px 27px
  );
  pointer-events: none;
}
.ins-feat__cover-tag {
  position: relative;
  z-index: 1;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-border);
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid rgba(247, 244, 238, 0.22);
  border-radius: 999px;
}
.ins-feat__cover-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(120px, 16vw, 200px);
  line-height: 0.85;
  color: var(--tissa-paper);
  opacity: 0.14;
  letter-spacing: -0.04em;
  z-index: 0;
  user-select: none;
}
.ins-feat__cover-brand {
  position: relative;
  z-index: 1;
  font-family: var(--ff-script);
  font-size: 32px;
  color: var(--tissa-paper);
  align-self: flex-end;
  opacity: 0.92;
}

.ins-feat__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ins-feat__cat {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.ins-feat__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 18ch;
  transition: transform 480ms cubic-bezier(0.2, 0, 0, 1);
}
.ins-feat:hover .ins-feat__title { transform: translateX(4px); }
.ins-feat__excerpt {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--tissa-carbon-muted);
  margin: 0;
}
.ins-feat__meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin-top: var(--space-2);
}
.ins-feat__sep {
  display: inline-block;
  width: 12px;
  height: 1px;
  background: var(--tissa-carbon-muted);
}

/* ── Article grid section ─────────────────────────────────── */
.ins-grid-section {
  padding: calc(var(--space-7) + var(--space-3)) 0 calc(var(--space-7) + var(--space-2));
  background: var(--tissa-white);
}
@media (min-width: 1024px) {
  .ins-grid-section { padding: calc(var(--space-8) + var(--space-4)) 0 calc(var(--space-8) + var(--space-3)); }
}
.ins-grid-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.ins-grid-section__eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ins-grid-section__eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--tissa-carbon-muted);
}
.ins-grid-section__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--tissa-carbon);
  margin: 0;
}

/* The grid */
.ins-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .ins-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
@media (min-width: 1024px) {
  .ins-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

.ins-card {
  margin: 0;
}
.ins-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--tissa-carbon);
}

/* The cover — CSS-drawn poster */
.ins-card__cover {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 540ms cubic-bezier(0.2, 0, 0, 1);
  background: var(--tissa-offwhite);
}
.ins-card__link:hover .ins-card__cover {
  transform: translateY(-6px);
}

/* Variant A — light, with massive number behind */
.ins-card__cover[data-variant="a"] {
  background:
    linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-governance) / 0.55) 100%);
  border: 1px solid var(--tissa-border);
}
.ins-card__cover[data-variant="a"]::after {
  content: attr(data-num);
}

/* Variant B — dark carbon */
.ins-card__cover[data-variant="b"] {
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  border: 1px solid var(--tissa-carbon);
}
.ins-card__cover[data-variant="b"] .ins-card__cat {
  color: var(--tissa-border);
  border-color: rgba(247, 244, 238, 0.22);
}
.ins-card__cover[data-variant="b"] .ins-card__num {
  color: var(--tissa-paper);
  opacity: 0.16;
}
.ins-card__cover[data-variant="b"] .ins-card__brand {
  color: var(--tissa-paper);
  opacity: 0.92;
}

/* Variant C — bone with diagonal hatching */
.ins-card__cover[data-variant="c"] {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 22px,
      rgba(37, 38, 40, 0.045) 22px 23px
    ),
    var(--tissa-paper);
  border: 1px solid var(--tissa-border);
}

/* Category-tinted glow per cover (subtle) */
.ins-card__cover[data-cat="governance"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-governance) / 0.6) 100%);
}
.ins-card__cover[data-cat="audit"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-audit) / 0.6) 100%);
}
.ins-card__cover[data-cat="framework"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-framework) / 0.6) 100%);
}
.ins-card__cover[data-cat="strategy"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-strategy) / 0.6) 100%);
}
/* Cluster-post category tints (variant A) — each cluster gets its own face */
.ins-card__cover[data-cat="roi"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-roi) / 0.7) 100%);
}
.ins-card__cover[data-cat="stack"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-stack) / 0.7) 100%);
}
.ins-card__cover[data-cat="process"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-process) / 0.7) 100%);
}
.ins-card__cover[data-cat="cadence"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-cadence) / 0.7) 100%);
}
.ins-card__cover[data-cat="book"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-book) / 0.7) 100%);
}
.ins-card__cover[data-cat="vocab"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-vocab) / 0.7) 100%);
}
.ins-card__cover[data-cat="system"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-system-blue) / 0.7) 100%);
}
.ins-card__cover[data-cat="ai"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-ai) / 0.7) 100%);
}
.ins-card__cover[data-cat="model"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-model) / 0.7) 100%);
}
.ins-card__cover[data-cat="ownership"][data-variant="a"] {
  background-image: linear-gradient(160deg, var(--tissa-offwhite) 0%, hsl(var(--ins-ownership) / 0.7) 100%);
}

/* Cover contents */
.ins-card__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(120px, 14vw, 180px);
  line-height: 0.85;
  color: var(--tissa-carbon);
  opacity: 0.12;
  letter-spacing: -0.04em;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}
.ins-card__cat {
  position: relative;
  z-index: 1;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  align-self: flex-start;
  padding: 5px 10px;
  border: 1px solid var(--tissa-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.ins-card__cover[data-variant="b"] .ins-card__cat {
  background: rgba(37, 38, 40, 0.5);
}
.ins-card__brand {
  position: relative;
  z-index: 1;
  font-family: var(--ff-script);
  font-size: 22px;
  color: var(--tissa-carbon);
  align-self: flex-end;
  opacity: 0.7;
  line-height: 1;
}

/* Body */
.ins-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ins-card__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 24ch;
  transition: transform 380ms cubic-bezier(0.2, 0, 0, 1);
}
.ins-card__link:hover .ins-card__title { transform: translateX(3px); }
.ins-card__meta {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}

/* ── Newsletter — visual closing ──────────────────────────── */
.ins-newsletter {
  position: relative;
  padding: calc(var(--space-7) + var(--space-3)) 0 calc(var(--space-7) + var(--space-3));
  background: var(--tissa-offwhite);
  border-top: 1px solid var(--tissa-border);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .ins-newsletter { padding: calc(var(--space-8) + var(--space-4)) 0; }
}
.ins-newsletter__mark {
  position: absolute;
  left: -2vw;
  bottom: -8%;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(120px, 18vw, 260px);
  line-height: 0.85;
  color: var(--tissa-carbon);
  opacity: 0.05;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ins-newsletter .container { position: relative; z-index: 1; }
.ins-newsletter__eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ins-newsletter__eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--tissa-carbon-muted);
}
.ins-newsletter__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--tissa-carbon);
  margin: var(--space-2) 0 var(--space-4);
  max-width: 18ch;
}
.ins-newsletter__form {
  display: flex;
  gap: 0;
  align-items: stretch;
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--tissa-carbon);
  border-radius: 999px;
  padding: 4px 4px 4px 20px;
  background: var(--tissa-white);
  transition: box-shadow 240ms ease;
}
.ins-newsletter__form:focus-within {
  box-shadow: 0 0 0 4px rgba(37, 38, 40, 0.08);
}
.ins-newsletter__form input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--tissa-carbon);
  min-width: 0;
  padding: 10px 0;
}
.ins-newsletter__form input::placeholder {
  color: var(--tissa-carbon-muted);
  opacity: 0.7;
}
.ins-newsletter__form button {
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap 360ms cubic-bezier(0.2, 0, 0, 1), background 240ms ease;
}
.ins-newsletter__form button:hover { background: #1a1b1c; gap: 14px; }
.ins-newsletter__arrow {
  position: relative;
  width: 18px;
  height: 8px;
  display: inline-block;
}
.ins-newsletter__arrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
}
.ins-newsletter__arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 5px; height: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.ins-newsletter__fine {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin: var(--space-3) 0 0;
}

/* ============================================================
   CONTACT PAGE — TISSA editorial
   Image hero · 2-col info+form · banner · 5 principles · map
   · newsletter · footer
   ============================================================ */
.contact-hero { min-height: 60vh; }
.contact-hero__crumbs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.8);
  margin-bottom: var(--space-3);
}
.contact-hero__crumbs a {
  color: rgba(247, 244, 238, 0.8);
  text-decoration: none;
  transition: color 240ms ease;
}
.contact-hero__crumbs a:hover { color: var(--tissa-paper); }
.contact-hero__sub {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(247, 244, 238, 0.9);
  margin: var(--space-3) 0 0;
  max-width: 48ch;
}
.contact-hero__sub em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  color: var(--tissa-paper);
}

.ct-info {
  padding: calc(var(--space-7) + var(--space-2)) 0;
  background: var(--tissa-offwhite);
}
@media (min-width: 1024px) {
  .ct-info { padding: calc(var(--space-8) + var(--space-2)) 0; }
}
.ct-info__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 960px) {
  .ct-info__grid {
    grid-template-columns: 1fr 1.2fr;
    column-gap: var(--space-7);
    align-items: start;
  }
}
.ct-info__left,
.ct-info__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ct-info__right {
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  border-radius: 6px;
  padding: var(--space-5);
}
@media (min-width: 960px) { .ct-info__right { padding: var(--space-6); } }

.ct-seal {
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--tissa-carbon);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ct-seal::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--tissa-carbon);
  border-radius: 50%;
}
.ct-seal__inner {
  font-family: var(--ff-script);
  font-size: 28px;
  color: var(--tissa-carbon);
  position: relative;
  line-height: 1;
}

.ct-info__head { display: flex; flex-direction: column; gap: var(--space-2); }
.ct-info__chapter {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.ct-info__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--tissa-carbon);
  margin: 0;
}
.ct-info__heading--sub { font-size: clamp(28px, 3vw, 40px); }
.ct-info__lead {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--tissa-carbon-muted);
  margin: 0;
  max-width: 44ch;
}

.ct-lines-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--tissa-border);
}
.ct-lines-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--tissa-border);
}
.ct-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--tissa-border);
  background: var(--tissa-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--tissa-carbon);
}
.ct-icon svg { width: 18px; height: 18px; display: block; }
.ct-line__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-line__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.ct-line__value {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.35;
  color: var(--tissa-carbon);
  text-decoration: none;
}
a.ct-line__value { border-bottom: 1px solid transparent; transition: border-color 240ms ease; }
a.ct-line__value:hover { border-bottom-color: var(--tissa-carbon); }

.ct-industries {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ct-industries__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.ct-industries__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ct-industries__list li {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  padding: 5px 12px;
  border: 1px solid var(--tissa-border);
  border-radius: 999px;
  background: var(--tissa-white);
}

.ct-form { display: flex; flex-direction: column; gap: var(--space-3); }
.ct-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .ct-form__row { grid-template-columns: 1fr 1fr; column-gap: var(--space-3); }
}
.ct-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct-field__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.ct-field__label em {
  font-family: var(--ff-mono);
  font-style: normal;
  color: var(--tissa-carbon-muted);
}
.ct-field input,
.ct-field select,
.ct-field textarea {
  width: 100%;
  border: 1px solid var(--tissa-border);
  background: var(--tissa-white);
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--tissa-carbon);
  padding: 11px 14px;
  outline: 0;
  border-radius: 4px;
  transition: border-color 240ms ease;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder {
  color: var(--tissa-carbon-muted);
  opacity: 0.55;
}
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus { border-color: var(--tissa-carbon); }
.ct-field textarea { resize: vertical; min-height: 80px; line-height: 1.55; }
.ct-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23252628' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.ct-form__submit {
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  border: 0;
  border-radius: 4px;
  padding: 14px 24px;
  margin-top: var(--space-2);
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: gap 240ms ease, background 240ms ease;
}
.ct-form__submit:hover { background: #1a1b1c; gap: 18px; }
.ct-form__submit:disabled { opacity: 0.85; cursor: default; }
.ct-form.is-sent .ct-form__submit { background: #2c5e3d; }

.ct-banner {
  padding: calc(var(--space-7) + var(--space-2)) 0;
  background: var(--tissa-white);
}
@media (min-width: 1024px) { .ct-banner { padding: calc(var(--space-8) + var(--space-2)) 0; } }
.ct-banner__panel {
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  border-radius: 8px;
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  overflow: hidden;
}
@media (min-width: 880px) {
  .ct-banner__panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-7);
  }
}
.ct-banner__panel::after {
  content: "T";
  position: absolute;
  bottom: -20%;
  right: -5%;
  font-family: var(--ff-script);
  font-size: clamp(200px, 26vw, 360px);
  color: var(--tissa-paper);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.ct-banner__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  z-index: 1;
  max-width: 38ch;
}
.ct-banner__chapter {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-border);
}
.ct-banner__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tissa-paper);
  margin: 0;
}
.ct-banner__lead {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--tissa-line);
  margin: 0;
}
.ct-banner__lead em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  color: var(--tissa-paper);
}
.ct-banner__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}
@media (min-width: 480px) { .ct-banner__actions { flex-direction: row; flex-wrap: wrap; } }
.ct-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border: 1px solid rgba(247, 244, 238, 0.3);
  border-radius: 999px;
  color: var(--tissa-paper);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 240ms ease, gap 240ms ease, border-color 240ms ease;
}
.ct-banner__cta:hover { background: rgba(247, 244, 238, 0.08); gap: 16px; }
.ct-banner__cta--primary {
  background: var(--tissa-paper);
  color: var(--tissa-carbon);
  border-color: var(--tissa-paper);
}
.ct-banner__cta--primary:hover { background: var(--tissa-white); }

/* Ink variant for ct-principles · 2026-05-18 */
.ct-principles--ink .ct-principle__title { color: #fbf9f5; }
.ct-principles--ink .ct-principle__sub { color: rgba(251, 249, 245, 0.65); }
.ct-principles--ink .ct-principle__icon { color: #fbf9f5; }
.ct-principles--ink .ct-principle { border-color: rgba(251, 249, 245, 0.18); }
.ct-principles--ink svg { stroke: #fbf9f5; }

.ct-principles {
  padding: calc(var(--space-6) + var(--space-3)) 0;
  background: var(--tissa-offwhite);
  border-top: 1px solid var(--tissa-border);
  border-bottom: 1px solid var(--tissa-border);
}
.ct-principles__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) 0;
}
@media (min-width: 760px) { .ct-principles__list { grid-template-columns: repeat(5, 1fr); } }
.ct-principle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 var(--space-2);
}
@media (min-width: 760px) {
  .ct-principle {
    border-right: 1px solid var(--tissa-border);
    padding: 0 var(--space-3);
  }
  .ct-principle:last-child { border-right: 0; }
}
.ct-principle__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tissa-carbon);
  margin-bottom: 4px;
}
.ct-principle__icon svg { width: 22px; height: 22px; }
.ct-principle__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--tissa-carbon);
}
.ct-principle__sub {
  font-family: var(--ff-body);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tissa-carbon-muted);
  max-width: 22ch;
}

.ct-map {
  padding: calc(var(--space-7) + var(--space-2)) 0 0;
  background: var(--tissa-white);
}
@media (min-width: 1024px) { .ct-map { padding: calc(var(--space-8) + var(--space-2)) 0 0; } }
.ct-map__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  max-width: 56ch;
}
.ct-map__chapter {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ct-map__chapter::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--tissa-carbon-muted);
}
.ct-map__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--tissa-carbon);
  margin: 0;
}
.ct-map__sub {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--tissa-carbon-muted);
  margin: 0;
}
.ct-map__frame {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  filter: grayscale(0.4) contrast(1.05);
  border-top: 1px solid var(--tissa-border);
  border-bottom: 1px solid var(--tissa-border);
}
@media (min-width: 1024px) { .ct-map__frame { height: 500px; } }
.ct-map__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* "Open in Google Maps" overlay link — bottom-right of the map frame */
.ct-map__open {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  border: 1px solid var(--tissa-carbon);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(37, 38, 40, 0.18);
  transition: gap 320ms cubic-bezier(0.2, 0, 0, 1), background 240ms ease;
}
.ct-map__open:hover {
  gap: 16px;
  background: var(--tissa-carbon-light, #3a3a3d);
  color: var(--tissa-paper);
}
.ct-map__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 36px;
  height: 36px;
  color: var(--tissa-carbon);
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
.ct-map__pin svg { width: 100%; height: 100%; display: block; }

.ct-newsletter {
  padding: calc(var(--space-7) + var(--space-2)) 0 calc(var(--space-7) + var(--space-3));
  background: var(--tissa-offwhite);
  border-top: 1px solid var(--tissa-border);
}
@media (min-width: 1024px) { .ct-newsletter { padding: calc(var(--space-8) + var(--space-3)) 0; } }
.ct-newsletter__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 880px) {
  .ct-newsletter__inner {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
  }
}
.ct-newsletter__copy { display: flex; flex-direction: column; gap: 8px; }
.ct-newsletter__chapter {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.ct-newsletter__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tissa-carbon);
  margin: 0;
}
.ct-newsletter__lead {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.55;
  color: var(--tissa-carbon-muted);
  margin: 0;
  max-width: 40ch;
}
.ct-newsletter__form {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--tissa-carbon);
  border-radius: 999px;
  padding: 4px 4px 4px 20px;
  background: var(--tissa-white);
}
.ct-newsletter__form input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--tissa-carbon);
  min-width: 0;
  padding: 10px 0;
}
.ct-newsletter__form input::placeholder { color: var(--tissa-carbon-muted); opacity: 0.6; }
.ct-newsletter__form button {
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 240ms ease, gap 240ms ease;
}
.ct-newsletter__form button:hover { background: #1a1b1c; gap: 14px; }
.ct-newsletter__form button:disabled { opacity: 0.7; cursor: default; }

/* ============================================================
   INDUSTRY PAGES — case-anchored commercial pages
   ============================================================ */
.industry-hero { min-height: 60vh; }
.industry-hero__crumbs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.8);
  margin-bottom: var(--space-3);
}
.industry-hero__crumbs a {
  color: rgba(247, 244, 238, 0.8);
  text-decoration: none;
  transition: color 240ms ease;
}
.industry-hero__crumbs a:hover { color: var(--tissa-paper); }
.industry-hero__sub {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  color: rgba(247, 244, 238, 0.92);
  margin: var(--space-3) 0 var(--space-4);
  max-width: 56ch;
}
.industry-hero__sub em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  color: var(--tissa-paper);
}

/* Shared section heads */
.ind-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  max-width: 56ch;
}
.ind-section__eyebrow,
.ind-prose__eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ind-section__eyebrow::before,
.ind-prose__eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--tissa-carbon-muted);
}
.ind-section__heading,
.ind-prose__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 22ch;
}

/* The problem — editorial 2-col prose */
.ind-prose {
  padding: calc(var(--space-7) + var(--space-3)) 0;
  background: var(--tissa-white);
}
@media (min-width: 1024px) {
  .ind-prose { padding: calc(var(--space-8) + var(--space-3)) 0; }
}
.ind-prose__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 880px) {
  .ind-prose__grid {
    grid-template-columns: 1fr 1.2fr;
    column-gap: var(--space-7);
  }
}
.ind-prose__head { display: flex; flex-direction: column; gap: var(--space-2); }
.ind-prose__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--ff-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.65;
  color: var(--tissa-carbon);
  max-width: 60ch;
}
.ind-prose__body em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
}
.ind-prose__body p { margin: 0; }

/* The system applied — 3 tier cards */
.ind-system {
  padding: calc(var(--space-7) + var(--space-2)) 0;
  background: var(--tissa-offwhite);
  border-top: 1px solid var(--tissa-border);
  border-bottom: 1px solid var(--tissa-border);
}
@media (min-width: 1024px) {
  .ind-system { padding: calc(var(--space-8) + var(--space-2)) 0; }
}
.ind-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 880px) {
  .ind-tiers { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
.ind-tier {
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  border-radius: 6px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform 480ms cubic-bezier(0.2, 0, 0, 1);
}
.ind-tier:hover { transform: translateY(-3px); }
.ind-tier__num {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--tissa-carbon-muted);
}
.ind-tier__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
  margin: 0;
}
.ind-tier__body {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: 0;
  flex: 1;
}
.ind-tier__cta {
  margin-top: var(--space-2);
  align-self: flex-start;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  text-decoration: none;
  border-bottom: 1px solid var(--tissa-carbon);
  padding-bottom: 2px;
  transition: gap 240ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ind-tier__cta:hover { gap: 12px; }

/* Anchor case feature */
.ind-case {
  padding: calc(var(--space-7) + var(--space-3)) 0;
  background: var(--tissa-white);
}
@media (min-width: 1024px) {
  .ind-case { padding: calc(var(--space-8) + var(--space-3)) 0; }
}
.ind-case__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  text-decoration: none;
  color: var(--tissa-carbon);
  align-items: center;
}
@media (min-width: 880px) {
  .ind-case__card {
    grid-template-columns: 1.2fr 1fr;
    column-gap: var(--space-7);
  }
}
.ind-case__media {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  background: var(--tissa-offwhite);
  margin: 0;
}
.ind-case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.2, 0, 0, 1);
}
.ind-case__card:hover .ind-case__media img { transform: scale(1.03); }
.ind-case__media.is-fallback {
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(37, 38, 40, 0.04) 22px 23px),
    var(--tissa-offwhite);
}
.ind-case__media.is-fallback::before {
  content: "Tissa";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-script);
  font-size: clamp(40px, 5vw, 72px);
  color: var(--tissa-carbon);
  opacity: 0.22;
}
.ind-case__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ind-case__client {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.ind-case__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--tissa-carbon);
  margin: 0;
  transition: transform 480ms cubic-bezier(0.2, 0, 0, 1);
}
.ind-case__card:hover .ind-case__title { transform: translateX(4px); }
.ind-case__excerpt {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 52ch;
}
.ind-case__deliverables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--ff-body);
  font-size: 14.5px;
  color: var(--tissa-carbon);
}
.ind-case__deliverables li {
  padding-left: 16px;
  position: relative;
}
.ind-case__deliverables li::before {
  content: "·";
  position: absolute;
  left: 4px;
  top: -2px;
  font-size: 20px;
  line-height: 1;
}
.ind-case__cta {
  margin-top: var(--space-2);
  align-self: flex-start;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--tissa-carbon);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--tissa-carbon);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap 360ms cubic-bezier(0.2, 0, 0, 1);
}
.ind-case__card:hover .ind-case__cta { gap: 16px; }

/* Industry-specific deliverables */
.ind-deliverables {
  padding: calc(var(--space-7) + var(--space-2)) 0;
  background: var(--tissa-offwhite);
  border-top: 1px solid var(--tissa-border);
  border-bottom: 1px solid var(--tissa-border);
}
@media (min-width: 1024px) {
  .ind-deliverables { padding: calc(var(--space-8) + var(--space-2)) 0; }
}
.ind-deliv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--tissa-border);
}
@media (min-width: 760px) {
  .ind-deliv-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
}
.ind-deliv-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--tissa-border);
  transition: padding-left 380ms cubic-bezier(0.2, 0, 0, 1);
}
.ind-deliv-list li:hover { padding-left: 8px; }
.ind-deliv__num {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--tissa-carbon-muted);
  padding-top: 6px;
}
.ind-deliv-list h3 {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--tissa-carbon);
  margin: 0 0 6px;
}
.ind-deliv-list p {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: 0;
  max-width: 48ch;
}

/* ============================================================
   INK MODIFIERS · 2026-05-18 · Luca request — invert to carbon bg
   ============================================================ */
.about-values--ink {
  background-color: #252628 !important;
  color: #fbf9f5;
}
.about-values--ink .about-values__heading,
.about-values--ink .about-values__title,
.about-values--ink .about-values__body,
.about-values--ink .about-values__num,
.about-values--ink h2,
.about-values--ink h3,
.about-values--ink p { color: #fbf9f5; }
.about-values--ink .section-pretitle,
.about-values--ink .section-pretitle__text,
.about-values--ink .about-values__eyebrow { color: rgba(251, 249, 245, 0.7); }
.about-values--ink .section-pretitle__line,
.about-values--ink .about-values__rule { background: rgba(251, 249, 245, 0.25); }
.about-values--ink .about-values__rule-fill { background: #fbf9f5; }

.about-founder--ink {
  background-color: #252628 !important;
  color: #fbf9f5;
}
.about-founder--ink .about-founder__name,
.about-founder--ink .about-founder__title,
.about-founder--ink .about-founder__bio,
.about-founder--ink .about-founder__caption,
.about-founder--ink h2,
.about-founder--ink h3,
.about-founder--ink p { color: #fbf9f5; }
.about-founder--ink .section-pretitle,
.about-founder--ink .section-pretitle__text { color: rgba(251, 249, 245, 0.7); }
.about-founder--ink .section-pretitle__line { background: rgba(251, 249, 245, 0.25); }

.ins-grid-section--ink {
  background-color: #252628 !important;
  color: #fbf9f5;
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
.ins-grid-section--ink .ins-grid-section__heading,
.ins-grid-section--ink h2,
.ins-grid-section--ink h3,
.ins-grid-section--ink p,
.ins-grid-section--ink a { color: #fbf9f5; }
.ins-grid-section--ink .section-pretitle,
.ins-grid-section--ink .section-pretitle__text,
.ins-grid-section--ink .ins-pillar__eyebrow,
.ins-grid-section--ink [class*="eyebrow"] { color: rgba(251, 249, 245, 0.7); }
.ins-grid-section--ink .section-pretitle__line,
.ins-grid-section--ink hr { background: rgba(251, 249, 245, 0.25); border-color: rgba(251, 249, 245, 0.25); }
.ins-grid-section--ink [class*="row"],
.ins-grid-section--ink [class*="item"] { border-color: rgba(251, 249, 245, 0.18); }

/* Anti-pitch — cream bg + carbon text canon */
.ind-anti {
  padding: calc(var(--space-7) + var(--space-2)) 0;
  background-color: #fbf9f5;
  color: #252628;
}
@media (min-width: 1024px) {
  .ind-anti { padding: calc(var(--space-8) + var(--space-2)) 0; }
}
.ind-anti .ind-section__eyebrow {
  color: #6b6b6f;
  background: transparent;
}
.ind-anti .ind-section__eyebrow::before {
  background: #6b6b6f;
}
.ind-anti .ind-section__heading { color: #252628; }
.ind-anti__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(37, 38, 40, 0.14);
}
.ind-anti__list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(37, 38, 40, 0.14);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: #252628;
  position: relative;
  padding-left: 36px;
}
.ind-anti__list li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: var(--space-3);
  font-family: var(--ff-mono);
  font-size: 18px;
  color: rgba(37, 38, 40, 0.5);
  font-style: normal;
}

/* ============================================================
   ESSAY — simple editorial article template (cluster posts)
   Clean, prose-led, no hero image. Typeset for reading.
   ============================================================ */
.essay-hero {
  background: var(--tissa-offwhite);
  padding: calc(var(--space-7) + var(--space-3)) 0 var(--space-6);
  border-bottom: 1px solid var(--tissa-border);
}
@media (min-width: 1024px) {
  .essay-hero { padding: calc(var(--space-8) + var(--space-3)) 0 var(--space-7); }
}
body.has-image-hero .essay-hero { padding-top: calc(var(--space-7) + var(--space-3)); }

.essay-hero__inner { max-width: 760px; }
.essay-hero__crumbs {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin-bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.essay-hero__crumbs a {
  color: var(--tissa-carbon-muted);
  text-decoration: none;
  transition: color 240ms ease;
}
.essay-hero__crumbs a:hover { color: var(--tissa-carbon); }
.essay-hero__crumbs span[aria-hidden] { opacity: 0.4; }

.essay-hero__category {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  margin-bottom: var(--space-3);
}

.essay-hero__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--tissa-carbon);
  margin: 0 0 var(--space-4);
}

.essay-hero__lead {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: 0 0 var(--space-5);
  max-width: 60ch;
}
.essay-hero__lead em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
}

.essay-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  padding-top: var(--space-4);
  border-top: 1px solid var(--tissa-border);
}
.essay-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.essay-hero__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--tissa-carbon-muted);
  opacity: 0.5;
}

/* ---------- BODY ---------- */
.essay-body {
  background: var(--tissa-white);
  padding: var(--space-7) 0;
}
@media (min-width: 1024px) {
  .essay-body { padding: calc(var(--space-7) + var(--space-2)) 0; }
}
.essay-body__inner {
  max-width: 680px;
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--tissa-carbon);
}
.essay-body__inner > * + * { margin-top: var(--space-3); }
.essay-body__inner > h2 + *,
.essay-body__inner > h3 + * { margin-top: var(--space-3); }

.essay-body__inner h2 {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
  margin-top: var(--space-6) !important;
  margin-bottom: var(--space-3);
}
.essay-body__inner h2:first-child { margin-top: 0 !important; }

.essay-body__inner h3 {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--tissa-carbon);
  margin-top: var(--space-5) !important;
  margin-bottom: var(--space-2);
}

.essay-body__inner p {
  margin: 0;
  color: var(--tissa-carbon);
}
.essay-body__inner p em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
}
.essay-body__inner p strong {
  font-weight: 700;
}

.essay-body__inner a {
  color: var(--tissa-carbon);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 240ms ease;
}
.essay-body__inner a:hover {
  text-decoration-color: var(--tissa-carbon-muted);
}

.essay-body__inner ul,
.essay-body__inner ol {
  margin: 0;
  padding-left: var(--space-3);
}
.essay-body__inner ul li,
.essay-body__inner ol li {
  margin-top: var(--space-2);
  padding-left: 6px;
}
.essay-body__inner ul li::marker { color: var(--tissa-carbon-muted); }
.essay-body__inner ol li::marker {
  font-family: var(--ff-mono);
  font-size: 0.85em;
  color: var(--tissa-carbon-muted);
}

.essay-body__inner blockquote,
.essay-pull {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--tissa-carbon);
  border-left: 2px solid var(--tissa-carbon);
  padding: 4px 0 4px var(--space-3);
  margin: var(--space-5) 0 !important;
  max-width: 28ch;
}
.essay-body__inner blockquote p { margin: 0; }

.essay-divider {
  border: 0;
  border-top: 1px solid var(--tissa-border);
  margin: var(--space-5) 0 !important;
}

/* ---------- RELATED ---------- */
.essay-related {
  background: var(--tissa-offwhite);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--tissa-border);
}
.essay-related__inner { max-width: 760px; }
.essay-related__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin: 0 0 var(--space-3);
}
.essay-related__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--tissa-carbon);
  margin: 0 0 var(--space-5);
}

/* ============================================================
   INSIGHTS LIST — image-free editorial directory for the hub
   Calm, legible. Upright serif title (not italic) for scannability.
   Subtle hover (underline only — no row movement, no arrow).
   ============================================================ */
.ins-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--tissa-border);
}
.ins-list__item {
  margin: 0;
  border-bottom: 1px solid var(--tissa-border);
}
.ins-list__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--space-4);
  row-gap: 8px;
  padding: var(--space-5) 0;
  text-decoration: none;
  color: var(--tissa-carbon);
}
@media (min-width: 768px) {
  .ins-list__link {
    padding: calc(var(--space-5) + 4px) 0;
    column-gap: var(--space-6);
  }
}

.ins-list__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.ins-list__cat {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
/* Upright Playfair (not italic) — much more readable in a long list */
.ins-list__title {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--tissa-carbon);
  margin: 0;
  /* Reserved underline gutter so the hover line doesn't reflow the row */
  text-decoration: underline transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color 240ms ease;
}
.ins-list__link:hover .ins-list__title {
  text-decoration-color: var(--tissa-carbon);
}

.ins-list__meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  white-space: nowrap;
  align-self: center;
}

/* Old num + arrow stubs (legacy attribute support, hidden) */
.ins-list__num,
.ins-list__arrow { display: none; }

/* Editorial featured block (top of hub) — no cover image */
.ins-feat-edi {
  background: var(--tissa-offwhite);
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--tissa-border);
}
@media (min-width: 1024px) {
  .ins-feat-edi { padding: calc(var(--space-7) + var(--space-2)) 0; }
}
.ins-feat-edi__inner { max-width: 820px; }
.ins-feat-edi__eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin: 0 0 var(--space-3);
}
.ins-feat-edi__title {
  display: block;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--tissa-carbon);
  margin: 0 0 var(--space-4);
  text-decoration: none;
}
.ins-feat-edi__title:hover { color: var(--tissa-carbon); }
.ins-feat-edi__lead {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--tissa-carbon);
  margin: 0 0 var(--space-4);
  max-width: 58ch;
}
.ins-feat-edi__lead em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
}
.ins-feat-edi__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tissa-carbon);
  transition: gap 360ms cubic-bezier(0.2, 0, 0, 1);
}
.ins-feat-edi__cta:hover { gap: 22px; }

/* ============================================================
   CUSTOM CURSOR — editorial dot + lagging ring
   Dot follows the mouse 1:1. Ring trails with lerp.
   Both use mix-blend-mode: difference so they remain visible
   on any background (white, offwhite, carbon, ink, image).
   Hidden on touch devices.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  html { cursor: none; }
  a, button, [role="button"], summary, input, textarea, select,
  [data-flip], .ind-list__link, .ind-dir__link, .ins-list__link {
    cursor: none;
  }
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--tissa-paper);
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid var(--tissa-paper);
  background: transparent;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition:
    width 320ms cubic-bezier(0.2, 0, 0, 1),
    height 320ms cubic-bezier(0.2, 0, 0, 1),
    background-color 320ms ease,
    opacity 220ms ease;
}

/* Expanded ring state on hoverable elements */
body.cursor-hovering .cursor-ring {
  width: 60px;
  height: 60px;
  background: rgba(247, 244, 238, 0.08);
}

/* Click pulse */
body.cursor-pressed .cursor-ring {
  width: 24px;
  height: 24px;
}

/* Hidden when the cursor leaves the window */
body.cursor-hidden .cursor-dot,
body.cursor-hidden .cursor-ring {
  opacity: 0;
}

/* Reduced motion / touch fallback */
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-ring { transition: none; }
}

/* ============================================================
   RESOURCE PAGES — lead magnets (downloadable PDFs)
   Reuses .essay-* template; adds a prominent email-capture block.
   ============================================================ */
.resource-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 0 0 var(--space-3);
  border: 1px solid var(--tissa-carbon);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  background: var(--tissa-white);
}
.resource-tag__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tissa-carbon);
}

.resource-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--tissa-border);
  border-bottom: 1px solid var(--tissa-border);
  margin: var(--space-4) 0 !important;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.resource-specs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.resource-specs__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--tissa-carbon-muted);
  opacity: 0.5;
}

/* Email-capture block */
.resource-form {
  background: var(--tissa-carbon);
  color: var(--tissa-paper);
  padding: var(--space-5);
  border-radius: 4px;
  margin: var(--space-5) 0 !important;
}
@media (min-width: 768px) {
  .resource-form { padding: var(--space-6); }
}
.resource-form__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-paper);
  opacity: 0.6;
  margin: 0 0 var(--space-2);
}
.resource-form__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--tissa-paper);
  margin: 0 0 var(--space-3);
}
.resource-form__inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 540px) {
  .resource-form__inputs { flex-direction: row; align-items: stretch; }
}
.resource-form__input {
  flex: 1;
  padding: 14px 16px;
  background: rgba(247, 244, 238, 0.06);
  border: 1px solid rgba(247, 244, 238, 0.18);
  border-radius: 2px;
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--tissa-paper);
  outline: none;
  transition: border-color 240ms ease, background-color 240ms ease;
}
.resource-form__input::placeholder { color: rgba(247, 244, 238, 0.45); }
.resource-form__input:focus {
  border-color: var(--tissa-paper);
  background: rgba(247, 244, 238, 0.1);
}
.resource-form__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--tissa-paper);
  border: 1px solid var(--tissa-paper);
  border-radius: 2px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tissa-carbon);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 240ms ease, color 240ms ease;
}
.resource-form__button:hover {
  background: transparent;
  color: var(--tissa-paper);
}
.resource-form__button:disabled {
  background: rgba(247, 244, 238, 0.18);
  border-color: transparent;
  color: var(--tissa-paper);
  cursor: default;
}
.resource-form__small {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.5);
  margin: var(--space-3) 0 0;
}

/* ============================================================
   RELATED LIST — pillar pages "Go deeper" / "Related reading"
   (lives on light backgrounds — different from .ind-anti__list)
   ============================================================ */
.related-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--tissa-border);
}
.related-list__item {
  padding: var(--space-4) 0 var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--tissa-border);
  border-left: 2px solid transparent;
  transition: border-left-color 320ms ease, padding-left 360ms cubic-bezier(0.2, 0, 0, 1);
}
.related-list__item:hover {
  border-left-color: var(--tissa-carbon);
  padding-left: calc(var(--space-3) + 8px);
}
.related-list__title {
  display: inline-block;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--tissa-carbon);
  text-decoration: none;
  margin: 0 0 6px;
  transition: color 280ms ease;
}
.related-list__title:hover { color: var(--tissa-carbon); }
.related-list__title::after {
  content: " →";
  font-style: normal;
  display: inline-block;
  transition: transform 360ms cubic-bezier(0.2, 0, 0, 1);
}
.related-list__item:hover .related-list__title::after {
  transform: translateX(6px);
}
.related-list__desc {
  display: block;
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--tissa-carbon-muted);
  margin: 0;
  max-width: 60ch;
}

/* FAQ */
.ind-faq {
  padding: calc(var(--space-7) + var(--space-2)) 0;
  background: var(--tissa-white);
}
@media (min-width: 1024px) {
  .ind-faq { padding: calc(var(--space-8) + var(--space-2)) 0; }
}
.ind-faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--tissa-border);
}

/* ============================================================
   INDUSTRY TILES — image-overlay cards with dark-wash hover.
   Each card: full-bleed image, dark gradient for legibility, text
   anchored to bottom. Hover sweeps a carbon wash from bottom-left
   to fill the card; preview description fades in from below.
   ============================================================ */
.industry-grid-section {
  background: var(--tissa-carbon);
  padding: var(--space-8) 0;
}
.industry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .industry-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
@media (min-width: 1280px) {
  .industry-grid { gap: var(--space-5); }
}

.industry-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  background: var(--tissa-carbon);
}
.industry-tile__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--tissa-offwhite);
  text-decoration: none;
}

.industry-tile__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 600ms ease;
  filter: brightness(0.88);
}

/* Static gradient for legibility (image → text). */
.industry-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 400ms ease;
}

/* Dark-wash hover overlay — grows from bottom-left corner */
.industry-tile__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  background: rgba(20, 20, 20, 0.78);
  z-index: 2;
  transition: width 620ms cubic-bezier(0.2, 0, 0, 1),
              height 620ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}
.industry-tile__link:hover::after { width: 100%; height: 100%; }
.industry-tile__link:hover .industry-tile__image {
  transform: scale(1.05);
  filter: brightness(0.7);
}

/* Content layer */
.industry-tile__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  gap: var(--space-2);
}
.industry-tile__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 8px;
}
.industry-tile__num {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(247, 244, 238, 0.7);
}
.industry-tile__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--tissa-offwhite);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.industry-tile__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tissa-offwhite);
  flex: 0 0 8px;
  transition: background 320ms ease;
}
.industry-tile__link:hover .industry-tile__dot { background: var(--tissa-white); }

/* Description — hidden by default, fades in/slides up on hover */
.industry-tile__desc {
  font-family: var(--ff-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(247, 244, 238, 0.8);
  margin: 0;
  max-width: 48ch;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 480ms cubic-bezier(0.2, 0, 0, 1) 80ms,
              transform 540ms cubic-bezier(0.2, 0, 0, 1) 80ms;
}
.industry-tile__link:hover .industry-tile__desc {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .industry-grid-section { padding: var(--space-7) 0; }
  .industry-tile { aspect-ratio: 4 / 5; }
  /* On touch (no hover), reveal the description by default */
  .industry-tile__desc { opacity: 1; transform: none; }
  .industry-tile__title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .industry-tile__image,
  .industry-tile__desc,
  .industry-tile__link::after { transition: none !important; }
}

/* ============================================================
   INDUSTRIES HUB PAGE — scrolly directory (pinned stage) [LEGACY]
   No longer used on industries.html — kept for reference only.
   ============================================================ */
.ind-scroll {
  position: relative;
  background: var(--tissa-ink, #1a1c1f);
  color: var(--tissa-paper);
}
.ind-scroll__track {
  position: relative;
  height: calc(100vh * 5);   /* 6 slots × pin distance — feels deliberate without endless scroll */
}
.ind-scroll__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ind-scroll__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
@media (min-width: 1024px) {
  .ind-scroll__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: center;
  }
}

/* ----- LEFT COLUMN ----- */
.ind-scroll__left {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--space-3);
}

/* Counter badge (top-left, saffron) — single number, no total */
.ind-scroll__counter {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  background: var(--tissa-saffron, #c7965a);
  color: var(--tissa-ink, #1a1c1f);
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* Media stack — absolute children, only .is-active is on-screen */
.ind-scroll__stack {
  position: relative;
}
.ind-scroll__stack--media {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 64vh;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .ind-scroll__stack--media {
    aspect-ratio: 5 / 4;
    max-height: 72vh;
  }
}
.ind-scroll__media {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  /* "Grow from the left" reveal: image is clipped to zero width on the right side,
     anchored at the left edge. When activated the right clip retracts → image grows rightward. */
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 280ms cubic-bezier(0.2, 0, 0, 1),
    clip-path 1100ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  will-change: clip-path, opacity;
}
.ind-scroll__media.is-active {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}
.ind-scroll__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;          /* keep the left edge as the visual anchor */
  filter: grayscale(0.04) contrast(1.04);
  transform: scale(1.08);                 /* subtle "growing" feel as the reveal lands */
  transform-origin: left center;
  transition: transform 1500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ind-scroll__media.is-active img {
  transform: scale(1);
}
.ind-scroll__media.is-fallback {
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255, 255, 255, 0.04) 22px 23px),
    rgba(255, 255, 255, 0.03);
}
.ind-scroll__media.is-fallback::before {
  content: "Tissa";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-script);
  font-size: clamp(40px, 5vw, 72px);
  color: var(--tissa-saffron, #c7965a);
  opacity: 0.6;
}

/* ----- RIGHT COLUMN ----- */
.ind-scroll__right {
  position: relative;
  display: flex;
  align-items: stretch;
}
.ind-scroll__stack--content {
  position: relative;
  flex: 1;
  min-height: 460px;
}
@media (min-width: 1024px) {
  .ind-scroll__stack--content { min-height: 520px; }
}
.ind-scroll__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 820ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}
.ind-scroll__content.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ind-scroll__eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-saffron, #c7965a);
}

.ind-scroll__title {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--tissa-paper);
  margin: 0;
}

.ind-scroll__rule {
  border: 0;
  border-top: 1px solid rgba(244, 240, 233, 0.18);
  margin: var(--space-2) 0 var(--space-3);
  width: 100%;
}

.ind-scroll__body {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: rgba(244, 240, 233, 0.78);
  margin: 0 0 var(--space-3);
  max-width: 54ch;
}

/* CTA */
.ind-scroll__cta {
  align-self: flex-start;
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(244, 240, 233, 0.4);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-paper);
  text-decoration: none;
  transition: gap 360ms cubic-bezier(0.2, 0, 0, 1), border-color 320ms ease;
}
.ind-scroll__cta:hover {
  gap: 20px;
  color: var(--tissa-saffron, #c7965a);          /* override global a:hover (carbon → invisible on dark) */
  border-color: var(--tissa-saffron, #c7965a);
}
.ind-scroll__cta-arrow {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
}
.ind-scroll__cta-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: right center;
}

/* Progress rail (right edge) */
.ind-scroll__progress {
  position: absolute;
  top: 0;
  right: -18px;
  bottom: 0;
  width: 2px;
  display: none;
}
@media (min-width: 1024px) {
  .ind-scroll__progress { display: block; }
}
.ind-scroll__progress-rail,
.ind-scroll__progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.ind-scroll__progress-rail {
  height: 100%;
  background: rgba(244, 240, 233, 0.12);
}
.ind-scroll__progress-bar {
  height: var(--ind-progress, 0%);
  background: var(--tissa-saffron, #c7965a);
  transition: height 220ms linear;
}

/* Mobile: collapse the pinned scrolly into a plain stack */
@media (max-width: 1023px) {
  .ind-scroll__track { height: auto; }
  .ind-scroll__stage {
    position: relative;
    height: auto;
    padding: calc(var(--space-7) + var(--space-2)) 0;
  }
  .ind-scroll__stack--content { min-height: 0; }
  .ind-scroll__content {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-top: var(--space-5);
  }
  /* On mobile, only the active slot's media shows — JS still drives that. */
  .ind-scroll__stack--media { max-height: 56vh; }
  .ind-scroll__media:not(.is-active) { display: none; }
}


/* Outro */
.industries-outro {
  padding: calc(var(--space-7) + var(--space-2)) 0;
  background: var(--tissa-offwhite);
  border-top: 1px solid var(--tissa-border);
}
@media (min-width: 1024px) { .industries-outro { padding: calc(var(--space-8) + var(--space-2)) 0; } }
.industries-outro__lead {
  font-family: var(--ff-body);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.6;
  color: var(--tissa-carbon);
  margin: 0 0 var(--space-4);
  max-width: 56ch;
}
.industries-outro__lead em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
}
.industries-outro__lead strong {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
}
.industries-outro__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--tissa-carbon);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--tissa-carbon);
  transition: gap 360ms cubic-bezier(0.2, 0, 0, 1);
}
.industries-outro__cta:hover { gap: 20px; }

/* ============================================================
   MANIFESTO — home page (Core Atelier-style alternating blocks)
   Two row blocks (intro + discipline), each with the same entry:
     · heading scales DOWN from 1.85 → 1, opacity 0 → 1
     · body fades up
     · image translates up + curtain panel slides down to reveal
   Trigger: nav.js IntersectionObserver adds `.is-revealed` to any
   element with [data-reveal-item]. Each .manifesto__block (and the
   strip) carries that attribute so they animate when scrolled to.
   ============================================================ */
.manifesto {
  position: relative;
  z-index: 2;                              /* sit above the fixed video hero (z-index: 1) */
  background: var(--tissa-white);
  padding: calc(var(--space-7) + var(--space-2)) 0 var(--space-7);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .manifesto { padding: calc(var(--space-8) + var(--space-2)) 0 var(--space-8); }
}

/* ---------- BLOCK (row of info + media) ---------- */
.manifesto__block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: end;
}
.manifesto__block + .manifesto__block {
  margin-top: calc(var(--space-7) + var(--space-2));
}
@media (min-width: 768px) {
  .manifesto__block {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .manifesto__block + .manifesto__block { margin-top: var(--space-8); }
}
@media (min-width: 1024px) {
  .manifesto__block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-7);
  }
}

/* Alternated layout — image on the left, info on the right */
@media (min-width: 768px) {
  .manifesto__block--reverse .manifesto__info  { order: 2; }
  .manifesto__block--reverse .manifesto__media { order: 1; }
  .manifesto__block--reverse {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

/* ---------- INFO ---------- */
.manifesto__info {
  max-width: 560px;
  align-self: end;
}

/* Heading — scales DOWN into place on entry */
.manifesto__heading {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--tissa-carbon);
  margin: 0;
  /* Initial: large + invisible, anchored at the baseline-left */
  transform: scale(1.85);
  transform-origin: bottom left;
  opacity: 0;
  transition:
    transform 1150ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 700ms ease;
  will-change: transform, opacity;
}
.manifesto__heading em {
  font-style: italic;
  font-weight: 400;
  display: inline-block;
}
.manifesto__block.is-revealed .manifesto__heading {
  transform: scale(1);
  opacity: 1;
}

/* Body */
.manifesto__body {
  margin-top: var(--space-3);
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--tissa-carbon);
  max-width: 50ch;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 700ms ease 280ms,
    transform 800ms cubic-bezier(0.2, 0, 0, 1) 280ms;
}
@media (min-width: 1024px) {
  .manifesto__body { margin-top: var(--space-4); }
}
.manifesto__body p { margin: 0; }
.manifesto__body em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
}
.manifesto__block.is-revealed .manifesto__body {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- MEDIA ---------- */
.manifesto__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--tissa-white);
  /* Initial: pushed down a bit, eases up into place */
  transform: translateY(20%);
  opacity: 0;
  transition:
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1) 150ms,
    opacity 800ms ease 150ms;
  will-change: transform, opacity;
}
@media (min-width: 1024px) {
  .manifesto__media { aspect-ratio: 5 / 3; }
}
.manifesto__block.is-revealed .manifesto__media {
  transform: translateY(0);
  opacity: 1;
}

.manifesto__media-wrap {
  position: absolute;
  inset: 0;
}
.manifesto__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.04) contrast(1.04);
}

/* Cover panel — sits over the image at rest; slides DOWN on reveal */
.manifesto__media-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--tissa-white);
  transform: translateY(0);
  transition: transform 1100ms cubic-bezier(0.85, 0, 0.15, 1) 600ms;
}
.manifesto__block.is-revealed .manifesto__media-cover {
  transform: translateY(100%);
}

/* Fallback when image fails */
.manifesto__media.is-fallback {
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(37, 38, 40, 0.03) 22px 23px),
    var(--tissa-white);
}
.manifesto__media.is-fallback::after {
  content: "Tissa";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-script);
  font-size: clamp(60px, 8vw, 120px);
  color: var(--tissa-carbon);
  opacity: 0.18;
  z-index: 1;
}

/* ---------- TRUSTED-BY STRIP ---------- */
.manifesto__strip {
  margin-top: calc(var(--space-7) + var(--space-2));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 800ms ease 200ms,
    transform 800ms cubic-bezier(0.2, 0, 0, 1) 200ms;
}
@media (min-width: 1024px) {
  .manifesto__strip { margin-top: var(--space-8); }
}
.manifesto__strip.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.manifesto__strip-label {
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--tissa-carbon-muted);
  margin: 0;
}

.manifesto__strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  max-width: 1100px;
}
@media (min-width: 640px) {
  .manifesto__strip-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
}
@media (min-width: 1024px) {
  .manifesto__strip-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

/* Each logo cell is now a CARD — rounded, soft background, subtle shadow */
.manifesto__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: var(--space-3) var(--space-2);
  background: #ececea;                              /* neutral light gray — was warm offwhite */
  border-radius: 14px;
  color: var(--tissa-carbon);
  box-shadow:
    0 1px 2px rgba(37, 38, 40, 0.04),
    0 4px 12px rgba(37, 38, 40, 0.03);
  transition:
    transform 480ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 320ms ease,
    background 320ms ease;
}
.manifesto__logo:hover {
  transform: translateY(-2px);
  background: #e3e3e0;
  box-shadow:
    0 2px 4px rgba(37, 38, 40, 0.06),
    0 10px 24px rgba(37, 38, 40, 0.06);
}

/* Inline SVG logo — scales to fit card width */
.manifesto__logo-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 160px;
  max-height: 64px;
  color: inherit;
  fill: currentColor;
}

/* Reduce motion — disable the entry transforms */
@media (prefers-reduced-motion: reduce) {
  .manifesto__heading,
  .manifesto__body,
  .manifesto__media,
  .manifesto__media-cover,
  .manifesto__strip {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .manifesto__media-cover { display: none; }
}

/* ============================================================
   RESPONSIVE — home page mobile pass (≤640px and ≤380px)
   Compresses oversized clamps, vertical paddings, and fixed
   grids that don't collapse cleanly on small phones.
   ============================================================ */
@media (max-width: 640px) {

  /* ---------- HERO ---------- */
  .hero__title {
    font-size: clamp(34px, 9vw, 48px);
    line-height: 1.05;
    max-width: 16ch;
  }
  .hero__sub {
    font-size: 16px;
    max-width: 36ch;
  }
  .hero__pretitle-text {
    font-size: 11px;
    letter-spacing: 0.2em;
  }

  /* ---------- MANIFESTO ---------- */
  .manifesto {
    padding: var(--space-6) 0;
  }
  .manifesto__heading {
    font-size: clamp(40px, 11vw, 60px);
    line-height: 0.98;
  }
  .manifesto__body {
    font-size: 15px;
    line-height: 1.55;
    margin-top: var(--space-3);
  }
  .manifesto__block + .manifesto__block {
    margin-top: var(--space-6);
  }
  .manifesto__media {
    aspect-ratio: 4 / 3;
  }
  .manifesto__strip {
    margin-top: var(--space-6);
  }
  .manifesto__logo {
    min-height: 90px;
  }
  .manifesto__logo-svg {
    max-height: 50px;
  }

  /* ---------- 4C FRAMEWORK ---------- */
  .section.framework {
    padding: var(--space-6) 0;
  }
  .framework__heading {
    font-size: clamp(30px, 9vw, 44px);
    max-width: none;
  }
  .framework__lead {
    font-size: 16px;
    line-height: 1.55;
  }
  .framework-card__num {
    font-size: clamp(64px, 18vw, 96px);
  }
  .framework-card__title {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.05;
  }
  .framework-card__copy {
    font-size: 15px;
    line-height: 1.55;
  }
  .framework-card__verb {
    font-size: 10.5px;
    letter-spacing: 0.16em;
  }

  /* ---------- POWERED BY INTELLIGENCE (dark section) ---------- */
  .section.intelligence {
    padding: var(--space-6) 0;
  }
  .intelligence__heading {
    font-size: clamp(28px, 8.5vw, 44px);
    max-width: none;
  }
  .intelligence__grid {
    gap: var(--space-4);
  }
  .intel-acc__title {
    font-size: clamp(22px, 7vw, 32px);
    line-height: 1.1;
  }
  .intel-acc__body {
    font-size: 15px;
  }
  /* Icon sized down on phones so it stays balanced next to the title */
  .intel-acc__icon { width: 32px; height: 32px; }
  .intel-acc summary { padding: var(--space-3) 0; gap: var(--space-3); }
  /* On mobile, disable the hover slide — touch doesn't have hover and it
     conflicts with the natural finger-tap feedback */
  .intel-acc summary:hover .intel-acc__title { transform: none; }

  /* ---------- HOW WE WORK (alternating tier panels) ---------- */
  .how-tier {
    grid-template-columns: 1fr;
  }
  .how-tier__visual {
    aspect-ratio: 4 / 3;
  }
  .how-tier__num {
    font-size: clamp(72px, 22vw, 120px);
    bottom: var(--space-3);
    left: var(--space-3);
  }
  .how-tier__title {
    font-size: clamp(26px, 8vw, 38px);
    line-height: 1.05;
  }
  .how-tier__price-num {
    font-size: 20px;
  }
  .how-tier__inner {
    padding: var(--space-4);
  }
  .how-tier__deliv {
    font-size: 14px;
  }
  .how-tier__deliv li {
    padding: 10px 0;
  }
  .how-tier__cta {
    font-size: 11px;
  }

  /* ---------- DELIVERING RESULTS ---------- */
  .section.results {
    padding: var(--space-6) 0;
  }
  .results__heading {
    font-size: clamp(28px, 8.5vw, 40px);
    max-width: none;
  }
  .results__grid {
    grid-template-columns: 1fr;          /* stack on phone — was 1fr 1fr */
    row-gap: var(--space-4);
  }
  .results__grid--4 {
    grid-template-columns: 1fr 1fr;       /* keep 2-col for short stats */
    gap: var(--space-4) var(--space-3);
    margin-top: var(--space-4);
  }
  /* Scale the giant italic stat numbers down — 56px+ feels overpowering on phones */
  .result__num { font-size: clamp(38px, 13vw, 56px); }
  .result__label { font-size: 10.5px; letter-spacing: 0.18em; }
  .result { gap: 10px; padding-top: var(--space-2); }
  .result--center { gap: 8px; }

  /* ---------- BRAND UNIVERSE / WORK CAROUSEL ---------- */
  .section.work {
    padding: var(--space-6) 0;
  }
  .work__heading {
    font-size: clamp(28px, 8vw, 40px);
    max-width: 11ch;                              /* clean 2-line break: "Built to last." / "Designed to scale." */
    line-height: 1.05;
  }
  /* Hide nav arrows on mobile — users swipe instead */
  .work__nav { display: none; }
  .work__head {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }
  /* Track: one card per viewport — no peek of the next card */
  .work__track {
    gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-padding-left: 20px;                    /* ensure snap accounts for left padding */
  }
  .work-case {
    flex: 0 0 calc(100vw - 40px);                 /* exactly one card visible (viewport - 2×20px padding) */
    width: calc(100vw - 40px);
    max-width: none;
    scroll-snap-align: start;                     /* snap left edge to left padding */
    scroll-snap-stop: always;                     /* prevent skipping past a card on fast swipes */
  }
  .work-case__media { margin-bottom: 14px; aspect-ratio: 4 / 4.6; }
  .work-case__body { padding: 0 2px; gap: 8px; }
  .work-case__tag { font-size: 10.5px; letter-spacing: 0.2em; }
  .work-case__title { font-size: 20px; }
  .work-case__copy  { font-size: 14.5px; max-width: none; }
  .work-case__arrow { width: 38px; height: 38px; top: 12px; right: 12px; }

  /* ---------- HIDE MOBILE FAB + STICKY CTA BAR ---------- */
  /* These were "sticky bottom" elements that overlaid content and read
     as bugs. Disabled on mobile for a cleaner editorial flow — users
     reach contact via the main CTA inside .page-end at the bottom. */
  .mobile-cta-bar,
  .sms-fab,
  body.scrolled .mobile-cta-bar,
  body.scrolled .sms-fab {
    display: none !important;
  }
  body.scrolled { padding-bottom: 0 !important; }

  /* ---------- CLIENT PERSPECTIVE ---------- */
  .section.cp,
  .section .cp {
    padding: var(--space-6) 0;
  }

  /* ---------- NEWSLETTER ---------- */
  .ins-newsletter {
    padding: var(--space-6) 0;
  }
  .ins-newsletter__heading {
    font-size: clamp(28px, 8.5vw, 44px);
  }
  .ins-newsletter__form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .ins-newsletter__form input {
    width: 100%;
  }
  .ins-newsletter__form button {
    width: 100%;
    justify-content: center;
  }

  /* ---------- GENERIC SECTION PADDING ---------- */
  .section { padding: var(--space-7) 0; }
  .section--bone, .section--ink { padding: var(--space-7) 0; }

  /* ---------- SECTION PRETITLE ---------- */
  .section-pretitle__text {
    font-size: 11px;
    letter-spacing: 0.2em;
  }
}

/* Very small phones (320–380px) — extra compression for narrow viewports */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(28px, 9vw, 36px); }
  .manifesto__heading { font-size: 36px; }
  .framework__heading { font-size: 28px; }
  .framework-card__title { font-size: 24px; }
  .framework-card__num { font-size: 56px; }
  .intelligence__heading { font-size: 26px; }
  .how-tier__title { font-size: 24px; }
  .how-tier__num { font-size: 68px; }
  .results__heading,
  .ins-newsletter__heading { font-size: 26px; }

  /* Cap the italic stat numerals on very small phones */
  .result__num { font-size: 38px; }

  /* Brand Universe heading: clamp tighter + force "Built to last." on its own line */
  .work__heading {
    font-size: 26px;
    line-height: 1.08;
    max-width: 11ch;
  }
  /* Brand Universe carousel — one card per viewport at this breakpoint too */
  .work__track {
    padding-left: 20px;
    padding-right: 20px;
    gap: 20px;
  }
  .work-case {
    flex: 0 0 calc(100vw - 40px);
    width: calc(100vw - 40px);
    max-width: none;
  }
  .work-case__title { font-size: 19px; }
  .work-case__copy { font-size: 14px; line-height: 1.45; }

  /* Tighter container padding on the smallest screens */
  .container { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   RESPONSIVE — Contact page mobile pass (≤640px and ≤380px)
   ============================================================ */
@media (max-width: 640px) {
  /* ---------- HERO ---------- */
  .contact-hero { min-height: 50vh; }
  .contact-hero__crumbs { font-size: 10.5px; letter-spacing: 0.2em; }
  .contact-hero__sub {
    font-size: 15px;
    line-height: 1.5;
    max-width: none;
  }

  /* ---------- INFO + FORM ---------- */
  .ct-info { padding: var(--space-6) 0; }
  .ct-info__grid { gap: var(--space-4); }
  .ct-info__left,
  .ct-info__right { gap: var(--space-3); }
  .ct-info__right {
    padding: var(--space-4);
    border-radius: 4px;
  }
  .ct-info__heading {
    font-size: clamp(26px, 8.5vw, 36px);
    line-height: 1.08;
  }
  .ct-info__heading--sub {
    font-size: clamp(24px, 7.5vw, 32px);
  }
  .ct-info__lead {
    font-size: 15px;
    line-height: 1.5;
    max-width: none;
  }

  /* Seal — smaller circle */
  .ct-seal {
    width: 44px;
    height: 44px;
  }
  .ct-seal__inner { font-size: 22px; }

  /* Contact lines — compact */
  .ct-lines-list li {
    padding: var(--space-3) 0;
    gap: 14px;
  }
  .ct-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }
  .ct-icon svg { width: 16px; height: 16px; }
  .ct-line__label {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .ct-line__value { font-size: 14.5px; line-height: 1.4; }

  /* Industries chips — tighter wrap */
  .ct-industries__label {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .ct-industries__list { gap: 6px; }
  .ct-industries__list li { font-size: 10.5px; padding: 5px 10px; }

  /* ---------- FORM ---------- */
  .ct-form { gap: var(--space-2); }
  .ct-field__label {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .ct-field input,
  .ct-field select,
  .ct-field textarea {
    font-size: 16px;                            /* prevents iOS zoom on focus */
    padding: 11px 12px;
  }
  .ct-field textarea { min-height: 100px; }
  .ct-form__submit {
    padding: 13px 18px;
    font-size: 11px;
    letter-spacing: 0.18em;
    margin-top: var(--space-3);
    gap: 10px;
  }
  .ct-form__submit:hover { gap: 14px; }

  /* ---------- BANNER (carbon panel) ---------- */
  .ct-banner { padding: var(--space-6) 0; }
  .ct-banner__panel {
    padding: var(--space-5) var(--space-4);
    border-radius: 6px;
    gap: var(--space-3);
  }
  .ct-banner__chapter {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .ct-banner__title {
    font-size: clamp(24px, 8vw, 34px);
    line-height: 1.08;
  }
  .ct-banner__sub { font-size: 14.5px; }
  .ct-banner__cta {
    padding: 11px 18px;
    font-size: 11px;
    letter-spacing: 0.18em;
    align-self: flex-start;
  }
  .ct-banner__panel::after {
    font-size: clamp(140px, 36vw, 220px);
    bottom: -8%;
    right: -10%;
    opacity: 0.07;
  }

  /* ---------- PRINCIPLES STRIP ---------- */
  .ct-principles { padding: var(--space-6) 0; }
  .ct-principles__list { gap: var(--space-3); }
  .ct-principle__num {
    font-size: 11px;
  }
  .ct-principle__text {
    font-size: 13.5px;
    line-height: 1.4;
  }

  /* ---------- NEWSLETTER (Field Notes) ---------- */
  .ct-newsletter {
    padding: var(--space-6) 0;
  }
  .ct-newsletter__inner { gap: var(--space-3); }
  .ct-newsletter__chapter {
    font-size: 10px;
    letter-spacing: 0.2em;
  }
  .ct-newsletter__heading {
    font-size: clamp(24px, 7.5vw, 32px);
    line-height: 1.08;
  }
  .ct-newsletter__lead {
    font-size: 14.5px;
    line-height: 1.5;
    max-width: none;
  }
  /* Form — stack vertically so the input gets full width (was crushed in pill row at 320px) */
  .ct-newsletter__form {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 6px;
    border-radius: 10px;
  }
  .ct-newsletter__form input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;                          /* prevents iOS zoom on focus */
    border-radius: 6px;
    background: var(--tissa-paper);
  }
  .ct-newsletter__form button {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
    font-size: 11px;
    letter-spacing: 0.18em;
    border-radius: 6px;
  }

  /* ---------- MAP ---------- */
  .ct-map { padding: var(--space-6) 0; }
  .ct-map__head { margin-bottom: var(--space-4); }
  .ct-map__chapter {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .ct-map__heading {
    font-size: clamp(26px, 8vw, 38px);
  }
  .ct-map__sub { font-size: 14.5px; }
  .ct-map__frame { height: 340px; filter: grayscale(0.2) contrast(1.02); }
  .ct-map__open {
    bottom: 12px;
    right: 12px;
    padding: 8px 14px;
    font-size: 10px;
    letter-spacing: 0.14em;
    gap: 8px;
  }
}

/* Very small phones (≤380px) */
@media (max-width: 380px) {
  .ct-info__heading { font-size: 24px; }
  .ct-info__heading--sub { font-size: 22px; }
  .ct-info__right { padding: var(--space-3); }
  .ct-banner__title { font-size: 22px; }
  .ct-banner__panel { padding: var(--space-4) var(--space-3); }
  .ct-map__heading { font-size: 22px; }
  .ct-form__submit {
    width: 100%;
    justify-content: center;
  }
  .ct-banner__cta {
    width: 100%;
    justify-content: center;
  }
  /* Tiny screens — single column for the 2-col form rows is forced */
  .ct-form__row { grid-template-columns: 1fr !important; }
}

/* ============================================================
   SERVICES PAGE REDESIGN
   - Sticky vertical tier navigator (left side)
   - Massive italic tier-number floating decoration (right side)
   - Alternating slide-in animations per tier
   - Tier comparison table
   ============================================================ */

/* ---------- 1 · STICKY TIER NAVIGATOR — hidden per user request ---------- */
.services-rail { display: none !important; }
.services-rail__item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--tissa-carbon-muted);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: auto;
  transition: color 280ms ease;
}
.services-rail__item:hover { color: var(--tissa-carbon); }
.services-rail__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--tissa-carbon-muted);
  background: transparent;
  transition: background 280ms ease, border-color 280ms ease, transform 360ms cubic-bezier(0.2, 0, 0, 1);
}
.services-rail__label {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 280ms ease, transform 280ms ease;
  display: inline-block;
}
.services-rail__item:hover .services-rail__label,
.services-rail__item.is-active .services-rail__label {
  opacity: 1;
  transform: translateX(0);
}
.services-rail__item.is-active {
  color: var(--tissa-carbon);
}
.services-rail__item.is-active .services-rail__dot {
  background: var(--tissa-carbon);
  border-color: var(--tissa-carbon);
  transform: scale(1.4);
}
/* On dark sections the rail inverts */
.services-rail--on-ink .services-rail__item {
  color: rgba(247, 244, 238, 0.55);
}
.services-rail--on-ink .services-rail__item:hover,
.services-rail--on-ink .services-rail__item.is-active {
  color: var(--tissa-paper);
}
.services-rail--on-ink .services-rail__dot {
  border-color: rgba(247, 244, 238, 0.55);
}
.services-rail--on-ink .services-rail__item.is-active .services-rail__dot {
  background: var(--tissa-paper);
  border-color: var(--tissa-paper);
}

/* ---------- 2 · MASSIVE ITALIC TIER NUMBER (side decoration) ---------- */
.tier-v2 { position: relative; }
.tier-v2__big-num {
  display: none;
}
@media (min-width: 1024px) {
  .tier-v2__big-num {
    display: block;
    position: absolute;
    top: -20px;
    right: -40px;
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(280px, 32vw, 520px);
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--tissa-carbon);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }
  .tier-v2--bone .tier-v2__big-num { opacity: 0.06; }
  /* Make sure the content sits above the giant number */
  .tier-v2 > *:not(.tier-v2__big-num) {
    position: relative;
    z-index: 1;
  }
}

/* ---------- 3 · ALTERNATING SLIDE-IN ANIMATIONS ---------- */
.tier-block { overflow-x: clip; }              /* prevents off-screen slide from causing scroll */
.tier-v2 {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.tier-block:nth-of-type(odd) .tier-v2 {
  transform: translateX(-60px);                /* from LEFT */
}
.tier-block:nth-of-type(even) .tier-v2 {
  transform: translateX(60px);                 /* from RIGHT */
}
.tier-block.is-in-view .tier-v2,
.tier-v2.is-in-view {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .tier-v2 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- 4 · TIER COMPARISON TABLE ---------- */
.tier-compare {
  background: var(--tissa-white);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--tissa-border);
}
@media (min-width: 1024px) {
  .tier-compare { padding: calc(var(--space-7) + var(--space-2)) 0; }
}
.tier-compare__head {
  text-align: center;
  margin: 0 auto var(--space-6);
  max-width: 640px;
}
.tier-compare__eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin: 0 0 var(--space-3);
}
.tier-compare__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--tissa-carbon);
  margin: 0 0 var(--space-3);
}
.tier-compare__sub {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--tissa-carbon-muted);
  margin: 0;
}

.tier-compare__table {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--tissa-border);
}
@media (min-width: 768px) {
  .tier-compare__table {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
  }
}
.tier-compare__row {
  display: contents;
}
.tier-compare__cell {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--tissa-border);
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tissa-carbon);
}
.tier-compare__cell--label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.tier-compare__cell--header {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
  border-bottom: 2px solid var(--tissa-carbon);
}
.tier-compare__cell--value-strong {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  color: var(--tissa-carbon);
}
.tier-compare__cell--highlight {
  background: var(--tissa-offwhite);
}
@media (max-width: 767px) {
  .tier-compare__cell--label {
    padding-top: var(--space-3);
    padding-bottom: 4px;
    border-bottom: 0;
  }
}

/* ================================================================
   RESPONSIVE — Site-wide mobile pass for pages NOT covered by the
   home + contact + essay-template passes above. Targets:
   About, Services (tiers + compare + add-ons), Work + case studies,
   Industries (hub scrolly + detail pages), Service detail pages,
   Insights hub, Resources hub, 404, brand-operating-system.
   ================================================================ */
@media (max-width: 640px) {

  /* ---------- SHARED SECTION PADDING — kill space-7/space-8 ---------- */
  /* Many sections pin to space-7 (96px) or space-8 (128px) at base.
     Reduce to space-5/space-6 on phones so content isn't lost in air. */
  .about-origin,
  .about-values,
  .about-stance,
  .about-founder,
  .about-security,
  .about-philosophy,
  .services-addons,
  .services-intro,
  .tier-block,
  .work-hero,
  .work-features,
  .work-feature,
  .work-footnote,
  .ind-prose,
  .ind-system,
  .ind-case,
  .ind-deliverables,
  .ind-anti,
  .ind-faq,
  .industries-outro,
  .ins-hero,
  .ins-featured,
  .ins-grid-section,
  .ins-feat-edi,
  .service-hero,
  .service-section,
  .service-pull,
  .service-divider,
  .case-section {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  /* ---------- ABOUT PAGE ---------- */
  .about-origin__lead {
    font-size: clamp(17px, 5vw, 22px);
    line-height: 1.5;
    margin-bottom: var(--space-4);
  }
  .about-origin__body { font-size: 15.5px; line-height: 1.6; }
  .about-pullquote {
    margin: var(--space-4) 0;
    padding: var(--space-4) 0;
  }
  .about-pullquote p {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.15;
    max-width: 18ch;
  }

  /* Founder split — already stacks; compress photo and type */
  .about-founder__photo { aspect-ratio: 4 / 5; max-width: 320px; }
  .about-founder__name {
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.0;
  }
  .about-founder__title { font-size: 11px; letter-spacing: 0.2em; }
  .about-founder__bio { font-size: 15.5px; line-height: 1.55; }

  /* Values — single column always */
  .about-values__head { margin-bottom: var(--space-4); }
  .about-value__title {
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.15;
  }
  .about-value__body { font-size: 14.5px; line-height: 1.55; }

  /* Stance — for/against cols are already stacked; compress against block */
  .about-stance__grid { gap: var(--space-4); }
  .about-stance__heading {
    font-size: clamp(24px, 7.5vw, 34px);
    line-height: 1.1;
    max-width: none;
  }
  .about-stance__col--against {
    padding: var(--space-4) var(--space-3);
  }
  .about-stance__list li {
    padding: 12px 0 12px 24px;
    font-size: 14.5px;
  }
  .about-stance__list li::before { top: 22px; width: 12px; }

  /* Security flip cards — single col, taller for body */
  .about-security__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .security-card { aspect-ratio: 5 / 4; max-width: 360px; margin: 0 auto; width: 100%; }
  .security-card__title { font-size: clamp(20px, 6vw, 26px); }
  .security-card__body { font-size: clamp(15px, 4.5vw, 18px); line-height: 1.4; }
  .security-card__face { padding: var(--space-3); }

  /* Philosophy (on ink) */
  .about-philosophy__heading {
    font-size: clamp(26px, 8vw, 36px);
    line-height: 1.1;
    max-width: none;
  }
  .about-philosophy__body { font-size: 15.5px; line-height: 1.55; }

  /* ---------- SERVICES PAGE ---------- */
  .services-intro__lead { font-size: clamp(17px, 5vw, 21px); line-height: 1.45; }
  .services-intro__question { font-size: clamp(26px, 8vw, 36px); line-height: 1.1; }
  .services-rail { display: none; }                /* sticky rail unusable on phone */

  /* Tier v2 cards — major dampening of the huge title */
  .tier-v2 { gap: var(--space-4); }
  .tier-v2__title {
    font-size: clamp(36px, 11vw, 56px);
    line-height: 0.98;
    max-width: 16ch;
  }
  .tier-v2__lead { font-size: clamp(15.5px, 4.5vw, 18px); line-height: 1.55; }
  .tier-v2__kicker { font-size: 10px; letter-spacing: 0.18em; }
  .tier-v2__num { font-size: 12px; }
  .tier-v2__stats { margin: var(--space-4) 0; }
  .tier-v2__stat { padding: var(--space-3); }
  /* Dark Investment cell — shrink the massive price so it fits 320px */
  .tier-v2__stat:nth-child(2) { padding: var(--space-4) var(--space-3); }
  .tier-v2__stat:nth-child(2) .tier-v2__stat-value {
    font-size: clamp(44px, 13vw, 68px);
    line-height: 0.95;
  }
  .tier-v2__stat:nth-child(1) .tier-v2__stat-value,
  .tier-v2__stat:nth-child(3) .tier-v2__stat-value {
    font-size: clamp(18px, 5vw, 22px);
  }
  .tier-v2__toggle { font-size: 11px; letter-spacing: 0.18em; padding: 14px 0; }
  .tier-v2__list li { padding: 14px 0; gap: 12px; }
  .tier-v2__list-text { font-size: 14.5px; line-height: 1.5; }
  .tier-v2__list-num { font-size: 11px; }
  .tier-v2__panel-note { padding: var(--space-3); }
  .tier-v2__cta { font-size: 16px; gap: 12px; }

  /* Tier compare table — already collapses to 1-col via min-width:768px.
     Add visible label/header separators so the stacked rows read well. */
  .tier-compare { padding: 0; }
  .tier-compare__head { margin-bottom: var(--space-4); }
  .tier-compare__heading { font-size: clamp(24px, 7vw, 32px); line-height: 1.1; }
  .tier-compare__eyebrow { font-size: 10px; letter-spacing: 0.18em; }
  .tier-compare__cell { padding: 10px var(--space-2); font-size: 14.5px; }
  .tier-compare__cell--header {
    font-size: clamp(18px, 5.5vw, 22px);
    padding-top: var(--space-3);
    border-top: 1px solid var(--tissa-carbon);
    border-bottom: 1px solid var(--tissa-carbon);
  }
  .tier-compare__cell--value-strong { font-size: clamp(18px, 5.5vw, 22px); }

  /* Services add-ons (on ink, was 4-col) — single col, no pinned scroll */
  .services-addons { padding: var(--space-6) 0; }
  .services-addons__head { margin-bottom: var(--space-4); gap: var(--space-2); }
  .services-addons__heading {
    font-size: clamp(26px, 8vw, 36px);
    line-height: 1.05;
    max-width: 18ch;
  }
  .services-addons__lead { font-size: 15px; line-height: 1.55; }
  .services-addon__title { font-size: clamp(19px, 5.5vw, 24px); }
  .services-addon__body { font-size: 14.5px; line-height: 1.5; }
  .services-addons__link { font-size: 14.5px; }

  /* ---------- WORK PAGE (work-feature spreads) ---------- */
  .work-hero__top { margin-bottom: var(--space-4); }
  .work-hero__stage { gap: var(--space-3); max-width: none; }
  .work-hero__title {
    font-size: clamp(34px, 10vw, 52px);
    line-height: 1.0;
    max-width: 14ch;
  }
  .work-hero__lead { font-size: clamp(15.5px, 4.5vw, 18px); line-height: 1.55; }

  .work-feature { padding: var(--space-5) 0; }
  .work-feature__grid { gap: var(--space-4); }
  .work-feature__text { gap: var(--space-3); padding-top: 0; }
  .work-feature__logo { width: 40px; height: 40px; }
  .work-feature__title {
    font-size: clamp(26px, 8vw, 36px);
    line-height: 1.05;
    max-width: 16ch;
  }
  .work-feature__desc { font-size: 15px; line-height: 1.55; }
  .work-feature__list li { font-size: 14.5px; line-height: 1.5; }
  .work-feature__media { gap: var(--space-2); }
  .work-feature__media-grid { gap: var(--space-2); }
  .work-feature__cta { font-size: 16px; gap: 12px; }
  .work-footnote { padding: var(--space-5) 0 var(--space-6); }
  .work-footnote__text { font-size: clamp(18px, 5.5vw, 22px); line-height: 1.35; max-width: 28ch; }

  /* ---------- CASE STUDY pages (work/*.html) ---------- */
  .case-hero {
    height: auto;
    min-height: 70vh;
    max-height: 720px;
  }
  /* Vertical only — horizontal padding comes from .container (the same element has both classes) */
  .case-hero__content {
    padding-top: var(--space-5);
    padding-bottom: var(--space-4);
  }
  .case-hero__title {
    font-size: clamp(32px, 10vw, 50px);
    line-height: 1.0;
    max-width: 16ch;
    margin-bottom: var(--space-3);
  }
  .case-hero__meta { gap: var(--space-3) var(--space-4); }
  .case-hero__meta-label { font-size: 10px; letter-spacing: 0.18em; }
  .case-hero__meta-value { font-size: 15px; }

  .case-section { padding: var(--space-5) 0; }
  .case-description { font-size: clamp(17px, 5vw, 22px); line-height: 1.5; }
  .case-overview { gap: var(--space-3); }
  .case-overview__heading { font-size: 11px; letter-spacing: 0.2em; }
  .case-overview__body { font-size: 15.5px; line-height: 1.55; }
  .case-overview__list li { grid-template-columns: 40px 1fr; padding: var(--space-2) 0; }
  .case-overview__list-text { font-size: clamp(16px, 4.8vw, 20px); line-height: 1.25; }
  .case-stat { padding: var(--space-3) 0; }
  .case-stat__num {
    font-size: clamp(56px, 17vw, 92px);
    line-height: 0.9;
    letter-spacing: -0.03em;
  }
  .case-stat__desc { font-size: 15px; line-height: 1.5; padding-bottom: 6px; }
  .case-stats__head { margin-bottom: var(--space-3); font-size: 11px; }

  .case-nav { padding: var(--space-5) 0; }
  .case-nav__title { font-size: clamp(24px, 7.5vw, 32px); line-height: 1.05; gap: 10px; }
  .case-nav__label { font-size: 10px; letter-spacing: 0.2em; }
  .case-gallery { gap: var(--space-2); }

  /* ---------- INDUSTRIES HUB (ind-scroll already has mobile fallback) ---------- */
  .ind-scroll__stage { padding: var(--space-5) 0; }
  .ind-scroll__counter { min-width: 40px; height: 40px; font-size: 12px; padding: 0 12px; }
  .ind-scroll__stack--media { max-height: 50vh; aspect-ratio: 4 / 3; }
  .ind-scroll__title {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.05;
  }
  .ind-scroll__body { font-size: 15px; line-height: 1.55; }
  .ind-scroll__eyebrow { font-size: 10px; letter-spacing: 0.18em; }
  .ind-scroll__content { gap: var(--space-2); }
  .ind-scroll__cta { font-size: 10.5px; letter-spacing: 0.18em; padding: 4px 0; }
  .industries-outro__lead { font-size: clamp(15.5px, 4.5vw, 18px); line-height: 1.55; }

  /* ---------- INDUSTRY DETAIL PAGES ---------- */
  .industry-hero { min-height: 50vh; }
  .industry-hero__crumbs {
    font-size: 10px;
    letter-spacing: 0.18em;
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
    gap: 6px;
  }
  .industry-hero__sub { font-size: 15px; line-height: 1.5; margin: var(--space-2) 0 var(--space-3); }

  .ind-section__head { margin-bottom: var(--space-4); }
  .ind-section__heading,
  .ind-prose__heading {
    font-size: clamp(28px, 8.5vw, 40px);
    line-height: 1.04;
    max-width: none;
  }
  .ind-section__eyebrow,
  .ind-prose__eyebrow { font-size: 10px; letter-spacing: 0.2em; gap: 10px; }

  .ind-prose__body { font-size: 15.5px; line-height: 1.6; gap: var(--space-2); }
  .ind-prose__grid { gap: var(--space-3); }

  /* Tier cards (3-col → 1-col) */
  .ind-tier { padding: var(--space-3); gap: var(--space-2); }
  .ind-tier__title { font-size: clamp(19px, 5.5vw, 24px); line-height: 1.15; }
  .ind-tier__body { font-size: 14.5px; line-height: 1.5; }

  /* Anchor case */
  .ind-case__card { gap: var(--space-3); }
  .ind-case__title { font-size: clamp(22px, 7vw, 32px); line-height: 1.1; }
  .ind-case__excerpt { font-size: 15px; line-height: 1.55; }
  .ind-case__deliverables { font-size: 14px; }
  .ind-case__client { font-size: 10px; letter-spacing: 0.18em; }
  .ind-case__cta { font-size: 16px; gap: 8px; }

  /* Deliverables list (was 2-col @760+, now 1-col here anyway) */
  .ind-deliv-list li {
    grid-template-columns: 32px 1fr;
    gap: var(--space-2);
    padding: var(--space-3) 0;
  }
  .ind-deliv-list h3 { font-size: clamp(17px, 5vw, 22px); }
  .ind-deliv-list p { font-size: 14.5px; line-height: 1.5; }
  .ind-deliv__num { font-size: 10px; letter-spacing: 0.18em; padding-top: 4px; }

  /* Anti list */
  .ind-anti__list li {
    padding: var(--space-2) 0 var(--space-2) 28px;
    font-size: clamp(15.5px, 4.5vw, 19px);
    line-height: 1.35;
  }
  .ind-anti__list li::before { top: var(--space-2); font-size: 16px; }

  /* FAQ — shared with services FAQ via .faq-item */
  .faq-item summary { padding: var(--space-3) 0; gap: var(--space-2); }
  .faq-item__q { font-size: clamp(17px, 5.2vw, 22px); line-height: 1.2; }
  .faq-item__icon { width: 18px; height: 18px; }
  .faq-item__a { padding: 0 0 var(--space-3); }
  .faq-item__a p { font-size: 15px; line-height: 1.55; }

  /* ---------- SERVICE DETAIL PAGES ---------- */
  .service-hero { padding: var(--space-5) 0 var(--space-6); }
  .service-hero--image { min-height: 60vh; padding: var(--space-6) 0; }
  .service-hero__top { margin-bottom: var(--space-4); gap: var(--space-2); }
  .service-hero__back { padding: 8px 14px 8px 12px; font-size: 10px; letter-spacing: 0.18em; }
  .service-hero__tier { font-size: 10px; letter-spacing: 0.2em; }
  .service-hero__stage { gap: var(--space-3); margin-bottom: var(--space-4); }
  .service-hero__title {
    font-size: clamp(34px, 10vw, 56px);
    line-height: 1.0;
    max-width: 14ch;
  }
  .service-hero__tagline { font-size: clamp(15.5px, 4.5vw, 19px); line-height: 1.5; }
  .service-hero__cta-row { gap: var(--space-3); margin-bottom: var(--space-5); }
  .service-hero__jump { font-size: 11px; letter-spacing: 0.18em; }

  .service-glance { padding: var(--space-4) 0; }
  .service-glance__inner { grid-template-columns: 1fr 1fr; }
  .service-glance__value { font-size: clamp(18px, 5vw, 22px); }
  .service-glance__label { font-size: 10px; letter-spacing: 0.2em; }

  .service-chapter { margin-bottom: var(--space-4); gap: var(--space-2); }
  .service-chapter__title { font-size: clamp(24px, 7.5vw, 34px); line-height: 1.05; max-width: none; }
  .service-chapter__num { font-size: 10px; letter-spacing: 0.2em; }
  .service-chapter__sub { font-size: 15px; line-height: 1.55; }

  .service-prose__heading { font-size: clamp(26px, 8vw, 38px); line-height: 1.05; max-width: none; }
  .service-prose p { font-size: 15.5px; line-height: 1.6; }
  .service-prose__list li { font-size: 15px; line-height: 1.55; padding-left: 14px; }

  .service-fit__grid { gap: var(--space-3); }
  .service-fit__col { padding: var(--space-3); }
  .service-fit__list li { font-size: 15px; line-height: 1.5; }

  .service-deliverables__heading,
  .service-timeline__heading,
  .service-fit__heading,
  .service-faq__heading,
  .service-pricing__heading {
    font-size: clamp(26px, 8vw, 36px);
    line-height: 1.05;
  }

  /* Deliverable flip cards — taller aspect so body content fits at 320px */
  .deliverable-grid { gap: var(--space-3); }
  .deliverable-flip { aspect-ratio: 4 / 5; max-width: 360px; margin: 0 auto; width: 100%; }
  .deliverable-flip__title { font-size: clamp(18px, 5.5vw, 22px); }
  .deliverable-flip__desc { font-size: 14.5px; line-height: 1.5; }
  .deliverable-flip__back-body { font-size: clamp(15px, 4.5vw, 18px); line-height: 1.4; }

  /* Gate explainer (on ink) */
  .gate-explainer__lead { font-size: clamp(16px, 4.7vw, 19px); line-height: 1.55; }
  .gate-option { padding: var(--space-3); }
  .gate-option__title { font-size: clamp(19px, 5.5vw, 24px); line-height: 1.15; }
  .gate-option p { font-size: 14.5px; line-height: 1.55; }

  /* Pricing tiers (Master Book) — already stacks via 760px breakpoint */
  .pricing-tier { padding: var(--space-4); }

  /* Service editorial pullquote */
  .service-pull { padding: var(--space-5) 0; }
  .service-pull__text { font-size: clamp(22px, 7vw, 30px); line-height: 1.15; }
  .service-pull__mark { font-size: 40px; }

  /* Drop cap — shrink so it doesn't overwhelm narrow column */
  .service-prose--editorial p:first-of-type::first-letter {
    font-size: clamp(48px, 14vw, 64px);
    margin: 4px 8px 0 0;
  }

  /* Service figure caption + framing */
  .service-figure__caption { font-size: 11px; letter-spacing: 0.18em; }

  /* ---------- INSIGHTS HUB ---------- */
  .ins-hero { padding: var(--space-6) 0 var(--space-5); }
  .ins-hero__mark { font-size: clamp(200px, 60vw, 360px); opacity: 0.05; }
  .ins-hero__title {
    font-size: clamp(40px, 12vw, 68px);
    line-height: 0.94;
    max-width: 12ch;
  }
  .ins-hero__lead { font-size: clamp(15.5px, 4.5vw, 19px); line-height: 1.5; margin-top: var(--space-3); }
  .ins-hero__eyebrow { font-size: 10px; letter-spacing: 0.2em; margin-bottom: var(--space-3); }

  .ins-feat-edi { padding: var(--space-6) 0; }
  .ins-feat-edi__title { font-size: clamp(28px, 8.5vw, 40px); line-height: 1.05; }
  .ins-feat-edi__lead { font-size: 15.5px; line-height: 1.5; }
  .ins-feat-edi__cta { font-size: 10.5px; letter-spacing: 0.18em; }
  .ins-feat-edi__eyebrow { font-size: 10px; letter-spacing: 0.18em; margin-bottom: var(--space-2); }

  .ins-grid-section { padding: var(--space-6) 0; }
  .ins-grid-section__head { margin-bottom: var(--space-4); }
  .ins-grid-section__heading {
    font-size: clamp(26px, 8vw, 36px);
    line-height: 1.05;
  }
  .ins-grid-section__eyebrow { font-size: 10px; letter-spacing: 0.2em; }

  /* Typographic directory list — tighter padding, smaller title */
  .ins-list__link { padding: var(--space-3) 0; column-gap: var(--space-3); }
  .ins-list__title { font-size: clamp(18px, 5.5vw, 24px); line-height: 1.18; }
  .ins-list__cat { font-size: 10px; letter-spacing: 0.18em; }
  .ins-list__meta { font-size: 10px; letter-spacing: 0.12em; }
  .ins-list__body { gap: 6px; }

  /* Featured cover (used on /insights legacy variant) — keep proportional */
  .ins-feat__cover { padding: var(--space-3); aspect-ratio: 5 / 6; }
  .ins-feat__cover-mark { font-size: clamp(90px, 28vw, 140px); }
  .ins-feat__cover-brand { font-size: 24px; }
  .ins-feat__title { font-size: clamp(26px, 8vw, 36px); line-height: 1.05; }
  .ins-feat__excerpt { font-size: 15px; line-height: 1.5; }
  .ins-feat__meta { font-size: 10px; letter-spacing: 0.18em; gap: 10px; }

  /* ---------- RESOURCES PAGES (lead-magnet form) ---------- */
  .resource-form { padding: var(--space-4); margin: var(--space-4) 0 !important; }
  .resource-form__title { font-size: clamp(20px, 6vw, 24px); line-height: 1.15; }
  .resource-form__inputs { gap: 10px; flex-direction: column; }
  .resource-form__input {
    font-size: 16px;                              /* prevents iOS zoom on focus (was 15px) */
    padding: 12px 14px;
    width: 100%;
  }
  .resource-form__button {
    width: 100%;
    padding: 13px 18px;
    font-size: 11px;
    letter-spacing: 0.18em;
  }
  .resource-form__label { font-size: 10px; letter-spacing: 0.18em; }
  .resource-form__small { font-size: 10px; letter-spacing: 0.14em; }

  /* ---------- 404 PAGE (uses .hero__title + .lead inline) ---------- */
  /* The home-page hero rule above already shrinks .hero__title.
     Just trim the lead and the main padding which is set inline. */
  main.section[style*="space-8"] {
    padding-top: var(--space-6) !important;
    padding-bottom: var(--space-6) !important;
  }

  /* ---------- BRAND OPERATING SYSTEM (pillar article) ---------- */
  /* Uses .essay-* template — already responsive. No extra rules needed. */
}

/* ============================================================
   VERY SMALL PHONES (≤380px) — extra compression for narrow screens
   ============================================================ */
@media (max-width: 380px) {
  /* About */
  .about-pullquote p { font-size: 22px; max-width: 16ch; }
  .about-founder__name { font-size: 28px; }
  .about-value__title { font-size: 19px; }
  .about-stance__heading { font-size: 22px; }
  .about-philosophy__heading { font-size: 24px; }
  .security-card__title { font-size: 19px; }

  /* Services */
  .services-intro__question { font-size: 24px; }
  .tier-v2__title { font-size: 34px; max-width: none; }
  .tier-v2__stat:nth-child(2) .tier-v2__stat-value { font-size: 40px; }
  .services-addons__heading { font-size: 24px; }
  .tier-compare__heading { font-size: 22px; }

  /* Work */
  .work-hero__title { font-size: 30px; }
  .work-feature__title { font-size: 24px; }
  .work-footnote__text { font-size: 17px; }

  /* Case studies */
  .case-hero__title { font-size: 28px; }
  .case-stat__num { font-size: 52px; }
  .case-overview__list-text { font-size: 16px; }
  .case-nav__title { font-size: 22px; }

  /* Industries */
  .ind-section__heading,
  .ind-prose__heading { font-size: 26px; }
  .ind-scroll__title { font-size: 26px; }
  .ind-tier__title { font-size: 18px; }
  .ind-case__title { font-size: 22px; }

  /* Service detail */
  .service-hero__title { font-size: 30px; }
  .service-chapter__title { font-size: 22px; }
  .service-prose__heading { font-size: 24px; }
  .service-deliverables__heading,
  .service-timeline__heading,
  .service-fit__heading,
  .service-faq__heading,
  .service-pricing__heading { font-size: 24px; }
  .service-pull__text { font-size: 20px; }
  .gate-option__title { font-size: 18px; }
  .deliverable-flip__title { font-size: 17px; }

  /* Insights */
  .ins-hero__title { font-size: 36px; }
  .ins-grid-section__heading { font-size: 24px; }
  .ins-feat-edi__title { font-size: 26px; }
  .ins-list__title { font-size: 17px; }
  .ins-feat__title { font-size: 24px; }

  /* FAQ */
  .faq-item__q { font-size: 17px; }
}

/* ============================================================
   INDUSTRY HERO — darken the image substantially so its photo
   content (including portfolio-image watermarks) reads as a
   textural background rather than competing with body text.
   Applies at all viewports — the legibility problem isn't
   mobile-only, it's worst there.
   ============================================================ */
.industry-hero .case-hero__image {
  filter: brightness(0.55) saturate(0.7) contrast(1.05);
}
.industry-hero .case-hero__overlay {
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.4)  35%,
      rgba(0, 0, 0, 0.55) 65%,
      rgba(0, 0, 0, 0.85) 100%
    );
}

/* (Old .service-hero--image mobile cleanup removed — the 4 service detail
   pages now use the canonical .case-hero pattern from industries/insights/
   about, so they inherit the existing case-hero mobile rules.) */

/* ============================================================
   INDUSTRIES HUB — aggressive mobile content reduction.
   The hero on 320px keeps ONLY breadcrumb + title.
   Lead and 3-row metadata strip are hidden — both pay too much
   scroll-cost for the value they add on phones.
   ============================================================ */
@media (max-width: 640px) {
  /* Hero — strip down to crumbs + title only */
  .industry-hero .case-hero__meta { display: none !important; }
  .industry-hero .industry-hero__sub { display: none !important; }

  /* Since the lead is gone, tighten title bottom-spacing */
  .industry-hero .case-hero__title {
    margin-bottom: 0;
  }

  /* Hero can be shorter now (less content inside) */
  .industry-hero { min-height: 44vh !important; }

  /* Intro section — heading + 1 paragraph only */
  .ind-prose { padding: var(--space-5) 0 !important; }
  .ind-prose__body p:not(:first-of-type) { display: none; }
  .ind-prose__heading { font-size: clamp(24px, 7.5vw, 32px); }
  .ind-prose__body p {
    font-size: 15px;
    line-height: 1.55;
  }
}

/* ============================================================
   CASE-HERO META + INDUSTRY HERO — mobile fixes for the strip
   that was wrapping 2+1 ugly and the hero that consumed the
   entire viewport on short phones.
   ============================================================ */
@media (max-width: 640px) {
  /* Meta strip → vertical stack with hairline rows (clean info card) */
  .case-hero__meta {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    width: 100%;
  }
  .case-hero__meta-item {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-3);
    padding: 10px 0;
    border-top: 1px solid rgba(247, 244, 238, 0.16);
  }
  .case-hero__meta-item:first-child { border-top: 0; }
  .case-hero__meta-label {
    font-size: 10px;
    letter-spacing: 0.18em;
    flex-shrink: 0;
  }
  .case-hero__meta-value {
    font-size: 14px;
    text-align: right;
    max-width: 60%;
  }

  /* Hero height — let the body section breathe below */
  .case-hero { min-height: 60vh; max-height: 740px; }
  .industry-hero { min-height: 60vh; }
  /* Top padding must clear the fixed transparent navbar (~76px tall) on
     pages with body.has-image-hero. Was var(--space-5) = 48px which was
     too small — the breadcrumb collided with the Tissa logo. */
  .case-hero__content {
    padding-top: calc(76px + var(--space-3));
    padding-bottom: var(--space-4);
  }

  /* Title — tighten so italic 's' / descenders don't right-edge clip */
  .case-hero__title,
  .hero__title.case-hero__title {
    font-size: clamp(28px, 8.5vw, 40px) !important;
    line-height: 1.04;
    padding-right: 6px;
  }
  .industry-hero__sub {
    font-size: 14.5px;
    line-height: 1.5;
    margin-bottom: var(--space-3);
  }
  .industry-hero__crumbs {
    font-size: 10px;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-3);
  }
}

/* ============================================================ */
/* INDUSTRIES GRID — onepager inline section                    */
/* ============================================================ */
.industries-grid { background: var(--tissa-paper); }
.industries-grid__head { max-width: 720px; margin: 0 0 var(--space-6); }
.industries-grid__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: var(--space-2) 0 var(--space-3);
}
.industries-grid__lead {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--tissa-carbon-muted);
  line-height: 1.55;
  max-width: 640px;
}
.industries-grid__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .industries-grid__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

/* ============================================================ */
/* INSIGHTS PREVIEW — onepager inline section                   */
/* ============================================================ */
.insights-preview__head { max-width: 720px; margin: 0 0 var(--space-6); }
.insights-preview__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: var(--space-2) 0 var(--space-3);
}
.insights-preview__lead {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--tissa-carbon-muted);
  line-height: 1.55;
  max-width: 640px;
}
.insights-preview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .insights-preview__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
.insight-card {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--tissa-border);
  background: var(--tissa-white);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--ease, cubic-bezier(0.2, 0, 0, 1)),
              border-color 0.3s ease;
}
.insight-card::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 0;
  background: var(--tissa-carbon);
  z-index: -1;
  transition: width 520ms cubic-bezier(0.2, 0, 0, 1),
              height 520ms cubic-bezier(0.2, 0, 0, 1);
}
.insight-card:hover { color: var(--tissa-offwhite); border-color: var(--tissa-carbon); }
.insight-card:hover::after { width: 100%; height: 100%; }
.insight-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.insight-card:hover .insight-card__meta { color: rgba(247, 244, 238, 0.7); }
.insight-card__eyebrow { color: var(--tissa-saffron); }
.insight-card:hover .insight-card__eyebrow { color: var(--tissa-saffron); }
.insight-card__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  margin-bottom: var(--space-3);
  color: inherit;
}
.insight-card__excerpt {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  line-height: 1.55;
  margin-bottom: var(--space-4);
  color: inherit;
  opacity: 0.85;
}
.insight-card__cta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
}

/* ============================================================ */
/* ABOUT STRIP — Principal inline section                       */
/* ============================================================ */
.about-strip { background: var(--tissa-paper); }
.about-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .about-strip__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-6); }
}
.about-strip__media {
  margin: 0;
  overflow: hidden;
  background: var(--tissa-offwhite);
  aspect-ratio: 4 / 5;
}
.about-strip__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.about-strip__heading {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: var(--space-2) 0 var(--space-4);
}
.about-strip__body-text {
  font-family: var(--ff-body);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--tissa-carbon);
  margin-bottom: var(--space-3);
}
.about-strip__body-text em {
  font-style: italic;
  color: var(--tissa-carbon);
  font-weight: 600;
}
.about-strip__sig {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--tissa-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-strip__sig-name {
  font-family: var(--ff-script);
  font-size: 28px;
  color: var(--tissa-carbon);
  line-height: 1;
}
.about-strip__sig-title {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}

/* ============================================================ */
/* CONTACT MODAL — 3-step (TISSA Start a Project)              */
/* ============================================================ */
.tissa-sp-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  padding: var(--space-3);
  background: rgba(15, 24, 38, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: tsModalFade 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.tissa-sp-modal[aria-hidden="false"] { display: flex; }
@keyframes tsModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tissa-sp-overlay {
  position: absolute; inset: 0;
  cursor: pointer;
}
.tissa-sp-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--tissa-paper);
  border: 1px solid var(--tissa-border);
  box-shadow: 0 30px 90px rgba(15, 24, 38, 0.35);
  padding: var(--space-5) var(--space-5) var(--space-4);
  animation: tsPanelIn 0.5s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes tsPanelIn {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.tissa-sp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--tissa-border);
}
.tissa-sp-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tissa-saffron);
  margin: 0 0 4px;
}
.tissa-sp-step-label {
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--tissa-carbon);
  margin: 0;
}
.tissa-sp-close {
  background: transparent;
  border: 1px solid var(--tissa-border);
  width: 36px; height: 36px;
  font-size: 22px;
  line-height: 1;
  color: var(--tissa-carbon);
  cursor: pointer;
  transition: all 0.25s ease;
}
.tissa-sp-close:hover { background: var(--tissa-carbon); color: var(--tissa-offwhite); border-color: var(--tissa-carbon); }
.tissa-sp-progress {
  display: flex; gap: 6px;
  margin-bottom: var(--space-4);
}
.tissa-sp-seg {
  flex: 1; height: 3px;
  background: var(--tissa-border);
  transition: background 0.3s ease;
}
.tissa-sp-seg.is-active { background: var(--tissa-carbon); }
.tissa-sp-form { display: block; }
.tissa-sp-step { display: none; }
.tissa-sp-step.is-active { display: block; }
.tissa-sp-h2 {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  margin: 0 0 var(--space-2);
  line-height: 1.1;
}
.tissa-sp-sub {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--tissa-carbon-muted);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
}
.tissa-sp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 600px) {
  .tissa-sp-grid { grid-template-columns: repeat(2, 1fr); }
}
.tissa-sp-field { display: flex; flex-direction: column; gap: 6px; }
.tissa-sp-field--full { grid-column: 1 / -1; }
.tissa-sp-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.tissa-sp-label em { color: var(--tissa-saffron); font-style: normal; margin-left: 2px; }
.tissa-sp-field input,
.tissa-sp-field select,
.tissa-sp-field textarea {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  padding: 12px 14px;
  border: 1px solid var(--tissa-border);
  background: var(--tissa-white);
  color: var(--tissa-carbon);
  border-radius: 0;
  transition: border-color 0.25s ease;
  appearance: none;
}
.tissa-sp-field input:focus,
.tissa-sp-field select:focus,
.tissa-sp-field textarea:focus {
  outline: none;
  border-color: var(--tissa-carbon);
}
.tissa-sp-field textarea { resize: vertical; min-height: 70px; }
.tissa-sp-summary {
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.tissa-sp-summary-title {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  margin: 0 0 var(--space-2);
}
.tissa-sp-summary dl { margin: 0; }
.tissa-sp-summary dl > div {
  display: flex; gap: var(--space-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--tissa-border);
  font-size: 14px;
}
.tissa-sp-summary dl > div:last-child { border-bottom: 0; }
.tissa-sp-summary dt {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  min-width: 110px;
}
.tissa-sp-summary dd { margin: 0; color: var(--tissa-carbon); font-family: var(--ff-body); }
.tissa-sp-cal {
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  padding: var(--space-3);
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
}
.tissa-sp-cal-fallback {
  margin-top: var(--space-2);
  font-size: 13px;
  text-align: center;
}
.tissa-sp-footer {
  display: flex;
  align-items: center;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--tissa-border);
  gap: var(--space-2);
}
.tissa-sp-spacer { flex: 1; }
.tissa-sp-btn {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--tissa-carbon);
  background: var(--tissa-paper);
  color: var(--tissa-carbon);
  cursor: pointer;
  transition: all 0.25s ease;
}
.tissa-sp-btn--ghost { border-color: var(--tissa-border); }
.tissa-sp-btn--primary { background: var(--tissa-carbon); color: var(--tissa-offwhite); }
.tissa-sp-btn--primary:hover:not([disabled]) { background: var(--tissa-saffron); border-color: var(--tissa-saffron); color: var(--tissa-carbon); }
.tissa-sp-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.tissa-sp-success {
  text-align: center;
  padding: var(--space-5) var(--space-3);
}
.tissa-sp-success h3 {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 36px);
  margin: var(--space-3) 0 var(--space-2);
}
.tissa-sp-success p {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--tissa-carbon-muted);
  max-width: 480px; margin: 0 auto;
}

/* ============================================================ */
/* TRUSTED BY · PNG logo strip — monochrome treatment           */
/* ============================================================ */
.manifesto__strip-list--png {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  align-items: center;
  justify-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 720px) {
  .manifesto__strip-list--png { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
@media (min-width: 1024px) {
  .manifesto__strip-list--png { grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
}
.manifesto__logo--png {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  width: 100%;
  padding: 8px 14px;
}
.manifesto__logo--png img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 0.95;
  transform: scale(1.08);
  transition: opacity 0.35s var(--ease, cubic-bezier(0.2, 0, 0, 1)),
              transform 0.35s var(--ease, cubic-bezier(0.2, 0, 0, 1));
}
.manifesto__logo--png:hover img {
  opacity: 1;
  transform: scale(1.12) translateY(-2px);
}
.section--ink .manifesto__logo--png img,
.has-video-hero .hero ~ .manifesto .manifesto__logo--png img {
  filter: brightness(1.05);
  opacity: 0.95;
}

/* ============================================================ */
/* HERO · animated smoke canvas + seal (replaces Pexels video)  */
/* ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--tissa-carbon, #252628);
}
.hero__video { display: none; } /* old video removed */
.hero__bg {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 30% 20%, rgba(251, 249, 245, 0.06) 0%, transparent 35%),
    radial-gradient(circle at 70% 80%, rgba(251, 249, 245, 0.04) 0%, transparent 40%);
  filter: blur(20px);
  will-change: transform;
  pointer-events: none;
}
.hero__smoke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(15, 24, 38, 0.55) 100%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: var(--space-7) var(--container-pad-d) var(--space-6);
}
.hero__seal {
  width: clamp(120px, 18vw, 220px);
  height: auto;
  margin: 0 auto var(--space-4);
  display: block;
  opacity: 0;
  transform: translateY(-20px) scale(0.94);
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.65));
  will-change: transform, opacity;
}
.hero__pretitle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-3);
  opacity: 0;
  transform: translateY(12px);
}
.hero__pretitle-text {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.7);
  margin: 0;
}
.hero__pretitle-line {
  width: 36px;
  height: 1px;
  background: rgba(251, 249, 245, 0.55);
}
.hero__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(38px, 6.5vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--tissa-paper);
  margin: 0 auto var(--space-3);
  max-width: 18ch;
}
.hero__title-line {
  display: block;
  overflow: hidden;
}
.hero__title-line > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.hero__sub {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px);
  color: rgba(251, 249, 245, 0.78);
  margin: var(--space-3) auto 0;
  max-width: 36ch;
  opacity: 0;
  transform: translateY(12px);
}
.hero__rule {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(251, 249, 245, 0.7));
  margin: var(--space-5) auto 0;
  position: relative;
  opacity: 0;
}
.hero__rule::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(251, 249, 245, 1);
  box-shadow: 0 0 12px rgba(251, 249, 245, 0.6);
  animation: heroRuleDrop 2.4s ease-in-out infinite;
}
@keyframes heroRuleDrop {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  50% { transform: translate(-50%, 8px); opacity: 0.3; }
}
/* Headers on dark hero — make text + nav legible */
.has-video-hero .site-header { background: transparent; }
@media (max-width: 720px) {
  .hero__content { padding: var(--space-6) var(--container-pad-m); }
}

/* ============================================================ */
/* NAV LOGIN — secondary auth link right of Start-a-Project CTA */
/* ============================================================ */
.nav__login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--space-2);
  padding: 10px 18px;
  border: 1px solid var(--tissa-carbon);
  background: var(--tissa-carbon);
  color: var(--tissa-paper) !important;
  font-family: var(--ff-ui, var(--ff-body));
  font-size: 14px;
  letter-spacing: 0.005em;
  text-transform: none;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s var(--ease, cubic-bezier(0.2, 0, 0, 1));
}
.nav__login:hover {
  background: transparent;
  color: var(--tissa-carbon) !important;
  border-color: var(--tissa-carbon);
}
.has-video-hero .site-header:not(.is-scrolled) .nav__login {
  background: rgba(251, 249, 245, 0.08);
  border-color: rgba(251, 249, 245, 0.5);
  color: var(--tissa-paper) !important;
}
.has-video-hero .site-header:not(.is-scrolled) .nav__login:hover {
  background: var(--tissa-paper);
  color: var(--tissa-carbon) !important;
  border-color: var(--tissa-paper);
}
@media (max-width: 900px) {
  .nav__login { display: none; }
}

/* ============================================================ */
/* NAV · active-state indicator (current page link)             */
/* ============================================================ */
.nav__link--active {
  position: relative;
  color: var(--tissa-carbon);
}
.nav__link--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.has-video-hero .site-header:not(.is-scrolled) .nav__link--active {
  color: var(--tissa-paper);
}

/* ============================================================ */
/* HOME · Client Perspective (replaces Facts & Numbers)         */
/* ============================================================ */
.client-perspective {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.client-perspective__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-7);
}
.client-perspective__head .section-pretitle {
  justify-content: center;
}
.client-perspective__heading {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--tissa-paper);
  margin: var(--space-3) 0 var(--space-3);
}
.client-perspective__heading em {
  font-style: italic;
}
.client-perspective__sub {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(251, 249, 245, 0.7);
  margin: 0 auto;
  max-width: 520px;
}
.client-perspective__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .client-perspective__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}
@media (min-width: 1080px) {
  .client-perspective__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* center the trailing 2 quotes on a 3-col grid */
  .client-perspective__grid > .cp-quote:nth-child(4) {
    grid-column: 1 / span 1;
    grid-column-start: 1;
    margin-left: 0;
  }
}
.cp-quote {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid rgba(251, 249, 245, 0.12);
  background: rgba(251, 249, 245, 0.02);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: background 0.35s var(--ease, cubic-bezier(0.2, 0, 0, 1)),
              border-color 0.35s var(--ease, cubic-bezier(0.2, 0, 0, 1));
}
.cp-quote:hover {
  background: rgba(251, 249, 245, 0.05);
  border-color: rgba(251, 249, 245, 0.24);
}
.cp-quote blockquote {
  margin: 0;
  padding: 0;
}
.cp-quote blockquote p {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--tissa-paper);
  margin: 0;
  position: relative;
}
.cp-quote blockquote p::before {
  content: "“";
  display: block;
  font-size: 40px;
  line-height: 1;
  color: rgba(251, 249, 245, 0.35);
  margin-bottom: 6px;
}
.cp-quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(251, 249, 245, 0.12);
}
.cp-quote__name {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tissa-paper);
}
.cp-quote__role {
  font-family: var(--ff-body);
  font-size: 13px;
  color: rgba(251, 249, 245, 0.55);
}
.section-pretitle--on-ink .section-pretitle__text { color: rgba(251, 249, 245, 0.7); }
.section-pretitle--on-ink .section-pretitle__line { background: rgba(251, 249, 245, 0.25); }

/* Force testimonials slideshow always visible — slideshow JS owns motion, not reveal observer */
.testimonials__slideshow[data-reveal-item],
.testimonials__slideshow[data-reveal-item] .testimonial { opacity: 1 !important; transform: none !important; }

/* ============================================================ */
/* ADD-ON DETAIL PAGES (services/add-ons/*.html)                */
/* ============================================================ */
.addon-detail .container--narrow,
.addon-detail__process .container--narrow,
.addon-detail__cta .container--narrow {
  max-width: 760px;
}
.addon-detail__h {
  font-family: var(--ff-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
  margin: var(--space-3) 0 var(--space-3);
}
.addon-detail__h--ink { color: var(--tissa-paper); }
.addon-detail__lead {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--tissa-carbon-muted);
  max-width: 60ch;
  margin: 0 0 var(--space-5);
}
.addon-detail__process .addon-detail__lead { color: rgba(251, 249, 245, 0.7); }
.addon-detail__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.addon-detail__list li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) 28px;
  border-bottom: 1px solid var(--tissa-border);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tissa-carbon);
}
.addon-detail__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: var(--space-3);
  color: var(--tissa-carbon-muted);
  font-family: var(--ff-mono);
}
.addon-detail__list li:first-child { border-top: 1px solid var(--tissa-border); }

.addon-detail__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.addon-detail__steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(251, 249, 245, 0.12);
  color: var(--tissa-paper);
  align-items: baseline;
}
.addon-detail__steps li:first-child {
  border-top: 1px solid rgba(251, 249, 245, 0.12);
}
.addon-detail__step-when {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.7);
}
.addon-detail__step-what {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tissa-paper);
}
.addon-detail__cta {
  text-align: center;
}
.addon-detail__cta .addon-detail__lead {
  margin-left: auto;
  margin-right: auto;
}
.addon-detail__cta-row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.case-hero__eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.7);
  display: inline-block;
  margin-bottom: var(--space-3);
}

/* ============================================================ */
/* RESOURCES · new section heads (Library + Working Templates)  */
/* ============================================================ */
.resources-section__h {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--tissa-carbon);
  margin: var(--space-3) 0 var(--space-2);
}
.resources-section__lead {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tissa-carbon-muted);
  max-width: 62ch;
  margin: 0 0 var(--space-5);
}
.resources-templates { padding-top: var(--space-7); }


/* ============================================================ */
/* CTA-BAR · unified (schedule + inline newsletter on home)     */
/* ============================================================ */
.cta-bar--unified .cta-bar__primary {
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
}
.cta-bar__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 420px;
  margin: var(--space-4) auto;
  opacity: 0.55;
}
.cta-bar__divider-line {
  flex: 1;
  height: 1px;
  background: rgba(251, 249, 245, 0.25);
}
.cta-bar__divider-text {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.7);
  white-space: nowrap;
}
.cta-bar__newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}
.cta-bar__newsletter-label {
  font-family: var(--ff-body);
  font-size: 13px;
  font-style: italic;
  color: rgba(251, 249, 245, 0.65);
  margin-bottom: var(--space-3);
  display: block;
}
.cta-bar__newsletter-row {
  display: flex;
  width: 100%;
  border: 1px solid rgba(251, 249, 245, 0.25);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.25s var(--ease, cubic-bezier(0.2, 0, 0, 1));
}
.cta-bar__newsletter-row:focus-within {
  border-color: var(--tissa-paper);
}
.cta-bar__newsletter-input {
  flex: 1;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--tissa-paper);
  font-family: var(--ff-body);
  font-size: 15px;
  min-width: 0;
}
.cta-bar__newsletter-input::placeholder {
  color: rgba(251, 249, 245, 0.45);
}
.cta-bar__newsletter-btn {
  padding: 14px 22px;
  background: var(--tissa-paper);
  color: var(--tissa-carbon);
  border: 0;
  font-family: var(--ff-ui, var(--ff-body));
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 0.25s var(--ease, cubic-bezier(0.2, 0, 0, 1)), color 0.25s var(--ease, cubic-bezier(0.2, 0, 0, 1));
  white-space: nowrap;
}
.cta-bar__newsletter-btn:hover {
  background: var(--tissa-offwhite, #f4ede1);
  color: var(--tissa-carbon);
}
@media (max-width: 520px) {
  .cta-bar__newsletter-row { flex-direction: column; border: 0; }
  .cta-bar__newsletter-input {
    border: 1px solid rgba(251, 249, 245, 0.25);
    border-radius: 2px;
    margin-bottom: var(--space-2);
  }
  .cta-bar__newsletter-btn { border-radius: 2px; }
}

/* ============================================================ */
/* CTA-BAR · horizontal 2-col layout (copy left, actions right) */
/* ============================================================ */
.cta-bar--horizontal {
  text-align: left;
}
.cta-bar--horizontal .cta-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 880px) {
  .cta-bar--horizontal .cta-bar__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-7);
  }
}
.cta-bar--horizontal .cta-bar__copy h2 {
  margin: 0;
  max-width: 22ch;
}
.cta-bar--horizontal .cta-bar__copy p {
  margin: var(--space-2) 0 0;
  font-family: var(--ff-display);
  font-style: italic;
  color: rgba(251, 249, 245, 0.75);
}
.cta-bar--horizontal .cta-bar__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
  max-width: 460px;
  width: 100%;
}
@media (min-width: 880px) {
  .cta-bar--horizontal .cta-bar__actions { margin-left: 0; }
}
.cta-bar--horizontal .cta-bar__primary {
  margin: 0;
  align-self: stretch;
  text-align: center;
}
.cta-bar--horizontal .cta-bar__divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  max-width: 100%;
  opacity: 0.55;
}
.cta-bar--horizontal .cta-bar__divider-text {
  font-size: 10px;
  letter-spacing: 0.3em;
}
.cta-bar--horizontal .cta-bar__newsletter {
  margin: 0;
  max-width: 100%;
  align-items: stretch;
}
.cta-bar--horizontal .cta-bar__newsletter-label {
  margin-bottom: var(--space-2);
  text-align: left;
}

/* ============================================================ */
/* SITE-WIDE B/N RHYTHM · alternate light surfaces on plain     */
/* sections so monotone runs always read as alternating bands.  */
/* Sections explicitly classed --ink or --bone keep their tone. */
/* ============================================================ */
main > section:not(.section--ink):not(.section--bone):not(.section--paper):not(.hero):not(.case-hero):not(.industry-hero):not(.service-hero):not(.service-section--ink):not(.service-section--bone):not(.service-section--paper):not(.case-section--ink):not(.case-section--bone):not(.cta-bar):nth-of-type(even) {
  background: var(--tissa-white);
}
main > section:not(.section--ink):not(.section--bone):not(.section--paper):not(.hero):not(.case-hero):not(.industry-hero):not(.service-hero):not(.service-section--ink):not(.service-section--bone):not(.service-section--paper):not(.case-section--ink):not(.case-section--bone):not(.cta-bar):nth-of-type(odd) {
  background: var(--tissa-paper);
}

/* ============================================================ */
/* SERVICE SECTION VARIANTS · added 2026-05-16 (design fixes)   */
/* ============================================================ */

/* Paper (cream) explicit modifier — Strategic Add-ons catalogue */
.service-section--paper { background: var(--tissa-paper); }

/* 3-col variant of addons-grid for 6-card layouts (Owners Rep) */
.addons-grid--threes { grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 720px) {
  .addons-grid--threes { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .addons-grid--threes { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}

/* Service prose readable on --ink dark surfaces (BMB How you receive it) */
.service-section--ink .service-prose__heading,
.service-section--ink .service-prose p,
.service-section--ink .service-prose p em,
.service-section--ink .service-prose p strong,
.service-section--ink .service-prose__list li,
.service-section--ink .service-prose__list li strong {
  color: var(--tissa-paper);
}
.service-section--ink .service-prose__list li {
  border-left-color: rgba(251, 249, 245, 0.2);
}

/* Deliverable-flip readable on --ink (Express Diagnostic What you get) */
.service-section--ink .deliverable-flip {
  border-color: rgba(251, 249, 245, 0.16);
}
.service-section--ink .deliverable-flip__face--front,
.service-section--ink .deliverable-flip__face--back {
  background: var(--tissa-paper);
  color: var(--tissa-carbon);
}

/* ============================================================ */
/* HERO · landing video background (replaces smoke canvas)      */
/* ============================================================ */
.hero--landing-video {
  background: var(--tissa-carbon);
}
.hero__video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  filter: brightness(0.78) contrast(1.05);
}
.hero--landing-video .hero__overlay {
  background:
    linear-gradient(180deg, rgba(20, 20, 24, 0.35) 0%, transparent 30%, transparent 60%, rgba(15, 18, 24, 0.65) 100%);
}
.hero--landing-video .hero__content {
  position: relative;
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  .hero__video-bg { display: none; }
}