/* =========================================================
   01) RESET & BASE
   --------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Base body (desktop visual preserved) */
body {
  font-family: "Poppins", sans-serif;
  background-color: #000000;
  color: #00D2FF;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: none; /* custom cursor on desktop */
}
/* Original base color (order preserved to match your cascade) */
body { background-color: #1b1b1b; }

/* Global interactive cursor (overridden for specific elements later) */
a, button { cursor: none; }


/* =========================================================
   02) ENTRY / INTRO (WELCOME GATE + FADE)
   --------------------------------------------------------- */
#page-content { display: none; }

#welcome-message {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);    padding: 1rem 2rem;
  background: (#1b1b1b); /* kept verbatim */
  color: #00D2FF;
  font-family: "Redhawk", serif;
  font-size: 2rem;
  border-radius: 8px;
  z-index: 10000;
  text-align: center;
}

.welcome {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem 2rem;
  background: #1b1b1b;
  color: #00D2FF;
  font-family: "Redhawk", serif;
  font-size: 2rem;
  border-radius: 8px;
  z-index: 10000;
  text-align: center;
}

.content { transition: opacity 1s ease-in; }
.content.fade-in { opacity: 1; }


/* =========================================================
   03) HEADER / HERO (ABSOLUTE DESKTOP HERO)
   --------------------------------------------------------- */
.header {
  transition: background 0.3s ease, padding 0.3s ease;
  text-align: center;
  color: #00D2FF;
  font-size: 1rem;
}

/* Sticky header support */
header.sticky {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 1000;
}
body.sticky-active { padding-top: /* height of sticky header */ 4rem; }

/* Hero text (absolute on desktop) */
.header h1 {
  font-family: "Redhawk", serif;
  font-size: 7.9rem;
  position: absolute;
  top: 1vw;
  left: 4vw;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.header p {
  font-family: "Redhawk", sans-serif;
  font-size: 3rem;
  letter-spacing: .1rem;
  position: absolute;
  top: 10vw;
  left: 4vw;
  color: #cfcfcf;
}
.header p1 {
  font-family: "Redhawk", sans-serif;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  position: absolute;
  top: 14vw;
  left: 4vw;
  color: #cfcfcf;
}
.header p2 {
  font-family: "Redhawk", sans-serif;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  position: absolute;
  top: 14.5vw;
  left: 4vw;
  color: #cfcfcf;
}


/* =========================================================
   04) FLOATING NAV BUTTONS (PRIMARY CTAS)
   --------------------------------------------------------- */
.nav-buttons {
  position: absolute;
  top: 22vw;
  right: 4vw;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.nav-buttons a,
.brand-btn {
  display: inline-block;
  padding: 0.6rem 3rem;
  margin-top: 1.5rem;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: #00d2ff;
  border: 2px solid #00d2ff;
  background: transparent;
  transition: all 0.3s ease;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
  text-align: center;
}
.nav-buttons a:hover,
.brand-btn:hover {
  background: #00d2ff;
  color: #000;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.9);
  transform: translateY(-2px);
}

/* legacy special case (desktop). mobile policy appears later */
a[href="#work"],
.back-to-work,
.project-nav a[href="#work"] { cursor: pointer !important; }


/* =========================================================
   05) CUSTOM CURSOR (DESKTOP GLOW)
   --------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(215,245,252,0.95) 0%,
    rgba(215,245,252,0.95) 8%,
    rgba(0,210,255,0.55) 20%,
    rgba(0,210,255,0.22) 45%,
    rgba(0,210,255,0) 75%);
  transform: translate(-50%, -50%);
  top: var(--y, -9999px);
  left: var(--x, -9999px);
  z-index: 10000;
}

.cursor-fx, .cursor-trail { pointer-events: none; transition: opacity .1s; }
.cursor-fx, .cursor-trail { position: fixed; pointer-events: none; z-index: 100000; }

.cursor-trail {
  width: 35px; height: 35px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(215,245,252,0.95) 0%,
    rgba(215,245,252,0.95) 8%,
    rgba(0,210,255,0.55) 20%,
    rgba(0,210,255,0.22) 45%,
    rgba(0,210,255,0) 75%);
  transform: translate(-50%, -50%);
  will-change: transform, left, top, opacity;
}

/* Scoped "cursor-off" utility */
.cursor-off, .cursor-off a, .cursor-off button { cursor: none !important; }
.cursor-off::before {
  content: "";
  position: fixed;
  width: 35px; height: 35px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(215,245,252,0.95) 0%,
    rgba(215,245,252,0.95) 8%,
    rgba(0,210,255,0.55) 20%,
    rgba(0,210,255,0.22) 45%,
    rgba(0,210,255,0) 75%);
  transform: translate(-50%, -50%);
  top: var(--y, -9999px);
  left: var(--x, -9999px);
  z-index: 10000;
}

/* Home intro cursor handling */
body.home #page-content { display: none; }
body.home { cursor: none; }
body.home a, body.home button { cursor: none; }
body.home::before {
  content: "";
  position: fixed;
  width: 35px; height: 35px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(215, 245, 252, 0.9) 0%,
    rgba(0,210,255,0.4) 40%,
    rgba(0,210,255,0) 80%);
  transform: translate(-50%, -50%);
  top: var(--y, -9999px);
  left: var(--x, -9999px);
  z-index: 999;
}

/* Intro overlay hides custom cursor */
body.intro-active { cursor: none !important; }
body.intro-active::before,
body.intro-active .cursor-trail { display: none !important; }

/* Lightbox: show normal pointer and hide custom cursor */
.lightbox, .lightbox * { cursor: pointer !important; }
html.lb-open, html.lb-open body, html.lb-open * { cursor: auto !important; }
html.lb-open .cursor-fx, html.lb-open .cursor-trail { display: none !important; }


/* =========================================================
   06) HERO LOGO / WRAPPER
   --------------------------------------------------------- */
.logo-and-model {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1vw;
  width: 100%;
  flex-wrap: nowrap;
  margin-top: 0vw;
}
.logo-wrap { position: relative; display: inline-block; line-height: 0; }

.logo {
  width: 30vw;
  height: auto;
  display: block;
  margin-top: 5rem;
  max-width: 800px;
  margin-bottom: 10vw;
}


/* =========================================================
   07) GALLERIES / HEX WRAPPER / SECTION LABELS
   --------------------------------------------------------- */
.gallery-section {
  clear: both;
  position: relative;
  overflow: visible;
  margin-bottom: 50px;
}

/* Generic gallery grid */
.gallery{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1.25rem;
  max-width: 1200px;
  justify-items: center;
  align-items: center;
  margin: 0 auto;
  position: relative;
  margin-top: 0;
}
.gallery > .thumb{ display:block; width:100%; }
.gallery img{ width:100%; height:auto; display:block; }

/* Cyan hex panel */
.gallery-hex {
  position: relative;
  width: 90vw;
  margin-top: -2rem; /* (desktop fix is applied at the end via media query) */
  background: #002b33;
  border: 4px solid #00D2FF;
  box-shadow: 0 0 4rem rgba(0,210,255, 0.8);
  z-index: 1;
}

/* Section headings and grids inside hex */
.gallery-content {
  position: relative;
  padding: 3rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 2;
  color: #fff;
}
.gallery-content .p2{
  max-width: 1200px;
  margin-left: 3.5rem;
  font-family: "Poppins", serif;
  font-size: 2rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #00D2FF;
  text-shadow: 0 0 10px rgba(0,210,255,.45);
}
.gallery-content .p3{
  max-width: 1200px;
  margin-top: 2rem;
  margin-left: 3.5rem;
  margin-bottom: .75rem;
  font-family: "Poppins", serif;
  font-size: 2rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #00D2FF;
  text-shadow: 0 0 10px rgba(0,210,255,.45);
}

/* Individual gallery items */
.gallery-item { width: 100%; display: flex; justify-content: center; align-items: center; }
.gallery img { max-width: 100%; height: auto; }

/* Brands layout (4 top, 3 bottom) */
.brands-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-template-areas:
    "a b c d"
    ". e f g";
  gap: 1rem;
  max-width: 1200px;
  justify-items: center;
  align-items: center;
}
.brands-grid > *{ display:block; width:100%; }
.gallery.brands-grid > a.thumb:nth-of-type(1){ grid-area: a; }
.gallery.brands-grid > a.thumb:nth-of-type(2){ grid-area: b; }
.gallery.brands-grid > a.thumb:nth-of-type(3){ grid-area: c; }
.gallery.brands-grid > a.thumb:nth-of-type(4){ grid-area: d; }
.gallery.brands-grid > a.thumb:nth-of-type(5){ grid-area: e; }
.gallery.brands-grid > a.thumb:nth-of-type(6){ grid-area: f; }
.gallery.brands-grid > a.thumb:nth-of-type(7){ grid-area: g; }

/* Second gallery after brands (3 cols) */
.gallery.brands-grid + .gallery{
  grid-template-columns: repeat(3, minmax(0,1fr));
  max-width: 1200px;
  margin: 2rem auto 0;
  gap: 2rem;
  justify-items: center;
  align-items: center;
}
.gallery-content .p2 + .gallery.brands-grid{ margin-top: .75rem !important; }
.gallery-content .p3 + .gallery{ margin-top: 0 !important; }

/* Projects grid (3 across on desktop) */
.gallery.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 1rem auto;
  margin-top: 1rem;
}
.gallery.projects-grid .thumb {
  display: block;
  overflow: hidden;
  background: #111;
  transform-style: preserve-3d;
  transition:  transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery.projects-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: none;
}
.gallery.projects-grid .thumb:hover { transform: scale(1.05); z-index: 1; }

/* Scoped rule for galleries that are DIRECT children of .gallery-content */
.gallery-content > .gallery{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  justify-items: center;
  align-items: center;
}
.gallery-content > .gallery > a.thumb{ display:block; width:100%; }
.gallery-content > .gallery img{ width:100%; height:auto; display:block; }
.gallery-content > .gallery + .gallery{ grid-template-columns: repeat(3, minmax(0,1fr)); }


/* =========================================================
   08) THUMBNAILS / HOVER EFFECTS
   --------------------------------------------------------- */
.thumb { position: relative; z-index: 1; }
.thumb img{
  width: 100%; max-width: 100%; height: 100%;
  display: block; transition: transform 0.2s ease; transform-origin: center;
}
.thumb:hover { z-index: 100; }
.thumb:hover img { transform: scale(1.1); }


/* =========================================================
   09) GENERIC TYPOGRAPHY SECTIONS
   --------------------------------------------------------- */
.main-content {
  font-size: 1.2vw;
  padding: 2vw;
  max-width: 900px;
  margin: 0 auto;
  line-height: 0;
}
.main-content p {
  text-indent: 2em;
  margin-bottom: 1em;
  font-size: 1.2vw;
  padding: 1vw;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}
.main-content h1 {
  text-align: left;
  font-size: 2.5vw;
  margin-bottom: 0.5em;
  padding-left: 1em;
  font-family: "Redhawk", serif;
}


/* =========================================================
   10) ABOUT (RESTORED EXACTLY AS BEFORE)
   --------------------------------------------------------- */
.about-section {
  max-width: 1000px;
  margin: 0 auto ;
  text-align: center;
  color: #eafeff;
}
.about-section p {
  font-family: "Poppins", sans-serif;
  margin-top: 3rem;
  line-height: 1.5;
  letter-spacing: .04rem;
  color: #b5f8ff;
}


/* =========================================================
   11) FOOTER
   --------------------------------------------------------- */
footer {
  width: 100%;
  display: flex;
  margin-top: 3rem;
  justify-content: center;
  padding: .5rem 1rem;
  color:#00D2FF;
  font-weight: lighter;
  opacity: 80%;
}
footer p {
  max-width: 900px;
  text-align: left;
  margin: 0;
}

/* Logo badge on hero */
.portfolio-badge {
  position: absolute;
  bottom: 15%;
  font-family: "Redhawk", serif;
  font-size: 1.2rem;
  letter-spacing: .15rem;
  text-transform: uppercase;
  color: #cfcfcf;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}
@media (min-width: 900px){
  .portfolio-heading{ margin-top: .5rem; }
}


/* =========================================================
   12) VIDEO SECTION (16:9 WRAP)
   --------------------------------------------------------- */
.video-section {
  display: grid;
  max-width: 1200px;
  margin: 4rem auto 0;
  padding: 0 1rem;
  gap: 1rem;
}
.video-wrap { position: relative; padding-top: 56.25%; }
.video-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =========================================================
   13) PROJECT PAGE (LAYOUT + NAV)
   --------------------------------------------------------- */
body.project-page { display: block !important; cursor: none; }

/* [PP DESKTOP: HEADER POSITION] */
body.project-page .header{
  position: relative !important;
  text-align: left !important;
  font-family: "Redhawk", serif !important;
  font-size: 5rem !important;
  color: #cfcfcf !important;
  margin-left: 0 !important;
  margin-top: -3rem !important; /* (desktop fix is applied at the end via media query) */
  letter-spacing: -.02rem;
}
body.project-page .logo {
  width: 5vw; max-width: 400px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
body.project-page .gallery-hex{
  width:92vw;
  margin:3rem auto 0;
  margin-bottom: 15rem;
  background:#002b33;
  border:4px solid #00D2FF;
  box-shadow:0 0 4rem rgba(0,210,255,.8);
  position:relative;
  top: 15vw;
  z-index:1;
}
body.project-page .gallery-content{
  position:relative;
  padding:3rem 2rem;
  max-width:1400px;
  margin:0 auto;
  color:#fff;
  z-index:2;
}

/* Case study grids (2-col on desktop) */
body.project-page .grid-2,
body.project-page .grid-3,
body.project-page .grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 900px) {
  body.project-page .grid-2,
  body.project-page .grid-3,
  body.project-page .grid-4 { grid-template-columns: 1fr; }
}

/* Project nav buttons (includes “Back to Work”) */
body.project-page .project-nav {
  display: flex;
  justify-content: space-between;
  margin: 2rem 0;
}
body.project-page .project-nav a {
  display: inline-block;
  padding: 0.6rem 3rem;
  margin-top: 0rem;
  margin-left: 1rem;
  margin-right: 1rem;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: #00d2ff;
  border: 2px solid #00d2ff;
  background: transparent;
  transition: all 0.3s ease;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
  text-align: center;
}
body.project-page .project-nav a:hover {
  background-color: #00D2FF;
  color: black;
  box-shadow: 0 0 4rem rgba(0,210,255, 0.8)
}

/* Project hero and title */
body.project-page .hero{ text-align:center; }
body.project-page .hero .logo{ display:block; margin:0 auto .75rem; }
body.project-page img.logo {
  width: 30rem !important;
  max-width: 1500px !important;
  margin-top: -3rem !important; /* (desktop fix is applied at the end via media query) */
  margin-bottom: 4rem !important;
}
.project-title {
  max-width: 1200px;
  margin-left: 3.5rem;
  font-family: "Poppins", serif;
  font-size: 2rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #00D2FF;

}

/* Project page h1 in hero */
body.project-page .gallery-content .hero h1{
  font-family: "Redhawk", serif !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  color: #00D2FF !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-align: center;
  margin: 0 0 .5rem;
}

/* Project page floating nav offset (desktop only) */
body.project-page .nav-buttons {
  position: relative;
  margin-left: 5rem;
  margin-right: 70rem;
  top: 1rem;
}

/* Footer on project page */
.project-page footer {
  margin: 0;
  position: relative;
  bottom: 3rem;
}


/* =========================================================
   14) CASE STUDY ASSETS & COPY (IMAGES + TEXT BLOCKS)
   --------------------------------------------------------- */
.asset img { width: 30rem; height: auto; display: block; background: #111; object-fit: cover; margin-right: 11.5rem; }
.asset2 img { width: 30rem; height: auto; display: block; background: #111; object-fit: cover; position: relative; left: 12rem; }
.asset3 img { width: 30rem; height: auto; display: block; background: #111; object-fit: cover; margin-right: 11.5rem; }

.copy {
  max-width: 500px;
  margin: 0;
  margin-left: 13rem;
  text-align: right;
  padding: 0 1rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #e5e5e5;
  font-weight: 300;
}
.copy2 {
  max-width: 500px;
  margin: 0;
  margin-right: 11rem;
  text-align: left;
  padding: 0 2rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #e5e5e5;
  font-weight: 300;
}


/* =========================================================
   15) DESKTOP-ORIENTED MEDIA QUERIES (AS-IS)
   --------------------------------------------------------- */
@media (max-width: 800px){
  .logo-and-model{
    flex-direction: column;
    align-items: center;
    gap: 5vh;
  }
  .logo,
  .model{
    width: 80vw;
    max-width: 90vw;
  }
  .gallery{
    grid-template-columns: 1fr;
  }
  .nav-buttons a{
    font-size: 4vw;
    padding: 2vh 4vw;
  }
  body{
    padding: 20px;
  }
}
@media (min-width: 1600px) {
  .logo { width: 30vw; max-width: 700px; }
  .model { width: 35vw; max-width: 750px; }
  .gallery { max-width: 1200px; grid-template-columns: repeat(4, 1fr); }
  .nav-buttons a { font-size: 1.5vw; padding: 1vw 2vw; }
  .hero{
    display: grid;
    justify-items: center;
    gap: clamp(8px, 2.5vw, 16px);
    margin: clamp(16px, 5vh, 48px) 0;
  }
}

/* Scoped gallery collapse */
@media (max-width: 1100px){
  .gallery-content > .gallery{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 800px){
  .gallery-content > .gallery{ grid-template-columns: 1fr; }
}

/* Smooth scroll offset for #work anchor */
#work{ scroll-margin-top: clamp(64px, 8vw, 96px); }
#work { scroll-margin-top: 2rem; }


/* =========================================================
   16) MOBILE TUNING PANEL (edit values only)
   --------------------------------------------------------- */
/* =========================================
   MOBILE TUNING VARIABLES (edit these only)
   ========================================= */
:root {
  /* Layout & rhythm */
  --m-header-pad-x: 10px;         /* left/right padding inside header */
  --m-header-pad-top: 0;          /* top padding (0 = flush to top) */
  --m-header-pad-bottom: 20px;    /* space under header block */
  --m-header-text: left;          /* left | center | right */

  /* Type scale */
  --m-h1-size: clamp(40px,15vw, 60px);
  --m-h1-lh: 1.14;
  --m-h1-track: 0.04em;

  --m-p-size:  clamp(16px, 4vw, 22px);
  --m-p-lh:    1.35;

  --m-p1-size: clamp(14px, 4.2vw, 20px);
  --m-p1-lh:   1.35;

  --m-p2-size: clamp(14px, 4.2vw, 20px);
  --m-p2-lh:   1.35;

  /* Vertical gaps (tighten/loosen) */
  --m-gap-h1:        6px;  /* space below H1 */
  --m-gap-portfolio: 2px;  /* space below “PORTFOLIO” */
  --m-gap-handle:    4px;  /* space below handle line(s) */
  --m-block-gap:     5px; /* space after header before next section */

  /* Horizontal nudges (fine positioning per line) */
  --portfolio-offset-x: 0px;   /* negative = left, positive = right */
  --handle-offset-x:    0px;
}


/* =========================================
   MOBILE (≤ 900px) — Desktop remains unchanged
   ========================================= */
@media (max-width: 900px) {

  /* Header: full-bleed, no outside margins */
  .header {
    position: relative;
    top: -3vw;
    display: block !important;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin: -2vw !important;
    padding: var(--m-header-pad-top) var(--m-header-pad-x) var(--m-header-pad-bottom) !important;
      padding-left: 12px !important;   /* reduce side padding so text has room */
    padding-right: 5px !important;
    text-align: var(--m-header-text) !important;   /* you control alignment via variable */
    box-sizing: border-box;
  }

  /* Kill desktop absolute coords so lines stack naturally */
  .header h1,
  .header p,
  .header p1,
  .header p2 {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: block;
  }

  /* H1 — tweak only the vars above */
 .header h1 {
    white-space: nowrap;        /* <-- prevents wrapping */
    overflow-wrap: normal;
    word-break: keep-all;
    /* tighten tracking on small screens, relax on larger */
    letter-spacing: clamp(0.02em, 0.6vw - 0.2em, 0.08em) !important;
    /* scale with viewport; tune the middle number until it fits edge-to-edge */
    font-size: clamp(30px, 9.97vw, 64px) !important;
    line-height: 1.12 !important;   /* bump to 1.16 if it looks cramped */
  }

  /* “PORTFOLIO” line */
  .header p {
    font-size: var(--m-p-size) !important;
    line-height: var(--m-p-lh) !important;
    color: #cfcfcf !important;
    margin-bottom: var(--m-gap-portfolio) !important;
    transform: translateX(var(--portfolio-offset-x));
  }

  /* Handle lines */
  .header p1 {
    font-size: var(--m-p1-size) !important;
    line-height: var(--m-p1-lh) !important;
    color: #cfcfcf !important;
    margin-bottom: var(--m-gap-handle) !important;
    transform: translateX(var(--handle-offset-x));
  }
  .header p2 {
    font-size: var(--m-p2-size) !important;
    line-height: var(--m-p2-lh) !important;
    color: #cfcfcf !important;
    margin-bottom: var(--m-gap-handle) !important;
    transform: translateX(var(--handle-offset-x));
  }

  .handle-wrap {
  display: flex;
  flex-wrap: wrap;       /* keeps it from overflowing on tiny screens */
  gap: 15px;              /* spacing between p1 and p2 */
  justify-content: flex-start;  /* or flex-start if you prefer left aligned */
}

.handle-wrap p1,
.handle-wrap p2 {
  margin: 0 !important;
  transform: none !important;
}

  /* Space after header before next block */
  .header + * { margin-top: var(--m-block-gap) !important; }

  .logo {
    margin-top: 0 !important;
    margin-bottom: -1vw !important;
    display: block;
    position: relative;
    top: -4rem; /* adjust this number until it’s flush with the header bottom */
  }

   .portfolio-badge {
    font-size: 0.67rem !important; /* try 0.6rem to start */
    letter-spacing: 0.1rem !important; /* optional tweak */
    bottom: 10% !important; /* adjust if it looks too far from logo */
  }

  /* ================================
   GALLERY HEX + BRANDS (Mobile)
   ================================ */
@media (max-width: 900px) {

.gallery-hex {
    width: 94vw !important;       /* fits screen, leaves safe edge */
    max-width: 100% !important;   /* no overflow */
    margin: 0 auto !important;    /* center horizontally */
    border-width: 3px !important;
    box-sizing: border-box !important;
    box-shadow: 0 0 2rem rgba(0,210,255,0.6) !important;
  }

  /* ================================
     BRANDS GRID
     ================================ */
  .gallery.brands-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;  /* single column */
    grid-auto-flow: row !important;
    grid-template-areas: none !important;   /* reset desktop named areas */
    gap: 2rem !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Reset grid items to flow naturally */
  .gallery.brands-grid > * {
    grid-area: auto !important;
    width: 100% !important;
  }

  /* Brand card: thumb + button stacked */
  .brands-grid .brand-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;  /* left-aligned */
    text-align: left !important;
    width: 100% !important;
  }

  .brands-grid a.thumb {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }

  .brands-grid img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .brands-grid .brand-btn {
    margin: 0 !important;
    align-self: flex-start !important;   /* button under thumb */
  }

  /* Brands title aligned with left edge */
  .gallery-content .p2 {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* ================================
     OTHER MOBILE FIXES
     ================================ */
  .about-section p,
  .main-content p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  .gallery-content .p3 {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .gallery-content .p3 + .gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.2rem !important;        /* tighten spacing for small screens */
    max-width: 100% !important;  /* make sure it fits inside viewport */
    margin: 0 auto !important;
  }

  /* Hide floating nav buttons on mobile */
  .nav-buttons { display: none !important; }

  /* Galleries: 2 columns by default on mobile */
  .gallery-content > .gallery {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  /* Project page grid: 2 columns on mobile */
  body.project-page .gallery.projects-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  /* Sticky header offsets for iOS safe jump */
  body.sticky-active { padding-top: clamp(56px, 9vh, 96px) !important; }
  #work, #about { scroll-margin-top: clamp(64px, 10vh, 120px); }
}

/* Collapse to single column on very small phones */
@media (max-width: 600px) {
  .gallery-content > .gallery { grid-template-columns: 1fr !important; }
  body.project-page .gallery.projects-grid { grid-template-columns: 1fr !important; }
}

/* Touch quality-of-life: disable hover transforms + custom cursor */
@media (hover: none), (pointer: coarse) {
  .thumb:hover img,
  .gallery.projects-grid .thumb:hover { transform: none !important; }

  body::before, .cursor-fx, .cursor-trail { display: none !important; }
  body, a, button { cursor: auto !important; }
}

 /* Header behaves same as home */
  body.project-page .header {
    position: relative;
    top: -3vw;
    display: block !important;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin: -2vw !important;
    padding: var(--m-header-pad-top) var(--m-header-pad-x) var(--m-header-pad-bottom) !important;
    padding-left: 12px !important;
    padding-right: 5px !important;
    text-align: var(--m-header-text) !important;
    box-sizing: border-box;
  }

  body.project-page .header h1,
  body.project-page .header p,
  body.project-page .header p1,
  body.project-page .header p2 {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: block;
  }

  body.project-page .header h1 {
    white-space: nowrap;
    letter-spacing: clamp(0.02em, 0.6vw - 0.2em, 0.08em) !important;
    font-size: clamp(30px, 9.97vw, 64px) !important;
    line-height: 1.12 !important;
  }
  body.project-page .header p  { font-size: var(--m-p-size)  !important; line-height: var(--m-p-lh)  !important; margin-bottom: var(--m-gap-portfolio) !important; transform: translateX(var(--portfolio-offset-x)); }
  body.project-page .header p1 { font-size: var(--m-p1-size) !important; line-height: var(--m-p1-lh) !important; margin-bottom: var(--m-gap-handle)    !important; transform: translateX(var(--handle-offset-x)); }
  body.project-page .header p2 { font-size: var(--m-p2-size) !important; line-height: var(--m-p2-lh) !important; margin-bottom: var(--m-gap-handle)    !important; transform: translateX(var(--handle-offset-x)); }

  /* Space below header */
  body.project-page .header + * { margin-top: var(--m-block-gap) !important; }

  /* Hide floating CTAs on mobile (we use project-nav buttons instead) */
  body.project-page .nav-buttons { display: none !important; }

  /* Hex panel sizing (match home) */
  body.project-page .gallery-hex {
    width: 94vw !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-width: 3px !important;
    box-shadow: 0 0 2rem rgba(0,210,255,0.6) !important;
  }

  /* Hero logo + title tune */
  body.project-page img.logo {
    width: min(78vw, 540px) !important;
    margin: 0 auto 1.25rem !important;
  }
  body.project-page .project-title {
    margin: 0 0 1rem 0 !important;
    padding: 0 12px !important;
    font-size: clamp(20px, 6vw, 28px) !important;
    text-align: left !important;     /* left edge consistency */
  }

  /* Copy blocks full-width, kill manual left/right offsets */
  body.project-page .copy,
  body.project-page .copy2 {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
    text-align: left !important;
  }

  /* Asset images scale to container, no weird offsets */
  body.project-page .asset img,
  body.project-page .asset2 img,
  body.project-page .asset3 img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    left: auto !important;
  }

  /* Case study grids: 2-col by default on mobile for density */
  body.project-page .grid-2,
  body.project-page .grid-3,
  body.project-page .grid-4,
  body.project-page .gallery.projects-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 0.75rem !important;
    padding: 0 8px !important;
    align-items: start !important;
  }

  /* Thumbs in those grids fill cell */
  body.project-page .gallery.projects-grid .thumb,
  body.project-page .grid-3 .thumb,
  body.project-page .grid-4 .thumb {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  body.project-page .gallery.projects-grid img { width: 100% !important; height: auto !important; }

  /* Tighten the “Spec”/section headings if you use them on project pages */
  body.project-page .gallery-content .p2,
  body.project-page .gallery-content .p3 {
    text-align: left !important;
    margin: 0 0 .5rem 0 !important;
    padding: 0 12px !important;
  }

  /* Project page action buttons */
  body.project-page .project-nav {
    display: flex !important;
    gap: 8px !important;
    padding: 0 12px !important;
    margin: 1rem 0 1.25rem !important;
  }
  body.project-page .project-nav a {
    flex: 1 1 auto !important;
    text-align: center !important;
    padding: 0.6rem 0.75rem !important;
  }

  /* Collapse to single column on very small phones */
  @media (max-width: 600px) {
    body.project-page .grid-2,
    body.project-page .grid-3,
    body.project-page .grid-4,
    body.project-page .gallery.projects-grid {
      grid-template-columns: 1fr !important;
    }
  }

  /* Touch QoL: same as home */
  @media (hover: none), (pointer: coarse) {
    body.project-page .gallery.projects-grid .thumb:hover { transform: none !important; }
  }

  /* Stack all case-study grids to single column */
  body.project-page .grid-2,
  body.project-page .grid-3,
  body.project-page .grid-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Put images first, text second */
  body.project-page .grid-2 > .asset,
  body.project-page .grid-2 > .asset2,
  body.project-page .grid-2 > .asset3,
  body.project-page .grid-3 > .asset,
  body.project-page .grid-3 > .asset2,
  body.project-page .grid-3 > .asset3,
  body.project-page .grid-4 > .asset,
  body.project-page .grid-4 > .asset2,
  body.project-page .grid-4 > .asset3 {
    order: 1 !important;
  }

  body.project-page .grid-2 > .copy,
  body.project-page .grid-2 > .copy2,
  body.project-page .grid-3 > .copy,
  body.project-page .grid-3 > .copy2,
  body.project-page .grid-4 > .copy,
  body.project-page .grid-4 > .copy2 {
    order: 2 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
    text-align: center !important;
  }

  /* Make images fill the line cleanly */
  body.project-page .asset img,
  body.project-page .asset2 img,
  body.project-page .asset3 img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    left: auto !important;
  }

   body.project-page .asset2 img{
    margin-top: 3vw !important;
   }
body.project-page .gallery.projects-grid {
    grid-template-columns: repeat(2, minmax(0,2fr)) !important;
    gap: 0.5rem !important;
  }
}

/* If the phone is super small, collapse back to 1 column */
@media (max-width: 600px) {
  body.project-page .gallery.projects-grid {
    grid-template-columns: 1fr !important;
  }

/* PROJECT PAGES ONLY — force gallery to 2 columns on all mobile sizes */
@media (max-width: 900px) {
  body.project-page .gallery.projects-grid,
  body.project-page .gallery-content > .gallery.projects-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 0.5rem !important;
  }
}

/* Re-assert at narrower breakpoints in case other rules fire later */
@media (max-width: 800px) {
  body.project-page .gallery.projects-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 600px) {
  body.project-page .gallery.projects-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

:root{
    --pp-gap-mobile: 1.25rem; /* ← tweak this value */
  }

  /* Text ABOVE → Image BELOW */
  body.project-page .copy + .asset,
  body.project-page .copy + .asset2,
  body.project-page .copy + .asset3,
  body.project-page .copy2 + .asset,
  body.project-page .copy2 + .asset2,
  body.project-page .copy2 + .asset3 {
    margin-top: var(--pp-gap-mobile) !important;
  }

  /* Image ABOVE → Text BELOW */
  body.project-page .asset + .copy,
  body.project-page .asset2 + .copy,
  body.project-page .asset3 + .copy,
  body.project-page .asset + .copy2,
  body.project-page .asset2 + .copy2,
  body.project-page .asset3 + .copy2 {
    margin-top: var(--pp-gap-mobile) !important;
  }

  /* HERO TITLE on project pages */
  body.project-page .gallery-content .hero h1 {
    font-size: clamp(28px, 9.6vw, 52px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  /* HEADER TITLE on project pages (if present) */
  body.project-page .header h1 {
    font-size: clamp(28px, 9.6vw, 52px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
  }

  /* Optional: the sub-lines in header, if you use them on project pages */
  body.project-page .header p  { font-size: clamp(14px,3.5vw, 18px) !important; line-height: 1.35 !important; }
  body.project-page .header p1 { font-size: clamp(13px, 4vw, 17px)   !important; line-height: 1.35 !important; }
  body.project-page .header p2 { font-size: clamp(13px, 4vw, 17px)   !important; line-height: 1.35 !important; }
}

 body.project-page .header {
  position: relative;
  top: -5vw;
    font-size: 4.4vw !important;   /* tweak this number */
    text-align: center;
    line-height: 1.25 !important;
    margin: 0 !important;
    margin-top: -2vw;
  }
  body.project-page .header * {
    font-size: inherit !important; /* makes h, p, p1 follow the header size */
    line-height: inherit !important;
  }
  body.project-page img.logo {
    /* increase top margin to move logo downward */
    margin: 2rem auto 1.25rem !important; /* ← tweak first number */
  }
   body.project-page .gallery-hex { margin-top: -12vw !important; }

/* --- Fix: prevent project-page button/footer overlap --- */
body.project-page footer {
  position: static !important;   /* back to normal flow */
  bottom: auto !important;
  margin-top: 2rem !important;   /* space above footer */
}

body.project-page .project-nav {
  margin-bottom: 2rem !important; /* space below the buttons */
}

@media (min-width: 901px) {
  .product-page .gallery-hex,
  .product-page .gallery,
  .product-page .projects-grid {
    margin-top: 0 !important;
    top: auto !important;
    transform: none !important;
  }
}

/* ---- MOBILE-ONLY NUDGE (product pages only) ---- */
@media (max-width: 900px) {
  .product-page .gallery-hex {
    margin-top: -32px; /* adjust to taste: -20 to -60px */
  }
}

/* =========================================================
   DESKTOP-ONLY FIXES (do not affect mobile)
   --------------------------------------------------------- */
@media (min-width: 901px) {
  /* stop hex from covering logo on desktop */
  .gallery-hex { margin-top: 0 !important; }

  /* put project-page header back in view on desktop */
  body.project-page .header { top: 0 !important; margin-top: -1vw !important; left: 1vw !important; }

  /* bring project-page hero logo back down on desktop */
  body.project-page img.logo { margin-top: 0 !important; }
}

/* ==== Brand grid buttons centered under thumbs ==== */
.brands-grid .brand-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;   /* center horizontally */
  text-align: center !important;
  width: 100% !important;
}

.brands-grid .brand-btn {
  margin: 0.5rem 0 0 0 !important;  /* space above button */
  align-self: center !important;    /* button centered under thumb */
}

/* Keep floating nav hidden */
  .nav-buttons { display: flex !important; }

  /* But keep project-nav buttons (Back to Work) visible */
  body.project-page .project-nav {
    display: flex !important;
  }