/* ==================================================== */
/*  BROWSENT — Premium Glassmorphism Design System       */
/*  Theme: Maroon · Blush · Warm Gray · Light            */
/* ==================================================== */

:root {
  --primary: #761a02;
  --primary-hover: #5d1401;
  --primary-light: rgba(118, 26, 2, 0.15);
  --primary-mid: rgba(118, 26, 2, 0.25);
  --primary-glow: rgba(118, 26, 2, 0.35);
  --primary-subtle: rgba(118, 26, 2, 0.08);
  --accent: #e6cbb8;
  --dark: #3b2b26;
  --dark-secondary: #230000;
  --dark-muted: #2f0c00;
  --primary-text: #8a2e12;
  --light: #fbf0f6;
  --light-mid: #ffffff;
  --white: #ffffff;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-glass: 0 8px 32px rgba(118, 26, 2, 0.14);
  --shadow-glass-hover: 0 16px 48px rgba(118, 26, 2, 0.22);
  --shadow-glass-lg: 0 24px 64px rgba(118, 26, 2, 0.18);
  --glass-bg: linear-gradient(145deg, rgba(251, 240, 246, 0.72) 0%, rgba(251, 240, 246, 0.4) 34%, rgb(249 198 161 / 22%) 58%, rgba(251, 240, 246, 0.52) 100%);
  --glass-bg-strong: linear-gradient(145deg,
      rgba(251, 240, 246, 0.92) 0%,
      rgba(251, 240, 246, 0.62) 34%,
      rgba(230, 203, 184, 0.36) 58%,
      rgba(251, 240, 246, 0.78) 100%);
  --glass-border: 1px solid rgba(118, 26, 2, 0.2);
  --glass-border-hover: 1px solid rgba(118, 26, 2, 0.38);
  --glass-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glass: cubic-bezier(0.22, 1, 0.36, 1);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 100px;
  --glass-blur: blur(16px) saturate(1.5);
  --glass-blur-strong: blur(26px) saturate(1.5);
  --glass-blur-max: blur(36px) saturate(1.6);

  /* Fanned Deck Tokens */
  --deck-bg: #fff9fc;
  --deck-violet: #761a02;
  --deck-amber: #e6cbb8;
  --deck-font-display: 'Cormorant Garamond', serif;
  --deck-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Editorial Work Showcase Tokens */
  --terracotta: #D3A18F;
  --soft-peach: #F4DBD3;
  --light-pink: #F9EDF2;
  --highlight: #FDF4F2;
  --bg-base: #FBF0F6;
}

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

.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 2000;
  padding: 12px 24px;
  background: var(--primary);
  color: var(--white);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top 0.3s var(--ease-out);
}

.skip-link:focus {
  top: 16px;
}

html {
  background: var(--light);
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

body {
  font-family: var(--font-sans);
  background: var(--light);
  color: var(--dark-secondary);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile nav open: lock the page behind the drawer.
   <html> is the element whose overflow propagates to the viewport, so this has
   to be set here — locking <body> is a no-op once html has overflow-x: clip. */
html.nav-open {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none
}

input,
textarea {
  font: inherit
}

ul,
ol {
  list-style: none
}

.container {
  width: 100%;
  margin: 0px auto;
  max-width: 1280px;
  padding: 0 0px;
}

/* Container margins specified per component */
.hero-pin .container,
.work .container,
.problem .container,
.philosophy .container,
.failures .container,
.testimonials .container,
.footer .container {
  margin: 0 auto;
}

/* ============================================= */
/*  LOADER                                       */
/* ============================================= */

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbf0f6;
  transition: opacity 0.6s var(--ease-out), visibility 0.6s var(--ease-out);
}

.loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loader-mark {
  width: 130px;
  height: 40px;
  overflow: visible;
  border-radius: 10px;
  animation: loaderPulse 1.2s var(--ease-out) infinite;
}

.loader-text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--dark);
  letter-spacing: -0.3px;
}

.loader-bar {
  width: 160px;
  height: 3px;
  background: rgba(118, 26, 2, 0.12);
  border-radius: 4px;
  overflow: hidden;
}

.loader-bar i {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  border-radius: 4px;
  animation: loaderSlide 1.2s var(--ease-out) infinite;
  transition: width 0.3s var(--ease-out);
}

@keyframes loaderPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1
  }

  50% {
    transform: scale(0.92);
    opacity: 0.7
  }
}

@keyframes loaderSlide {
  0% {
    transform: translateX(-100%)
  }

  100% {
    transform: translateX(350%)
  }
}

/* ============================================= */
/*  NAVIGATION — Frosted Glass Floating Bar      */
/* ============================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 0;
  margin: 0 5%;
  box-sizing: border-box;
  max-width: calc(100% - 10%);
  transition: all 0.4s var(--ease-glass);
}

@media(max-width: 900px) {
  .nav {
    margin: 0 3%;
  }
}

@media(max-width: 500px) {
  .nav {
    margin: 0 2%;
  }
}

.nav.scrolled {
  padding: 10px 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  overflow: visible;
}

.brand {
  max-width: max-content;
  background: #ffebeb;
  display: flex;
  /* align-items: center; */
  gap: 0px;
  flex-shrink: 0;
  border-radius: 9px;
  /* padding: 2px 10px; */
  /* background: var(--glass-bg); */
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  will-change: transform;
  box-shadow: var(--glass-gloss);
}

.brand-mark {
  padding: 3px 5px;
}

.brand-mark svg {
  display: block;
  transition: transform 0.3s var(--ease-out);
}

.brand-mark img {
  display: block;
}

/* Brand wordmark: assets/svgs/browsent_logo_brown.avif (901x277) */
.nav .brand-mark img {
  padding: 4px 6px;
  width: 130px;
  height: 40px;
}

.footer-brand .brand-mark img {
  width: 110px;
  height: 34px;
}

.nav .brand {
  align-items: flex-end;
}

.brand:hover .brand-mark svg {
  transform: scale(1.05) rotate(-3deg);
}

.brand-name {
  font-weight: 700;
  font-size: 20px;
  color: var(--dark);
  letter-spacing: -0.5px;
}

/* Brand wordmark fallback: keep the logo from overflowing narrow viewports */
.brand span img {
  max-width: 100%;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.nav-pill {
  display: flex;
  align-items: center;
  padding: 10px 24px;
  /* background: var(--glass-bg); */
  background: #ffebeb;
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  will-change: transform;
  border-radius: 9999px;
  border: var(--glass-border);
  box-shadow: var(--shadow-glass), var(--glass-gloss);
  min-width: 0;
  /* overflow: hidden; */
  flex: 0 1 auto;
  max-width: 100%;
}

.nav-link {
  position: relative;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-secondary);
  border-radius: var(--radius-sm);
  transition: all 0.3s var(--ease-out);
}

.nav-link:hover {
  color: var(--primary-text);
  background: var(--primary-subtle);
}

.nav-link.active {
  color: var(--primary-text);
}

.nav-label {
  position: relative;
  z-index: 1;
}

.nav-ind {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.3s var(--ease-out);
}

.nav-link:hover .nav-ind,
.nav-link.active .nav-ind {
  width: 20px;
}

.nav-cta {
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  background: #eee0d740;
  backdrop-filter: blur(2px);
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: var(--glass-bg);
  border-radius: var(--radius-sm);
  border: var(--glass-border);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  z-index: 100;
}

.nav-toggle svg {
  display: block;
  width: 26px;
  height: 26px;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-toggle .line {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-toggle .line-top-bottom {
  stroke-dasharray: 12 63;
}

.nav-toggle[aria-expanded="true"] svg {
  transform: rotate(-45deg);
}

.nav-toggle[aria-expanded="true"] svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}

/* --- Nav Dropdown --- */
.nav-dropdown {
  position: relative;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-toggle .nav-label::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease-out);
  vertical-align: middle;
  margin-bottom: 2px;
}

.nav-dropdown:hover .dropdown-toggle .nav-label::after {
  transform: rotate(-135deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 210px;
  background: linear-gradient(145deg, rgba(251, 240, 246, 0.92) 0%, rgb(251 240 246) 34%, rgb(230 203 184 / 96%) 58%, rgb(251 240 246 / 95%) 100%);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  will-change: transform;
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-glass-lg);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s ease;
  transition-delay: 0.4s, 0.4s, 0s;
  z-index: 10;
  pointer-events: none;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}

.dropdown-item {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-secondary);
  border-radius: var(--radius-sm);
  transition: all 0.2s var(--ease-out);
  white-space: nowrap;
}

.dropdown-item:hover {
  color: var(--primary-text);
  background: var(--primary-subtle);
}

/* --- Sub-dropdown (third level) --- */
.nav-dropdown-sub {
  position: relative;
}

.dropdown-toggle-sub {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sub-ind {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.3s var(--ease-out);
  flex-shrink: 0;
}

.nav-dropdown-sub:hover .sub-ind {
  transform: rotate(45deg);
}

.dropdown-menu-sub {
  position: absolute;
  top: 0;
  left: 100%;
  transform: translateX(6px) translateY(0);
  min-width: 180px;
  background: linear-gradient(145deg, rgba(251, 240, 246, 0.92) 0%, rgb(251 240 246) 34%, rgb(230 203 184 / 96%) 58%, rgb(251 240 246 / 95%) 100%);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  will-change: transform;
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-glass-lg);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s ease;
  transition-delay: 0.4s, 0.4s, 0s;
  z-index: 11;
  pointer-events: none;
}

.nav-dropdown-sub:hover .dropdown-menu-sub,
.nav-dropdown-sub:focus-within .dropdown-menu-sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(6px) translateY(-4px);
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}

/* --- Hover bridges: invisible strips across the dead gaps the open-state
   transforms leave behind (4px under a nav item, 6px between a submenu
   row and its flyout). Crossing those strips used to drop :hover on the
   wrapper, so a slow pointer let the 0.4s close-grace expire: the menu
   faded to visibility:hidden + pointer-events:none and clicks fell
   through to the page behind — sub-items looked present but were
   invisible/unclickable unless you dwelt on the row first.

   Each bridge is a pseudo-element OF the menu itself, and every menu is
   a child of the wrapper whose :hover keeps it open, so hovering the
   bridge keeps the wrapper hovered — hover never breaks mid-travel.
   pointer-events is inherited from the originating menu, so a closed
   menu's bridge (pointer-events:none) stays completely inert.

   The offsets are sized to exactly match the open transform, so the
   bridges never overlap the trigger rows and can't steal their clicks.

   Desktop-only: the <=1000px drawer makes these menus position:static
   and display-toggled, where an absolutely positioned pseudo would
   float over unrelated drawer content. --- */
@media (min-width: 1001px) {

  .dropdown-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* Open state shifts the menu down 4px — bridge exactly that gap. */
    top: -4px;
    height: 4px;
  }

  .dropdown-menu-sub::before {
    content: '';
    position: absolute;
    /* Open state shifts the flyout right 6px — bridge exactly that gap. */
    left: -6px;
    width: 6px;
    top: 0;
    bottom: 0;
  }
}

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

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-text);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--primary-subtle);
  border: 1px solid rgba(118, 26, 2, 0.08);
}

.Why-Systems-Fail {
  margin-right: auto;
}


.Engineered-for-Growth {}

@media (max-width:900px) {
  .The-Problem {
    margin: 5% auto;
  }
}

@media (min-width:700px) {
  h2 {
    max-width: 60vw;
  }


  .fail-head-right {
    padding-left: var(--space-xl);
  }

  .failure-section-header {
    flex-direction: row;
  }


}

h2 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

h2 em {
  font-style: normal;
  color: var(--primary);
}

h3 {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.3;
  letter-spacing: -0.3px;
}

h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.4;
}

h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.mb-4 {
  margin-bottom: 4%;
}

.section-head {
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 0;
  /* max-width: 700px; */
  margin: 0;
  margin-bottom: 4%;
}

.section-head-left {
  flex-direction: column;
  text-align: left;
  max-width: 600px;
  margin: 0 0 var(--space-2xl);
}

.fail-head-left {
  width: 100%;
  min-height: 300px;
  background: url("assets/images/solve.avif") center/contain no-repeat;
}

@media (min-width: 901px) {
  .fail-head-right {

    align-items: center;
  }

}

.fail-head-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--space-xl);
}

.section-desc {
  font-size: 18px;
  color: var(--dark-secondary);
  line-height: 1.7;
  max-width: 580px;
  text-align: left;
}

.Selected-Deployments-desc {
  text-align: center;
}

@media (max-width: 700px) {
  .section-desc {
    text-align: center;
    padding: 0 4%;
  }

  .fail-head-right {
    padding-left: 0;
    align-self: center;
    justify-content: center;
  }

  .failure-desc {
    text-align: center;
    padding: 0 4%;
  }
}


.section-head-left .section-desc {
  margin: 0;
}

/* ============================================= */
/*  BUTTONS — Premium with Shine & Ripple        */
/* ============================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px var(--primary-mid);
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  padding: 14px 3.3em 14px 1.2em;
  font-size: 15px;
  font-weight: 600;
  border-radius: 0.9em;
  border: none;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 1.6em -0.6em var(--primary-hover);
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.btn-primary .icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0.3em;
  height: 2.2em;
  width: 2.2em;
  background: var(--white);
  border-radius: 0.7em;
  box-shadow: 0.1em 0.1em 0.6em 0.2em var(--primary);
  transition: width 0.3s;
}

.btn-primary .icon svg {
  width: 1.1em;
  color: var(--primary);
}

/* Sweep only where a real pointer can move away again. Touch browsers
   latch :hover on tap and keep it until the next tap, which stretched the
   white pill across the whole button — white label on a white pill, so the
   text disappeared. Phones/tablets now keep the resting pill and stay
   legible; desktop and hybrid devices keep the full sweep. */
@media (hover: hover) and (pointer: fine) {

  .btn-primary:hover .icon {
    width: calc(100% - 0.6em);
  }

  .btn-primary:hover .icon svg {
    transform: translateX(0.1em);
  }
}

.btn-primary:focus-visible {
  box-shadow: inset 0 0 1.6em -0.6em var(--primary-hover), 0 0 0 3px var(--primary-mid);
}

.btn-ghost {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform;
  border: var(--glass-border);
  color: var(--dark);
}

.btn-launch {
  display: flex;
  align-items: center;
  color: var(--white);
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  padding: 0.8em 1.3em 0.8em 0.9em;
  border-radius: 16px;
  border: none;
  letter-spacing: 0.05em;
}

.btn-launch svg {
  margin-right: 3px;
  transform: rotate(30deg);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.btn-launch span {
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.btn-launch:hover svg {
  transform: translateX(5px) rotate(90deg);
}

.btn-launch:hover span {
  transform: translateX(7px);
}

.btn-block {
  width: 100%;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ============================================= */
/*  REVEAL ANIMATION SYSTEM                      */
/* ============================================= */

[data-reveal] {
  opacity: 0;
  /* Animate only opacity/transform. A blanket `transition: all` on glass
     surfaces (backdrop-filter) forces the compositor to re-evaluate every
     property each frame, which can drop the element's paint mid-transition. */
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

[data-reveal="up"] {
  transform: translateY(40px);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="scale"] {
  transform: scale(0.92);
}

[data-reveal="slide-left"] {
  transform: translateX(-40px);
}

[data-reveal="slide-right"] {
  transform: translateX(40px);
}

[data-reveal].in {
  opacity: 1;
  transform: translate(0) scale(1);
}

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

.hero {
  position: relative;
  z-index: 1;
  padding: 0;
  background: transparent;
}

.hero-pin {
  position: relative;
  padding-top: 6%;
  padding-bottom: 24px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 82% 12%, rgba(230, 203, 184, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 12% 88%, rgba(118, 26, 2, 0.07) 0%, transparent 50%),
    linear-gradient(180deg, #fbf0f6 0%, #ffffff 100%);
}

.hero-pin::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(251, 240, 246, 0.72) 0%, rgba(251, 240, 246, 0.25) 35%, rgba(251, 240, 246, 0.25) 65%, rgba(251, 240, 246, 0.72) 100%);
  pointer-events: none;
}

.hero-pin .container {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(16px, 4vw, 48px);
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  width: 100%;
}

/* ----- Left content column ----- */
.hero-main {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding-top: 24px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-text);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-radius: 20px;
  background: var(--primary-subtle);
  border: 1px solid rgba(118, 26, 2, 0.1);
}

.hero-title {
  font-size: clamp(32px, 3.8vw, 64px);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.08;
  letter-spacing: -1.5px;
  margin-bottom: var(--space-lg);
}

.hero-title-accent {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0px;
  margin-bottom: 32px;
  width: 100%;
}

.hero-sub {
  width: 100%;
  max-width: 100%;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.65;
  color: #57200e;
  margin-bottom: 0;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}

/* ----- Capability cards ----- */
.hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative;
  z-index: 5;
  width: 100%;
  margin-top: 20px;
}

.hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 170px;
  padding: 18px 16px 50px;
  box-shadow: 0px 0px 0px 12px #fdf0f0;
  background-color: #fdf0f0c2;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  will-change: transform;
  border-radius: var(--radius-lg);
  border: var(--glass-border);
  overflow: hidden;
}

.hero-card-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 1px;
}

.hero-card-tag {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark-secondary);
  letter-spacing: -0.3px;
}

.hero-card-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--dark-muted);
}

.hero-card-icon {
  position: absolute;
  right: 16px;
  bottom: 16px;
  color: var(--primary);
  opacity: 0.85;
}

.hero-card.is-active {
  border-color: var(--primary);
  box-shadow: 0px 0px 0px 12px #fdf0f0, 0 0 0 2px var(--primary);
}

/* ----- Right media column ----- */
.hero-media {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero-frame {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(rgba(118, 26, 2, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 26, 2, 0.05) 1px, transparent 1px),
    linear-gradient(160deg, #f8ecef 0%, #efe0e2 55%, #ead7da 100%);
  background-size: 34px 34px, 34px 34px, 100% 100%;
  border: 1px solid rgba(118, 26, 2, 0.14);
  box-shadow: var(--shadow-glass);
}

.hero-fill {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
}

.hero-fill-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.hero-fill-image.active {
  opacity: 1;
}

.hero-inset {
  position: absolute;
  right: 18px;
  bottom: 74px;
  z-index: 2;
  width: 132px;
  height: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  border-radius: 16px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: var(--glass-border);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
}

.hero-inset-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary-text);
}

/* ----- Hotspot pills ----- */
.hero-hotspot {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dark-secondary);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(118, 26, 2, 0.14);
  border-radius: 30px;
  box-shadow: var(--shadow-glass);
  white-space: nowrap;
}

.hero-hotspot-top {
  top: 20px;
  left: 20px;
}

.hero-hotspot-bottom {
  bottom: 74px;
  left: 20px;
}

.hotspot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.dot-green {
  background: #2e8b57;
  box-shadow: 0 0 0 4px rgba(46, 139, 87, 0.18);
  animation: livePulse 2s var(--ease-out) infinite;
}

.dot-terracotta {
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(118, 26, 2, 0.15);
}

/* ----- Attribute badges ----- */
.hero-badges {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(35, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-badges span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

@keyframes livePulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.7);
    opacity: 0.7;
  }
}

/* ----- 3-image horizontal layout (1000px–1240px) ----- */
@media (min-width: 1000px) and (max-width: 1239px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: clamp(24px, 3vw, 40px);
  }

  .hero-media {
    width: 100%;
    /* padding: 1%; */
    margin-bottom: 2%;
  }

  .hero-frame {
    max-width: 100%;
    aspect-ratio: auto;
    height: auto;
  }

  .hero-fill {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 1%;
    position: relative;
    overflow: visible;
  }

  .hero-fill-image {
    position: relative;
    flex: 1;
    width: auto;
    height: auto;
    min-width: 0;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    opacity: 1;
    transition: none;
    pointer-events: auto;
    border-radius: 8px;
    border: 1px solid rgba(118, 26, 2, 0.1);
  }
}

/* ----- Desktop overlap layout (two-column hero) ----- */
@media (min-width: 1240px) {

  .hero-layout {
    grid-template-columns: 7fr 5fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
  }

  .hero-main {
    grid-column: 1;
    grid-row: 1;
    z-index: 4;
    min-width: 0;
  }

  .hero-sub-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    /* gap: clamp(16px, 2vw, 32px); */
    gap: 10px;
    position: relative;
  }

  .hero-sub {
    flex: 0 0 40%;
    max-width: 40%;
    align-self: center;
    margin-bottom: 0;
  }

  .hero-cards {
    flex: 1 1 auto;
    min-width: 0;
    width: calc(100% + clamp(40px, 6vw, 100px));
    margin-right: calc(-1 * clamp(40px, 6vw, 100px));
    z-index: 10;
    position: relative;
  }

  .hero-media {
    grid-column: 2;
    grid-row: 1;
    z-index: 2;
    align-self: center;
    position: relative;
    width: 90%;
    margin-left: 10%;
  }

  .hero-frame {
    max-width: 500px;
    aspect-ratio: 4 / 5;
    max-height: 80vh;
  }

  .hero-hotspot-top {
    left: auto;
    right: 20px;
  }
}


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

.hero-marquee-section {
  position: relative;
  z-index: 1;
  margin-top: -1px;
}

.hero-marquee {
  padding: 18px 0;
  background: linear-gradient(90deg,
      rgba(230, 203, 184, 0.6) 0%,
      rgba(251, 240, 246, 0.92) 50%,
      rgba(230, 203, 184, 0.6) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform;
  border-top: 1px solid rgba(118, 26, 2, 0.1);
  border-bottom: 1px solid rgba(118, 26, 2, 0.1);
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 32px;
  animation: marqueeScroll 40s linear infinite;
  width: max-content;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.m-dot {
  color: var(--primary);
  opacity: 0.4;
}

@keyframes marqueeScroll {
  to {
    transform: translateX(-50%)
  }
}

/* ============================================= */
/*  SECTIONS — Shared Styles                     */
/* ============================================= */

section {
  position: relative;
  z-index: 1;
  /* padding: var(--space-5xl) 0; */
}

section+section {
  padding-top: 0;
  padding-bottom: 0;
}

#hero {
  padding-bottom: 0;
}

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

/* ============================================= */
/*  WORK / DEPLOYMENTS — Glass Cards             */
/*  (< 1025px: grid + sticky stack)              */
/*  (>= 1025px: 3D fanned deck)                  */
/* ============================================= */

.work {
  background: radial-gradient(ellipse at 50% -5%, rgb(241 196 164 / 45%) 0%, #00000003 60%), linear-gradient(180deg, #fff3f8 0%, #ffe6ec 100%);
  position: relative;
}

/* ===================== */
/*  ORIGINAL GRID LAYOUT */
/*  (default, < 1025px)  */
/* ===================== */
.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.work-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  will-change: transform;
  border-radius: var(--radius-lg);
  border: var(--glass-border);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.work-card-inner {
  display: contents;
}

.work-card-glow {
  display: none;
}

.work-card-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(230, 203, 184, 0.5), rgba(118, 26, 2, 0.06));
}

.work-card-art {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-card-art img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .work-card-art img {
    object-fit: contain;
  }
}

.work-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--primary-text);
  background: rgba(118, 26, 2, 0.1);
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.work-card-body {
  padding: 0;
}

.work-card-body h3 {
  font-family: var(--font-sans);
  font-size: clamp(19px, 1.8vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--dark);
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 34px);
  border-bottom: 1px solid rgba(118, 26, 2, 0.12);
  margin-bottom: 0;
  transition: color 0.4s var(--ease-out);
}

@media (min-width: 1281px) {
  .work-card:hover .work-card-body h3 {
    color: var(--primary);
  }
}

.work-card-body p {
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  line-height: 1.7;
  color: var(--dark-secondary);
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 34px);
  border-bottom: 1px solid rgba(118, 26, 2, 0.12);
  margin-bottom: 0;
}

/* Work card meta */
.work-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: clamp(14px, 1.6vw, 20px) clamp(20px, 2.2vw, 34px);
}

.meta-stack {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--dark-muted);
}

.meta-perf {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  padding: 5px 11px;
  border: 1px solid rgba(118, 26, 2, 0.28);
  border-radius: 3px;
}

/* Work card tag/index/category */
.work-card-tag {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 34px);
  border-bottom: 1px solid rgba(118, 26, 2, 0.12);
}

.work-card-index {
  color: var(--terracotta);
  letter-spacing: 1px;
  font-weight: 500;
}

.work-card-cat {
  color: var(--primary);
  transition: color 0.35s var(--ease-out);
}

@media (min-width: 1281px) {
  .work-card:hover .work-card-cat {
    color: var(--primary-hover);
  }
}

/* ---- wca decorative overlays ---- */
.wca-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(118, 26, 2, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 26, 2, 0.04) 1px, transparent 1px);
  background-size: 16px 16px;
}

.wca-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(118, 26, 2, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
}

.wca-arrow {
  position: relative;
  z-index: 1;
  opacity: 0.5;
  transition: opacity 0.3s var(--ease-out);
}

@media (min-width: 1281px) {
  .work-card:hover .wca-arrow {
    opacity: 0.8;
  }
}

.wca-lines {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.wca-lines svg {
  width: 100%;
  height: 100%;
}

.wca-nodes {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.wca-nodes svg {
  width: 100%;
  height: 100%;
}

.wca-code {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.wca-code svg {
  width: 100%;
  height: 100%;
}

.wca-arrow svg circle {
  stroke: rgba(118, 26, 2, 0.3);
}

.wca-arrow svg path {
  stroke: var(--primary);
}

/* ---- Responsive Grid (original) ---- */
@media(max-width:1100px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:700px) {
  .work-grid {
    grid-template-columns: 1fr;
  }


  .failure-section-header {
    flex-direction: column;
  }

  .section-head,
  .section-head,
  .p-steps-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

/* ============================================= */
/*  STICKY STACK MODE                           */
/*  (JS adds .sticky-stack to grids with 2+     */
/*  cards — stacked card cascade on scroll)     */
/* ============================================= */
.work-grid.sticky-stack {
  display: block;
  /* Runway below the last card. Without this the grid is exactly as tall as the
     sum of its cards, every card pins at the same instant and none of them can
     travel — they scroll off together instead of stacking. */
  padding-bottom: 40vh;
  min-height: 100vh;
}

.work-grid.sticky-stack .work-card {
  position: sticky;
  top: 120px;
  width: 92%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 7fr 3fr;
  grid-template-areas: "media info";
  align-items: stretch;
  padding: 1%;
}

.work-grid.sticky-stack .work-card-inner {
  display: contents;
}

.work-grid.sticky-stack .work-card-visual {
  grid-area: media;
  border-radius: 18px;
  min-height: clamp(340px, 42vw, 500px);
  overflow: hidden;
  border-right: 1px solid rgba(118, 26, 2, 0.16);
}

.work-grid.sticky-stack .work-card-body {
  grid-area: info;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.work-grid.sticky-stack .work-card+.work-card {
  margin-top: 24px;
}

/* Ascending paint order so each card covers the one above it, mirroring
   .work-list.sticky-stack. Without this the cards share z-index: auto and
   paint in DOM order instead of stacking. Capped at 5 — a 6th card would need
   an explicit z-index or it would paint under the 5th. */
.work-grid.sticky-stack .work-card:nth-child(1) {
  z-index: 1;
}

.work-grid.sticky-stack .work-card:nth-child(2) {
  z-index: 2;
}

.work-grid.sticky-stack .work-card:nth-child(3) {
  z-index: 3;
}

.work-grid.sticky-stack .work-card:nth-child(4) {
  z-index: 4;
}

.work-grid.sticky-stack .work-card:nth-child(5) {
  z-index: 5;
}

@media(max-width:1100px) {
  .work-grid.sticky-stack .work-card {
    max-width: 900px;
    top: 100px;
  }

  .work-grid.sticky-stack .work-card+.work-card {
    margin-top: 20px;
  }
}

@media(max-width:925px) {
  .work-grid.sticky-stack .work-card {
    width: 95%;
  }
}

@media(max-width:700px) {
  .work-grid.sticky-stack {
    padding-bottom: 30vh;
  }

  .work-grid.sticky-stack .work-card {
    max-width: 100%;
    top: 80px;
    grid-template-columns: 1fr;
    grid-template-areas: "media" "info";
  }

  .work-grid.sticky-stack .work-card+.work-card {
    margin-top: 16px;
  }
}

@media(max-width:500px) {
  .work-grid.sticky-stack .work-card {
    top: 70px;
  }

  .work-grid.sticky-stack .work-card+.work-card {
    margin-top: 12px;
  }
}

/* ==========================================================
   WORK-LIST STICKY STACK — Card cascade on scroll
   (Mirrors .work-grid.sticky-stack behaviour from About_Us)
   ========================================================== */

.work-list.sticky-stack {
  display: block;
  /* Runway below the last card. Each card pins over the one below it, and the
     final card always gets less travel than the rest (nothing follows it), so
     this needs to be generous or card 3 barely stacks at all. */
  /* padding-bottom: 40vh; */
  min-height: 100vh;
  margin: 4% 0;
  /* margin-bottom: 100px; */
}

.work-list.sticky-stack .work-showcase {
  position: sticky;
  top: 120px;
  width: 92%;
  /* max-width: 1100px; */
  margin: 0 auto;
}

.work-list.sticky-stack .work-showcase+.work-showcase {
  margin-top: 24px;
}

.work-list.sticky-stack .work-showcase:nth-child(1) {
  z-index: 1;
}

.work-list.sticky-stack .work-showcase:nth-child(2) {
  z-index: 2;
}

.work-list.sticky-stack .work-showcase:nth-child(3) {
  z-index: 3;
}

.work-list.sticky-stack .work-showcase:nth-child(4) {
  z-index: 4;
}

.work-list.sticky-stack .work-showcase:nth-child(5) {
  z-index: 5;
}

@media(max-width:1100px) {
  .work-list.sticky-stack .work-showcase {
    /* max-width: 640px; */
    top: 100px;
  }

  .work-list.sticky-stack .work-showcase+.work-showcase {
    margin-top: 20px;
  }
}

@media(max-width:925px) {
  .work-list.sticky-stack .work-showcase {
    width: 95%;
  }
}

@media(max-width:780px) {
  .work-list.sticky-stack {
    /* Scaled down from 40vh, but still needs real runway or the last
       card never gets to stack. */
    /* padding-bottom: 30vh; */
  }

  .work-list.sticky-stack .work-showcase {
    max-width: 100%;
    top: 80px;
  }

  .work-list.sticky-stack .work-showcase+.work-showcase {
    margin-top: 16px;
  }
}

@media(max-width:500px) {
  .work-list.sticky-stack .work-showcase {
    top: 70px;
  }

  .work-list.sticky-stack .work-showcase+.work-showcase {
    margin-top: 12px;
  }
}

/* ==========================================================
   WORK / DEPLOYMENTS — Editorial Showcase List
   Large visual area + vertical information index.
   Theme derived from #761a02 (primary dark red).
   ========================================================== */

.work .container {
  padding: 4% clamp(16px, 4vw, 48px);
}

.work-list {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 88px);
}

/* ---- Editorial card: media (68-72%) + info (28-32%) ---- */
.work-showcase {
  padding: 1%;
  display: grid;
  grid-template-columns: 7fr 3fr;
  grid-template-areas: "media info";
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(118, 26, 2, 0.16);
  border-radius: 18px;
  background: var(--highlight);
  box-shadow: none;
  transition: all 0.4s var(--ease-glass);
}

/* ---- Media area ---- */
.work-showcase-media {
  grid-area: media;
  border-radius: 18px;
  margin: 0;
  min-height: clamp(340px, 42vw, 500px);
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, var(--soft-peach) 0%, var(--light-pink) 100%);
  border-right: 1px solid rgba(118, 26, 2, 0.16);
}

.work-showcase-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 30% 18%, rgba(253, 244, 242, 0.16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(118, 26, 2, 0.05) 0%, transparent 45%, rgba(118, 26, 2, 0.08) 100%);
}

.work-showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.94) contrast(1.02);
  transition: transform 0.6s var(--ease-glass), filter 0.6s var(--ease-glass);
}

/* ---- Info area ---- */
.work-showcase-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  min-width: 0;
}

/* Tag / category block */
.work-showcase-tag {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 34px);
  border-bottom: 1px solid rgba(118, 26, 2, 0.12);
}

.work-showcase-index {
  color: var(--terracotta);
  letter-spacing: 1px;
  font-weight: 500;
}

.work-showcase-cat {
  color: var(--primary);
  transition: color 0.35s var(--ease-out);
}

/* Glow effect - similar to success-stories work cards */
.work-showcase-glow {
  position: absolute;
  inset: -40%;
  z-index: 0;
  border-radius: 24px;
  background: radial-gradient(ellipse at center, var(--primary-glow) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-glass), transform 0.5s var(--ease-glass);
  transform: scale(0.8);
}

.work-showcase {
  position: relative;
  z-index: 1;
}

/* Title block */
.work-showcase-title {
  font-family: var(--font-sans);
  font-size: clamp(19px, 1.8vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--dark);
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 34px);
  border-bottom: 1px solid rgba(118, 26, 2, 0.12);
  transition: color 0.4s var(--ease-out);
}

/* Description block */
.work-showcase-desc {
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  line-height: 1.7;
  color: var(--dark-secondary);
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 34px);
  border-bottom: 1px solid rgba(118, 26, 2, 0.12);
}

/* Metadata block */
.work-showcase-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: clamp(14px, 1.6vw, 20px) clamp(20px, 2.2vw, 34px);
}

.work-showcase-stack {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--dark-muted);
}

.work-showcase-perf {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  padding: 5px 11px;
  border: 1px solid rgba(118, 26, 2, 0.28);
  border-radius: 3px;
  background: var(--light-pink);
  transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

/* ---- Tablet: rebalance ratio, keep two columns ---- */
@media (max-width: 1024px) {
  .work-showcase {
    grid-template-columns: 3fr 2fr;
    border-radius: 14px;
  }

  .work-showcase-media {
    min-height: 300px;
  }
}

/* ---- Mobile: vertical composition, image first ---- */
@media (max-width: 1000px) {
  .work-showcase {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "info";
    border-radius: 14px;
  }

  .work-showcase-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-right: none;
    border-bottom: 1px solid rgba(118, 26, 2, 0.16);
  }

  .work-showcase-info {
    justify-content: flex-start;
  }
}


/* ============================================= */
/*  PROBLEM SECTION                             */

/* ============================================= */
/*  PROBLEM SECTION                             */
/* ============================================= */

.problem {
  background: radial-gradient(at 8% 50%, rgb(255 180 160 / 66%) 0%, rgb(255 255 255 / 16%) 55%), radial-gradient(at 95% 70%, rgba(254, 228, 211, 0.67) 0%, rgba(213, 142, 142, 0.08) 55%);
}

.section-figure {
  display: flex;
  /* padding: 60px 0px 0px 0px; */
  justify-content: center;
  /* margin-bottom: 48px; */
}

.section-figure img {
  /* max-width: 320px; */
  height: auto;
  width: 100%;
}

.sf-network line {
  stroke: rgba(118, 26, 2, 0.15);
}

.sf-node {
  fill: rgba(118, 26, 2, 0.3);
  animation: sfPulse 2s var(--ease-out) infinite;
}

.sf-network-dead line {
  stroke: rgba(118, 26, 2, 0.28);
}

.sf-nodes-dead circle {
  fill: rgba(118, 26, 2, 0.22);
}

.sf-crack {
  stroke: var(--primary);
}

.sf-crack-ghost {
  stroke: var(--primary);
}

.sf-node-d {
  fill: var(--primary);
}

.sf-d-1 {
  animation: sfPulse 2s var(--ease-out) 0.5s infinite
}

.sf-d-2 {
  animation: sfPulse 2s var(--ease-out) 1s infinite
}

@keyframes sfPulse {

  0%,
  100% {
    r: 3;
    opacity: 1
  }

  50% {
    r: 4.5;
    opacity: 0.6
  }
}

.problem-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* gap: 48px; */
  padding: 50px clamp(20px, 5vw, 100px) 0px clamp(20px, 5vw, 100px);
  min-width: 0;
}

.problem-layout-bg {
  min-height: 50vh;
  padding: 0px clamp(20px, 4vw, 50px);
  margin: 0px 0px 50px clamp(0px, 2.5vw, 50px);
}

@media (min-width: 900px) {
  .problem-layout-bg::before {
    content: '';
    background-image: url("assets/images/marketplacev.avif");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    order: 1;
    width: 40%;
    flex-shrink: 0;
    min-height: 450px;
  }
}

@media (min-width: 900px) {
  .problem-layout-bg {
    display: flex;
    align-items: center;
    gap: 0;
    background-image: none;
  }

  .problem-layout-bg::before {
    content: '';
    background-image: url("assets/images/marketplacev.avif");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    order: 1;
    width: 40%;
    flex-shrink: 0;
    min-height: 450px;
  }

  .problem-layout-bg .problem-copy {
    flex: 1;
    order: 1;
  }


}

@media (max-width: 700px) {
  .problem-layout-bg {
    background-image: none;
  }

  h2 {
    text-align: center;
  }


  .problem-layout-bg .problem-copy {
    grid-column: auto;
    justify-self: stretch;
    align-self: center;
    padding: 4%;
  }
}

@media (min-width: 700px) {
  .problem-copy {
    padding: 4%;
  }
}

.problem-copy {
  background: var(--glass-bg);
  background-color: rgba(230, 203, 184, 0.35);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  will-change: transform;
  border: var(--glass-border);
  transition: all 0.3s var(--ease-out);
  border-radius: var(--radius);
  /* margin-left: 5%; */
}

.problem-copy p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--dark-secondary);
  margin-bottom: 20px;
}

.problem-copy strong {
  color: var(--dark);
  font-weight: 600;
}

.problem-steps {
  width: 100%;
  margin: 0;
  padding: var(--space-2xl) clamp(16px, 3vw, 50px) 50px clamp(16px, 3vw, 50px);
  background-image: url('assets/images/deliberate3.avif');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

/* @media (max-width: 1200px) { */
.problem-steps {
  background-image: none;
}

@media (min-width: 700px) {
  .p-steps-timeline {
    grid-template-columns: 70% 30%;
  }

  .arch-desc {
    text-align: center;
  }
}

.p-steps-timeline {
  display: grid;
  /* grid-template-columns: 70% 30%; */
  gap: 0;
  max-width: 100%;
  padding: 0;
}

.p-steps-timeline::before {
  display: none;
}

.p-step {
  grid-column: 1;
}

.p-steps-timeline::after {
  content: '';
  background-image: url('assets/images/deliberate3.avif');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  grid-column: 2;
  grid-row: 1 / -1;
  min-height: auto;
}

/* } */



.p-steps-head {
  margin-bottom: var(--space-2xl);
  margin-left: var(--radius-xl);
  text-align: left;
  /* max-width: 720px; */
}

.p-steps-head h3 {
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.5px;
}

.p-steps-timeline {
  position: relative;
  padding: 0 28px;
  /* max-width: 720px; */
}

.p-steps-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 73px;
  width: 1px;
  background: linear-gradient(180deg, rgba(118, 26, 2, 0.15), rgba(118, 26, 2, 0.05));
}

.p-step {
  position: relative;
  display: flex;
  gap: var(--space-lg);
  padding: 20px 20px;
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  will-change: transform;
  border: var(--glass-border);
  transition: all 0.3s var(--ease-out);
}

.p-step+.p-step {
  margin-top: var(--space-2xl);
}

@media (min-width: 1281px) {
  .p-step:hover {
    border-color: rgba(118, 26, 2, 0.15);
    box-shadow: var(--shadow-glass);
    transform: translateX(4px);
  }
}

.p-step-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.p-step-num>span {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-text);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform;
  border-radius: 50%;
  border: var(--glass-border);
  box-shadow: var(--shadow-glass);
  z-index: 1;
}

.p-step-line {
  width: 1px;
  flex: 1;
  background: linear-gradient(180deg, rgba(118, 26, 2, 0.15), rgba(118, 26, 2, 0.05));
}

.p-step:last-child .p-step-line {
  display: none;
}

.p-step-content {
  flex: 1;
  padding-bottom: 8px;
  min-width: 0;
}

.p-step-content h4 {
  margin-bottom: var(--space-xs);
}

.p-step-content p {
  font-size: 15px;
  color: var(--dark-secondary);
  line-height: 1.6;
}

.problem-diagram {
  max-width: 600px;
  margin: 0 auto;
}

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

.diagram {
  position: relative;
  padding: 32px 28px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  will-change: transform;
  border-radius: var(--radius-lg);
  border: var(--glass-border);
  box-shadow: var(--shadow-glass);
}

.diagram-layer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.diagram-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-muted);
  flex-shrink: 0;
  width: 120px;
}

.diagram-bars {
  display: flex;
  gap: 8px;
  flex: 1;
}

.d-bar {
  flex: 1;
  height: 10px;
  background: rgba(118, 26, 2, 0.06);
  border-radius: 6px;
  overflow: hidden;
}

.d-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  border-radius: 6px;
  transition: width 1.2s var(--ease-out);
}

.d-bar i {
  animation: barGrow 1.2s var(--ease-out) 0.3s forwards
}

@keyframes barGrow {
  to {
    width: var(--w)
  }
}

.diagram-connector {
  padding: 4px 0;
}

.diagram-connector svg line {
  stroke: rgba(118, 26, 2, 0.15);
}

.diagram-connector svg circle {
  fill: var(--primary);
}

.d-pipe {
  display: block;
  flex: 1;
  height: 6px;
  background: rgba(118, 26, 2, 0.06);
  border-radius: 4px;
}

.diagram-core {
  width: 100%;
  height: 24px;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  border-radius: 8px;
  opacity: 0.6;
  position: relative;
  overflow: hidden;
}

.diagram-core::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: coreShine 3s ease infinite;
}

@keyframes coreShine {
  to {
    left: 200%
  }
}

.diagram-fault {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
}

.fault-line {
  stroke: var(--primary) !important;
  stroke-dasharray: 4 6;
  animation: faultDash 20s linear infinite;
}

@keyframes faultDash {
  to {
    stroke-dashoffset: -200
  }
}

.fault-dot {
  fill: var(--primary) !important;
  animation: faultPulse 2s var(--ease-out) infinite;
}

@keyframes faultPulse {

  0%,
  100% {
    opacity: 1;
    r: 3
  }

  50% {
    opacity: 0.3;
    r: 5
  }
}

/* ============================================= */
/*  PHILOSOPHY — Glass Timeline                  */
/* ============================================= */

.philosophy {
  padding: 4% 0;
  background: radial-gradient(at 8% 20%, rgb(222 144 124 / 55%) 0%, #00000004 55%), radial-gradient(at 95% 70%, rgb(255 255 255 / 52%) 0%, #f99c9c30 55%);
}


.philosophy .section-head {
  text-align: center;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 var(--space-3xl);
}

.philosophy .section-head .section-desc {
  margin: 0;
}

.phil-layout {
  display: flex;
  gap: 32px;
  /* margin: 0 0 64px; */
}

.phil-timeline {
  flex: 0 0 60%;
  max-width: 60%;
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  min-width: 0;
}

@media (min-width: 700px) {
  .right-side-timeline {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 701px) {
  .right-side-timeline {
    display: none;
  }
}

.right-side-timeline-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.phil-item {
  padding: 12px 10px;
  border: 1px solid #4504041e;
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: blur(2px);
  display: flex;
  gap: var(--space-lg);
  position: relative;
  /* Explicit list, not `all` - see the note on [data-reveal]. Covers the
     reveal (opacity/transform) plus the hover lift on desktop. */
  transition: opacity 0.5s var(--ease-glass), transform 0.5s var(--ease-glass),
    box-shadow 0.5s var(--ease-glass), border-color 0.5s var(--ease-glass);
}

@media (min-width: 1281px) {
  .phil-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glass-hover);
    border-color: rgba(118, 26, 2, 0.15);
  }
}

.phil-item+.phil-item {
  box-shadow: 0 9px 25px rgb(118 16 2 / 28%);
  margin-top: var(--space-2xl);
}

.phil-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.phil-num>span {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-text);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform;
  border-radius: 50%;
  border: var(--glass-border);
  box-shadow: var(--shadow-glass);
}

.phil-line-v {
  width: 1px;
  flex: 1;
  background: linear-gradient(180deg, rgba(118, 26, 2, 0.15), rgba(118, 26, 2, 0.05));
}

.phil-item:last-child .phil-line-v {
  display: none;
}

.phil-content {
  flex: 1;
  padding-bottom: 8px;
  min-width: 0;
}

.phil-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.phil-tag {
  font-size: 18px;
  font-weight: 1000;
  font-family: var(--font-mono);
  color: var(--primary-text);
  padding: 2px 12px;
  background: rgb(118 26 2 / 29%);
  border-radius: 5px;
  letter-spacing: 0px;
}

.phil-head h3 {
  font-size: 20px;
}

.phil-content>p {
  font-size: 16px;
  font-weight: 400;
  color: var(--dark-secondary);
  line-height: 1.7;
}

.phil-arch {
  max-width: 500px;
  margin: 0 auto;
}

.arch {
  /* display: flex; */
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 24px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform;
  border-radius: var(--radius-lg);
  border: var(--glass-border);
  box-shadow: var(--shadow-glass);
}

.arch-layer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: rgba(118, 26, 2, 0.06);
  transition: all 0.3s var(--ease-out);
}

@media (min-width: 1281px) {
  .arch-layer:hover {
    background: var(--primary-subtle);
  }
}

.arch-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-muted);
  flex-shrink: 0;
  width: 100px;
}

.arch-blocks {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}

.arch-blocks span {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  opacity: 0.3;
  transition: all 0.3s var(--ease-out);
}

.arch-l1 .arch-blocks {
  justify-content: flex-start
}

.arch-l1 .arch-blocks span:nth-child(1) {
  flex: 4;
  max-width: 50px
}

.arch-l1 .arch-blocks span:nth-child(2) {
  flex: 5;
  max-width: 60px
}

.arch-l1 .arch-blocks span:nth-child(3) {
  flex: 3.5;
  max-width: 45px
}

.arch-l2 .arch-blocks span:nth-child(1) {
  flex: 4.5;
  max-width: 55px
}

.arch-l2 .arch-blocks span:nth-child(2) {
  flex: 5.5;
  max-width: 65px
}

.arch-l2 .arch-blocks span:nth-child(3) {
  flex: 4;
  max-width: 50px
}

.arch-l2 .arch-blocks span:nth-child(4) {
  flex: 3;
  max-width: 40px
}

.arch-l3 .arch-blocks span:nth-child(1) {
  flex: 6;
  max-width: 70px
}

.arch-l3 .arch-blocks span:nth-child(2) {
  flex: 4;
  max-width: 50px
}

.arch-l4 .arch-blocks span:nth-child(1) {
  flex: 3.5;
  max-width: 45px
}

.arch-l4 .arch-blocks span:nth-child(2) {
  flex: 5;
  max-width: 60px
}

.arch-l4 .arch-blocks span:nth-child(3) {
  flex: 4.5;
  max-width: 55px
}

.arch-l4 .arch-blocks span:nth-child(4) {
  flex: 3;
  max-width: 40px
}

.arch-l4 .arch-blocks span:nth-child(5) {
  flex: 4;
  max-width: 50px
}

@media (min-width: 1281px) {
  .arch-layer:hover .arch-blocks span {
    opacity: 0.5;
  }
}

.arch-arrow {
  color: rgba(118, 26, 2, 0.2);
  height: 12px;
}

.arch-arrow svg {
  display: block;
}

/* ============================================= */
/*  FAILURES — Glass Cards with Bars             */
/* ============================================= */

.failures {
  padding: 4% 0;
  background: radial-gradient(ellipse at 50% 100%, rgb(239 180 140 / 44%) 0%, #00000003 60%), linear-gradient(183deg, #f7e7f0 0%, #ffd4d0 100%);
}

.failures .section-head {
  display: flex;
  align-items: center;
  text-align: left;
  padding: 0 var(--space-xl);
}


.fail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  padding: 0 4% 4%;
}

.fail-card h3 {
  font-size: 18px;
  margin-bottom: var(--space-sm);
}

.fail-card>p {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-muted);
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}

.fail-card {
  padding: var(--space-xl) var(--space-lg);
  background: linear-gradient(145deg, rgb(251 240 246 / 4%) 0%, rgb(251 240 246 / 9%) 34%, rgb(229 189 160 / 0%) 58%, rgb(251 240 246 / 0%) 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  will-change: transform;
  border-radius: var(--radius-lg);
  border: var(--glass-border);
  box-shadow: var(--shadow-glass);
  transition: all 0.5s var(--ease-glass);
  position: relative;
  overflow: hidden;
}

.fail-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pct-clr, var(--primary)), transparent);
  opacity: 0.5;
  z-index: 2;
}

.fail-card--bg-1>*:not(.fail-card-bg):not(.fail-card-overlay),
.fail-card--bg-2>*:not(.fail-card-bg):not(.fail-card-overlay),
.fail-card--bg-3>*:not(.fail-card-bg):not(.fail-card-overlay),
.fail-card--bg-4>*:not(.fail-card-bg):not(.fail-card-overlay) {
  position: relative;
  z-index: 1;
}

.fail-card-bg {
  position: absolute;
  inset: 0;
  background: center/contain no-repeat;
  /* filter: blur(2px) brightness(1.1) saturate(0.7) drop-shadow(2px 4px 6px black);
  z-index: 0; */
}

.fail-card-overlay {
  position: absolute;
  inset: 0;
  background: rgb(255 245 245 / 60%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  z-index: 0;
}

/* 
.fail-card--bg-1 .fail-card-bg {
  background-image: url("assets/images/system fails card 1.avif");
}

.fail-card--bg-2 .fail-card-bg {
  background-image: url("assets/images/system fails card 2.avif");
}

.fail-card--bg-3 .fail-card-bg {
  background-image: url("assets/images/system fails card 3.avif");
}

.fail-card--bg-4 .fail-card-bg {
  background-image: url("assets/images/system fails card 4.avif");
} */
@media (min-width: 1281px) {
  .fail-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glass-hover);
    border-color: rgba(118, 26, 2, 0.15);
  }
}

.fail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fail-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-muted);
}

.fail-pct {
  font-size: 28px;
  font-weight: 700;
  color: var(--pct-clr);
  letter-spacing: -1px;
}



.fail-bar {
  height: 5px;
  background: rgba(118, 26, 2, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.fail-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--pct-clr, var(--primary)), var(--primary));
  border-radius: 4px;
  transition: width 1.2s var(--ease-out);
}

.fail-bar i {
  animation: barGrow 1.2s var(--ease-out) 0.3s forwards
}

.fail-bar-label {
  font-size: 12px;
  color: var(--dark-muted);
  font-weight: 500;
}

/* ============================================= */
/*  CONTACT — Glass Form                         */
/* ============================================= */

.contact {
  margin: -2% 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 0 4%;
  /* padding: var(--space-4xl) var(--space-xl); */
  background: url("assets/images/bg.avif") center/contain no-repeat;
}

.contact-layout {
  position: relative;
  z-index: 1;
}

.contact-layout {
  display: grid;
  padding-bottom: var(--space-5xl);
  padding-top: var(--space-5xl);
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
  min-width: 0;
}



@media (max-width: 1100px) {
  .contact-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

.contact-copy {
  min-width: 0;
}

.contact-copy h2 {
  margin-bottom: 20px;
}

.contact-copy>p {
  font-size: 17px;
  color: var(--dark-muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

.contact-channels {
  display: flex;
  flex-direction: column;
  min-width: 90%;
  max-width: 90%;
  gap: var(--space-sm);
}

.contact-channel {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform;
  border-radius: var(--radius);
  border: var(--glass-border);
  transition: all 0.3s var(--ease-out);
}

@media (min-width: 1281px) {
  .contact-channel:hover {
    border-color: rgba(118, 26, 2, 0.15);
    box-shadow: var(--shadow-glass);
    transform: translateX(4px);
  }
}

.cc-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  /* background: var(--primary-subtle); */
  color: var(--primary);
  flex-shrink: 0;
  transition: all 0.3s var(--ease-out);
}

.cc-icon img {
  padding: 5%;
  width: 100%;
  height: 100%;
}

@media (min-width: 1281px) {
  .contact-channel:hover .cc-icon {
    background: var(--primary-subtle);
    color: var(--primary);
  }
}

.cc-text {
  display: flex;
  text-align: left;
  flex-direction: column;
  gap: 2px;
}

.cc-label {
  font-size: 12px;
  color: var(--dark-muted);
  font-weight: 500;
}

.cc-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
}

.contact-form {
  padding: var(--space-3xl);
  background-color: #f1bcc294;
  background:
    url("assets/images/border.avif") top right / 50% auto no-repeat,
    var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  will-change: transform;
  perspective: 900px;
  border-radius: var(--radius-lg);
  border: var(--glass-border);
  box-shadow: var(--shadow-glass-lg);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.cf-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(118, 26, 2, 0.06);
}

.cf-icon {
  width: 40px;
  height: auto;
  flex-shrink: 0;
  display: block;
}

.cf-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  animation: indPulse 2s var(--ease-out) infinite;
}

@keyframes indPulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0.3
  }
}

.cf-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--dark);
}

.cf-field {
  position: relative;
  margin-bottom: 20px;
}

.cf-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
}

.cf-req {
  color: var(--primary);
}

.cf-field input,
.cf-field textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--dark);
  background: rgba(251, 240, 246, 0.7);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  will-change: transform;
  border: 1.5px solid rgba(230, 203, 184, 0.65);
  border-radius: var(--radius-sm);
  outline: none;
  box-shadow:
    inset 0 2px 0 rgba(95, 85, 84, 0.12),
    inset 6px 6px 12px rgba(95, 85, 84, 0.12),
    inset -6px -6px 12px rgba(255, 255, 255, 0.55),
    0 3px 6px rgba(60, 20, 10, 0.08);
  transform: translateZ(-6px);
  transition: all 0.3s var(--ease-out);
  font-family: var(--font-sans);
}

.cf-field input:focus,
.cf-field textarea:focus {
  border-color: var(--primary);
  transform: translateZ(0);
  box-shadow:
    inset 0 2px 0 rgba(95, 85, 84, 0.08),
    inset 3px 3px 8px rgba(95, 85, 84, 0.1),
    inset -3px -3px 8px rgba(255, 255, 255, 0.5),
    0 0 0 4px rgba(230, 203, 184, 0.45);
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
  color: rgba(95, 85, 84, 0.55);
}

.cf-field textarea {
  resize: vertical;
  min-height: 90px;
}

.cf-focus {
  display: none;
}

.cf-note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--primary-text);
  font-weight: 500;
  text-align: center;
}

/* ============================================= */
/*  FOOTER — Premium Glass                       */
/* ============================================= */

.footer {
  background: radial-gradient(ellipse at 50% 0%, rgb(255 207 173 / 60%) 0%, #00000000 60%), linear-gradient(180deg, #efefef 0%, #fffeff 100%);

  /* background:
    url("assets/images/footer-bg.avif") right center / auto 100% no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(230, 203, 184, 0.6) 0%, transparent 60%),
    linear-gradient(180deg, #f6e6ec 0%, #fbf0f6 100%); */
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  will-change: transform;
  border-top: 1px solid rgba(118, 26, 2, 0.14);
  /* box-shadow: 0 -8px 32px rgba(118, 26, 2, 0.06); */
  box-shadow: 0 -8px 32px rgb(118 26 2 / 28%);
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  overflow: hidden;
}

.footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(118, 26, 2, 0.06);
}

.footer-brand {
  max-width: 320px;
}

.footer-brand .brand {
  margin-bottom: 8px;
}

.footer-brand>p {
  font-size: 14px;
  color: var(--dark-muted);
  line-height: 1.6;
}

.footer-closing {
  text-align: right;
}

.footer-statement {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a {
  font-size: 14px;
  color: var(--dark-muted);
  transition: all 0.3s var(--ease-out);
  width: fit-content;
}

@media (min-width: 1281px) {
  .footer-col a:hover {
    color: var(--primary-text);
    transform: translateX(4px);
  }
}

.footer-bar {
  border-top: 1px solid rgba(118, 26, 2, 0.06);
  padding: 14px 0;
}

.footer-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--dark-muted);
}

.footer-badge {
  padding: 4px 14px;
  background: var(--primary-subtle);
  border-radius: 6px;
  color: var(--primary-text);
  font-weight: 500;
  font-size: 12px;
  font-family: var(--font-mono);
}

/* ============================================= */
/*  TESTIMONIALS                                  */
/* ============================================= */

.testimonials {
  padding: 4% 4%;
  min-height: 100vh;

  background:
    url("assets/images/partnership.avif") center/cover no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(230, 203, 184, 0.42) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 90%, rgba(118, 26, 2, 0.05) 0%, transparent 50%);
}

@media (max-width: 700px) {
  .testimonials {
    padding: 0 var(--space-xl) 200px;
  }
}

.testimonials-header {
  flex-direction: column;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}

.testimonial-card {
  padding: var(--space-xl) 28px;
  background: #ffd7d71f;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: var(--glass-blur);
  will-change: transform;
  border-radius: var(--radius-lg);
  border: var(--glass-border);
  box-shadow: var(--shadow-glass);
  transition: all 0.4s var(--ease-glass);
  position: relative;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 48px;
  line-height: 1;
  color: var(--primary);
  opacity: 0.15;
  font-weight: 700;
  pointer-events: none;
}

@media (min-width: 1281px) {
  .testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glass-hover);
    border-color: rgba(118, 26, 2, 0.15);
  }
}

.testimonial-card p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--dark-secondary);
  margin-bottom: var(--space-lg);
  font-style: italic;
}

.testimonial-card footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(118, 26, 2, 0.06);
}

.testimonial-card footer strong {
  font-size: 15px;
  color: var(--dark);
}

.testimonial-card footer span {
  font-size: 13px;
  color: var(--dark-muted);
  font-family: var(--font-mono);
}

/* ============================================= */
/*  REDUCED MOTION                               */
/* ============================================= */

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none !important;
  }

  .hero-marquee .marquee-track {
    animation: none;
  }

}

/* ============================================= */
/*  RESPONSIVE — Deeply Adaptive                 */
/*  Breakpoints: 1400 · 1100 · 900 · 700 · 500 · 360 */
/* ============================================= */

/* --- Large Desktops (1400px+) --- */
@media(min-width:1400px) {
  .container {
    max-width: 1380px;
  }

  .hero-title {
    font-size: clamp(36px, 3.8vw, 64px);
  }

  .hero-layout {
    grid-template-columns: 7fr 5fr;
    gap: 36px;
  }

  .hero-cards {
    width: calc(100% + 120px);
    margin-right: -120px;
  }

  .section-head {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    margin-bottom: var(--space-3xl);
  }

  .testimonial-grid {
    max-width: 1000px;
    gap: var(--space-xl);
  }

  .footer-nav {
    gap: 60px;
  }
}

/* --- Extra Large (1600px+) --- */
@media(min-width:1600px) {
  .container {
    /* max-width: 1400px; */
  }

  .hero-title {
    font-size: clamp(36px, 3.8vw, 72px);
  }

  .hero-layout {
    grid-template-columns: 7fr 5fr;
    gap: 48px;
  }
}

/* --- Desktop / Tablet Landscape (max 1100px) --- */
@media(max-width:1100px) {
  .nav-pill {
    padding: 4px 16px;
  }

  .nav-link {
    padding: 8px 10px;
    font-size: 13px;
  }

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

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

  .hero-title {
    font-size: clamp(30px, 4.8vw, 56px);
  }

  h2 {
    font-size: clamp(24px, 3.2vw, 40px);
  }

  .testimonial-grid {
    max-width: 100%;
  }

  .problem-layout {
    /* gap: 32px; */
    padding: 40px clamp(20px, 4vw, 60px) 0;
  }

  .problem-layout-bg {
    padding: 0px clamp(20px, 3vw, 40px);
  }

  .problem-steps {
    padding: var(--space-2xl) clamp(20px, 3vw, 40px) 40px;
  }

  .p-steps-head {
    margin-left: var(--space-xl);
  }

  .work-showcase {
    /* grid-template-columns: 3fr 2fr; */
  }

  .work-showcase-media {
    min-height: 300px;
  }

  .contact-form {
    /* margin: 0 4%; */
    padding: var(--space-2xl) clamp(24px, 3vw, 40px);
  }

  .hero-actions {
    gap: var(--space-sm);
  }
}

/* --- Fixed nav-pill size at 950px+ (static, no zoom scaling) --- */
@media(min-width:950px) {
  .nav-pill {
    flex: 0 0 0 0;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
  }


  .nav-links {
    overflow: visible;
  }

  .nav-link {
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media(max-width:1000px) {
  .nav-inner {
    gap: 12px;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 85vw;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 100px var(--space-lg) var(--space-2xl);
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-max);
    -webkit-backdrop-filter: var(--glass-blur-max);
    will-change: transform;
    border-left: var(--glass-border);
    box-shadow: var(--shadow-glass-lg);
    gap: var(--space-xs);
    transition: right 0.35s var(--ease-glass);
    z-index: 99;
    /* Menu content (all dropdown branches) is far taller than 100dvh, so the
       drawer itself has to scroll. `contain` keeps its scroll from chaining
       to the page behind it. */
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-pill {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    will-change: auto;
  }


  .nav-links.active::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(59, 43, 38, 0.35);
    z-index: -1;
    pointer-events: none;
  }

  .nav-links.active {
    right: 0;
  }

  .nav-link {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Keep the indicator lit while a branch is expanded — the only open-state
     cue on touch, where :hover never fires. */
  .nav-dropdown.active>.dropdown-toggle .nav-ind {
    width: 20px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-cta {
    display: none;
  }

  .nav-dropdown {
    width: 100%;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0 0 4px 20px;
    transition: none;
  }

  .dropdown-menu.active {
    display: block;
  }

  /* @media (min-width: 1281px) { */
  .nav-dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* } */

  .dropdown-item {
    padding: 10px 16px;
    font-size: 15px;
  }

  .nav-dropdown-sub {
    width: 100%;
  }

  .dropdown-menu-sub {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0 0 4px 20px;
    transition: none;
  }

  .dropdown-menu-sub.active {
    display: block;
  }

  /* @media (min-width: 1281px) { */
  .nav-dropdown-sub:hover .dropdown-menu-sub {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* } */

  .sub-ind {
    transform: rotate(45deg);
  }

  .nav-dropdown-sub.active-dropdown>.dropdown-toggle-sub>.sub-ind {
    transform: rotate(-135deg);
  }
}

/* --- Tablet (max 900px) --- */
@media(max-width:900px) {

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

  .hero-cards {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-right: 0;
  }

  .hero-media {
    max-width: 100%;
  }



  .problem-layout {
    grid-template-columns: 1fr;
    /* gap: var(--space-xl); */
    padding: 40px clamp(16px, 4vw, 40px) 0;
  }

  .problem-layout-bg {
    min-height: auto;
    /* padding: 40px 20px; */
    margin: 0 0 40px;
  }

  .problem-layout-bg::before {
    /* min-height: 200px; */
  }

  .problem-layout-bg .problem-copy {
    grid-column: 1;
  }

  .problem-steps {
    padding: var(--space-xl) clamp(16px, 3vw, 30px) 40px;
    background-position: right 20px center;
    background-size: 50% auto;
  }

  .p-steps-head {
    margin-left: 0;
  }

  .footer-main {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .footer-closing {
    text-align: left;
  }

  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  /* .section-figure img {
    max-width: 240px;
  } */

  .phil-arch {
    max-width: 100%;
  }

  .diagram-label {
    width: 100px;
    font-size: 12px;
  }

  .arch-label {
    width: 85px;
    font-size: 12px;
  }

  .hero-title {
    font-size: clamp(28px, 5vw, 42px);
  }

  .hero-sub {
    max-width: 100%;
  }

  .hero-actions {
    /* flex-direction: column;
    align-items: stretch; */
  }

  .hero-actions .btn {
    justify-content: center;
  }

  .section-head-left {
    max-width: 100%;
    margin: 5% auto;
  }

  .phil-layout {
    /* flex-direction: column; */
  }

  .right-side-timeline {
    display: none;
  }

  .phil-timeline,
  .right-side-timeline {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .phil-timeline {
    margin: 0 0 48px;
  }
}

/* --- Small Tablet / Large Phone (max 700px) --- */
@media(max-width:700px) {
  section {
    padding: var(--space-3xl) 0;
  }

  .hero-title {
    font-size: clamp(26px, 6vw, 34px);
    letter-spacing: -1px;
  }

  .hero-pin {
    min-height: auto;
    padding: 0 0 40px;
  }

  h2 {
    font-size: clamp(22px, 5vw, 28px);
  }

  h3 {
    font-size: clamp(16px, 3.5vw, 20px);
  }

  .section-desc {
    font-size: 16px;
  }

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

  .testimonial-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: 0 4% 0;
  }

  .testimonial-card {
    padding: var(--space-lg) 20px;
  }

  .hero-cards {
    grid-template-columns: 1fr;
  }

  .hero-hotspot-top {
    top: 12px;
    left: 12px;
  }

  .hero-hotspot-bottom {
    bottom: 64px;
    left: 12px;
  }

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

  .hero-actions .btn {
    justify-content: center;
  }

  .contact-form {
    padding: var(--space-lg) 20px;
  }

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

  .footer-bar-inner {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  .diagram-label {
    width: 85px;
    font-size: 11px;
  }

  .arch-blocks span {
    height: 12px;
  }

  .diagram {
    padding: var(--space-lg) 20px;
  }

  .phil-content>p {
    font-size: 14px;
  }

  .problem-copy p {
    font-size: 16px;
  }

  .hero-sub {
    font-size: clamp(14px, 2.8vw, 17px);
  }

  .btn {
    padding: 12px 22px;
    font-size: 14px;
  }

  .fail-card {
    padding: var(--space-lg) 20px;
  }

  .fail-pct {
    font-size: 26px;
  }

  /* .section-figure img {
    max-width: 200px;
  } */

  .marquee-track {
    font-size: 12px;
    gap: var(--space-lg);
  }

  .work-showcase {
    border-radius: 12px;
  }

  .work-showcase-media {
    min-height: 200px;
    aspect-ratio: 16/10;
  }

  .work-showcase-tag {
    padding: 14px 16px;
    font-size: 11px;
  }

  .work-showcase-title {
    font-size: 18px;
    padding: 14px 16px;
  }

  .work-showcase-desc {
    font-size: 13px;
    padding: 14px 16px;
  }

  .work-showcase-meta {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .contact {
    padding: var(--space-2xl) var(--space-md);
  }

  .contact-copy h2 {
    font-size: clamp(22px, 5vw, 28px);
  }

  .problem-layout-bg {
    display: block;
    background-image: none;
  }



  .problem-layout-bg .problem-copy {
    grid-column: auto;
    grid-row: auto;
    order: 0;
  }

  .problem-steps {
    background-image: none;
    padding: var(--space-xl) var(--space-md) 40px;
  }

  .p-steps-head h3 {
    font-size: clamp(20px, 4.5vw, 26px);
  }

  .phil-item {
    padding: 10px 8px;
  }

  .phil-head h3 {
    font-size: 16px;
  }

  .phil-tag {
    font-size: 14px;
  }

  .eyebrow {
    font-size: 11px;
    padding: 5px 12px;
    margin: 4% auto;
  }

  .work .container {
    padding: 4% clamp(12px, 3vw, 24px);
  }

  .work-list {
    gap: clamp(32px, 5vw, 48px);
  }
}

/* --- Compact Phone (max 500px) --- */
@media(max-width:500px) {
  .container {
    padding: 0 var(--space-md);
  }

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

  .nav {
    margin: 0 2%;
  }

  .hero-cards {
    gap: 12px;
  }

  .nav.scrolled {
    padding: 8px 0;
  }

  .nav-links {
    width: 100%;
    max-width: 100%;
    right: -100%;
    border-left: none;
  }

  .nav-links.active {
    right: 0;
  }

  .nav-link {
    padding: 14px 20px;
    font-size: 15px;
  }

  .brand-name {
    font-size: 16px;
  }

  .hero {
    height: auto;
    padding: 0;
  }

  .hero-pin {
    height: auto;
    min-height: 100vh;
    align-items: flex-start;
    padding: 100px 0 48px;
    overflow: visible;
  }

  .hero-pin::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse at 82% 12%, rgba(230, 203, 184, 0.55) 0%, transparent 55%),
      radial-gradient(ellipse at 12% 88%, rgba(118, 26, 2, 0.07) 0%, transparent 50%),
      linear-gradient(180deg, #fbf0f6 0%, #ffffff 100%);
    opacity: 1;
    transition: opacity 0.7s ease;
    pointer-events: none;
  }

  .hero-eyebrow {
    font-size: 11px;
    padding: 6px 12px;
  }

  .hero-title {
    font-size: clamp(24px, 6.5vw, 30px);
    letter-spacing: -0.5px;
  }

  .hero-sub {
    font-size: 14px;
    margin-bottom: 0;
  }

  .hero-card {
    flex-direction: column;
    padding: 16px 16px 68px;
  }

  .hero-badges span {
    font-size: 10px;
    padding: 5px 10px;
  }

  .hero-hotspot {
    font-size: 11px;
    padding: 7px 12px;
  }

  .hero-inset {
    width: 108px;
    height: 80px;
  }

  .section-head {
    margin-bottom: var(--space-xl);
    padding-top: 10px;
  }

  .section-head-left {
    margin-bottom: var(--space-xl);
  }

  .section-desc {
    font-size: 15px;
  }

  .fail-card {
    padding: 18px var(--space-md);
  }

  .fail-card-head {
    margin-bottom: 12px;
  }

  .fail-pct {
    font-size: 24px;
  }

  .p-step {
    gap: 14px;
    padding: 12px;
  }

  .p-steps-timeline {
    padding: 0 12px;
  }

  .p-steps-timeline::before {
    left: 42px;
  }

  .p-step-num>span {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .p-step h4 {
    font-size: 16px;
  }

  .p-step p {
    font-size: 13px;
  }

  .diagram-label {
    width: 70px;
    font-size: 10px;
  }

  .diagram-layer {
    gap: var(--space-sm);
    padding: 8px 0;
  }

  .diagram {
    padding: var(--space-lg) var(--space-md);
  }

  .d-bar {
    height: 8px;
  }

  .phil-item {
    gap: 14px;
  }

  .phil-item+.phil-item {
    margin-top: 28px;
  }

  .phil-num>span {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .phil-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .phil-head h3 {
    font-size: 17px;
  }

  .phil-content>p {
    font-size: 14px;
  }

  .arch-label {
    width: 65px;
    font-size: 11px;
  }

  .arch-blocks span {
    height: 10px;
  }

  .arch-layer {
    padding: var(--space-sm) 12px;
    gap: var(--space-sm);
  }

  .arch {
    padding: var(--space-lg) var(--space-md);
    gap: 4px;
  }

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

  .cf-header {
    margin-bottom: var(--space-lg);
  }

  .cf-icon {
    width: 22px;
  }

  .cf-field input,
  .cf-field textarea {
    padding: 12px 14px;
    font-size: 14px;
  }

  .contact-channel {
    padding: 12px 14px;
  }

  .cc-icon {
    width: 38px;
    height: 38px;
  }

  .cc-value {
    font-size: 13px;
  }

  .contact-copy>p {
    font-size: 15px;
    margin-bottom: var(--space-lg);
  }

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

  .testimonial-card p {
    font-size: 14px;
    margin-bottom: 18px;
  }

  .footer {
    padding-top: var(--space-2xl);
    min-height: 420px;
    background-size: auto 100%;
  }

  .footer-main {
    padding-bottom: var(--space-xl);
    gap: var(--space-md);
  }

  .footer-nav {
    padding: var(--space-xl) 0;
    gap: var(--space-lg);
  }

  .footer-col {
    gap: var(--space-sm);
  }

  .eyebrow {
    font-size: 11px;
    padding: 5px 12px;
    margin-bottom: 12px;
  }

  .problem-copy p {
    font-size: 15px;
  }

  .problem-steps {
    gap: var(--space-lg);
  }

  /* .section-figure img {
    max-width: 180px;
  } */

  .marquee-track {
    font-size: 11px;
    gap: var(--space-lg);
    animation-duration: 30s;
  }

  .btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  .cf-title {
    font-size: 16px;
  }

  .work-showcase {
    border-radius: 10px;
  }

  .work-showcase-media {
    min-height: 180px;
  }

  .work-showcase-title {
    font-size: 17px;
    padding: 12px 14px;
  }

  .work-showcase-desc {
    font-size: 13px;
    padding: 12px 14px;
  }

  .work-showcase-meta {
    padding: 10px 14px;
  }

  .work-showcase-stack {
    font-size: 11px;
  }

  .work-showcase-perf {
    font-size: 11px;
    padding: 4px 8px;
  }

  .hero-actions .btn {
    padding: 12px 18px;
    font-size: 13px;
  }

  .contact {
    padding: var(--space-xl) var(--space-sm);
  }

  .contact-copy h2 {
    font-size: 22px;
  }

  .problem-layout {
    padding: 30px var(--space-md) 0;
  }

  .problem-layout-bg {
    padding: 30px var(--space-sm);
    margin: 0 0 30px;
  }
}

/* --- Very Small Phone (max 360px) --- */
@media(max-width:360px) {
  .container {
    padding: 0 12px;
  }

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

  .hero {
    height: auto;
    padding: 0;
  }

  .hero-pin {
    height: 100vh;
    padding: 88px 0 40px;
  }

  .hero-title {
    font-size: 22px;
  }

  .hero-sub {
    font-size: 13px;
  }

  .brand-name {
    font-size: 14px;
  }

  .nav {
    margin: 0 2%;
  }

  .nav-link {
    padding: 12px var(--space-md);
    font-size: 14px;
    min-height: 44px;
  }

  .nav-links {
    padding: 90px var(--space-md) var(--space-xl);
  }

  .hero-eyebrow {
    font-size: 10px;
    padding: 5px 10px;
    margin-bottom: var(--space-md);
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: clamp(14px, 4vw, 17px);
  }

  .section-desc {
    font-size: 14px;
  }

  .meta-stack,
  .meta-perf {
    font-size: 11px;
  }

  .fail-card {
    padding: 16px 14px;
  }

  .fail-pct {
    font-size: 22px;
  }

  .fail-num {
    font-size: 12px;
  }

  .p-step {
    padding: 12px 14px;
  }

  .p-step-num>span {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .p-steps-timeline {
    padding: 0 6px;
  }

  .p-steps-timeline::before {
    left: 38px;
  }

  .diagram-label {
    width: 55px;
    font-size: 9px;
  }

  .diagram {
    padding: var(--space-md) 12px;
  }

  .diagram-core {
    height: 18px;
  }

  .phil-num>span {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .phil-head h3 {
    font-size: 15px;
  }

  .arch-label {
    width: 55px;
    font-size: 10px;
  }

  .arch-blocks span {
    height: 8px;
  }

  .arch-layer {
    padding: 6px 10px;
    gap: 6px;
  }

  .contact-form {
    padding: var(--space-md) 12px;
  }

  .cf-title {
    font-size: 15px;
  }

  .cf-field {
    margin-bottom: 14px;
  }

  .cf-field label {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .cf-field input,
  .cf-field textarea {
    padding: 10px 12px;
    font-size: 13px;
  }

  .contact-channel {
    padding: 10px 12px;
    gap: 12px;
  }

  .cc-icon {
    width: 32px;
    height: 32px;
  }

  .cc-icon svg,
  .cc-icon img {
    width: 15px;
    height: 15px;
  }

  .cc-value {
    font-size: 12px;
  }

  .cc-label {
    font-size: 11px;
  }

  .testimonial-card {
    padding: var(--space-md) 14px;
  }

  .testimonial-card p {
    font-size: 13px;
  }

  .testimonial-card footer strong {
    font-size: 14px;
  }

  .testimonial-card footer span {
    font-size: 12px;
  }

  .footer-statement {
    font-size: 18px;
  }

  .footer-nav {
    gap: var(--space-lg);
  }

  .footer-col a {
    font-size: 12px;
  }

  .btn {
    padding: 10px var(--space-md);
    font-size: 13px;
  }

  .hero-eyebrow {
    font-size: 10px;
    padding: 5px 10px;
  }

  .section-figure img {
    min-width: 100vw;
  }

  .marquee-track {
    font-size: 10px;
    gap: var(--space-md);
    animation-duration: 25s;
  }

  .error-message {
    font-size: 13px;
  }

  .work-showcase {
    border-radius: 8px;
  }

  .work-showcase-media {
    min-height: 160px;
  }

  .work-showcase-tag {
    padding: 10px 12px;
    font-size: 10px;
  }

  .work-showcase-title {
    font-size: 16px;
    padding: 10px 12px;
  }

  .work-showcase-desc {
    font-size: 12px;
    padding: 10px 12px;
    line-height: 1.6;
  }

  .work-showcase-meta {
    padding: 8px 12px;
  }

  .work-showcase-stack {
    font-size: 10px;
  }

  .work-showcase-perf {
    font-size: 10px;
    padding: 3px 6px;
  }

  .contact-copy h2 {
    font-size: 20px;
  }

  .contact-copy>p {
    font-size: 14px;
  }

  .problem-copy {
    padding: 5%;
  }

  .problem-copy p {
    font-size: 14px;
  }

  .problem-layout-bg {
    padding: 20px 10px;
    margin-bottom: 20px;
  }

  .hero-actions .btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  .hero-card-tag {
    font-size: 14px;
  }

  .hero-card-text {
    font-size: 12px;
  }
}

/* --- Landscape Phone (max 800px, orientation) --- */
@media(max-height:500px) and (orientation:landscape) {
  .hero {
    min-height: auto;
    padding: 0;
  }

  .hero-pin {
    align-items: center;
    padding: 80px 0 30px;
  }

  .hero-title {
    font-size: clamp(18px, 3.5vw, 28px);
  }

  .hero-sub {
    font-size: 13px;
    max-width: 400px;
  }

  .hero-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-fill-image {
    /* max-width: 240px; */
  }

  .hero-hotspot,
  .hero-inset {
    display: none;
  }

  section {
    padding: 40px 0;
  }

  .hero-actions {
    gap: 8px;
  }

  .hero-actions .btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  .hero-eyebrow {
    font-size: 10px;
    padding: 5px 10px;
    margin-bottom: 12px;
  }

  .hero-title {
    margin-bottom: 12px;
  }

  .hero-sub {
    margin-bottom: 16px;
  }

  .section-head {
    margin-bottom: var(--space-xl);
    padding-top: 15px;
  }
}

/* ============================================= */
/*  GLOSSY GLASSMORPHISM UPGRADE                  */
/*  Transparency + specular sheen on every glass  */
/*  surface. Frame background untouched.          */
/* ============================================= */

/* --- Specular rim on all glass surfaces --- */
.work-card,
.p-step,
.problem-copy,
.diagram,
.arch,
.phil-num>span,
.fail-card,
.testimonial-card,
.contact-channel,
.contact-info-card,
.value-card,
.viz-stat,
.tabs-nav,
.nav-toggle,
.btn-ghost {
  box-shadow: var(--shadow-glass), var(--glass-gloss);
}

.contact-form,
.tab-visual,
.dropdown-menu,
.dropdown-menu-sub {
  box-shadow: var(--shadow-glass-lg), var(--glass-gloss);
}

/* --- Brighter specular rim on interaction --- */
@media (min-width: 1281px) {

  .work-card:hover,
  .fail-card:hover,
  .feature-card:hover,
  .testimonial-card:hover,
  .p-step:hover,
  .problem-copy:hover,
  .contact-channel:hover,
  .contact-info-card:hover,
  .value-card:hover,
  .viz-stat:hover {
    box-shadow: var(--shadow-glass-hover),
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  }
}

/* --- Soft sheen sweep over glossy cards --- */
.work-card,
.fail-card,
.feature-card,
.testimonial-card,
.p-step,
.problem-copy,
.value-card,
.contact-channel,
.contact-info-card,
.viz-stat,
.hero-card,
.tab-visual {
  position: relative;
  overflow: hidden;
}

.work-card::after,
.fail-card::after,
.feature-card::after,
.testimonial-card::after,
.p-step::after,
.problem-copy::after,
.value-card::after,
.contact-channel::after,
.contact-info-card::after,
.viz-stat::after,
.hero-card::after,
.tab-visual::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -60%;
  width: 55%;
  height: 180%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out), left 0.7s var(--ease-glass);
  z-index: 3;
}

@media (min-width: 1281px) {

  .work-card:hover::after,
  .fail-card:hover::after,
  .feature-card:hover::after,
  .testimonial-card:hover::after,
  .p-step:hover::after,
  .problem-copy:hover::after,
  .value-card:hover::after,
  .contact-channel:hover::after,
  .contact-info-card:hover::after,
  .viz-stat:hover::after,
  .hero-card:hover::after,
  .tab-visual:hover::after {
    opacity: 1;
    left: 120%;
  }
}

/* ============================================= */
/*  TOUCH DEVICE IMPROVEMENTS                    */
/* ============================================= */

/* Increase touch targets on touch devices */
@media (pointer: coarse) {
  .nav-link {
    min-height: 48px;
  }

  .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .btn {
    min-height: 44px;
  }

  .tab-btn {
    min-height: 44px;
  }

  .contact-channel {
    min-height: 48px;
  }

  .feature-card-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================================
   BTN-PRIMARY LABEL / ARROW COLLISION FIX
   ============================================================ */
/* .btn-primary reserves 3.3em of right padding for the absolutely
   positioned arrow pill (0.3em offset + 2.2em pill = 2.5em of clear
   space needed). The generic mobile padding overrides on .btn
   (max-width 700 / 500 / 360) and on .hero-actions .btn (landscape
   phone) share that specificity and are declared later, collapsing the
   gutter to 16-22px — the pill then paints on top of the label. The
   gutter is re-asserted here, after every override, at matching
   specificity so source order wins. Values stay in em so the gutter
   scales with the 15/14/13px font-size swaps.

   :has() also keeps icon-less buttons ("Send message", "Book a
   strategy call") symmetric instead of leaving them with a phantom
   right gutter. */
.btn-primary:has(> .icon) {
  padding-right: 3.3em;
}

/* No arrow to clear, so drop back to the base .btn-primary gutter on BOTH
   sides. Without the left value here the mobile .btn padding shorthand
   (e.g. 22px) would still apply and the label would sit off-centre. */
.btn-primary:not(:has(> .icon)) {
  padding-right: 1.2em;
  padding-left: 1.2em;
}

/* Touch devices no longer get the hover sweep, so give taps a press cue
   instead. */
@media (hover: none) {

  .btn-primary:active .icon {
    transform: scale(0.94);
  }
}

/* ============================================================
   HERO — HOVER OFF ON TOUCH + TABLET
   Touch browsers latch :hover on tap and keep it until the next
   tap, so on a phone/tablet a hover state reads as a stuck bug
   (ring stays on a card, button pill stays stretched wide).
   The card sheen is already gated to min-width:1281px further up
   ("GLOSSY GLASSMORPHISM UPGRADE"); this block clears the rest of
   the hero's hover states — on coarse pointers AND on
   tablet-width viewports, whatever pointer type they report.
   ============================================================ */
@media (max-width: 1280px), (hover: none), (pointer: coarse) {

  .hero .btn-primary .icon {
    transition: transform 0.15s var(--ease-out);
  }

  .hero .btn-primary .icon svg {
    transition: none;
  }

  /* Hover and focus-visibility stay flat — no lift, no ring, no sheen. */
  /* :not(.is-active) is load-bearing, not cosmetic: a tapped card can
     latch :hover *and* be handed .is-active by the autoplay, and this
     reset outranks .hero-card.is-active, so without the guard it would
     suppress the ring on exactly the card that is playing.
     box-shadow/border-color restate the resting .hero-card values. */
  .hero .hero-card:not(.is-active):hover,
  .hero .hero-card:not(.is-active):focus-visible {
    transform: none;
    box-shadow: 0px 0px 0px 12px #fdf0f0;
    border-color: rgba(118, 26, 2, 0.2);
  }

  .hero .hero-card::after,
  .hero .hero-card:hover::after,
  .hero .hero-card:focus-visible::after,
  .hero .hero-card:active::after {
    opacity: 0;
    left: -60%;
  }

  .hero .btn-primary:hover .icon,
  .hero .btn-primary:focus-visible .icon,
  .hero .btn-primary:active .icon {
    width: 2.2em;
  }

  .hero .btn-primary:hover .icon svg,
  .hero .btn-primary:focus-visible .icon svg,
  .hero .btn-primary:active .icon svg {
    transform: none;
  }

  /* Press cue on the primary button's white pill — this used to live in
     a `(hover: none)`-only block, which skipped tablets that report a
     fine pointer at a narrow width. */
  .hero .btn-primary:active .icon {
    transform: scale(0.94);
  }
}

/* Prevent text selection on interactive elements for mobile */
@media (max-width: 900px) {

  .nav-toggle,
  .tab-btn,
  .btn {
    user-select: none;
    -webkit-user-select: none;
  }

  /* Smooth scroll behavior for mobile */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
  }

  /* NOTE: never set overscroll-behavior-y: none on <body> here.
     <html> has overflow-x: clip, so <body>'s overflow is no longer
     propagated to the viewport and body itself becomes the scroll
     container (it can never scroll, height is auto). `none` there kills
     scroll chaining, so wheel/touch never reaches the viewport and the
     page becomes unscrollable below 900px. */
}

/* ============================================================
   DISABLE ALL HOVER EFFECTS BELOW 1024px
   ============================================================ */
/* @media (max-width: 1024px) { */

/* 1. Kill transitions on elements that have hover transitions,
        so no visual flash can occur */
/* [style*="transition"],
  .work-showcase,
  .work-card,
  .fail-card,
  .testimonial-card,
  .p-step,
  .phil-item,
  .arch-layer,
  .contact-channel,
  .footer-col a,
  .brand .brand-mark svg,
  .nav-link,
  .nav-link .nav-ind,
  .dropdown-item,
  .nav-dropdown-sub .sub-ind,
  .work-card .work-card-body h3,
  .work-card .work-card-cat,
  .work-card .wca-arrow,
  .work-showcase .work-showcase-cat,
  .work-showcase .work-showcase-glow,
  .work-showcase .work-showcase-title,
  .work-showcase .work-showcase-perf,
  .arch-layer .arch-blocks span,
  .contact-channel .cc-icon {
    transition: none !important;
  } */

/* 2. Reset every hover state to no-op */
/* @media (min-width: 1281px) {
  .brand:hover .brand-mark svg,
  .nav-link:hover,
  .nav-link:hover .nav-ind,
  .nav-dropdown:hover .dropdown-toggle .nav-label::after,
  .dropdown-item:hover,
  .nav-dropdown-sub:hover .sub-ind,
  .work-card:hover,
  .work-card:hover .work-card-body h3,
  .work-card:hover .work-card-cat,
  .work-card:hover .wca-arrow,
  .work-showcase:hover,
  .work-showcase:hover .work-showcase-media img,
  .work-showcase:hover .work-showcase-cat,
  .work-showcase:hover .work-showcase-glow,
  .work-showcase:hover .work-showcase-title,
  .work-showcase:hover .work-showcase-perf,
  .p-step:hover,
  .phil-item:hover,
  .arch-layer:hover,
  .arch-layer:hover .arch-blocks span,
  .fail-card:hover,
  .contact-channel:hover,
  .contact-channel:hover .cc-icon,
  .footer-col a:hover,
  .testimonial-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
    color: inherit !important;
    background: inherit !important;
    background-color: inherit !important;
    opacity: inherit !important;
    filter: none !important;
  } 
}*/

/* 3. Reset box-shadow on card groups that use the combined specular rim rule */
/* @media (min-width: 1281px) {
  .work-card:hover,
  .fail-card:hover,
  .feature-card:hover,
  .testimonial-card:hover,
  .p-step:hover,
  .problem-copy:hover,
  .contact-channel:hover,
  .contact-info-card:hover,
  .value-card:hover,
  .viz-stat:hover {
    box-shadow: none !important;
  } 
}*/

/* 4. Kill the ::after sheen sweep on all cards */
/* @media (min-width: 1281px) { 
  .work-card:hover::after,
  .fail-card:hover::after,
  .feature-card:hover::after,
  .testimonial-card:hover::after,
  .p-step:hover::after,
  .problem-copy:hover::after,
  .value-card:hover::after,
  .contact-channel:hover::after,
  .contact-info-card:hover::after,
  .viz-stat:hover::after,
  .hero-card:hover::after,
  .tab-visual:hover::after {
    opacity: 0 !important;
    transform: none !important;
    animation: none !important;
  }
} 
*/
/* --- Extra small (max 240px) --- */
@media(max-width:240px) {
  .hero-card {
    display: none;
  }
}