/* ==================================================
   GLOBAL — loads on every page
   ================================================== */


/* ==================================================
   VIEW TRANSITIONS
   ================================================== */

@view-transition {
  navigation: auto;
}

/* --- Root: full-page cross-fade ------------------- */
::view-transition-old(root) {
  animation: vt-fade-out 0.3s ease-in forwards;
}
::view-transition-new(root) {
  animation: vt-fade-in 0.3s ease-out forwards;
}

/* --- Keyframes ------------------------------------ */
@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vt-title-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes vt-title-in {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}


/* ==================================================
   DESIGN TOKENS
   ================================================== */

:root {
  /* ─── Colors ─────────────────────────────────── */
  --color-white:      #FFFEFA;
  --color-black:      #1A1A1A;
  --color-med-grey:   #888888;
  --color-dark-grey:  #5D5D5D;
  --color-light-grey: #E7E7E7;
  --color-pale-grey:  #F6F6F6;

  /* ─── Typography ─────────────────────────────── */
  --font-sans:              'Inter Tight', sans-serif;
  --font-serif:             'Lora', serif;
  --font-weight-heading:    600;
  --font-weight-display:    700;
  --line-height-heading:    1.10;
  --line-height-display:    1.05;

  /* ─── Fluid font scale ───────────────────────── */
  --fs-xs: clamp(0.84rem, 0.36vi + 0.6rem, 1.18rem);
--fs-sm: clamp(0.92rem, 0.5vi + 0.64rem, 1.43rem);
--fs-base: clamp(1.1rem, 0.67vi + 0.68rem, 1.75rem);
--fs-md: clamp(1.18rem, 0.89vi + 0.71rem, 2.13rem);
--fs-lg: clamp(1.35rem, 1.16vi + 0.74rem, 2.6rem);
--fs-xl: clamp(1.51rem, 1.51vi + 0.76rem, 3.12rem);
--fs-xxl: clamp(1.72rem, 1.95vi + 0.75rem, 3.88rem);
--fs-xxxl: clamp(1.97rem, 2.5vi + 0.73rem, 4.73rem);
--fs-xxxxl: clamp(2.22rem, 3.19vi + 0.67rem, 5.77rem);
--fs-xxxxxl: clamp(2.58rem, 4.05vi + 0.56rem, 7.04rem);
--fs-xxxxxxl: clamp(2.88rem, 5.12vi + 0.4rem, 8.59rem);
--fs-xxxxxxxl: clamp(3.25rem, 6.45vi + 0.16rem, 10.48rem);

  /* ─── Raw spacing scale ──────────────────────── */
  --n-0:   0rem;
  --n-4:   0.25rem;
  --n-8:   0.5rem;
  --n-16:  1rem;
  --n-24:  1.5rem;
  --n-32:  2rem;
  --n-48:  3rem;
  --n-56:  3.5rem;
  --n-64:  4rem;
  --n-72:  4.5rem;
  --n-88:  5.5rem;
  --n-104: 6.5rem;
  --n-136: 8.5rem;
  --n-160: 10rem;
  --n-192: 12rem;
  --n-256: 16rem;
  --n-272: 17rem;
  --n-288: 18rem;
  --n-320: 20rem;

  /* ─── Gap system (fluid, semantic) ──────────── */
  --gap-xs:   var(--n-4);
  --gap-sm:   clamp(var(--n-8),  1vw,  var(--n-8));
  --gap-base: clamp(var(--n-16), 1.5vw, var(--n-16));
  --gap-md:   clamp(var(--n-16), 3vw,  var(--n-64));
  --gap-lg:   clamp(var(--n-24), 4vw,  var(--n-72));
  --gap-xl:   clamp(var(--n-32), 5vw,  var(--n-88));
  --gap-2xl:  clamp(var(--n-48), 6vw,  var(--n-136));
  --gap-3xl:  clamp(var(--n-56), 7vw,  var(--n-160));
  --gap-4xl:  clamp(var(--n-64), 8vw,  var(--n-192));
  --gap-5xl:  clamp(var(--n-72), 9vw,  var(--n-256));
  --gap-6xl:  clamp(var(--n-88), 10vw, var(--n-272));

  /* ─── Padding system (fluid, semantic) ───────── */
  --pad-xs:      var(--n-4);
  --pad-sm:      clamp(var(--n-8),  1vw,  var(--n-8));
  --pad-base:    clamp(var(--n-16), 1.5vw, var(--n-16));
  --pad-md:      clamp(var(--n-32), 3vw,  var(--n-64));
  --pad-lg:      clamp(var(--n-32), 4vw,  var(--n-72));
  --pad-xl:      clamp(var(--n-48), 5vw,  var(--n-88));
  --pad-2xl:     clamp(var(--n-64), 6vw,  var(--n-136));
  --pad-3xl:     clamp(var(--n-72), 7vw,  var(--n-160));
  --pad-4xl:     clamp(var(--n-88), 9vw,  var(--n-192));
  --pad-5xl:     clamp(var(--n-104), 10vw, var(--n-256));
  --pad-6xl:     clamp(var(--n-136), 11vw, var(--n-288));
  --pad-7xl:     clamp(var(--n-160), 12vw, var(--n-320));
  --pad-8xl:     clamp(var(--n-256), 20vw, var(--n-320));
  --pad-section: clamp(var(--n-48), 6vw,  var(--n-160));
}


/* ==================================================
   BASE
   ================================================== */

html {
  font-size: 16px;
  line-height: 1.60;
  font-family: 'Inter', sans-serif !important;
}

body {
  overflow-x: hidden;
}

body, p, li {
  font-size: var(--fs-base);
  line-height: 1.60;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
}


/* ==================================================
   TYPOGRAPHY
   ================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading) !important;
  letter-spacing: var(--letter-spacing-heading);
}

h1 { font-size: var(--fs-xxxxxxl); }
h2 { font-size: var(--fs-xxxxxl); }
h3 { font-size: var(--fs-xxxxl); }
h4 { font-size: var(--fs-xxxl); }
h5 { font-size: var(--fs-xxl); }
h6 { font-size: var(--fs-xl); }

/* .display — Lora swap, no size override */
.display .elementor-heading-title {
  font-family: var(--font-serif) !important;
  font-weight: var(--font-weight-display) !important;
  line-height: var(--line-height-display) !important;
  letter-spacing: 0;
}

/* Size variants — combine with .display for Lora, or use alone */
.display-2xl .elementor-heading-title { font-size: var(--fs-xxxxxxxl); line-height: var(--line-height-display) !important;}
.display-xl .elementor-heading-title  { font-size: var(--fs-xxxxxxl); line-height: var(--line-height-display) !important; }
.display-lg .elementor-heading-title  { font-size: var(--fs-xxxxxl); line-height: var(--line-height-display) !important; }
.display-md .elementor-heading-title  { font-size: var(--fs-xxxxl); line-height: var(--line-height-display) !important;}
.display-sm .elementor-heading-title  { font-size: var(--fs-xxxl); line-height: var(--line-height-display) !important; }

/* .display-heading — GSAP SplitText hook, fixed size */
.display-heading .elementor-heading-title {
  font-family: var(--font-serif) !important;
  font-weight: var(--font-weight-display) !important;
  line-height: var(--line-height-display) !important;
  letter-spacing: 0;
  font-size: var(--fs-xxxxxxxl);
  visibility: hidden; /* revealed by GSAP */
}
.display-heading .elementor-heading-title .ts-line {
  overflow: hidden;
  padding-bottom: 0.5em;
  margin-bottom: -0.4em;
}
.display-heading .elementor-heading-title .split-word {
  will-change: transform, opacity;
}
.gsap-cta-reveal .cta-split-word {
  padding-bottom: 0.4em;
  margin-bottom: -0.4em;
  padding-inline: 0.05em;
  margin-inline: -0.05em;
}
.gsap-cta-reveal .cta-split-inner {
  will-change: transform, opacity;
}

/* Font size utilities */
.text-xs,        .text-xs p        { font-size: var(--fs-xs);  line-height: 1.60; }
.text-sm,        .text-sm p        { font-size: var(--fs-sm);  line-height: 1.60; }
.text-base,      .text-base p      { font-size: var(--fs-base); line-height: 1.60; }  
.text-md,        .text-md p        { font-size: var(--fs-md);  line-height: 1.60; }
.text-lg,        .text-lg p        { font-size: var(--fs-lg);  line-height: 1.60; }

.text-sm-medium, .text-sm-medium p { font-size: var(--fs-sm);  font-weight: 500; line-height: 1.60; }
.text-base-medium, .text-base-medium p { font-size: var(--fs-base); font-weight: 500; line-height: 1.60; }
.text-md-medium, .text-md-medium p { font-size: var(--fs-md);  font-weight: 500; line-height: 1.60; }
.text-lg-medium, .text-lg-medium p { font-size: var(--fs-lg);  font-weight: 500; line-height: 1.60; }

.text-sm-bold,   .text-sm-bold p   { font-size: var(--fs-sm);  font-weight: 700; line-height: 1.60; }
.text-base-bold, .text-base-bold p {font-size: var(--fs-base); font-weight: 700; line-height: 1.60; }
.text-md-bold,   .text-md-bold p   { font-size: var(--fs-md);  font-weight: 700; line-height: 1.60; }
.text-lg-bold,   .text-lg-bold p   { font-size: var(--fs-lg);  font-weight: 700; line-height: 1.60; }

.text-display    { font-size: var(--fs-xxxxxxl); font-weight: 700; line-height: 1.04; }
.text-heading-lg { font-size: var(--fs-xxxxxl);  font-weight: 700; line-height: 1.04; }




/* ==================================================
   NAVIGATION
   ================================================== */

.nav-section { padding-block: var(--pad-md); } /*not sure in use */

.top-nav .elementor-nav-menu li > a {
  position: relative;
  text-decoration: none;
  font-weight: 500 !important;
  font-size: var(--fs-sm);
}

.nav-underline .elementor-nav-menu li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -0.05em;
  height: 2px;
  background-color: var(--color-med-grey);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
.nav-underline .elementor-nav-menu a:hover::after,
.nav-underline .elementor-nav-menu a.elementor-item-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.elementor-widget-off-canvas {
  --e-off-canvas-animation-duration: 0.8s;
  --e-off-canvas-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-underline-footer .elementor-nav-menu li > a { display: inline-block; }
.nav-underline-footer .elementor-nav-menu li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -0.08em;
  height: 2px;
  background-color: var(--color-white);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
.nav-underline-footer .elementor-nav-menu a:hover::after,
.nav-underline-footer .elementor-nav-menu a.elementor-item-active::after {
  transform: scaleX(1);
  transform-origin: left;
  display: inline-block;
}

.nav-logo img {
  width: clamp(210px, 12vw, 280px);
  height: auto;
}


/* ==================================================
   BUTTONS & CTAs
   ================================================== */

.pl-cta-btn a {
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  text-decoration: none;
  background-color: var(--color-black);
  border: 1px solid var(--color-black);
  color: var(--color-white);
  padding: 8px 32px;
  border-radius: var(--n-88);
  transition: background-color 0.3s ease, color 0.3s ease;
  &:hover {
    background-color: var(--color-white);
    color: var(--color-black);
  }
}

/* Size modifiers — only override font-size and padding */
.pl-cta-btn--md a {
  font-size: var(--fs-base) !important;
  padding: 12px 56px;
}

.pl-cta-btn--lg a {
  font-size: var(--fs-base) !important;
  padding: 14px 64px;
}


/* link styles */
.work-link a {
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.in-page-link, .in-page-link a {
  text-decoration: underline !important;
  text-underline-offset: 0.5em;
  text-decoration-thickness: 2px;
}


/* ==================================================
   UTILITIES
   ================================================== */

/* Spacers */
.spacer-8xl  { height: var(--pad-8xl);  display: block; }
.spacer-7xl  { height: var(--pad-7xl);  display: block; }
.spacer-6xl  { height: var(--pad-6xl);  display: block; }
.spacer-5xl  { height: var(--pad-5xl);  display: block; }
.spacer-4xl  { height: var(--pad-4xl);  display: block; }
.spacer-3xl  { height: var(--pad-3xl);  display: block; }
.spacer-2xl  { height: var(--pad-2xl);  display: block; }
.spacer-xl   { height: var(--pad-xl);   display: block; }
.spacer-lg   { height: var(--pad-lg);   display: block; }
.spacer-md   { height: var(--pad-md);   display: block; }
.spacer-base { height: var(--pad-base); display: block; }
.spacer-sm   { height: var(--pad-sm);   display: block; }
.spacer-xs   { height: var(--pad-xs);   display: block; }
.padding-0   { padding-block: 0; display: block; }

/* ─── Responsive visibility utilities ────────────────────────────────────
   Two independent axes — do not mix them:

   AXIS 1 — Input capability  (.show-desktop / .show-mobile)
     Detects mouse vs touch input, not viewport width.
     Use for GPU-heavy content (Unicorn Studio canvases) where a narrow
     desktop window should still get the canvas, and a phone should not.
     Signal: (hover: hover) and (pointer: fine) = mouse/trackpad device.
     Reference: PL - prototype/unicorn-canvas-dynamic-load.md

   AXIS 2 — Viewport width  (.show-laptop-up / .show-tablet / .hide-*)
     Breakpoints match Elementor settings exactly:
       767px  = Mobile Portrait
       880px  = Mobile Landscape
      1024px  = Tablet Portrait
      1200px  = Tablet Landscape  ← .show-laptop-up / .show-tablet boundary
      1900px  = Laptop
      2380px  = Widescreen
     Use for layout switches where aspect ratio or screen real estate matters.

   All use !important to override Elementor stylesheet specificity.
   ──────────────────────────────────────────────────────────────────── */

/* AXIS 1 — Input capability
   Default: mouse/trackpad device (desktop-first).
   Flipped to mobile on touch/coarse-pointer devices.              */
.show-desktop { display: block !important; }
.show-mobile  { display: none  !important; }

@media (hover: none), (pointer: coarse) {
  .show-desktop { display: none  !important; }
  .show-mobile  { display: block !important; }
}

/* AXIS 2 — Viewport width
   show-tablet:    visible on tablet-landscape and below (≤ 1200px)
   show-laptop-up: visible on laptop and above (> 1200px)           */
.show-tablet    { display: none  !important; }
.show-laptop-up { display: block !important; }

@media (max-width: 1200px) {
  .show-laptop-up { display: none  !important; }
  .show-tablet    { display: block !important; }
}

@media (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}

@media (max-width: 880px) {
  .hide-mobile-landscape { display: none !important; }
}

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}


/* ==================================================
   MEDIA
   ================================================== */

.square-image img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.portrait-image img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.full-width-media img { width: 100%; height: auto; }
.full-width-media video { height: auto !important; }

@media (min-width: 2380px) {
  .full-width-media img,
  .full-width-media video {
    max-width: clamp(75vw, 2342px, 2342px);
    margin-inline: auto;
  }
}

.hover-zoom { overflow: hidden; }
.hover-zoom img,
img.hover-zoom {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
  transition: transform 800ms ease;
  will-change: transform;
}
.hover-zoom:hover img,
img.hover-zoom:hover { transform: scale(1.03); }


/* ==================================================
   FOOTER
   ================================================== */

.footer-section {

/*   padding-bottom: var(--pad-md); */
  padding-top: 4vw;
  padding-bottom: 3vw;
}

.footer-logo, .footer-logo img {
  width: 100%;
  max-width: clamp(75vw, 2342px, 100%);
  margin-inline: auto;
  display:block;
}



/* ==================================================
   CUSTOM CURSOR
   ================================================== */

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  padding: 14px 24px;
  border-radius: var(--n-16);
  background-color: var(--color-pale-grey);
  pointer-events: none;
  user-select: none;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  will-change: transform;
}

.custom-cursor__text {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-black);
  pointer-events: none;
}

/* Custom cursor disabled site-wide: always keep native cursor visible. */
body.has-custom-cursor [data-cursor-text] { cursor: auto !important; }

/* Safety net in case cursor markup/class is still present from cache/plugin output. */
#custom-cursor,
.custom-cursor {
  display: none !important;
}

@media (hover: none) and (pointer: coarse) {
  .custom-cursor { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .custom-cursor { display: none !important; }
}


/* ==================================================
   CTA SECTION — reusable via [cta_section] shortcode
   Kept in global.css so styles load on any page.
   ================================================== */

.home-cta {
  min-height: 80vh;
  display: flex;
  align-items: center;
  background-color: var(--color-white);
}

.home-cta-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 950px ≈ 40vw at widescreen (2380px) — cap prevents it from spreading too wide;
     60vw preferred keeps the container proportionally wider at mid/tablet viewports
     so the fluid heading always fits in ~2 lines instead of squeezing to 3. */
  width: min(60vw, 950px);
  margin-inline: auto;
}
@media (max-width: 880px) {
  .home-cta-wrap { width: 100%; }
}

.home-cta-btn {
  display: inline-flex;
  justify-content: center;
}

/* Hidden until GSAP fades it in after the text animation completes */
[data-cta-btn] {
  opacity: 0;
}

/* ─── Rainbow gradient glow border ──────────────────────────────────────────
   ::before  — rotating conic-gradient blurred behind the button (the glow)
   ::after   — frosted glass halo, slightly taller, sits between glow and button
   hue-rotate cycles through the full spectrum so no element rotation needed.
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes hue-cycle {
  to { filter: blur(10px) hue-rotate(360deg); }
}

.home-cta-btn--glow {
  position: relative;
  border-radius: var(--n-72);
  isolation: isolate;
	
  & a {
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: border 0.3s ease;
  }
  &:hover a {
    border: 1px solid black;
  }
	
  &::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: conic-gradient(
      hsl(226, 81%, 64%),
      hsl(271, 81%, 64%),
      hsl(316, 81%, 64%),
      hsl(1,   81%, 64%),
      hsl(46,  81%, 64%),
      hsl(91,  81%, 64%),
      hsl(136, 81%, 64%),
      hsl(181, 81%, 64%),
      hsl(226, 81%, 64%)
    );
    filter: blur(10px) hue-rotate(0deg);
    animation: hue-cycle 2s linear infinite;
    transition: inset 0.3s ease, opacity 0.3s ease;
    z-index: -1;
  }

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 106%;
    height: 120%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.12);
    /* box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25); */
    /* transition: box-shadow 0.3s ease; */
    z-index: -1;
  }

  &:hover::before {
    inset: -12px;
    opacity: 0.5;
  }
  
  
  & a {
    padding: 14px 64px;
    border-radius: var(--n-72);
    background-color: var(--color-black);
    position: relative;
    z-index: 1;
  }
}


/* ─── Sticky nav — hide on scroll down, reveal on scroll up ─────────────────
   position: sticky on the <header> keeps it in document flow — no spacer or
   padding-top hack needed. translateY hides/shows it on scroll via JS.
   ─────────────────────────────────────────────────────────────────────────── */
header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform 1.2s ease, background 0.9s ease;
}

header.elementor-location-header.nav--hidden {
  transform: translateY(-140%);
}

/* ─── Adaptive nav theme ─────────────────────────────────────────────────────
   Default (light): existing background + dark text.
   Dark: triggered by JS when a [data-nav-theme="dark"] section is in view.
   ─────────────────────────────────────────────────────────────────────────── */
header.elementor-location-header.nav-theme--dark #nav-desktop,
header.elementor-location-header.nav-theme--dark #nav-mobile {
  background: rgba(26, 26, 26, 0.3);
  & img {
    filter: brightness(0) saturate(100%) invert(99%) sepia(2%) saturate(1879%) hue-rotate(3deg) brightness(109%) contrast(102%);
  }
}

header.elementor-location-header.nav-theme--dark a,
header.elementor-location-header.nav-theme--dark .elementor-nav-menu a {
  color: var(--color-white) !important;
}

header.elementor-location-header.nav-theme--dark .pl-cta-btn a {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-black) !important;
  &:hover {
    background-color: transparent;
    color: var(--color-white) !important;
  }
}

#nav-desktop {
  background: rgba(255, 254, 250, 0.3);
  padding-block: 1.5rem;
}
#nav-mobile{
  background: rgba(255, 254, 250, 0.3);
  backdrop-filter: blur(30px);
  padding-block: 0.6em;
}
/* Blur enabled only once hero (WebGL canvas) has scrolled out — toggled by nav.js */
header.elementor-location-header.nav--blur #nav-desktop {
  backdrop-filter: blur(30px);
}

header.elementor-location-header.nav-theme--dark.nav--blur #nav-desktop,
header.elementor-location-header.nav-theme--dark.nav--blur #nav-mobile {
  backdrop-filter: blur(30px);
}
.top-nav-logo, .top-nav-logo img{
  width: clamp(180px, calc(79.14px + 9.02vw), 280px) !important; 
  height: auto;
}