/* ===========================================================
   MOON VISION — design tokens
   =========================================================== */
:root{
  --ink:        #0a0a0b;
  --ink-soft:   #131315;
  --ink-edge:   #1c1c1f;
  --bone:       #f3efe4;
  --bone-dim:   #b9b3a4;
  --brass:      #c9a24b;
  --brass-deep: #8a6a2a;
  --teal:       #1c3b46;
  --line:       rgba(243,239,228,0.12);
  --line-soft:  rgba(243,239,228,0.06);

  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-ui:      "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "Courier New", monospace;

  --ease: cubic-bezier(.22,1,.36,1);
  --container: 1320px;
}
@font-face {
    font-family: 'FrauncesVariable';
    src: url('assets/fonts/FrauncesVariable.woff') format('woff'), 
        url('assets/fonts/FrauncesVariable.woff2') format('woff2'),
        url('assets/fonts/FrauncesVariable.ttf') format('truetype');
}
@font-face {
    font-family: 'SuisseIntlMono';
    src: url('assets/fonts/SuisseIntlMono.woff') format('woff'),
        url('assets/fonts/SuisseIntlMono.woff2') format('woff2'),
        url('assets/fonts/SuisseIntlMono.ttf') format('truetype');
}
.hero-title .line {
    font-family: 'FrauncesVariable' !important;
    text-transform: capitalize;
}
    *{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--ink);
    color: var(--bone);
    font-family: 'SuisseIntlMono';
    /*font-family: var(--font-ui);*/
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /*    font-family: 'SuisseIntlMono' !important;*/
}

.cormorant-garamond{
    font-family: "Cormorant Garamond", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.libre-bodoni {
    font-family: "Libre Bodoni", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

img,video{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; }
.mono {
    font-family: 'SuisseIntlMono' !important;
    letter-spacing: .03em;
}
.small{ font-size: .72rem; }

.eyebrow {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #8a8987;
    margin: 0 0 1.1rem;
}

::selection{ background: var(--brass); color: var(--ink); }

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline: 1.5px solid var(--brass);
  outline-offset: 4px;
}

/* ===========================================================
   GRAIN OVERLAY
   =========================================================== */
.grain{
  position: fixed; inset:0; z-index: 9000;
  background-image: url('assets/img/grain.png');
  background-size: 256px 256px;
  opacity: .05;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ===========================================================
   CUSTOM CURSOR
   =========================================================== */
.cursor{
  position: fixed; top:0; left:0; width:26px; height:26px;
  border:1px solid var(--brass);
  border-radius:50%;
  transform: translate(-50%,-50%);
  pointer-events:none;
  z-index: 9500;
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .3s;
  mix-blend-mode: difference;
}
.cursor.is-hover{ width:54px; height:54px; background: rgba(201,162,75,.18); }
.cursor.is-hidden{ opacity:0; }
@media (pointer:coarse){ .cursor{ display:none; } }

/* ===========================================================
   PRELOADER
   =========================================================== */
.preloader{
  position: fixed; inset:0; z-index: 10000;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-logo{
  position:absolute; width:120px; opacity:0;
  transition: opacity .6s var(--ease) .3s;
 /* filter: invert(1);*/
}
.preloader.show-logo .preloader-logo{ opacity:1; }
.preloader-ring{ transform: rotate(-90deg); }
.ring-track{ fill:none; stroke: var(--line); stroke-width:1.5; }
.ring-progress{
  fill:none; stroke: var(--brass); stroke-width:1.5;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  transition: stroke-dashoffset 1s var(--ease);
}
.preloader.show-logo .ring-progress{ stroke-dashoffset: 0; }

/* ===========================================================
   APERTURE SCROLL PROGRESS
   =========================================================== */
.aperture-progress{
  position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 600;
  width:56px; height:56px; border:none; background:none; cursor:pointer;
  opacity:0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.aperture-progress.is-visible{ opacity:1; transform: translateY(0); }
.aperture-progress svg{ transform: rotate(-90deg); }
.ap-track{ fill:none; stroke: var(--line); stroke-width:1.5; }
.ap-fill{
  fill:none; stroke: var(--brass); stroke-width:1.5;
  stroke-dasharray: 144.5; stroke-dashoffset: 144.5;
}
.ap-core{ fill: var(--bone); stroke:none; transition: transform .3s var(--ease); transform-origin: 28px 28px; }
.aperture-progress:hover .ap-core{ transform: scale(1.25); }

/* ===========================================================
   NAV
   =========================================================== */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 700;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.4rem clamp(1.2rem, 4vw, 3.2rem);
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled{
  background: rgba(10,10,11,.82);
  backdrop-filter: blur(10px);
  padding-top: 1rem; padding-bottom: 1rem;
  border-color: var(--line);
}
.nav-logo img{ height: 26px; }
.nav-links {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    font-size: .85rem;
    font-family: 'SuisseIntlMono' !important;
}
.nav-links a{ position:relative; padding: .2rem 0; }
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: var(--brass); transform: scaleX(0); transform-origin:right;
  transition: transform .35s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after{ transform: scaleX(1); transform-origin:left; }
.nav-cta{
  border:1px solid var(--brass); padding: .55rem 1.1rem; border-radius: 999px;
  color: var(--brass) !important; font-family: var(--font-mono); font-size:.72rem;
  letter-spacing:.05em; transition: background .3s var(--ease), color .3s var(--ease);
}
.nav-cta:hover{ background: var(--brass); color: var(--ink) !important; }
.nav-burger{ display:none; }

.mobile-menu{
  position: fixed; inset:0; z-index: 650;
  background: var(--ink);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap: 1.4rem; padding: 2rem clamp(1.2rem,6vw,3rem);
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu a{ font-size: 2rem; }

@media (max-width: 760px){
  .nav-links{ display:none; }
  .nav-burger{
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    width:34px; height:34px; background:none; border:none; cursor:pointer; z-index:680;
  }
  .nav-burger span{ width:100%; height:1px; background:var(--bone); transition: transform .3s, opacity .3s; }
  .nav-burger[aria-expanded="true"] span:first-child{ transform: translateY(3.5px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:last-child{ transform: translateY(-3.5px) rotate(-45deg); }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position: relative; height: 100vh; min-height: 560px;
  display:flex; align-items:center; overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-video{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.06);
  filter: saturate(1.05) brightness(.92);
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.25) 40%, rgba(10,10,11,.92) 100%),
    linear-gradient(90deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,0) 55%);
}
.hero-content {
    font-family: 'FrauncesVariable';
    font-weight: normal;
    position: relative;
    z-index: 2;
    padding: 0 clamp(1.2rem, 6vw, 3rem);
    max-width: 800px;
}
.line-2 {
    font-size:2.50rem !important;
    padding-top: 37px;
    font-weight: normal !important;
    color: #d2b26a !important;
  }
.eyebrow.mono {
    font-family: 'SuisseIntlMono' !important;
}
.wrap-1{}
.hero-title {
    font-family: 'FrauncesVariable' !important;
    font-weight: normal;
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    line-height: 1.04;
    margin: 0 0 1.4rem;
}
.hero-title .line{ display:block; }
.hero-title .accent{ color: var(--brass); font-style: italic; }
.hero-sub{
  max-width: 480px; font-size: clamp(.95rem, 1.1vw, 1.08rem);
  color: var(--bone-dim); line-height:1.6;
}
.scroll-cue{
  position:absolute; left: clamp(1.2rem,6vw,4rem); bottom: 2.4rem; z-index:2;
  display:flex; align-items:center; gap:.6rem; color: var(--bone-dim);
}
.ap-mini{ display:inline-flex; color: var(--brass); animation: ap-pulse 2.6s ease-in-out infinite; }
.ap-mini svg circle:first-child{ fill:none; stroke: currentColor; stroke-width:1.3; }
@keyframes ap-pulse{ 0%,100%{ transform: scale(1); opacity:.7;} 50%{ transform: scale(1.15); opacity:1; } }

/* reveal-up entrance (hero, runs on load not on scroll) */
.reveal-up{
  opacity:0; transform: translateY(22px);
  animation: reveal-up .9s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes reveal-up{ to{ opacity:1; transform: translateY(0); } }

/* ===========================================================
   MARQUEE
   =========================================================== */
.marquee{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow:hidden; padding: 1.1rem 0; background: var(--ink-soft);
}
.marquee-track{
  display:flex; align-items:center; gap: 1.4rem; white-space:nowrap;
  width:max-content;
  font-family: var(--font-mono); font-size: .85rem; letter-spacing:.08em;
  color: var(--bone-dim);
  animation: marquee 28s linear infinite;
}
.dot{ width:5px; height:5px; border-radius:50%; background: var(--brass); display:inline-block; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ===========================================================
   STUDIO / MANIFESTO
   =========================================================== */
.studio{ padding: clamp(5rem,10vw,8rem) clamp(1.2rem,6vw,4rem); }
.studio-inner{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 4rem;
}
.manifesto {
    /*  font-family: var(--font-display); font-weight:500; font-style: italic;*/
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-family: 'FrauncesVariable' !important;
    line-height: 1.35;
    margin: 0;
}
.studio-right{ padding-top: .4rem; }
    .studio-right p{line-height:26px !important}
    .body-text {
        color: var(--bone-dim);
        line-height: 1.75;
        font-size: 1.02rem;
        max-width: 460px;
    }
.fact-strip{ display:flex; flex-direction:column; gap:1rem; margin-top:2.4rem; border-top:1px solid var(--line); padding-top:1.6rem; }
.fact{ display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line-soft); padding-bottom: .9rem; }
.fact-label{ color: var(--brass); font-size:.72rem; }
.fact-value{ font-size:.92rem; color: var(--bone-dim); text-align:right; }

@media (max-width: 860px){
  .studio-inner{ grid-template-columns: 1fr; gap: 2.4rem; }
}

/* ===========================================================
   REEL — horizontal pinned scroll
   =========================================================== */
.reel-section{ position: relative; }
.reel-pin{
  position: sticky; top:0; height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.reel-eyebrow{ position:absolute; top: 2.4rem; left: clamp(1.2rem,6vw,4rem); z-index:3; margin:0; }
.reel-track{
  display:flex; align-items:center; gap: 2.2vw;
  padding-left: 8vw;
  will-change: transform;
}
.reel-panel{
  position:relative; flex: 0 0 auto;
  width: min(72vw, 760px); height: 64vh; max-height:600px;
  border-radius: 6px; overflow:hidden;
  background: var(--ink-soft);
  cursor: pointer;
}
.reel-media{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.reel-panel:hover .reel-media{ transform: scale(1.04); }
.reel-panel::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,11,0) 45%, rgba(10,10,11,.88) 100%);
}
.reel-caption{ position:absolute; left:1.6rem; bottom:1.5rem; right:1.6rem; z-index:2; }
.reel-caption .tag{ color: var(--brass); font-size:.68rem; display:block; margin-bottom:.5rem; }
    .reel-caption h3 {
        font-family: 'FrauncesVariable' !important;
        font-style: italic;
        font-weight: normal;
        font-size: clamp(1.2rem, 2.4vw, 1.6rem);
        margin: 0;
        color: var(--bone);
    }
.studio-left {
    font-weight: normal;
}

@media (max-width: 760px) {
    .reel-panel{ width: 84vw; height:50vh; }
}

/* ===========================================================
   SERVICES
   =========================================================== */
.services{ padding: clamp(5rem,10vw,8rem) clamp(1.2rem,6vw,4rem); max-width: var(--container); margin:0 auto; }
.service-list{ border-top:1px solid var(--line); }
.service-row{
  display:grid; grid-template-columns: 140px 1fr 1.4fr; align-items:baseline; gap: 2rem;
  padding: 2.2rem 0; border-bottom:1px solid var(--line);
  transition: background .35s var(--ease);
}
.service-row:hover{ background: var(--line-soft); }
    .service-row .tag {
        color: var(--brass);
        font-size: .78rem;
        font-family: 'SuisseIntlMono' !important;
    }
    .service-row h3 {
        font-family: 'FrauncesVariable' !important;
        font-weight: normal !important;
        font-size: clamp(1.4rem,2.6vw,1.8rem);
        margin: 0;
    }
.service-row p{ color: var(--bone-dim); line-height:1.6; margin:0; font-size:.96rem; max-width:480px; }

@media (max-width: 760px){
  .service-row{ grid-template-columns: 1fr; gap:.6rem; padding: 1.6rem 0; }
}

/* ===========================================================
   GALLERY
   =========================================================== */
.gallery{ padding: clamp(5rem,10vw,8rem) clamp(1.2rem,6vw,4rem) clamp(3rem,6vw,5rem); max-width: var(--container); margin:0 auto; }
.gallery-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px;
  gap: 1rem;
}
.g-item{
  position:relative; margin:0; overflow:hidden; border-radius:4px; cursor:pointer;
  grid-column: span 1; grid-row: span 1;
}
.g-tall{ grid-row: span 2; }
.g-wide{ grid-column: span 2; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease), filter .4s; }
.g-item:hover img{ transform: scale(1.07); }
.g-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: .9rem 1rem;
  background: linear-gradient(180deg, rgba(10,10,11,0), rgba(10,10,11,.85));
  opacity:0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.g-item:hover figcaption{ opacity:1; transform: translateY(0); }
.g-item figcaption .mono{ font-size:.68rem; color: var(--brass); }

@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 180px; }
  .g-wide{ grid-column: span 2; }
}

/* ===========================================================
   VIDEO GALLERY — justified grid (mixed portrait / landscape)
   =========================================================== */
.video-gallery{ padding: clamp(5rem,10vw,8rem) clamp(1.2rem,6vw,4rem) clamp(3rem,6vw,5rem); max-width: var(--container); margin:0 auto; }
.video-grid {
    display: flex;
    flex-wrap: wrap; /*gap: .9rem;*/
    gap: 0rem;
    /* row height controlled via --row-h, set/updated by JS per breakpoint */
}
.video-item{
  position:relative; overflow:hidden; border-radius:6px; cursor:pointer;
  background: var(--ink-soft);
  height: var(--row-h, 320px);
  flex-grow: 1;
}
.video-item .thumb{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .7s var(--ease), filter .4s;
}
.video-item:hover .thumb{ transform: scale(1.06); }

.video-item::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,11,0) 55%, rgba(10,10,11,.82) 100%);
  opacity:.75; transition: opacity .35s var(--ease);
}
.video-item:hover::after{ opacity:.9; }

.play-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:2; pointer-events:none;
}
.play-badge-circle{
  width:58px; height:58px; border-radius:50%;
  border:1px solid var(--brass); background: rgba(10,10,11,.4);
  display:flex; align-items:center; justify-content:center;
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.video-item:hover .play-badge-circle{ transform: scale(1.12); background: rgba(201,162,75,.28); }
.play-badge-circle svg{ margin-left:3px; }

.video-caption{
  position:absolute; left:1.2rem; right:1.2rem; bottom:1rem; z-index:2;
  opacity:0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.video-item:hover .video-caption{ opacity:1; transform: translateY(0); }
.video-caption .tag{ display:block; color: var(--brass); font-size:.66rem; margin-bottom:.3rem; }
.video-caption h4 {
    font-family: 'FrauncesVariable' !important;
    font-weight: normal;
    font-style: italic;
    font-size: 1.15rem;
    margin: 0;
    color: var(--bone);
}

@media (max-width: 760px){
  .video-item{ height: var(--row-h, 220px); }
  .video-caption{ opacity:1; transform:none; }
}

/* ===========================================================
   CTA
   =========================================================== */
.cta{ position:relative; padding: clamp(6rem,14vw,10rem) clamp(1.2rem,6vw,4rem); overflow:hidden; text-align:center; }
.cta-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: grayscale(.15); }
.cta-overlay{ position:absolute; inset:0; background: radial-gradient(circle at 50% 40%, rgba(10,10,11,.55), rgba(10,10,11,.94)); }
.cta-content{ position:relative; z-index:2; max-width: 720px; margin:0 auto; }
.cta h2 {
    font-family: 'FrauncesVariable' !important;
    font-style: italic;
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    margin: 0 0 1.1rem;
    line-height: 1.1;
    font-weight: normal;
}
.cta-sub{ color: var(--bone-dim); margin: 0 auto 2.2rem; max-width:460px; line-height:1.6; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-bottom:1.2rem; }
.btn{
  font-family: var(--font-mono); font-size:.82rem; letter-spacing:.03em;
  padding: .9rem 1.6rem; border-radius: 999px; border:1px solid var(--brass);
  background: var(--brass); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn-ghost{ background:none; color: var(--bone); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--brass); color: var(--brass); }
.cta-note{ color: var(--bone-dim); opacity:.65; }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding: 2.2rem clamp(1.2rem,6vw,4rem); border-top:1px solid var(--line);
  color: var(--bone-dim);
}
.footer-logo{ height:20px; filter: invert(1); opacity:.8; }
.back-to-top{ color: var(--bone-dim); }
.back-to-top:hover{ color: var(--brass); }

@media (max-width: 600px){
  .site-footer{ flex-direction:column; gap: 1rem; text-align:center; }
}

/* ===========================================================
   LIGHTBOX
   =========================================================== */
.lightbox{
  position: fixed; inset:0; z-index: 9200;
  background: rgba(10,10,11,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .35s var(--ease), visibility .35s;
  padding: 4vh 4vw;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img,
.lightbox video{ max-width:100%; max-height:92vh; border-radius:4px; display:none; }
.lightbox img.is-active,
.lightbox video.is-active{ display:block; }
.lightbox video{ background:#000; }
.lightbox-close{
  position:absolute; top:1.6rem; right:1.6rem; background:none; border:1px solid var(--line);
  color: var(--bone); width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1rem;
  transition: border-color .3s, color .3s;
}
.lightbox-close:hover{ border-color: var(--brass); color: var(--brass); }

/* ===========================================================
   SCROLL REVEAL (generic, used by JS-toggled .is-visible)
   =========================================================== */
.reveal, .reveal-words{
  opacity:0; transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible, .reveal-words.is-visible{ opacity:1; transform: translateY(0); }

/* ===========================================================
   REDUCED MOTION
   =========================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .marquee-track{ animation:none; }
  .reveal-up{ animation:none; opacity:1; transform:none; }
  .reveal, .reveal-words{ transition:none; opacity:1; transform:none; }
  .cursor{ display:none; }
  .ap-mini{ animation:none; }
  .hero-video{ display:none; }
  .hero-media{ background: #111; }
}

.symbol-title {
  font-size:3.5rem !important
}
/* Mobile Small */

@media screen and (max-width: 600px) {
    .symbol-title {
        font-size: 2rem !important
    }
}