/* ==================================================== */
/*  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;
}

/* ============================================= */
/*  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;
  }
}