:root{
  --ink:#120a0f;
  --ink-2:#1c0f18;
  --ink-3:#271420;
  --paper:#f7f1e6;
  --paper-dim:#c9bfae;
  --marigold:#e8a33d;
  --amethyst:#8A1B87;
  --champagne:#e2d2ab;
  --rose:#e2495f;
  --gold-line:rgba(201,162,75,0.3);
  --max:1220px;
}


@font-face {
  font-family: 'MessinaSans-Book';
  src: url('fonts/MessinaSans-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* shows fallback text instantly, swaps in once loaded */
}
@font-face {
  font-family: 'CanelaText-RegularItalic';
  src: url('fonts/CanelaText-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NeueMontreal-Bold';
  src: url('fonts/NeueMontreal-Bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


*{box-sizing:border-box;}
html{
    scroll-behavior:smooth;
    scroll-snap-type:y proximity;
    cursor: none !important;
    user-select: none;

}

h1, h2, h3 {
    font-family: 'NeueMontreal-Bold', sans-serif !important;
    -webkit-font-smoothing:antialiased;
}

body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:'MessinaSans-Book',sans-serif; font-style: normal; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip;
}

/*image tag*/
img{max-width:100%; display:block;}

/*a tag*/
a{color:inherit; text-decoration:none;}

/*wrap tag*/
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/*accent text*/
.accent{font-family:'CanelaText-RegularItalic',serif; font-style:italic; font-weight:400; animation:
    heroGlow 2s ease-in-out 1.4s infinite;
    }

/*eyebrow text*/
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--marigold); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:7px;height:7px;border-radius:50%; background:var(--marigold); box-shadow:0 0 10px 2px var(--marigold);}

/* visually hidden but still readable by screen readers and search crawlers —
   use this for descriptive text that helps SEO/accessibility without
   disrupting the visual design */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

:focus-visible{outline:2px solid var(--marigold); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important;}
}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:999px;
  font-size:14px; font-weight:700; letter-spacing:.02em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{ background:var(--amethyst); color:var(--paper); box-shadow:0 6px 20px -4px rgba(0,0,0,0.5); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -4px rgba(0,0,0,.7); }
.btn-ghost{ border:1px solid rgba(247,241,230,.35); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--paper); background:rgba(247,241,230,.06); }






/* ---------- NAV ---------- */
header.site{ position:fixed; top:0; left:0; right:0; z-index:80; padding:18px 0; transition:background .3s ease, padding .3s ease; }
header.site.scrolled{ background:rgba(18,10,15,0.86); backdrop-filter:blur(10px); padding:12px 0; border-bottom:1px solid var(--gold-line); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; }
.logo img{ height: 70px; letter-spacing:-.01em; text-transform:uppercase; }
.logo span{ color:var(--marigold); }
nav.links{ display:none; gap:32px; font-size:14px; font-weight:600; color:var(--paper-dim); }
nav.links a:hover{ color:var(--paper); }
@media (min-width:860px){ nav.links{ display:flex; } }






/* ---------- PIN SECTIONS (hero / globe) ---------- */
.pin-section{ position:relative; height:200vh; height: 200dvh; scroll-snap-align:start; }
#globe.pin-section{ height:200vh; height: 200dvh; scroll-snap-align:start; }/* shorter scroll distance than hero */

.pin-inner{
  position:sticky; top:0; height:100vh; height: 100dvh; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center;
}
.pin-content{ position:relative; z-index:2; will-change:transform,opacity; }




/* HERO */
#hero .pin-inner{ background:linear-gradient(180deg,#150a10,#1a0c14 60%,#150a10); }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 55% at 25% 20%, rgba(167,95,206,.32), transparent 60%),
    radial-gradient(ellipse 55% 45% at 80% 15%, rgba(232,163,61,.26), transparent 60%);
}
.hero-media .placeholder-note{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(247,241,230,.16); font-size:12px; letter-spacing:.15em; text-transform:uppercase; text-align:center; padding:40px;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,10,15,.15) 0%, rgba(18,10,15,.65) 100%);
  z-index:1;
}

#hero h1{
    position: relative;
    z-index: 0;
  font-weight:900; font-size:clamp(120px,22vw,200px); line-height:.85; letter-spacing:-.02em; /*clamp to adjust font*/
  color:var(--paper);
}


@property --reveal {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

#hero .accent-text{
  position:absolute;
  left:50%; top:70%;
  transform:translate(-50%,-50%) rotate(-4deg);
  z-index:0;
  width:max(150%, 900px);
  text-align:center;
  font-size:clamp(30px,6vw,64px);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  color:var(--marigold);
  -webkit-text-stroke: 1px rgba(232,163,61,.9);
  text-stroke: 1px rgba(232,163,61,.9);
 
  /* "trim" reveal: masks the text so it draws on left-to-right */
  --reveal:0%;
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 var(--reveal), transparent var(--reveal));
  mask-image:linear-gradient(90deg, #000 0, #000 var(--reveal), transparent var(--reveal));
 
  animation:
    heroTrim 2.1s ease-in-out 0.2s forwards;
}

@keyframes heroTrim{
  to{ --reveal:100%; }
}

@keyframes heroGlow{
  0%, 100% { filter: drop-shadow(0 0 3px rgba(232,163,61,.5)) drop-shadow(0 0 4px rgba(232,163,61,.22)); }
  50% { filter: drop-shadow(0 0 3px rgba(232,163,61,.85)) drop-shadow(0 0 4px rgba(232,163,61,.4)); }
}

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:3;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-dim);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}

.scroll-cue .line{ width:1px;height:34px; background:linear-gradient(var(--paper-dim), transparent); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }





/* GLOBE */
#globe .pin-inner::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(300deg,#2D082B,var(--ink-2));
  background-size: 400% 400%;
  animation: gradient-animation 3s ease-in-out infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*{ background:var(--ink); }*/

#globeCanvas{ position:absolute; inset:0; margin:auto; z-index:1; opacity:.95; transform-origin:center; will-change:transform,opacity; }
#globe h2{
  font-weight:800; font-size:clamp(50px,6.4vw,78px); line-height:1.02; letter-spacing:-.01em; max-width:12ch; margin:0 auto;
  text-shadow:0 4px 40px rgba(18,10,15,.9);
}
#globe h2 .accent{ color:var(--marigold); font-size:1.1em; }




/* ---------- TICKER / MARQUEE ---------- */
section.brands{ padding:120px 0 60px; text-align:center; }
section.brands h2{ font-size:clamp(50px,4.5vw,80px); letter-spacing:-.01em; max-width:16ch; margin:0 auto 44px; }
.logo-ticker-wrap{ border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); padding:26px 0; overflow:hidden; white-space:nowrap; }
.logo-ticker{ display:inline-block; animation:ticker 30s linear infinite; }
.logo-ticker span{
  display:inline-flex; align-items:center; justify-content:center;
  margin:0 34px; font-weight:800; font-size:20px; letter-spacing:-.01em; color:var(--paper-dim); opacity:0.8;
}
.logo-ticker span img {height: 60px;}
section.brands .accent {color:var(--marigold);}
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }






/* ---------- HERE'S WHY ---------- */
section.why{ padding:100px 0; text-align:center; }
section.why h2{
  font-weight:900; font-size:clamp(56px,13vw,150px); line-height:.88; letter-spacing:-.02em; text-transform:uppercase;
}
section.why h2 .accent{ display:block; color:var(--marigold); font-size:.55em; text-transform:none; letter-spacing:0; }
.why-grid{ margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:left; }
@media (max-width:820px){ .why-grid{ grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; } }
.why-item{ padding-top:20px; border-top:1px solid var(--gold-line); }
.why-item .n{ font-weight:900; font-size:13px; color:var(--marigold); letter-spacing:.1em; }
.why-item h3{ font-weight:800; font-size:20px; margin:12px 0 8px; }
.why-item p{ font-size:14.5px; color:var(--paper-dim); line-height:1.6; margin:0; }





/* ---------- SECTION GENERIC ---------- */
section, footer{
    padding:96px 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;}

.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-weight:900; font-size:clamp(32px,5vw,54px); margin-top:16px; line-height:1.02; letter-spacing:-.01em; }
.section-head p{ color:var(--paper-dim); margin-top:16px; font-size:16px; line-height:1.6; }
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }





/* ---------- VIDEO SHOWCASE ---------- */
.video-grid{ display:grid; grid-template-columns:repeat(2,2fr); gap:18px; }
@media (max-width:900px){ .video-grid{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } }
.video-card{
  border-radius:16px; overflow:hidden; aspect-ratio:16/9; position:relative;
  background:linear-gradient(160deg, var(--ink-3), var(--ink-2)); border:1px solid rgba(247,241,230,.08);
}
.video-card .ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(247,241,230,.25); font-size:12px; letter-spacing:.1em; text-align:center; padding:0px; text-transform:uppercase;
}
video-card .yt-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-card iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-facade{ cursor:pointer; }
.yt-facade:hover .play{ background:rgba(232,163,61,.85); border-color:rgba(232,163,61,.85); }
.video-card .play{
  position:absolute; left:16px; bottom:16px; width:42px;height:42px; border-radius:50%;
  background:rgba(247,241,230,.12); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(247,241,230,.25);
}
.video-card .play svg{ width:14px;height:14px; fill:var(--paper); margin-left:2px; }
.video-more{ text-align:center; margin-top:36px; }





/* ---------- TESTIMONIALS ---------- */
.testi-list{ display:flex; flex-direction:column; gap:0; }
.testi{
  padding:50px 0; border-top:1px solid var(--gold-line); display:grid; grid-template-columns:1fr 260px; gap:40px; align-items:center;
}
.testi:last-child{ border-bottom:1px solid var(--gold-line); }
@media (max-width:760px){ .testi{ grid-template-columns:1fr; gap:16px; } }
.testi p{ font-family:'CanelaText-RegularItalic',serif; font-style: italic; font-size:clamp(20px,2.6vw,28px); line-height:1.4; color:var(--paper); }
.testi .who{ font-size:13px; color:var(--paper-dim); }
.testi .who b{ display:block; color:var(--paper); font-weight:800; font-size:14px; margin-bottom:3px; }







/* ---------- CONTACT ---------- */
section.contact{ padding:120px 0; }
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:48px; } }
.contact-head h2{ font-weight:900; font-size:clamp(44px,8vw,90px); line-height:.92; letter-spacing:-.02em; text-transform:uppercase; }
.contact-head p{ color:var(--paper-dim); margin-top:18px; font-size:16px; max-width:38ch; }
.contact-details{ max-width: 300px;margin-top:36px; display:flex; flex-direction:column; gap:14px; }
.contact-details img{height: 20px; width: 20px;}
.contact-details a{display:flex; gap:8px; font-weight:600; font-size:16px; }
.contact-details a:hover{ color:var(--marigold); }
form.contact-form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim); }
.field input, .field select, .field textarea{
  background:var(--ink-2); border:1px solid rgba(247,241,230,.14); border-radius:10px;
  padding:13px 14px; color:var(--paper); font-family:'MessinaSans-Book',sans-serif; font-size:15px; outline:none;
  transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--marigold); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
form.contact-form button{ margin-top:6px; align-self:flex-start; border:none; cursor:pointer; }
.form-note{ font-size:12px; color:rgba(247,241,230,.4); margin-top:4px; }
.form-status{ font-size:14px; font-weight:600; min-height:20px; }
.form-status.success{ color:var(--marigold); }
.form-status.error{ color:var(--rose); }
.form-status.sending{ color:var(--paper-dim); }

/* ---------- FOOTER ---------- */
footer{ padding:56px 0 32px; border-top:1px solid var(--gold-line); }
.foot-row{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; }
.foot-links{ display:flex; gap:24px; font-size:13px; color:var(--paper-dim); }
.foot-social{ display:flex; gap:16px; font-size:13px; }
.copyright{ margin-top:32px; font-size:12px; color:rgba(247,241,230,.35); text-align:center; }


/* ---------- CUSTOM CURSOR ---------- */
.cursor-glow, .cursor-dot{
  position:fixed;
  top:0; left:0;
  pointer-events:none;
  z-index:9999;
  opacity:0;
  /* positioning is transform-only (no margins) — Safari can desync a
     margin-based offset from a per-frame transform update, causing jitter */
  transform:translate3d(-50%,-50%,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:opacity .3s ease, width .35s ease, height .35s ease, background .35s ease;
}
.cursor-glow{
  width:340px; height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,163,61,.18), rgba(167,95,206,.09) 45%, transparent 72%);
  filter:blur(6px);
  will-change:transform;
}
.cursor-glow.active{ opacity:1; }
.cursor-glow.hover-target{
  width:220px; height:220px;
  background:radial-gradient(circle, rgba(226,73,95,.32), rgba(232,163,61,.16) 45%, transparent 72%);
}
/* lets --dot-scale transition smoothly, independent of the position
   transform which JS updates every frame with no transition (must stay instant) */
@property --dot-scale{
  syntax:'<number>';
  inherits:false;
  initial-value:1;
}
.cursor-dot{
  --dot-scale:1;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--paper);
  will-change:transform;
  transition:opacity .3s ease, background .2s ease, --dot-scale .2s ease;
}
.cursor-dot.active{ opacity:1; }
.cursor-dot.hover-target{
  --dot-scale:2.4;
  background:var(--marigold);
}
 
/* glow highlight on whichever element is currently hovered */
.glow-target{ transition:box-shadow .3s ease, border-color .3s ease; }
.glow-target.is-glowing{
  box-shadow:0 0 0 1px rgba(232,163,61,.45), 0 0 34px -4px rgba(232,163,61,.5);
}
 
/* plain text links (nav, footer, inline "watch" links) glow the text itself
   instead of getting a box-shadow — a box hugs inline text as an ugly rectangle */
.text-glow-target{ transition:color .3s ease, text-shadow .3s ease; }
.text-glow-target.is-glowing{
  color:var(--marigold);
  text-shadow:0 0 12px rgba(232,163,61,.65), 0 0 30px rgba(232,163,61,.32);
}
 
/* only enable on devices with a real mouse — touch devices keep their native tap behavior */
@media (hover:none), (pointer:coarse){
  .cursor-glow, .cursor-dot{ display:none !important; }
}
body.custom-cursor-active, body.custom-cursor-active *{
  cursor:none !important;
}

/* ---------- STICKY MOBILE BAR ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; gap:10px; padding:12px 16px;
  background:rgba(18,10,15,.92); backdrop-filter:blur(10px); border-top:1px solid var(--gold-line);
  transform:translateY(120%); transition:transform .35s ease;
}
.mobile-bar.show{ transform:translateY(0); display: none; }
.mobile-bar .btn{ flex:1; justify-content:center; }
@media (min-width:860px){ .mobile-bar{ display:none; } }