/* =========================================================
   RITVE PRODUCTIONS — flat 2D landing page
   No 3D, no shadows. Per-object scroll parallax + physics.
   ========================================================= */

/* ---- Brand typeface: Avenir Next (self-hosted) ---- */
@font-face{ font-family:'Avenir Next'; font-weight:100;     font-style:normal; font-display:swap; src:url('../fonts/avenir-next-thin.ttf')        format('truetype'); }
@font-face{ font-family:'Avenir Next'; font-weight:200 300; font-style:normal; font-display:swap; src:url('../fonts/avenir-next-ultra-light.ttf') format('truetype'); }
@font-face{ font-family:'Avenir Next'; font-weight:400;     font-style:normal; font-display:swap; src:url('../fonts/avenir-next-regular.ttf')     format('truetype'); }
@font-face{ font-family:'Avenir Next'; font-weight:500;     font-style:normal; font-display:swap; src:url('../fonts/avenir-next-medium.ttf')      format('truetype'); }
@font-face{ font-family:'Avenir Next'; font-weight:600;     font-style:normal; font-display:swap; src:url('../fonts/avenir-next-demi.ttf')        format('truetype'); }
@font-face{ font-family:'Avenir Next'; font-weight:700;     font-style:normal; font-display:swap; src:url('../fonts/avenir-next-bold.ttf')        format('truetype'); }
@font-face{ font-family:'Avenir Next'; font-weight:800 900; font-style:normal; font-display:swap; src:url('../fonts/avenir-next-heavy.ttf')       format('truetype'); }

:root{
  --cream:   #f7f3e7;
  --cream-2: #faf7ee;
  --gold:    #f2a829;
  --gold-d:  #e89c16;
  --ink:     #1b1b1b;
  --ink-2:   #14151a;
  --dark:    #16161c;
  --line:    #1b1b1b;
  --muted:   #5a564c;
  --ls-ui:   1px;
  --ls-soft: .6px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  font-family:'Avenir Next',system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  width:100%;
}
.hero, .about, .gallery, .contact{
  max-width:100%;
}

/* ---- custom hand cursor (pointing) + clicking state on press ---- */
*, *::before, *::after{
  cursor:url('../cursors/hand.svg') 12 2, pointer !important;
}
body.is-clicking, body.is-clicking *, body.is-clicking *::before, body.is-clicking *::after{
  cursor:url('../cursors/hand-click.svg') 12 2, pointer !important;
}
svg.float, .about-obj{ overflow:visible; }
/* shared line-art look (flat strokes, no fill) */
.hero-doodles svg, .about-art svg, .logo-mark{
  fill:none; stroke:var(--ink); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.fill{ fill:var(--ink); stroke:none; }
.fill-orange{ fill:var(--gold); stroke:none; }
.fill-dark{ fill:var(--ink); stroke:var(--ink); }
.orange{ stroke:var(--gold)!important; }
.orange .fill-orange{ fill:var(--gold); }

/* =========================== NAV =========================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 40px; background:rgba(247,243,231,.92);
  backdrop-filter:blur(6px); border-bottom:1px solid rgba(27,27,27,.06);
}
.logo{ display:flex; align-items:center; text-decoration:none; color:var(--ink); flex:none; }
/* logo scales down with viewport so it never overlaps the nav links */
.logo-img{ height:clamp(20px, 4vw, 34px); width:auto; display:block; }

.nav-links{ display:flex; gap:34px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.nav-links a{
  position:relative; text-decoration:none; color:var(--ink);
  font-weight:800; font-size:13px; letter-spacing:var(--ls-ui);
  display:flex; align-items:center; gap:8px; transition:color .2s;
}
.nav-links a .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:0; transition:opacity .2s; }
.nav-links a:hover{ color:var(--gold-d); }
.nav-links a:hover .dot{ opacity:1; }

/* ===================== floating social rail ===================== */
.social-rail{
  position:fixed; top:82px; right:18px; z-index:60;
  display:flex; flex-direction:column; gap:9px;
}
.srail{
  position:relative; width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; text-decoration:none;
  transition:transform .18s ease;
}
.srail svg{ width:19px; height:19px; }
.srail:hover{ transform:scale(1.12); }
.srail::before{
  content:attr(data-label); position:absolute; right:calc(100% + 9px); top:50%;
  transform:translateY(-50%) translateX(4px);
  background:var(--ink); color:#fff; font-size:11px; font-weight:700; letter-spacing:var(--ls-soft);
  padding:4px 9px; border-radius:5px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .16s, transform .16s;
}
.srail:hover::before{ opacity:1; transform:translateY(-50%) translateX(0); }
.srail-yt{ background:#ff0000; }
.srail-sp{ background:#1db954; }
.srail-ig{ background:linear-gradient(45deg,#f9ce34 5%,#ee2a7b 50%,#6228d7 95%); }
.srail-am{ background:#25d1da; }
.srail-ytm{ background:#ff0000; }
.srail-x{ background:#000000; }

/* =========================== HERO =========================== */
.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:120px 6% 60px; overflow:hidden;
  background:var(--cream) url('../Images/herobackground.png') center/cover no-repeat;
}
.hero-doodles{ position:absolute; inset:0; pointer-events:none; }
.hero-doodles,
.about-art{
  --doodle-layer-scale:1;
}
.hero-doodles{
  width:calc(100% / var(--doodle-layer-scale));
  height:calc(100% / var(--doodle-layer-scale));
  transform:scale(var(--doodle-layer-scale));
  transform-origin:top left;
}
.hero-doodles .float{ position:absolute; will-change:transform; }
.hero-doodles .no-float{ will-change:auto; }
.hero-cat-eye{
  z-index:4;
}
.hero-cat-eye-close{
  opacity:0;
  animation:catEyeBlink 5s infinite;
}
@keyframes catEyeBlink{
  0%, 82%, 96%, 100%{ opacity:0; }
  84%, 94%{ opacity:1; }
}
/* user's SVG assets used as <img> in hero + about keep their aspect ratio */
.hero-doodles img.float, .about-art img.about-obj{ height:auto; display:block; }
.hero-doodles .dots circle, .hero-doodles .fill{ fill:var(--ink); stroke:none; }
.reel rect{ fill:var(--ink); stroke:var(--ink); }
.cam path{ fill:none; }

.hero-title{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
  margin-top:-3%;
}
/* RITVE / PRODUCTIONS brand wordmarks (PNG). They overlap like the mockup. */
.hero-title .rit{
  display:block; width:clamp(300px, 62vw, 780px); height:auto; will-change:transform;
}
.hero-title .prod{
  display:block; width:clamp(320px, 66vw, 850px); height:auto;
  margin-top:clamp(-46px, -3.4vw, -16px); will-change:transform;
}
.hero-tagline{
  position:relative; z-index:2;
  max-width:620px; margin-top:4px; margin-left:clamp(48px, 8vw, 120px);
  font-size:clamp(17px, 1.7vw, 22px); line-height:1.6; font-weight:600;
  color:#2c2820; letter-spacing:0; text-align:center; will-change:transform;
}

/* ===================== shared section title ===================== */
.section-title{
  font-weight:900; font-size:clamp(28px,4vw,46px); letter-spacing:.5px;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
.section-title .rule{ width:54px; height:4px; background:var(--ink); display:block; }

/* =========================== ABOUT =========================== */
.about{
  position:relative; background:transparent;
  display:grid; grid-template-columns:1fr 1.15fr; gap:30px;
  margin-top:-48px;
  padding:92px 60px 80px; min-height:46vh;
  isolation:isolate;
}
.about::before,
.about-depth{
  content:""; position:absolute;
  clip-path:polygon(0 4%, 100% 0, 100% 96%, 0 100%);
  pointer-events:none;
}
.about::before{
  inset:-42px 0 0 0;
  background:var(--gold);
  z-index:-1;
}
.about-depth{
  inset:-24px 0 -18px 18px;
  background:#6d3a8c;
  opacity:.9;
  z-index:-2;
  will-change:transform;
  clip-path:polygon(0 4%, 100% 0, 100% 96%, 0 100%);
}
.about .section-title{ color:var(--ink); }
.about .section-title .rule{ background:var(--ink); }
.about-left{ position:relative; z-index:1; max-width:480px; align-self:center; }
.about-left p{ font-size:16px; line-height:1.7; margin-top:22px; color:#2a2620; max-width:420px; font-weight:500; letter-spacing:0; }
.about-left .tagline{ font-weight:700; }
.btn-know{
  display:inline-flex; align-items:center; gap:14px; margin-top:30px;
  background:var(--ink); color:var(--cream); text-decoration:none;
  font-weight:800; letter-spacing:var(--ls-ui); font-size:13px;
  padding:14px 26px; border-radius:4px; transition:transform .2s, background .2s;
}
.btn-know:hover{ background:#000; transform:translateX(4px); }
.btn-know .arrow{ font-size:16px; }

.about-art{ position:relative; z-index:1; min-height:340px; }
.about-art::before{
  content:""; position:absolute; inset:-70px -70px -70px 4%;
  background:var(--cream-2);
  clip-path:polygon(16% 100%, 4% 8%, 100% 0, 100% 100%);
  z-index:0;
}
.about-art .about-obj{ position:absolute; will-change:auto; transform:scale(var(--doodle-layer-scale)); z-index:1; }
.about-art .fill{ fill:var(--ink); stroke:none; }
.about-art .chair-label{
  fill:var(--cream); stroke:none; font-family:'Avenir Next'; font-weight:800;
  font-size:13px; letter-spacing:1px; text-anchor:middle;
}
.about-art .fill-dark{ fill:var(--ink); }

/* =========================== GALLERY =========================== */
.gallery{ background:var(--cream-2); padding:60px 60px 80px; }
.gallery-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; }
.gallery-arrows{ display:none; gap:10px; }
.g-arrow{
  width:40px; height:34px; border:1px solid rgba(27,27,27,.25); background:var(--cream);
  border-radius:6px; font-size:20px; line-height:1; cursor:pointer; color:var(--ink);
  transition:background .2s, color .2s;
}
.g-arrow:hover{ background:var(--ink); color:var(--cream); }

.gallery-strip{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px 20px;
}

.gcard{ min-width:0; }
.gthumb{
  position:relative; width:100%; aspect-ratio:16 / 9; border-radius:8px; overflow:hidden;
  background:var(--ink);
  cursor:pointer; border:1px solid rgba(27,27,27,.08);
}
.gthumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.gplay{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.86);
  display:grid; place-items:center; transition:transform .2s, background .2s;
}
.gthumb:hover .gplay{ transform:translate(-50%,-50%) scale(1.12); background:#fff; }
.gplay::after{ content:""; width:0; height:0; border-left:14px solid var(--ink); border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px; }
.gdur{
  position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.7); color:#fff;
  font-size:11px; font-weight:600; padding:2px 7px; border-radius:4px; letter-spacing:.5px;
}
.gthumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.gcard h3{ font-size:14px; font-weight:800; letter-spacing:var(--ls-soft); margin:12px 0 3px; }
.gcard p{ font-size:12px; color:var(--muted); font-weight:500; letter-spacing:0; }

/* =========================== CONTACT =========================== */
.contact{
  position:relative; display:flex; justify-content:flex-start;
  min-height:760px; background:var(--cream);
}
.contact-left{ padding:100px 60px 625px; align-self:start; max-width:560px; text-align:left; }
.contact-left .section-title{ align-items:flex-start; }
.contact-left p{ margin-top:18px; line-height:1.7; color:var(--muted); font-size:15px; font-weight:500; letter-spacing:0; }
.contact-left .contact-kicker{
  color:var(--ink); font-weight:700; font-size:18px; letter-spacing:0;
}
.contact-email{
  display:inline-block;
  margin-top:18px;
  color:var(--ink);
  font-size:15px;
  line-height:1.7;
  font-weight:500;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.contact-email:hover{ color:var(--gold-d); }

.contact-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.field{
  position:relative; display:flex; align-items:center; gap:10px;
  border:1px solid rgba(242,168,41,.5); border-radius:8px; padding:0 14px;
  background:transparent;
}
.field.full{ width:100%; margin-bottom:20px; }
.field input, .field select, .field textarea{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--cream); font-family:inherit; font-size:13px; font-weight:600;
  letter-spacing:var(--ls-soft); padding:18px 0;
}
.field textarea{ resize:vertical; min-height:112px; padding:18px 0; }
.field.area{ align-items:flex-start; }
.field input::placeholder, .field textarea::placeholder{ color:#9a968d; }
.field select{ color:#9a968d; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; }
.field select option{ color:#111; }
.fi{ width:15px; height:15px; flex:none; opacity:.8; background-size:contain; background-repeat:no-repeat; }
.fi-user{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2a829' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.fi-mail{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2a829' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.fi-phone{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2a829' stroke-width='2'%3E%3Cpath d='M5 4h4l2 5-3 2a14 14 0 006 6l2-3 5 2v4a2 2 0 01-2 2A17 17 0 013 6a2 2 0 012-2z'/%3E%3C/svg%3E"); }
.fi-link{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2a829' stroke-width='2'%3E%3Cpath d='M10 14a4 4 0 005 0l3-3a4 4 0 00-6-6l-1 1'/%3E%3Cpath d='M14 10a4 4 0 00-5 0l-3 3a4 4 0 006 6l1-1'/%3E%3C/svg%3E"); }
.fi-down{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2a829' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); margin-left:auto; order:9; }
.field:has(select){ position:relative; }

.btn-send{
  display:block; margin:18px auto 0; background:var(--gold); color:var(--ink);
  border:none; border-radius:8px; padding:15px 50px; cursor:pointer;
  font-family:inherit; font-weight:800; letter-spacing:var(--ls-ui); font-size:14px;
  transition:background .2s, transform .2s;
}
.btn-send:hover{ background:var(--gold-d); transform:translateY(-2px); }
.btn-send .send-ic{ margin-left:8px; }

.site-footer{
  position:absolute; left:0; bottom:305px; width:44%;
  z-index:7; padding:0 60px; color:var(--cream);
  display:grid; gap:18px; pointer-events:auto;
}
.footer-brand img{
  width:min(160px, 58%); height:auto; display:block; filter:invert(1);
}
.footer-brand p{
  margin-top:16px; max-width:420px; color:rgba(247,243,231,.72);
  font-size:14px; line-height:1.65; font-weight:500; letter-spacing:0;
}
.footer-links{
  display:flex; flex-wrap:wrap; gap:12px 20px;
}
.footer-links a{
  color:var(--cream); text-decoration:none; font-size:12px; font-weight:800;
  letter-spacing:var(--ls-ui); text-transform:uppercase;
}
.footer-links a:hover{ color:var(--gold); }
.footer-copy{
  color:rgba(247,243,231,.58); font-size:12px; font-weight:500; letter-spacing:0;
}

/* ===================== DOODLE PHYSICS PILE ===================== */
.doodle-pile{
  position:absolute; left:0; right:0; bottom:0; height:585px;
  overflow:hidden; z-index:5;
  cursor:grab !important;
}
.doodle-pile *,
.doodle-pile *::before,
.doodle-pile *::after{
  cursor:grab !important;
}
.doodle-pile.is-grabbing,
.doodle-pile.is-grabbing *,
.doodle-pile.is-grabbing *::before,
.doodle-pile.is-grabbing *::after{
  cursor:grabbing !important;
}
.doodle{
  position:absolute; top:0; left:0; will-change:transform;
  cursor:grab; user-select:none;
}
.doodle:active{ cursor:grabbing; }
/* user's gear SVGs are black ink — invert to white for the dark pile */
.doodle img{ display:block; width:100%; height:100%; filter:invert(1); pointer-events:none; }

/* The left half of the contact row sits on cream, so darken only behind the dark form.
   The doodle pile spans the full width; give it a split background to match the mockup. */
.contact::after{
  content:""; position:absolute; left:0; bottom:0; height:585px; width:100%;
  background:var(--ink); z-index:1;
}
.doodle-pile{ z-index:6; }

/* =========================== RESPONSIVE =========================== */
@media (max-width:1600px){
  .hero-doodles{ --doodle-layer-scale:.9; }
  .about-art{ --doodle-layer-scale:.94; }
}
@media (max-width:1280px){
  .hero-doodles{ --doodle-layer-scale:.78; }
  .about-art{ --doodle-layer-scale:.86; }
}
@media (max-width:980px){
  /* stop absolutely-centering the links so they flow to the right of the
     (now smaller) logo instead of overlapping it */
  .hero-doodles{ --doodle-layer-scale:.68; }
  .about-art{ --doodle-layer-scale:.78; }
  .nav-links{ position:static; left:auto; top:auto; transform:none; gap:22px; margin-left:auto; }
}
@media (max-width:880px){
  .nav{ padding:12px 20px; }
  .about, .contact{ grid-template-columns:1fr; }
  .gallery-strip{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .about-art{ min-height:300px; }
  .contact{ min-height:auto; }
  .contact-left{ padding:72px 36px 585px; max-width:none; }
  .site-footer{ width:100%; bottom:305px; padding:0 36px; }
}
@media (max-width:680px){
  .hero{ padding-top:6px; }
  .hero-title{ margin-top:-80px; }
  .hero-tagline{ margin-left:0; max-width:92vw; font-size:19px; text-align:left; }
  .hero-doodles{ --doodle-layer-scale:.52; }
  .about-art{ --doodle-layer-scale:.68; }
  .nav-links{ gap:16px; }
  .nav-links a{ font-size:12px; letter-spacing:var(--ls-soft); }
  .social-rail{
    top:auto;
    bottom:14px;
    right:14px;
    display:flex;
    flex-direction:row;
    gap:8px;
  }
  .srail{ width:30px; height:30px; }
  .srail::before{ display:none; }

  /* Mobile hero doodle controls: edit top, left, width here only. */
  .hero-mobile-ai3{ top:55% !important; left:55% !important; width:150px !important; }
  .hero-mobile-ai5{ top:10% !important; left:13% !important; width:160px !important; }
  .hero-mobile-ring-mid{ top:13% !important; left:53% !important; width:46px !important; }
  
  .hero-mobile-note-small{ top:9% !important; left:39% !important; width:30px !important; }
  .hero-mobile-treble{ top:29% !important; left:13% !important; width:34px !important; }

  .hero-mobile-dot-grid{ top:25% !important; left:82% !important; width:92px !important; }
  .hero-mobile-wave{ top:40% !important; left:85% !important; width:120px !important; }

  .hero-mobile-reel{ top:60% !important; left:-20% !important; width:650px !important;opacity: 0.75 !important; }
  .hero-mobile-circle-top{ top:70% !important; left:0% !important; width:560px !important; opacity: 0.35 !important; }

  .hero-mobile-speaker-left{ top:68% !important; left:65% !important; width:170px !important; }
  .hero-mobile-speaker-right{ top:62% !important; left:75% !important; width:160px !important; }
  .hero-mobile-clapper{ top:18% !important; left:65% !important; width:170px !important; }
}
@media (max-width:480px){
  .nav{ padding:10px 14px; }
  .nav-links{ gap:11px; }
  .nav-links a{ font-size:10.5px; letter-spacing:.3px; }
  .nav-links a .dot{ display:none; }
}
@media (max-width:680px){
  .nav-links{ gap:16px; }
  .nav-links a{ font-size:12px; }
  .about{ gap:20px; padding:48px 24px 36px; }
  .about-left{ z-index:3; max-width:none; }
  .about-left p{ max-width:none; }
  .about-art{ z-index:1; min-height:280px; margin-top:0; }
  .about-art::before{ inset:-110px -24px -56px -24px; z-index:-1; }
  /* Mobile about doodle controls: edit each doodle separately here. */
  .about-mobile-light{ top:-12.5% !important; left:72% !important; width:150px !important; }
  .about-mobile-camera{ top:23% !important; left:50% !important; width:150px !important; }
  .about-mobile-tree{ top:65% !important; left:35% !important; width:64px !important; }
  .about-mobile-chair{ top:7% !important; left:10% !important; width:200px !important; }
  .about-mobile-mic{ top:50% !important; left:-5% !important; width:100px !important; }
  .about-mobile-treble{ top:35% !important; left:-15% !important; width:40px !important; }
  .about-mobile-note{ top:10% !important; left:100% !important; width:35px !important; }
  .about-mobile-accent{ top:50% !important; left:45% !important; width:84px !important; }
  .gallery, .contact-left{ padding-left:24px; padding-right:24px; }
  .contact{ justify-content:flex-start; }
  .contact-left{ margin-left:0; text-align:left; }
  .contact-left .section-title{ align-items:flex-start; }
  .contact-left p{ margin-left:0; }
  .gallery-strip{ grid-template-columns:1fr; gap:24px; }
  .contact-left{ padding-bottom:510px; }
  .site-footer{ bottom:255px; padding:0 24px; gap:14px; }
  .footer-brand img{ width:140px; }
  .footer-brand p{ font-size:13px; }
  .footer-links{ gap:10px 16px; }
  .doodle-pile, .contact::after{ height:480px; }
  .contact-form .row{ grid-template-columns:1fr; }
}