/* ============================================================
   OTM WEB DESIGN PORTFOLIO, DARK/INDUSTRIAL VARIANT
   Stone cards on locked dark bg, maroon accent, framed sections
   ============================================================ */

/* ============================================================
   SELF-HOSTED WEBFONTS
   These replace the Google Fonts <link> that used to sit in every
   page head. That link was render-blocking and cost roughly 750ms on
   mobile: the browser had to resolve fonts.googleapis.com, open a
   connection, download a CSS file that contained no fonts at all, and
   only then discover the real files on a SECOND third-party host
   (fonts.gstatic.com) and repeat the whole trip.

   Serving from our own domain removes both round trips entirely. The
   browser already has an open connection here, and these rules live
   inside the stylesheet it is already downloading.

   font-display: swap means text paints immediately in a fallback and
   swaps when the real font arrives, so nothing is ever invisible.

   Both families are SIL Open Font License 1.1. The OFL files ship
   alongside the fonts in assets/fonts/ as the license requires.

   WEIGHTS SHIPPED: Bebas Neue 400. DM Sans 300, 300 italic, 400, 500,
   700. Nothing in this stylesheet requests a weight outside that list.
   Asking for 600 or 800 does not fail loudly, the browser just picks
   the nearest face it has, so the page silently renders at a weight
   nobody chose. Every former 600 and 800 in this file is now 700.
   ============================================================ */

/* Bebas Neue, display face (headings, hero, section titles) */
@font-face {
  font-display: swap;
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/bebas-neue-v16-latin-regular.woff2') format('woff2');
}

/* DM Sans, body face */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/dm-sans-v17-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300;
  src: url('assets/fonts/dm-sans-v17-latin-300italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/dm-sans-v17-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/dm-sans-v17-latin-700.woff2') format('woff2');
}

:root {
  /* BRAND ACCENT (burgundy) */
  --maroon: #6E1F33;
  --maroon-light: #8C2D45;
  --maroon-dim: #4D1525;
  --maroon-glow: rgba(110, 31, 51, 0.2);

  /* DARK ANCHOR (hero, marquee, CTA strip, footer) */
  --ink: #0A0A0A;
  --ink-2: #111111;
  --ink-3: #181818;
  --ink-4: #222222;
  --ink-text: #ECEAE8;
  --ink-text-muted: #B8B6B4;
  --ink-text-dim: #888885;
  --ink-border: rgba(255, 255, 255, 0.08);

  /* SILVER/PLATINUM SECTION CARDS */
  --stone: #BFC4C2;            /* primary card surface, cool silver-grey */
  --stone-soft: #CACFCD;        /* alt tone */
  --stone-bright: #D8DCDA;      /* sub-cards inside (lighter, creates lift) */
  --stone-bright-2: #E6E9E7;    /* hover state for sub-cards */

  /* TEXT ON STONE */
  --ink-deep: #1A1D1B;
  --ink-on-stone: #2A2D2B;
  --ink-on-stone-muted: #555A57;
  --ink-on-stone-dim: #80847F;
  --stone-border: rgba(20, 23, 21, 0.13);
  --stone-border-strong: rgba(20, 23, 21, 0.22);

  /* FRAME */
  --frame: rgba(110, 31, 51, 0.6);
  --frame-soft: rgba(110, 31, 51, 0.35);
}

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

/* PERF: overflow-x on html as well as body. On body alone it is unreliable
   in iOS Safari, which lets the whole page render wider than the screen. */
html {
  overflow-x: hidden;
}

/* A11Y: smooth scrolling is motion. Visitors who have asked their operating
   system to reduce motion should get an instant jump instead of a glide.
   Previously this was unconditional. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--ink);
  color: var(--ink-text);
  overflow-x: hidden;
  width: 100%;
  cursor: none;
  position: relative;
  min-height: 100vh;
}

/* LOCKED BODY BACKGROUND (body::before pattern, iOS Safari safe)
   PERF: the darkening is a gradient layer instead of filter:brightness().
   Filtering a full-viewport fixed layer is re-run on paint and is one of the
   most expensive things a midrange phone can be asked to do. Same look,
   a fraction of the cost. If assets-bg-dark.jpg is ever re-exported already
   darkened, the gradient layer below can be deleted entirely. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(6, 6, 6, 0.45), rgba(6, 6, 6, 0.45)),
    var(--ink) url('assets/assets-bg-dark.jpg') center center / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}

body.nav-open { overflow: hidden; }

/* ============================================================
   CUSTOM CURSOR
   PERF: position is driven by transform, never left/top. Writing left/top
   on every mousemove forces the browser to recalculate layout on each
   frame the mouse moves, which is constant main-thread work for a purely
   decorative element. transform is GPU-composited and costs nothing.
   script.js writes translate3d() and never touches left/top.
   The elements start parked off-screen so they do not flash at 0,0 before
   the first mouse movement, and script.js skips them entirely on touch.
   ============================================================ */

.cursor {
  position: fixed;
  left: 0; top: 0;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-100px, -100px, 0);
  box-shadow:
    0 0 0 1px rgba(110, 31, 51, 0.55),
    0 0 8px rgba(0, 0, 0, 0.18);
  transition:
    width 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.2s ease,
    box-shadow 0.25s ease;
  will-change: transform;
}
.cursor.cursor-hover {
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: var(--maroon);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 10px rgba(110, 31, 51, 0.5);
}
.cursor-ring {
  position: fixed;
  left: 0; top: 0;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border: 2px solid var(--maroon);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  z-index: 9998;
  transform: translate3d(-100px, -100px, 0);
  transition:
    transform 0.13s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    0 0 10px rgba(110, 31, 51, 0.22);
  will-change: transform;
}
.cursor-ring.cursor-hover {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(110, 31, 51, 0.4),
    0 0 16px rgba(255, 255, 255, 0.35),
    0 0 22px rgba(110, 31, 51, 0.18);
}

/* ============================================================
   NAV (sticky)
   PERF: backdrop-filter removed. The nav background already sat at 94 to
   97 percent opacity, so there was almost nothing showing through for the
   blur to act on, yet the browser still ran a full-width blur and
   saturate pass on every scroll frame. The gradients below are now fully
   opaque and look the same to the eye at a fraction of the cost. This was
   one of the two most expensive paint operations left on the site.
   ============================================================ */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 4rem;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      transparent 30%,
      transparent 70%,
      rgba(0, 0, 0, 0.04) 100%),
    repeating-linear-gradient(0deg,
      transparent 0,
      transparent 1px,
      rgba(255, 255, 255, 0.022) 1px,
      rgba(255, 255, 255, 0.022) 2px),
    linear-gradient(180deg, #CACFCD 0%, #B4B9B7 100%);
  border-bottom: 1px solid rgba(110, 31, 51, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 6px 28px rgba(0, 0, 0, 0.35);
  transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(110, 31, 51, 0.5) 25%,
    rgba(140, 45, 69, 0.75) 50%,
    rgba(110, 31, 51, 0.5) 75%,
    transparent 100%);
  opacity: 0.85;
  pointer-events: none;
}
nav.scrolled {
  padding: 0.85rem 4rem;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 35%,
      rgba(0, 0, 0, 0.05) 100%),
    repeating-linear-gradient(0deg,
      transparent 0,
      transparent 1px,
      rgba(255, 255, 255, 0.022) 1px,
      rgba(255, 255, 255, 0.022) 2px),
    linear-gradient(180deg, #C3C8C6 0%, #ADB2B0 100%);
  border-bottom-color: rgba(110, 31, 51, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 32px rgba(0, 0, 0, 0.4);
}

/* LOGO
   The mark is a dark coin sitting on a light metallic bar, which is why it
   read as a smudge at 64px: almost no tonal separation between a dark
   subject and a mid-tone ground, and the fine interior detail collapsed.

   The fix is a rim light rather than a box or a badge. drop-shadow()
   follows the alpha channel of the PNG, so a tight white shadow traces the
   actual silhouette and lifts it off the bar without drawing a rectangle
   or assuming the logo is circular. The second, darker shadow gives it
   physical weight, and the small contrast bump recovers detail lost at
   this size. filter is GPU-composited, so this costs nothing at runtime. */
.nav-logo-img {
  height: 64px; width: auto;
  display: block;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.38))
    contrast(1.08) saturate(1.06);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.3s ease;
}
.nav-logo-text:hover .nav-logo-img {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 3px 10px rgba(110, 31, 51, 0.5))
    contrast(1.12) saturate(1.12);
}
@media (prefers-reduced-motion: reduce) {
  .nav-logo-img, .nav-logo-text:hover .nav-logo-img {
    transition: none; transform: none;
  }
}
.nav-logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  color: var(--ink-deep);
  text-decoration: none;
}
.nav-logo-text span { color: var(--maroon); }

.nav-links {
  display: flex; gap: 2.5rem; list-style: none; align-items: center;
}
.nav-links a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--maroon);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 3px;
  transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.nav-links a:hover {
  color: var(--maroon-light);
  border-color: var(--maroon);
  background: rgba(110, 31, 51, 0.06);
  box-shadow:
    0 0 18px rgba(110, 31, 51, 0.45),
    0 0 0 3px rgba(110, 31, 51, 0.08),
    inset 0 0 8px rgba(110, 31, 51, 0.08);
}
.nav-mobile-cta { display: none; }

.nav-cta {
  position: relative;
  background: var(--maroon);
  color: #fff;
  padding: 0.65rem 1.5rem;
  border-radius: 2px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  border: 1px solid var(--maroon);
  outline: 1px solid rgba(110, 31, 51, 0.35);
  outline-offset: 3px;
  box-shadow:
    0 2px 14px rgba(110, 31, 51, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.nav-cta:hover {
  background: var(--maroon-light);
  transform: translateY(-1px);
  box-shadow:
    0 6px 22px rgba(110, 31, 51, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* HAMBURGER */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  position: relative;
  cursor: none;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink-deep);
  position: absolute;
  left: 4px;
  transition: transform 0.3s, opacity 0.3s, top 0.3s, background 0.3s;
}
.nav-toggle span:nth-child(1) { top: 9px; }
.nav-toggle span:nth-child(2) { top: 15px; }
.nav-toggle span:nth-child(3) { top: 21px; }
.nav-toggle.open span { background: var(--maroon-light); }
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg); top: 15px; }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg); top: 15px; }

/* ============================================================
   HERO (full-bleed dark anchor)
   PERF: the hero image is declared ONCE, on section.hero::before.
   The old base rule also listed hero-main.jpg and assets-bg-dark.jpg,
   but section.hero overrode that background entirely, so it was dead
   code that muddied which file the browser should fetch first.
   The <link rel="preload"> in each page head now matches this exactly.
   ============================================================ */

.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 6rem 4rem 3rem;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg,
      rgba(10, 10, 10, 0.88) 0%,
      rgba(10, 10, 10, 0.7) 55%,
      rgba(110, 31, 51, 0.18) 100%);
  z-index: 0;
}
.hero-grid-bg {
  position: absolute; inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(110, 31, 51, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 31, 51, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.hero-glow {
  position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(110, 31, 51, 0.14) 0%, transparent 70%);
  top: -200px; right: -200px;
  pointer-events: none;
  z-index: 1;
}
.hero-bg-text {
  position: absolute;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(16rem, 35vw, 28rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.04);
  line-height: 1;
  top: 50%; right: -5%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
  letter-spacing: 0.05em;
  user-select: none;
  /* CLS FIX: this is the single largest element on the page, so when Bebas Neue
     swaps in over the fallback font its width collapses and its box moves,
     which registers as a big layout shift. It is purely decorative (transparent
     fill, 4% stroke), so we hold it invisible until the webfonts are ready and
     then fade it in. Invisible elements are not counted toward CLS, and opacity
     never causes layout shift. script.js adds .fonts-ready to <body>. */
  opacity: 0;
  transition: opacity 0.45s ease;
}
body.fonts-ready .hero-bg-text { opacity: 1; }

/* If a visitor prefers reduced motion, skip the fade and just appear. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-text { transition: none; }
}
.hero-content {
  position: relative;
  width: 100%;
  max-width: 1100px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--maroon-light);
  margin-bottom: 1.6rem;
  width: fit-content;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: var(--maroon-light);
}
.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.5rem, 8.2vw, 6.6rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin-bottom: 1.8rem;
  color: var(--ink-text);
}
.hero-title .outline {
  -webkit-text-stroke: 2px rgba(220, 220, 220, 0.5);
  color: transparent;
}
.hero-title .amber {
  color: var(--maroon-light);
  position: relative;
  display: inline-block;
  text-shadow: 0 0 30px rgba(110, 31, 51, 0.6);
}
.hero-accent {
  display: block;
  height: 4px;
  /* CLS + PERF FIX: this used to animate width from 0% to 70%. Width is a
     layout property, so every frame forced a re-layout (the "non-composited
     animation" flag) and contributed to layout shift. The bar now holds its
     final width and animates transform instead, which runs on the GPU and
     never affects layout. */
  width: 70%;
  transform: scaleX(0);
  transform-origin: center;
  background: var(--maroon);
  margin: 0.1em auto 0;
  border-radius: 2px;
  animation: accentGrow 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
@keyframes accentGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero-accent { animation: none; transform: scaleX(1); }
}

.hero-sub {
  font-size: 1.3rem;
  line-height: 1.65;
  color: var(--ink-text-muted);
  max-width: 700px;
  margin-bottom: 2.8rem;
  font-weight: 300;
}
.hero-actions {
  display: flex; gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
/* STAT CELLS
   The old .hero-stats wrapper (a floating stone box that sat over the hero
   photograph) is gone. The home page now renders these inside its own
   full-width .hh-stats strip, and no other page uses stats at all, so the
   wrapper was styling nothing.

   Two properties left with it. min-width:200px was a CLS guard for a
   width:fit-content parent that no longer exists, and four 200px cells
   would overflow a narrow screen inside the new fixed-column grid. The
   ::before accent bar belonged to the old boxed look and reads as clutter
   repeated across four cells. The cells themselves stay, because they are
   still the shared base the home strip builds on. */
.stat-item {
  padding: 1.5rem 2.8rem;
  text-align: center;
  border-right: 1px solid rgba(110, 31, 51, 0.22);
  position: relative;
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  color: var(--ink-deep);
  line-height: 1;
  letter-spacing: 0.02em;
}
.stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-top: 0.55rem;
  font-weight: 700;
}

/* ============================================================
   HERO KINETIC WORD CYCLE
   ============================================================ */

.word-cycle {
  display: inline-block;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* ============================================================
   HERO EDITORIAL FRAME LANGUAGE
   (corner brackets, vertical meta, build credits)
   ============================================================ */

.hero-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  display: block;
}
.hero-corner-tl {
  top: 100px; left: 28px;
  border-top: 1px solid rgba(140, 45, 69, 0.65);
  border-left: 1px solid rgba(140, 45, 69, 0.65);
}
.hero-corner-tr {
  top: 100px; right: 28px;
  border-top: 1px solid rgba(140, 45, 69, 0.65);
  border-right: 1px solid rgba(140, 45, 69, 0.65);
}
.hero-corner-bl {
  bottom: 80px; left: 28px;
  border-bottom: 1px solid rgba(140, 45, 69, 0.65);
  border-left: 1px solid rgba(140, 45, 69, 0.65);
}
.hero-corner-br {
  bottom: 80px; right: 28px;
  border-bottom: 1px solid rgba(140, 45, 69, 0.65);
  border-right: 1px solid rgba(140, 45, 69, 0.65);
}

.hero-vertical-meta {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(184, 182, 180, 0.55);
  font-weight: 500;
  white-space: nowrap;
}

/* .hero-build-credits, .hero-credit-dot and the creditPulse keyframes used
   to live here. No page has ever carried that markup, so roughly 30 lines
   plus an infinite animation were being parsed on every load for nothing. */

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

.btn-primary {
  background: var(--maroon);
  color: #fff;
  padding: 0.85rem 2.2rem;
  border-radius: 2px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--maroon);
  cursor: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  display: inline-block;
  box-shadow: 0 2px 14px rgba(110, 31, 51, 0.4);
}
.btn-primary:hover {
  background: var(--maroon-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(110, 31, 51, 0.5);
}
.btn-ghost {
  color: var(--maroon);
  padding: 0.85rem 2.2rem;
  border-radius: 2px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--stone-border-strong);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.32) 0%,
      transparent 30%,
      rgba(0, 0, 0, 0.05) 100%),
    rgba(216, 220, 218, 0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 12px rgba(0, 0, 0, 0.22);
  transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
  display: inline-block;
}
.btn-ghost:hover {
  color: var(--maroon-light);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.4) 0%,
      transparent 30%,
      rgba(0, 0, 0, 0.04) 100%),
    rgba(232, 235, 233, 1);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 6px 20px rgba(0, 0, 0, 0.28);
}

/* ============================================================
   MARQUEE STRIP (full-bleed dark band, no card)
   ============================================================ */

.marquee-strip {
  border-top: 2px solid var(--maroon);
  border-bottom: 2px solid var(--maroon);
  overflow: hidden;
  padding: 1.1rem 0;
  background:
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.52) 0%,
      rgba(10, 10, 10, 0.65) 100%),
    url('assets/cta-bg.jpg') center center / cover no-repeat,
    var(--ink);
  isolation: isolate;
  position: relative;
  z-index: 2;
}
.marquee-track {
  display: flex; gap: 0;
  width: max-content;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: flex; align-items: center; gap: 2rem;
  padding: 0 2.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-text);
  white-space: nowrap;
  font-weight: 500;
}
.marquee-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--maroon);
  flex-shrink: 0;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ============================================================
   SECTION CARD SYSTEM (the heart of the dark/industrial layout)
   Every <section> by default becomes a contained stone card with
   a 1px maroon offset outline acting as a frame. Hero overrides.
   ============================================================ */

section {
  background:
    /* Top-edge highlight (light catching the metal edge) */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.18) 3%,
      rgba(255, 255, 255, 0.05) 10%,
      transparent 35%,
      transparent 65%,
      rgba(0, 0, 0, 0.08) 88%,
      rgba(0, 0, 0, 0.18) 100%),
    /* Directional studio light from upper-left */
    radial-gradient(ellipse 70% 60% at 22% 5%,
      rgba(255, 255, 255, 0.22) 0%,
      transparent 60%),
    /* Photographic brushed-metal texture */
    url('assets/card-texture.jpg') center center / cover no-repeat,
    /* Solid fallback if texture is missing */
    var(--stone);
  color: var(--ink-on-stone);
  border: 1px solid var(--stone-border-strong);
  border-radius: 12px;
  outline: 1px solid var(--frame);
  outline-offset: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 1px 0 0 rgba(255, 255, 255, 0.35),
    inset -1px 0 0 rgba(0, 0, 0, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.25),
    0 18px 56px rgba(0, 0, 0, 0.45);
  padding: 56px 56px;
  margin: 80px auto;
  max-width: 1240px;
  width: calc(100% - 6rem);
  position: relative;
}

/* Editorial gutter marker between consecutive section cards */
section + section::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--maroon-light);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 0 3px rgba(110, 31, 51, 0.18);
  pointer-events: none;
  z-index: 5;
}

/* Burgundy top accent stripe on every section card */
section:not(.hero)::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(110, 31, 51, 0.35) 18%,
    rgba(140, 45, 69, 0.65) 50%,
    rgba(110, 31, 51, 0.35) 82%,
    transparent 100%);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Hero overrides default section styling (hero stays full-bleed dark) */
section.hero {
  background: var(--ink);
  color: var(--ink-text);
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  padding: 8rem 4rem 4rem;
  margin: 0;
  max-width: 100%;
  width: 100%;
}
/* The single owner of the hero image. Matches the preload tag in each head.
   Cancelled on the HOME page by .hero-home-v2 (scoped inside index.html),
   which draws its background entirely in CSS and ships no photo at all, so
   index.html carries no hero preload and its LCP element is the headline
   text. Every inner page still uses this. */
section.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('assets/hero-main.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 1;
  /* If hero-main.jpg doesn't exist yet, the image silently fails and the */
  /* flat ink base from section.hero shows through. */
}
section.hero::after { z-index: 1; }
.hero > .hero-content { z-index: 3; }

/* ============================================================
   SECTION TITLES + EYEBROWS (on stone cards)
   ============================================================ */

.section-label {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 700;
}
.section-label::before {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: var(--maroon);
}
.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  line-height: 0.95;
  margin-bottom: 1.5rem;
  color: var(--ink-deep);
  letter-spacing: 0.01em;
}
.section-intro {
  font-size: 0.95rem;
  color: var(--ink-on-stone-muted);
  font-weight: 400;
  max-width: 580px;
  line-height: 1.75;
  margin-bottom: 4rem;
}

/* ============================================================
   UNIFIED SUB-CARD SYSTEM
   (services, work cards, testimonials, process, pricing all share the same base)
   ============================================================ */

.subcard,
.service-item,
.work-card-new,
.testimonial-card,
.process-step,
.pricing-single,
.featured-info,
.why-visual,
.faq-list,
.contact-form,
.ba-info {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.45) 3%,
      rgba(255, 255, 255, 0.15) 12%,
      transparent 40%,
      transparent 70%,
      rgba(0, 0, 0, 0.06) 90%,
      rgba(0, 0, 0, 0.16) 100%),
    radial-gradient(ellipse 55% 50% at 25% 5%,
      rgba(255, 255, 255, 0.6) 0%,
      transparent 60%),
    var(--stone-bright);
  border: 1px solid var(--stone-border);
  border-radius: 8px;
  transition: background 0.25s, border-color 0.25s, transform 0.3s, box-shadow 0.3s;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 1px 0 0 rgba(255, 255, 255, 0.4),
    inset -1px 0 0 rgba(0, 0, 0, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   WORK SECTION
   ============================================================ */

/* FEATURED PROJECT */
.work-featured {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 4.5rem;
  align-items: center;
  margin-bottom: 5rem;
  padding-bottom: 5rem;
  border-bottom: 1px solid var(--stone-border);
  position: relative;
}
.work-featured::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: var(--maroon);
}

.work-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-on-stone-muted);
  background: rgba(26, 24, 20, 0.06);
  border: 1px solid var(--stone-border);
  border-left: 2px solid var(--maroon);
  padding: 0.35rem 0.75rem;
  border-radius: 1px;
  width: fit-content;
  font-weight: 700;
}
.work-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--maroon);
  flex-shrink: 0;
}

.work-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--maroon);
  padding: 0.5rem 1rem;
  border: 1px solid var(--maroon);
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s, gap 0.2s;
  width: fit-content;
  font-weight: 500;
}
.work-link:hover { background: var(--maroon-light); gap: 0.8rem; }
.work-link svg { width: 14px; height: 14px; }

/* LAPTOP MOCKUPS */
.featured-laptop, .mini-laptop { position: relative; }

.laptop-screen {
  position: relative;
  background: #1a1a1a;
  border-radius: 14px 14px 4px 4px;
  padding: 28px 12px 12px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.featured-laptop:hover .laptop-screen { transform: translateY(-6px) rotateX(2deg); }

.laptop-browser-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: linear-gradient(180deg, #2a2a2a 0%, #1f1f1f 100%);
  border-radius: 14px 14px 0 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 7px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
.browser-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-red { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green { background: #28c840; }
.browser-url {
  margin-left: auto;
  margin-right: auto;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.95rem;
  border-radius: 4px;
  font-weight: 400;
  transform: translateX(-22px);
}
.laptop-img {
  width: 100%;
  /* height:auto is REQUIRED here. The width/height attributes on the <img>
     act as presentational hints; without height:auto the height attribute
     wins as a literal pixel value, both dimensions become definite, and
     aspect-ratio below is ignored (which stretches the frame tall). */
  height: auto;
  display: block;
  border-radius: 2px;
  filter: brightness(0.95) saturate(1.05);
  transition: filter 0.4s ease;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  background: #0a0a0a;
}
.featured-laptop:hover .laptop-img { filter: brightness(1) saturate(1.1); }

.laptop-base {
  height: 14px;
  background: linear-gradient(180deg, #2a2a2a 0%, #181818 60%, #0c0c0c 100%);
  border-radius: 0 0 16px 16px;
  margin: 0 -22px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.laptop-base::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 4px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0 0 6px 6px;
}

/* FEATURED INFO PANEL */
.featured-info {
  padding: 2.5rem 2.5rem 2.8rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.featured-info::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 60px;
  background: var(--maroon);
  border-radius: 0 2px 2px 0;
}
.featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: #fff;
  background: var(--maroon);
  padding: 0.4rem 0.85rem;
  border-radius: 1px;
  margin-bottom: 1.4rem;
  width: fit-content;
}
.featured-badge::before { content: '★'; font-size: 0.65rem; }

.featured-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}
.featured-logo {
  width: 70px; height: 70px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--stone-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}
.featured-logo img,
.card-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.work-featured:hover .featured-logo {
  border-color: var(--maroon);
  transform: scale(1.04);
}
.featured-header-text { flex: 1; min-width: 0; }
.featured-header-text .work-tag { margin-bottom: 0.5rem; }
.featured-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink-deep);
}
.featured-desc {
  font-size: 0.95rem;
  color: var(--ink-on-stone-muted);
  line-height: 1.75;
  margin-bottom: 1.8rem;
  max-width: 480px;
}
.featured-meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  margin-bottom: 2rem;
  width: fit-content;
  border: 1px solid var(--stone-border);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.4);
}
.meta-item {
  padding: 0.7rem 1.4rem;
  border-right: 1px solid var(--stone-border);
}
.meta-item:last-child { border-right: none; }
.meta-label {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 0.2rem;
  font-weight: 700;
}
.meta-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--ink-deep);
  line-height: 1;
}
.featured-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--maroon);
  padding: 0.85rem 1.6rem;
  border-radius: 2px;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.2s, gap 0.2s, transform 0.15s, box-shadow 0.2s;
  width: fit-content;
  border: 1px solid var(--maroon);
  box-shadow: 0 2px 12px rgba(110, 31, 51, 0.3);
}
.featured-link:hover {
  background: var(--maroon-light);
  gap: 0.9rem;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(110, 31, 51, 0.5);
}
.featured-link svg { width: 14px; height: 14px; }

/* SECONDARY GRID */
.work-grid-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.work-card-new {
  padding: 1.8rem 1.6rem 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.work-card-new::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--maroon);
  border-radius: 8px 8px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.work-card-new:hover {
  background: var(--stone-bright-2);
  border-color: var(--frame);
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
}
.work-card-new:hover::before { transform: scaleX(1); }

.mini-laptop { margin-bottom: 1.4rem; }
.mini-screen {
  background: #1a1a1a;
  border-radius: 8px 8px 2px 2px;
  padding: 18px 6px 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  position: relative;
  transition: transform 0.4s ease;
}
.work-card-new:hover .mini-screen { transform: translateY(-3px); }
.mini-browser-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 18px;
  background: linear-gradient(180deg, #2a2a2a 0%, #1f1f1f 100%);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
}
.mini-browser-bar .browser-dot { width: 6px; height: 6px; }
.mini-screen img {
  width: 100%;
  /* Same as .laptop-img: height:auto lets aspect-ratio govern instead of the
     height attribute on the <img> tag. */
  height: auto;
  display: block;
  border-radius: 1px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  background: #0a0a0a;
  filter: brightness(0.95);
  transition: filter 0.4s;
}
.work-card-new:hover .mini-screen img { filter: brightness(1.05); }
.mini-base {
  height: 8px;
  background: linear-gradient(180deg, #2a2a2a 0%, #161616 100%);
  border-radius: 0 0 8px 8px;
  margin: 0 -12px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.card-logo {
  width: 48px; height: 48px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--stone-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}
.work-card-new:hover .card-logo {
  border-color: var(--maroon);
  transform: scale(1.05);
}
.card-header-text { flex: 1; min-width: 0; }
.card-header-text .work-tag { margin-bottom: 0.4rem; }

.work-card-new h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin-bottom: 0.6rem;
  color: var(--ink-deep);
}
.work-card-new p {
  font-size: 0.83rem;
  color: var(--ink-on-stone-muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 1.4rem;
}

/* ============================================================
   BEFORE / AFTER SLIDER
   ============================================================ */

.ba-wrap {
  margin-top: 2.5rem;
  position: relative;
}
.ba-wrap + .ba-wrap { margin-top: 4rem; }

.ba-slider {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  border: 1px solid var(--stone-border-strong);
  border-radius: 8px 8px 0 0;
}
.ba-img-before, .ba-img-after {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  pointer-events: none;
}
.ba-img-before { z-index: 1; }
.ba-img-after { z-index: 2; clip-path: inset(0 50% 0 0); }

.ba-slider::before, .ba-slider::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 3;
  pointer-events: none;
}
.ba-slider::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
}
.ba-slider::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
}

.ba-label {
  position: absolute;
  top: 1.5rem;
  z-index: 5;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  pointer-events: none;
  padding: 0.5rem 1.3rem;
  font-weight: 400;
}
.ba-label.before-label {
  left: 1.5rem;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  padding-right: 1.8rem;
}
.ba-label.after-label {
  right: 1.5rem;
  background: var(--maroon);
  color: #fff;
  border: 2px solid var(--maroon);
  box-shadow: -3px 3px 0 rgba(110, 31, 51, 0.4);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
  padding-left: 1.8rem;
}

.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.95);
  transform: translateX(-50%);
  z-index: 6;
  cursor: col-resize;
}
.ba-handle-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  background: #fff;
  border-radius: 50%;
  border: 3px solid var(--maroon);
  box-shadow: 0 0 0 4px rgba(110, 31, 51, 0.2), 0 6px 24px rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  color: var(--maroon);
  pointer-events: none;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.ba-info {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.6rem 2.5rem;
  border-radius: 0 0 8px 8px;
  border-top: none;
}
.ba-info-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--maroon);
  flex-shrink: 0;
  text-align: center;
  letter-spacing: 0.02em;
}
.ba-info-text { min-width: 0; }
.ba-info-text h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  line-height: 1.1;
  color: var(--ink-deep);
}
.ba-info-text p {
  font-size: 0.78rem;
  color: var(--ink-on-stone-muted);
  line-height: 1.5;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ba-tag {
  display: inline-block;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--maroon);
  padding: 0.22rem 0.6rem;
  border-radius: 1px;
  margin-bottom: 0.4rem;
  font-weight: 700;
}

/* ============================================================
   SERVICES
   ============================================================ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.service-item {
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
}
.service-item:hover {
  background: var(--stone-bright-2);
  border-color: var(--frame);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}
.service-icon {
  width: 44px; height: 44px;
  border: 1px solid var(--stone-border-strong);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem;
  font-size: 1.15rem;
  color: var(--maroon);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s;
  background: #fff;
}
.service-item:hover .service-icon {
  transform: rotate(90deg) scale(1.15);
  border-color: var(--maroon);
}
.service-item h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.55rem;
  color: var(--ink-deep);
}
.service-item p {
  font-size: 0.85rem;
  color: var(--ink-on-stone-muted);
  line-height: 1.65;
}

/* ============================================================
   WHY OTM
   ============================================================ */

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-top: 3rem;
}
.why-list { display: flex; flex-direction: column; }
.why-item {
  border-bottom: 1px solid var(--stone-border);
  border-left: 2px solid transparent;
  padding: 1.6rem 1.4rem 1.6rem 1.2rem;
  display: flex; gap: 1.5rem; align-items: flex-start;
  transition: border-left-color 0.3s ease, background 0.3s ease;
}
.why-item:first-child { border-top: 1px solid var(--stone-border); }
.why-item:hover {
  border-left-color: var(--maroon);
  background: rgba(110, 31, 51, 0.04);
}
.why-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  color: var(--maroon);
  min-width: 44px;
  padding-top: 0.05rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
.why-content h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--ink-deep);
}
.why-content p {
  font-size: 0.85rem;
  color: var(--ink-on-stone-muted);
  line-height: 1.65;
}

.why-visual {
  padding: 2.4rem;
  position: relative; overflow: hidden;
}
.compare-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  color: var(--ink-on-stone-muted);
}
.compare-label { letter-spacing: 0.06em; font-weight: 500; }
.compare-bar-wrap {
  flex: 1; margin: 0 1rem;
  height: 4px;
  background: rgba(26, 24, 20, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.compare-bar {
  height: 100%; border-radius: 2px;
  background: var(--maroon);
  transition: width 1s ease;
}
.compare-bar.low { background: var(--ink-on-stone-dim); }
.compare-val { min-width: 28px; text-align: right; font-weight: 700; }
.compare-val.accent { color: var(--maroon); font-weight: 700; }
.compare-val.dim { color: var(--ink-on-stone-dim); }
.compare-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--ink-deep);
  margin-bottom: 1.4rem;
  text-transform: uppercase;
}
.compare-title span { color: var(--maroon); }
.compare-title.dim { color: var(--ink-on-stone-dim); }
.compare-title .dim { color: var(--ink-on-stone-dim); }
.vs-divider {
  border: none;
  border-top: 1px solid var(--stone-border);
  margin: 1.5rem 0;
}

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

.carousel-wrap {
  position: relative;
  margin-top: 3rem;
  overflow: hidden;
  border: 1px solid var(--stone-border);
  border-radius: 8px;
  background: var(--stone-bright);
}
.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}
.review-card-link {
  display: block;
  min-width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: none;
  transition: background 0.25s;
}
.review-card-link:hover {
  background: rgba(255, 255, 255, 0.35);
}
/* A11Y: give the carousel a visible focus ring when tabbed to, so keyboard
   users can tell where they are. Focus also pauses auto-advance (script.js). */
.review-card-link:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: -4px;
  background: rgba(255, 255, 255, 0.35);
}
.reviews-google-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--maroon);
  text-decoration: none;
  font-weight: 700;
  padding: 0.6rem 1rem;
  border: 1px solid var(--frame);
  border-radius: 3px;
  background: rgba(110, 31, 51, 0.04);
  transition: background 0.25s, border-color 0.25s, gap 0.25s, box-shadow 0.25s;
}
.reviews-google-cta:hover {
  background: rgba(110, 31, 51, 0.1);
  border-color: var(--maroon);
  gap: 0.85rem;
  box-shadow: 0 0 18px rgba(110, 31, 51, 0.25);
}
.reviews-google-cta-arrow {
  display: inline-block;
  transition: transform 0.25s;
}
.reviews-google-cta:hover .reviews-google-cta-arrow {
  transform: translateX(2px);
}
.testimonial-card {
  min-width: 100%;
  padding: 3rem 3.5rem;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.stars {
  color: var(--maroon);
  font-size: 1rem;
  letter-spacing: 0.12em;
  margin-bottom: 1.4rem;
}
.testimonial-card blockquote {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-on-stone);
  /* Weight 300 matches the only italic face shipped (DM Sans 300 italic).
     Asking for 400 italic here made the browser pick the 300 italic anyway,
     since style is matched before weight. Stating it removes the guesswork. */
  font-weight: 300;
  font-style: italic;
  margin-bottom: 2rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--maroon);
  max-width: 720px;
}
.testimonial-author {
  display: flex; align-items: center; gap: 0.85rem;
}
.author-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--maroon-glow);
  border: 1px solid var(--frame);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.author-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-deep);
}
.author-detail {
  font-size: 0.74rem;
  color: var(--ink-on-stone-dim);
  margin-top: 0.15rem;
}
.carousel-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem;
  border-top: 1px solid var(--stone-border);
  background: rgba(26, 24, 20, 0.04);
}
.carousel-dots { display: flex; gap: 0.5rem; align-items: center; }
/* A11Y: the dot itself stays 7px visually, but the button's tap target is
   padded out to 24px so it clears the minimum touch target size. */
.carousel-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-on-stone-dim);
  cursor: none;
  transition: background 0.25s, transform 0.25s;
  border: 8px solid transparent;
  background-clip: padding-box;
  box-sizing: content-box;
  padding: 0;
}
.carousel-dot.active {
  background: var(--maroon);
  background-clip: padding-box;
  transform: scale(1.4);
}
.carousel-dot:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: -6px;
}
.carousel-btns { display: flex; gap: 0.5rem; }
.carousel-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--stone-border-strong);
  background: transparent;
  color: var(--ink-on-stone);
  border-radius: 2px;
  font-size: 1rem;
  cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.carousel-btn:hover {
  border-color: var(--maroon);
  color: #fff;
  background: var(--maroon);
}
.carousel-btn:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 2px;
}

/* ============================================================
   PRICING (single flat rate)
   ============================================================ */

.pricing-single {
  display: grid;
  grid-template-columns: 380px 1fr;
  margin-top: 3rem;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--stone-border-strong);
  border-radius: 10px;
}
.pricing-single-left {
  color: var(--ink-text);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    /* Soft inner halo (light radiating inward from edges) */
    inset 0 0 32px rgba(255, 255, 255, 0.08),
    /* Top edge, brightest, like key light */
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    /* Left edge, rim light */
    inset 1px 0 0 rgba(255, 255, 255, 0.2),
    /* Right edge, rim light */
    inset -1px 0 0 rgba(255, 255, 255, 0.2),
    /* Bottom edge, softer, like ambient bounce */
    inset 0 -1px 0 rgba(255, 255, 255, 0.16);
}
.pricing-single-right {
  background: var(--stone-bright);
  padding: 3rem 2.5rem;
}
.pricing-features-title {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700;
}
.pricing-features-title::before {
  content: '';
  display: block; width: 22px; height: 1px;
  background: var(--maroon);
}
.pricing-mark-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-text-dim);
  font-weight: 700;
  margin-bottom: 1.6rem;
}
.pricing-mark-num {
  color: var(--maroon-light);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.pricing-mark-divider {
  display: block;
  width: 18px; height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.pricing-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 5.5rem;
  line-height: 1;
  margin-bottom: 0.9rem;
  color: var(--ink-text);
}
.pricing-price sup {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  vertical-align: super;
  margin-right: 0.1rem;
  color: var(--maroon-light);
}
.pricing-philosophy {
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--ink-text);
  margin-bottom: 0.7rem;
  letter-spacing: 0.005em;
}
.pricing-philosophy-sub {
  font-size: 0.78rem;
  color: var(--ink-text-muted);
  line-height: 1.65;
  margin-bottom: 1.7rem;
  font-weight: 400;
}
.pricing-cta {
  display: inline-block;
  margin-top: 0;
  align-self: flex-start;
}
.pricing-seal {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 234, 232, 0.42);
  font-weight: 700;
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.pricing-seal-dot {
  width: 3px; height: 3px;
  background: var(--maroon-light);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(140, 45, 69, 0.7);
}
.feature-group {
  margin-bottom: 1.8rem;
}
.feature-group:last-child {
  margin-bottom: 0;
}
.feature-group-header {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--stone-border);
}
.feature-group-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  color: var(--maroon);
  letter-spacing: 0.04em;
  line-height: 1;
}
.feature-group-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-deep);
  line-height: 1;
}
.pricing-features {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.feature-group .pricing-features {
  grid-template-columns: 1fr;
}
.pricing-features li {
  font-size: 0.82rem;
  color: var(--ink-on-stone);
  padding: 0.55rem 0.5rem 0.55rem 0;
  border-bottom: 1px solid var(--stone-border);
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 400;
}
.feature-group .pricing-features li:last-child { border-bottom: none; }
.pricing-features li::before {
  content: '';
  width: 12px; height: 1px;
  background: var(--maroon);
  flex-shrink: 0;
}
.pricing-disclaimer {
  font-size: 0.74rem;
  color: var(--ink-text-muted);
  line-height: 1.65;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-border);
  font-style: italic;
}

/* ============================================================
   PROCESS
   ============================================================ */

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.process-step {
  padding: 2.4rem 1.8rem;
  position: relative;
  overflow: hidden;
}
.process-step:hover {
  background: var(--stone-bright-2);
  border-color: var(--frame);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}
.process-step-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4.6rem;
  line-height: 1;
  color: var(--maroon);
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
  transition: color 0.3s, transform 0.3s;
}
.process-step:hover .process-step-num {
  color: var(--maroon-light);
  transform: translateX(4px);
}
.process-step-tag {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--maroon);
  border: 1px solid var(--frame);
  padding: 0.22rem 0.55rem;
  border-radius: 1px;
  margin-bottom: 0.85rem;
  font-weight: 700;
  background: rgba(110, 31, 51, 0.06);
}
.process-step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--ink-deep);
}
.process-step p {
  font-size: 0.83rem;
  color: var(--ink-on-stone-muted);
  line-height: 1.65;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */

.faq-list {
  margin-top: 3rem;
  overflow: hidden;
  counter-reset: faq-counter;
}
.faq-item {
  border-bottom: 1px solid var(--stone-border);
  border-left: 2px solid transparent;
  position: relative;
  counter-increment: faq-counter;
  transition: border-left-color 0.3s ease, background 0.3s ease;
}
.faq-item:hover {
  border-left-color: rgba(110, 31, 51, 0.45);
}
.faq-item:has(.faq-question.open) {
  border-left-color: var(--maroon);
  background: rgba(110, 31, 51, 0.05);
}
.faq-item:last-child { border-bottom: none; }

.faq-question {
  width: 100%;
  background: none;
  border: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 1.4rem 1.05rem 3.4rem;
  position: relative;
  text-align: left;
  color: var(--ink-deep);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: none;
  transition: background 0.2s, color 0.2s;
  gap: 1rem;
}
.faq-question::before {
  content: counter(faq-counter, decimal-leading-zero);
  position: absolute;
  left: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.62rem;
  color: var(--maroon);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.faq-question:hover { color: var(--maroon); }
.faq-question.open { color: var(--maroon); }
.faq-question:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: -2px;
}

.faq-icon {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border: 1px solid var(--stone-border-strong);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: var(--ink-on-stone-muted);
  transition: transform 0.3s, border-color 0.2s, color 0.2s, background 0.2s;
  background: #fff;
}
.faq-question.open .faq-icon {
  transform: rotate(45deg);
  border-color: var(--maroon);
  color: #fff;
  background: var(--maroon);
}
/* A11Y: max-height:0 with overflow:hidden hides an answer from the eye but
   leaves every word of it in the accessibility tree, so a screen reader
   used to announce all 25 answers as though every panel were open.
   visibility:hidden removes it from that tree and still animates. The delay
   on the way in is what lets the open transition still be visible. */
.faq-answer {
  max-height: 0; overflow: hidden;
  visibility: hidden;
  transition: max-height 0.4s ease, visibility 0s linear 0.4s;
  background: rgba(255, 255, 255, 0.45);
}
/* Raised from 320px so longer answers (the FAQ page especially) are not
   silently clipped when an item opens. */
.faq-answer.open {
  max-height: 900px;
  visibility: visible;
  transition: max-height 0.4s ease, visibility 0s linear 0s;
}
.faq-answer p {
  padding: 0.85rem 1.4rem 0.85rem 3.4rem;
  font-size: 0.88rem;
  color: var(--ink-on-stone);
  line-height: 1.7;
  font-weight: 400;
}

/* ============================================================
   TOOLTIP
   ============================================================ */

.tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.tooltip-icon {
  width: 14px; height: 14px;
  border: 1px solid var(--ink-on-stone-dim);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--ink-on-stone-dim);
  cursor: none;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.tooltip-icon:hover {
  border-color: var(--maroon);
  color: #fff;
  background: var(--maroon);
}
.tooltip-box {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--ink-text);
  border: 1px solid var(--maroon);
  border-radius: 2px;
  padding: 0.55rem 0.8rem;
  font-size: 0.72rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 50;
  width: 240px;
  white-space: normal;
  text-align: center;
  line-height: 1.5;
}
.tooltip-wrap:hover .tooltip-box { opacity: 1; }

/* ============================================================
   CTA STRIP (full-bleed dark anchor)
   ============================================================ */

.cta-strip {
  background:
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.52) 0%,
      rgba(10, 10, 10, 0.65) 100%),
    url('assets/cta-bg.jpg') center center / cover no-repeat,
    var(--ink);
  color: var(--ink-text);
  border: 1px solid rgba(110, 31, 51, 0.35);
  border-radius: 4px;
  outline: 1px solid var(--frame);
  outline-offset: 10px;
  padding: 4rem 3rem;
  margin: 80px auto;
  max-width: 1240px;
  width: calc(100% - 6rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 18px 56px rgba(0, 0, 0, 0.5);
}
.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(110, 31, 51, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(110, 31, 51, 0.15) 0%, transparent 50%);
  pointer-events: none;
}
.cta-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cta-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--maroon-light);
  margin-bottom: 1.2rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.cta-eyebrow::before, .cta-eyebrow::after {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--maroon-light);
}
.cta-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.1;
  color: var(--ink-text);
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}
.cta-sub {
  font-size: 1rem;
  color: var(--ink-text-muted);
  line-height: 1.7;
  margin-bottom: 2.2rem;
  font-weight: 300;
}
.cta-btn { font-size: 0.85rem; padding: 1rem 2.6rem; }

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

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
  margin-top: 3rem;
}
.contact-info {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.contact-info p {
  font-size: 0.95rem;
  color: var(--ink-on-stone);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.contact-detail {
  display: flex; align-items: center; gap: 0.85rem;
  font-size: 0.95rem;
  color: var(--ink-deep);
  margin-bottom: 1.1rem;
  font-weight: 500;
}
.contact-detail-icon {
  width: 30px; height: 30px;
  border: 1px solid var(--frame);
  background: rgba(110, 31, 51, 0.08);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  color: var(--maroon);
  flex-shrink: 0;
  font-weight: 700;
}

.contact-promises {
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--stone-border);
}
.contact-promises-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--maroon);
  font-weight: 700;
  margin-bottom: 1rem;
}
.contact-promises-line {
  display: block;
  width: 22px; height: 1px;
  background: var(--maroon);
}
.contact-promises-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-promises-list li {
  font-size: 0.85rem;
  color: var(--ink-on-stone);
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--stone-border);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
}
.contact-promises-list li:last-child {
  border-bottom: none;
}
.contact-promises-list li::before {
  content: '';
  width: 12px; height: 1px;
  background: var(--maroon);
  flex-shrink: 0;
}

.contact-form {
  display: flex; flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--stone-border);
}
.form-field {
  padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  border-right: 1px solid var(--stone-border);
  background: var(--stone-bright);
  transition: background 0.2s;
}
.form-field:last-child { border-right: none; }
.form-row > .form-field:last-child { border-right: none; }
.contact-form > .form-field { border-bottom: 1px solid var(--stone-border); }
.contact-form > .form-field:last-of-type { border-bottom: none; }
.form-field label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--maroon);
  font-weight: 700;
}
.form-field input,
.form-field select,
.form-field textarea {
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink-deep);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  resize: none;
  width: 100%;
}
.form-field select option {
  background: var(--stone-bright);
  color: var(--ink-deep);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ink-on-stone-dim);
}
.form-field:focus-within {
  background: var(--stone-bright-2);
}
.form-submit-row {
  background: rgba(26, 24, 20, 0.04);
  padding: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--stone-border);
}
.form-note {
  font-size: 0.78rem;
  color: var(--ink-on-stone-muted);
  font-weight: 400;
}
.form-submit {
  background: var(--maroon);
  color: #fff;
  padding: 0.85rem 2rem;
  border: 1px solid var(--maroon);
  border-radius: 2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
  box-shadow: 0 2px 14px rgba(110, 31, 51, 0.3);
}
.form-submit:hover {
  background: var(--maroon-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(110, 31, 51, 0.5);
}

.form-success {
  display: none;
  background: var(--stone-bright);
  border: 1px solid var(--frame);
  border-radius: 8px;
  padding: 2.5rem;
  text-align: center;
}
.form-success.show { display: block; }
.form-success h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  color: var(--maroon);
  margin-bottom: 0.5rem;
}
.form-success p {
  font-size: 0.9rem;
  color: var(--ink-on-stone);
}

/* ============================================================
   FOOTER (full-bleed dark anchor)
   ============================================================ */

footer {
  border-top: 2px solid var(--maroon);
  padding: 2.5rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.footer-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--ink-text-muted);
}
.footer-logo span { color: var(--maroon); }
.footer-copy {
  font-size: 0.75rem;
  color: var(--ink-text-dim);
}
/* The phone number in the footer is a tel: link on every page, which is the
   site-wide NAP signal local search reads. It inherits the muted footer
   colour so it does not shout, and picks up an underline on hover so it
   reads as tappable rather than as plain text. */
.footer-copy a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-copy a:hover {
  color: var(--maroon-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-links { display: flex; gap: 2rem; }
.footer-links a {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-text-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--maroon-light); }

/* ============================================================
   FLOATING ELEMENTS
   ============================================================ */

#progress-bar {
  position: fixed; top: 0; left: 0; z-index: 200;
  /* PERF: this bar is updated on every scroll event. Animating width forces
     a layout pass each time (the "forced reflow" flag). It now sits at full
     width and is scaled with transform, which is GPU-composited and costs
     the main thread nothing. script.js sets scaleX() instead of width. */
  height: 3px; width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--maroon);
  transition: transform 0.1s linear;
  will-change: transform;
}
#back-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 100;
  width: 44px; height: 44px;
  background: var(--maroon);
  border: 1px solid var(--maroon);
  border-radius: 2px;
  color: #fff; font-size: 1.1rem;
  cursor: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(110, 31, 51, 0.4);
}
#back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#back-top:hover { background: var(--maroon-light); }
#float-contact {
  position: fixed; bottom: 2rem; left: 2rem; z-index: 100;
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--maroon);
  color: #fff;
  padding: 0.75rem 1.3rem;
  border-radius: 2px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--maroon);
  cursor: none;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(110, 31, 51, 0.4);
}
#float-contact.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#float-contact:hover { background: var(--maroon-light); }
#float-contact::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; opacity: 0.85;
  animation: blink 1.6s ease infinite;
  will-change: opacity;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
  #float-contact::before { animation: none; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* A11Y: for visitors who prefer reduced motion, show all content
   immediately instead of sliding it up. Content still appears, it just
   does not travel. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   TOUCH DEVICE OVERRIDES (no custom cursor on touch)
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
  .cursor, .cursor-ring { display: none !important; }
  body, a, button, input, select, textarea { cursor: auto !important; }
}

/* ============================================================
   CURSOR FAILSAFE (no-JS / script error)
   Every `cursor: none` in this file assumes script.js is running and
   painting the replacement dot and ring. If it is not, that assumption
   fails badly: the real pointer is hidden, the replacement never moves,
   and a desktop visitor is left with no visible cursor anywhere on the
   page and no obvious cause.

   script.js adds .custom-cursor to <html> as soon as it runs and confirms
   a pointing device. Until that happens, this rule hands the system cursor
   back on everything except the two before/after slider handles, which want
   col-resize regardless. The specificity here (0,3,1) deliberately outranks
   the scattered single-class `cursor: none` declarations above.

   Trade-off worth knowing: the real cursor is briefly visible before the
   script runs, since script.js sits at the end of <body>. A flicker is a
   far better failure mode than an invisible pointer.
   ============================================================ */
html:not(.custom-cursor) *:not(.ba-slider):not(.ba-handle) {
  cursor: auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid-new { grid-template-columns: repeat(2, 1fr); }
  .work-featured {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-bottom: 4rem;
    margin-bottom: 4rem;
  }
  .featured-info { max-width: 600px; }
  section {
    padding: 50px 44px;
    margin: 60px auto;
    width: calc(100% - 4rem);
  }
}

@media (max-width: 900px) {
  nav { padding: 1rem 1.5rem !important; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-links {
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 280px;
    background: linear-gradient(180deg, #C8CCC9 0%, #B5BAB8 100%);
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    border-left: 1px solid var(--stone-border-strong);
    gap: 1.4rem;
    align-items: flex-start;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a {
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    color: var(--ink-deep);
  }
  .nav-mobile-cta { display: block; margin-top: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--stone-border-strong); width: 100%; }
  .nav-mobile-cta a {
    background: var(--maroon);
    color: #fff;
    padding: 0.75rem 1.4rem;
    border-radius: 2px;
    display: inline-block;
    letter-spacing: 0.1em;
  }

  section.hero { padding: 7rem 1.5rem 4rem; min-height: 100svh; }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    max-width: 320px;
  }
  .btn-primary, .btn-ghost {
    text-align: center;
    font-size: 0.78rem;
    padding: 0.95rem 1rem;
  }

  section {
    padding: 42px 26px;
    margin: 50px auto;
    width: calc(100% - 2rem);
    outline-offset: 6px;
  }

  .stat-item {
    padding: 0.95rem 0.5rem;
  }
  .stat-num { font-size: 1.5rem; letter-spacing: 0; }
  .stat-label { font-size: 0.5rem; letter-spacing: 0.1em; }

  .why-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .form-row { grid-template-columns: 1fr; }
  .form-row .form-field { border-right: none; border-bottom: 1px solid var(--stone-border); }

  .ba-info { grid-template-columns: 1fr; gap: 1rem; padding: 1.4rem 1.6rem; }
  .ba-info-num { display: none; }
  .ba-slider { height: auto; min-height: 200px; }
  .ba-img-before, .ba-img-after {
    object-fit: contain;
    object-position: top center;
    background: #0a0a0a;
    position: relative;
    width: 100%;
    height: auto;
  }
  .ba-img-after {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
  }

  .pricing-single { grid-template-columns: 1fr; }
  .pricing-single-left { border-right: none; border-bottom: 1px solid var(--ink-border); }

  .cta-strip {
    padding: 3rem 1.6rem;
    margin: 50px auto;
    width: calc(100% - 2rem);
    outline-offset: 6px;
  }

  /* The footer links used to be display:none below this width, which meant
     the privacy policy, terms, and AI Search page were unreachable from a
     phone (none of them are in the nav either). Most visitors are on a
     phone, and a privacy policy nobody can open is not much of a policy.
     They now wrap into a centered block instead of disappearing. */
  footer {
    flex-direction: column;
    gap: 1.4rem;
    text-align: center;
    padding: 2.2rem 1.5rem 2.4rem;
  }
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.1rem;
    max-width: 420px;
    order: 3;
  }
  .footer-links a {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.15rem;
  }

  .hero-bg-text { display: none; }

  .hero-corner { width: 16px; height: 16px; }
  .hero-corner-tl { top: 80px; left: 14px; }
  .hero-corner-tr { top: 80px; right: 14px; }
  .hero-corner-bl { bottom: 60px; left: 14px; }
  .hero-corner-br { bottom: 60px; right: 14px; }
  .hero-vertical-meta { display: none; }
  .nav-logo-img { height: 52px; }
}

@media (max-width: 700px) {
  .work-grid-new { grid-template-columns: 1fr; gap: 1.5rem; }
  .work-featured { gap: 2rem; }
  .featured-meta { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .meta-item { padding: 0.6rem 0.8rem; }
  .meta-value { font-size: 1.1rem; }
  .laptop-screen { padding: 22px 8px 8px; border-radius: 10px 10px 3px 3px; }
  .laptop-browser-bar { height: 22px; border-radius: 10px 10px 0 0; }
  .browser-url { font-size: 0.55rem; padding: 0.12rem 0.6rem; }
  .browser-dot { width: 8px; height: 8px; }
  .work-card-new { padding: 1.5rem 1.3rem 1.7rem; }
  .work-card-new h3 { font-size: 1.4rem; }
  .featured-logo { width: 56px; height: 56px; }
  .card-logo { width: 42px; height: 42px; }
  .testimonial-card { padding: 2rem 1.6rem; }
  .testimonial-card blockquote { font-size: 0.95rem; padding-left: 1rem; }

  /* Keep the laptop bases flush inside their frame instead of poking past
     the screen edge, which is what pushed the page wider than the viewport. */
  .laptop-base { margin-left: 0; margin-right: 0; }
  .mini-base { margin-left: 0; margin-right: 0; }
}

@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .pricing-features { grid-template-columns: 1fr; }
  .pricing-single-right { padding: 2rem 1.6rem; }
  .pricing-single-left { padding: 2rem 1.6rem; }
  section { padding: 36px 20px; outline-offset: 4px; }
  section.hero { padding: 6rem 1.2rem 3rem; }
  .hero-title { font-size: clamp(2.2rem, 9vw, 3rem); }
}

/* ============================================
   LANGUAGE TOGGLE (sticky button)
   Sits above #back-top in the bottom-right corner.
   Always visible. Metallic stone palette + burgundy accent.
   ============================================ */
#lang-toggle {
  position: fixed;
  bottom: 5.5rem;
  right: 2rem;
  z-index: 101;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.05rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--maroon);
  text-decoration: none;
  cursor: none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.18) 22%,
      rgba(255,255,255,0.02) 50%,
      rgba(0,0,0,0.05) 100%),
    var(--stone-bright);
  border: 2px solid var(--maroon);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 4px 14px rgba(0,0,0,0.22),
    0 0 0 1px rgba(110, 31, 51, 0.18),
    0 0 18px rgba(110, 31, 51, 0.18);
  transition: gap 0.25s ease, background 0.25s ease, border-color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease, color 0.2s ease;
}
#lang-toggle:hover {
  gap: 0.85rem;
  border-color: var(--maroon-light);
  color: var(--maroon-light);
  transform: translateY(-2px);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.7) 0%,
      rgba(255,255,255,0.25) 22%,
      rgba(255,255,255,0.05) 50%,
      rgba(0,0,0,0.05) 100%),
    var(--stone-bright-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 6px 22px rgba(110, 31, 51, 0.4),
    0 0 0 4px rgba(110, 31, 51, 0.1),
    0 0 26px rgba(110, 31, 51, 0.28);
}
#lang-toggle:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 2px 4px rgba(0,0,0,0.1),
    0 2px 8px rgba(0,0,0,0.18);
}
#lang-toggle:focus-visible {
  outline: 2px solid var(--maroon-light);
  outline-offset: 3px;
}
#lang-toggle .lang-globe {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--maroon);
  transform: translateY(-1px);
  transition: transform 0.4s ease;
}
#lang-toggle:hover .lang-globe {
  transform: translateY(-1px) rotate(180deg);
}

/* Show only the relevant label based on current lang.
   When in EN, show the Spanish prompt. When in ES, show the English prompt. */
.lang-label { display: none; }
body[data-lang="en"] #lang-toggle .lang-label-es { display: inline; }
body[data-lang="es"] #lang-toggle .lang-label-en { display: inline; }

@media (max-width: 600px) {
  #lang-toggle {
    bottom: 5rem;
    right: 1rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    gap: 0.45rem;
  }
  #lang-toggle .lang-globe { font-size: 0.85rem; }
}

/* ============================================
   ACTIVE NAV STATE
   ============================================ */
.nav-links a.active {
  color: var(--maroon);
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  background: var(--maroon);
  border-radius: 1px;
}
.nav-links li { position: relative; }

/* ============================================
   INNER PAGE HERO (work, about, contact, faq)
   Smaller than landing hero, no stats block, no marquee
   ============================================ */
.hero.hero-inner {
  min-height: 56vh;
  padding-top: 7rem;
  padding-bottom: 5rem;
}
.hero-content.hero-content-inner {
  max-width: 880px;
}
.hero-title.hero-title-inner {
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 0.94;
  margin-bottom: 1.4rem;
}
.hero-sub.hero-sub-inner {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  max-width: 640px;
  margin-bottom: 0;
}

/* ============================================
   VIEW ALL WORK LINK (landing page)
   ============================================ */
.work-view-all {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 3rem auto 0;
  padding: 1rem 1.8rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--maroon);
  text-decoration: none;
  border: 2px solid var(--maroon);
  border-radius: 3px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.45) 0%,
      rgba(255,255,255,0.12) 30%,
      rgba(0,0,0,0.05) 100%),
    var(--stone-bright);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 4px 16px rgba(0,0,0,0.12),
    0 0 14px rgba(110, 31, 51, 0.14);
  transition: all 0.3s ease;
  width: fit-content;
  cursor: none;
}
.work-view-all-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.work-view-all:hover {
  gap: 1.1rem;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.6) 0%,
      rgba(255,255,255,0.2) 30%,
      rgba(0,0,0,0.05) 100%),
    var(--stone-bright-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 6px 22px rgba(110, 31, 51, 0.3),
    0 0 22px rgba(110, 31, 51, 0.22);
  transform: translateY(-2px);
}
.work-view-all:hover .work-view-all-arrow {
  transform: translateX(4px);
}

/* ============================================
   WORK PAGE CATEGORY HEADERS
   ============================================ */
.work-category {
  padding-top: 2rem;
  padding-bottom: 4rem;
}
.category-header {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 3rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--stone-border);
}
.category-label {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}
.category-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--maroon);
  opacity: 0.7;
}
.category-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing: 0.04em;
  color: var(--ink-on-stone);
  font-weight: 400;
}
.category-count {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--maroon);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--frame);
  border-radius: 2px;
  background: rgba(255,255,255,0.4);
  white-space: nowrap;
}
.category-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--stone-border-strong), transparent);
}
.work-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.work-grid-1 {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .category-header { flex-wrap: wrap; gap: 0.8rem; }
  .category-line { display: none; }
  .work-grid-2, .work-grid-1 { grid-template-columns: 1fr; max-width: 100%; }
}

/* ============================================
   ABOUT PAGE - PORTRAIT INTRO SECTION
   ============================================ */
.about-intro {
  padding: 5rem 6vw 6rem;
}
.about-intro-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 5rem;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}
.about-portrait-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-portrait-frame {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.25),
    0 0 0 1px var(--frame-soft),
    0 0 30px rgba(110, 31, 51, 0.18);
}
.about-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: contrast(1.04) saturate(0.92);
}
.about-portrait-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(110, 31, 51, 0.08) 100%),
    linear-gradient(135deg, rgba(110, 31, 51, 0.05), transparent 40%);
  pointer-events: none;
}
.about-portrait-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: var(--maroon);
  z-index: 2;
}
.about-portrait-corner-tl {
  top: -2px; left: -2px;
  border-top: 2px solid;
  border-left: 2px solid;
}
.about-portrait-corner-tr {
  top: -2px; right: -2px;
  border-top: 2px solid;
  border-right: 2px solid;
}
.about-portrait-corner-bl {
  bottom: -2px; left: -2px;
  border-bottom: 2px solid;
  border-left: 2px solid;
}
.about-portrait-corner-br {
  bottom: -2px; right: -2px;
  border-bottom: 2px solid;
  border-right: 2px solid;
}
.about-portrait-meta {
  text-align: center;
  margin-top: 1.6rem;
}
.about-portrait-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  color: var(--ink-on-stone);
  margin-bottom: 0.3rem;
}
.about-portrait-role {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 0.4rem;
}
.about-portrait-location {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-on-stone-muted);
}
.about-intro-text .section-label {
  margin-bottom: 1rem;
}
.about-intro-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.0;
  letter-spacing: 0.01em;
  color: var(--ink-on-stone);
  margin-bottom: 1.6rem;
}
.about-intro-lead {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-on-stone);
  margin-bottom: 1.1rem;
  font-weight: 500;
}
.about-intro-text p {
  color: var(--ink-on-stone);
  line-height: 1.7;
  margin-bottom: 1rem;
  font-weight: 400;
}
@media (max-width: 900px) {
  .about-intro-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 540px;
  }
  .about-portrait-frame {
    max-width: 300px;
    margin: 0 auto;
  }
  .about-intro-text { text-align: center; }
  .about-intro-text .section-label,
  .about-intro-text .contact-promises-line { display: none; }
}

/* ============================================
   ABOUT PAGE - STORY SECTION
   Stone metallic background, dark text, burgundy accents
   ============================================ */
.about-story {
  padding: 5rem 6vw;
  position: relative;
}
.about-story-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.about-story-content {
  margin-top: 2.4rem;
  padding: 2.8rem 2.6rem 2.4rem;
  border-radius: 10px 10px 6px 6px;
  border-top: 3px solid var(--maroon);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.15) 30%,
      rgba(0,0,0,0.04) 100%),
    var(--stone-bright);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 8px 24px rgba(0,0,0,0.12),
    0 0 0 1px var(--stone-border);
  position: relative;
}
.about-story-content p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-on-stone);
  margin-bottom: 1.4rem;
}
.about-story-content p:last-child { margin-bottom: 0; }
.about-story-pullquote {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em;
  color: var(--maroon) !important;
  padding: 1.5rem 1.7rem !important;
  margin: 2.2rem -0.6rem !important;
  border-left: 3px solid var(--maroon);
  background:
    linear-gradient(180deg,
      rgba(110, 31, 51, 0.06) 0%,
      rgba(110, 31, 51, 0.02) 100%);
  border-radius: 0 6px 6px 0;
  font-weight: 400 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

/* ============================================
   ABOUT PAGE - APPROACH SECTION (4 cards)
   ============================================ */
.about-approach {
  padding: 5rem 6vw;
}
.about-approach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1080px;
  margin: 2.4rem auto 0;
}
.about-approach-item {
  padding: 2rem 1.8rem 2.2rem;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.5) 0%,
      rgba(255,255,255,0.15) 30%,
      rgba(0,0,0,0.04) 100%),
    var(--stone);
  border-radius: 12px 12px 4px 4px;
  border-top: 3px solid var(--maroon);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 6px 18px rgba(0,0,0,0.1);
  position: relative;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease,
    box-shadow 0.35s ease,
    border-top-width 0.25s ease;
}
.about-approach-item:hover {
  transform: translateY(-5px);
  border-top-width: 5px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.6) 0%,
      rgba(255,255,255,0.22) 30%,
      rgba(0,0,0,0.03) 100%),
    var(--stone-bright);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 14px 36px rgba(0, 0, 0, 0.15),
    0 0 22px rgba(110, 31, 51, 0.18);
}
.about-approach-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.6rem;
  letter-spacing: 0.04em;
  color: var(--maroon);
  line-height: 1;
  margin-bottom: 0.6rem;
  transition: color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-approach-item:hover .about-approach-num {
  color: var(--maroon-light);
  transform: translateX(3px);
}
.about-approach-item h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  color: var(--ink-on-stone);
  margin-bottom: 0.7rem;
  font-weight: 400;
}
.about-approach-item p {
  color: var(--ink-on-stone-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
@media (max-width: 700px) {
  .about-approach-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ABOUT PAGE - WHY $800 SECTION
   Stone metallic background, dark text
   ============================================ */
.about-why {
  padding: 5rem 6vw;
  position: relative;
}
.about-why-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.about-why-content {
  margin-top: 2.4rem;
  padding: 2.8rem 2.6rem 2.4rem;
  border-radius: 10px 10px 6px 6px;
  border-top: 3px solid var(--maroon);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.15) 30%,
      rgba(0,0,0,0.04) 100%),
    var(--stone-bright);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 8px 24px rgba(0,0,0,0.12),
    0 0 0 1px var(--stone-border);
}
.about-why-content p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-on-stone);
  margin-bottom: 1.4rem;
}
.about-why-content p:last-child { margin-bottom: 0; }

/* About reviews section spacing */
.about-reviews {
  padding-top: 2rem;
}

/* ============================================
   CONTACT PAGE - OPTIONS LAYOUT
   ============================================ */
.contact-options {
  padding: 5rem 6vw;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact-option {
  padding: 3rem 2.5rem 3.2rem;
  border-radius: 8px;
  position: relative;
}
.contact-schedule {
  border: 1px solid var(--maroon);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 40px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(110, 31, 51, 0.22);
  color: var(--ink-text);
}
.contact-message {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.5) 0%,
      rgba(255,255,255,0.15) 30%,
      rgba(0,0,0,0.04) 100%),
    var(--stone);
  border: 1px solid var(--stone-border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 10px 30px rgba(0,0,0,0.12);
}
.contact-option-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.contact-option-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.04em;
  color: var(--maroon-light);
  line-height: 1;
}
.contact-schedule .contact-option-num { color: var(--maroon-light); }
.contact-message .contact-option-num { color: var(--maroon); }
.contact-option-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 2px;
}
.contact-schedule .contact-option-eyebrow {
  color: var(--ink-text);
  background: var(--maroon);
  border: 1px solid var(--maroon-light);
}
.contact-message .contact-option-eyebrow {
  color: var(--maroon);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--frame);
}
.contact-option-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  font-weight: 400;
}
.contact-schedule .contact-option-title { color: var(--ink-text); }
.contact-message .contact-option-title { color: var(--ink-on-stone); }
.contact-option-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.6rem;
}
.contact-schedule .contact-option-desc { color: var(--ink-text-muted); }
.contact-message .contact-option-desc { color: var(--ink-on-stone-muted); }
.contact-schedule-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.contact-schedule-bullets li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--ink-text-muted);
  font-size: 0.98rem;
  line-height: 1.5;
}
.contact-schedule-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  background: var(--maroon-light);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(140, 45, 69, 0.6);
}
.contact-schedule-btn {
  font-size: 0.95rem !important;
  padding: 1rem 1.6rem !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  cursor: none;
  border: none;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
}
.contact-schedule-btn svg {
  width: 18px;
  height: 18px;
}
.contact-divider-wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 0 2.5rem;
}
.contact-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stone-border-strong), transparent);
}
.contact-divider-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  color: var(--maroon);
  padding: 0.3rem 0.9rem;
  background: var(--stone-bright);
  border: 1px solid var(--frame);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(110, 31, 51, 0.08);
}
.contact-promises-section {
  padding: 1rem 6vw 3rem;
  max-width: 1080px;
  margin: 0 auto;
}
.contact-promises-section .contact-promises {
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .contact-option { padding: 2rem 1.4rem 2.4rem; }
  .contact-divider-wrap { padding: 0 1rem; }
}

/* ============================================
   CTA STRIP - dual button variant
   ============================================ */
.cta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.5rem;
}
.cta-or {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  color: var(--maroon-light);
  text-transform: uppercase;
  align-self: center;
  padding: 0 0.2rem;
  position: relative;
  text-shadow: 0 0 12px rgba(140, 45, 69, 0.5);
}

/* ============================================
   HERO-TO-SECTION BRIDGE
   Burgundy accent that transitions from dark hero
   to light stone content section.
   Sits at the seam, with a glowing diamond as focal point.
   Used on inner pages (work, about, contact, faq) that lack
   the landing-page marquee strip.
   ============================================ */
.hero-section-bridge {
  position: relative;
  width: 100%;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}
.hero-bridge-line {
  width: clamp(60px, 18vw, 220px);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--maroon) 100%);
  box-shadow: 0 0 6px rgba(110, 31, 51, 0.45);
}
.hero-bridge-line-r {
  background: linear-gradient(90deg, var(--maroon) 0%, transparent 100%);
}
.hero-bridge-diamond {
  width: 14px;
  height: 14px;
  margin: 0 1.4rem;
  background: var(--maroon);
  transform: rotate(45deg);
  border: 1px solid var(--maroon-light);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 14px rgba(110, 31, 51, 0.65),
    0 0 28px rgba(110, 31, 51, 0.35);
  position: relative;
}
.hero-bridge-diamond::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 70%);
  pointer-events: none;
}

@media (max-width: 600px) {
  .hero-bridge-line { width: clamp(40px, 22vw, 120px); }
  .hero-bridge-diamond { margin: 0 1rem; width: 12px; height: 12px; }
}

/* =====================================================
   FEATURED PROJECT LAYOUT REBALANCE
   Overrides the earlier .work-featured rules.
   ===================================================== */

/* Tighten the grid: smaller gap, more even column split,
   and pull the whole thing toward a centered visual block
   instead of two skinny columns floating in dead space. */
.work-featured {
  grid-template-columns: 1.15fr 1fr;
  gap: 3rem;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  align-items: stretch;
}

/* Let the laptop fill its column fully so the screenshot
   reads big and confident instead of floating small */
.featured-laptop {
  align-self: center;
  width: 100%;
}
.featured-laptop .laptop-screen {
  max-width: 100%;
}

/* The info panel needs to FEEL anchored, not float.
   Give it a clear top-to-bottom flow with balanced spacing. */
.featured-info {
  padding: 2.2rem 2.2rem 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Pull the FEATURED BUILD badge to sit cleanly under the
   burgundy accent stripe instead of floating below it */
.featured-badge {
  margin-bottom: 1.2rem;
  margin-left: 0;
}

/* Rebalance the logo + headline pairing.
   Make the logo bigger so it doesn't get dwarfed by the
   tall Bebas headline, and tighten the gap. */
.featured-header {
  gap: 1rem;
  margin-bottom: 1.2rem;
  align-items: center;
}
.featured-logo {
  width: 64px;
  height: 64px;
  padding: 0.5rem;
}

/* Headline scales down slightly so it doesn't overpower
   the logo and so all three meta boxes fit on one line */
.featured-title {
  font-size: clamp(1.7rem, 2.8vw, 2.3rem) !important;
  line-height: 1 !important;
}

/* Description sits comfortably without crowding */
.featured-desc {
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 1.4rem;
  max-width: 100%;
}

/* Meta box: full-width within its column, not just fit-content.
   This stops the awkward narrow box look. */
.featured-meta {
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 1.5rem;
}
.meta-item {
  padding: 0.65rem 0.9rem;
}
.meta-label {
  font-size: 0.52rem;
}
.meta-value {
  font-size: 1.15rem;
}

/* CTA button stays anchored left inside its column */
.featured-link {
  align-self: flex-start;
}

/* Mobile + tablet: stack with tighter spacing, no sea of
   metallic space */
@media (max-width: 1100px) {
  .work-featured {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 720px;
  }
  .featured-laptop {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .featured-info {
    padding: 1.8rem 1.8rem 2rem;
  }
}

/* =====================================================
   DARK PANEL ENRICHMENT
   Gives the three flat-black areas (pricing left column,
   schedule-a-call panel, and footer) real depth: a burgundy
   corner glow + a faint maroon grid (same language as the hero)
   + a tinted gunmetal base instead of pure black.
   Borders and edge shadows from the earlier rules stay intact;
   only the backgrounds are upgraded.
   NOTE: this block previously appeared twice, byte for byte.
   The duplicate has been removed.
   ===================================================== */

/* PRICING CARD - dark left column */
.pricing-single-left {
  background-color: #0c0d10;
  background-image:
    linear-gradient(rgba(110, 31, 51, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 31, 51, 0.05) 1px, transparent 1px),
    radial-gradient(ellipse 95% 55% at 24% 16%, rgba(110, 31, 51, 0.34) 0%, transparent 60%),
    radial-gradient(circle at 95% 100%, rgba(110, 31, 51, 0.16) 0%, transparent 55%),
    linear-gradient(165deg, #232529 0%, #16171b 45%, #0c0d10 100%);
  background-size: 46px 46px, 46px 46px, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0;
}

/* CONTACT - "Schedule a Call" panel */
.contact-schedule {
  background-color: #0c0a0d;
  background-image:
    linear-gradient(rgba(110, 31, 51, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 31, 51, 0.05) 1px, transparent 1px),
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(110, 31, 51, 0.36) 0%, transparent 58%),
    radial-gradient(circle at 100% 100%, rgba(110, 31, 51, 0.20) 0%, transparent 52%),
    linear-gradient(160deg, #1c1519 0%, #130f14 50%, #0c0a0d 100%);
  background-size: 46px 46px, 46px 46px, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0;
}

/* FOOTER - full-bleed dark anchor */
footer {
  background-color: #0b0b0d;
  background-image:
    linear-gradient(rgba(110, 31, 51, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 31, 51, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse 55% 130% at 18% 0%, rgba(110, 31, 51, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 45% 130% at 85% 115%, rgba(110, 31, 51, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, #16161a 0%, #0b0b0d 100%);
  background-size: 46px 46px, 46px 46px, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0;
}