/* ============================================================
   UNIFY STUDIO — DESIGN TOKENS
   Palette (Color Hunt, light): cream / sage / clay / espresso
   ============================================================ */
    :root {
      --uds-cream: rgb(247, 241, 222);
      --uds-cream-2: rgb(239, 227, 198);
      --uds-sage: rgb(203, 174, 115);
      --uds-clay: rgb(184, 134, 46);
      --uds-espresso: rgb(98 66 41);

      --uds-ink: var(--uds-espresso);
      --uds-bg: var(--uds-cream);

      --uds-display: "Bricolage Grotesque", sans-serif;
      --uds-body: "Inter", sans-serif;
      --uds-mono: "IBM Plex Mono", monospace;

      --uds-ease: cubic-bezier(.16, .84, .32, 1);
      --uds-container: min(2000px, 94vw);
    }

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

    html {
      scroll-behavior: auto;
    }

    ::selection {
      background: var(--uds-espresso);
      color: var(--uds-cream);
    }

    body {
      margin: 0;
      background: var(--uds-cream);
      color: var(--uds-espresso);
      font-family: var(--uds-body);
      overflow-x: hidden;
      cursor: none;
    }

    @media (max-width:900px) {
      body {
        cursor: auto;
      }
    }

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

    h1,
    h2,
    h3 {
      font-family: var(--uds-display);
      margin: 0;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

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

    .uds-eyebrow {
      font-family: var(--uds-mono);
      font-size: .72rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--uds-clay);
      display: flex;
      align-items: center;
      gap: .6em;
    }

    .uds-eyebrow::before {
      content: "";
      width: 22px;
      height: 1px;
      background: var(--uds-clay);
      display: inline-block;
    }

    /* ---------- custom cursor ---------- */
    .uds-cursor {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #c1ecf3;
      pointer-events: none;
      mix-blend-mode: difference;
      transform: translate(-50%, -50%);
      transition: width .25s var(--uds-ease), height .25s var(--uds-ease), background .25s;
      will-change: transform;
    }

    .uds-cursor.is-hover {
      width: 52px;
      height: 52px;
      background: var(--uds-cream);
    }

    @media (max-width:900px) {
      .uds-cursor {
        display: none;
      }
    }

    /* ---------- preloader ---------- */
    .uds-preloader {
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: var(--uds-espresso);
      color: var(--uds-cream);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }

    .uds-preloader__count {
      font-family: var(--uds-display);
      font-size: clamp(3rem, 10vw, 7rem);
      font-variant-numeric: tabular-nums;
    }

    .uds-preloader__label {
      font-family: var(--uds-mono);
      font-size: .75rem;
      letter-spacing: .3em;
      text-transform: uppercase;
      opacity: .7;
    }

    .uds-preloader__bar {
      width: min(280px, 60vw);
      height: 1px;
      background: rgba(247, 241, 222, .25);
      position: relative;
    }

    .uds-preloader__bar span {
      position: absolute;
      inset: 0;
      width: 0%;
      background: var(--uds-sage);
    }

.w-100{
  width: 100%;
  
}
.h-100{
  height: 100%;
}
    /* ---------- layout shell ---------- */
    .uds-container {
      width: var(--uds-container);
      margin-inline: auto;
    }

    .uds-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .7rem clamp(1.25rem, 4vw, 3rem);
      mix-blend-mode: normal;
    }

    .uds-nav__mark {
      font-family: var(--uds-display);
      font-weight: 600;
      font-size: 1.15rem;
      letter-spacing: -.01em;
      width: 210px;
    }

    .uds-nav__mark em {
      font-style: italic;
      color: var(--uds-clay);
    }

    .uds-nav__links {
      display: flex;
      gap: 2.2rem;
      font-family: var(--uds-mono);
      font-size: .75rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #f7f1de;
    }

    .uds-nav__links a {
      position: relative;
    }

    .uds-nav__links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      height: 1px;
      width: 0;
      background: var(--uds-espresso);
      transition: width .35s var(--uds-ease);
    }

    .uds-nav__links a:hover::after {
      width: 100%;
    }

    .uds-nav__cta {
      font-family: var(--uds-mono);
      font-size: .72rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #f7f1de;
      border: 1px solid #f7f1de;
      padding: .55rem 1.1rem;
      border-radius: 100px;
    }

    @media (max-width:760px) {
      .uds-nav__links {
        display: none;
      }
    }

    /* ============================================================
   HERO
   ============================================================ */
    .uds-hero {
      position: relative;
      height: 100svh;
      min-height: 640px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: clamp(2rem, 5vw, 4rem);
      overflow: hidden;
    }

    .uds-hero__stage {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .uds-hero__stage canvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
      touch-action: none;
    }

    .uds-hero__bgVideo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .uds-hero__scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(90deg,
          rgba(247, 241, 222, .76) 0%,
          rgba(247, 241, 222, 0.66) 28%,
          rgba(247, 241, 222, 0) 51%)
    }

    .uds-hero--video .uds-hero__content::before {
      content: none;
    }

    /* mobile-only stand-alone video section — the hero's own background
       video is hidden below 900px (see .uds-hero__houseWrap), so this
       shows the same clip full-width instead of just dropping it */
    .uds-heroVideo-mobile {
      display: none;
    }

    .uds-heroVideo-mobile video {
      display: block;
      width: 100%;
      height: auto;
    }

    @media (max-width:899px) {
      .uds-heroVideo-mobile {
        display: block;
      }
    }

    .uds-hero__content {
      position: relative;
      z-index: 2;
    }

    /* soft legibility scrim behind the copy — not a card, just a gradient
       fade so the title/paragraph stay readable over whatever the 3D scene
       is doing behind them, dissolving before it reaches the house */
    .uds-hero__content::before {
      content: "";
      position: absolute;
      z-index: -1;
      pointer-events: none;
    }

    .uds-hero__houseWrap {
      display: none;
    }

    @media (min-width: 900px) {
      .uds-hero {
        display: grid;
        grid-template-columns: minmax(420px, 0.88fr) minmax(640px, 1.2fr);
        align-items: center;
        gap: clamp(1rem, 3vw, 4rem);
        padding: clamp(4rem, 8vw, 7rem) clamp(2rem, 5vw, 4rem);
      }

      .uds-hero__content {
        grid-column: 1;
        width: min(100%, 620px);
        align-self: center;
      }

      .uds-hero__content::before {
        left: -2rem;
        right: -6rem;
        top: -2rem;
        bottom: -2rem;
        background: linear-gradient(90deg,
            rgba(247, 241, 222, .96) 0%,
            rgba(247, 241, 222, .96) 55%,
            rgba(247, 241, 222, 0) 100%);
      }

      /* full-bleed: the scene is the section's background, not a boxed
         panel — it spans the whole hero (ignoring the grid tracks) and
         sits behind the text; the house itself is composed/biased toward
         the right half so it never fights the left-hand copy */
      .uds-hero__houseWrap {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        cursor: grab;
      }

      .uds-hero__houseWrap.is-dragging {
        cursor: grabbing;
      }

      .uds-hero__stageHint {
        position: absolute;
        right: 1.6rem;
        bottom: 1.6rem;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: .5em;
        font-family: var(--uds-mono);
        font-size: .64rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--uds-espresso);
        background: rgba(247, 241, 222, .78);
        backdrop-filter: blur(6px);
        padding: .45rem .8rem;
        border-radius: 100px;
        pointer-events: none;
        opacity: 0;
        transition: opacity .5s var(--uds-ease);
      }

      .uds-hero__houseWrap.is-ready .uds-hero__stageHint {
        opacity: 1;
      }

      .uds-hero__houseWrap.is-dragging .uds-hero__stageHint {
        opacity: 0;
      }
    }

    .uds-hero__kicker {
      margin-bottom: 1.4rem;
    }

    .uds-hero__title {
      font-size: clamp(2.8rem, 4.5vw, 6rem);
      line-height: .96;
      max-width: 15ch;
      letter-spacing: -0.03em;
    }

    .uds-hero__title .uds-i {
      font-style: italic;
      font-weight: 400;
      color: var(--uds-clay);
    }

    .uds-hero__row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 2rem;
      margin-top: 2.2rem;
      padding-top: 1.6rem;
      border-top: 1px solid rgba(28, 18, 10, .18);
    }

    .uds-hero__desc {
      max-width: 34ch;
      font-size: 0.8rem;
      line-height: 1.55;
      color: rgba(28, 18, 10, .82);
    }

    .uds-hero__scroll {
      font-family: var(--uds-mono);
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: .6rem;
    }

    .uds-hero__scroll::after {
      content: "";
      width: 1px;
      height: 34px;
      background: var(--uds-espresso);
      display: block;
      animation: uds-scrollpulse 1.8s ease-in-out infinite;
    }

    @keyframes uds-scrollpulse {

      0%,
      100% {
        opacity: .2
      }

      50% {
        opacity: 1
      }
    }

    /* ---------- marquee ---------- */
    .uds-marquee {
      border-top: 1px solid rgba(28, 18, 10, .18);
      border-bottom: 1px solid rgba(28, 18, 10, .18);
      padding: 1.1rem 0;
      overflow: hidden;
      white-space: nowrap;
      background: var(--uds-cream-2);
    }

    .uds-marquee__track {
      display: inline-flex;
      gap: 2.4rem;
      will-change: transform;
    }

    .uds-marquee__track span {
      font-family: var(--uds-mono);
      font-size: .85rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 2.4rem;
      color: var(--uds-clay);
    }

    .uds-marquee__track span::after {
      content: "◆";
      color: var(--uds-sage);
      font-size: .6rem;
    }

    /* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
    .uds-section {
      padding: clamp(5rem, 6vw, 8.5rem) 0;
    }

    .uds-section__head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 2rem;
      margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
      flex-wrap: wrap;
    }

    .uds-section__title {
      font-size: clamp(2.2rem, 3.4vw, 4.8rem);
      max-width: 15ch;
      margin-top: .6rem;
      letter-spacing: -0.025em;
    }

    .uds-section__note {
      max-width: 32ch;
      font-size: .95rem;
      line-height: 1.6;
      color: rgba(28, 18, 10, .75);
    }

    /* ---------- intro ---------- */
    .uds-intro__grid {
      display: grid;
      grid-template-columns: 1.3fr .8fr;
      gap: 4rem;
      align-items: end;
    }

    .uds-intro__statement {
      font-size: clamp(1.5rem, 2.8vw, 2.35rem);
      line-height: 1.3;
      font-family: var(--uds-display);
      font-weight: 400;
    }

    .uds-intro__statement .uds-i {
      font-style: italic;
      color: var(--uds-clay);
    }

    .uds-intro__stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.6rem 1rem;
    }

    .uds-stat b {
      display: block;
      font-family: var(--uds-display);
      font-size: 2.2rem;
      color: var(--uds-clay);
    }

    .uds-stat span {
      font-family: var(--uds-mono);
      font-size: .72rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      opacity: .7;
    }

    @media (max-width:900px) {
      .uds-intro__grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================================
   PORTFOLIO — horizontal pinned rail with live 3D stages
   ============================================================ */
    .uds-portfolio {
      background: var(--uds-espresso);
      color: var(--uds-cream);
      overflow: hidden;
    }

    .uds-portfolio .uds-eyebrow {
      color: var(--uds-sage);
    }

    .uds-portfolio .uds-eyebrow::before {
      background: var(--uds-sage);
    }

    .uds-portfolio__pin {
      height: 111svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .uds-portfolio__head {
      padding: 0 clamp(1.25rem, 4vw, 3rem);
      margin-bottom: 2.5rem;
    }

    .uds-portfolio__title {
      color: var(--uds-cream);
      font-size: clamp(2rem, 3vw, 3.8rem);
      letter-spacing: -0.02em;
    }

    .uds-portfolio__track {
      display: flex;
      gap: clamp(1.2rem, 2.4vw, 2.4rem);
      padding: 0 clamp(1.25rem, 4vw, 3rem);
      will-change: transform;
    }

    .uds-card {
      flex: 0 0 auto;
      width: min(420px, 78vw);
      background: rgba(247, 241, 222, .04);
      border: 1px solid rgba(247, 241, 222, .14);
      border-radius: 18px;
      padding: 1.1rem;
    }

    nav.uds-nav {
      background: #1c120a;
    }

    .uds-card__stage {
      position: relative;

      border-radius: 12px;
      overflow: hidden;
      background: radial-gradient(120% 120% at 30% 20%, rgba(176, 186, 153, .14), transparent 60%), rgba(0, 0, 0, .18);
    }

    .uds-card__stage canvas {
      width: 100% !important;
      height: 100% !important;
    }

    .uds-card__frame {
      margin-top: .9rem;
      border-radius: 12px;
      border: 1px dashed rgba(247, 241, 222, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 1rem;
      font-family: var(--uds-mono);
      font-size: .7rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(247, 241, 222, .55);
    }

    .uds-card__meta {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-top: 1.1rem;
      gap: 1rem;
    }

    .uds-card__name {
      font-size: 1.2rem;
      color: var(--uds-cream);
    }

    .uds-card__tag {
      font-family: var(--uds-mono);
      font-size: .68rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--uds-sage);
      text-align: right;
    }

    .uds-portfolio__progress {
      padding: 1.6rem clamp(1.25rem, 4vw, 3rem) 0;
    }

    .uds-portfolio__bar {
      height: 1px;
      background: rgba(247, 241, 222, .18);
      position: relative;
    }

    .uds-portfolio__bar span {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0%;
      background: var(--uds-sage);
    }

    /* ============================================================
   TRY IT — live configurator demo (the signature piece)
   ============================================================ */
    .uds-demo {
      position: relative;
    }

    .uds-demo__wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 4vw, 4rem);
      align-items: center;
      background: var(--uds-cream-2);
      border-radius: 22px;
      padding: clamp(1.5rem, 4vw, 3rem);
      border: 1px solid rgba(28, 18, 10, .12);
    }

    .uds-demo__stage {
      position: relative;
      height: min(56vw, 460px);
      border-radius: 16px;
      overflow: hidden;
      background:
        linear-gradient(rgba(28, 18, 10, .05) 1px, transparent 1px) 0 0/28px 28px,
        linear-gradient(90deg, rgba(28, 18, 10, .05) 1px, transparent 1px) 0 0/28px 28px,
        var(--uds-cream);
      cursor: grab;
    }

    .uds-demo__stage:active {
      cursor: grabbing;
    }

    .uds-demo__stage canvas {
      width: 100% !important;
      height: 100% !important;
    }

    .uds-demo__hint {
      position: absolute;
      left: 1rem;
      bottom: 1rem;
      font-family: var(--uds-mono);
      font-size: .68rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(28, 18, 10, .55);
      background: rgba(247, 241, 222, .7);
      padding: .35rem .7rem;
      border-radius: 100px;
    }

    .uds-demo__panel h3 {
      font-size: clamp(1.6rem, 2.6vw, 2.1rem);
      margin-bottom: .6rem;
    }

    .uds-demo__panel p {
      font-size: .95rem;
      line-height: 1.6;
      color: rgba(28, 18, 10, .78);
      max-width: 42ch;
      margin: 0 0 2rem;
    }

    .uds-swatchrow {
      margin-bottom: 1.4rem;
    }

    .uds-swatchrow__label {
      font-family: var(--uds-mono);
      font-size: .68rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      opacity: .6;
      margin-bottom: .6rem;
      display: block;
    }

    .uds-swatches {
      display: flex;
      gap: .6rem;
    }

    .uds-swatch {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: transform .25s var(--uds-ease), border-color .25s;
    }

    .uds-swatch:hover {
      transform: translateY(-3px);
    }

    .uds-swatch.is-active {
      border-color: var(--uds-espresso);
    }

    @media (max-width:860px) {
      .uds-demo__wrap {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================================
   PROCESS — horizontal blueprint steps
   ============================================================ */

    /* ============================================================
   PROCESS — architectural flow section
   ============================================================ */
    .uds-process3d__wrap {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: clamp(2rem, 4vw, 4rem);
      align-items: start;
    }

    .uds-process3d__flow {
      position: relative;
      padding-left: 64px;
    }

    /* ---- dimension-style rail ---- */
    .uds-process3d__rail {
      position: absolute;
      left: 28px;
      top: 6px;
      bottom: 6px;
      width: 1px;
      background:
        repeating-linear-gradient(to bottom,
          rgba(28, 18, 10, .28) 0,
          rgba(28, 18, 10, .28) 1px,
          transparent 1px,
          transparent 32px),
        rgba(28, 18, 10, .12);
    }

    .uds-process3d__railfill {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 0%;
      background: var(--uds-clay);
    }

    .uds-flowstep {
      position: relative;
      padding: 2.6rem 0;
    }

    .uds-flowstep__mark {
      position: absolute;
      left: 28px;
      top: 2.8rem;
      transform: translate(-50%, -50%);
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--uds-mono);
      font-size: .85rem;
      line-height: 1;
      color: rgba(28, 18, 10, .3);
      transition: color .4s, transform .4s;
    }

    .uds-flowstep.is-active .uds-flowstep__mark {
      color: var(--uds-clay);
      transform: translate(-50%, -50%) scale(1.4) rotate(90deg);
    }

    /* ---- drafting-sheet card with image ---- */
    .uds-flowstep__card {
      position: relative;
      display: flex;
      gap: 1.4rem;
      background: var(--uds-cream);
      border: 1px solid rgba(28, 18, 10, .12);
      padding: 1.2rem;
      overflow: hidden;
      background-image:
        linear-gradient(rgba(28, 18, 10, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 18, 10, .05) 1px, transparent 1px);
      background-size: 18px 18px;
    }

    .uds-flowstep__card::before,
    .uds-flowstep__card::after {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      border: 1.5px solid var(--uds-clay);
      opacity: 0;
      transition: opacity .4s;
    }

    .uds-flowstep__card::before {
      top: 10px;
      left: 10px;
      border-right: none;
      border-bottom: none;
    }

    .uds-flowstep__card::after {
      bottom: 10px;
      right: 10px;
      border-left: none;
      border-top: none;
    }

    .uds-flowstep.is-active .uds-flowstep__card::before,
    .uds-flowstep.is-active .uds-flowstep__card::after {
      opacity: 1;
    }

    .uds-flowstep__img {
      flex: 0 0 120px;
      height: 120px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      background: var(--uds-cream-2);
    }

    .uds-flowstep__icon {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle, rgba(255, 255, 255, .38) 0 1px, transparent 1px),
        linear-gradient(135deg, rgba(28, 18, 10, .93), rgba(76, 52, 24, .93));
      background-size: 14px 14px, auto;
      border: 1px solid rgba(255, 255, 255, .35);
      color: var(--uds-cream);
      font-family: var(--uds-display);
      font-size: 2.4rem;
      line-height: 1;
      transition: transform .45s var(--uds-ease), background .45s var(--uds-ease), color .45s var(--uds-ease);
    }

    .uds-flowstep__icon svg {
      width: 68%;
      height: 68%;
      stroke: currentColor;
      stroke-linejoin: round;
      stroke-linecap: round;
      stroke-width: 1.7;
      fill: none;
    }

    .uds-flowstep__icon svg .fill-signal {
      fill: rgba(247, 241, 222, .16);
      stroke: currentColor;
    }

    .uds-flowstep__icon--discover {
      background: linear-gradient(135deg, #2b2218, #89754c);
    }

    .uds-flowstep__icon--strategize {
      background: linear-gradient(135deg, #4a3728, #75603e);
    }

    .uds-flowstep__icon--create {
      background: linear-gradient(135deg, #1f201d, #73613a);
    }

    .uds-flowstep__icon--refine {
      background: linear-gradient(135deg, #3d3426, #907a44);
    }

    .uds-flowstep__icon--deliver {
      background: linear-gradient(135deg, #32271e, #9b6e3c);
    }

    .uds-flowstep.is-active .uds-flowstep__icon {
      transform: scale(1.06);
      color: var(--uds-cream);
    }

    .uds-flowstep__body {
      position: relative;
      flex: 1;
      min-width: 0;
      padding: .3rem .2rem;
    }

    .uds-flowstep__bg {
      position: absolute;
      right: 0;
      top: -1.4rem;
      font-family: var(--uds-display);
      font-size: 4.4rem;
      font-weight: 600;
      color: rgba(28, 18, 10, .05);
      line-height: 1;
      pointer-events: none;
      user-select: none;
    }

    .uds-flowstep__card .uds-step__code {
      font-family: var(--uds-mono);
      font-size: .68rem;
      color: var(--uds-clay);
      letter-spacing: .12em;
      text-transform: uppercase;
      position: relative;
    }

    .uds-flowstep__card .uds-step__title {
      font-size: 1.3rem;
      margin: .5rem 0 .4rem;
      font-family: var(--uds-display);
      font-weight: 600;
      position: relative;
    }

    .uds-flowstep__card .uds-step__desc {
      font-size: .85rem;
      line-height: 1.5;
      color: rgba(28, 18, 10, .72);
      max-width: 34ch;
      position: relative;
    }

    /* ---- video stage (single static video) ---- */
    .uds-process3d__stage {
      position: sticky;
      top: 100px;
      border-radius: 20px;
      overflow: hidden;
      aspect-ratio: 4/3;
      background: var(--uds-espresso);
    }

    .uds-process3d__stage video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @media (max-width: 860px) {
      .uds-process3d__wrap {
        grid-template-columns: 1fr;
      }

      .uds-process3d__stage {
        position: relative;
        top: 0;
        aspect-ratio: 16/10;
      }

      .uds-process3d__flow {
        padding-left: 50px;
      }

      .uds-flowstep__card {
        flex-direction: column;
      }

      .uds-flowstep__img {
        flex: none;
        width: 100%;
        height: 160px;
      }
    }

    /* ============================================================
   SECTION TINT — alternating background rhythm
   ============================================================ */
    .uds-tint {
      background: var(--uds-cream-2);
      border-top: 1px solid rgba(28, 18, 10, .08);
      border-bottom: 1px solid rgba(28, 18, 10, .08);
    }

    /* ============================================================
   SERVICES — big cards ("Everything, from one studio.")
   ============================================================ */
    .uds-bigservice__list {
      display: flex;
      flex-direction: column;
      gap: 1px;
      background: rgba(28, 18, 10, .12);
      border-radius: 22px;
      overflow: hidden;
    }

    .uds-bigservice {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 4vw, 4rem);
      align-items: center;
      background: var(--uds-cream);
      padding: clamp(2.2rem, 4vw, 3.5rem);
    }

    .uds-bigservice:nth-child(even) {
      background: var(--uds-cream-2);
    }

    .uds-bigservice:nth-child(even) .uds-bigservice__visual {
      order: -1;
    }

    .uds-bigservice__code {
      font-family: var(--uds-mono);
      font-size: .72rem;
      letter-spacing: .1em;
      color: var(--uds-clay);
      text-transform: uppercase;
    }

    .uds-bigservice__title {
      font-size: clamp(1.6rem, 2.6vw, 2.2rem);
      margin: .8rem 0 .8rem;
    }

    .uds-bigservice__desc {
      font-size: .95rem;
      line-height: 1.6;
      color: rgba(28, 18, 10, .75);
      max-width: 44ch;
      margin-bottom: 1.4rem;
    }

    .uds-bigservice__points {
      list-style: none;
      margin: 0 0 1.8rem;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: .55rem;
      font-size: .86rem;
      color: rgba(28, 18, 10, .82);
    }

    .uds-bigservice__points li {
      display: flex;
      gap: .6rem;
    }

    .uds-bigservice__points li::before {
      content: "+";
      font-family: var(--uds-mono);
      color: var(--uds-clay);
    }

    .uds-bigservice__link {
      font-family: var(--uds-mono);
      font-size: .76rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--uds-espresso);
      padding-bottom: .2rem;
    }

    .uds-bigservice__visual {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
    }

    .uds-service-slider {
      position: relative;
      width: 100%;
      aspect-ratio: 1.6/1;
      overflow: hidden;
      border-radius: 18px;
      background: var(--uds-espresso);
    }

    span.uds-compare__ph {
      width: 100%;

    }

    .uds-service-slider img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transform: scale(1.03);
      transition: opacity .8s var(--uds-ease), transform .8s var(--uds-ease);
    }

    .uds-service-slider img.is-active {
      opacity: 1;
      transform: scale(1);
    }

    .uds-service-slider__dots {
      position: absolute;
      right: .8rem;
      bottom: .8rem;
      display: flex;
      gap: .35rem;
      z-index: 2;
    }

    .uds-service-slider__dots span {
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(247, 241, 222, .45);
      transition: transform .25s var(--uds-ease), background .25s var(--uds-ease);
    }

    .uds-service-slider__dots span.is-active {
      background: var(--uds-cream);
      transform: scale(1.2);
    }

    .uds-bigservice__visual::after {
      content: attr(data-fig);
      position: absolute;
      left: 1rem;
      bottom: 1rem;
      font-family: var(--uds-mono);
      font-size: .64rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(247, 241, 222, .85);
      background: rgba(0, 0, 0, .28);
      padding: .35rem .7rem;
      border-radius: 100px;
      z-index: 3;
    }

    .uds-bigservice__visual--01 {
      background:
        radial-gradient(120% 100% at 15% 10%, rgba(247, 241, 222, .35), transparent 55%),
        linear-gradient(135deg, var(--uds-clay) 0%, var(--uds-espresso) 55%, #000 100%);
    }

    .uds-bigservice__visual--02 {
      background:
        radial-gradient(90% 90% at 80% 15%, rgba(203, 174, 115, .6), transparent 60%),
        linear-gradient(150deg, var(--uds-cream-2) 0%, var(--uds-sage) 55%, var(--uds-clay) 100%);
    }

    .uds-bigservice__visual--03 {
      background:
        radial-gradient(100% 100% at 20% 85%, rgba(184, 134, 46, .55), transparent 60%),
        linear-gradient(160deg, var(--uds-espresso) 0%, #000 65%, var(--uds-clay) 140%);
    }

    .uds-bigservice__visual--04 {
      background:
        radial-gradient(100% 100% at 75% 20%, rgba(247, 241, 222, .65), transparent 55%),
        linear-gradient(140deg, var(--uds-sage) 0%, var(--uds-cream-2) 60%, var(--uds-clay) 130%);
    }

    @media (max-width:860px) {
      .uds-bigservice {
        grid-template-columns: 1fr;
      }

      .uds-bigservice:nth-child(even) .uds-bigservice__visual {
        order: 0;
      }
    }

    /* ============================================================
   TRUSTED BY strip
   ============================================================ */
    .uds-trustedby {
      margin-top: 2.6rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(28, 18, 10, .14);
    }

    .uds-trustedby__label {
      font-family: var(--uds-mono);
      font-size: .68rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(28, 18, 10, .5);
      margin-bottom: 1rem;
    }

    .uds-trustedby__row {
      display: flex;
      flex-wrap: wrap;
      gap: 1.4rem 2.2rem;
    }

    .uds-trustedby__row span {
      font-family: var(--uds-display);
      font-size: 1rem;
      font-style: italic;
      color: rgba(28, 18, 10, .55);
    }

    /* ---------- hero booking badge ---------- */
    .uds-hero__badge {
      display: inline-flex;
      align-items: center;
      gap: .5em;
      margin-bottom: .9rem;
      font-family: var(--uds-mono);
      font-size: .66rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--uds-espresso);
      background: var(--uds-sage);
      padding: .4rem .8rem;
      border-radius: 100px;
    }

    .uds-hero__badge::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--uds-clay);
      display: inline-block;
    }

    /* ============================================================
   RESULTS
   ============================================================ */
    .uds-results__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.4rem;
    }

    .uds-result {
      background: var(--uds-cream-2);
      border: 1px solid rgba(28, 18, 10, .14);
      border-radius: 18px;
      padding: 2.2rem 1.8rem;
    }

    .uds-result__num {
      font-family: var(--uds-display);
      font-size: clamp(2.2rem, 4vw, 3rem);
      color: var(--uds-clay);
      line-height: 1;
    }

    .uds-result__tag {
      font-family: var(--uds-mono);
      font-size: .68rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(28, 18, 10, .55);
      margin: 1rem 0 .6rem;
    }

    .uds-result__desc {
      font-size: .88rem;
      line-height: 1.55;
      color: rgba(28, 18, 10, .75);
    }

    @media (max-width:980px) {
      .uds-results__grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width:620px) {
      .uds-results__grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================================
   DIFFERENCE — why builders switch
   ============================================================ */
    .uds-diff {
      background: var(--uds-espresso);
      color: var(--uds-cream);
    }

    .uds-diff .uds-eyebrow {
      color: var(--uds-sage);
    }

    .uds-diff .uds-eyebrow::before {
      background: var(--uds-sage);
    }

    .uds-diff__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: rgba(247, 241, 222, .14);
      border-radius: 18px;
      overflow: hidden;
      margin-top: clamp(2rem, 4vw, 3rem);
      padding: 15px;
    }

    .uds-diff__item {
      background: var(--uds-espresso);
      padding: 2.2rem 2rem;
    }

    .uds-diff__num {
      font-family: var(--uds-mono);
      font-size: .72rem;
      color: var(--uds-sage);
      letter-spacing: .06em;
    }

    .uds-diff__title {
      font-size: 1.3rem;
      margin: 1rem 0 .6rem;
      color: var(--uds-cream);
    }

    .uds-diff__desc {
      font-size: .9rem;
      line-height: 1.6;
      color: rgba(247, 241, 222, .72);
      max-width: 38ch;
    }

    @media (max-width:760px) {
      .uds-diff__grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================================
   TESTIMONIALS
   ============================================================ */
    .uds-testimonials__slider {
      position: relative;
    }

    .uds-testimonials__viewport {
      overflow: hidden;
    }

    .uds-testimonials__track {
      display: flex;
      width: 100%;
      gap: clamp(1rem, 2vw, 1.8rem);
      transition: transform .5s var(--uds-ease);
    }

    .uds-testimonial {
      background: var(--uds-cream-2);
      border-radius: 18px;
      padding: 2.4rem 2.2rem;
      border: 1px solid rgba(28, 18, 10, .12);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 220px;
      flex: 0 0 50%;
      box-sizing: border-box;
    }

    .uds-testimonial__quote {
      font-family: var(--uds-display);
      font-size: clamp(1.1rem, 1.8vw, 1.4rem);
      line-height: 1.4;
      font-weight: 400;
    }

    .uds-testimonial__quote .uds-i {
      font-style: italic;
      color: var(--uds-clay);
    }

    .uds-testimonial__by {
      font-family: var(--uds-mono);
      font-size: .7rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(28, 18, 10, .6);
      margin-top: 1.6rem;
    }

    .uds-testimonials__controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .9rem;
      margin-top: 1.4rem;
    }

    .uds-testimonials__btn {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(28, 18, 10, .35);
      background: transparent;
      color: var(--uds-espresso);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s ease, color .2s ease, transform .2s ease;
    }

    .uds-testimonials__btn:hover,
    .uds-testimonials__btn:focus {
      background: var(--uds-espresso);
      color: var(--uds-cream);
    }

    .uds-testimonials__dots {
      display: flex;
      align-items: center;
      gap: .45rem;
    }

    .uds-testimonials__dots button {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      border: 1px solid var(--uds-espresso);
      background: transparent;
      padding: 0;
      cursor: pointer;
    }

    .uds-testimonials__dots button.is-active {
      background: var(--uds-espresso);
    }

    @media (max-width:760px) {
      .uds-testimonial {
        flex-basis: 100%;
      }
    }

    /* ============================================================
   TEAM
   ============================================================ */
    .uds-team__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.4rem;
    }

    .uds-teammate__avatar {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--uds-display);
      font-size: 1.6rem;
      color: var(--uds-cream);
      background: var(--uds-clay);
      margin-bottom: 1rem;
    }

    .uds-teammate:nth-child(2n) .uds-teammate__avatar {
      background: var(--uds-espresso);
    }

    .uds-teammate:nth-child(3n) .uds-teammate__avatar {
      background: var(--uds-sage);
      color: var(--uds-espresso);
    }

    .uds-teammate__name {
      font-size: 1.1rem;
    }

    .uds-teammate__role {
      font-family: var(--uds-mono);
      font-size: .68rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--uds-clay);
      margin-top: .4rem;
    }

    @media (max-width:980px) {
      .uds-team__grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width:560px) {
      .uds-team__grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================================
   PRICING + FAQ
   ============================================================ */
    .uds-pricing__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.4rem;
      align-items: stretch;
    }

    .uds-plan {
      border: 1px solid rgba(28, 18, 10, .16);
      border-radius: 20px;
      padding: 2.4rem 2rem;
      display: flex;
      flex-direction: column;
      background: var(--uds-cream);
    }

    .uds-plan--featured {
      background: var(--uds-espresso);
      color: var(--uds-cream);
      border-color: var(--uds-espresso);
      transform: translateY(-.6rem);
    }

    .uds-plan--featured .uds-plan__tag {
      color: var(--uds-sage);
    }

    .uds-plan__tag {
      font-family: var(--uds-mono);
      font-size: .68rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--uds-clay);
    }

    .uds-plan__price {
      font-family: var(--uds-display);
      font-size: clamp(1.9rem, 3.4vw, 2.5rem);
      margin: .8rem 0 .1rem;
    }

    .uds-plan__unit {
      font-family: var(--uds-mono);
      font-size: .68rem;
      opacity: .6;
    }

    .uds-plan__list {
      list-style: none;
      margin: 1.6rem 0 2rem;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: .7rem;
      font-size: .88rem;
    }

    .uds-plan__list li {
      display: flex;
      gap: .6rem;
      align-items: flex-start;
    }

    .uds-plan__list li::before {
      content: "+";
      color: var(--uds-clay);
      font-family: var(--uds-mono);
    }

    .uds-plan--featured .uds-plan__list li::before {
      color: var(--uds-sage);
    }

    .uds-plan__cta {
      margin-top: auto;
      font-family: var(--uds-mono);
      font-size: .72rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      border: 1px solid currentColor;
      padding: .8rem 1.2rem;
      border-radius: 100px;
      text-align: center;
    }

    @media (max-width:980px) {
      .uds-pricing__grid {
        grid-template-columns: 1fr;
      }

      .uds-plan--featured {
        transform: none;
      }
    }

    .uds-faq {
      margin-top: 3rem;
      max-width: 760px;
      border-top: 1px solid rgba(28, 18, 10, .18);
    }

    .uds-faq details {
      border-bottom: 1px solid rgba(28, 18, 10, .18);
      padding: 1.2rem 0;
    }

    .uds-faq summary {
      cursor: pointer;
      font-family: var(--uds-display);
      font-size: 1.05rem;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }

    .uds-faq summary::-webkit-details-marker {
      display: none;
    }

    .uds-faq summary::after {
      content: "+";
      font-family: var(--uds-mono);
      color: var(--uds-clay);
      font-size: 1.2rem;
      flex: none;
    }

    .uds-faq details[open] summary::after {
      content: "–";
    }

    .uds-faq p {
      font-size: .88rem;
      line-height: 1.6;
      color: rgba(28, 18, 10, .72);
      margin: 1rem 0 0;
      max-width: 60ch;
    }

    /* ============================================================
   CTA + FOOTER
   ============================================================ */
    .uds-cta {
      background: var(--uds-clay);
      color: var(--uds-cream);
      text-align: center;
      padding: clamp(5rem, 10vw, 9rem) 0;
    }

    .uds-cta__eyebrow {
      color: var(--uds-cream);
      opacity: .75;
      justify-content: center;
    }

    .uds-cta__eyebrow::before {
      background: var(--uds-cream);
    }

    .uds-cta__title {
      font-size: clamp(2.6rem, 5vw, 6.6rem);
      margin: 1.2rem auto 2.2rem;
      max-width: 16ch;
      color: var(--uds-cream);
      letter-spacing: -0.03em;
    }

    .uds-cta__title .uds-i {
      font-style: italic;
    }

    .uds-btn {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      font-family: var(--uds-mono);
      font-size: .78rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      background: var(--uds-cream);
      color: var(--uds-espresso);
      padding: 1rem 1.8rem;
      border-radius: 100px;
      position: relative;
      overflow: hidden;
    }

    /* ---------- contact form (extends CTA) ---------- */
    .uds-cta__grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: start;
      text-align: left;
    }

    .uds-cta__grid .uds-cta__eyebrow {
      justify-content: flex-start;
    }

    .uds-cta__grid .uds-cta__title {
      margin: 1.2rem 0 1.2rem;
    }

    .uds-cta__desc {
      font-size: .95rem;
      line-height: 1.6;
      opacity: .85;
      max-width: 36ch;
    }

    .uds-cta__form {
      background: rgba(247, 241, 222, .08);
      border: 1px solid rgba(247, 241, 222, .22);
      border-radius: 20px;
      padding: clamp(1.5rem, 3vw, 2.4rem);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .uds-field--full {
      grid-column: 1/-1;
    }

    .uds-field label {
      display: block;
      font-family: var(--uds-mono);
      font-size: .64rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      opacity: .7;
      margin-bottom: .5rem;
    }

    .uds-field input,
    .uds-field select,
    .uds-field textarea {
      width: 100%;
      background: transparent;
      border: 1px solid rgba(247, 241, 222, .3);
      border-radius: 10px;
      padding: .75rem .9rem;
      color: var(--uds-cream);
      font-family: var(--uds-body);
      font-size: .9rem;
    }

    .uds-field select option {
      color: var(--uds-espresso);
    }

    .uds-field input::placeholder,
    .uds-field textarea::placeholder {
      color: rgba(247, 241, 222, .5);
    }

    .uds-field textarea {
      resize: vertical;
      min-height: 96px;
    }

    .uds-cta__submit {
      grid-column: 1/-1;
      background: var(--uds-cream);
      color: var(--uds-espresso);
      border: none;
      cursor: pointer;
      font-family: var(--uds-mono);
      font-size: .78rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 1rem 1.8rem;
      border-radius: 100px;
      justify-self: start;
    }

    .uds-cta__form-note {
      grid-column: 1/-1;
      font-family: var(--uds-mono);
      font-size: .66rem;
      letter-spacing: .04em;
      opacity: .6;
    }

    @media (max-width:860px) {
      .uds-cta__grid {
        grid-template-columns: 1fr;
      }

      .uds-cta__form {
        grid-template-columns: 1fr;
      }
    }

    .uds-footer {
      background: var(--uds-espresso);
      color: var(--uds-cream);
      padding: 3.5rem 0 2rem;
    }

    .uds-footer__top {
      display: flex;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
      padding-bottom: 2.4rem;
      border-bottom: 1px solid rgba(247, 241, 222, .15);
    }

    .uds-footer__mark {
      font-family: var(--uds-display);
      font-size: 1.6rem;
    }

    .uds-footer__mark em {
      font-style: italic;
      color: var(--uds-sage);
    }

    .uds-footer__cols {
      display: flex;
      gap: 4rem;
      flex-wrap: wrap;
    }

    .uds-footer__col a,
    .uds-footer__col p {
      display: block;
      font-size: .85rem;
      opacity: .75;
      margin-top: .6rem;
    }

    .uds-footer__col span {
      font-family: var(--uds-mono);
      font-size: .68rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      opacity: .5;
    }

    .uds-footer__bottom {
      display: flex;
      justify-content: space-between;
      padding-top: 1.6rem;
      font-family: var(--uds-mono);
      font-size: .7rem;
      opacity: .55;
      flex-wrap: wrap;
      gap: .6rem;
    }

    [data-reveal] {
      opacity: 0;
      transform: translateY(28px);
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
      }
    }



    @media (min-width: 1200px) and (max-width: 1500px) {
      .uds-hero__title {
        font-size: clamp(2.6rem, 3vw, 4rem);
        max-width: 23ch;

      }



      .uds-hero__kicker {
        margin-bottom: 1rem;
      }

      .uds-hero__row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 2rem;
        margin-top: 1.2rem;
        padding-top: 1rem;
      }

      .uds-card {
        flex: 0 0 auto;
        width: min(301px, 78vw);
      }

    }

    .uds-footer__mark {
      width: 280px;
    }

    .display-none {
      display: none;
    }

    @media (min-width: 320px) and (max-width: 799px) {

      .uds-hero {
        height: auto;

      }

      .mobile-display-none {
        display: none;
      }

      .mobile-visible-image {
        display: block;
      }

      .uds-nav__mark {
        width: 120px;
      }

      .uds-nav__cta {

        font-size: .52rem;
      }

      .uds-footer__mark {
        width: 120px;
      }

      .uds-hero__content {
        padding-top: 80px
      }

      .uds-section.uds-bigservices {
        padding-top: 0;
      }
    }

    .uds-portfolio {

      padding: 45px 0 45px 0;
    }


    .uds-section.uds-tint {
      background: #efe3c6d6;
    }

    .uds-compare__layout {
      display: grid;
      grid-template-columns: minmax(240px, .34fr) 1fr;
      gap: clamp(1.6rem, 3.5vw, 3.2rem);
      align-items: start;
      margin-top: clamp(2.2rem, 4vw, 3rem);
    }

    .uds-compare__tabs {
      display: flex;
      flex-direction: column;
      gap: .6rem;
      margin: 0;
      position: sticky;
      top: 7rem;
    }

    .uds-compare__tab {
      display: flex;
      align-items: center;
      gap: 1rem;
      width: 100%;
      font-family: var(--uds-mono);
      text-align: left;
      padding: 1.15rem 1.3rem;
      border-radius: 14px;
      border: 1px solid rgba(28, 18, 10, .16);
      color: rgba(28, 18, 10, .6);
      background: var(--uds-cream);
      cursor: pointer;
      transition: all .25s var(--uds-ease);
    }

    .uds-compare__tabNum {
      font-size: .68rem;
      letter-spacing: .06em;
      color: rgba(28, 18, 10, .32);
      transition: color .25s var(--uds-ease);
      flex-shrink: 0;
    }

    .uds-compare__tabName {
      font-family: var(--uds-display);
      font-size: 1.02rem;
      letter-spacing: -0.01em;
      line-height: 1.25;
      color: inherit;
    }

    .uds-compare__tab:hover {
      border-color: var(--uds-clay);
      color: var(--uds-espresso);
      transform: translateX(2px);
    }

    .uds-compare__tab.is-active {
      background: var(--uds-espresso);
      border-color: var(--uds-espresso);
      color: var(--uds-cream);
      box-shadow: 0 10px 24px rgba(28, 18, 10, .16);
    }

    .uds-compare__tab.is-active .uds-compare__tabNum {
      color: rgba(247, 241, 222, .5);
    }

    .uds-compare__panel {
      display: none;
    }

    .uds-compare__panel.is-active {
      display: block;
    }

    .uds-compare__stage {
      max-width: 1200px;
      position: relative;
      width: 100%;
      margin-inline: auto;
      aspect-ratio: 16/9;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(28, 18, 10, .14);
      cursor: ew-resize;
      user-select: none;
      touch-action: pan-y;
      background: var(--uds-cream-2);
      box-shadow: 0 20px 48px rgba(28, 18, 10, .1);
    }

    @media (max-width:900px) {
      .uds-compare__layout {
        grid-template-columns: 1fr;
      }

      .uds-compare__tabs {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
      }

      .uds-compare__tab {
        width: auto;
        padding: .65rem 1.1rem;
        border-radius: 100px;
      }

      .uds-compare__tabName {
        font-family: var(--uds-mono);
        font-size: .72rem;
        letter-spacing: .06em;
        text-transform: uppercase;
      }

      .uds-compare__tabNum {
        display: none;
      }
    }

    .uds-compare__layer {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .uds-compare__layer--after {
      background:
        radial-gradient(120% 100% at 85% 15%, rgba(247, 241, 222, .18), transparent 55%),
        linear-gradient(135deg, var(--uds-clay) 0%, var(--uds-espresso) 65%, #000 100%);
    }

    .uds-compare__layer--before {
      background:
        repeating-linear-gradient(0deg, rgba(28, 18, 10, .14) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(28, 18, 10, .14) 0 1px, transparent 1px 28px),
        var(--uds-cream-2);
      clip-path: inset(0 50% 0 0);
    }

    .uds-compare__ph {
      font-family: var(--uds-mono);
      font-size: .68rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      text-align: center;
      color: rgba(247, 241, 222, .85);
      line-height: 1.7;
    }

    .uds-compare__layer--before .uds-compare__ph {
      color: rgba(28, 18, 10, .55);
    }

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

    .uds-compare__tag {
      position: absolute;
      top: 1rem;
      z-index: 2;
      font-family: var(--uds-mono);
      font-size: .64rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .35rem .75rem;
      border-radius: 100px;
      background: rgba(0, 0, 0, .4);
      color: var(--uds-cream);
      pointer-events: none;
    }

    .uds-compare__tag--before {
      left: 1rem;
    }

    .uds-compare__tag--after {
      right: 1rem;
    }

    .uds-compare__handle {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 0;
      pointer-events: none;
      z-index: 3;
    }

    .uds-compare__handle::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: -1px;
      width: 2px;
      background: var(--uds-cream);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
    }

    .uds-compare__knob {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--uds-cream);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
      pointer-events: auto;
      cursor: ew-resize;
    }

    .uds-compare__knob::before,
    .uds-compare__knob::after {
      content: "";
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    .uds-compare__knob::before {
      border-right: 7px solid var(--uds-espresso);
    }

    .uds-compare__knob::after {
      border-left: 7px solid var(--uds-espresso);
    }

    @media (max-width:640px) {
      .uds-compare__stage {
        aspect-ratio: 3/4;
      }

      /* the Alder House panel has real before/after photos — let the
         frame take the image's own aspect ratio on phones instead of
         cropping it into the fixed 3/4 box used by the placeholder panels */
      .uds-compare__stage--sized {
        aspect-ratio: auto;
      }

      .uds-compare__stage--sized .uds-compare__sizer {
        display: block;
        width: 100%;
        height: auto;
        visibility: hidden;
      }
    }

    .uds-compare__sizer {
      display: none;
    }

    .uds-diff {
      position: relative;
      background: var(--uds-espresso);
      color: var(--uds-cream);
      overflow: hidden;
    }

    .uds-diff .uds-eyebrow {
      color: var(--uds-sage);
    }

    .uds-diff .uds-eyebrow::before {
      background: var(--uds-sage);
    }

    .uds-diff__bggrid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .6;
      background:
        repeating-linear-gradient(0deg, rgba(247, 241, 222, .05) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(90deg, rgba(247, 241, 222, .05) 0 1px, transparent 1px 48px);
    }

    .uds-diff__glow {
      position: absolute;
      top: -25%;
      right: -8%;
      width: 55%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(184, 134, 46, .35), transparent 65%);
      filter: blur(20px);
      pointer-events: none;
    }

    .uds-diff__glow--2 {
      position: absolute;
      bottom: -30%;
      left: -10%;
      width: 45%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(203, 174, 115, .18), transparent 65%);
      filter: blur(20px);
      pointer-events: none;
    }

    .uds-diff .uds-container {
      position: relative;
      z-index: 1;
    }

    .uds-diff__layout {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: clamp(2rem, 4vw, 3.2rem);
      align-items: start;
    }

    .uds-diff__intro .uds-section__title {
      margin-top: .6rem;
    }

    .uds-diff__grid {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
    }

    .uds-diff__item {
      position: relative;
      background: rgba(247, 241, 222, .04);
      border: 1px solid rgba(247, 241, 222, .14);
      border-radius: 18px;
      padding: 1.8rem 1.5rem 1.7rem;
      overflow: hidden;
      transition: border-color .3s ease, transform .3s ease, background .3s ease;
    }

    .uds-diff__item:hover {
      border-color: var(--uds-clay);
      transform: translateY(-5px);
      background: rgba(247, 241, 222, .07);
    }

    .uds-diff__ghost {
      position: absolute;
      top: -.5rem;
      right: .5rem;
      font-family: var(--uds-display);
      font-size: 4rem;
      color: rgba(247, 241, 222, .06);
      line-height: 1;
      pointer-events: none;
      user-select: none;
    }

    .uds-diff__icon {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid rgba(203, 174, 115, .55);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.1rem;
      color: var(--uds-sage);
    }

    .uds-diff__icon svg {
      width: 20px;
      height: 20px;
    }

    .uds-diff__title {
      font-size: 1.15rem;
      margin-bottom: .55rem;
      color: var(--uds-cream);
    }

    .uds-diff__desc {
      font-size: .85rem;
      line-height: 1.6;
      color: rgba(247, 241, 222, .72);
    }

    @media (max-width:900px) {
      .uds-diff__layout {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width:560px) {
      .uds-diff__grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================================
   SIGNATURE REEL — full-bleed video banner
   ============================================================ */
    .uds-reel {
      position: relative;
      height: min(88vh, 900px);
      min-height: 460px;
      overflow: hidden;
      background: var(--uds-espresso);
      display: flex;
      align-items: flex-end;
    }

    .uds-reel__media {
      position: absolute;
      inset: 0;
    }

    .uds-reel__media video,
    .uds-reel__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .uds-reel__ph {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background:
        radial-gradient(120% 100% at 25% 15%, rgba(247, 241, 222, .16), transparent 55%),
        linear-gradient(135deg, var(--uds-clay) 0%, var(--uds-espresso) 60%, #000 100%);
      color: rgba(247, 241, 222, .7);
      font-family: var(--uds-mono);
      font-size: .72rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1.8;
    }

    .uds-reel__veil {
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(28, 18, 10, .85) 0%, rgba(28, 18, 10, .05) 45%, transparent 70%);
    }

    .uds-reel__content {
      position: relative;
      z-index: 2;
      width: 100%;
      padding-bottom: clamp(2rem, 5vw, 4rem);
    }

    .uds-reel__row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .uds-reel__title {
      color: var(--uds-cream);
      font-size: clamp(2rem, 4.4vw, 4.6rem);
      max-width: 16ch;
      letter-spacing: -.02em;
    }

    .uds-reel__title .uds-i {
      font-style: italic;
      color: var(--uds-sage);
    }

    .uds-reel .uds-eyebrow {
      color: var(--uds-sage);
      margin-bottom: 1rem;
    }

    .uds-reel .uds-eyebrow::before {
      background: var(--uds-sage);
    }

    .uds-reel__note {
      max-width: 30ch;
      font-size: .9rem;
      line-height: 1.6;
      color: rgba(247, 241, 222, .72);
    }

    /* ============================================================
   GALLERY — asymmetric masonry grid (images & video slots)
   ============================================================ */
    .uds-gallery__grid {
      column-count: 4;
      column-gap: 1.1rem;
      border: 2px solid rgba(28, 18, 10, .35);
      border-radius: 20px;
      padding: 1.1rem;
    }

    .uds-gallery__item {
      position: relative;
      display: block;
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      margin-bottom: 1.1rem;
      border-radius: 16px;
      overflow: hidden;
      background: var(--uds-cream-2);
      border: 1px solid rgba(28, 18, 10, .12);
    }

    .uds-gallery__item img,
    .uds-gallery__item video {
      width: 100%;
      height: auto;
      display: block;
      transition: transform .6s var(--uds-ease);
    }

    .uds-gallery__item:hover img,
    .uds-gallery__item:hover video {
      transform: scale(1.06);
    }

    .uds-gallery__item::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(28, 18, 10, .45) 0%, transparent 38%);
      opacity: 0;
      transition: opacity .35s var(--uds-ease);
      pointer-events: none;
    }

    .uds-gallery__item:hover::after {
      opacity: 1;
    }

    @media (max-width:980px) {
      .uds-gallery__grid {
        column-count: 3;
      }
    }

    @media (max-width:640px) {
      .uds-gallery__grid {
        column-count: 2;
      }
    }

    @media (max-width:420px) {
      .uds-gallery__grid {
        column-count: 1;
      }
    }