/* ══════════════════════════════════════════════════════════
   TIME & SPACE — BASE STYLESHEET
   Shared across every page: reset, variables, typography,
   cursor, grain, nav, footer, buttons, scroll-reveal utility
   classes. Page-specific styles live in css/<page>.css
══════════════════════════════════════════════════════════ */

:root {
  --dark:       #171717;
  --dark-2:     #1e1e1e;
  --dark-3:     #232323;
  --light:      #F8F8F8;
  --teal:       #6BC1B7;
  --teal-a08:   rgba(107,193,183,0.08);
  --teal-a15:   rgba(107,193,183,0.15);
  --teal-a20:   rgba(107,193,183,0.20);
  --teal-a50:   rgba(107,193,183,0.50);
  --gold:       #ffffff;
  --gold-a20:   rgba(200,169,110,0.20);

  --font-head:  'Cormorant Garamond', serif;
  --font-body:  'DM Mono', monospace;

  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-pop:   cubic-bezier(.34,1.56,.64,1);
}

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

html { scroll-behavior:smooth; }

html, body {
  width:100%;
  background:var(--dark);
  color:var(--light);
  font-family:var(--font-body);
}

body {
  overflow-x:hidden;
}

body.loaded { cursor:none; }
@media (pointer:coarse) { body.loaded { cursor:auto; } }

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }
ul { list-style:none; }

::selection { background:var(--teal); color:var(--dark); }

/* ══════════════════════════════════════
   NOISE GRAIN OVERLAY
══════════════════════════════════════ */
.grain {
  position:fixed; inset:0; pointer-events:none; z-index:9000;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.028;
}

/* ══════════════════════════════════════
   CUSTOM CURSOR
══════════════════════════════════════ */
#cur-o, #cur-i {
  position:fixed; border-radius:50%; pointer-events:none;
  z-index:9999; transform:translate(-50%,-50%);
  transition:opacity .4s;
}
#cur-o {
  width:42px; height:42px;
  border:1px solid var(--teal);
  transition:transform .6s var(--ease-out), border-color .3s;
  opacity:.75;
}
#cur-i {
  width:calc(42px / 1.618); height:calc(42px / 1.618);
  background:var(--teal); opacity:.9;
  transition:transform .12s ease, background .3s;
}
.cursor-hover #cur-o { transform:translate(-50%,-50%) scale(1.7); border-color:var(--gold); }
.cursor-hover #cur-i { transform:translate(-50%,-50%) scale(0.4); background:var(--gold); }
@media (pointer:coarse) { #cur-o, #cur-i { display:none; } }

/* ══════════════════════════════════════
   PAGE TRANSITION — spiral wipe between pages
   Hidden by default; only made visible via the
   .pt-visible class (added inline on non-home pages
   to prevent a flash, or by js/transitions.js).
══════════════════════════════════════ */
.page-transition {
  position:fixed; inset:0; z-index:9700;
  background:var(--dark);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
}
.page-transition.pt-visible { opacity:1; pointer-events:all; }
.pt-ring {
  position:absolute; border-radius:50%; opacity:0;
  transform:scale(0.4);
  border:1px solid var(--teal-a50);
}
.pt-ring-1 { width:46px; height:46px; }
.pt-ring-2 { width:104px; height:104px; border-color:var(--teal-a20); }
.pt-ring-3 { width:176px; height:176px; border-color:var(--teal-a08); }
.pt-dot {
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--teal); opacity:0; box-shadow:0 0 18px 2px var(--teal-a50);
}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:50%; width:100%; z-index:900;
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,48px);
  border-radius:0;
  border:1px solid transparent;
  transition:padding .5s var(--ease-out), background .5s ease, border-color .5s ease,
             width .5s var(--ease-out), top .5s var(--ease-out), border-radius .5s var(--ease-out),
             box-shadow .5s ease;
}
/* "Dynamic Island" — once you start scrolling, the full-width bar
   contracts into a small floating, rounded pill centered at the top,
   rather than just tinting a full-width strip. */
.nav.scrolled {
  top:14px;
  width:min(94vw, 1120px);
  padding:11px clamp(16px,2.4vw,26px);
  background:rgba(23,23,23,0.86);
  backdrop-filter:blur(14px);
  border:1px solid var(--teal-a15);
  border-radius:999px;
  box-shadow:0 16px 44px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.2);
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo img { height:46px; width:auto; opacity:.92; transition:opacity .3s, height .4s var(--ease-out); }
.nav-logo:hover img { opacity:1; }
.nav.scrolled .nav-logo img { height:32px; }

.nav-links {
  display:flex; align-items:center; gap:clamp(20px,3vw,42px);
  transition:gap .5s var(--ease-out);
}
.nav.scrolled .nav-links { gap:clamp(16px,2vw,28px); }
.nav-links a {
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--light); opacity:.55; position:relative; padding-bottom:4px;
  transition:opacity .3s ease;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--teal); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.nav-links a:hover, .nav-links a.active { opacity:1; }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }

.nav-cta {
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal); border:1px solid var(--teal-a50);
  padding:9px 20px; position:relative; overflow:hidden;
  transition:color .35s, border-color .35s, padding .5s var(--ease-out);
}
.nav.scrolled .nav-cta { padding:7px 16px; }
.nav-cta::before {
  content:''; position:absolute; inset:0; background:var(--teal);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out); z-index:-1;
}
.nav-cta:hover::before { transform:scaleX(1); }
.nav-cta:hover { color:var(--dark); border-color:var(--teal); }

.nav-burger {
  display:none; flex-direction:column; gap:5px; width:26px; z-index:1100;
}
.nav-burger span {
  display:block; width:100%; height:1px; background:var(--light);
  transition:transform .35s var(--ease-out), opacity .3s;
}
body.menu-open .nav-burger span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity:0; }
body.menu-open .nav-burger span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position:fixed; inset:0; background:var(--dark); z-index:1050;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:32px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s ease, visibility .5s ease;
}
body.menu-open .mobile-menu { opacity:1; visibility:visible; pointer-events:auto; }
.mobile-menu a {
  font-family:var(--font-head); font-size:32px; font-weight:300; color:var(--light);
  opacity:.8; transition:opacity .3s, color .3s;
}
.mobile-menu a:hover, .mobile-menu a.active { opacity:1; color:var(--teal); }

@media (max-width:860px) {
  .nav-links, .nav-cta { display:none; }
  .nav-burger { display:flex; }
}

/* ══════════════════════════════════════
   SECTION / TYPOGRAPHY UTILITIES
══════════════════════════════════════ */
.section {
  position:relative; width:100%;
  padding:clamp(90px,14vh,150px) clamp(20px,6vw,80px);
}
.section-inner { max-width:1280px; margin:0 auto; }

.eyebrow {
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--teal); opacity:.75; margin-bottom:18px;
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before {
  content:''; width:28px; height:1px; background:var(--teal); opacity:.6;
}

h1, h2, h3, h4 { font-family:var(--font-head); font-weight:300; line-height:1.05; text-wrap:balance; }
.h-xl  { font-size:clamp(38px,6.4vw,84px); letter-spacing:.01em; }
.h-lg  { font-size:clamp(30px,4.4vw,56px); letter-spacing:.01em; }
.h-md  { font-size:clamp(22px,2.6vw,32px); }
h2 em, h1 em, h3 em { color:var(--teal); font-style:italic; }

.body-text {
  font-size:14px; line-height:1.9; font-weight:300; opacity:.62; max-width:560px;
}

.divider {
  display:flex; align-items:center; gap:16px;
}
.divider::before, .divider::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--teal-a50), transparent);
}
.divider-phi {
  font-family:var(--font-head); font-style:italic; font-size:13px; color:var(--teal); opacity:.8;
}

/* Buttons / links */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px clamp(28px,4vw,44px);
  border:1px solid var(--teal-a50); color:var(--teal);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  position:relative; overflow:hidden; transition:color .35s, border-color .35s;
}
.btn::before {
  content:''; position:absolute; inset:0; background:var(--teal);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out); z-index:-1;
}
.btn:hover::before { transform:scaleX(1); }
.btn:hover { color:var(--dark); border-color:var(--teal); }

.link-arrow { display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); }
.link-arrow svg { transition:transform .35s var(--ease-out); }
.link-arrow:hover svg { transform:translateX(6px); }

/* GSAP scroll-reveal base state (JS adds .is-visible on trigger) */
.reveal { opacity:0; transform:translateY(36px); }
.reveal-up   { opacity:0; transform:translateY(50px); }
.reveal-fade { opacity:0; }
.reveal-scale{ opacity:0; transform:scale(.94); }

/* ══════════════════════════════════════
   WORD-BY-WORD TEXT REVEAL
   .split-words elements have their text wrapped
   (by js/split-text.js) into .word > .word-inner spans.
   The element itself is always visible — only the
   individual words animate in.
══════════════════════════════════════ */
.split-words .word {
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:0.22em; margin-bottom:-0.22em; /* room for descenders under the mask */
}
.split-words .word-inner {
  display:inline-block; transform:translateY(112%); opacity:0;
  will-change:transform, opacity;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer {
  position:relative; padding:clamp(70px,10vh,110px) clamp(20px,6vw,80px) 30px;
  border-top:1px solid var(--teal-a08);
}
.footer-grid {
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:1.3fr 0.85fr 0.85fr 0.95fr 0.8fr; gap:32px;
  padding-bottom:60px;
}
.footer-brand { display:flex; flex-direction:column; gap:22px; max-width:320px; }
.footer-brand img { height:88px; width:auto; margin-left:-4px; }
.footer-brand-sub { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); opacity:.7; }
.footer-tagline { font-size:12px; line-height:1.8; opacity:.5; font-weight:300; }
.footer-col-title {
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--teal);
  opacity:.7; margin-bottom:18px;
}
.footer-col a, .footer-col p {
  display:block; font-size:12.5px; line-height:2.4; opacity:.55; font-weight:300;
  transition:opacity .3s, color .3s;
}
.footer-col a:hover { opacity:1; color:var(--teal); }
.footer-bottom {
  max-width:1320px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  padding-top:26px; border-top:1px solid var(--teal-a08);
  font-size:10px; letter-spacing:.08em; opacity:.35; flex-wrap:wrap; gap:12px;
}
.footer-bottom-tagline { text-transform:uppercase; letter-spacing:.12em; text-align:right; }
.footer-socials { display:flex; gap:18px; }
.footer-socials a { opacity:.5; transition:opacity .3s, color .3s; }
.footer-socials a:hover { opacity:1; color:var(--teal); }

@media (max-width:980px) {
  .footer-grid { grid-template-columns:1fr 1fr 1fr; row-gap:36px; }
  .footer-brand { grid-column:1 / -1; max-width:420px; }
}
@media (max-width:640px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:420px) {
  .footer-grid { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════
   BRAND / CLIENT LOGO MARQUEE
══════════════════════════════════════ */
.marquee {
  width:100%; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display:flex; align-items:center; gap:clamp(50px,7vw,90px);
  width:max-content; animation:marqueeScroll 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track img {
  height:26px; width:auto; opacity:.42; filter:grayscale(1) brightness(1.6);
  transition:opacity .35s ease;
}
.marquee-track img:hover { opacity:.9; }
@keyframes marqueeScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ══════════════════════════════════════
   PAGE INTRO (non-home pages)
══════════════════════════════════════ */
.page-hero {
  position:relative; padding:clamp(160px,26vh,240px) clamp(20px,6vw,80px) clamp(60px,10vh,100px);
  overflow:hidden;
}
.page-hero-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.page-hero-content { position:relative; z-index:2; max-width:900px; }

/* Scrollbar (webkit) — subtle brand touch */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:var(--teal-a20); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--teal-a50); }