/* =============================================
   ORRA — orra.css
   Breakpoints: sm >=576 · md >=768 · lg >=992 · xl >=1200 · xxl >=1400
   ============================================= */

/* =============================================
   TOKENS
   ============================================= */

:root {
  /* Palette */
  --navy:        #042249;
  --gold:        #BDA44E;
  --light:       #EBEBEB;
  --white:       #FFFFFF;
  
  --gold-light:  #D4BC72;
  --gold-dark:   #9C8535;

  /* Type family */
  --font-orra:   'Glacial Indifference', Arial, sans-serif;

  /* Spacing scale */
  --size-0:     12px;
  --size-1:     16px;
  --size-x:     20px;
  --size-2:     24px;
  --size-3:     32px;
  --size-4:     40px;
  --size-5:     48px;
  --size-6:     56px;
  --size-7:     64px;
  --size-8:     72px;
  --size-9:     80px;
  --size-10:    88px;
  --size-11:    96px;
  --size-12:   120px;
  --size-13:   144px;

  /* Glass surface tokens */
  --glass-bg:     rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur:   blur(8px);
  --glass-radius: 16px;

  /* Card surface tokens — layered prussian shadow + thumbnail backdrop */
  --shadow-card:
    0 1px 2px rgba(4, 34, 73, 0.10),
    0 8px 12px rgba(4, 34, 73, 0.15),
    0 16px 28px rgba(4, 34, 73, 0.20);
  --thumb-bg:
    radial-gradient(circle at 75% 85%, rgba(189, 164, 78, 0.18), transparent 55%),
    radial-gradient(circle at 20% 20%, rgba(212, 188, 114, 0.08), transparent 50%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy) 100%);

  /* Gold gradient — used as button bg for shimmer animation */
  --gold-gradient: linear-gradient(
    to bottom,
    #af722a 0%,
    #af722a 10%,
    #c19248 20%,
    #e3ca81 30%,
    #fdf7ad 40%,
    #e2c87f 50%,
    #c59a4f 60%,
    #b27930 70%,
    #c48832 80%,
    #c49140 90%,
    #82501a 100%
  );
}

/* =============================================
   BASE
   ============================================= */

html {
  overflow-x: clip;
}

body {
  font-family: var(--font-orra);
  font-size: var(--size-x);
  font-weight: 400;
  line-height: 1.3;
  color: var(--light);
  background: var(--navy);
  margin: 0;
}

/* Interior pages — bg image shows behind transparent page-header */
body.page--interior {
  background-color: var(--navy);
  background-image: url('../brand_assets/background/bg-orra.webp');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

section {
  padding: var(--size-12) 0;
  text-align: center;

  & ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    text-align: left;
  }

  & ul > li > .li-bullet {
    width: 0.71em;
    height: 0.47em;
    margin-right: 0.5em;
    margin-top: -0.1em;
    vertical-align: middle;
  }
}

@media (min-width: 992px) {
  section {
    text-align: left;
  }
}

/* =============================================
   TYPOGRAPHY
   ============================================= */

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.17;
  text-transform: uppercase;
}

h1 {
  font-size: var(--size-4);   /* 40px */
  letter-spacing: -1px;
  margin-bottom: var(--size-1);
}

h2 { font-size: var(--size-3); }   /* 32px */
h3 { font-size: var(--size-2); }   /* 24px */
h4 { font-size: var(--size-1); }   /* 16px */

@media (min-width: 768px) {
  h1 { font-size: var(--size-5); }   /* 48px */
  h2 { font-size: var(--size-4); }   /* 40px */
  h3 { font-size: var(--size-3); }   /* 32px */
  h4 { font-size: var(--size-2); }   /* 24px */
}

@media (min-width: 1600px) {
  h1 { font-size: var(--size-6); }   /* 56px */
  h2 { font-size: var(--size-5); }   /* 48px */
  h3 { font-size: var(--size-4); }   /* 40px */
  h4 { font-size: var(--size-3); }   /* 32px */
}

/* Min-height utilities */
.min-vh-100 { min-height: 100vh !important; }

/* Font-size utilities — fs-0 = smallest */
.fs-0 { font-size: var(--size-0) !important; }
.fs-1 { font-size: var(--size-1) !important; }
.fs-x { font-size: var(--size-x) !important; }
.fs-2 { font-size: var(--size-2) !important; }
.fs-3 { font-size: var(--size-3) !important; }
.fs-4 { font-size: var(--size-4) !important; }
.fs-5 { font-size: var(--size-5) !important; }
.fs-6 { font-size: var(--size-6) !important; }
.fs-7 { font-size: var(--size-7) !important; }
.fs-8 { font-size: var(--size-8) !important; }

.lead {
  letter-spacing: 0;
  color: var(--gold);
  margin: 0;
}

.text-gold {
  color: var(--gold) !important;
}

.text-light {
  color: var(--light) !important;
}

.gold-rule {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.5;
}

/* Inline content links — bare anchors in body copy
   (nav links, buttons, logo and case titles carry classes, so they're excluded) */
a:not([class]) {
  color: var(--gold);
  text-decoration-color: var(--gold);
  text-underline-offset: 0.15em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:not([class]):hover,
a:not([class]):focus {
  color: var(--gold-light);
  text-decoration-color: currentColor;
}

/* =============================================
   DEVICE IMAGES — layered, prussian-tinted drop-shadow
   ============================================= */

.drop-shadow {
  filter:
    drop-shadow(0 1px 2px rgba(4, 34, 73, 0.1))
    drop-shadow(0 8px 12px rgba(4, 34, 73, 0.15))
    drop-shadow(0 16px 20px rgba(4, 34, 73, 0.2));
}

.hero-image .drop-shadow {
  filter: none;
}

/* Voice concierge callout — full-width band with gold-fade rules */
.vc-callout {
  position: relative;
  margin-bottom: var(--size-4);
}

@media (min-width: 768px) {
  .vc-callout {
    margin-bottom: var(--size-6);
  }
}

@media (min-width: 1200px) {
  .vc-callout {
    margin-bottom: var(--size-8);
  }
}

.vc-callout__box {
  padding: var(--size-2);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
}

.vc-callout__item {
  font-size: var(--size-1);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0;
}

@media (min-width: 1600px) {
  .vc-callout__item {
    font-size: var(--size-2);
  }
}

/* =============================================
   CONTAINER / GRID
   ============================================= */

@media (min-width: 992px) {
  .container,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: none;
    padding-left: 32px;
    padding-right: 32px;
  }

  .row {
    --bs-gutter-x: 32px;
  }

  .row.g-0,
  .row.gx-0 {
    --bs-gutter-x: 0;
  }
}

/* Below lg, cols stack (col-lg-*) — Bootstrap's .g-5 (-24px row margin) breaks
   past container's 12px padding and triggers horizontal scroll. No horizontal
   gap is needed when cols are stacked, so neutralize gx here. */
@media (max-width: 991.98px) {
  .row.g-5,
  .row.gx-5 {
    --bs-gutter-x: 0;
  }
}

@media (min-width: 1440px) {
  .container,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: 7vw;
    padding-right: 7vw;
  }
}

/* =============================================
   SECTIONS
   ============================================= */

.section--navy-img {
  background-color: var(--navy);
  background-image: url('../brand_assets/background/bg-orra.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--light);

  @media (hover: hover) {
    & {
      background-attachment: fixed;
    }
  }
}

.section--navy {
  background: var(--navy);
  color: var(--light);
}
.section--navy-gradient {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy) 100%);
  color: var(--light);
}

.section--light-gradient {
  background: linear-gradient(180deg, var(--light) 0%, var(--gold-light) 100%);
  color: var(--navy);
}

/* Heading colour follows section tone */
.section--light-gradient :is(h1, h2, h3, h4) {
  color: var(--navy);
}

.section--navy :is(h1, h2, h3, h4),
.section--navy-img :is(h1, h2, h3, h4),
.section--touchpoints :is(h1, h2, h3, h4),
.hero-section :is(h1, h2, h3, h4) {
  color: var(--light);
}

/* =============================================
   NAVIGATION
   ============================================= */

nav.navbar {
  padding: 1rem 0;
  transition: transform 0.3s ease;
}

.navbar--hidden {
  transform: translateY(-100%);
}

.navbar-brand {
  padding: 0;
}

.logo {
  display: block;
  width: 72px;
  height: auto;
}

@media (min-width: 768px) {
  .logo {
    width: 88px;
  }
}

.navbar-expand-xl .navbar-nav {
  gap: var(--size-1);
}

/* Hamburger icon */
.navbar-toggler {
  margin-left: var(--size-1);
  padding: 0;
  border: none;
  width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1060;

  &:focus {
    box-shadow: none;
  }
}

.navbar-toggler-icon {
  width: 100%;
  height: 2px;
  background: var(--gold);
  background-image: none;
  position: relative;
  transition: background 0.3s ease;

  &::before,
  &::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gold);
    transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
  }

  &::before { top: -9px; }
  &::after  { bottom: -9px; }
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
  background: transparent;

  &::before {
    top: 0;
    transform: rotate(45deg);
  }

  &::after {
    bottom: 0;
    transform: rotate(-45deg);
  }
}

/* Collapse overlay — mobile & tablet */
.navbar-collapse {
  position: fixed !important;
  inset: 0;
  padding-inline: var(--size-2);
  background: var(--navy);
  z-index: 1050;
  display: flex !important;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  height: auto !important;
  transition: none;

  &.collapsing {
    height: auto !important;
    display: flex !important;
    overflow: visible !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  &.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  & .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  & .nav-link {
    font-size: clamp(var(--size-2), 8vw, var(--size-5));
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1;
    padding: 0.25rem 0;
  }
}

/* Desktop — reset overlay to inline */
@media (min-width: 1200px) {
  .navbar-collapse {
    position: static !important;
    inset: auto;
    padding-inline: 0;
    background: transparent;
    z-index: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    & .navbar-nav {
      flex-direction: row;
      align-items: center;
    }

    & .nav-link {
      position: relative;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 0;
      line-height: 1;
      padding: 0.5rem 1rem;
      color: var(--gold);

      &::after {
        content: '';
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0.25rem;
        height: 1px;
        background: var(--gold);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.35s ease;
      }

      &:hover::after,
      &:focus-visible::after {
        transform: scaleX(1);
      }
    }
  }
}

.nav-scroll {
  position: relative;
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  width: 100%;
  transition: background 0.3s ease, border-radius 0.3s ease, padding 0.3s ease;

  &:has(.navbar-collapse.show),
  &:has(.navbar-collapse.collapsing) {
    background: var(--navy) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

.navbar--scrolled .nav-scroll {
  padding: var(--size-1);
  background: rgba(4, 34, 73, 0.82);
  border-radius: var(--size-0);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to right, var(--gold), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }
}

/* =============================================
   BUTTONS
   ============================================= */

.btn {
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 10px 24px 11px;
  border-radius: 9999px;
  transition: transform 0.3s ease;

  &:hover,
  &:focus {
    animation: goldShimmer 2s ease forwards;
    transform: scale(1.06);
    color: var(--navy);
  }
}

.btn-primary {
  color: var(--navy);
  background: var(--gold-gradient);
  background-size: 100% 200%;
  background-position: 0 0;
  border: none;
  font-size: var(--size-1);
  padding-left: var(--size-1);
  padding-right: var(--size-1);
}

.btn-lg {
  font-size: var(--size-x);
  padding: 13px 24px 14px;
}

@keyframes goldShimmer {
  0%   { background-position: 0 0; }
  50%  { background-position: 0 100%; }
  100% { background-position: 0 0; }
}

/* =============================================
   HERO
   ============================================= */

.hero-section {
  position: relative;
  padding: 120px 0 0;
  min-height: 100svh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy) 100%);
  isolation: isolate;
}

/* Arches layer — scrolls with the section */
.hero-arches {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-arches__svg {
  position: absolute;
  bottom: 0;
  right: -72vw;
  width: 171.875vw;
  height: 150vw;
  display: block;
}

@media (min-width: 992px) {
  .hero-arches__svg {
    right: -28.6458vw; /* 25% of width bleeds off the right edge */
    width: 114.5833vw;
    height: 70.8333vw;
  }
}

.hero-arches.is-out { opacity: 0; }

/* =============================================
   ABOUT — arches mask, centered horizontally
   Shared backdrop for Touchpoints + Shift content
   ============================================= */

#about {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.about-arches {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.about-arches__svg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 171.875vw;
  height: 106.25vw;
  display: block;
}

@media (min-width: 992px) {
  .about-arches__svg {
    width: 114.5833vw;
    height: 70.8333vw;
  }
}

.about-shift {
  margin-top: var(--size-13);
}

/* =============================================
   ANALYTICS — arches mask, anchored bottom-left
   Mirrors the hero treatment (which anchors right)
   ============================================= */

/* =============================================
   VOICE-CONCIERGE — arches mask, anchored bottom-right
   Mirrors the hero treatment, right-aligned across all breakpoints
   ============================================= */

#voice-concierge {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.oi-arches {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.oi-arches__svg {
  position: absolute;
  bottom: 0;
  right: -28.6458vw; /* 25% of width bleeds off the right edge */
  width: 114.5833vw;
  height: 70.8333vw;
  display: block;
}

#platform-evolution {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.analytics-arches {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.analytics-arches__svg {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 229.1666vw;
  height: 141.6666vw;
  display: block;
  transform: translateX(-50%) scaleX(-1);
  transform-origin: center;
}

@media (min-width: 992px) {
  .analytics-arches__svg {
    left: -28.6458vw; /* 25% of width bleeds off the left edge */
    width: 114.5833vw;
    height: 70.8333vw;
    transform: scaleX(-1);
  }
}

/* =============================================
   SEAMLESS INTEGRATION — solid bg + full-width image
   ============================================= */

#seamless-integration {
  background-color: #022450;
  color: var(--light);
  padding-bottom: 0;
}

/* =============================================
   ADAPTIVE — full-cover photo background, warm-ivory description card
   ============================================= */

#adaptive {
  background-image: url('../files/images/adaptive-interface.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  @media (hover: hover) {
    & {
      background-attachment: fixed;
    }
  }
}

@media (min-width: 1680px) {
  .p-xxxl-3 {
    padding: var(--size-3);
  }
}

/* =============================================
   AI SOLUTIONS — full-cover image background at 0.5 opacity
   ============================================= */

#ai {
  position: relative;
  isolation: isolate;
}

/* Below lg: strip breaks out of its col to span the full viewport like the
   touchpoints carousel. (Below lg, container is fluid and col padding is 12px,
   so a -12px margin-left + 100vw width pushes the strip from col content edge
   out to viewport-left and across to viewport-right.) */
@media (max-width: 991.98px) {
  #ai .tp-strip {
    width: 100vw;
    margin-left: -12px;
  }
}

/* lg+: strip stays inside col-lg-8, starts at col edge (ps-lg-0), and bleeds
   past the container's right padding so cards clip off the viewport edge. */
@media (min-width: 992px) {
  #ai .tp-track {
    padding-left: 0;
  }
  #ai .tp-strip {
    margin-right: -32px;
  }
}

@media (min-width: 1440px) {
  #ai .tp-strip {
    margin-right: -7vw;
  }
}

#ai .tp-card {
  background: var(--light);
  color: var(--navy);

  & .tp-card__label {
    color: var(--navy);
  }

  & .tp-card__overlay {
    background: linear-gradient(to top, rgba(235, 235, 235, 0.95) 0%, rgba(235, 235, 235, 0) 100%);
  }
}

.hero-container {
  position: relative;
  z-index: 2;
}

.hero-row {
  min-height: calc(100svh - 400px);
}
@media (min-width: 768px) {
  .hero-row {
    min-height: calc(100svh - 560px);
  }
}
@media (min-width: 992px) {
  .hero-row {
    min-height: calc(100svh - 240px);
  }
}

.hero-card {
  opacity: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  & h1 {
    line-height: 1.1;
    margin: 0 0 var(--size-2);
  }

  & .lead {
    font-weight: 300;
    margin: 0 0 var(--size-3);
  }
}

/* Laptop wrapper — absolute relative to the section, anchored bottom-right */
.hero-image-wrap {
  position: relative;
  margin-top: var(--size-4);
  z-index: 1;
}

.hero-image {
  opacity: 0;
  position: relative;
  overflow: visible;
  aspect-ratio: auto;

  & img {
    display: block;
    width: 100%;
    height: auto;
    will-change: auto;
  }
}

@media (min-width: 992px) {
  .hero-section {
    padding: 144px 0 0;
  }

  .hero-card {
    text-align: left;
    align-items: flex-start;
  }

  /* Anchored to section bottom-right; left edge at column 6 of the 12-col grid */
  .hero-image-wrap {
    position: absolute;
    bottom: 0;
    right: 0;
    left: calc(32px + (100vw - 64px) * 5 / 12);
    margin-top: 0;
  }

  .hero-image img {
    object-fit: contain;
    object-position: right bottom;
    margin-left: auto;
  }
}

@media (min-width: 1440px) {
  .hero-image-wrap {
    left: calc(7vw + (100vw - 14vw) * 5 / 12);
  }
}

/* Hero entrance animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(50%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromBottom {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-card.is-visible {
  animation: fadeInUp 1s ease 0.2s forwards;
}

.hero-image.is-visible {
  animation: slideInFromBottom 1.3s ease 0.2s forwards;
}

/* =============================================
   TOUCHPOINTS — horizontal card scroll
   ============================================= */

.section--touchpoints {
  background: var(--navy);
  padding: 96px 0;
  overflow: hidden;
}

@media (min-width: 992px) {
  .section--touchpoints {
    padding: 160px 0;
  }
}

/* 12-col grid for the centered header block */
.tp-grid {
  max-width: 1636px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 0;
}

@media (min-width: 768px) {
  .tp-grid {
    padding: 0 32px;
  }
}

.tp-h2 {
  grid-column: 1 / -1;
  text-align: center;
  letter-spacing: 0;
  margin: 0;
}

@media (min-width: 992px) {
  .tp-h2 { grid-column: 4 / span 6; }
}

/* Card strip — full viewport width, breaks out of grid container */
.tp-strip {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}

.tp-strip::-webkit-scrollbar {
  display: none;
}

.tp-strip.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.tp-strip.is-dragging .tp-card,
.tp-strip.is-dragging .tp-card *,
.tp-strip.is-dragging .feature-card,
.tp-strip.is-dragging .feature-card * {
  pointer-events: none;
}

/* Feature cards inside the touchpoints strip — same scroll behavior on mobile,
   wrap to 4 columns at lg breakpoint and up. */
.tp-track > .feature-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

.tp-track {
  display: flex;
  gap: var(--size-1);
  padding-left: 16px;
}

@media (min-width: 1200px) {
  .tp-track {
    gap: var(--size-3);
  }
}

/* Real DOM spacer — browsers always include it in scrollWidth */
.tp-spacer {
  flex: 0 0 1px;
  align-self: stretch;
  pointer-events: none;
}

@media (min-width: 768px) {
  .tp-strip {
    scroll-padding-left: 32px;
  }
  .tp-track {
    padding-left: 32px;
  }
}

@media (min-width: 992px) {
  .tp-strip {
    scroll-padding-left: 32px;
  }
  .tp-track {
    padding-left: 32px;
  }
}

@media (min-width: 1440px) {
  .tp-strip {
    scroll-padding-left: 7vw;
  }
  .tp-track {
    padding-left: 7vw;
  }
}

.tp-card {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  width: clamp(252px, calc(25.2vw + 90px), 347px);
  aspect-ratio: 5 / 8;
  background: var(--navy);
}

.tp-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

@media (hover: hover) {
  .tp-card:hover > img {
    transform: scale(1.1);
  }
}

.tp-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(4, 34, 73, 0.95) 0%, rgba(4, 34, 73, 0) 100%);
  pointer-events: none;
}

.tp-card__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 48px 24px 24px;
  z-index: 1;
  text-align: left;
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .tp-card:hover .tp-card__caption {
    transform: translateY(-8px);
  }
}

.tp-card__label {
  font-size: var(--size-x);
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0 0 var(--size-x);
}

.tp-card__caption p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
}

@media (min-width: 576px) {
  .tp-card__caption p {
    font-size: var(--size-x);
  }
}

/* Carousel arrows — sit under the first card, signal scrollability */
.tp-arrows {
  display: flex;
  gap: var(--size-1);
  margin-top: var(--size-3);
  padding-left: 16px;
}

@media (min-width: 768px) {
  .tp-arrows {
    padding-left: 32px;
  }
}

@media (min-width: 1440px) {
  .tp-arrows {
    padding-left: 7vw;
  }
}

.tp-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-7);
  height: var(--size-7);
  padding: 0;
  background: var(--light);
  border: 1px solid rgba(4, 34, 73, 0.08);
  border-radius: 50%;
  color: var(--navy);
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;

  & svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  &:hover {
    background: var(--gold-light);
    box-shadow: 0 6px 18px rgba(4, 34, 73, 0.12);
  }

  &:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
  }

  &:active {
    transform: scale(0.94);
  }

  &:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
}

/* Card-row arrows reused across scrollable sections (.tp-arrows--row).
   Full-bleed so the leading 12px aligns the first button with the first card,
   matching the row's start gutter. Each row hides its arrows once it stops
   scrolling and becomes a static grid (breakpoint differs per section). */
.tp-arrows--row {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: 12px;
}

/* Mouse drag-to-scroll feedback for the other card rows (tp-strip has its own) */
.card-grid.is-dragging,
.steps-grid.is-dragging,
.principles-grid.is-dragging,
.industry-grid.is-dragging {
  cursor: grabbing;
  user-select: none;
}

@media (min-width: 768px) {
  /* home #web card-grid wraps to a 2×2 block */
  .card-grid + .tp-arrows {
    display: none;
  }
}

@media (min-width: 992px) {
  /* contact #next-steps steps-grid goes 3-up */
  .steps-grid + .tp-arrows {
    display: none;
  }
}

@media (min-width: 1200px) {
  /* about #principles + clients #industries go 4-up */
  .principles-grid + .tp-arrows,
  .industry-grid + .tp-arrows {
    display: none;
  }
}

/* Touchpoints reveal — slower, staggered cascade, deeper rise */
.tp-track > .tp-card.reveal,
.tp-track > .feature-card.reveal {
  transform: translateY(25%);
  transition: opacity 1.4s ease, transform 1.4s ease;

  &.visible { transform: translateY(0); }

  &:nth-child(2) { transition-delay: 0.08s; }
  &:nth-child(3) { transition-delay: 0.16s; }
  &:nth-child(4) { transition-delay: 0.24s; }
  &:nth-child(5) { transition-delay: 0.32s; }
  &:nth-child(6) { transition-delay: 0.40s; }
  &:nth-child(7) { transition-delay: 0.48s; }
  &:nth-child(8) { transition-delay: 0.56s; }
  &:nth-child(9) { transition-delay: 0.64s; }
}

/* Touchpoints feature-card grid — lg breakpoint and up: 4 columns,
   constrained to container width, arrows + spacer hidden. */
@media (min-width: 992px) {
  .tp-strip:has(.feature-card) {
    overflow-x: visible;
    scroll-padding-left: 0;
    cursor: default;
  }

  .tp-strip:has(.feature-card) .tp-track {
    max-width: calc(960px - 24px);
    margin-inline: auto;
    padding-left: 0;
    flex-wrap: wrap;
    gap: var(--size-2);
  }

  .tp-track > .feature-card {
    flex: 0 0 calc((100% - 3 * var(--size-2)) / 4);
  }

  .tp-strip:has(.feature-card) .tp-spacer,
  .tp-strip:has(.feature-card) + .tp-arrows {
    display: none;
  }
}

@media (min-width: 1200px) {
  .tp-strip:has(.feature-card) .tp-track {
    max-width: calc(1140px - 24px);
    gap: var(--size-3);
  }

  .tp-track > .feature-card {
    flex: 0 0 calc((100% - 3 * var(--size-3)) / 4);
  }
}

@media (min-width: 1400px) {
  .tp-strip:has(.feature-card) .tp-track {
    max-width: calc(1320px - 24px);
  }
}

/* =============================================
   SECTION HEADER + FEATURES (legacy)
   ============================================= */

.section-header {
  text-align: center;
  margin-bottom: var(--size-7);

  & h2 {
    font-size: var(--size-3);
    letter-spacing: 0;
    margin-bottom: var(--size-1);
  }
}

.feature-card {
  text-align: center;
  padding: var(--size-2) var(--size-1);
  font-size: var(--size-1);

  & h4 {
    font-size: var(--size-1);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: var(--size-0);
  }

  & p {
    line-height: 1.5;
    margin: 0;
    opacity: 0.8;
  }
}

.feature-icon {
  color: var(--gold);
  margin-bottom: var(--size-1);

  & svg {
    width: 64px;
    height: 64px;
  }
}

@media (min-width: 768px) {
  .section-header h2 {
    font-size: var(--size-4);
  }
}

@media (min-width: 992px) {
  .section-header--left {
    text-align: left;
  }
}

@media (min-width: 1200px) {
  .section-header h2 {
    font-size: var(--size-5);
  }
}

/* Staggered reveal — row columns */
.row > .reveal:nth-child(2) { transition-delay: 0.15s; }
.row > .reveal:nth-child(3) { transition-delay: 0.3s; }

/* =============================================
   GLASS CARD GRID
   ============================================= */

/* Full-bleed horizontal card rows — shared scroller core. Each row sets its own
   child sizing and the breakpoint where it stops scrolling (see the per-section
   media queries below). */
.card-grid,
.industry-grid,
.steps-grid,
.principles-grid {
  list-style: none;
  margin: 0;
  margin-left: calc(50% - 50vw);
  width: 100vw;
  padding: 0 0 0 12px;
  display: flex;
  gap: var(--size-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 12px;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }

  /* Trailing spacer — keeps right padding when scrolled to the end.
     Negative margin cancels the flex gap so net trailing space is 12px. */
  &::after {
    content: '';
    flex: 0 0 12px;
    margin-left: calc(var(--size-2) * -1);
  }
}

.card-grid {
  align-items: stretch;

  & .glass-card {
    flex: 0 0 310px;
    scroll-snap-align: start;

    &.reveal:nth-child(2) { transition-delay: 0.1s; }
    &.reveal:nth-child(3) { transition-delay: 0.2s; }
    &.reveal:nth-child(4) { transition-delay: 0.3s; }
    &.reveal:nth-child(5) { transition-delay: 0.4s; }
    &.reveal:nth-child(6) { transition-delay: 0.5s; }
  }
}

.glass-card {
  position: relative;
  padding: var(--size-3) var(--size-2);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  text-align: left;

  & h3 {
    margin-bottom: var(--size-1);
  }

  & p {
    line-height: 1.3;
    margin: 0;
    opacity: 0.8;
  }

  & ul {
    margin: 0;

    & li {
      line-height: 1.5;
      opacity: 0.8;
      margin-bottom: var(--size-0);
    }
  }
}

#security .glass-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* #web cards — 2x2 grid of squares at md and up */
@media (min-width: 768px) {
  #web .card-grid {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    width: auto;
    max-width: 600px;
    margin-inline: auto;
    padding-left: 0;

    &::after {
      content: none;
    }

    & .glass-card {
      flex: 0 0 calc((100% - var(--size-2)) / 2);
      min-width: 0;
      aspect-ratio: 1 / 1;
    }
  }
}

@media (min-width: 1200px) {
  .card-grid {
    overflow-x: visible;
    scroll-snap-type: none;
    flex-wrap: wrap;

    & .glass-card {
      flex: 1 1 0;
      min-width: calc((100% - 5 * var(--size-2)) / 6);
    }
  }
}

/* =============================================
   TAB CARDS
   ============================================= */

.tab-stage {
  position: relative;
}

.tab-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-7);
  height: var(--size-7);
  padding: 0;
  background: var(--light);
  border: 1px solid rgba(4, 34, 73, 0.08);
  border-radius: 50%;
  color: var(--navy);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;

  & svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  &:hover {
    background: var(--gold-light);
    box-shadow: 0 6px 18px rgba(4, 34, 73, 0.12);
  }

  &:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
  }

  &:active {
    transform: translateY(-50%) scale(0.94);
  }

  &:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: translateY(-50%);
    box-shadow: none;
  }
}

.tab-arrow--prev { right: 103%; }
.tab-arrow--next { left: 103%; }

@media (min-width: 992px) {
  .tab-arrow {
    display: none;
  }
}

.tab-images {
  position: relative;
}

.tab-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;

  &:first-child {
    position: relative;
  }

  &.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }

  &.leaving {
    opacity: 0;
    transform: translateX(-24px);
  }
}

/* Mobile: slideshow mode */
.tab-cards {
  position: relative;
}

.tab-card {
  text-align: center;
  cursor: pointer;
  width: 100%;
  color: inherit;
  background: none;
  border: none;
  padding: var(--size-2) 0;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  &::before {
    display: none;
  }

  &:first-child {
    position: relative;
  }

  &.active {
    opacity: 1;
    pointer-events: auto;
  }
}

.tab-indicators {
  display: flex;
  justify-content: center;
  gap: var(--size-0);
  margin-top: var(--size-2);
}

.tab-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease;

  &.active {
    background: var(--gold);
  }
}

/* Desktop: stacked card buttons */
@media (min-width: 992px) {
  .tab-cards {
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
  }

  .tab-card {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    text-align: left;
    padding: var(--size-2);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: opacity 0.3s ease, background-color 0.3s ease;

    &:hover,
    &.active {
      background: var(--navy);
    }
  }

  .tab-indicators {
    display: none;
  }
}

/* =============================================
   PROGRESS CIRCLES
   ============================================= */

.progress-circle {
  position: relative;
  text-align: center;
  flex: 1 1 0;

  & svg {
    width: 100%;
    max-width: 120px;
    transform: rotate(-90deg);
  }
}

.progress-bg {
  fill: none;
  stroke: var(--light);
  stroke-width: 6;
  opacity: 0.15;
}

.progress-fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.5s ease;
}

.progress-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-3);
}

.progress-caption {
  opacity: 0.7;
  margin-top: var(--size-0);
}

/* =============================================
   REVEAL ANIMATIONS
   ============================================= */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;

  &.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-grid .reveal {
  transform: none;
  opacity: 0;

  &.visible {
    opacity: 1;
  }
}

/* =============================================
   ACTIVE NAV
   ============================================= */

.navbar-collapse .nav-link.active,
.navbar-collapse .nav-link[aria-current="page"] {
  color: var(--gold);
}

@media (min-width: 1200px) {
  .navbar-collapse .nav-link.active::after,
  .navbar-collapse .nav-link[aria-current="page"]::after {
    transform: scaleX(1);
  }
}

/* =============================================
   PAGE HEADER (sub-page hero)
   ============================================= */

.page-header {
  padding: calc(var(--size-12) + 64px) 0 var(--size-7);
  text-align: center;
}

.page-header__inner {
  text-align: center;

  & h1 {
    margin-bottom: var(--size-2);
  }

  & .lead {
    margin-bottom: 0;
  }

  & p:last-child {
    opacity: 0.85;
    margin: 0;
  }
}

.w-border {
  border-bottom: 1px solid rgba(189, 164, 78, 0.4) !important;
}

.eyebrow {
  font-size: var(--size-1);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--size-2);
}

@media (min-width: 992px) {
  .page-header {
    padding: calc(var(--size-13) + 64px) 0 var(--size-9);
    text-align: left;
  }

  .page-header__inner {
    text-align: left;
  }
}

/* =============================================
   CASE LIST
   ============================================= */

.case-list {
  counter-reset: caseCounter;
  padding: 0;
  margin: 0;
}

.case-row {
  counter-increment: caseCounter;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--size-3);
  align-items: center;
  padding: var(--size-7) 0;

  &:first-child {
    padding-top: 0;
  }

  &:last-child {
    padding-bottom: 0;
  }
}

.case-thumb {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 8 / 5;
  background: var(--thumb-bg);
  box-shadow: var(--shadow-card);

  & img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
  }
}

@media (hover: hover) {
  .case-row--linked:hover .case-thumb img {
    transform: scale(1.03);
  }
}

.case-content {
  text-align: left;
}

.case-title {
  margin: 0 0 var(--size-1);
}

/* Stretched link — makes the whole .case-row clickable */
.case-row--linked {
  position: relative;
  cursor: pointer;
}

.case-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  &:hover,
  &:focus-visible {
    color: var(--gold);
  }
}

@media (hover: hover) {
  .case-row--linked:hover .case-title {
    color: var(--gold);
  }
}

.case-tagline {
  font-size: var(--size-2);
  line-height: 1.3;
  color: var(--gold);
  margin: 0 0 var(--size-3);
}

.case-meta {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin: 0;
  padding-top: var(--size-2);
  border-top: 1px solid rgba(189, 164, 78, 0.4);
}

.case-meta__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.case-meta__label {
  font-size: var(--size-0);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.case-meta__value {
  font-size: var(--size-1);
  line-height: 1.4;
  margin: 0;
}

/* Outline button — overrides Bootstrap .btn-outline-primary with brand gold */
.btn-outline-primary {
  --bs-btn-color: var(--gold);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: var(--navy);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--gold);
  --bs-btn-active-color: var(--navy);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--gold);

  display: inline-flex;
  align-items: center;
  margin-top: var(--size-3);

  &:hover,
  &:focus {
    background-image: var(--gold-gradient);
    background-size: 100% 200%;
    background-position: 0 0;
  }
}

@media (hover: hover) {
  .case-row--linked:hover .btn-outline-primary {
    animation: goldShimmer 2s ease forwards;
    background-image: var(--gold-gradient);
    background-size: 100% 200%;
    background-position: 0 0;
    color: var(--navy);
    transform: scale(1.06);
  }
}

@media (min-width: 768px) {
  .case-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-3);
  }
}

@media (min-width: 992px) {
  .case-thumb {
    aspect-ratio: 5 / 2;
  }
}

@media (min-width: 1200px) {
  .case-row {
    grid-template-columns: 5fr 6fr;
    gap: var(--size-7);
  }

  .case-row:nth-child(even) {
    & .case-thumb { order: 2; }
    & .case-content { order: 1; }
  }

  .case-thumb {
    aspect-ratio: 8 / 5;
  }
}

/* =============================================
   CASE DETAIL — hero, meta sidebar, chips
   ============================================= */

.section--auto {
  min-height: auto;
}

/* Case study pages — sections are content-sized (hero keeps full viewport) */
.page--case section:not(.hero-section) {
  min-height: auto;
}

/* Page-header H1 — caps at 56px so it stays above section H2 (48px max) */
@media (min-width: 1200px) {
  .page-header h1 {
    font-size: var(--size-6); /* 56px */
  }
}

.case-hero__layout {
  & .eyebrow {
    margin-bottom: var(--size-1);
  }

  & h1 {
    margin-bottom: var(--size-2);
  }

  & .lead {
    margin: 0 0 var(--size-7);
  }
}

/* 12-col 8:5 hero image — square source masked by container aspect */
.case-hero__media {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 8 / 5;
  background: var(--thumb-bg);
  box-shadow: var(--shadow-card);

  & img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Meta sidebar (vertical stack) */
.case-meta--stack {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  padding: var(--size-3) 0 0;
  border-top: 1px solid rgba(189, 164, 78, 0.3);

  & .case-meta__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .case-meta--stack {
    padding: 0;
    border-top: none;
  }
}

.chip {
  display: inline-block;
  font-size: var(--size-0);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light);
  padding: 6px 12px;
  margin: 2px 4px 2px 0;
  border: 1px solid rgba(189, 164, 78, 0.6);
  border-radius: 9999px;
}

/* =============================================
   CASE NARRATIVE — body copy
   ============================================= */

.case-narrative {
  font-size: var(--size-x);
  line-height: 1.5;
  margin-bottom: var(--size-3);

  &:last-child {
    margin-bottom: 0;
  }

  & em {
    font-style: normal;
    color: var(--gold);
  }
}

/* =============================================
   DELIVERABLES — gold-numbered list
   ============================================= */

.deliverables {
  list-style: none;
  counter-reset: delivCounter;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.deliverables li {
  counter-increment: delivCounter;
  position: relative;
  padding: var(--size-3) 0 var(--size-3) calc(var(--size-7) + var(--size-1));
  border-top: 1px solid rgba(235, 235, 235, 0.15);
  text-align: left;

  &:last-child {
    border-bottom: 1px solid rgba(235, 235, 235, 0.15);
  }

  &::before {
    content: counter(delivCounter, decimal-leading-zero);
    position: absolute;
    top: var(--size-3);
    left: 0;
    font-size: var(--size-3);
    line-height: 1;
    letter-spacing: 0;
    color: var(--gold);
  }

  & h3 {
    font-size: var(--size-x);
    margin: 0 0 var(--size-0);
  }

  & p {
    font-size: var(--size-x);
    line-height: 1.4;
    margin: 0;
    opacity: 0.85;
  }
}

@media (min-width: 768px) {
  .deliverables li h3 {
    font-size: var(--size-2);
  }
}

@media (min-width: 992px) {
  .deliverables li {
    padding: var(--size-4) 0 var(--size-4) calc(var(--size-9) + var(--size-2));
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--size-5);
    align-items: baseline;

    &::before {
      top: var(--size-4);
      font-size: var(--size-4);
    }

    & h3 {
      margin: 0;
    }
  }
}

@media (min-width: 1600px) {
  .deliverables li h3 {
    font-size: var(--size-3);
  }
}

/* =============================================
   METRIC GRID
   ============================================= */

.metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--size-1);
}

.metric {
  position: relative;
  padding: var(--size-3) var(--size-2);
  text-align: center;

  & .metric__after {
    font-size: clamp(56px, 64vw, 80px);
    line-height: 1;
    letter-spacing: -2px;
    color: var(--gold);
    margin: 0 0 var(--size-1);

    & small {
      font-size: 0.5em;
      letter-spacing: 0;
      opacity: 0.85;
      margin-left: 2px;
    }
  }

  & .metric__label {
    font-size: var(--size-x);
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--light);
    margin: 0 0 var(--size-0);
  }

  & .metric__before {
    font-size: var(--size-1);
    color: var(--light);
    opacity: 0.75;
    margin: 0;
  }
}

@media (min-width: 768px) {
  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .metric-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .metric {
    padding: var(--size-3) var(--size-x);
  }
}

/* =============================================
   PULL QUOTE
   ============================================= */

.pull-quote {
  position: relative;
  margin: 0;
  text-align: center;

  & .eyebrow {
    margin-bottom: var(--size-3);
  }

  & blockquote {
    margin: 0;
    padding: 0;
  }

  & blockquote p {
    font-size: clamp(var(--size-2), 3.4vw, var(--size-5));
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: var(--light);
    margin: 0;
  }

}

/* =============================================
   CASE BULLETS — plain bulleted list (PDF-faithful)
   ============================================= */

.case-bullets {
  margin: 0;
  text-align: left;
}

.case-bullets li {
  font-size: var(--size-x);
  line-height: 1.5;
  margin-bottom: var(--size-1);

  &:last-child {
    margin-bottom: 0;
  }
}

/* =============================================
   CASE TABLE — Before / After metrics table
   ============================================= */

.case-table-wrap {
  margin-top: var(--size-5);
  overflow-x: auto;
}

.case-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--size-1);
}

.case-table thead th {
  font-weight: 400;
  font-size: var(--size-0);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--light);
  background: var(--navy);
  padding: var(--size-1) var(--size-2);
}

.case-table tbody th,
.case-table tbody td {
  padding: var(--size-1) var(--size-2);
  border-bottom: 1px solid rgba(235, 235, 235, 0.15);
  vertical-align: top;
  font-weight: 400;
  color: var(--light);
}

.case-table tbody tr:last-child :is(th, td) {
  border-bottom: none;
}

/* =============================================
   AUDIENCE TOGGLE (members / staff)
   ============================================= */

.audience-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  max-width: 100%;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(189, 164, 78, 0.35);
  border-radius: 9999px;
  isolation: isolate;
}

.audience-toggle__btn {
  position: relative;
  z-index: 2;
  font-family: var(--font-orra);
  font-size: var(--size-1);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: none;
  padding: 10px 16px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease;

  &.is-active {
    color: var(--navy);
  }

  &:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
}

@media (min-width: 576px) {
  .audience-toggle__btn {
    letter-spacing: 1px;
    padding: 12px 28px;
  }
}

.audience-toggle__slider {
  position: absolute;
  z-index: 1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--gold);
  border-radius: 9999px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.audience-toggle[data-active="staff"] .audience-toggle__slider {
  transform: translateX(100%);
}

.audience-media {
  display: none;
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;

  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  &.is-active {
    display: block;
  }
}

.audience-panel {
  display: none;
  border: 1px solid var(--gold);
  border-top: 0;
  padding: var(--size-2);

  &.is-active {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  & li {
    font-size: var(--size-x);
    font-weight: 300;
    margin-bottom: var(--size-1);

    &:last-child {
      margin-bottom: 0;
    }
  }
}

@media (min-width: 992px) {
  .audience-media {
    aspect-ratio: 3 / 4;
  }

  .audience-panel {
    border-top: 1px solid var(--gold);
    border-left: 0;
    padding: var(--size-3);
    aspect-ratio: 3 / 4;
  }
}

@media (min-width: 1366px) {
  .audience-media {
    aspect-ratio: 4 / 3;
  }

  .audience-panel {
    aspect-ratio: 4 / 3;
  }
}

/* =============================================
   NEXT CASE (Next Project pattern)
   ============================================= */

.next-case {
  padding-top: var(--size-7);
}

.next-case__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.next-case__eyebrow {
  margin: 0 0 var(--size-2);
  text-align: left;
}

.next-case__title {
  font-size: var(--size-3); /* 32px mobile */
  letter-spacing: -1px;
  margin: 0 0 var(--size-2);
  text-align: left;
}

@media (min-width: 768px) {
  .next-case__title {
    font-size: var(--size-5); /* 48px max */
  }
}

.next-case__tagline {
  font-size: var(--size-x);
  line-height: 1.4;
  color: var(--light);
  opacity: 0.75;
  max-width: 560px;
  margin: 0 0 var(--size-2);
  text-align: left;
}

.next-case__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  margin-bottom: var(--size-5);
}

.next-case__media {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 3 / 1;
  background: var(--thumb-bg);

  & img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

.next-case__link:hover .next-case__media img,
.next-case__link:focus-visible .next-case__media img {
  transform: scale(1.1);
}

@media (min-width: 768px) {
  .next-case__media {
    aspect-ratio: 4 / 1;
  }
}

@media (min-width: 992px) {
  .next-case__media {
    aspect-ratio: 5 / 1;
  }
}

/* =============================================
   INDUSTRIES — sector cards (image + overlay caption)
   ============================================= */

#industries {
  padding-bottom: var(--size-9);
}

.industries__intro {
  margin-bottom: var(--size-7);

  & h2 {
    text-transform: none;
    letter-spacing: -0.5px;
    margin-bottom: var(--size-2);
  }
}

/* Draggable horizontal row on mobile + portrait/landscape tablet, static 4-up
   grid from xl. Full-bleed with a 12px leading gutter and a matching trailing
   spacer so the start and end spacings align (like the other card rows). */
.industry-grid > li::before {
  content: none;
}

.industry-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  padding-left: 0;
}

.industry-card__thumb {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--navy);
  border-radius: var(--size-0);
  box-shadow: var(--shadow-card);

  & > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
  }
}

.industry-card__caption {
  padding-top: var(--size-2);
  text-align: left;
  color: var(--light);

  & p {
    margin: 0;
    line-height: 1.4;
    color: var(--light);
  }
}

.industry-card__label {
  font-size: var(--size-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: 0 0 var(--size-1);
}

@media (hover: hover) {
  .industry-card:hover .industry-card__thumb > img {
    transform: scale(1.06);
  }
}

@media (min-width: 992px) {
  #industries {
    padding-bottom: var(--size-12);
  }
}

/* Static 4-up grid from xl — drop the scroller, restore the grid layout */
@media (min-width: 1200px) {
  .industry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--size-2);
    width: auto;
    margin: 0;
    padding-left: 0;
    overflow-x: visible;
    scroll-snap-type: none;

    &::after {
      content: none;
    }
  }
}

/* =============================================
   CLIENTS — logo wall
   ============================================= */

.client-wall {
  padding-top: var(--size-5);
  padding-bottom: var(--size-12);
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--size-3) var(--size-2);
}

.client-grid > li::before {
  content: none;
}

.client-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-3) var(--size-2);
  background: var(--light);
  border-radius: var(--size-0);
  transition: background 0.4s ease;
  box-shadow: var(--shadow-card);
}

.client-tile__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--size-2);
  margin: 0;
  width: 100%;

  & img {
    display: block;
    width: auto;
    max-width: 100%;
    height: var(--size-6);
    transition: transform 0.4s ease;
  }
}

.client-tile__name {
  font-size: var(--size-0);
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
  transition: opacity 0.4s ease;
}

@media (hover: hover) {
  .client-tile:hover {
    background: var(--white);

    & .client-tile__inner img {
      transform: scale(1.04);
    }

    & .client-tile__name {
      opacity: 1;
    }
  }
}

.client-sectors {
  font-size: var(--size-0);
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin: var(--size-7) 0 0;
}

.client-sectors span {
  margin: 0 6px;
  opacity: 0.6;
}

@media (min-width: 576px) {
  .client-grid {
    gap: var(--size-4) var(--size-3);
  }

  .client-tile {
    padding: var(--size-4) var(--size-3);
  }
}

@media (min-width: 768px) {
  .client-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--size-5) var(--size-4);
  }

  .client-tile {
    padding: var(--size-4);
  }
}

@media (min-width: 992px) {
  .client-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .client-tile {
    padding: var(--size-5) var(--size-4);
  }
}

@media (min-width: 1200px) {
  .client-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--size-6) var(--size-5);
  }

  .client-tile {
    padding: var(--size-4);
  }
}

/* Statement band */
.client-statement {
  padding: var(--size-12) 0;
  text-align: center;

  & .eyebrow {
    text-align: center;
  }

  & h2 {
    margin-bottom: var(--size-3);
    text-transform: none;
    letter-spacing: -0.5px;
  }
}

@media (min-width: 992px) {
  .client-statement {
    text-align: center;
  }
}

/* =============================================
   CONTACT PAGE
   ============================================= */

/* Hero subline — capped, centered on mobile, left on desktop */
.page-header--contact .page-header__inner .lead {
  max-width: 720px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .page-header--contact .page-header__inner .lead {
    margin-inline: 0;
  }
}

/* Section 2 — Contact form card */
.contact-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.contact-card__header {
  margin-bottom: var(--size-4);

  & h2 {
    margin-bottom: var(--size-1);
  }

  & .lead {
    max-width: 520px;
    margin: 0 auto;
  }
}

/* Form fields */
.contact-form {
  text-align: left;
}

.form-field {
  margin-bottom: var(--size-0);
}

.contact-form label {
  display: block;
  margin-bottom: var(--size-0);
  font-size: var(--size-0);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(235, 235, 235, 0.7);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--font-orra);
  font-size: var(--size-1);
  line-height: 1.3;
  color: var(--light);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;

  &::placeholder {
    color: rgba(235, 235, 235, 0.4);
  }

  &:hover {
    border-color: rgba(255, 255, 255, 0.32);
  }

  &:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(189, 164, 78, 0.25);
  }

  &.is-invalid {
    border-color: #d98c97;
  }

  &.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(217, 140, 151, 0.25);
  }
}

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

/* Native select caret — gold chevron */
.contact-form select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23BDA44E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.contact-form select option {
  color: var(--navy);
  background: var(--white);
}

.contact-form select:required:invalid {
  color: rgba(235, 235, 235, 0.4);
}

/* Inline field errors */
.form-field__error {
  display: block;
  min-height: 1.2em;
  margin-top: 6px;
  font-size: var(--size-0);
  line-height: 1.2;
  color: #d98c97;
}

/* Honeypot — visually removed, kept in DOM for bots */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Technical error banner above the form */
.form-error-banner {
  margin-bottom: var(--size-2);
  padding: var(--size-1);
  font-size: var(--size-1);
  text-align: left;
  color: #d98c97;
  background: rgba(217, 140, 151, 0.08);
  border: 1px solid rgba(217, 140, 151, 0.4);
  border-radius: 8px;

  & a {
    color: #d98c97;
  }
}

/* Submit — single primary action */
.contact-submit {
  width: 100%;
  margin-top: var(--size-1);

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  &:disabled:hover,
  &:disabled:focus {
    transform: none;
    animation: none;
    color: var(--navy);
  }
}

/* Success confirmation */
.form-success {
  padding: var(--size-2) 0;
  text-align: center;

  & h3 {
    margin-bottom: var(--size-1);
  }

  & p {
    max-width: 520px;
    margin: 0 auto;
    opacity: 0.85;
  }
}

/* Section 3 — Response commitment */
.response-commitment {
  text-align: center;

  & .eyebrow {
    margin-bottom: var(--size-1);
  }
}

/* Response time — gold-bordered navy square, content centered on 4/6 width */
.response-square {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--navy);
  border-radius: var(--glass-radius);
}

.response-square__inner {
  width: 66.6667%;
}

.response-commitment__statement {
  font-size: var(--size-3);
  line-height: 1.2;
  color: var(--light);
  margin: 0 0 var(--size-2);
}

.response-commitment__email {
  color: var(--gold);
}

@media (min-width: 768px) {
  .response-commitment__statement {
    font-size: var(--size-4);
  }
}

/* Section 4 — Depth behind the platform */
.depth {
  text-align: center;
}

.depth__rule {
  width: 64px;
  margin: 0 auto var(--size-3);
}

.depth__body {
  margin: var(--size-2) auto 0;
  line-height: 1.5;
}

@media (min-width: 992px) {
  .depth {
    text-align: left;
  }

  .depth__body {
    margin-inline: 0;
  }
}

/* Section 5 — What happens next
   Horizontal scroll on mobile + portrait tablet, 3-up from lg (like #web) */
.steps-grid {
  & .step-card {
    flex: 0 0 300px;
    scroll-snap-align: start;

    &.reveal:nth-child(2) { transition-delay: 0.1s; }
    &.reveal:nth-child(3) { transition-delay: 0.2s; }
  }
}

@media (min-width: 992px) {
  .steps-grid {
    width: auto;
    margin-left: 0;
    padding-left: 0;
    overflow-x: visible;
    scroll-snap-type: none;
    justify-content: center;

    &::after {
      content: none;
    }

    & .step-card {
      flex: 1 1 0;
    }
  }
}

.step-card {
  &.glass-card h3 {
    margin-bottom: var(--size-0);
  }
}

.step-card__num {
  display: block;
  margin-bottom: var(--size-1);
  font-size: var(--size-5);
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
}

/* =============================================
   ABOUT PAGE
   ============================================= */

/* Section 1 — Hero. Follows the interior-page convention: centered on mobile,
   left-aligned from lg. Subline capped at ~760px per brief. */
.page-header--about .page-header__inner .lead {
  max-width: 760px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .page-header--about .page-header__inner .lead {
    margin-inline: 0;
  }
}

/* Section 2 — Why ORRA exists. Full-bleed about.webp background, navy fallback. */
#why-orra {
  display: flex;
  align-items: center;
  background-color: var(--navy);
  background-image: url('../files/images/about.webp');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;

  @media (hover: hover) {
    & {
      background-attachment: fixed;
    }
  }

  /* Frosted light card — raised opacity keeps dark text readable over any
     part of the about.webp surface */
  & .glass-card {
    background: rgba(255, 255, 255, 0.5);
    color: var(--navy);

    & h2 {
      color: var(--navy);
    }

    & .eyebrow {
      margin-bottom: var(--size-2);
    }

    /* Square card on very large screens */
    @media (min-width: 1440px) {
      & {
        display: flex;
        flex-direction: column;
        justify-content: center;
        aspect-ratio: 1 / 1;
      }
    }
  }
}

/* Section 3 — Depth. Reuses the home #operational-intelligence arches mask
   (.oi-arches), anchored bottom-right. Needs its own stacking context so the
   z-index:-1 mask sits behind the content but over the navy background. */
#depth {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Section 4 — Four principles. Each pillar sits in its own glass card.
   Typography only: no icons, numbers, or illustrations. */
#principles {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Draggable horizontal row on mobile, portrait + landscape tablet, static 4-up
   from xl. Full-bleed with a 12px leading gutter and a matching trailing spacer
   so the start and end spacings align (like .steps-grid / .card-grid). */
.principles-grid {
  & .principle {
    flex: 0 0 300px;
    scroll-snap-align: start;

    &.reveal:nth-child(2) { transition-delay: 0.1s; }
    &.reveal:nth-child(3) { transition-delay: 0.2s; }
    &.reveal:nth-child(4) { transition-delay: 0.3s; }
  }
}

@media (min-width: 1200px) {
  .principles-grid {
    width: auto;
    margin-left: 0;
    padding-left: 0;
    overflow-x: visible;
    scroll-snap-type: none;

    &::after {
      content: none;
    }

    & .principle {
      flex: 1 1 0;
    }
  }
}

.principle {
  & h3 {
    color: var(--gold);
  }

  & p {
    line-height: 1.5;
  }
}

/* Section 5 — Where we are headed. Closing statement, generous breathing room. */
.vision {
  display: flex;
  flex-direction: column;
  justify-content: center;

  & h2 {
    margin-bottom: var(--size-3);
  }
}