/* ==================================================
   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:    600;
  --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.18rem);
--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;

  /* ─── Gap system (fluid, semantic) ──────────── */
  --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));

  /* ─── Padding system (fluid, semantic) ───────── */
  --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-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); }
.display-xl .elementor-heading-title  { font-size: var(--fs-xxxxxxl); }
.display-lg .elementor-heading-title  { font-size: var(--fs-xxxxxl); }
.display-md .elementor-heading-title  { font-size: var(--fs-xxxxl); }
.display-sm .elementor-heading-title  { font-size: var(--fs-xxxl); }

/* .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;
}

/* Font size utilities */
.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-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); }

.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.35em;
  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: 10px 24px;
  border-radius: var(--n-72);
  transition: background-color 0.3s ease;
  &:hover {
    background-color: var(--color-white);
    color: var(--color-black);
  }
}


/* 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-4xl  { height: var(--gap-4xl); display: block; }
.spacer-3xl  { height: var(--gap-3xl); display: block; }
.spacer-2xl  { height: var(--gap-2xl); display: block; }
.spacer-xl   { height: var(--pad-xl); display: block; }
.spacer-md   { height: var(--pad-md); display: block; }
.spacer-lg   { height: var(--pad-lg); display: block; }
.spacer-base { height: var(--pad-base); display: block; }
.spacer-sm   { height: var(--pad-sm); display: block; }
.padding-0   { padding-block: 0; display: block; }

/* ─── Responsive visibility utilities ────────────────────────────────────
   Breakpoints match Elementor settings exactly:
     767px  = Mobile Portrait
     880px  = Mobile Landscape
    1024px  = Tablet Portrait   ← .show-desktop / .show-mobile boundary
    1200px  = Tablet Landscape
    1900px  = Laptop
    2380px  = Widescreen

   .show-*  → visible only at that size and below, hidden above
   .hide-*  → hidden at that size and below, visible above
   All use !important to override Elementor stylesheet specificity.
   ──────────────────────────────────────────────────────────────────── */

/* show-desktop: visible on tablet-landscape and above (> 1024px)       */
/* show-mobile:  visible on tablet-portrait and below (≤ 1024px)        */
.show-desktop { display: block !important; }
.show-mobile  { display: none  !important; }

/* 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) {
  .show-desktop { display: none  !important; }
  .show-mobile  { display: block !important; }
  .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-top: var(--pad-2xl);
  padding-bottom: var(--pad-md);
  min-height: 65vh;
}


/* ==================================================
   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;
  scale: 0.6;
  will-change: transform;
  transform: translate(-50%, -50%);
}

.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;
}

body.has-custom-cursor [data-cursor-text] { cursor: none; }

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