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

    :root {
      --ivory: #F7F1EB;
      --ivory2: #F0E8DE;
      --rose: #C97B8A;
      --petal: #F2C8D0;
      --sage: #8FAF7E;
      --sage-l: #B8CFA8;
      --sage-p: #E6EFE0;
      --ink: #1A1612;
      --ink2: #231E19;
      --mid: #7A6A5A;
      --light: #B4A090;
      --serif: 'Cormorant Garamond', serif;
      --sans: 'Outfit', sans-serif;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      background: var(--ivory);
      /* Global Cream BG */
      color: var(--ink);
      /* Global Dark Text */
      font-family: var(--sans);
      font-weight: 300;
      overflow-x: hidden;
      cursor: none;
    }

    /* ── CURSOR ── */
    #cur {
      position: fixed;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--rose);
      pointer-events: none;
      z-index: 999999;
      transform: translate(-50%, -50%);
      transition: width .2s, height .2s;
      box-shadow: 0 0 10px rgba(201, 123, 138, 0.3);
      top: -100px;
      left: -100px;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    #cur2 {
      position: fixed;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2px solid var(--rose);
      pointer-events: none;
      z-index: 999998;
      transform: translate(-50%, -50%);
      transition: left .1s cubic-bezier(0.23, 1, 0.32, 1), top .1s cubic-bezier(0.23, 1, 0.32, 1);
      top: -100px;
      left: -100px;
      display: block !important;
      visibility: visible !important;
      opacity: 0.6 !important;
    }

    /* ── ISLAND NAV ── */
    .nav-wrap {
      position: fixed;
      top: 20px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      z-index: 1000;
      pointer-events: none;
    }

        .island, .island * {
      pointer-events: auto;
    }
    .mob-menu.open, .mob-menu.open * {
      pointer-events: auto !important;
    }

    .island {
      background: rgba(18, 13, 8, 0.75);
      /* Black Glass */
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 100px;
      display: flex;
      align-items: center;
      padding: 7px 7px 7px 18px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transition: all .5s cubic-bezier(.25, .46, .45, .94);
      white-space: nowrap;
    }

    /* ── LUXURY RATES COMMON ── */
    .rates-luxury { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; }
    @media (max-width: 1024px) { .rates-luxury { grid-template-columns: 1fr; gap: 30px; } }
    .luxury-table { width: 100%; border-collapse: collapse; }
    .lt-row { display: flex; justify-content: space-between; padding: 25px 0; border-bottom: 1px solid rgba(26,22,18,0.08); align-items: center; }
    .lt-time { font-family: var(--serif); font-size: 28px; color: var(--ink); font-weight: 400; }
    .lt-price { font-size: 20px; font-weight: 700; color: var(--rose); font-family: var(--sans); }
    .sle-item h4 { font-family: var(--serif); font-size: 18px; margin-bottom: 8px; color: var(--ink); font-weight: 500; }
    .sle-item p { font-size: 14px; color: var(--mid); line-height: 1.5; font-weight: 300; }
    .rl-left { position: sticky; top: 140px; }
    @media (max-width: 1024px) { .rl-left { position: static; } }

    .island.scrolled {
      background: rgba(0, 0, 0, 0.92);
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .island-logo {
      font-family: 'Cinzel', serif;
      font-size: 21px;
      font-weight: 800;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      margin-right: 24px;
      flex-shrink: 0;
      cursor: none;
      
      /* Orange Metallic Gradient */
      background: linear-gradient(
        to bottom, 
        #ffd24d 0%, 
        #ff9900 45%, 
        #cc6600 50%, 
        #ffaa00 55%, 
        #994400 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      
      /* Bevel & Depth Effect */
      filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5)) drop-shadow(0px 0.5px 0px rgba(255,255,255,0.4));
      
      position: relative;
      transition: all 0.5s ease;
    }

    .island-logo::after {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
      -webkit-background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      transition: background-position 0.8s ease;
      pointer-events: none;
    }

    .island:hover .island-logo::after {
      background-position: -100% 0;
    }

    .island-logo span {
      background: linear-gradient(to bottom, var(--rose), #ff4d6d);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 5px rgba(201,123,138,0.5));
    }

    .island-sep {
      width: 1px;
      height: 14px;
      background: rgba(26, 22, 18, 0.1);
      margin: 0 18px;
      flex-shrink: 0;
      display: block;
    }

    .island-links {
      display: flex;
      list-style: none;
      align-items: center;
    }

    .island-links a {
      display: block;
      padding: 6px 14px;
      font-size: 11.5px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      text-decoration: none;
      transition: all .25s;
      cursor: none;
      font-weight: 500;
    }

    .island-links a:hover {
      color: #fff;
    }

    /* Dropdown Logic */
    .has-dropdown { position: relative; }
    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      background: rgba(12, 10, 8, 0.98);
      backdrop-filter: blur(40px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-top: none;
      border-radius: 0 0 16px 16px;
      padding: 15px 0;
      min-width: 220px;
      list-style: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 30px 60px rgba(0,0,0,0.08);
      z-index: 1000;
      margin: 0;
    }

    .has-dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(2px);
    }

    .dropdown-menu li { width: 100%; border: none !important; margin: 0 !important; padding: 0 !important; }
    .dropdown-menu li a {
      display: block !important;
      padding: 10px 24px !important;
      font-size: 10.5px !important;
      letter-spacing: 1.5px !important;
      text-transform: uppercase !important;
      color: rgba(255, 255, 255, 0.8) !important;
      transition: all 0.3s !important;
      border: none !important;
      background: none !important;
    }

    .dropdown-menu li a:hover {
      background: rgba(201, 123, 138, 0.05) !important;
      color: var(--rose) !important;
      padding-left: 28px !important;
    }

    .island-cta {
      background: var(--rose);
      color: #fff;
      border: none;
      padding: 9px 22px;
      border-radius: 100px;
      margin-left: 14px;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      cursor: none;
      transition: background .3s;
      font-weight: 500;
      flex-shrink: 0;
    }

    .island-cta:hover {
      background: var(--ink);
      color: #fff;
    }

    .island-cta:hover {
      background: var(--sage);
    }

    .island-ham {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: none;
      padding: 5px;
      margin-left: 14px;
    }

    .island-ham span {
      display: block;
      width: 20px;
      height: 1.5px;
      background: #fff;
      transition: all .3s;
    }

    .island-ham.open span:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg);
    }

    .island-ham.open span:nth-child(2) {
      opacity: 0;
    }

    .island-ham.open span:nth-child(3) {
      transform: translateY(-6.5px) rotate(-45deg);
    }

    .mob-menu {
      position: fixed;
      top: 76px;
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      background: rgba(18, 13, 8, 0.95);
      backdrop-filter: blur(28px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      padding: 18px 24px;
      min-width: 210px;
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .3s, transform .3s;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
    }

    .mob-menu.open {
      opacity: 1;
      visibility: visible;
      pointer-events: all;
      transform: translateX(-50%) translateY(0);
    }

    .mob-menu a {
      display: block;
      padding: 11px 0;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      transition: color .25s;
    }

    .mob-drop-content {
      padding-left: 20px;
      background: rgba(201, 123, 138, 0.03);
    }

    .mob-drop-content a {
      font-size: 9px !important;
      opacity: 0.8;
      border-bottom: 1px solid rgba(26, 22, 18, 0.04) !important;
    }

    .mob-menu a:last-child {
      border-bottom: none;
    }

    .mob-menu a:hover {
      color: var(--rose);
    }

    /* ── HERO ── */
    #hero {
      width: 100%;
      height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      position: relative;
      overflow: hidden;
    }

    .col {
      position: relative;
      overflow: hidden;
      cursor: none;
    }

    .col::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      z-index: 10;
    }

    .col:nth-child(1)::before {
      background: var(--rose);
    }

    .col:nth-child(2)::before {
      background: var(--sage);
    }

    .col:nth-child(3)::before {
      background: var(--rose);
    }

    .col:nth-child(4)::before {
      background: var(--sage);
    }

    .col-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 1s cubic-bezier(.25, .46, .45, .94);
    }

    .col-photo:hover img {
      transform: scale(1.06);
    }

    .col-video .vid-inner {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      background: #110D09;
    }

    .col-video video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: .8;
    }

    .vid-play-btn {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity .3s;
    }

    .col-video:hover .vid-play-btn {
      opacity: 1;
    }

    .play-ring {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: rgba(247, 241, 235, .15);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, .25);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      padding-left: 4px;
      transition: background .3s, transform .3s;
    }

    .col-video:hover .play-ring {
      background: var(--rose);
      border-color: var(--rose);
      transform: scale(1.1);
    }

    .col-badge {
      position: absolute;
      top: 22px;
      left: 16px;
      z-index: 10;
      background: rgba(0, 0, 0, .4);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, .1);
      padding: 5px 12px;
      border-radius: 100px;
      font-size: 8px;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 400;
    }

    .col:nth-child(odd) .col-badge {
      color: var(--petal);
      border-color: rgba(242, 200, 208, .25);
    }

    .col:nth-child(even) .col-badge {
      color: var(--sage-l);
      border-color: rgba(184, 207, 168, .25);
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 20;
      pointer-events: none;
      background: radial-gradient(ellipse 65% 60% at 50% 50%, rgba(18, 13, 8, .6) 0%, rgba(18, 13, 8, .18) 55%, transparent 100%);
    }

    .hero-text {
      position: absolute;
      inset: 0;
      z-index: 21;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .ht-wrap {
      text-align: center;
      padding: 0 20px;
    }

    .ht-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 9px;
      letter-spacing: 6px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 22px;
      font-weight: 300;
      animation: fadeUp 1s ease .3s both;
    }

    .ht-eyebrow::before,
    .ht-eyebrow::after {
      content: '';
      width: 32px;
      height: 1px;
      background: rgba(255, 255, 255, .22);
    }

    .ht-h1 {
      font-family: var(--serif);
      font-size: clamp(46px, 6.8vw, 108px);
      font-weight: 300;
      line-height: .93;
      color: #fff;
      text-shadow: 0 2px 40px rgba(0, 0, 0, .5);
      animation: fadeUp 1s ease .5s both;
    }

    .ht-h1 em {
      font-style: italic;
      color: var(--petal);
    }

    .ht-h1 .g {
      color: var(--sage-l);
    }

    .ht-sub {
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .45);
      margin-top: 20px;
      line-height: 2.1;
      animation: fadeUp 1s ease .7s both;
    }

    .ht-btns {
      display: flex;
      gap: 12px;
      justify-content: center;
      margin-top: 34px;
      pointer-events: all;
      animation: fadeUp 1s ease .9s both;
    }

    .hbtn-fill {
      background: var(--rose);
      color: #fff;
      border: none;
      padding: 14px 36px;
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      cursor: none;
      transition: background .3s;
      font-weight: 400;
    }

    .hbtn-fill:hover {
      background: var(--sage);
    }

    .hbtn-outline {
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .35);
      padding: 14px 36px;
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      cursor: none;
      transition: all .3s;
      font-weight: 400;
    }

    .hbtn-outline:hover {
      border-color: var(--petal);
      color: var(--petal);
    }

    .hero-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 22;
      pointer-events: none;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 0 52px 32px;
      background: linear-gradient(to top, rgba(18, 13, 8, .72) 0%, transparent 100%);
    }

    .hero-stats {
      display: flex;
      gap: 36px;
      animation: fadeUp 1s ease 1.1s both;
    }

    .hst-n {
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 300;
      color: #fff;
      line-height: 1;
    }

    .hst-l {
      font-size: 8px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .38);
      margin-top: 3px;
    }

    .hero-scroll-ind {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      animation: fadeUp 1s ease 1.3s both;
    }

    .hero-scroll-ind span {
      font-size: 7px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .3);
    }

    .scroll-line {
      width: 1px;
      height: 50px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, .45), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {

      0%,
      100% {
        opacity: .25;
      }

      50% {
        opacity: 1;
      }
    }

    .hero-side {
      position: absolute;
      z-index: 22;
      pointer-events: none;
      font-size: 8px;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .2);
      writing-mode: vertical-rl;
      animation: fadeUp 1s ease 1.5s both;
    }

    .hero-side-l {
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
    }

    .hero-side-r {
      right: 16px;
      top: 50%;
      transform: translateY(-50%) rotate(180deg);
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(22px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── MARQUEE ── */
    .marquee-wrap {
      background: var(--ivory);
      overflow: hidden;
      border-top: 1.5px solid rgba(201, 123, 138, .2);
    }

    .mq-row {
      display: flex;
      padding: 12px 0;
    }

    .mq-row:first-child {
      border-bottom: 1px solid rgba(201, 123, 138, .12);
      background: var(--ivory);
    }

    .mq-row:last-child {
      background: var(--ivory2);
    }

    .mq-track {
      display: flex;
      width: max-content;
      white-space: nowrap;
    }

    .mq-row:first-child .mq-track {
      animation: mq-fwd 18s linear infinite;
    }

    .mq-row:last-child .mq-track {
      animation: mq-back 16s linear infinite;
    }

    .marquee-wrap:hover .mq-track {
      animation-play-state: paused;
    }

    .mq-item {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 0 32px;
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 4.5px;
      text-transform: uppercase;
      font-weight: 400;
      color: var(--mid);
    }

    .mq-item:hover {
      color: var(--rose);
      cursor: none;
    }

    .mq-sep {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      flex-shrink: 0;
      display: inline-block;
    }

    .mq-sep.r {
      background: var(--rose);
      opacity: .7;
    }

    .mq-sep.g {
      background: var(--sage);
      opacity: .7;
    }

    .mq-sep.b {
      background: var(--mid);
      opacity: .4;
    }

    .mq-icon {
      font-size: 12px;
      flex-shrink: 0;
    }

    @keyframes mq-fwd {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    @keyframes mq-back {
      from {
        transform: translateX(-50%);
      }

      to {
        transform: translateX(0);
      }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SHARED SECTION STYLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .sec-tag {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 9px;
      letter-spacing: 6px;
      text-transform: uppercase;
      font-weight: 500;
      margin-bottom: 18px;
    }

    .sec-tag::before {
      content: '';
      display: inline-block;
      width: 24px;
      height: 1px;
    }

    .sec-tag.rose {
      color: var(--rose);
    }

    .sec-tag.rose::before {
      background: var(--rose);
    }

    .sec-tag.sage {
      color: var(--sage);
    }

    .sec-tag.sage::before {
      background: var(--sage);
    }

    .sec-tag.petal {
      color: var(--petal);
    }

    .sec-tag.petal::before {
      background: var(--petal);
    }

    .sec-tag.light {
      color: var(--sage-l);
    }

    .sec-tag.light::before {
      background: var(--sage-l);
    }

    .sec-h2 {
      font-family: var(--serif);
      font-size: clamp(38px, 4.5vw, 68px);
      font-weight: 300;
      line-height: 1.05;
    }

    .sec-h2 em {
      font-style: italic;
    }

    .sec-p {
      font-size: 13px;
      line-height: 1.95;
      font-weight: 300;
      margin-top: 16px;
    }

    .btn-rose {
      background: var(--rose);
      color: #fff;
      border: none;
      padding: 14px 32px;
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      cursor: none;
      transition: background .3s;
      font-weight: 400;
    }

    .btn-rose:hover {
      background: var(--sage);
    }

    .btn-sage {
      background: var(--sage);
      color: #fff;
      border: none;
      padding: 14px 32px;
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      cursor: none;
      transition: background .3s;
      font-weight: 400;
    }

    .btn-sage:hover {
      background: var(--rose);
    }

    .btn-outline-dark {
      background: transparent;
      color: var(--ink);
      border: 1.5px solid rgba(26, 22, 18, .2);
      padding: 14px 32px;
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      cursor: none;
      transition: all .3s;
      font-weight: 400;
    }

    .btn-outline-dark:hover {
      border-color: var(--rose);
      color: var(--rose);
    }

    .btn-outline-light {
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .3);
      padding: 14px 32px;
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      cursor: none;
      transition: all .3s;
      font-weight: 400;
    }

    .btn-outline-light:hover {
      border-color: var(--petal);
      color: var(--petal);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FASHION & MODEL PORTFOLIO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #fashion {
      background: var(--ink);
      position: relative;
      overflow: hidden;
    }

    /* Full bleed runway grid — 3 columns, 2 rows */
    .fashion-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr 1fr;
      grid-template-rows: 55vh 45vh;
      gap: 3px;
    }

    .fg {
      overflow: hidden;
      position: relative;
      cursor: none;
    }

    .fg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .fg-lbl {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 40px 20px 18px;
      background: linear-gradient(to top, rgba(18, 13, 8, .75), transparent);
      opacity: 1;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .fg-lbl-title {
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(247, 241, 235, .85);
      font-weight: 300;
    }

    .fg-lbl-tag {
      font-size: 8px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--petal);
      border: 1px solid rgba(242, 200, 208, .4);
      padding: 4px 10px;
    }

    /* Span some cells */
    .fg1 {
      grid-row: span 2;
    }

    .fg5 {
      grid-column: span 1;
    }

    /* Content overlay at bottom */
    .fashion-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 20;
      padding: 60px 72px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      background: linear-gradient(to top, rgba(18, 13, 8, .92) 0%, rgba(18, 13, 8, .4) 45%, transparent 100%);
      pointer-events: none;
    }

    .fashion-content * {
      pointer-events: all;
    }

    .fc-left .sec-tag {
      color: var(--petal);
    }

    .fc-left .sec-tag::before {
      background: var(--petal);
    }

    .fc-left .sec-h2 {
      color: #fff;
    }

    .fc-left .sec-h2 em {
      color: var(--petal);
    }

    .fc-right {
      text-align: right;
      max-width: 380px;
    }

    .fc-right p {
      font-size: 13px;
      color: rgba(247, 241, 235, .55);
      line-height: 1.85;
      font-weight: 300;
      margin-bottom: 24px;
    }

    .fc-right-btns {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BIG PHOTO WALL — 6 photos
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #photowall {
      background: var(--ink2);
      padding: 0;
    }

    .pw-header {
      padding: 80px 72px 48px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .pw-header .sec-h2 {
      color: #fff;
    }

    .pw-header .sec-h2 em {
      color: var(--rose);
    }

    .pw-header p {
      font-size: 12px;
      color: rgba(247, 241, 235, .4);
      max-width: 260px;
      text-align: right;
      line-height: 1.8;
    }

    /* 6-photo asymmetric bento */
    .pw-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
    }

    .pw {
      overflow: hidden;
      position: relative;
      cursor: none;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      aspect-ratio: 1 / 1;
      /* Clean square slices */
    }

    /* Reverting to individual image slices */
    .pw1 {
      background-image: url('../image/big1.webp');
    }

    .pw2 {
      background-image: url('../image/big2.webp');
    }

    .pw3 {
      background-image: url('../image/big3.webp');
    }

    .pw4 {
      background-image: url('../image/big4.webp');
    }

    .pw5 {
      background-image: url('../image/big5.webp');
    }

    .pw6 {
      background-image: url('../image/big6.webp');
    }

    .pw::after {
      content: attr(data-n);
      position: absolute;
      bottom: 20px;
      right: 24px;
      font-family: var(--serif);
      font-size: 48px;
      font-weight: 300;
      color: rgba(255, 255, 255, .2);
      line-height: 1;
    }

    /* Bottom see-all strip */
    .pw-footer {
      padding: 32px 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid rgba(247, 241, 235, .06);
    }

    .pw-footer span {
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(247, 241, 235, .35);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REELS / WORK SCROLL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FEATURED ARCHIVE / REELS
   (Infinite Scrolling Editorial)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #reels {
      background: var(--ivory);
      padding: 150px 0;
      overflow: hidden;
      position: relative;
      border-top: 1px solid rgba(26, 22, 18, 0.05);
      border-bottom: 1px solid rgba(26, 22, 18, 0.05);
    }

    .port-header {
      text-align: center;
      margin-bottom: 80px;
      padding: 0 5%;
      position: relative;
      z-index: 10;
    }

    .port-eyebrow {
      font-size: 11px;
      color: var(--rose);
      letter-spacing: 5px;
      text-transform: uppercase;
      margin-bottom: 24px;
      font-family: var(--sans);
      font-weight: 500;
    }

    .port-title {
      font-size: clamp(36px, 6vw, 72px);
      font-weight: 300;
      color: var(--ink);
      letter-spacing: -2px;
      margin-bottom: 25px;
      font-family: var(--serif);
    }

    .port-title em {
      font-style: italic;
      color: var(--rose);
    }

    .port-sub {
      color: var(--mid);
      font-size: 13px;
      max-width: 500px;
      margin: 0 auto;
      letter-spacing: 1px;
      font-family: var(--sans);
    }

    .film-track-wrap {
      width: 100%;
      overflow: hidden;
      padding: 60px 0;
      position: relative;
      scroll-behavior: smooth;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .film-track-wrap::-webkit-scrollbar {
      display: none;
    }

    .film-track {
      display: flex;
      width: max-content;
      gap: 30px;
      padding: 0 0;
    }
    
    .film-track.is-marquee {
      animation: marqueeScroll 60s linear infinite;
    }
    
    .film-track.is-marquee:hover {
      animation-play-state: paused;
    }

    /* REEL NAVIGATION ARROWS */
    .reel-nav {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 30px;
    }

    .ra {
      width: 44px;
      height: 44px;
      border: 1px solid var(--rose);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: var(--rose);
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 18px;
    }

    .ra:hover {
      background: var(--rose);
      color: #fff;
      box-shadow: 0 5px 15px rgba(201, 123, 138, 0.3);
    }

    /* PREMIUM ROSE BUTTON */
    .btn-rose-outline {
      display: inline-block;
      padding: 14px 32px;
      background: transparent;
      border: 1.5px solid var(--rose);
      color: var(--rose);
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      font-weight: 500;
      cursor: none;
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
    }

    .btn-rose-outline:hover {
      background: var(--rose);
      color: #fff;
      box-shadow: 0 8px 24px rgba(201, 123, 138, 0.25);
    }

    .film-marquee:hover {
      animation-play-state: paused;
    }

    @keyframes marqueeScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* Single line Gallery alignment - Reduced Size */
    .film-frame {
      position: relative;
      flex: 0 0 clamp(180px, 14vw, 260px);
      aspect-ratio: 3 / 4;
      background: #fff;
      padding: 10px;
      border: 1px solid rgba(26, 22, 18, 0.08);
      box-shadow: 0 15px 40px rgba(26, 22, 18, 0.05);
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
    }

    .film-frame img,
    .film-frame video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: sepia(10%) contrast(102%);
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .film-frame:hover {
      transform: translateY(-10px) scale(1.05) !important;
      box-shadow: 0 40px 80px rgba(201, 123, 138, 0.15);
      border-color: var(--rose);
      z-index: 20;
    }

    .film-frame:hover img,
    .film-frame:hover video {
      filter: sepia(0%) contrast(105%);
    }

    .frame-tag {
      position: absolute;
      bottom: 25px;
      left: 25px;
      right: 25px;
      padding: 12px 18px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(26, 22, 18, 0.05);
      display: flex;
      justify-content: space-between;
      align-items: center;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.4s ease;
    }

    .film-frame:hover .frame-tag {
      opacity: 1;
      transform: translateY(0);
    }

    .frame-tag span {
      font-size: 10px;
      color: var(--ink);
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 500;
    }

    .rc-icon {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
    }

    .rc-icon.photo { background: var(--rose); color: #fff; }
    .rc-icon.video { background: var(--sage); color: #fff; }

    /* Video Play Indicator */
    .film-frame.is-video::after {
      content: '▶';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 54px;
      height: 54px;
      background: var(--ivory);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 12px;
      opacity: 0;
      transition: all 0.4s ease;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .film-frame.is-video:hover::after {
      opacity: 0.9;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MODELS & ACTORS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #models {
      display: grid;
      grid-template-columns: 44% 56%;
      min-height: 100vh;
      background: var(--ivory);
    }

    .mat-left {
      padding: 80px 60px 80px 72px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: linear-gradient(160deg, #FAF0F0 0%, var(--ivory) 55%, var(--sage-p) 100%);
      position: relative;
      overflow: hidden;
    }

    .mat-left::after {
      content: '🌷';
      position: absolute;
      font-size: 280px;
      opacity: .04;
      bottom: -70px;
      right: -50px;
      pointer-events: none;
    }

    .mat-left .sec-h2 {
      color: var(--ink);
    }

    .mat-left .sec-h2 em {
      color: var(--rose);
    }

    .mat-left .sec-p {
      color: var(--mid);
      max-width: 380px;
    }

    .mat-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 32px;
    }

    .mf {
      background: rgba(255, 255, 255, .65);
      backdrop-filter: blur(10px);
      padding: 18px;
      border: 1px solid rgba(201, 123, 138, .15);
      transition: border-color .3s;
    }

    .mf:hover {
      border-color: var(--rose);
    }

    .mf-icon {
      font-size: 20px;
      margin-bottom: 8px;
    }

    .mf-t {
      font-size: 10px;
      letter-spacing: 1.5px;
      color: var(--ink);
      font-weight: 500;
      margin-bottom: 3px;
    }

    .mf-d {
      font-size: 10px;
      color: var(--light);
      line-height: 1.6;
    }

    .mat-right {
      position: relative;
      overflow: hidden;
    }

    .mat-right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .mat-right::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(to left, transparent 65%, rgba(250, 240, 240, .8) 100%);
      pointer-events: none;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COLLABORATIONS (LOGOS)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #collabs {
      background: var(--ivory2);
      padding: 100px 72px;
      overflow: hidden;
      border-top: 1px solid rgba(26, 22, 18, 0.05);
    }

    .collab-header { 
      text-align: center; 
      margin-bottom: 70px; 
    }

                            .collab-marquee-wrap {
      width: 100%;
      overflow: hidden;
      padding: 100px 0;
      background: var(--ivory);
    }
    .collab-marquee {
      display: flex;
      width: max-content;
      animation: mq-fwd 35s linear infinite;
      align-items: center;
    }
    .cl-item {
      margin: 0 50px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cl-item img {
      height: 85px;
      width: auto;
      max-width: 220px;
      object-fit: contain;
      filter: none;
      opacity: 0.9;
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .cl-item:hover img {
      opacity: 1;
      transform: scale(1.1);
    }

    @media (max-width: 768px) {
      .collab-marquee-wrap { padding: 50px 0; }
      .cl-item { margin: 0; width: auto; }
      .collab-marquee { gap: 30px; }
      .cl-item img { height: 60px; max-width: 140px; }
    }

    /* VIBRANT BRAND COLORS */
    .cl-item:nth-child(7n+1) { color: #fbbc04; } /* RealMe Yellow */
    .cl-item:nth-child(7n+2) { color: #4285f4; } /* MX Player Blue */
    .cl-item:nth-child(7n+3) { color: #ea4335; } /* Killer Jeans Red */
    .cl-item:nth-child(7n+4) { color: #34a853; } /* LifeLong Green */
    .cl-item:nth-child(7n+5) { color: var(--rose); } /* Roopkala Rose */
    .cl-item:nth-child(7n+6) { color: var(--sage); } /* Konak Sage */
    .cl-item:nth-child(7n+7) { color: #17a2b8; } /* CoolNX Cyan */

    .cl-item:hover {
      transform: scale(1.15) translateY(-5px);
      filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
    }

    @keyframes collabMarquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }


    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SERVICES SECTION (5-COLUMN GRID)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #services {
      background: var(--ivory);
      padding: 120px 72px;
      border-top: 1px solid rgba(26, 22, 18, 0.05);
    }

    .svc-top {
      margin-bottom: 60px;
      text-align: center;
    }

    .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px; /* Architectural thin lines */
      background: rgba(26, 22, 18, 0.05);
      border: 1px solid rgba(26, 22, 18, 0.05);
    }

    .svc-card {
      padding: 60px 40px;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
      min-height: 420px;
      background: #000;
    }

    .svc-card:hover {
      z-index: 2;
      box-shadow: 0 40px 100px rgba(0,0,0,0.3);
    }

    .svc-num {
      font-family: var(--serif);
      font-size: 14px;
      color: #fff !important;
      margin-bottom: 40px;
      letter-spacing: 2px;
      display: flex;
      align-items: center;
      gap: 10px;
      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }

    .svc-num::after {
      content: '';
      width: 40px;
      height: 1px;
      background: #fff;
      opacity: 0.8;
    }

    .svc-card h3 {
      font-family: var(--serif);
      font-size: 28px;
      line-height: 1.1;
      color: #fff !important;
      margin-bottom: 20px;
      font-weight: 300;
      text-shadow: 0 5px 20px rgba(0,0,0,0.8);
      letter-spacing: 0.5px;
    }

    .svc-card p {
      font-size: 14px;
      color: #fff !important;
      line-height: 1.7;
      margin-bottom: 40px;
      flex-grow: 1;
      font-weight: 300;
      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }

    .svc-link {
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.3);
      padding: 10px 20px;
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      border-radius: 100px;
      font-weight: 500;
      transition: all 0.4s ease;
      display: inline-block;
      width: fit-content;
    }

    .svc-card:hover .svc-link {
      background: var(--rose);
      border-color: var(--rose);
      letter-spacing: 5px;
    }

    /* Subtle Background Animation */
    .svc-content-z {
      position: relative;
      z-index: 5;
      flex-grow: 1;
      pointer-events: none;
    }

    .svc-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background-size: contain; /* Show the FULL photo without cropping */
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0.8;
      filter: contrast(105%);
      transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 1;
    }

    .svc-card:hover .svc-bg {
      opacity: 1;
      transform: scale(1.08);
    }

    .svc-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
      z-index: 2;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TESTIMONIALS (GOOGLE STYLE)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #testimonials {
      background: var(--ivory2);
      padding: 120px 72px;
      border-top: 1px solid rgba(26, 22, 18, 0.05);
    }

    .test-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 80px;
    }

    .test-sub {
      font-size: 14px;
      color: var(--mid);
      margin-top: 10px;
      font-weight: 300;
    }

    .test-rating {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .tr-big {
      font-family: var(--serif);
      font-size: 84px;
      font-weight: 300;
      color: var(--ink);
      line-height: 1;
    }

    .tr-stars {
      color: #fbbc04; /* Google Yellow */
      font-size: 20px;
      margin-top: 8px;
    }

    .tr-sub {
      font-size: 11px;
      color: var(--mid);
      margin-top: 10px;
      font-weight: 500;
      display: flex;
      align-items: center;
    }

    .test-marquee-wrap {
      width: 100%;
      overflow: hidden;
      padding: 60px 0;
      position: relative;
    }

    .test-marquee {
      display: flex;
      width: max-content;
      padding-left: 20px;
      gap: 32px;
      animation: testMarquee 40s linear infinite;
    }

    .test-marquee:hover {
      animation-play-state: paused;
    }

    @keyframes testMarquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

            .test-marquee .tc {
      flex: 0 0 clamp(300px, 30vw, 380px);
      width: clamp(300px, 30vw, 380px);
      height: 380px;
      display: flex;
      flex-direction: column;
    }

    .tc {
      background: #fff;
      padding: 30px;
      border: 1px solid rgba(0, 0, 0, 0.04);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      transition: all 0.4s ease;
    }

    .tc:hover {
      transform: translateY(-10px);
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
      border-color: rgba(66, 133, 244, 0.1);
    }

    .tc-head {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;
      position: relative;
    }

    .tc-avatar {
      width: 44px;
      height: 44px;
      background: #4285f4; /* Google Blue */
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 18px;
    }

    .tc:nth-child(2) .tc-avatar { background: #ea4335; }
    .tc:nth-child(3) .tc-avatar { background: #34a853; }

    .tc-meta {
      flex: 1;
    }

    .tc-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 2px;
    }

    .tc-info {
      font-size: 12px;
      color: var(--mid);
    }

    .tc-g {
      width: 18px;
      opacity: 0.6;
    }

    .tc-score {
      color: #fbbc04;
      font-size: 14px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tc-date {
      color: var(--mid);
      font-size: 12px;
      font-weight: 400;
    }

        .tc-body {
      flex: 1;
      overflow-y: auto;
      padding-right: 12px;
      scrollbar-width: thin;
      scrollbar-color: var(--rose) transparent;
    }
    .tc-body::-webkit-scrollbar { width: 4px; }
    .tc-body::-webkit-scrollbar-track { background: transparent; }
    .tc-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
    .tc-body:hover::-webkit-scrollbar-thumb { background: var(--rose); }

    .tc-text {
      font-size: 14px;
      color: var(--ink);
      line-height: 1.7;
      font-weight: 300;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BOOKING / CONTACT (REDESIGNED)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BOOKING / RESERVATIONS
   (Premium Light Editorial)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #booking {
      position: relative;
      background: var(--ivory);
      padding: 140px 72px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1px solid rgba(26, 22, 18, 0.05);
    }

    /* Abstract Paper/Grain Wash */
    #booking::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png');
      opacity: 0.2;
      pointer-events: none;
    }

    .bk-container {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1200px;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      grid-template-areas: 
        "title form"
        "info form";
      gap: 30px 80px;
      align-items: flex-start;
    }

    .bk-title { grid-area: title; }
    .bk-info { grid-area: info; color: var(--ink); }
    .bk-form-card { grid-area: form; }

    .bk-title h2 {
      font-family: var(--serif);
      font-size: clamp(44px, 6vw, 84px);
      line-height: 0.95;
      margin-bottom: 0px;
      letter-spacing: -3px;
      color: var(--ink);
    }

    .bk-title h2 em {
      color: var(--rose);
      font-style: italic;
      display: block;
      margin-top: 5px;
    }

    /* THE STUDIO MANIFESTO LIST */
    .bk-manifesto {
      margin: 50px 0;
      border-top: 1px solid rgba(201, 123, 138, 0.1);
      padding-top: 40px;
      display: grid;
      gap: 24px;
    }

    .bm-item {
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: 15px;
      color: var(--mid);
      font-weight: 300;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      font-size: 11px;
    }

    .cam-hero-sec {
      position: relative;
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 80px 0;
      background: var(--ivory);
    }

    .camera-rig-wrapper {
      width: 100%;
      max-width: 1500px;
      padding: 0 40px;
      z-index: 20;
      perspective: 1500px;
    }

    @media (max-width: 900px) {
      .camera-rig-wrapper {
        padding: 0 16px;
      }
    }

    .camera-rig {
      width: 100%;
      transform-style: preserve-3d;
      animation: rigFloat 6s infinite ease-in-out;
    }

    @keyframes rigFloat {
      0%, 100% { transform: translateZ(0) rotateX(1deg); }
      50% { transform: translateZ(30px) rotateX(-1deg); }
    }

    .camera-body {
      display: flex;
      align-items: stretch;
      background: #111;
      border-radius: 30px;
      padding: 25px;
      box-shadow: 0 50px 120px rgba(0,0,0,0.4), 0 0 80px rgba(0,0,0,0.2);
      border: 1px solid rgba(255,255,255,0.05);
    }

    .viewfinder-bezel {
      flex: 1;
      background: #080808;
      border-radius: 12px;
      padding: 12px;
      border: 2px solid #1a1a1a;
      display: flex;
      flex-direction: column;
    }

    .viewfinder {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      height: auto;
      max-height: 600px;
      background: #000;
      overflow: hidden;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .vf-panel {
      position: absolute;
      inset: 0;
      display: none;
      width: 100%;
      height: 100%;
      background: #000;
      overflow: hidden;
    }

    .vf-panel.active {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cam-video, .playback-video {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain; /* The absolute fix for zero-cutting */
      display: block;
      z-index: 1;
    }

    .panel-standby {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: #000;
      height: 100%;
    }

    /* ── Viewfinder UI Layers ── */
    .ui-overlay {
      position: absolute;
      inset: 0;
      z-index: 100; /* Ensure UI is always on top of video */
      pointer-events: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px;
    }

    .ui-top, .ui-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
      padding: 10px 15px;
      border-radius: 4px;
    }
    .ui-bottom { background: linear-gradient(to top, rgba(0,0,0,0.4), transparent); }

    .cam-video, .playback-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      z-index: 10;
      background: #000;
    }

    .panel-menu {
      z-index: 20;
      background: #0a0a0a;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .menu-header {
      padding: 15px 20px;
      background: #151515;
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 2px;
      border-bottom: 1px solid #222;
      color: rgba(255,255,255,0.6);
    }

    .panel-menu .menu-grid {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 15px;
      padding: 20px;
      overflow: hidden;
      pointer-events: auto;
      height: 100%;
    }

    .menu-thumb {
      position: relative;
      aspect-ratio: 16/9;
      background: #111;
      border: 1.5px solid transparent;
      overflow: hidden;
      cursor: none;
      transition: all 0.3s ease;
      border-radius: 4px;
    }
    .menu-thumb.selected { border-color: var(--rose); box-shadow: 0 0 15px rgba(201,123,138,0.3); }

    .cam-controls {
      width: 130px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 15px;
    }

    .bm-item span {
      font-family: var(--serif);
      font-size: 22px;
      color: var(--rose);
      font-style: italic;
      line-height: 1;
      width: 30px;
    }

    .bk-details {
      margin-top: 60px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .bk-detail-item {
      display: flex;
      align-items: flex-start;
      gap: 15px;
    }

    .bk-detail-icon {
      width: 52px;
      height: 52px;
      background: var(--ivory2);
      border: 1px solid rgba(201, 123, 138, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: var(--rose);
      border-radius: 50%;
    }

    .bk-detail-text h4 {
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--mid);
      margin-bottom: 6px;
      font-weight: 600;
    }

    .bk-detail-text p {
      font-size: 16px;
      color: var(--ink);
      font-weight: 300;
      letter-spacing: 0.5px;
    }

    .bk-form-card {
      background: #fff;
      padding: 70px;
      position: relative;
      box-shadow: 0 40px 100px rgba(26, 22, 18, 0.05);
      border: 1px solid rgba(26, 22, 18, 0.03);
    }

    /* Architectural Corner accents */
    .bk-form-card::after {
      content: '';
      position: absolute;
      top: -1px;
      right: -1px;
      width: 60px;
      height: 60px;
      border-top: 1px solid var(--rose);
      border-right: 1px solid var(--rose);
      pointer-events: none;
    }

    .bk-form-card h3 {
      font-family: var(--serif);
      font-size: 32px;
      font-weight: 300;
      margin-bottom: 12px;
      color: var(--ink);
    }

    .bk-form-card p {
      font-size: 14px;
      color: var(--mid);
      margin-bottom: 48px;
      line-height: 1.6;
    }

    .fl {
      font-size: 10px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--rose);
      display: block;
      margin-bottom: 10px;
      font-weight: 600;
    }

    .fi {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(26, 22, 18, 0.1);
      padding: 14px 0;
      font-family: var(--sans);
      font-size: 15px;
      color: var(--ink);
      outline: none;
      transition: all 0.4s ease;
    }

    .fi:focus {
      border-bottom-color: var(--rose);
      padding-left: 10px;
    }

    select.fi {
      color: var(--ink);
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C97B8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0px center;
    }

    .fi::placeholder {
      color: rgba(26, 22, 18, 0.3);
    }

    .fg2 {
      margin-bottom: 28px;
    }

    .f2c {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }

    .f-sub {
      width: 100%;
      background: var(--ink);
      color: #fff;
      border: none;
      padding: 20px;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 4px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.4s ease;
      margin-top: 15px;
      font-weight: 500;
    }

    .f-sub:hover {
      background: var(--rose);
      box-shadow: 0 10px 30px rgba(201, 123, 138, 0.3);
    }

    .f-sub:hover {
      background: var(--rose);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       OUR STUDIO
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #studio {
      background: var(--ink);
      padding: 120px 0;
    }

    .studio-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 72px;
    }

    .studio-header {
      text-align: center;
      margin-bottom: 80px;
    }

    .studio-header .sec-h2 {
      margin-bottom: 24px;
      color: #fff;
    }

    .studio-header p {
      max-width: 600px;
      margin: 0 auto;
      color: rgba(255, 255, 255, 0.5);
      line-height: 1.8;
    }

    .studio-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .studio-item {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      cursor: none;
    }

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

    .studio-item:hover img {
      transform: scale(1.1);
    }

    .studio-item::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 40%);
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .studio-item:hover::after {
      opacity: 1;
    }

    .studio-item .item-info {
      position: absolute;
      bottom: 20px;
      left: 20px;
      z-index: 2;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.4s ease;
    }

    .studio-item:hover .item-info {
      opacity: 1;
      transform: translateY(0);
    }

    .studio-item .item-info span {
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--petal);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    FOOTER (CLEAN EDITORIAL)
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    footer {
      background: #0a0806;
      padding: 120px 72px 60px;
      color: #fff;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .ft-logo {
      font-family: 'Cinzel', serif;
      font-size: clamp(32px, 5vw, 48px);
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 24px;
      display: inline-block;
      
      /* Orange Metallic Gradient */
      background: linear-gradient(
        to bottom, 
        #ffd24d 0%, 
        #ff9900 45%, 
        #cc6600 50%, 
        #ffaa00 55%, 
        #994400 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.4)) drop-shadow(0px 0.5px 0px rgba(255,255,255,0.2));
    }

    .ft-brand p {
      color: rgba(255, 255, 255, 0.6) !important;
      max-width: 450px;
    }

    .ft-col h4 {
      color: #ff9900 !important;
      font-family: 'Cinzel', serif;
      letter-spacing: 2px;
      font-size: 14px;
    }

    .ft-col a {
      color: rgba(255, 255, 255, 0.7) !important;
      transition: all 0.3s !important;
      display: block;
      margin-bottom: 12px;
      text-decoration: none;
    }

    .ft-col a:hover {
      color: #fff !important;
      transform: translateX(5px);
    }

    .ft-col a:hover {
      color: var(--rose) !important;
      opacity: 1;
    }

    .footer-credit {
      color: rgba(255, 255, 255, 0.35) !important;
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-top: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
    }

    .ft-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 60px;
      padding-bottom: 60px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Footer Logo Refinement */

    .ft-brand p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5);
      line-height: 1.8;
      max-width: 320px;
      font-weight: 300;
    }

    .ft-col h4 {
      font-size: 10px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--rose);
      margin-bottom: 24px;
      font-weight: 500;
    }

    .ft-col a {
      display: block;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      margin-bottom: 12px;
      transition: all 0.3s;
      font-weight: 300;
    }

    .ft-col a:hover {
      color: #fff;
      transform: translateX(5px);
    }

    .footer-credit {
      text-align: center;
      margin-top: 40px;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.35);
    }

    .soc {
      display: flex;
      gap: 10px;
    }

    .sl {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(247, 241, 235, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      text-decoration: none;
      cursor: none;
      transition: all .3s;
    }

    .sl:hover {
      background: var(--rose);
      border-color: var(--rose);
    }

    /* WA */
    .wa {
      position: fixed;
      bottom: 34px;
      right: 34px;
      z-index: 400;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #25D366;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      text-decoration: none;
      box-shadow: 0 4px 28px rgba(37, 211, 102, .45);
      cursor: none;
      transition: transform .3s;
      animation: wap 3s ease-in-out infinite;
    }

    .wa:hover {
      transform: scale(1.1);
    }

    @keyframes wap {

      0%,
      100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
      }

      50% {
        box-shadow: 0 8px 44px rgba(37, 211, 102, .65);
      }
    }

    /* ── REVEAL ── */
    .rv {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .9s ease, transform .9s ease;
    }

    .rvl {
      opacity: 0;
      transform: translateX(-30px);
      transition: opacity .9s ease, transform .9s ease;
    }

    .rvr {
      opacity: 0;
      transform: translateX(30px);
      transition: opacity .9s ease, transform .9s ease;
    }

    .rv.on,
    .rvl.on,
    .rvr.on {
      opacity: 1;
      transform: none;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media (max-width:900px) {

      .island-links,
      .island-sep,
      .island-cta {
        display: none;
      }

      .island-logo {
        display: none;
        margin-right: 0;
        font-size: 14px;
        letter-spacing: 1.5px;
      }

      .island.scrolled .island-logo {
        display: block;
        margin-right: 15px; /* Space between logo and hamburger */
      }

      .island-ham {
        display: flex;
        margin-left: 0;
      }

      .island.scrolled .island-ham {
        margin-left: 0; /* Logo's margin-right handles the gap */
      }

      .island {
        padding: 8px 16px;
        width: auto;
        min-width: 0;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      }

      #hero {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
      }

      .hero-side-l,
      .hero-side-r {
        display: none;
      }

      .hero-stats {
        gap: 20px;
      }

      .hst-n {
        font-size: 22px;
      }

      .ht-h1 {
        font-size: clamp(32px, 7vw, 58px);
      }

      .ht-sub {
        font-size: 10px;
      }

      .hero-bar {
        padding: 0 24px 24px;
      }

      .ht-btns {
        flex-direction: column;
        align-items: center;
      }

      .hbtn-fill,
      .hbtn-outline {
        padding: 12px 26px;
      }

      .mq-item {
        font-size: 9px;
        padding: 0 22px;
      }

      #fashion {
        display: flex;
        flex-direction: column;
      }

      .fashion-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        min-height: auto;
        order: 2;
      }

      .fg {
        aspect-ratio: 1 / 1;
      }

      .fg1 {
        grid-column: span 2;
        aspect-ratio: 16 / 9;
      }

      .fashion-content {
        position: relative;
        padding: 100px 24px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        background: var(--ink);
        order: 1;
      }

      .fc-right {
        text-align: left;
        max-width: 100%;
      }

      .fc-right {
        text-align: left;
      }

      .fc-right-btns {
        justify-content: flex-start;
      }

      .pw-header {
        padding: 60px 24px 36px;
        flex-direction: column;
        align-items: flex-start;
        /* Changed from flex-end */
        gap: 20px;
      }

      .pw-header p {
        text-align: left;
        max-width: 100%;
        /* Allow more space on mobile */
        font-size: 13px;
        /* Slightly larger for readability */
        line-height: 1.6;
      }

      .pw-header .sec-h2 {
        font-size: clamp(32px, 8vw, 42px);
        /* Scale better on small screens */
      }

      .pw-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
        /* Force equal height rows */
        gap: 2px;
        /* Consistent with desktop to avoid tiny gaps */
        align-items: stretch;
      }

      .pw {
        aspect-ratio: 1 / 1;
      }

      .pw-footer {
        padding: 24px 24px;
      }

      .port-header {
        padding: 0 24px;
        margin-bottom: 30px;
        text-align: left;
      }

      .port-header .port-title { font-size: clamp(34px, 10vw, 42px); line-height: 1.1; }
      .port-header .port-sub { text-align: left; margin: 15px 0 0; }

      .reel-nav { 
        display: flex; 
        justify-content: flex-start;
        margin: 20px 0 10px;
        gap: 12px;
      }

      .ra {
        width: 40px;
        height: 40px;
        font-size: 14px;
      }

      .film-track-wrap {
        padding: 20px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Essential for iOS inertia */
      }

      .film-track {
        display: flex;
        gap: 12px;
        width: max-content;
        padding: 0 16px;
        will-change: transform; /* Pre-render for GPU */
      }

      .film-frame {
        flex: 0 0 46vw;
        width: 46vw;
        padding: 6px;
        aspect-ratio: 2.8 / 4;
        box-shadow: 0 4px 12px rgba(26, 22, 18, 0.03); /* Lighter shadow */
        border: 1px solid rgba(26, 22, 18, 0.08);
        transition: none !important; /* Kill heavy transitions for mobile scroll */
        -webkit-transform: translateZ(0); /* Force GPU */
        transform: translateZ(0);
      }

      .film-frame img, 
      .film-frame video { 
        filter: none !important; /* No expensive filters on mobile scroll */
        transition: none !important;
        will-change: transform;
      }

      .film-frame .frame-tag { display: none !important; }

      #models {
        display: flex;
        flex-direction: column;
      }

      .mat-right {
        height: 80vw;
        order: -1;
      }

      .mat-left {
        padding: 100px 24px 60px;
      }

      #collabs {
        padding: 60px 24px;
      }

      .collab-header {
        margin-bottom: 40px;
      }

      .cl-item {
        font-size: 24px;
      }

      .collab-marquee {
        gap: 30px;
      }

      #services {
        padding: 80px 0;
      }

      .svc-top {
        padding: 0 24px;
        margin-bottom: 40px;
      }

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

      .svc-card {
        padding: 40px 24px;
        min-height: 320px;
      }

      #testimonials {
        padding: 60px 24px;
      }

      .test-top {
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
        margin-bottom: 40px;
      }

      .tr-big {
        font-size: 64px;
      }

      .test-rating {
        align-items: flex-start;
      }

      .test-marquee-wrap {
        padding: 30px 0;
      }

      .test-marquee .tc {
        flex: 0 0 300px;
        width: 300px;
      }

      .tc {
        padding: 24px;
      }

      .tc-text {
        font-size: 13px;
        line-height: 1.6;
      }

      #booking {
        padding: 80px 24px;
      }

      .bk-container {
        grid-template-columns: 1fr;
        grid-template-areas: 
          "title"
          "form"
          "info";
        gap: 48px;
        width: 100%;
      }

      .bk-title h2 {
        font-size: clamp(38px, 12vw, 54px);
        letter-spacing: -2px;
        margin-bottom: 12px;
      }

      .bk-info {
        margin-top: 20px;
      }

      .bk-manifesto {
        margin: 32px 0;
        gap: 18px;
        padding-top: 32px;
      }

      .bm-item {
        font-size: 10px;
        gap: 15px;
      }

      .bk-details {
        margin-top: 40px;
        gap: 24px;
      }

      .bk-form-card {
        padding: 48px 24px;
        width: 100%;
        margin: 0;
      }

      .f2c {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      #studio {
        padding: 80px 0;
      }

      .studio-container {
        padding: 0 24px;
      }

      .studio-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      .studio-header {
        margin-bottom: 48px;
      }

      /* ── Footer Grid → Stacked on Mobile ── */
      .ft-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        padding-bottom: 32px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      /* ── Footer Brand Area (Full Width on Top) ── */
      .ft-brand {
        width: 100%;
        flex: 0 0 100%;
        padding-bottom: 32px;
        margin-bottom: 28px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        text-align: center;
      }
      .ft-brand p {
        max-width: 90% !important;
        margin: 0 auto !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
        color: rgba(255, 255, 255, 0.5) !important;
      }
      .ft-logo {
        font-size: 26px !important;
        margin-bottom: 16px !important;
      }

      /* ── Footer Link Columns (3-Up Row) ── */
      .ft-col {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 6px;
        box-sizing: border-box;
      }
      .ft-col h4 {
        font-size: 10px !important;
        letter-spacing: 2px !important;
        margin-bottom: 16px;
        color: #ff9900 !important;
      }
      .ft-col a {
        font-size: 13px !important;
        margin-bottom: 12px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        display: block;
      }
      .ft-col a:hover {
        color: #fff !important;
      }

      /* ── Footer Wrapper ── */
      footer {
        padding: 50px 24px 32px;
      }

      /* ── Footer Credit Bar ── */
      .footer-credit {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding-top: 28px;
        border-top: none;
        margin-top: 24px;
        font-size: 10px !important;
        color: rgba(255, 255, 255, 0.35) !important;
      }
      .footer-credit > span {
        color: rgba(255, 255, 255, 0.35) !important;
      }
      .footer-credit a {
        text-decoration: none !important;
      }
      .footer-credit a span {
        color: inherit;
      }
    }

    @media (max-width:480px) {
      #hero {
        height: 100svh;
      }

      .ht-h1 {
        font-size: clamp(28px, 9vw, 44px);
      }

      .ht-sub {
        display: none;
      }

      .hero-stats {
        gap: 14px;
      }

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

      .svc-card {
        padding: 32px 24px;
        min-height: auto;
      }

      .svc-num {
        margin-bottom: 24px;
      }

      .svc-card p {
        margin-bottom: 24px;
      }

      .svc-card h3 {
        font-size: 22px;
      }

      /* ── PERFORMANCE OPTIMIZATION (MOBILE) ── */
      .bokeh-wrap, .petal-wrap, .bg-shine, .bg-3d-grid, .glimmer, .bg-glow-1, .bg-glow-2 {
        display: none !important;
      }
      .bg-3d {
        background: var(--ivory) !important;
        animation: none !important;
      }
      .viewfinder-bezel, .cam-controls, .cam-btn-wrap {
        box-shadow: none !important;
        background: rgba(0,0,0,0.85) !important;
      }
      .rl-card, .prj-hero-img, .svc-card {
        box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
      }
      * {
        transition-duration: 0.3s !important;
      }
      /* ─────────────────────────────────────── */

      .hst-n {
        font-size: 20px;
      }

      .hero-bar {
        padding: 0 16px 18px;
      }

      .hbtn-fill,
      .hbtn-outline {
        padding: 11px 20px;
        font-size: 8px;
      }

      .mq-item {
        font-size: 8px;
        letter-spacing: 3px;
        padding: 0 18px;
      }

      .fashion-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
      }

      .fg1 {
        grid-column: span 1;
        aspect-ratio: 1 / 1;
      }

      .fg {
        aspect-ratio: 4 / 5;
      }

      .pw-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
        gap: 2px;
      }

      .pw {
        aspect-ratio: 1 / 1;
      }

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

      #collabs {
        padding: 50px 20px;
      }

      .cl-item {
        font-size: 18px;
        letter-spacing: 1px;
      }

      .collab-marquee {
        gap: 30px;
        animation-duration: 22s;
      }

      .tr-big {
        font-size: 52px;
      }

      .test-marquee .tc {
        flex: 0 0 260px;
        width: 260px;
      }

      .tc {
        padding: 20px;
      }

      .tc-text {
        font-size: 12px;
      }
    }

    .status-msg {
      padding: 15px;
      margin-bottom: 25px;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-align: center;
      border-radius: 4px;
      animation: fadeIn 0.5s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .status-msg.success {
      background: rgba(143, 175, 126, 0.15);
      color: var(--sage);
      border: 1px solid rgba(143, 175, 126, 0.3);
    }

    .status-msg.error {
      background: rgba(201, 123, 138, 0.15);
      color: var(--rose);
      border: 1px solid rgba(201, 123, 138, 0.3);
    }

    .cam-hero-sec {
      position: relative;
      min-height: 110vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100px 0;
      overflow: hidden;
      background: var(--ivory);
    }

    /* Soft Animated Background Foundation */
    .bg-3d {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, var(--ivory2) 0%, var(--ivory) 100%);
      overflow: hidden;
    }

    /* Ambient Floating Light Animation - Wedding Theme */
    .bg-glow-1 {
      display: block;
      position: absolute;
      top: -10%;
      left: -10%;
      width: 70%;
      height: 70%;
      background: radial-gradient(circle, rgba(201, 123, 138, 0.25) 0%, transparent 70%);
      filter: blur(100px);
      animation: ambientDrift 20s infinite alternate ease-in-out;
      z-index: 1;
    }

    .bg-glow-2 {
      display: block;
      position: absolute;
      bottom: -10%;
      right: -10%;
      width: 60%;
      height: 60%;
      background: radial-gradient(circle, rgba(143, 175, 126, 0.18) 0%, transparent 70%);
      filter: blur(100px);
      animation: ambientDrift 15s infinite alternate-reverse ease-in-out;
      z-index: 1;
    }

    @keyframes ambientDrift {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(12%, 18%) scale(1.15); }
    }

    /* 💍 WEDDING BOKEH & PARTICLES */
    .bokeh-wrap {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
    }

    .bokeh {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, var(--rose) 0%, var(--petal) 100%);
      opacity: 0;
      filter: blur(50px);
      animation: bokehFloat 15s infinite ease-in-out;
    }

    .b1 { width: 140px; height: 140px; top: 15%; left: 10%; animation-delay: 0s; }
    .b2 { width: 90px; height: 90px; top: 65%; left: 80%; animation-delay: 5s; }
    .b3 { width: 180px; height: 180px; top: 35%; left: 45%; animation-delay: 10s; }
    .b4 { width: 100px; height: 100px; top: 75%; left: 25%; animation-delay: 2s; }
    .b5 { width: 130px; height: 130px; top: 5%; left: 65%; animation-delay: 7s; }
    .b6 { width: 85px; height: 85px; top: 50%; left: 85%; animation-delay: 12s; }

    @keyframes bokehFloat {
      0%, 100% { transform: translate(0, 0) scale(1.0); opacity: 0; }
      50% { transform: translate(60px, -80px) scale(1.3); opacity: 0.55; }
    }

    .glimmer {
      position: absolute;
      width: 5px;
      height: 5px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 12px #fff, 0 0 24px var(--petal);
      animation: flicker 5s infinite alternate ease-in-out;
    }

    .g1 { top: 25%; left: 30%; animation-delay: 0s; }
    .g2 { top: 80%; left: 15%; animation-delay: 2s; }
    .g3 { top: 45%; left: 80%; animation-delay: 4s; }
    .g4 { top: 10%; left: 70%; animation-delay: 1s; }
    .g5 { top: 60%; left: 40%; animation-delay: 3s; }

    @keyframes flicker {
      0%, 100% { opacity: 0.4; transform: scale(0.6); }
      50% { opacity: 1; transform: scale(1.5) rotate(90deg); box-shadow: 0 0 15px #fff, 0 0 30px var(--rose); }
    }

    /* 🌸 DRIFTING PETALS */
    .petal-wrap {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 5;
    }

    .petal {
      position: absolute;
      width: 28px;
      height: 20px;
      background: linear-gradient(135deg, var(--rose), var(--petal));
      border-radius: 50% 0 50% 50%;
      opacity: 0;
      filter: blur(0.2px);
      box-shadow: 0 5px 15px rgba(201, 123, 138, 0.3);
      animation: petalDrift 16s infinite linear;
    }

    .p1 { width: 32px; top: -10%; left: 10%; animation-delay: 0s; }
    .p2 { width: 24px; top: -10%; left: 30%; animation-delay: 4s; }
    .p3 { width: 28px; top: -10%; left: 50%; animation-delay: 8s; }
    .p4 { width: 30px; top: -10%; left: 70%; animation-delay: 12s; }
    .p5 { width: 26px; top: -10%; left: 85%; animation-delay: 2s; }
    .p6 { width: 29px; top: -10%; left: 20%; animation-delay: 6s; }
    .p7 { width: 31px; top: -10%; left: 55%; animation-delay: 10s; }
    .p8 { width: 25px; top: -10%; left: 95%; animation-delay: 14s; }

    @keyframes petalDrift {
      0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; }
      10% { opacity: 0.95; }
      90% { opacity: 0.95; }
      100% { transform: translate(300px, 110vh) rotate(1440deg) scale(0.8); opacity: 0; }
    }

    /* 🔦 CINEMATIC LIGHT LEAK */
    .light-leak {
      position: absolute;
      inset: -50%;
      background: linear-gradient(135deg, transparent 40%, rgba(201, 123, 138, 0.15) 50%, transparent 60%);
      transform: rotate(-15deg);
      animation: leakSweep 12s infinite alternate ease-in-out;
      pointer-events: none;
      z-index: 6;
      filter: blur(60px);
    }

    @keyframes leakSweep {
      0% { transform: translateX(-15%) rotate(-15deg); }
      100% { transform: translateX(15%) rotate(-15deg); }
    }

    .cam-sec-header {
      text-align: center;
      margin-bottom: 50px;
      max-width: 700px;
      padding: 0 24px;
      z-index: 20;
      position: relative;
    }

    .cam-sec-header .sec-h2 {
      color: #100f0f;
      font-size: clamp(34px, 5vw, 64px);
    }

    .cam-sec-header p {
      color: rgba(23, 22, 22, 0.4);
      font-size: 13px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-top: 15px;
      line-height: 1.6;
    }

    /* Cinematic Film Grain / Paper Overlay */
    .bg-3d::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png');
      opacity: 0.2;
      pointer-events: none;
      z-index: 10;
    }

    /* Technical Grid/Blueprint Layer */
    .bg-3d-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(26, 22, 18, 0.03) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(26, 22, 18, 0.03) 1.5px, transparent 1.5px);
      background-size: 120px 120px;
      transform: perspective(1200px) rotateX(60deg) translateY(-200px) scale(1.2);
      transform-origin: top;
      opacity: 0.6;
      z-index: 2;
      mask-image: radial-gradient(ellipse at center, black 10%, transparent 90%);
      -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 90%);
    }

    /* Focal Point Accents */
    .bg-3d-grid::before {
      content: '+';
      position: absolute;
      top: 10%;
      left: 10%;
      color: rgba(255, 255, 255, 0.05);
      font-size: 24px;
      font-family: 'Space Mono';
    }

    .bg-3d-grid::after {
      content: '+';
      position: absolute;
      bottom: 10%;
      right: 10%;
      color: rgba(255, 255, 255, 0.05);
      font-size: 24px;
      font-family: 'Space Mono';
    }

    /* ─── REALISTIC 3D CAMERA RIG ─── */
    .camera-rig {
      perspective: 1500px;
      width: 95%;
      max-width: 1400px;
      height: 75vh;
      min-height: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
      margin: 0 auto;
    }

    @media (max-width: 900px) {
      .camera-rig {
        height: auto;
        min-height: 0;
        margin-top: 40px;
      }
    }

    .camera-body {
      position: relative;
      width: 100%;
      height: 100%;
      background: var(--ivory2);
      border-radius: 24px;
      /* Premium Matte Metallic Finish */
      background-image: 
        linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%),
        linear-gradient(to right, rgba(0,0,0,0.02) 1px, transparent 1px);
      background-size: 100% 100%, 4px 100%;

      box-shadow:
        inset 0 10px 40px rgba(255, 255, 255, 0.6),
        inset 0 0 0 1px rgba(26, 22, 18, 0.05),
        0 40px 100px rgba(26, 22, 18, 0.12),
        -10px 0 30px rgba(0, 0, 0, 0.03);

      display: flex;
      padding: 40px 30px;
      gap: 30px;
      border: 1px solid rgba(26, 22, 18, 0.08);
      transform: rotateX(1deg) rotateY(-0.5deg);
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .camera-rig:hover .camera-body {
      transform: rotateX(0deg) rotateY(0deg) scale(1.005);
      box-shadow:
        0 60px 120px rgba(26, 22, 18, 0.16);
    }

    /* Side Control Panels */
    .cam-controls {
      display: flex;
      flex-direction: column;
      gap: 25px;
    }

    .left-controls {
      width: 80px;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .right-controls {
      width: 80px;
      align-items: center;
      justify-content: space-between;
      padding-top: 10px;
    }

    /* Buttons with Tooltips */
    .cam-btn-wrap {
      position: relative;
      z-index: 50;
    }

    .cam-btn {
      width: 60px;
      height: 40px;
      background: linear-gradient(to bottom, #fff, #e8e0d5);
      border-radius: 8px;
      border: 1px solid rgba(26, 22, 18, 0.1);
      color: var(--ink);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.5px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 
        0 4px 0 rgba(26, 22, 18, 0.15), 
        inset 0 1px 0 #fff;
      cursor: pointer;
      font-family: var(--sans);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      z-index: 1000;
      pointer-events: auto;
    }

    .cam-btn:active,
    .cam-btn.active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 rgba(26, 22, 18, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.05);
      color: var(--rose);
    }

    /* Refined REC Button */
    .btn-red {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #ff8a9a, var(--rose));
      color: #fff;
      font-size: 11px;
      box-shadow: 
        0 6px 0 rgba(160, 0, 0, 0.15), 
        inset 0 2px 10px rgba(255, 255, 255, 0.4);
      border: 1px solid rgba(26, 22, 18, 0.1);
      position: relative;
      z-index: 1000;
      pointer-events: auto;
      letter-spacing: 2px;
    }

    .btn-red:active,
    .btn-red.active {
      transform: translateY(5px);
      background: radial-gradient(circle at 30% 30%, var(--rose), #b06070);
      box-shadow: 0 1px 0 rgba(160, 0, 0, 0.1), inset 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Notes / Tooltips for New Users */
    .tooltip {
      position: absolute;
      left: 110%;
      top: 50%;
      transform: translateY(-50%);
      background: var(--sage);
      color: #fff;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 11px;
      white-space: nowrap;
      pointer-events: none;
      font-family: var(--sans);
      letter-spacing: 0.5px;
      box-shadow: 0 10px 25px rgba(143, 175, 126, 0.2);
      animation: floatTooltip 2s infinite alternate;
      transition: opacity 0.4s;
      z-index: 100;
      font-weight: 500;
    }

    @media (max-width: 900px) {
      .tooltip {
        left: 50% !important;
        top: calc(100% + 10px) !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        white-space: normal;
        min-width: 180px;
        text-align: center;
        padding: 8px 12px;
        animation: floatTooltipMobile 2s infinite alternate;
      }

      @keyframes floatTooltipMobile {
        0% { transform: translateX(-50%) translateY(0); }
        100% { transform: translateX(-50%) translateY(5px); }
      }
    }

    .tooltip::before {
      content: '';
      position: absolute;
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
      border-width: 6px;
      border-style: solid;
      border-color: transparent var(--sage) transparent transparent;
    }

    @keyframes floatTooltip {
      0% {
        transform: translateY(-50%) translateX(0px);
      }

      100% {
        transform: translateY(-50%) translateX(8px);
      }
    }

    .tooltip.hide {
      opacity: 0;
    }

    /* Misc Features */
    .cam-dial {
      width: 65px;
      height: 65px;
      border-radius: 50%;
      background: conic-gradient(#f0f0f0, #ccc, #f0f0f0, #e0e0e0, #f0f0f0);
      border: 2px solid rgba(26, 22, 18, 0.1);
      box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.1), 
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    }

    .joy-pad {
      width: 65px;
      height: 65px;
      background: #e8e0d5;
      border-radius: 50%;
      box-shadow: 
        inset 0 5px 15px rgba(0, 0, 0, 0.05), 
        0 1px 1px #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid rgba(26, 22, 18, 0.05);
    }

    .joy-pad span {
      width: 35px;
      height: 35px;
      background: radial-gradient(circle at 30% 30%, #fff, #dcd4cc);
      border-radius: 50%;
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(26, 22, 18, 0.1);
    }

    .vent-grill {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      align-items: center;
    }

    .vent-grill span {
      width: 50px;
      height: 8px;
      background: rgba(26, 22, 18, 0.05);
      border-radius: 10px;
      box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.05), 
        0 1px 0 #fff;
    }

    .ports .port {
      width: 60px;
      height: 25px;
      background: #e8e0d5;
      margin-bottom: 15px;
      border-radius: 4px;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
      font-size: 8px;
      color: var(--mid);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 4px;
      border: 1px solid rgba(26, 22, 18, 0.03);
      font-family: 'Space Mono', monospace;
      font-weight: 600;
      letter-spacing: 1px;
    }

    /* ─── VIEWFINDER REGION ─── */
    .viewfinder-bezel {
      flex-grow: 1;
      background: var(--ink);
      border-radius: 16px;
      padding: 24px;
      border: 2px solid rgba(255, 255, 255, 0.05);
      box-shadow: 
        inset 0 0 40px rgba(0, 0, 0, 0.8), 
        0 10px 30px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .brand-text {
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      letter-spacing: 5px;
      color: rgba(255, 255, 255, 0.4);
      text-align: center;
      margin-bottom: 15px;
      font-weight: 500;
    }

    .viewfinder {
      position: relative;
      flex-grow: 1;
      background: #000;
      border-radius: 8px;
      border: 2px solid #000;
      background-color: #1a1a1a;
      box-shadow: inset 0 0 50px rgba(0, 0, 0, 1);
      overflow: hidden;
    }

    .viewfinder::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 30;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
    }

    /* Panels Logic inside Viewfinder */
    .vf-panel {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
    }

    .vf-panel:not(.active) {
      display: none !important;
    }

    /* 1. Standby Panel */
    .panel-standby {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background: #000;
      color: #444;
    }

    .panel-standby .standby-logo {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 8px;
      margin-bottom: 10px;
      font-style: italic;
    }

    .panel-standby .standby-msg {
      font-size: 11px;
      letter-spacing: 2px;
    }

    /* 2. Recording (Live) Panel */
    .panel-live {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
    }

    .cam-video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0.8;
      filter: contrast(110%);
    }

    /* 3. Menu Panel */
    .panel-menu {
      background: #111;
      padding: 20px;
      display: flex;
      flex-direction: column;
    }

    .menu-header {
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      color: #00c6ff;
      letter-spacing: 2px;
      margin-bottom: 15px;
      border-bottom: 1px dashed #333;
      padding-bottom: 10px;
    }

    .menu-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      flex-grow: 1;
      height: calc(100% - 40px);
      overflow-y: auto;
    }

    .menu-thumb {
      background: #000;
      border: 2px solid #333;
      border-radius: 4px;
      position: relative;
      cursor: pointer;
      transition: 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .menu-thumb video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0.6;
    }

    .menu-thumb:hover {
      border-color: #00c6ff;
    }

    .menu-thumb:hover video {
      opacity: 1;
    }

    .menu-thumb.selected {
      border-color: #00ff00;
      box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
    }

    .menu-thumb.selected video {
      opacity: 1;
    }

    .menu-thumb-label {
      position: absolute;
      bottom: 5px;
      left: 10px;
      right: 10px;
      display: flex;
      justify-content: space-between;
      font-family: 'Space Mono';
      font-size: 9px;
      color: #fff;
      text-shadow: 1px 1px 2px #000;
      z-index: 2;
      pointer-events: none;
    }

    /* 4. Playback Panel */
    .panel-play {
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .playback-video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      /* Fill without cutting */
    }

    /* ─── UI HUD OVERLAY ─── */
    .ui-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 40;
      padding: 30px;
      font-family: 'Space Mono', monospace;
      color: rgba(255, 255, 255, 0.85);
      font-size: 13px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }

    .grid-corners {
      position: absolute;
      inset: 20px;
    }

    .grid-corners::before,
    .grid-corners::after {
      content: '';
      position: absolute;
      width: 40px;
      height: 40px;
      border: 2px solid rgba(255, 255, 255, 0.7);
    }

    .grid-corners::before {
      top: 0;
      left: 0;
      border-right: none;
      border-bottom: none;
    }

    .grid-corners::after {
      bottom: 0;
      right: 0;
      border-left: none;
      border-top: none;
    }

    .grid-corners-2 {
      position: absolute;
      inset: 20px;
    }

    .grid-corners-2::before,
    .grid-corners-2::after {
      content: '';
      position: absolute;
      width: 40px;
      height: 40px;
      border: 2px solid rgba(255, 255, 255, 0.7);
    }

    .grid-corners-2::before {
      top: 0;
      right: 0;
      border-left: none;
      border-bottom: none;
    }

    .grid-corners-2::after {
      bottom: 0;
      left: 0;
      border-right: none;
      border-top: none;
    }

    .ui-top,
    .ui-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      font-size: 16px;
      transition: color 0.3s;
      color: #666;
    }

    .status-indicator.is-rec {
      color: #ff3333;
    }

    .status-indicator.is-menu {
      color: #00c6ff;
    }

    .status-indicator.is-play {
      color: #00ff00;
    }

    .status-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      opacity: 0;
    }

    .is-rec .status-dot {
      background: #ff3333;
      box-shadow: 0 0 10px #ff3333;
      animation: blink 1.5s infinite;
      opacity: 1;
    }

    .is-play .status-dot {
      width: 0;
      height: 0;
      border-radius: 0;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 10px solid #00ff00;
      background: transparent;
      opacity: 1;
      box-shadow: none;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }
    }

    .tech-info {
      display: flex;
      gap: 25px;
      align-items: center;
    }

    .tech-item {
      background: rgba(0, 0, 0, 0.4);
      padding: 4px 8px;
      border-radius: 4px;
      backdrop-filter: blur(4px);
      transition: opacity 0.3s;
    }

    .ui-hidden {
      opacity: 0 !important;
    }

    .focus-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 25vw;
      height: 15vw;
      max-width: 400px;
      max-height: 250px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      animation: focusPulse 4s infinite;
      transition: opacity 0.3s;
    }

    @keyframes focusPulse {

      0%,
      100% {
        border-color: rgba(255, 255, 255, 0.4);
        transform: translate(-50%, -50%) scale(1);
      }

      50% {
        border-color: rgba(0, 198, 255, 0.8);
        transform: translate(-50%, -50%) scale(1.02);
      }
    }

    .focus-box::before,
    .focus-box::after {
      content: '';
      position: absolute;
      width: 30px;
      height: 1px;
      background: rgba(255, 255, 255, 0.6);
    }

    .focus-box::after {
      width: 1px;
      height: 30px;
    }

    .battery {
      width: 38px;
      height: 18px;
      border: 1.5px solid #fff;
      border-radius: 3px;
      position: relative;
      padding: 1.5px;
    }

    .battery::after {
      content: '';
      position: absolute;
      right: -5px;
      top: 4px;
      width: 3px;
      height: 7px;
      background: #fff;
      border-radius: 0 2px 2px 0;
    }

    .battery-fill {
      width: 80%;
      height: 100%;
      background: #00c6ff;
    }


    @media (max-width: 900px) {
      .cam-hero-sec {
        padding: 80px 0;
        min-height: auto;
      }

      .cam-sec-header {
        margin-bottom: 30px;
      }

      .cam-sec-header .sec-h2 {
        font-size: clamp(24px, 7vw, 32px);
        max-width: 90%;
        margin: 0 auto;
      }

      .camera-body {
        flex-direction: column;
        height: auto;
        width: 100%;
        max-width: 450px;
        padding: 15px 10px;
        border-width: 1px;
        gap: 15px;
      }

      .viewfinder-bezel {
        order: -1;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        height: auto;
        aspect-ratio: 1.2;
        padding: 8px;
        border-radius: 12px;
        box-shadow: inset 0 0 20px rgba(0, 0, 0, 1);
        border-color: #222;
      }
      
      .viewfinder {
        border-radius: 8px;
      }

      .cam-controls {
        flex-direction: row;
        width: 100%;
        justify-content: center;
        padding-top: 10px;
        gap: 15px;
      }

      .left-controls,
      .right-controls {
        width: 100%;
      }

      .cam-btn {
        width: 60px;
        height: 42px;
        font-size: 9px;
      }

      .btn-red {
        width: 65px;
        height: 65px;
        font-size: 10px;
      }

      .vent-grill,
      .ports,
      .brand-text {
        display: none;
      }

      .tech-info {
        gap: 8px;
      }

      .tech-item {
        font-size: 8px;
        padding: 1px 3px;
      }

      .ui-top,
      .ui-bottom {
        flex-wrap: wrap;
        gap: 5px;
      }

      .status-indicator {
        font-size: 11px;
      }

      .menu-header {
        font-size: 9px !important;
        padding: 8px 12px !important;
        letter-spacing: 1px !important;
      }

      .menu-thumb-label {
        font-size: 8px !important;
        bottom: 5px !important;
        padding: 0 6px !important;
      }

      .menu-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
      }

      .tooltip {
        left: 50%;
        top: calc(100% + 14px);
        bottom: auto;
        transform: translateX(-50%);
        white-space: normal;
        width: 100px;
        text-align: center;
        padding: 6px;
        font-size: 8px;
        z-index: 1100;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
      }

      .tooltip::before {
        top: auto;
        bottom: 100%;
        right: 50%;
        transform: translateX(50%);
        border-color: transparent transparent rgba(0, 198, 255, 0.95) transparent;
      }

      @keyframes floatTooltip {
        0% {
          transform: translateX(-50%) translateY(0px);
        }

        100% {
          transform: translateX(-50%) translateY(6px);
        }
      }
    }

    @media (max-width: 480px) {
      .viewfinder-bezel {
        height: 75vw;
        min-height: 220px;
        border-width: 1px;
        padding: 4px;
      }

      .cam-video {
        border-radius: 4px;
      }

      .camera-body {
        padding: 8px 6px;
        border-radius: 8px;
      }

      .ui-overlay {
        padding: 10px;
      }

      .tech-info {
        gap: 5px;
      }

      .tech-item {
        font-size: 7px;
      }

      .status-indicator {
        font-size: 10px;
      }
    }

    /* ── CTA BANNER ── */
    .cta-banner {
      position: relative;
      width: 100%;
      height: 70vh;
      min-height: 500px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .cta-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 1.5s ease;
      z-index: 1;
    }

    .cta-banner:hover .cta-bg {
      transform: scale(1.05);
    }

    .cta-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(18, 13, 8, 0.4), rgba(18, 13, 8, 0.8));
      z-index: 2;
    }

    .cta-content {
      position: relative;
      z-index: 3;
      padding: 0 20px;
      max-width: 800px;
    }

    .cta-content .sec-h2 {
      color: #fff;
      font-size: clamp(40px, 6vw, 80px);
      margin-top: 15px;
    }

    .cta-content .sec-h2 em {
      color: var(--petal);
    }

    /* ── IMPRESSIVE CTA BUTTON ── */
    .btn-impressive {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 18px 48px;
      background: var(--rose);
      color: #fff;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 4px;
      text-transform: uppercase;
      font-weight: 500;
      border: none;
      border-radius: 100px;
      cursor: none;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(201, 123, 138, 0.3);
      transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
      white-space: nowrap;
    }

    .btn-impressive::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: 0.5s;
    }

    .btn-impressive:hover {
      background: var(--sage);
      box-shadow: 0 15px 45px rgba(143, 175, 126, 0.4);
      transform: translateY(-3px) scale(1.02);
    }

    .btn-impressive:hover::before {
      left: 100%;
    }

    .btn-impressive .icon-circle {
      width: 28px;
      height: 28px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 15px;
      transition: 0.3s;
      font-size: 14px;
      flex-shrink: 0;
    }

    .btn-impressive:hover .icon-circle {
      transform: translateX(5px);
      background: rgba(255, 255, 255, 0.3);
    }

    /* ── GLOBAL BOOKING MODAL ── */
    .booking-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(18, 13, 8, 0.85);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 15px;
    }
    .booking-modal-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }
    .booking-modal-content {
      background: #fff;
      width: 100%;
      max-width: 600px;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      transform: translateY(30px);
      transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
      border-radius: 8px;
      padding-bottom: 20px;
    }

    @media (max-width: 600px) {
      .booking-modal-content {
        max-height: 80vh;
        border-radius: 20px 20px 0 0;
        position: absolute;
        bottom: 0;
        transform: translateY(100%);
        padding: 30px 20px !important; /* Overriding bk-form-card padding */
      }
      .booking-modal-content h3 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
      }
      .booking-modal-content p {
        font-size: 11px !important;
        margin-bottom: 24px !important;
      }
      .booking-modal-content .f2c {
        gap: 15px !important;
      }
      .booking-modal-content .fg2 {
        margin-bottom: 15px !important;
      }
      .booking-modal-content .fl {
        font-size: 8px !important;
        margin-bottom: 6px !important;
      }
      .booking-modal-content .fi {
        font-size: 13px !important;
        padding: 8px 0 !important;
      }
      .booking-modal-content .f-sub {
        padding: 15px !important;
        font-size: 9px !important;
      }
      .modal-close-btn {
        top: 15px !important;
        right: 20px !important;
        font-size: 28px !important;
      }
      .booking-modal-overlay.show .booking-modal-content {
        transform: translateY(0);
      }
    }
    .booking-modal-overlay.show .booking-modal-content {
      transform: translateY(0);
    }
    .modal-close-btn {
      position: absolute;
      top: 25px;
      right: 30px;
      background: transparent;
      border: none;
      font-size: 36px;
      line-height: 1;
      color: var(--mid);
      cursor: pointer;
      transition: color 0.3s;
      z-index: 10;
    }
    .modal-close-btn:hover {
      color: var(--rose);
    }

/* %% Specific Logo Fixes %% */
.cl-item img[src*='coolnx.png'] {
  transform: scale(1.6); /* Boost size specifically for CoolNX */
  margin-left: 20px;
  margin-right: 20px;
}

/* ── Specific Logo Adjustments ── */
.cl-item img[src*='coolnx.jpeg'] {
  transform: scale(1.7);
  margin: 0 10px;
}