:root {
      --ink: #090909;
      --charcoal: #151515;
      --surface: #1D1D1B;
      --bone: #E8E1D5;
      --muted: #A49F98;
      --oxide: #8F2923;
      --warm: #B18A5A;
      --nav-h: 72px;
    }

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

    html {
      scroll-behavior: auto;
      -webkit-text-size-adjust: 100%;
    }

    body {
      margin: 0;
      background: var(--ink);
      color: var(--bone);
      font-family: Manrope, system-ui, sans-serif;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    ::selection {
      background: rgba(143, 41, 35, 0.45);
      color: #fff;
    }

    .font-display { font-family: "Bebas Neue", sans-serif; letter-spacing: 0.02em; }
    .font-accent { font-family: "Cormorant Garamond", Georgia, serif; }

    .grain {
      pointer-events: none;
      position: fixed;
      inset: 0;
      z-index: 80;
      opacity: 0.035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .nav-shell {
      transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
      border-bottom: 1px solid transparent;
    }

    .nav-shell.is-scrolled {
      background: rgba(9, 9, 9, 0.78);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom-color: rgba(232, 225, 213, 0.08);
    }

    .nav-drawer {
      transform: translateX(100%);
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

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

    .hero-stage {
      min-height: 100svh;
    }

    .hero-media {
      will-change: transform;
    }

    .hero-overlay {
      background:
        linear-gradient(90deg, rgba(9,9,9,0.88) 0%, rgba(9,9,9,0.45) 48%, rgba(9,9,9,0.2) 100%),
        linear-gradient(180deg, rgba(9,9,9,0.55) 0%, rgba(9,9,9,0.15) 35%, rgba(9,9,9,0.75) 100%);
    }

    @media (max-width: 767px) {
      .hero-overlay {
        background:
          linear-gradient(180deg, rgba(9,9,9,0.35) 0%, rgba(9,9,9,0.2) 40%, rgba(9,9,9,0.92) 78%, #090909 100%);
      }
    }

    .line-mask { overflow: hidden; display: block; }
    .line-mask > span { display: block; }

    .style-chip {
      font-size: 0.65rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .gallery-item {
      position: relative;
      overflow: hidden;
      background: var(--surface);
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Show full photo without crop/zoom */
    .gallery-item.gallery-no-zoom {
      background: #0f0f0f;
    }

    .gallery-item.gallery-no-zoom img {
      object-fit: contain;
      object-position: center;
    }

    @media (hover: hover) {
      .gallery-item.gallery-no-zoom:hover img {
        transform: none;
      }
    }

    .gallery-item .g-overlay {
      position: absolute;
      inset: 0;
      background: rgba(9, 9, 9, 0.0);
      transition: background 0.45s ease;
      display: flex;
      align-items: flex-end;
      padding: 1.25rem;
    }

    .gallery-item .g-label {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      font-size: 0.7rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--bone);
      border: 1px solid rgba(232, 225, 213, 0.25);
      padding: 0.4rem 0.7rem;
      background: rgba(9, 9, 9, 0.55);
    }

    @media (hover: hover) {
      .gallery-item:hover img { transform: scale(1.035); }
      .gallery-item:hover .g-overlay { background: rgba(9, 9, 9, 0.35); }
      .gallery-item:hover .g-label { opacity: 1; transform: translateY(0); }
    }

    .discipline-row {
      border-top: 1px solid rgba(232, 225, 213, 0.1);
    }

    .discipline-row:last-child {
      border-bottom: 1px solid rgba(232, 225, 213, 0.1);
    }

    .process-line {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      background: rgba(232, 225, 213, 0.12);
      transform: translateX(-50%);
    }

    .process-line-progress {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 0%;
      background: linear-gradient(180deg, var(--warm), var(--oxide));
    }

    @media (max-width: 767px) {
      .process-line {
        left: 12px;
        transform: none;
      }
    }

    .process-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--bone);
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 1px rgba(232, 225, 213, 0.4);
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      background: var(--bone);
      color: var(--ink);
      padding: 0.95rem 1.4rem;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 600;
      transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    }

    .btn-primary:hover {
      background: var(--oxide);
      color: #fff;
    }

    .btn-primary .arrow {
      transition: transform 0.3s ease;
    }

    .btn-primary:hover .arrow { transform: translateX(4px); }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      color: var(--bone);
      border-bottom: 1px solid rgba(232, 225, 213, 0.35);
      padding-bottom: 0.25rem;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 500;
      transition: border-color 0.3s ease, color 0.3s ease;
    }

    .btn-ghost:hover {
      color: #fff;
      border-color: var(--oxide);
    }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      border: 1px solid rgba(232, 225, 213, 0.35);
      color: var(--bone);
      padding: 0.95rem 1.4rem;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 600;
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .btn-outline:hover {
      background: var(--bone);
      color: var(--ink);
      border-color: var(--bone);
    }

    .field {
      width: 100%;
      background: transparent;
      border: 0;
      border-bottom: 1px solid rgba(232, 225, 213, 0.18);
      color: var(--bone);
      padding: 0.85rem 0;
      font-family: inherit;
      font-size: 0.95rem;
      outline: none;
      transition: border-color 0.3s ease;
    }

    .field:focus { border-bottom-color: var(--warm); }

    .field::placeholder { color: rgba(164, 159, 152, 0.7); }

    select.field {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A49F98' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0 center;
      padding-right: 1.5rem;
    }

    textarea.field {
      resize: vertical;
      min-height: 110px;
      border: 1px solid rgba(232, 225, 213, 0.18);
      padding: 0.85rem 1rem;
      margin-top: 0.35rem;
    }

    textarea.field:focus { border-color: var(--warm); }

    .floating-wa {
      position: fixed;
      right: max(1rem, env(safe-area-inset-right));
      bottom: max(1rem, env(safe-area-inset-bottom));
      z-index: 70;
      width: 52px;
      height: 52px;
      border-radius: 999px;
      background: #1a2e24;
      border: 1px solid rgba(232, 225, 213, 0.2);
      color: var(--bone);
      display: grid;
      place-items: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
      transition: transform 0.25s ease, background 0.25s ease;
    }

    .floating-wa:hover {
      transform: translateY(-2px);
      background: #243a2f;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(0, 0, 0, 0.72);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .modal-backdrop.is-open { display: flex; }

    .modal-panel {
      width: min(520px, 100%);
      max-height: 90vh;
      overflow-y: auto;
      background: var(--charcoal);
      border: 1px solid rgba(232, 225, 213, 0.12);
      color: var(--bone);
      position: relative;
    }

    .img-fallback {
      background:
        linear-gradient(135deg, #151515 0%, #1d1d1b 50%, #0f0f0f 100%);
      display: grid;
      place-items: center;
      color: var(--muted);
      font-size: 0.7rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .eyebrow {
      font-size: 0.68rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .section-pad {
      padding: 5.5rem 1.25rem;
    }

    @media (min-width: 768px) {
      .section-pad { padding: 7.5rem 2rem; }
    }

    @media (min-width: 1024px) {
      .section-pad { padding: 9rem 2.5rem; }
    }

    .manifesto-overlay {
      background:
        linear-gradient(90deg, rgba(9,9,9,0.75) 0%, rgba(9,9,9,0.4) 55%, rgba(9,9,9,0.65) 100%);
    }

    .focus-ring:focus-visible {
      outline: 2px solid var(--warm);
      outline-offset: 3px;
    }

    .brand-logo {
      display: block;
      height: 44px;
      width: auto;
      object-fit: contain;
    }

    @media (min-width: 768px) {
      .brand-logo { height: 52px; }
    }

    .brand-logo-sm {
      display: block;
      height: 36px;
      width: auto;
      object-fit: contain;
    }

    .brand-logo-footer {
      display: block;
      height: 56px;
      width: auto;
      object-fit: contain;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 0.7rem;
    }

    .brand-lockup .brand-text {
      line-height: 1;
    }

    body.menu-open { overflow: hidden; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }