/* ========== BASE ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{overflow-x:clip}
img{display:block;max-width:100%;height:auto}

/* ── Lenis required styles ── */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

:root{
  --bg-main:#FFFDF8;
  --bg-card:#FFFFFF;
  --text-main:#0A0A0A;
  --text-muted:#555;
  --accent-orange:#FF4D00;
  --accent-yellow:#FFB800;
  --accent-blue:#0055FF;
  --font-heading:'Bebas Neue',sans-serif;
  --font-body:'Poppins',sans-serif;
  --shadow-sm:0 4px 12px rgba(0,0,0,.05);
  --shadow-md:0 12px 24px rgba(0,0,0,.08);
  --shadow-hover:0 20px 40px rgba(255,77,0,.15);
  --pad-x:max(2rem,5vw);
}

body{
  background-color:var(--bg-main);
  color:var(--text-main);
  font-family:var(--font-body);
  line-height:1.6;
  cursor:auto;
  background-image:linear-gradient(rgba(10,10,10,.034) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(10,10,10,.034) 1px,transparent 1px);
  background-size:64px 64px;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* ========== CUSTOM CURSOR ========== */
#cursor{position:fixed;width:8px;height:8px;background:var(--accent-orange);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:multiply;transition:width .15s,height .15s;border-radius:0}
#cursor-ring{position:fixed;width:34px;height:34px;border:1.5px solid rgba(10,10,10,.45);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .22s ease,height .22s ease,border-color .22s;border-radius:0}
#cursor-ring.hover{width:60px;height:60px;border-color:var(--accent-orange)}

/* ========== BUTTONS ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 2rem;background:var(--bg-card);color:var(--text-main);font-family:var(--font-body);font-weight:600;text-transform:uppercase;font-size:.9rem;letter-spacing:.5px;text-decoration:none;box-shadow:var(--shadow-sm);border-radius:0px;transition:all .3s cubic-bezier(.25,.8,.25,1)}
.btn:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);background:var(--accent-orange);color:#fff}
.btn-yellow{background:var(--accent-orange);color:#fff}
.btn-yellow:hover{background:#e64500}

/* ========== NAV ========== */
.nav-wrapper{position:fixed;top:0;left:0;right:0;z-index:100;overflow:visible}
nav{background:rgba(255,253,248,.9);backdrop-filter:blur(10px);padding:1.2rem var(--pad-x);display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 10px rgba(0,0,0,.03);transition:transform .4s ease}
nav.hidden{transform:translateY(-100%)}
.logo{font-family:var(--font-heading);font-size:2.2rem;color:var(--text-main);text-decoration:none;display:flex;align-items:center;gap:.5rem;letter-spacing:1px;line-height:1}
.logo-square{display:inline-block;width:12px;height:12px;background:var(--accent-orange)}
.nav-links{display:flex;gap:2.5rem;list-style:none;margin-top:5px}
.nav-links a{color:var(--text-main);text-decoration:none;font-weight:500;text-transform:uppercase;font-size:.85rem;letter-spacing:.5px;transition:color .3s}
.nav-links a:hover{color:var(--accent-orange)}

/* ========== HERO ========== */
.hero-section{position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 10rem var(--pad-x) 4rem;}
.hero-text-container{width:100%}
.italic{font-family:'DM Serif Display',serif;font-style:italic;color:var(--accent-orange)}
.hero-line{display:block;font-family:var(--font-heading);font-size:clamp(2rem,5.1vw,5.5rem);font-weight:400;line-height:.85;letter-spacing:1px;text-align:center;margin-bottom:.1em;opacity:0;transform:translateY(100px);will-change:transform,opacity}
.hero-line.secondary-text{font-family:var(--font-body);font-size:clamp(1.2rem,3vw,3rem);font-weight:500;color:#999;letter-spacing:.5px;line-height:1.5;margin-top:1.5rem}

/* ========== MARQUEE ========== */
.marquee-block{position:relative;padding:2rem 0;overflow:hidden}
.marquee-block::before,.marquee-block::after{content:'';position:absolute;top:0;bottom:0;width:180px;z-index:10;pointer-events:none}
.marquee-block::before{left:0;background:linear-gradient(90deg,var(--bg-main),transparent)}
.marquee-block::after{right:0;background:linear-gradient(-90deg,var(--bg-main),transparent)}
.marquee-ribbon{position:relative;overflow:hidden;padding:.6rem 0}
.marquee-ribbon .track{display:flex;width:max-content;will-change:transform}
.ribbon-1{background:var(--accent-orange);transform:rotate(-1.8deg) scale(1.03);margin-bottom:-6px;z-index:3;padding:.8rem 0}
.ribbon-1 .track{animation:scroll-left 60s linear infinite}
.ribbon-1 .m-word{font-family:var(--font-heading);font-size:clamp(2rem,4vw,3.5rem);color:#fff;text-transform:uppercase;letter-spacing:3px;padding:0 1.5rem;white-space:nowrap;line-height:1}
.ribbon-1 .m-sep{display:inline-flex;align-items:center;padding:0 .5rem;color:#fff;font-size:1.2rem;opacity:.8}
.ribbon-2{ scale(1.02);z-index:2;padding:1rem 0}
.ribbon-2 .track{animation:scroll-right 45s linear infinite}
.ribbon-2 .m-word{    font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #000000;
  /* -webkit-text-stroke: 1.5px rgba(10, 10, 10, .2); */
  text-transform: uppercase;
  letter-spacing: 4px;
  padding: 0 2rem;
  white-space: nowrap;
  line-height: 1;
  transition: all .3s;}
.ribbon-2 .m-word:hover{-webkit-text-stroke-color:var(--accent-orange);color:var(--accent-orange);text-shadow:0 0 40px rgba(255,77,0,.3)}
.ribbon-2 .m-sep{display:inline-flex;align-items:center;padding:0 1rem}
.ribbon-2 .m-sep::after{content:'';display:block;width:10px;height:10px;background:var(--accent-orange);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.ribbon-3{background: rgb(255 77 0);z-index:1;margin-top:-4px;padding:.5rem 0;border-top:1px solid rgba(10,10,10,.06);border-bottom:1px solid rgba(10,10,10,.06)}
.ribbon-3 .track{animation:scroll-left 45s linear infinite}
.ribbon-3 .m-word{font-family:var(--font-body);    font-size: clamp(1rem, 2vw, 1.2rem);font-weight:500;color: rgb(255 255 255 / 70%);;text-transform:uppercase;letter-spacing:3px;padding:0 2rem;white-space:nowrap}
.ribbon-3 .m-sep{display:inline-flex;align-items:center;padding:0 .5rem;color:var(--accent-orange);font-size:.7rem}
.marquee-block:hover .track{animation-play-state:paused}
@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}

/* ========== SECTIONS ========== */
.section{padding:8rem var(--pad-x)}
.hi-title{font-family:var(--font-heading);font-size:clamp(3.5rem,6vw,5rem);margin-bottom:1.5rem;line-height:.95;letter-spacing:1px}

/* ═══════════════════════════════════════════════════
   SERVICES — MESSY DECK STACK
   ═══════════════════════════════════════════════════ */
#services {
  position: relative;
  padding: 0 var(--pad-x);
  margin: 6rem 0 8rem;
  overflow: hidden;
}

.services-intro {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto 2rem;
}

.services-eyebrow {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .75rem;
  display: block;
}

.deck-container {
  position: relative;
  height: 78vh;
  perspective: 1000px;
}

.stack-card {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Centering via margins so GSAP can own the transform property without conflict */
  margin-left: -275px;
  margin-top: -28vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 550px;
  min-height: 56vh;
  padding: clamp(2rem, 4vw, 3rem) 2rem;
  border-radius: 0px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  will-change: transform, opacity;
}

.stack-card[data-index="0"] { z-index: 6; background: var(--accent-orange); color: #ffffff; }
.stack-card[data-index="1"] { z-index: 5; background: #ffffff; color: #0a0a0a; }
.stack-card[data-index="2"] { z-index: 4; background: #0a0a0a; color: #ffffff; border: 1px solid rgba(0,0,0,0.05); }
.stack-card[data-index="3"] { z-index: 3; background: var(--accent-orange); color: #FFFFFF; }
.stack-card[data-index="4"] { z-index: 2; background: #0A0A0A; color: #FFFFFF; }
.stack-card[data-index="5"] { z-index: 1; background: #ffffff; color: #0a0a0a; }

.sc-title { font-family: var(--font-heading); font-size: clamp(3rem, 8vw, 4rem); font-weight: 400; text-transform: uppercase; margin-bottom: 2rem; letter-spacing: 1px; line-height: 1; color: inherit; }
.sc-visual { display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; }
.sc-emoji { font-size: clamp(6rem, 12vw, 8rem); filter: drop-shadow(0 20px 30px rgba(0,0,0,.15)); }
.sc-desc { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; max-width: 440px; font-weight: 500; }

.stack-card[data-index="1"] .sc-desc,
.stack-card[data-index="5"] .sc-desc { color: #0a0a0a; }
.stack-card[data-index="0"] .sc-desc,
.stack-card[data-index="2"] .sc-desc,
.stack-card[data-index="3"] .sc-desc,
.stack-card[data-index="4"] .sc-desc { color: rgba(255, 255, 255, 0.85); }

/* ═══════════════════════════════════════════════════
   CLIENTS LOGO MARQUEE
   ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   CLIENTS LOGO MARQUEE
   ═══════════════════════════════════════════════════ */
   .clients-marquee-section{
    padding: 2rem 0 4rem;
    background: var(--bg-main);
    overflow: hidden;
    position: relative;
    margin-top: 4rem;
  }
  .clients-marquee-section::before,
  .clients-marquee-section::after{
    content:'';
    position:absolute; top:0; bottom:0;
    width:15vw; z-index:10; pointer-events:none;
  }
  .clients-marquee-section::before{ left:0;  background:linear-gradient(to right, var(--bg-main) 0%, transparent 100%); }
  .clients-marquee-section::after { right:0; background:linear-gradient(to left,  var(--bg-main) 0%, transparent 100%); }
  
  .clients-marquee-container{
    display:flex; flex-direction:column; gap:3.5rem;
  }
  .clients-track{
    display:flex;
    width:max-content;
    will-change:transform;
  }
  .clients-track.track-left { animation: scroll-left-clients 35s linear infinite; }
  .clients-track.track-right{ animation: scroll-right-clients 40s linear infinite; }
  .clients-marquee-section:hover .clients-track{ animation-play-state:paused; }
  
  .clients-list{
    display:flex;
    align-items:center;
    gap:5rem;
    padding:0 2.5rem;
  }
  
  /* Uniform box — handles portrait, square, landscape logos identically */
  .client-logo{
    flex: 0 0 auto;
    width: 160px;        /* fixed box width  */
    height: 90px;        /* fixed box height */
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .client-logo img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    filter: grayscale(100%);
    opacity:.85;
    transition: filter .4s ease, opacity .4s ease, transform .4s ease;
  }
  .client-logo:hover img{
    filter: grayscale(0%);
    opacity:1;
    transform: scale(1.06);
  }
  
  /* Mobile */
  @media (max-width: 768px){
    .clients-list{ gap:3rem; padding:0 1.5rem; }
    .client-logo{ width:120px; height:70px; }
  }
  
  @keyframes scroll-left-clients  { 0%{transform:translateX(0)}     100%{transform:translateX(-50%)} }
  @keyframes scroll-right-clients { 0%{transform:translateX(-50%)}  100%{transform:translateX(0)}    }
  
/* ═══════════════════════════════════════════════════
   ABOUT — EDITORIAL SPLIT LAYOUT
   ═══════════════════════════════════════════════════ */
.about-maxima {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 8rem;
  align-items: center;
  padding: 9rem var(--pad-x) 9rem;
  position: relative;
  border-top: 1px solid rgba(10,10,10,.08);
}
.ab-left {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.ab-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ab-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent-orange);
  flex-shrink: 0;
}
.ab-heading {
  display: flex;
  flex-direction: column;
  gap: 0.04em;
}
.ab-line-wrap {
  overflow: hidden;
  line-height: 1;
  padding-bottom: 0.05em;
}
.ab-word {
  display: block;
  font-family: var(--font-heading);
  font-size:clamp(4.6rem, 12.5vw, 8.8rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-main);
  will-change: transform;
}
.ab-word--italic {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  text-transform: none;
  color: var(--accent-orange);
  font-size:clamp(4.6rem, 12.5vw, 8.8rem);
}
.ab-word--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--text-main);
}
.ab-cta {
  align-self: flex-start;
  opacity: 0;
  transform: translateY(16px);
}
.ab-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 0.5rem;
}
.ab-para {
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.85;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(28px);
  border-bottom: 1px solid rgba(10,10,10,.06);
  padding-bottom: 2rem;
}
.ab-para:last-child {
  border-bottom: none;
}
.ab-para em {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  color: var(--text-main);
  font-size: 1.06em;
  font-weight: 400;
}
.ab-para--highlight {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1.25rem, 1.6vw, 1.45rem);
  color: var(--text-main);
  line-height: 1.5;
  border-bottom: none;
  padding-left: 1.5rem;
  border-left: 3px solid var(--accent-orange);
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(28px);
}

/* ═══════════════════════════════════════════════════
   TEAM SECTION
   ═══════════════════════════════════════════════════ */
.team-section {
  background: #000000;
  color: #ffffff;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
}
.team-intro {
  padding: 7rem var(--pad-x) 4rem;
  max-width: 900px;
}
.team-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: 1.4rem;
  opacity: 0;
}
.team-title {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: .92;
  letter-spacing: 1px;
  margin-bottom: 1.6rem;
  opacity: 0;
  color: #ffffff;
}
.team-title .italic { color: var(--accent-orange); }
.team-sub {
  font-family: var(--font-body);
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  color: rgba(255,255,255,.6);
  max-width: 560px;
  line-height: 1.75;
  opacity: 0;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 var(--pad-x) 6rem;
  align-items: start;
}
.tm-card {
  position: relative;
  border-radius: 0px;
  overflow: hidden;
  background: #f5f5f5;
  cursor: none;
  will-change: transform;
  transform-style: preserve-3d;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  transition: box-shadow .3s ease;
  border: 1px solid rgba(255,255,255,.08);
}
.tm-card--tall,
.tm-card--short { height: 380px; }
.tm-card:nth-child(2) { margin-top: 80px; }
.tm-card:nth-child(3) { margin-top: 0px; }
.tm-card:nth-child(4) { margin-top: 100px; }
.tm-card:nth-child(5) { margin-top: 0px; }
.tm-card:nth-child(6) { margin-top: 60px; }
.tm-card:nth-child(7) { margin-top: 20px; }
.tm-card:nth-child(8) { margin-top: 80px; }
.tm-float {
  width: 100%;
  height: 100%;
  position: relative;
}
.tm-photo {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  transition: transform .55s cubic-bezier(.25,.8,.25,1);
  overflow: hidden;
}
.tm-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.tm-card:hover .tm-photo {
  transform: scale(1.06);
}
.tm-photo--1  { background: linear-gradient(170deg,#1a1a1a 0%,#000000 100%); }
.tm-photo--2  { background: linear-gradient(170deg,#FF4D00 0%,#7a2500 100%); }
.tm-photo--3  { background: linear-gradient(170deg,#ffffff 0%,#bdbdbd 100%); }
.tm-photo--4  { background: linear-gradient(170deg,#000000 0%,#FF4D00 130%); }
.tm-photo--5  { background: linear-gradient(170deg,#1a1a1a 0%,#000000 100%); }
.tm-photo--6  { background: linear-gradient(170deg,#FF4D00 0%,#1a1a1a 100%); }
.tm-photo--7  { background: linear-gradient(170deg,#ffffff 0%,#9a9a9a 100%); }
.tm-photo--8  { background: linear-gradient(170deg,#0a0a0a 0%,#1f1f1f 100%); }
.tm-pill {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  z-index: 3;
}
.tm-pill-name {
  display: inline-flex;
  align-items: center;
  background: #000000;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .5px;
  padding: .45rem .9rem;
  border-radius: 0px 0 0 0px;
  white-space: nowrap;
  line-height: 1;
}
.tm-pill-role {
  display: inline-flex;
  align-items: center;
  background: var(--accent-orange);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .3px;
  padding: .45rem 1rem;
  border-radius: 0px;
  white-space: nowrap;
  line-height: 1;
}
.tm-pill-role:empty { display: none; }
.team-cta-strip {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem var(--pad-x) 6rem;
}
.team-cta-text {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   TESTIMONIALS — HORIZONTAL SCROLL WITH SQUARE BOXES
   ═══════════════════════════════════════════════════════════════════ */
.testimonials-section {
  position: relative;
  background: #FFFFFF;
  padding: 6rem 0;
  overflow: hidden;
  background-image:
    radial-gradient(circle, rgba(255,77,0,.04) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Floating deco */
.testi-deco { position: absolute; pointer-events: none; will-change: transform; z-index: 0; user-select: none; }
.testi-deco--star { font-size: 4rem; color: var(--accent-orange); top: 6rem; right: 8%; opacity: .18; font-family: var(--font-heading); }
.testi-deco--circle { width: 180px; height: 180px; border: 2px dashed var(--accent-orange); border-radius: 50%; top: -60px; left: -60px; opacity: .08; }
.testi-deco--squiggle { font-size: 8rem; color: var(--accent-yellow); bottom: 8rem; left: 4%; opacity: .25; font-family: 'DM Serif Display', serif; font-style: italic; }
.testi-deco--dot { width: 12px; height: 12px; background: var(--accent-orange); border-radius: 0; top: 30%; left: 50%; opacity: .5; transform: rotate(45deg); }
.testi-deco--asterisk { font-size: 6rem; color: var(--accent-yellow); bottom: 4rem; right: 5%; opacity: .2; font-family: var(--font-heading); }

/* Header */
.testi-header {
  position: relative;
  z-index: 1;
  padding: 0 var(--pad-x);
  max-width: 780px;
  margin-bottom: 3rem;
}
.testi-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: 1rem;
  opacity: 0;
}
.testi-title {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: .92;
  letter-spacing: 1px;
  color: var(--text-main);
  margin-bottom: 1.2rem;
}
.testi-period { color: var(--accent-orange); }
.testi-sub {
  font-family: var(--font-body);
  font-size: clamp(.9rem, 1.15vw, 1.05rem);
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.75;
  opacity: 0;
}

/* ── Horizontal scroll wrapper ── */
.testi-horizontal-scroll-wrapper {
  position: relative;
  width: 100%;
  cursor: grab;
  z-index: 1;
}
.testi-horizontal-scroll-wrapper:active {
  cursor: grabbing;
}

.testi-scroll-track {
  display: flex;
  gap: 24px;
  padding: 2rem var(--pad-x) 3rem;
  /* ensures the last card doesn't get cut off at the right edge */
  padding-right: max(2rem, 5vw);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Adds trailing space after the last card so it doesn't hug the viewport edge */
.testi-scroll-track::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: max(2rem, 5vw);
}
.testi-scroll-track::-webkit-scrollbar {
  display: none;
}

/* ── Slim Rectangle Card ── */
.testi-card {
  flex-shrink: 0;
  width: 500px;
  height: 380px; 
  scroll-snap-align: start;
  position: relative;
  padding: 2.2rem 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  transform: translateY(50px);
  transition: transform .4s cubic-bezier(.25,.8,.25,1), box-shadow .4s ease;
  background: #0A0A0A;
  color: #ffffff;
  border: 1.5px solid var(--accent-orange);
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
}

.testi-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 14px 40px rgba(255,77,0,.15);
}

/* Quote mark */
.testi-quote-mark {
  font-family: 'DM Serif Display', serif;
  font-size: 3.5rem;
  line-height: .6;
  margin-bottom: .1rem;
  color: var(--accent-orange);
  opacity: 0.6;
  font-style: italic;
}

/* Body copy */
.testi-body {
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.65;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: rgba(255,255,255,.8);
}
.testi-body em { font-style: italic; font-weight: 600; color: #fff; }

/* Footer */
.testi-footer {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,77,0,.2); 
}

/* Avatar */
.testi-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: .9rem;
  letter-spacing: .5px;
  flex-shrink: 0;
  background: var(--accent-orange);
  color: #fff;
}

.testi-name {
  display: block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: #ffffff;
}
.testi-role {
  display: block;
  font-size: .68rem;
  font-weight: 400;
  opacity: .65;
  color: #ffffff;
}

/* Tag pill */
.testi-tag {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: .25rem .65rem;
  white-space: nowrap;
  background: rgba(255,77,0,.15);
  color: var(--accent-orange);
}
/* ── Nav arrows + progress bar ── */
.testi-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--pad-x);
  margin-top: 0.5rem;
  position: relative;
  z-index: 1;
}
.testi-nav-btn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1.5px solid rgba(10,10,10,.12);
  cursor: pointer;
  transition: all .3s ease;
  font-size: 1.2rem;
  color: var(--text-main);
  border-radius: 0;
}
.testi-nav-btn:hover {
  background: var(--accent-orange);
  color: #fff;
  border-color: var(--accent-orange);
  transform: translateY(-2px);
}
.testi-progress-bar {
  flex: 1;
  height: 3px;
  background: rgba(10,10,10,.08);
  position: relative;
  overflow: hidden;
  max-width: 300px;
}
.testi-progress-fill {
  height: 100%;
  background: var(--accent-orange);
  width: 0%;
  transition: width .3s ease;
}

/* ========== COMPACT FOOTER ========== */
footer {
  background: #0A0A0A;
  color: #fff;
  padding: 0 0 1rem;
  
  position: relative;
  margin-top: 5rem; 
  overflow: hidden;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 77, 0, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 85, 255, 0.03) 0%, transparent 50%),
    linear-gradient(180deg, #0A0A0A 0%, #070707 100%);
}

.footer-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.04; 
  background-image: 
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px; 
  animation: footerPatternMove 50s linear infinite;
}

@keyframes footerPatternMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(24px, 24px); }
}

.footer-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  color: var(--accent-orange);
}

.footer-deco--star {
  font-size: 2.5rem;
  top: 18%;
  left: 8%;
  animation: float 6s ease-in-out infinite;
}

.footer-deco--circle {
  width: 90px;
  height: 90px;
  border: 2px dashed currentColor;
  border-radius: 50%;
  bottom: 12%;
  right: 5%;
  animation: rotate 30s linear infinite;
}

.footer-deco--dot {
  width: 6px;
  height: 6px;
  background: var(--accent-orange);
  top: 35%;
  right: 20%;
  border-radius: 0;
  transform: rotate(45deg);
  animation: pulse 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); } 
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.06; transform: rotate(45deg) scale(1); }
  50% { opacity: 0.12; transform: rotate(45deg) scale(1.15); }
}

/* ── CTA Section ── */
.footer-cta {
  text-align: center;
  padding: 2rem var(--pad-x);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Left-aligned variant */
.footer-cta--left {
  text-align: left;
  /* max-width: 1200px;
  margin: 0 auto; */
}

.footer-cta--left h2 {
  max-width: 820px;
}

.footer-cta h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.3vw, 3.3rem);
  margin-bottom: .75rem; 
  color: #fff;
  /* text-transform: uppercase; */
  line-height: 1;
  letter-spacing: 1px;
}

.footer-cta h2 .italic {
  color: var(--accent-orange);
}

.footer-drop-hi-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 0 0.5rem;
  overflow: visible;
}

.footer-drop-hi-wrap--left {
  justify-content: flex-start;
}

/* Marks field sits over the whole footer-cta */
.footer-marks-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.fmark {
  position: absolute;
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  user-select: none;
}

/* Big, bold, spread across full footer-cta width */
.fmark--plus    { top: 15%;   left: 3%;    font-size: clamp(3rem, 6vw, 6rem);   color: var(--accent-orange);       opacity: 0; }
.fmark--wave    { bottom: 20%; left: 10%;  font-size: clamp(2.5rem,5vw,5rem);   color: var(--accent-yellow);       opacity: 0; font-family: var(--font-body); font-style: italic; }
.fmark--star    { top: 8%;    left: 42%;   font-size: clamp(1.2rem,2vw,2rem);   color: rgba(255,255,255,0.25);     opacity: 0; }
.fmark--circle  { bottom: 25%; left: 35%;  width: clamp(16px,2.5vw,28px); height: clamp(16px,2.5vw,28px); border-radius: 50%; background: var(--accent-yellow); opacity: 0; }
.fmark--arrow   { top: 10%;   right: 5%;   font-size: clamp(2.5rem,5vw,5rem);   color: var(--accent-orange);       opacity: 0; font-family: var(--font-body); }
.fmark--dot     { top: 55%;   right: 18%;  width: clamp(10px,1.8vw,18px); height: clamp(10px,1.8vw,18px); border-radius: 50%; background: rgba(255,255,255,0.18); opacity: 0; }
.fmark--hash    { bottom: 15%; right: 6%;  font-size: clamp(2rem,4vw,4.5rem);   color: rgba(255,255,255,0.1);      opacity: 0; }
.fmark--bracket { bottom: 12%; left: 55%;  font-size: clamp(1.5rem,3vw,3rem);   color: rgba(255,255,255,0.18);     opacity: 0; font-family: var(--font-body); letter-spacing: .5em; }

.drop-hi-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  z-index: 1;
  cursor: pointer;
  will-change: transform;
}

.drop-hi-inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--accent-orange);
  color: #fff;
  padding: 1.4rem 3rem 1.4rem 2.5rem;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  transform-origin: center center;
  will-change: transform;
  transition: background .25s ease;
  clip-path: none;
}

.drop-hi-btn:hover .drop-hi-inner {
  background: #e64500;
}

.drop-hi-wave {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  display: inline-block;
  will-change: transform;
}

.drop-hi-text {
  display: inline-block;
  will-change: transform;
}

.drop-hi-arrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  will-change: transform;
  transition: transform .3s ease;
}

.drop-hi-btn:hover .drop-hi-arrow {
  transform: translateX(6px);
}

/* Smaller button variant */
.drop-hi-inner--sm {
  padding: .85rem 1.8rem .85rem 1.5rem;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  gap: .75rem;
  letter-spacing: 1.5px;
}

.drop-hi-inner--sm .drop-hi-arrow {
  font-size: clamp(.9rem, 1.4vw, 1.2rem);
}

/* ── Compact Footer Grid ── */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 4rem;
  padding: 2rem var(--pad-x);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative;
  z-index: 1;
  /* margin: 0 auto; */
  align-items: start;          /* ← stop columns from stretching unevenly */
}


.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem; 
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: 2px;
  line-height: .88;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .75rem; 
}

.footer-tagline {
  font-size: .78rem; 
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  line-height: 1.8;
}

.footer-brand-line {
  width: 50px; 
  height: 2px;
  background: var(--accent-orange);
  margin-top: 1.2rem;
  transition: width .4s ease;
}

.footer-brand-col:hover .footer-brand-line {
  width: 100px;
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem; 
}

.footer-nav-label {
  font-size: .62rem; 
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: .75rem;
}

.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.footer-nav-link {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .85rem; 
  font-weight: 400;
  letter-spacing: .3px;
  display: inline-block;
  position: relative;
  transition: color .25s ease, transform .3s ease;
}

.footer-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--accent-orange);
  transition: width .3s ease;
}

.footer-nav-link:hover {
  color: #fff;
  transform: translateX(4px);
}

.footer-nav-link:hover::after {
  width: 100%;
}

.footer-contact-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.footer-contact-link {
  display: block;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .85rem; 
  font-weight: 400;
  margin-bottom: 1.5rem; 
  transition: color .25s, transform .3s ease;
  word-break: break-all;
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  z-index: 999;
}

.footer-contact-link:hover {
  color: var(--accent-orange);
  transform: translateX(4px);
}

.footer-social-row {
  display: flex;
  gap: .7rem; 
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; 
  height: 38px;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.5);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all .4s cubic-bezier(.25,.8,.25,1);
}

.social-icon {
  font-size: .68rem; 
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
  transition: color .3s ease;
}

.footer-social::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-orange);
  transform: scale(0);
  transition: transform .4s cubic-bezier(.25,.8,.25,1);
}

.footer-social:hover {
  border-color: var(--accent-orange);
  transform: translateY(-3px);
}

.footer-social:hover::before {
  transform: scale(1);
}

.footer-social:hover .social-icon {
  color: #fff;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--pad-x) 0;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-copy {
  color: rgba(255,255,255,.25);
  font-size: .75rem;
  letter-spacing: 1px;
}

.footer-made-with {
  color: rgba(255,255,255,.25);
  font-size: .75rem; 
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.heart-pulse {
  color: var(--accent-orange);
  display: inline-block;
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* ── FOOTER PIXEL BALLPIT STRIP ── */
.footer-pixel-strip {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* padding: 3rem var(--pad-x) 0; */
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative;
  z-index: 1;
  /* max-width: 1200px; */
  margin: 0 auto;
  gap: 2rem;
  overflow: hidden;
}
.footer-pixel-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex-shrink: 0;
  padding-bottom: 2rem;
}
.footer-pixel-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.footer-pixel-eyebrow::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 50%;
  flex-shrink: 0;
}
.footer-pixel-contacts {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}
.footer-pixel-loc {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.footer-pixel-city {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5px;
}
.footer-pixel-detail {
  font-size: .82rem;
  color: rgba(255,255,255,.4);
}
.footer-pixel-email {
  font-size: .82rem;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .25s;
}
.footer-pixel-email:hover { color: var(--accent-orange); }
.footer-pixel-brief {
  color: var(--accent-orange);
  font-weight: 600;
  font-size: .85rem;
}
.footer-pixel-right {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
}
#pixelBallpit {
  display: block;
  width: 560px;
  height: auto;
}
@media (max-width: 900px) {
  #pixelBallpit { width: 100%; }
}
@media (max-width: 768px) {
  .footer-pixel-strip { flex-direction: column; align-items: flex-start; }
  .footer-pixel-right { width: 100%; }
  #pixelBallpit { width: 100%; height: auto; }
}

/* ========== FOOTER CONNECT — 2-COLUMN LAYOUT ========== */
.footer-connect-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: stretch;
  padding: 0 var(--pad-x);
  position: relative;
  z-index: 1;
}
.footer-connect-left{
  display:flex;
  flex-direction:column;
  gap: 1.5rem;
  justify-content: space-between;
  padding: 1.7rem 0;
}
.footer-connect-left .footer-cta--left{ padding: 0;padding-bottom: 1rem; }
.footer-connect-left .footer-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2rem;
  padding: 0;
  align-items: start;
}

/* keep the logo from dwarfing the other columns + line up tops */
.footer-connect-left .footer-brand-col { gap: 1rem; }
.footer-connect-left .footer-brand-col .logo img{
  width: 110px; height: auto;          /* was 150 — matches label height */
}

/* every column starts at the SAME top line */
.footer-connect-left .footer-brand-col,
.footer-connect-left .footer-nav-col,
.footer-connect-left .footer-contact-col{
  padding-top: 0;
  align-self: start;
}

/* match label rhythm so the eye reads them as one row */
.footer-connect-left .footer-nav-label{ margin-bottom: 1rem; }

.footer-connect-right{
  display:flex;
  align-items:stretch;
  justify-content:center;
  min-height: 520px;
}
.footer-connect-right #pixelBallpit{
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 900px){
  .footer-connect-layout{ grid-template-columns: 1fr; gap: 2rem; }
  .footer-connect-right{ min-height: 360px; }
  .footer-connect-left .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .footer-connect-left .footer-grid{ grid-template-columns: 1fr; }
}

/* ========== REVEAL ========== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.active{opacity:1;transform:translateY(0)}


/* ========== 360° SCROLL METER (floating circular gauge) ========== */
#services { position: relative; }

@keyframes degFloat {
  0%,100% { transform: translate3d(0, 0, 0) rotateZ(0deg); }
  50%     { transform: translate3d(0, -10px, 0) rotateZ(2deg); }
}
@keyframes degGlowPulse {
  0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: .9;  transform: translate(-50%,-50%) scale(1.15); }
}
@keyframes degTickSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.deg-meter{
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 140px;
  height: 140px;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px) scale(.6) rotate(-25deg);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1),
              transform .7s  cubic-bezier(.2,.8,.2,1),
              visibility .55s ease;
  pointer-events: none;
  perspective: 800px;
}
.deg-meter.is-active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1) rotate(0deg);
  pointer-events: auto;
}

/* Soft animated glow behind the gauge */
.deg-glow{
  position: absolute;
  left: 50%; top: 50%;
  width: 160%; height: 160%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,77,0,.55) 0%, rgba(255,184,0,.25) 35%, transparent 70%);
  filter: blur(18px);
  transform: translate(-50%,-50%);
  animation: degGlowPulse 3.6s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* Inner 3D tilt + float wrapper */
.deg-meter-inner{
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95) 0%, rgba(255,253,248,.85) 60%, rgba(255,253,248,.7) 100%);
  border: 2px solid var(--text-main);
  box-shadow:
    0 18px 40px -12px rgba(255,77,0,.45),
    0 8px 20px rgba(10,10,10,.18),
    inset 0 0 0 6px rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform-style: preserve-3d;
  animation: degFloat 5s ease-in-out infinite;
  z-index: 1;
  overflow: hidden;
}

/* Tiny rotating tick marks around the rim */
.deg-tick{
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 8px;
  background: var(--text-main);
  transform-origin: 50% 60px;
  border-radius: 2px;
  opacity: .35;
}
.deg-tick:nth-child(1){ animation: degTickSpin 14s linear infinite; }
.deg-tick:nth-child(2){ animation: degTickSpin 14s linear infinite; animation-delay: -3.5s; }
.deg-tick:nth-child(3){ animation: degTickSpin 14s linear infinite; animation-delay: -7s; }
.deg-tick:nth-child(4){ animation: degTickSpin 14s linear infinite; animation-delay: -10.5s; }

/* SVG progress ring */
.deg-ring{
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  transform: rotate(-90deg);
  z-index: 2;
}
.deg-ring-bg{
  fill: none;
  stroke: rgba(10,10,10,.08);
  stroke-width: 6;
}
.deg-ring-fg{
  fill: none;
  stroke: url(#degGrad);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 326.73;          /* 2 * PI * 52 */
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset .15s linear;
  filter: drop-shadow(0 0 6px rgba(255,77,0,.45));
}

/* Center label */
.deg-label{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  color: var(--text-main);
  z-index: 3;
  pointer-events: none;
  transform: translateZ(20px);
}
.deg-num{
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #FF4D00 0%, #FFB800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.deg-deg{
  font-size: 1.4rem;
  color: var(--text-main);
  margin-left: 2px;
}
.deg-cap{
  font-family: var(--font-body);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
}

@media (max-width: 768px){
  .deg-meter{ width: 96px; height: 96px; right: 1rem; bottom: 1rem; }
  .deg-num{ font-size: 1.5rem; }
  .deg-deg{ font-size: .9rem; }
  .deg-cap{ font-size: .42rem; letter-spacing: 2px; margin-top: 2px; }
  .deg-tick{ transform-origin: 50% 42px; height: 6px; }
}



/* ═══════════════════════════════════════════════════════════════════
   PORTFOLIO v2 — EDITORIAL CASE-STUDY LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
/* ============================================================
   PORTFOLIO — DARK THEME OVERRIDES
   Loaded AFTER styles.css. Scoped via body.pf-dark.
   - Black background, white type
   - Sticky text + vertical media stack (no slider)
   - 3D hover & GSAP-friendly transforms
   ============================================================ */

   body.pf-dark {
    --bg-main: #0a0a0a;
    --bg-card: #111;
    --text-main: #ffffff;
    --text-muted: rgba(255,255,255,.7);
    --text-dim: rgba(255,255,255,.45);
    --border-subtle: rgba(255,255,255,.12);
    background-color: #0a0a0a;
    color: #ffffff;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 64px 64px;
    background-attachment: fixed;
  }
  
  /* film-grain overlay */
  .pf-dark .noise-overlay{
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    opacity: .08; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  }
  
  /* ========== NAV (dark) ========== */
  .pf-dark .nav-wrapper #mainNav{
    background: rgba(10,10,10,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .pf-dark .nav-links a{ color:#fff; }
  .pf-dark .nav-links a:hover{ color: var(--accent-orange); }
  .pf-dark .btn{
    background:transparent; color:#fff;
    border:1px solid rgba(255,255,255,.35); box-shadow:none;
  }
  .pf-dark .btn:hover{ background:var(--accent-orange); border-color:var(--accent-orange); color:#fff; }
  
  /* cursor visibility on dark */
  .pf-dark #cursor{ background: var(--accent-orange); mix-blend-mode: difference; }
  .pf-dark #cursor-ring{ border-color: rgba(255,255,255,.55); }
  
  /* ========== HERO ========== */
  :root{ --pad-x: clamp(1.25rem, 5vw, 5rem); --accent-orange: #ff4d00; }
  
  .pf2-hero{
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10rem var(--pad-x) 6rem;
    overflow: hidden;
  }
  .pf2-hero-inner{
    position: relative; z-index: 2;
    max-width: 1400px; width: 100%; margin: 0 auto;
    display: flex; flex-direction: column; gap: 2rem;
  }
  .pf2-hero-eyebrow{
    font-size: .8rem; letter-spacing: 3px; text-transform: uppercase;
  }
  .pf2-hero-heading{
    font-family: 'Bebas Neue', 'Inter', sans-serif;
    font-size: clamp(3.5rem, 10vw, 9rem);
    line-height: .95; margin: 0; letter-spacing: 1px;
  }
  .pf2-hline{ display: block; }
  .pf2-hword{ display: inline-block; }
  .pf2-hero-body{
    max-width: 60ch; display: flex; flex-direction: column; gap: 1rem;
    font-size: 1.05rem; line-height: 1.7;
  }
  .pf2-hero-pull{ font-size: 1.25rem; }
  .pf2-hero-scroll-hint{
    position: absolute; bottom: 2rem; left: var(--pad-x);
    display: flex; align-items: center; gap: 1rem; z-index: 2;
  }
  .pf2-hero-scroll-hint span{
    font-size: .7rem; letter-spacing: 2px; text-transform: uppercase;
  }
  .pf2-scroll-line{
    width: 60px; height: 1px; background: rgba(255,255,255,.3);
  }
  
  /* ========== HERO dark overrides ========== */
  .pf-dark .pf2-hero{
    background: radial-gradient(circle at 20% 10%, rgba(255,77,0,.18), transparent 55%),
                radial-gradient(circle at 80% 90%, rgba(0,85,255,.12), transparent 55%),
                #0a0a0a;
  }
  .pf-dark .pf2-hero::before{ opacity:.25; }
  .pf-dark .pf2-hero-eyebrow{ color: var(--accent-orange); }
  .pf-dark .pf2-hword{ color:#fff; }
  .pf-dark .pf2-hword.italic{
    font-style: italic; font-family: 'DM Serif Display', serif; color: var(--accent-orange);
  }
  .pf-dark .pf2-hero-body p{ color: rgba(255,255,255,.72); }
  .pf-dark .pf2-hero-pull{ color:#fff !important; }
  .pf-dark .pf2-hero-scroll-hint span{ color: rgba(255,255,255,.45); }
  
  /* ========== Disciplines ticker — kept but darkened (was a slider before) ========== */
  .pf-dark .pf2-disciplines{
    background:#0a0a0a; color:rgba(255,255,255,.6);
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .pf-dark .pf2-disc-sep{ color: var(--accent-orange); }
  
  /* ============================================================
     PROJECTS — STICKY TEXT + VERTICAL MEDIA STACK (no slider)
     ============================================================ */
  .pf-dark .pf2-projects{ background:#0a0a0a; }
  .pf-dark .pf2-project{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50-50 */
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.07);
    align-items: flex-start;
  }
  .pf-dark .pf2-project::before{ background: var(--accent-orange); }
  
  /* sticky text block — sticks while media stack scrolls */
  .pf-dark .pf2-sticky-text{
    position: sticky;
    top: 5vh;
    align-self: flex-start;
    padding: 8rem var(--pad-x);
    min-height: 76vh;
    display: flex; flex-direction: column; justify-content: center; gap: 1.2rem;
    perspective: 1000px;
  }
  .pf-dark .pf2-project-num{
    color: rgba(255,255,255,.08);
    font-family: 'Bebas Neue', sans-serif;
    font-size:clamp(5rem, 12vw, 10rem);
    line-height: .9;
    text-shadow: 0 12px 60px rgba(255,77,0,.15);
    will-change: transform;
  }
  .pf-dark .pf2-project-name{
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 5vw, 5rem); line-height: 1;
    letter-spacing: 0.5px;
  }
  .pf-dark .pf2-project-name .name-accent{
    color: var(--accent-orange);
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    font-weight: 400;
  }
  .pf-dark .pf2-project-desc p{
    color: rgba(255,255,255,.72);
    font-size: 0.95rem;
    line-height: 1.2;
    max-width: 46ch;
    margin-bottom: .9rem;
  }
  .pf-dark .pf2-tag{
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.03);
    padding: .35rem .8rem;
    font-size: .72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 999px;
    transition: all .3s ease;
  }
  .pf-dark .pf2-sticky-text:hover .pf2-tag{
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    background: rgba(255,77,0,.06);
  }
  .pf-dark .pf2-sticky-text::after{ background: var(--accent-orange); }
  
  /* ====== VERTICAL MEDIA STACK ====== */
  .pf-dark .pf2-media-stack{
    display: flex;
    flex-direction: column;
    align-items: center;       /* vertical-align media */
    gap: 2rem;
    padding: 8rem var(--pad-x) 8rem 0;
    perspective: 1400px;
  }
  /* REVERSE rows: media on the LEFT, sticky text on the RIGHT */
  .pf-dark .pf2-project--reverse .pf2-media-stack{
    order: 1;
    padding: 8rem var(--pad-x) 8rem 0;
    align-items: center;
  }
  .pf-dark .pf2-project--reverse .pf2-sticky-text{
    order: 2;
    align-items: flex-start;
    text-align: left;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }
  /* Default rows: text left, media right — keep media padding symmetric */
  .pf-dark .pf2-project:not(.pf2-project--reverse) .pf2-media-stack{
    padding: 8rem var(--pad-x) 8rem 0;
  }
  /* Text alignment baseline */
  .pf-dark .pf2-sticky-text{
    text-align: left;
  }
  .pf-dark .pf2-project-desc p{ margin-left: 0; }
  .pf-dark .pf2-media-item{
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #111;
    border: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
    border-radius: 4px;
    transform-style: preserve-3d;
    transition: box-shadow .5s ease, border-color .4s ease;
    will-change: transform;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  }
  .pf-dark .pf2-media-item img,
  .pf-dark .pf2-media-item video{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .6s ease;
    filter: saturate(.95) contrast(1.02);
  }
  .pf-dark .pf2-media-item:hover{
    box-shadow: 0 40px 80px -20px rgba(255,77,0,.35);
    border-color: rgba(255,77,0,.35);
  }
  .pf-dark .pf2-media-item:hover img,
  .pf-dark .pf2-media-item:hover video{
    transform: scale(1.04);
    filter: saturate(1.1) contrast(1.05);
  }
  .pf-dark .pf2-media-item::after{
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,77,0,.18), transparent 60%);
    opacity: 0; transition: opacity .5s ease; pointer-events: none;
  }
  .pf-dark .pf2-media-item:hover::after{ opacity: 1; }
  .pf-dark .pf2-media-item::before{
    content: attr(data-label); position: absolute;
    top: 1rem; left: 1rem; color: #fff;
    font-size: .7rem; letter-spacing: 2px; text-transform: uppercase;
    background: rgba(0,0,0,.5); padding: .3rem .6rem;
    opacity: 0; transition: opacity .3s ease;
  }
  
  /* ========== STATS ========== */
  /* ============================================================
   STATS SECTION (IMPACT)
   ============================================================ */
.pf2-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-main, #0a0a0a);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 10;
  width: 100%;
}

.pf2-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
  z-index: 1;
}

/* Remove right border from the last item */
.pf2-stat:last-child {
  border-right: none;
}

/* Slick Background Fill on Hover */
.pf2-stat::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--accent-orange);
  transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: -1;
}

.pf2-stat:hover::before {
  height: 100%;
}

/* Typography */
.pf-stat-num {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 8vw, 6.5rem);
  color: var(--text-main, #ffffff);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: 2px;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pf2-stat-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255, 255, 255, 0.55));
  text-align: center;
  transition: color 0.4s ease;
}

/* Hover Interactions */
.pf2-stat:hover .pf-stat-num {
  transform: translateY(-5px);
  color: #ffffff; /* Ensures contrast when background turns orange */
}

.pf2-stat:hover .pf2-stat-label {
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive Grid Adjustments */
@media (max-width: 1024px) {
  .pf2-stats {
    grid-template-columns: repeat(2, 1fr); /* 2x2 grid on tablets */
  }
  .pf2-stat:nth-child(2) {
    border-right: none;
  }
  .pf2-stat:nth-child(1),
  .pf2-stat:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 600px) {
  .pf2-stats {
    grid-template-columns: 1fr; /* Stacked on mobile */
  }
  .pf2-stat {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3.5rem 1rem;
  }
  .pf2-stat:last-child {
    border-bottom: none;
  }
}
  
  /* ========== Responsive: mobile fallback (no sticky) ========== */
  @media (max-width: 900px){
    .pf-dark .pf2-project{ grid-template-columns: 1fr; }
    .pf-dark .pf2-sticky-text{
      position: static;
      min-height: auto;
      padding: 4rem var(--pad-x) 1rem;
    }
    .pf-dark .pf2-media-stack,
    .pf-dark .pf2-project--reverse .pf2-media-stack{
      padding: 1rem var(--pad-x) 4rem;
    }
    .pf-dark .pf2-media-item{ max-width: 100%; }
  }
  
  /* ========== Reveal helper ========== */
  .pf-dark .reveal{ opacity: 0; transform: translateY(24px); }
  


/* ============================================================
   MOBILE RESPONSIVE — COMPLETE OVERHAUL
   Hamburger nav + all breakpoints
   ============================================================ */

/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 200;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(.77,0,.175,1),
              opacity 0.2s ease,
              width 0.3s ease;
  transform-origin: center;
}
.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ── Nav overlay — permanent base (shown/hidden via class) ── */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 140;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.nav-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}
/* ── MOBILE NAV PANEL ── */
@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .nav-cta-desktop { display: none !important; }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100dvh;
    background: rgba(10,10,10,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: 6rem 2.5rem 3rem;
    list-style: none;
    transform: translateX(110%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(.77,0,.175,1),
                visibility 0s linear 0.45s;
    z-index: 150;
    border-left: 1px solid rgba(255,255,255,.08);
  }
  .nav-links.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: all;
    transition: transform 0.45s cubic-bezier(.77,0,.175,1),
                visibility 0s linear 0s;
  }
  .nav-links li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a {
    display: block;
    padding: 1.1rem 0;
    font-size: 1.05rem;
    color: rgba(255,255,255,.85) !important;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .25s, padding-left .25s;
  }
  .nav-links a:hover {
    color: var(--accent-orange) !important;
    padding-left: 8px;
  }
  .nav-mobile-cta { display: block !important; }
  .nav-mobile-cta .btn {
    margin-top: 1.5rem;
    width: 100%;
    justify-content: center;
    background: var(--accent-orange) !important;
    color: #fff !important;
    border: none !important;
  }

  /* Dark nav variant */
  .pf-dark .nav-links { background: rgba(5,5,5,.97); }
  .pf-dark .nav-hamburger { color: #fff; }
}

/* ── NAV: show mobile-cta only on mobile, hide by default ── */
.nav-mobile-cta { display: none; }

/* ── GENERAL ── */
@media (max-width: 768px) {
  :root { --pad-x: 1.25rem; }

  /* Hero section */
  .hero-section {
    min-height: 85vh;
    padding: 7rem var(--pad-x) 4rem;
  }
  .hero-line {
    font-size: clamp(2.2rem, 11vw, 4rem);
    text-align: left;
    margin-bottom: .2em;
  }

  /* About section */
  .about-maxima {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 5rem var(--pad-x);
  }
  .ab-left {
    position: static;
    gap: 1.5rem;
  }
  .ab-word, .ab-word--italic {
    font-size: clamp(3.5rem, 16vw, 6rem);
  }

  /* Services deck */
  .deck-container {
    height: auto;
    perspective: none;
  }
  .stack-card {
    position: relative !important;
    top: auto; left: auto;
    margin: 0 0 1.4rem !important;
    width: 100% !important;
    min-height: auto;
    transform: none !important;
    rotation: 0 !important;
  }
  .sc-emoji { font-size: clamp(3.5rem, 14vw, 6rem); }
  .sc-title { font-size: clamp(2rem, 8vw, 3rem); }
  .sc-desc  { font-size: .95rem; }

  /* Team */
  .team-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 var(--pad-x) 4rem;
  }
  .tm-card:nth-child(2),
  .tm-card:nth-child(3),
  .tm-card:nth-child(4),
  .tm-card:nth-child(5),
  .tm-card:nth-child(6),
  .tm-card:nth-child(7),
  .tm-card:nth-child(8) { margin-top: 0; }
  .tm-card--tall, .tm-card--short { height: 260px; }
  .team-intro { padding: 4rem var(--pad-x) 2rem; }
  .team-cta-strip { flex-direction: column; gap: 1.2rem; padding: 1rem var(--pad-x) 4rem; }
  .team-cta-text { font-size: clamp(1.5rem, 6vw, 2.5rem); }

  /* Testimonials */
  .testi-card { width: 85vw; height: auto; min-height: 300px; }
  .testi-scroll-track { padding: 1.5rem var(--pad-x) 2rem; gap: 16px; }

  /* Footer */
  .footer-connect-layout {
    grid-template-columns: 1fr;
    padding: 0 var(--pad-x);
    gap: 0;
  }
  .footer-connect-right { min-height: 280px; }
  .footer-connect-left .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1.5rem 0;
  }
  .footer-cta--left h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .drop-hi-inner--sm { font-size: clamp(.95rem, 4vw, 1.3rem); }
  .footer-bottom {
    flex-direction: column;
    gap: .75rem;
    text-align: center;
    padding: 1.5rem var(--pad-x);
  }

  /* Marquee */
  .marquee-block::before, .marquee-block::after { width: 60px; }

  /* Section padding */
  .section { padding: 4rem var(--pad-x); }
  .hi-title { font-size: clamp(2.5rem, 10vw, 4rem); }

  /* Disable scroll meter on mobile */
  .deg-meter { display: none !important; }
}

/* ── EXTRA SMALL ── */
@media (max-width: 480px) {
  .hero-line { font-size: clamp(2rem, 13vw, 3rem); }
  .team-grid { grid-template-columns: 1fr; }
  .tm-card--tall, .tm-card--short { height: 300px; }
  .testi-card { width: 92vw; }
  .footer-connect-right { min-height: 220px; }
}


/* ============================================================
   PORTFOLIO PAGE — MOBILE RESPONSIVE FIXES
   ============================================================ */

/* Hero */
@media (max-width: 768px) {
  .pf2-hero {
    min-height: 80vh;
    padding: 7rem var(--pad-x) 5rem;
  }
  .pf2-hero-heading {
    font-size: clamp(3rem, 14vw, 6rem);
  }
  .pf2-hero-body { font-size: .95rem; }
  .pf2-hero-pull { font-size: 1.05rem; }
  .pf2-hero-scroll-hint { display: none; }
}

/* Projects layout — single column, no sticky */
@media (max-width: 900px) {
  .pf-dark .pf2-project {
    grid-template-columns: 1fr;
  }
  .pf-dark .pf2-sticky-text {
    position: static !important;
    min-height: auto;
    padding: 3rem var(--pad-x) 1.5rem;
  }
  .pf-dark .pf2-media-stack,
  .pf-dark .pf2-project--reverse .pf2-media-stack {
    padding: 1rem var(--pad-x) 3rem;
    order: 2 !important;
  }
  .pf-dark .pf2-project--reverse .pf2-sticky-text { order: 1 !important; }
  .pf-dark .pf2-media-item { max-width: 100%; }
}

@media (max-width: 768px) {
  .pf-dark .pf2-project-num {
    font-size: clamp(4rem, 20vw, 7rem);
  }
  .pf-dark .pf2-project-name {
    font-size: clamp(2.2rem, 9vw, 4rem);
  }
  .pf-dark .pf2-project-desc p {
    font-size: .92rem;
    line-height: 1.65;
  }
  .pf2-tag-row { flex-wrap: wrap; gap: .5rem; }
  .pf-dark .pf2-tag { font-size: .68rem; padding: .3rem .65rem; }

  /* Stats */
  .pf2-stats { grid-template-columns: 1fr 1fr; }
  .pf2-stat:nth-child(2) { border-right: none; }
  .pf2-stat:nth-child(1),
  .pf2-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.08); }
  .pf2-stat { padding: 3rem 1rem; }
  .pf-stat-num { font-size: clamp(3rem, 12vw, 5rem); }
}

@media (max-width: 480px) {
  .pf2-stats { grid-template-columns: 1fr; }
  .pf2-stat {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 2.5rem 1rem;
  }
  .pf2-stat:last-child { border-bottom: none; }
  .pf-dark .pf2-sticky-text { padding: 2rem var(--pad-x) 1rem; }
  .pf-dark .pf2-media-stack,
  .pf-dark .pf2-project--reverse .pf2-media-stack { padding: .75rem var(--pad-x) 2rem; }
}

/* pf-dark nav hamburger colour override */
.pf-dark .nav-hamburger { color: #ffffff; }
.pf-dark .nav-links a { color: rgba(255,255,255,.85) !important; }

/* ── pf2-tag-row flex wrap ── */
.pf2-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}