#site-header {
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .hero {
      margin-top: 0;
      padding: 0 !important;
      border-bottom: none;
      margin-bottom: 3rem;
      padding-bottom: 3rem;
      /* bleed full width */
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
    }

    .hero-stage {
      position: relative;
      width: 100%;
      aspect-ratio: 16/10;
      max-height: 80vh;
      overflow: hidden;
      background: #1a1a1a;
      margin-bottom: 2rem;
    }

    .hero-stage img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .hero-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
          rgba(0, 0, 0, 0.55) 0%,
          rgba(0, 0, 0, 0.15) 38%,
          rgba(0, 0, 0, 0.05) 60%,
          rgba(0, 0, 0, 0.35) 100%);
      pointer-events: none;
    }

    .hero-content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 2;
      color: #fff;
      padding: 2.25rem var(--nav-align);
    }

    .hero-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1.5rem;
    }

    .eyebrow {
      font-size: clamp(11px, 10px + 0.312vw, 13.75px);
      letter-spacing: 0.14em;
      color: rgba(255, 255, 255, 0.75);
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: clamp(10px, 9.09px + 0.284vw, 12.5px);
      letter-spacing: 0.14em;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(0, 0, 0, 0.32);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      padding: 5px 10px;
      border-radius: 20px;
      white-space: nowrap;
    }

    .hero-tag .dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #c9b47a;
    }

    .hero-bottom {
      max-width: 560px;
    }

    .hero h1 {
      font-size: clamp(22px, 14.55px + 2.33vw, 42.5px);
      font-weight: 500;
      line-height: 1.45;
      margin-bottom: 1.25rem;
      color: #fff;
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);

      will-change: transform, opacity;
    }

    .hero h1 .h-fade {
      color: rgba(255, 255, 255, 0.7);
      transition: color 0.2s ease;
    }

    .hero-desc {
      font-size: clamp(13px, 11.36px + 0.511vw, 15.5px);
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.9;
      max-width: 500px;
      margin-bottom: 1.5rem;
      text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);

      will-change: transform, opacity;
    }

    .hero-cta {
      display: flex;
      gap: 1.25rem;
      align-items: center;

      will-change: transform, opacity;
    }

    /* =========================
   PAGE ENTRY (soft fade in)
   @keyframes pageEnter lives in shared.css
========================= */
    body {
      animation: pageEnter 0.9s ease-out both;
    }

    /* =========================
   HERO CONTAINER REVEAL
========================= */
    .hero {
      position: relative;

      opacity: 0;
      transform: scale(1.02);
      filter: blur(10px);

      animation:
        heroReveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
        slowBreath 8s ease-in-out infinite 1.5s;
    }

    @keyframes heroReveal {
      to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
      }
    }

    @keyframes slowBreath {

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

      50% {
        transform: scale(1.01);
      }
    }

    /* =========================
   STAGGERED TEXT ENTRANCE
========================= */
    .hero h1,
    .hero-desc,
    .hero-cta {
      opacity: 0;
      transform: translateY(22px);
      filter: blur(6px);

      animation: floatIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      will-change: transform, opacity, filter;
    }

    @keyframes floatIn {
      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    /* stagger timing (luxury feel) */
    .hero h1 {
      animation-delay: 0.85s;
    }

    .hero-desc {
      animation-delay: 1.35s;
    }

    .hero-cta {
      animation-delay: 1.85s;
    }

    /* =========================
   AMBIENT LIGHT GLOW
========================= */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;

      background: radial-gradient(circle at 50% 20%,
          rgba(255, 255, 255, 0.08),
          transparent 60%);

      opacity: 0;

      animation: ambientGlow 1.2s ease-out forwards;
      animation-delay: 0.4s;
    }

    @keyframes ambientGlow {
      to {
        opacity: 1;
      }
    }

    .cta-main {
      font-size: clamp(13px, 11.82px + 0.369vw, 16.25px);
      font-weight: 500;
      color: #fff;
      border-bottom: 1px solid #fff;
      padding-bottom: 1px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      text-decoration: none;
    }

    .cta-sub {
      font-size: clamp(13px, 11.82px + 0.369vw, 16.25px);
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      text-decoration: none;
    }

    .cta-sub:hover {
      color: #fff;
    }

    .sec {
      margin-bottom: 4rem;
    }

    .sec-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 0.5px solid var(--color-border-tertiary);
      padding-bottom: 1rem;
      margin-bottom: 2rem;
    }

    .sec-label {
      font-size: clamp(14px, 12.36px + 0.455vw, 20px);
      letter-spacing: var(--ls-md);
      color: var(--color-text-secondary);
    }

    .sec-more {
      position: relative;
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
      cursor: pointer;
      font-weight: 400;
      transition:
        color 0.3s ease,
        font-weight 0.3s ease,
        transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .sec-more:hover {
      color: var(--color-text-primary);
      font-weight: 700;
      transform: translateX(4px);
    }

    .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: var(--border-radius-lg);
      overflow: hidden;
    }

    .svc {
      padding: 1.75rem 1.5rem 2.25rem;
      border-right: 0.5px solid var(--color-border-tertiary);
      cursor: pointer;
      position: relative;
      transition: background 0.25s ease, color 0.25s ease;
    }

    .svc:last-child {
      border-right: none;
    }

    .svc::after {
      content: '→';
      position: absolute;
      bottom: 1.5rem;
      right: 1.5rem;
      font-size: 14px;
      color: var(--color-text-tertiary);
      transition: transform 0.22s ease, color 0.25s ease;
    }

    .svc:hover {
      background: #1c1c1c;
    }

    .svc:hover::after {
      transform: translateX(4px);
      color: rgba(255, 255, 255, 0.5);
    }

    .svc-no {
      font-size: clamp(11px, 10px + 0.312vw, 13.75px);
      color: var(--color-text-secondary);
      letter-spacing: 0.08em;
      margin-bottom: 1rem;
      display: inline-block;
      transition: color 0.25s ease;
    }

    .svc h3 {
      font-size: clamp(13px, 11.36px + 0.511vw, 17.5px);
      font-weight: 500;
      margin-bottom: 6px;
      line-height: 1.4;
      transition: color 0.25s ease;
    }

    .svc:hover .svc-no {
      color: rgba(255, 255, 255, 0.45);
    }

    .svc:hover h3 {
      color: #fff;
    }

    .svc-desc {
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
      line-height: 1.7;
      margin-bottom: 10px;
      overflow-wrap: break-word;
      line-break: strict;
      transition: color 0.25s ease;
    }

    .svc:hover .svc-desc {
      color: rgba(255, 255, 255, 0.55);
    }

    .svc-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .svc:hover .pill {
      color: #c9b47a;
      border-color: rgba(201, 180, 122, 0.45);
    }

    .pill {
      font-size: clamp(10px, 9.09px + 0.284vw, 12.5px);
      color: var(--color-text-secondary);
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: 20px;
      padding: 2px 7px;
      cursor: default;
      transition:
        font-weight 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    }

    .pill:hover {
      font-weight: 700;
      color: var(--color-text-primary);
      border-color: var(--color-text-primary);
    }

    .order-block {
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: var(--border-radius-lg);
      overflow: hidden;
    }

    .order-top {
      background: #111;
      padding: 2.25rem 2rem;
    }

    .order-badge {
      display: inline-block;
      font-size: clamp(10px, 9.09px + 0.284vw, 12.5px);
      letter-spacing: 0.12em;
      color: #c9b47a;
      border: 0.5px solid #c9b47a;
      border-radius: 20px;
      padding: 3px 10px;
      margin-bottom: 1rem;
    }

    .order-top h2 {
      font-size: clamp(17px, 14.09px + 0.909vw, 25px);
      font-weight: 500;
      color: #fff;
      line-height: 1.45;
      max-width: 360px;
      margin-bottom: 0.6rem;
    }

    .order-top p {
      font-size: clamp(13px, 11.82px + 0.369vw, 16.25px);
      color: rgba(255, 255, 255, 0.5);
      line-height: 1.75;
      max-width: 520px;
    }

    .order-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      background: var(--color-background-secondary);
      position: relative;
    }

    .order-steps::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 3px;
      background: linear-gradient(90deg,
          #c9b47a 0%,
          #c9b47a var(--order-progress, 0%),
          transparent var(--order-progress, 0%),
          transparent 100%);
      transition: none;
      pointer-events: none;
      z-index: 2;
    }

    .sec[data-animate].is-in .order-steps::before {
      --order-progress: 100%;
      transition: --order-progress 2s cubic-bezier(0.65, 0.05, 0.36, 1) 0.15s;
    }

    @property --order-progress {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 0%;
    }

    .o-step {
      padding: 2.5rem 2.25rem;
      border-right: 0.5px solid var(--color-border-tertiary);
      border-top: 0.5px solid var(--color-border-tertiary);
      position: relative;
    }

    .o-step::after {
      content: "";
      position: absolute;
      left: 1rem;
      right: 1rem;
      bottom: -2px;
      height: 2px;
      background: #dbdbdb;
      transform-origin: left;
      transform: scaleX(0);
      transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
    }

    .sec[data-animate].is-in .order-steps .o-step:nth-child(1)::after {
      transform: scaleX(1);
      transition-delay: 0.2s;
    }

    .sec[data-animate].is-in .order-steps .o-step:nth-child(2)::after {
      transform: scaleX(1);
      transition-delay: 0.7s;
    }

    .sec[data-animate].is-in .order-steps .o-step:nth-child(3)::after {
      transform: scaleX(1);
      transition-delay: 1.2s;
    }

    .sec[data-animate].is-in .order-steps .o-step:nth-child(4)::after {
      transform: scaleX(1);
      transition-delay: 1.7s;
    }

    .o-step:last-child {
      border-right: none;
    }

    .o-num {
      font-size: clamp(11px, 10px + 0.312vw, 13.75px);
      color: var(--color-text-secondary);
      letter-spacing: 0.08em;
      margin-bottom: 6px;
      display: block;
    }

    .o-step h4 {
      font-size: clamp(13px, 11.82px + 0.369vw, 16.25px);
      font-weight: 500;
      margin-bottom: 4px;
    }

    .o-step p {
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
      line-height: 1.6;
    }

    .order-bottom {
      padding: 1rem 1.5rem;
      border-top: 0.5px solid var(--color-border-tertiary);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      background: var(--color-background-primary);
    }

    .order-bottom p {
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
      line-height: 1.6;
      max-width: 420px;
    }

    .order-bottom p strong {
      color: var(--color-text-primary);
      font-weight: 500;
      word-break: keep-all;
      overflow-wrap: normal;
      line-break: strict;
    }

    .order-link {
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      font-weight: 500;
      color: var(--color-text-primary);
      white-space: nowrap;
      cursor: pointer;
      border-bottom: 1px solid var(--color-text-primary);
      padding-bottom: 1px;
      transition:
        font-weight 0.3s ease,
        letter-spacing 0.3s ease,
        padding 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.3s ease,
        color 0.3s ease;
      text-decoration: none;
    }

    .order-link:hover {
      font-weight: 700;
      letter-spacing: 0.06em;
      padding-right: 6px;
      border-color: #c9b47a;
      color: #c9b47a;
    }

    .works-block {
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: var(--border-radius-lg);
      overflow: hidden;
    }

    .works-photos {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      aspect-ratio: 16/6;
      gap: 0;
    }

    .photo-cell {
      position: relative;
      background: var(--color-background-secondary);
      border-right: 0.5px solid var(--color-border-tertiary);
      border-bottom: 0.5px solid var(--color-border-tertiary);
      overflow: hidden;
      cursor: pointer;
    }

    .photo-cell.tall {
      grid-row: 1/3;
    }

    .photo-cell:nth-child(3),
    .photo-cell:nth-child(5) {
      border-right: none;
    }

    .photo-cell .photo-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition:
        transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
        filter 0.5s ease;
    }

    .photo-cell:hover .photo-img {
      transform: scale(1.05);
      filter: brightness(0.85);
    }

    .photo-cell .photo-tag {
      position: absolute;
      bottom: 10px;
      left: 12px;
      font-size: clamp(10px, 9.09px + 0.284vw, 12.5px);
      letter-spacing: 0.1em;
      color: rgba(255, 255, 255, 0.95);
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      padding: 3px 9px;
      border-radius: 20px;
      z-index: 2;
      transition:
        background 0.3s ease,
        color 0.3s ease;
    }

    .photo-cell:hover .photo-tag {
      background: rgba(201, 180, 122, 0.95);
      color: #1a1a1a;
    }

    .photo-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      height: 100%;
      color: var(--color-text-secondary);
    }

    .photo-placeholder i {
      font-size: clamp(18px, 14.55px + 1.079vw, 27.5px);
    }

    .photo-placeholder span {
      font-size: clamp(10px, 9.09px + 0.284vw, 12.5px);
      letter-spacing: 0.06em;
      text-align: center;
      line-height: 1.5;
    }

    .case-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.1rem 1.5rem;
      border-bottom: 0.5px solid var(--color-border-tertiary);
      cursor: pointer;
      transition: background 0.25s ease;
    }

    .case-row:last-child {
      border-bottom: none;
    }

    .case-row:hover {
      background: var(--color-background-secondary);
    }

    .case-row:hover .case-r {
      color: var(--color-text-primary);
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    .case-row:hover .case-name {
      letter-spacing: 0.02em;
    }

    .case-row:hover .case-dot {
      background: #c9b47a;
      transform: scale(1.4);
    }

    .case-l {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .case-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--color-text-secondary);
      flex-shrink: 0;
      transition:
        background 0.3s ease,
        transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .case-name {
      font-size: clamp(13px, 11.36px + 0.511vw, 17.5px);
      font-weight: 500;
      transition: letter-spacing 0.3s ease;
    }

    .case-type {
      font-size: clamp(11px, 10px + 0.312vw, 13.75px);
      color: var(--color-text-secondary);
      margin-top: 2px;
      letter-spacing: 0.04em;
    }

    .case-r {
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
      font-weight: 400;
      transition:
        color 0.3s ease,
        font-weight 0.3s ease,
        letter-spacing 0.3s ease;
    }

    .stage-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .s-card {
      position: relative;
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: var(--border-radius-lg);
      padding: 1.75rem;
      cursor: pointer;
      background: var(--color-background-primary);
      overflow: hidden;
      transition:
        border-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .s-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      background: #1a1a1a;
      transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .s-card>* {
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
    }

    .s-card:hover {
      border-color: #1a1a1a;
      background: #fafaf7;
      transform: translateY(-4px);
      box-shadow:
        0 18px 40px -18px rgba(0, 0, 0, 0.22),
        0 2px 6px -2px rgba(0, 0, 0, 0.06);
    }

    .s-card:hover::before {
      width: 3px;
    }

    .s-card:hover h3 {
      color: #1a1a1a;
    }

    .s-card:hover .arr {
      color: #1a1a1a;
      letter-spacing: 0.04em;
      padding-left: 3px;
    }

    .s-card .arr {
      transition:
        color 0.3s ease,
        letter-spacing 0.3s ease,
        padding-left 0.3s ease;
    }

    .s-card h3 {
      font-size: clamp(13px, 11.36px + 0.511vw, 17.5px);
      font-weight: 500;
      margin-bottom: 5px;
    }

    .s-card p {
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
      line-height: 1.65;
    }

    .s-card .arr {
      font-size: clamp(11px, 10px + 0.312vw, 13.75px);
      color: var(--color-text-secondary);
      margin-top: 10px;
      display: block;
    }

    .brand-strip {
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: var(--border-radius-lg);
      overflow: hidden;
    }

    .brand-photo {
      position: relative;
      width: 100%;
      aspect-ratio: 16/8;
      background: #0a0a0a;
      overflow: hidden;
      border-bottom: 0.5px solid var(--color-border-tertiary);
    }

    .brand-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
    }

    .brand-slide.is-active {
      opacity: 1;
      pointer-events: auto;
      z-index: 1;
    }

    .brand-slide img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.1);
      transition: transform 6s linear;
    }

    .brand-slide.is-active img {
      transform: scale(1);
    }

    .brand-slide[data-fit="cards"] img {
      object-position: center 58%;
    }

    .brand-slide[data-fit="storefront"] img {
      object-position: center 38%;
    }

    .brand-photo-cap {
      position: absolute;
      left: 14px;
      bottom: 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: clamp(10px, 9.09px + 0.284vw, 12.5px);
      letter-spacing: 0.14em;
      color: rgba(255, 255, 255, 0.92);
      background: rgba(0, 0, 0, 0.38);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      padding: 5px 10px;
      border-radius: 20px;
      z-index: 3;
      transition: opacity 0.4s ease;
    }

    .brand-photo-cap .dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #c9b47a;
    }

    .brand-dots {
      position: absolute;
      right: 14px;
      bottom: 14px;
      display: flex;
      gap: 6px;
      z-index: 3;
    }

    .brand-dot {
      width: 18px;
      height: 3px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.35);
      border: 0;
      padding: 0;
      cursor: pointer;
      transition:
        background 0.3s ease,
        width 0.3s ease;
    }

    .brand-dot.is-active {
      background: #c9b47a;
      width: 28px;
    }

    .brand-content {
      padding: 1.5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }

    .brand-strip-left {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 2.8rem;
      word-break: keep-all;
      overflow-wrap: normal;
      line-break: strict;
    }

    .brand-strip-left p {
      font-size: clamp(13px, 11.82px + 0.369vw, 16.25px);
      color: var(--color-text-secondary);
      line-height: 1.85;
      max-width: 520px;
    }

    .brand-strip-left p strong {
      color: var(--color-text-primary);
      font-weight: 500;
    }

    .brand-notice-btn {
      display: inline-block;
      font-size: clamp(10px, 9.09px + 0.284vw, 12.5px);
      color: var(--color-accent);
      border: 0.5px solid var(--color-accent);
      border-radius: 20px;
      padding: 4px 12px;
      text-decoration: none;
      letter-spacing: 0.05em;
      align-self: flex-start;
      transition:
        background 0.2s ease,
        color 0.2s ease;
    }

    .brand-notice-btn:hover {
      background: var(--color-accent);
      color: var(--color-background-primary);
    }

    .brand-strip-right {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      justify-content: center;
    }

    /* Each of the three brands reads as its own card, marked by the
       brand gold, instead of three rows sharing one hairline list */
    .brand-item-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-sm) var(--space-md);
      background: var(--color-background-secondary);
      border: 0.5px solid var(--color-border-tertiary);
      border-left: 2px solid var(--color-accent);
      border-radius: var(--border-radius-lg);
      transition: background 0.25s ease, border-color 0.25s ease;
    }

    .brand-item-row:hover {
      background: var(--color-background-primary);
      border-color: var(--color-accent);
    }

    .brand-item-row span {
      font-size: clamp(13px, 11.82px + 0.369vw, 16.25px);
      font-weight: 500;
    }

    .brand-item-row small {
      font-size: clamp(11px, 10px + 0.312vw, 13.75px);
      color: var(--color-text-secondary);
      letter-spacing: 0.05em;
      display: block;
      margin-top: 2px;
    }

    .brand-link {
      font-size: clamp(11px, 10px + 0.312vw, 13.75px);
      color: var(--color-text-secondary);
      cursor: pointer;
      white-space: nowrap;
    }

    .brand-link:hover {
      color: var(--color-text-primary);
    }

    .closing {
      margin-top: 1rem;
      border-top: 0.5px solid var(--color-border-tertiary);
      padding-top: 3rem;
      padding-bottom: 2rem;
    }

    .closing-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: end;
    }

    .closing h2 {
      font-size: clamp(20px, 16.36px + 1.136vw, 30px);
      font-weight: 500;
      line-height: 1.45;
      margin-bottom: 1rem;
      max-width: 380px;
    }

    .closing-sub {
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
      line-height: 1.8;
      max-width: 380px;
    }

    .closing-right {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .closing-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 18px;
      margin: 0 -18px;
      border-bottom: 0.5px solid var(--color-border-tertiary);
      cursor: pointer;
      border-radius: 8px;
      transition: padding 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .closing-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      background: linear-gradient(90deg, #111 0%, #1a1a1a 70%, #222 100%);
      border-radius: 8px;
      transition: width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
      pointer-events: none;
      z-index: 0;
    }

    .closing-item>* {
      position: relative;
      z-index: 1;
    }

    .closing-item:first-child {
      border-top: 0.5px solid var(--color-border-tertiary);
    }

    .closing-item:hover {
      padding-left: 26px;
      padding-right: 18px;
    }

    .closing-item:hover::before {
      width: 100%;
    }

    .closing-item:hover .ci-arrow {
      color: #c9b47a;
      transform: translateX(8px);
      letter-spacing: 0.15em;
    }

    .closing-item:hover .ci-left i {
      color: #0a0a0a;
      background: #c9b47a;
      transform: scale(1) rotate(0deg);
    }

    .closing-item:hover .ci-label {
      color: #fff;
      letter-spacing: 0.02em;
    }

    .closing-item:hover .ci-desc {
      color: rgba(201, 180, 122, 0.85);
    }

    .ci-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .ci-left i {
      font-size: clamp(14px, 12.36px + 0.455vw, 20px);
      color: var(--color-text-secondary);
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: transparent;
      transition:
        color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        background-color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .ci-label {
      font-size: clamp(13px, 11.82px + 0.369vw, 16.25px);
      font-weight: 500;
      transition:
        color 0.35s ease,
        letter-spacing 0.35s ease;
    }

    .ci-desc {
      font-size: clamp(11px, 10px + 0.312vw, 13.75px);
      color: var(--color-text-secondary);
      margin-top: 2px;
      transition: color 0.35s ease;
    }

    .ci-arrow {
      font-size: clamp(13px, 11.82px + 0.369vw, 16.25px);
      color: var(--color-text-secondary);
      transition:
        color 0.4s ease,
        transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        letter-spacing 0.4s ease;
    }

    .closing-address {
      margin-top: 1.5rem;
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
      letter-spacing: 0.06em;
      line-height: 1.8;
    }

    /* === SCROLL REVEAL ANIMATIONS === */
    @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        transition:
          opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: opacity, transform;
      }

      .reveal.r-up {
        transform: translateY(28px);
      }

      .reveal.r-left {
        transform: translateY(28px);
      }

      .reveal.r-right {
        transform: translateY(28px);
      }

      .reveal.r-d1 {
        transition-delay: 0.12s;
      }

      .reveal.r-d2 {
        transition-delay: 0.24s;
      }

      .reveal.r-d3 {
        transition-delay: 0.36s;
      }

      .reveal.r-d4 {
        transition-delay: 0.48s;
      }

      .reveal.is-in {
        opacity: 1;
        transform: none;
      }

      .sec[data-animate] {
        opacity: 0;
        transition:
          opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: opacity, transform;
      }

      .sec[data-animate]:not([data-animate="fade"]) {
        transform: translateY(32px);
      }

      .sec[data-animate="fade"] {
        transform: none;
      }

      .sec[data-animate].is-in {
        opacity: 1;
        transform: none;
      }

      .sec[data-animate] .svc,
      .sec[data-animate] .o-step,
      .sec[data-animate] .photo-cell,
      .sec[data-animate] .case-row,
      .sec[data-animate] .s-card,
      .sec[data-animate] .brand-item-row {
        opacity: 0;
        transform: translateY(14px);
        transition:
          opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
      }

      .sec[data-animate].is-in .svc:nth-child(1),
      .sec[data-animate].is-in .o-step:nth-child(1),
      .sec[data-animate].is-in .photo-cell:nth-child(1),
      .sec[data-animate].is-in .case-row:nth-child(1),
      .sec[data-animate].is-in .s-card:nth-child(1),
      .sec[data-animate].is-in .brand-item-row:nth-child(1) {
        opacity: 1;
        transform: none;
        transition-delay: 0.15s;
      }

      .sec[data-animate].is-in .svc:nth-child(2),
      .sec[data-animate].is-in .o-step:nth-child(2),
      .sec[data-animate].is-in .photo-cell:nth-child(2),
      .sec[data-animate].is-in .case-row:nth-child(2),
      .sec[data-animate].is-in .s-card:nth-child(2),
      .sec[data-animate].is-in .brand-item-row:nth-child(2) {
        opacity: 1;
        transform: none;
        transition-delay: 0.28s;
      }

      .sec[data-animate].is-in .svc:nth-child(3),
      .sec[data-animate].is-in .o-step:nth-child(3),
      .sec[data-animate].is-in .photo-cell:nth-child(3),
      .sec[data-animate].is-in .case-row:nth-child(3),
      .sec[data-animate].is-in .s-card:nth-child(3),
      .sec[data-animate].is-in .brand-item-row:nth-child(3) {
        opacity: 1;
        transform: none;
        transition-delay: 0.41s;
      }

      .sec[data-animate].is-in .o-step:nth-child(4),
      .sec[data-animate].is-in .photo-cell:nth-child(4),
      .sec[data-animate].is-in .case-row:nth-child(4),
      .sec[data-animate].is-in .s-card:nth-child(4) {
        opacity: 1;
        transform: none;
        transition-delay: 0.54s;
      }

      .sec[data-animate].is-in .photo-cell:nth-child(5),
      .sec[data-animate].is-in .case-row:nth-child(5) {
        opacity: 1;
        transform: none;
        transition-delay: 0.67s;
      }

      .closing[data-animate] {
        opacity: 0;
        transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: opacity;
      }

      .closing[data-animate].is-in {
        opacity: 1;
      }

      .closing[data-animate] .closing-inner>*,
      .closing[data-animate] .closing-address {
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
      }

      .closing[data-animate].is-in .closing-inner>*:nth-child(1) {
        opacity: 1;
        transform: none;
        transition-delay: 0.1s;
      }

      .closing[data-animate].is-in .closing-inner>*:nth-child(2) {
        opacity: 1;
        transform: none;
        transition-delay: 0.25s;
      }

      .closing[data-animate].is-in .closing-address {
        opacity: 1;
        transform: none;
        transition-delay: 0.45s;
      }

      .sec[data-animate] .order-steps .o-step {
        opacity: 0;
        transform: translateY(20px);
        transition:
          opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
      }

      .sec[data-animate] .order-steps .o-step .o-num,
      .sec[data-animate] .order-steps .o-step h4,
      .sec[data-animate] .order-steps .o-step p {
        opacity: 0;
        transform: translateY(8px);
        transition:
          opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(1) {
        opacity: 1;
        transform: none;
        transition-delay: 0.2s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(2) {
        opacity: 1;
        transform: none;
        transition-delay: 0.7s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(3) {
        opacity: 1;
        transform: none;
        transition-delay: 1.2s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(4) {
        opacity: 1;
        transform: none;
        transition-delay: 1.7s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(1) .o-num {
        opacity: 1;
        transform: none;
        transition-delay: 0.3s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(1) h4 {
        opacity: 1;
        transform: none;
        transition-delay: 0.42s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(1) p {
        opacity: 1;
        transform: none;
        transition-delay: 0.52s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(2) .o-num {
        opacity: 1;
        transform: none;
        transition-delay: 0.8s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(2) h4 {
        opacity: 1;
        transform: none;
        transition-delay: 0.92s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(2) p {
        opacity: 1;
        transform: none;
        transition-delay: 1.02s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(3) .o-num {
        opacity: 1;
        transform: none;
        transition-delay: 1.3s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(3) h4 {
        opacity: 1;
        transform: none;
        transition-delay: 1.42s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(3) p {
        opacity: 1;
        transform: none;
        transition-delay: 1.52s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(4) .o-num {
        opacity: 1;
        transform: none;
        transition-delay: 1.8s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(4) h4 {
        opacity: 1;
        transform: none;
        transition-delay: 1.92s;
      }

      .sec[data-animate].is-in .order-steps .o-step:nth-child(4) p {
        opacity: 1;
        transform: none;
        transition-delay: 2.02s;
      }
    }

    /* === GET A QUOTE === */
    .quote-shell {
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: var(--border-radius-lg);
      overflow: hidden;
      background: var(--color-background-primary);
    }

    .q-progress {
      height: 2px;
      background: var(--color-border-tertiary);
    }

    .q-progress-fill {
      height: 100%;
      background: #c9b47a;
      transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
      width: 0%;
    }

    .q-body {
      padding: 2.25rem 2rem;
    }

    .q-step {
      display: none;
    }

    .q-step.active {
      display: block;
      animation: qFadeIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    @keyframes qFadeIn {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .q-step-header {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 1.5rem;
    }

    .q-num {
      font-size: clamp(11px, 10px + 0.312vw, 13.75px);
      color: var(--color-text-secondary);
      letter-spacing: 0.1em;
    }

    .q-title {
      font-size: clamp(14px, 12.36px + 0.455vw, 20px);
      font-weight: 500;
    }

    .q-back {
      margin-left: auto;
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
      cursor: pointer;
      border: none;
      background: none;
      font-family: inherit;
      padding: 0;
      transition:
        color 0.2s ease,
        font-weight 0.25s ease;
    }

    .q-back:hover {
      color: var(--color-text-primary);
      font-weight: 700;
    }

    .q-cat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .q-cat-card {
      position: relative;
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: var(--border-radius-lg);
      padding: 1.25rem 1rem;
      cursor: pointer;
      background: var(--color-background-primary);
      transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.25s ease;
    }

    .q-cat-card:hover {
      border-color: #c9b47a;
      background: #faf6ee;
      transform: translateY(-3px);
      box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.18);
    }

    .q-cat-card.selected {
      border-color: #c9b47a;
      background: #faf6ee;
      box-shadow: 0 0 0 1px #c9b47a;
    }

    .q-cat-icon {
      font-size: clamp(17px, 14.09px + 0.909vw, 25px);
      margin-bottom: 10px;
      display: block;
      line-height: 1;
    }

    .q-cat-name {
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      font-weight: 500;
      margin-bottom: 3px;
    }

    .q-cat-sub {
      font-size: clamp(10px, 9.09px + 0.284vw, 12.5px);
      color: var(--color-text-secondary);
      line-height: 1.55;
    }

    .q-svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .q-svc-card {
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: var(--border-radius-lg);
      padding: 1rem;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 4px;
      background: var(--color-background-primary);
      transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .q-svc-card:hover {
      border-color: #c9b47a;
      background: #faf6ee;
      transform: translateY(-2px);
    }

    .q-svc-name {
      font-size: clamp(13px, 11.82px + 0.369vw, 16.25px);
      font-weight: 500;
    }

    .q-svc-days {
      font-size: clamp(11px, 10px + 0.312vw, 13.75px);
      color: var(--color-text-secondary);
    }

    .q-question {
      font-size: clamp(13px, 11.36px + 0.511vw, 17.5px);
      color: var(--color-text-secondary);
      margin-bottom: 1.25rem;
      line-height: 1.7;
    }

    .q-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .q-opt {
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: var(--border-radius-lg);
      padding: 1rem 1.25rem;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 4px;
      background: var(--color-background-primary);
      transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        padding-left 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .q-opt:hover {
      border-color: #c9b47a;
      background: #faf6ee;
      padding-left: 1.5rem;
    }

    .q-opt-label {
      font-size: clamp(13px, 11.36px + 0.511vw, 17.5px);
      font-weight: 500;
    }

    .q-opt-desc {
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
      line-height: 1.65;
    }

    .q-result {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: start;
    }

    .q-result-right {
      padding-left: 1.5rem;
      border-left: 0.5px solid var(--color-border-tertiary);
    }

    .q-result-label {
      font-size: clamp(11px, 10px + 0.312vw, 13.75px);
      color: var(--color-text-secondary);
      letter-spacing: 0.1em;
      display: block;
      margin-bottom: 10px;
    }

    .q-result-service {
      font-size: clamp(17px, 14.09px + 0.909vw, 25px);
      font-weight: 500;
      margin-bottom: 6px;
    }

    .q-result-stage {
      font-size: clamp(13px, 11.82px + 0.369vw, 16.25px);
      color: var(--color-text-secondary);
      margin-bottom: 6px;
      line-height: 1.6;
    }

    .q-result-days {
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
    }

    .q-result-days strong {
      color: var(--color-text-primary);
    }

    .q-result-msg {
      font-size: clamp(13px, 11.82px + 0.369vw, 16.25px);
      color: var(--color-text-secondary);
      line-height: 1.8;
      margin-bottom: 1.25rem;
    }

    .q-line-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #06c755;
      color: #fff;
      font-size: clamp(13px, 11.36px + 0.511vw, 17.5px);
      font-weight: 500;
      padding: 12px 24px;
      border-radius: 30px;
      cursor: pointer;
      text-decoration: none;
      transition:
        opacity 0.2s ease,
        transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.25s ease;
      font-family: inherit;
      border: none;
    }

    .q-line-btn:hover {
      opacity: 0.92;
      transform: translateY(-1px);
      box-shadow: 0 8px 22px -10px rgba(6, 199, 85, 0.5);
    }

    .q-line-icon {
      width: 20px;
      height: 20px;
    }

    .q-restart {
      display: block;
      margin-top: 12px;
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
      cursor: pointer;
      text-decoration: underline;
      background: none;
      border: none;
      font-family: inherit;
      padding: 0;
      transition: color 0.2s ease;
    }

    .q-restart:hover {
      color: var(--color-text-primary);
    }

    .q-copy-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      color: var(--color-text-secondary);
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      font-family: inherit;
      transition: color 0.2s ease;
    }

    .q-copy-btn:hover {
      color: var(--color-text-primary);
    }

    .q-copy-btn.copied {
      color: #c9b47a;
    }

    @media (max-width: 640px) {
      .q-cat-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .q-svc-grid {
        grid-template-columns: 1fr 1fr;
      }

      .q-result {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .q-result-right {
        border-left: none;
        border-top: 0.5px solid var(--color-border-tertiary);
        padding-left: 0;
        padding-top: 1.5rem;
        margin-top: 1.5rem;
      }

      .q-line-btn {
        width: 100%;
        justify-content: center;
      }
    }

    /* === QUOTE SECTION framed block === */
    .sec.quote-section {
      margin-top: 3.5rem;
      border: 1.5px solid #1a1a1a;
      border-radius: 14px;
      padding: 1.75rem 1.75rem 2rem;
      position: relative;
      overflow: hidden;
      scroll-margin-top: calc(var(--header-height) + 1rem);
    }

    .sec.quote-section .sec-head {
      align-items: flex-end;
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 1.5rem;
      gap: 1rem;
    }

    .sec.quote-section .sec-head-left {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .sec.quote-section .sec-label {
      font-size: clamp(14px, 12.36px + 0.455vw, 20px);
      letter-spacing: 0.14em;
      color: var(--color-text-secondary);
      font-weight: 400;
    }

    .sec.quote-section .sec-label::before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 1px;
      background: #1a1a1a;
      vertical-align: middle;
      margin-right: 8px;
      transform: translateY(-2px);
    }

    .sec.quote-section .q-section-title {
      font-size: clamp(21px, 16.82px + 1.307vw, 32.5px);
      font-weight: 600;
      color: #1a1a1a;
      line-height: 1.2;
      letter-spacing: -0.005em;
    }

    .sec.quote-section .sec-more {
      color: var(--color-text-secondary);
      font-size: clamp(12px, 10.91px + 0.341vw, 15px);
      font-weight: 400;
      align-self: flex-end;
      margin-bottom: 6px;
    }

    .sec.quote-section .quote-shell {
      border: none;
      border-radius: 0;
      background: transparent;
      overflow: visible;
    }

    .sec.quote-section .q-body {
      padding: 0;
    }

    .sec.quote-section .q-progress {
      display: none;
    }

    .sec.quote-section .q-cat-card:hover,
    .sec.quote-section .q-svc-card:hover,
    .sec.quote-section .q-opt:hover {
      border-color: #1a1a1a;
      background: #f7f7f5;
      box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.18);
    }

    .sec.quote-section .q-cat-card.selected,
    .sec.quote-section .q-svc-card.selected {
      border-color: #1a1a1a;
      background: #f7f7f5;
      box-shadow: 0 0 0 1px #1a1a1a;
    }

    .sec.quote-section .q-progress-fill {
      background: #1a1a1a;
    }

    @media (max-width: 640px) {
      .sec.quote-section {
        padding: 1.25rem 2rem 1.5rem;
      }
    }

    /* ============================================
       RWD — MOBILE (max-width: 768px)
       ============================================ */
    @media (max-width: 768px) {

      .page-content {
        padding: 0 1.5rem;
      }

      .hero {
        margin-top: 0;
        margin-bottom: 2.5rem;
        padding-bottom: 2.5rem;
      }

      .hero-stage {
        aspect-ratio: 4/5;
        border-radius: 0px;
      }

      .hero-content {
        padding: 4.5rem 4.25rem;
      }

      .hero h1 {
        margin-bottom: 1rem;
      }

      .hero-desc {
        margin-bottom: 1.25rem;
        max-width: 100%;
      }

      .hero-top {
        flex-direction: column;
        gap: 0.5rem;
      }

      .svc-grid {
        grid-template-columns: 1fr;

      }

      .svc {
        padding: 4rem 3.8rem;
        border-right: none;
        border-bottom: 0.5px solid var(--color-border-tertiary);
      }

      .svc:last-child {
        border-bottom: none;
      }

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

      .o-step:nth-child(2) {
        border-right: none;
      }

      .o-step:nth-child(3) {
        border-top: 0.5px solid var(--color-border-tertiary);
      }

      .order-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
      }

      .order-top {
        padding: 2.5rem 2.25rem;
      }

      .order-top h2 {
        margin: 1.25rem;
      }

      .order-top p {
        margin: 2.25rem 1.25rem;
      }

      .order-badge {
        margin: 1.25rem;
      }

      .order-bottom {
        padding: 2.5rem 2rem;
      }

      .works-photos {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        aspect-ratio: unset;
      }

      .case-row {

        padding: 3rem 2rem;

      }

      .photo-cell {
        aspect-ratio: 4/3;
      }

      .photo-cell.tall {
        grid-row: auto;
      }

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

      .brand-content {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.5rem;
      }

      .brand-strip-left p {
        max-width: 100%;
      }

      .brand-photo {
        aspect-ratio: 4/3;
      }

      .closing-inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .closing h2 {
        max-width: 100%;
      }

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

      .closing-item {
        margin: 0;
        padding: 14px 0;
      }

      .closing-item::before {
        display: block;
      }

      .closing-item:hover {
        background: #111;
        border-radius: 8px;
      }

      .sec-head {
        margin-bottom: 1.25rem;
      }

      .sec {
        margin-bottom: 8.8rem;
      }

      .q-cat-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .q-svc-grid {
        grid-template-columns: 1fr 1fr;
      }

      .q-result {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .q-result-right {
        border-left: none;
        border-top: 0.5px solid var(--color-border-tertiary);
        padding-left: 0;
        padding-top: 1.5rem;
        margin-top: 1.5rem;
      }

      .q-line-btn {
        width: 100%;
        justify-content: center;
      }

      .sec.quote-section {
        padding: 3.25rem 2rem 2rem;
        margin-top: 2rem;
      }
    }

    .hero-tag {
      position: relative;
      overflow: hidden;
    }

    .hero-tag::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(201, 180, 122, 0.3),
          transparent);
      animation: hero-tag-shimmer 3s ease-in-out infinite;
      animation-delay: 1s;
      pointer-events: none;
    }

    @keyframes hero-tag-shimmer {
      0% {
        left: -60%;
      }

      100% {
        left: 150%;
      }
    }

    /* === RFQ DRAWER === */
    .rfq-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 2000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    .rfq-overlay.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .rfq-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: min(520px, 100vw);
      height: 100vh;
      background: var(--color-background-primary);
      z-index: 2001;
      transform: translateX(100%);
      transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: -4px 0 32px rgba(0, 0, 0, 0.12);
    }

    .rfq-drawer.is-open {
      transform: translateX(0);
    }

    .rfq-drawer-head {
      padding: 24px 28px 20px;
      border-bottom: 0.5px solid var(--color-border-tertiary);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-shrink: 0;
    }

    .rfq-drawer-eyebrow {
      display: block;
      font-size: 11px;
      letter-spacing: 0.14em;
      color: var(--color-text-secondary);
      font-weight: 400;
      margin-bottom: 4px;
    }

    .rfq-drawer-title {
      font-size: 22px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin: 0;
      line-height: 1.2;
    }

    .rfq-close-btn {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 0.5px solid var(--color-border-tertiary);
      border-radius: 50%;
      cursor: pointer;
      color: var(--color-text-secondary);
      font-size: 15px;
      transition:
        color 0.2s,
        border-color 0.2s;
    }

    .rfq-close-btn:hover {
      color: var(--color-text-primary);
      border-color: var(--color-text-primary);
    }

    .rfq-drawer-body {
      flex: 1;
      overflow-y: auto;
      padding: 28px;
      container-type: inline-size;
      container-name: rfq-wizard;
    }

    /* The drawer is always ≤520 px wide — same compact layout as
       the @media (max-width: 640px) block in the quote section above.
       @container keeps this scoped to the drawer and avoids a
       separate duplicate rule set. */
    @container rfq-wizard (min-width: 0px) {
      .q-cat-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .q-svc-grid {
        grid-template-columns: 1fr 1fr;
      }

      .q-result {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .q-result-right {
        border-left: none;
        border-top: 0.5px solid var(--color-border-tertiary);
        padding-left: 0;
        padding-top: 1.5rem;
        margin-top: 1.5rem;
      }

      .q-line-btn {
        width: 100%;
        justify-content: center;
      }
    }

    @media (max-width: 640px) {
      .rfq-drawer {
        width: 100vw;
      }

      .rfq-drawer-head {
        padding: 20px 20px 16px;
      }

      .rfq-drawer-body {
        padding: 20px;
      }
    }