/* ================================================
   DISARM — Section Styles
   Loading screen, Hero, About, Projects, Experience
   ================================================ */

/* Loading screen styles moved to loading.css */


/* ============================================
   GLOBAL SHADER BACKGROUND
   React-rendered ShaderGradient container — fixed behind all page content
   ============================================ */
#shader-gradient-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

#shader-gradient-root canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}


/* ============================================
   01 — HERO SECTION
   Full-viewport video background + headline
   ============================================ */
.section--hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Video wrapper */
.hero-video-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portrait screens play the square cut of the video (see index.php). `cover`
   would crop a square down to its middle 2/3 or less and the shoe — which
   grows to ~90% of the frame width — would spill off both sides, so show it
   whole. Both videos are a flat #0a0a0a, so the bars around it are invisible. */
@media (max-aspect-ratio: 1/1) {
  .hero-video-wrapper {
    background-color: #0a0a0a;
  }

  .hero-video {
    object-fit: contain;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 20, 28, 0.35) 0%,
    rgba(13, 20, 28, 0.10) 40%,
    rgba(13, 20, 28, 0.50) 100%
  );
  pointer-events: none;
}

/* Top-right label */
.hero-top-label {
  position: absolute;
  top: var(--space-3xl);
  right: var(--container-padding);
  z-index: var(--z-base);
}

.hero-top-label span {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: lowercase;
  color: var(--color-text-muted);
  font-weight: var(--weight-light);
}

/* Content */
.hero-content {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  padding: 0 var(--container-padding);
}

.hero-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: 10px; /* was var(--space-lg) / 24px — tightened to reduce excess vertical gaps */
}

.hero-label-icon {
  width: 24px;
  height: auto;
}

.hero-title {
  font-family: var(--font-callout);
  font-size: clamp(48px, 8vw, 98px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-6);
  text-transform: uppercase;
  max-width: 800px;
  /* Lines stack vertically */
  display: flex;
  flex-direction: column;
}


.hero-subtitle {
  font-family: var(--font-secondary);
  font-size: 24px;
  font-weight: var(--weight-medium);
  color: var(--color-6);
  margin-top: var(--space-md);
}

/* Overflow mask for each line — hides text above the clip */
.hero-title__line-wrap {
  display: block;
  overflow: hidden;
  line-height: 1.12; /* keep descenders visible */
}

/* The actual text — GSAP will animate translateY from -110% → 0 */
.hero-title__line {
  display: block;
  will-change: transform;
}

/* Icon starts hidden — GSAP reveals it */
.hero-label--anim {
  will-change: opacity, transform;
}


/* ============================================
   02 — WELCOME SECTION
   ============================================ */
.section--welcome {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: transparent; /* Let the body background show through */
  overflow: hidden;
}

.welcome-bg-hatch-1 {
  position: absolute;
  inset: 0;
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
  z-index: 1;
  opacity: 1;
  pointer-events: none;
}

.welcome-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  /* Bottom padding is intentionally small (not 5rem): the fixed, transparent
     .site-header (--header-height: 88px = 5.5rem) sits on top of this
     section, so the space that visually reads as empty starts below it,
     not at the very top of the 100vh box. To make the shoe/text optically
     centered in that visible area — not the raw viewport — top padding
     must exceed bottom padding by roughly --header-height (7rem - 5.5rem
     ≈ 1.5rem). Verified by measuring rendered element positions. */
  padding: 7rem var(--container-padding) 1.5rem;
}

.welcome-visuals {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.welcome-shoe-img {
  position: relative;
  z-index: 2;
  /* The source PNG has ~30% transparent padding baked in around the shoe
     (measured: content is 68.52% of canvas width, roughly centered).
     Scale up by 100/68.52 ≈ 146% so the visible shoe — not the transparent
     canvas — reaches the edges of .welcome-visuals. The extra transparent
     margin overflows harmlessly (no crop/clip needed). */
  width: 146%;
  max-width: none;
  height: auto;
  object-fit: contain;
}

.welcome-content {
  flex: 0 0 50%;
  width: 50%;
  padding-left: 6vw;
  z-index: 10;
}

.welcome-title {
  font-family: var(--font-secondary);
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 10px; /* was var(--space-lg) / 24px — tightened to reduce excess vertical gaps */
  letter-spacing: 0.05em;
}

.welcome-desc {
  color: var(--color-5);
  /* 03_core body copy — DSRM Type Guide: Saira Thin 17.01 / 20.41.
     Same fixed leading as .about-panel-desc / .pj-desc (was 1.7). */
  line-height: var(--t-core-lh);
  max-width: 500px;
}

.welcome-desc p {
  margin-bottom: var(--space-md);
  font-family: 'Saira', sans-serif;
  font-size: 15px;
  font-weight: 100;
  color: inherit;
  line-height: inherit;
}


/* ============================================
   03 — ABOUT SECTION
   3-image Y-intersection + cyan slanted panel
   ============================================ */
.section--about {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
}

/* Full-page container */
.about-inner-new {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ----------------------------------
   LEFT: Y-DIVIDER & IMAGES
   ---------------------------------- */
.about-visuals {
  position: absolute;
  left: 0;
  top: 0;
  width: 55%;
  height: 100%;
}

/* Center of the Y relative to .about-visuals */
.y-divider {
  position: absolute;
  top: 53%;
  left: 48%;
  width: 0;
  height: 0;
  z-index: 10;
}

.y-line {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  transform-origin: 0 0;
}

/* Straight UP */
.y-line-top {
  width: 1px;
  height: 295px;
  top: -300px;
  left: -0.5px;
}

/* Bottom-LEFT diagonal at 60° (points down-left) */
.y-line-bottom-left {
  width: 1px;
  height: 295px;
  top: 0;
  left: -0.5px;
  transform: rotate(60deg);
}

/* Bottom-RIGHT diagonal at -60° (points down-right) */
.y-line-bottom-right {
  width: 1px;
  height: 295px;
  top: 0;
  left: -0.5px;
  transform: rotate(-60deg);
}

.y-center-logo {
  position: absolute;
  top: 53%;
  left: 48%;
  transform: translate(-50%, -50%);
  z-index: 50; /* Superposición máxima */
  width: 32px;
  height: 24px;
  object-fit: contain;
}

/* ----------------------------------
   IMAGES — absolute within .about-visuals
   ---------------------------------- */
.about-img-wrap {
  position: absolute;
  width: 33%; /* Shrunk from 38% */
  height: auto;
  z-index: 2; /* Sits behind the teal panel */
  opacity: 0; /* GSAP controls */
}

.about-img-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.about-img-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Saira', sans-serif;
  font-size: 10px;
  font-weight: 100;
  color: #e2e9e9;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap; /* keep "Performance Design" on a single row */
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 10;
}

/* Only two-line label — sits lower than the single-line ones */
.img-bottom .about-img-label {
  top: 100%;
}

/* TOP-LEFT quadrant — technical wireframe shoe */
.img-left {
  bottom: 27%;
  right: 52%;
  margin-bottom: 0;
  margin-right: 0;
}

/* TOP-RIGHT quadrant — particle dots shoe */
.img-right {
  bottom: 29%;
  left: 48%;
  margin-bottom: 0;
  margin-left: 0;
}

/* BOTTOM quadrant — jacket */
.img-bottom {
  top: 53%;
  /* Centred on the Y (48%) by offset, not translateX(-50%): the scroll timeline
     tweens x on this element and would overwrite that transform. */
  left: 20.5%; /* 48% − 55% / 2 */
  margin-top: 0;
  width: 55%;
}

/* ----------------------------------
   RIGHT: TEAL PANEL
   Starts at 52% from left, diagonal left edge
   ---------------------------------- */
.about-text-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
  overflow: visible;
  z-index: 3; /* Teal panel and text sit above images */
}

/* Wraps shadow + bg + content so the panel's height tracks the
   text instead of a fixed vh/min-height, with breathing room
   above/below via padding. */
.about-panel-wrap {
  position: relative;
  width: 100%;
  padding: clamp(32px, 5vh, 56px) 0;
}

/* The visible teal rectangle with diagonal left cut */
.about-panel-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -5%;
  width: 110%;
  /* Parallelogram: diagonal top-left corner */
  clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(to bottom, transparent 0%, transparent 10%, rgba(158, 229, 222, 0.45) 20%, rgba(158, 229, 222, 0.45) 100%);
  filter: blur(15px);
  transform: translate(-12px, 12px); /* Moves it left and down to peek out */
  z-index: 3;
}

.about-panel-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -5%; /* slight bleed off right edge */
  width: 110%;
  background-color: #9ee5de;
  /* Parallelogram: diagonal top-left corner */
  clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
  z-index: 4;
  /* GSAP slides this from xPercent:110 to 0 */
}

.about-panel-content {
  position: relative;
  z-index: 5;
  /* Indent enough to clear the diagonal cut */
  padding-left: clamp(100px, 22%, 200px);
  padding-right: var(--container-padding);
  pointer-events: auto;
  opacity: 0; /* GSAP reveals */
}

.about-panel-title {
  font-family: 'Saira', sans-serif;
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  color: #0d141c;
  line-height: 1.3;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
  max-width: 380px; /* Reducido para forzar el salto de línea natural parecido a los <br> */
}

.about-panel-desc {
  font-family: 'Saira', sans-serif;
  font-size: 15px;
  font-weight: 100;
  color: rgba(13, 20, 28, 0.75);
  /* 03_core body copy — shared fixed leading (was 1.7). */
  line-height: var(--t-core-lh);
  max-width: 420px;
}

.about-panel-desc p {
  margin-bottom: 20px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}

.about-panel-desc p:last-child {
  margin-bottom: 0;
}

.about-services-wrap {
  max-width: 420px;
  text-align: right;
  margin-top: 30px;
}

.about-services-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Saira', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #0d141c;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.about-services-btn:hover {
  opacity: 0.7;
}

.about-services-icon {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Bar height matches the x-height of the 15px Saira label (~8px) */
.about-bar-main {
  width: 20px;
  height: 8px;
  background-color: #0d141c;
  transform: skewX(45deg);
}

.about-bar-cyan {
  width: 5px;
  height: 8px;
  background-color: #0d141c; /* Segmento extra del mismo color, simulando el gráfico fragmentado */
  transform: skewX(45deg);
}

.about-services-icon.icon-white .about-bar-main,
.about-services-icon.icon-white .about-bar-cyan {
  background-color: #ffffff;
}


/* ============================================
   03 — PROJECTS SECTION
   Grid gallery of portfolio thumbnails
   ============================================ */
.section--projects {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: transparent; /* Let shader gradient show through */
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 100vh;
  gap: 2px;
}

.project-card {
  position: relative;
  overflow: hidden;
  opacity: 0; /* GSAP reveals */
  /* Desktop scrub animates scale + opacity on every card: pin each one to its
     own compositor layer so the greyscale photo isn't re-rasterised on every
     scale step (mobile.css resets this — nothing animates there). */
  will-change: transform, opacity;
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
  filter: grayscale(100%) brightness(0.7);
}

.project-card:hover img {
  transform: scale(1.05);
  filter: grayscale(0%) brightness(1);
}

.project-card.bg-black {
  background-color: #040911;
}

.project-card.bg-white {
  background-color: #fff;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 4px, #f0f0f0 4px, #f0f0f0 5px);
}

.projects-panel-wrap {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  min-height: 350px;
  display: flex;
  align-items: center;
  z-index: 3; /* Sits above images */
  filter: drop-shadow(10px 10px 30px rgba(0, 0, 0, 0.8)); /* Sombra oscura a todo el bloque */
  /* The wrapper and the text box are rectangles wider than the slanted mint
     shape — let clicks through them so every visible bit of a photo opens
     the projects page. Only the mint shape and the link catch the pointer. */
  pointer-events: none;
}

.projects-panel-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  width: calc(100% + 20px);
  background-color: #9ee5de;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  z-index: 1;
  will-change: transform; /* slides in on scrub (xPercent) */
  pointer-events: auto; /* hit-testing follows the clip-path */
}

.projects-panel-content {
  position: relative;
  z-index: 5;
  padding: 40px 40px 40px var(--container-padding);
  pointer-events: none;
  width: 100%; 
}

.projects-panel-link {
  pointer-events: auto;
}

.projects-panel-title {
  font-family: var(--font-callout);
  font-size: 56px;
  font-weight: 700; 
  font-style: italic;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(13, 20, 28, 0.85);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  line-height: 1;
}

.projects-panel-desc {
  font-family: 'Saira', sans-serif;
  font-size: 14px;
  font-weight: 100;
  color: rgba(13, 20, 28, 0.75);
  line-height: 18.5px;
  letter-spacing: 0.02em;
  max-width: clamp(300px, 35vw, 500px);
  margin-bottom: 30px;
}

.projects-panel-desc p {
  margin-bottom: 20px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}

.projects-panel-desc p:last-child {
  margin-bottom: 0;
}

.projects-services-wrap {
  max-width: clamp(300px, 35vw, 500px);
  text-align: right;
  margin-top: 30px;
}

/* Remove old projects-panel-link stuff */


/* ============================================
   04 — PROCESS SECTION
   ============================================ */
.section--process {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: transparent;
  padding: var(--space-3xl) 0;
  overflow: hidden;
}

.process-bottom-area {
  position: relative;
  max-width: 82%;
  margin: 20px auto 0;
  width: 100%;
  padding: 0 var(--container-padding);
  display: grid;
  align-items: center;
  justify-items: start;
}

.process-bottom-area > * {
  grid-column: 1;
  grid-row: 1;
}

.process-bg-lines-img {
  width: 100%;
  height: auto;
  pointer-events: none; /* Para que el botón de arriba se pueda clickear sin problema */
}

.process-header {
  position: relative;
  z-index: 5;
  text-align: center;
  margin-bottom: 70px;
  padding: 0 var(--container-padding);
}

.process-title {
  font-family: 'Saira', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #e0e0e0;
  line-height: 1.3;
  margin-bottom: 1.5rem; /* was var(--space-lg) / 24px — tightened to reduce excess vertical gaps */
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.process-desc {
  font-family: 'Saira', sans-serif;
  font-size: 14px;
  font-weight: 100;
  color: var(--color-text-muted); /* Darker gray */
  /* 03_core body copy — shared fixed leading (was 1.7). */
  line-height: var(--t-core-lh);
  max-width: 950px;
  margin: 0 auto;
}

.process-desc p {
  margin-bottom: 15px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.process-timeline-wrap {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 82%; /* Narrower to match PDF */
  margin: 0 auto 60px;
  padding: 0 var(--container-padding);
}

.timeline-nodes {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  gap: 15px;
}

.timeline-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.node-num {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: #9ee5de;
  line-height: 1;
  margin-bottom: 7px;
  letter-spacing: 0.05em;
}

.node-line-wrap {
  width: 100%;
  margin-bottom: 4px;
  position: relative;
}

/* Wedge that squares off the right end of .node-line along the 45° diagonal
   drawn by .node-line::after, so bar and diagonal read as one shape. */
.node-line-wrap::before {
  content: '';
  position: absolute;
  left: 75%; /* = .node-line width */
  bottom: 0;
  width: 4px; /* = .node-line height */
  height: 4px;
  background-color: #9ee5de;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 3;
}

.node-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px; /* Grueso */
  width: 75%; /* Horizontal part */
  background-color: #9ee5de;
  z-index: 3;
}

.node-line::after {
  content: '';
  position: absolute;
  left: 100%;
  bottom: 0;
  width: 56.5px; /* Diagonal más larga para pasar por encima del número */
  height: 1px; /* Fino */
  background-color: #9ee5de;
  transform: rotate(-45deg);
  transform-origin: left bottom;
}

.node-label {
  font-family: var(--font-primary);
  font-size: 9px;
  font-weight: var(--weight-medium);
  color: var(--color-5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

.timeline-node:first-child .node-line::before {
  content: '';
  position: absolute;
  left: calc(100% + 40px); /* Justo al final de la primera diagonal */
  bottom: 40px; /* A la altura del final de la diagonal */
  width: 100vw;
  height: 1px;
  background-color: rgba(158, 229, 222, 0.4);
  z-index: 1;
}

.timeline-connector {
  display: none;
}

.process-action {
  position: relative;
  z-index: 5;
  text-align: right;
  width: 100%;
  padding-right: 4rem;
}

.process-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: #fff;
  text-decoration: none;
}

.process-btn:hover {
  text-decoration: underline;
}

/* Icon sized to the x-height of the 13px label (~6px), a bit narrower than
   the services icon */
.process-btn .about-bar-main {
  width: 15px;
  height: 6px;
}

.process-btn .about-bar-cyan {
  width: 4px;
  height: 6px;
}


/* ============================================
   05 — EXPERIENCE & FOCUS SECTION
   Text + Brands logos grid + BG image
   ============================================ */
.section--experience {
  position: relative;
  min-height: 100vh;
  background-color: transparent; /* Let shader gradient show through */
  padding: var(--space-xl) var(--container-padding);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}





.section--experience .section-bar,
.section--experience .experience-content {
  position: relative;
  z-index: 1;
}

.experience-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.experience-title {
  font-family: var(--font-secondary);
  font-size: 24px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
}

.experience-desc {
  font-family: 'Saira', sans-serif;
  font-size: 14px;
  font-weight: 100;
  color: var(--color-5);
  line-height: var(--leading-relaxed);
  margin-bottom: 3rem;
  max-width: 650px;
}

.experience-desc p {
  margin-bottom: 25px;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}

.experience-desc p:last-child {
  margin-bottom: 0;
}

.brands-label {
  font-family: var(--font-primary);
  font-size: 12px;
  color: #ffffff; /* Blanco sin opacidad */
  margin-bottom: 50px;
  font-weight: var(--weight-light);
  text-align: center;
  text-transform: none;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: center;
  justify-items: center;
  max-width: 750px;
  width: 100%;
}


/* ============================================
   05 — CONTACT / CREATE SECTION
   Let's Create Your Product Together
   ============================================ */
.section--contact {
  position: relative;
  min-height: 80vh;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 0;
  margin-bottom: 60px;
}

.contact-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  mix-blend-mode: screen;
  filter: brightness(0.7) contrast(1.3) sepia(0.7) hue-rotate(135deg) saturate(3);
  pointer-events: none;
  user-select: none;
}

.contact-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 var(--container-padding);
}

.contact-subtitle {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--weight-thin);
  color: var(--color-5);
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  will-change: transform, opacity;
}

.contact-title-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-title-small {
  font-family: var(--font-secondary);
  font-size: 24px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 2px;
  margin-left: 18px; /* Pushed to the right to align with the top of the C */
  will-change: transform, opacity;
}

.contact-title-large {
  font-family: var(--font-callout);
  font-size: clamp(50px, 10vw, 130px); /* Reduced size */
  font-weight: 700;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.contact-bottom-wrap {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.contact-desc {
  font-family: var(--font-primary);
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 5px;
  text-transform: uppercase;
  will-change: transform, opacity;
}

.contact-btn {
  /* The cyan fill is ::before, so it can grow from a sliver on the left to the
     full bar (js/main.js animates --fill from 0.05 to 1 on scroll) */
  --fill: 1;
  position: relative;
  isolation: isolate;
  color: #0d141c;
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 16px;
  padding: 2px 15px;
  text-align: right;
  text-decoration: none;
  transform: skewX(-20deg); /* Slanted button */
  transform-origin: top center;
  display: inline-block;
  will-change: transform, opacity;
  overflow: visible;
}

.contact-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #0df3e3; /* Bright cyan from the design */
  transform: scaleX(var(--fill));
  transform-origin: left center;
  transition: background-color var(--transition-fast);
}

.contact-btn:hover::before {
  background-color: #fff;
}

.contact-btn span {
  display: inline-block;
  transform: skewX(20deg); /* Un-slant the text */
  letter-spacing: 0.05em;
  will-change: opacity;
}

/* Footer Indicator for Contact Section */
.contact-footer-indicator {
  position: absolute;
  right: var(--container-padding);
  bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 5;
}

.indicator-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 15px;
}

.indicator-lines span {
  display: block;
  width: 20px;
  height: 1px;
  background-color: #0df3e3;
  transform: rotate(-45deg);
  transform-origin: right center;
}

.indicator-text-wrap {
  display: flex;
  align-items: center;
  gap: 15px;
}

.indicator-num {
  font-family: var(--font-primary);
  font-size: 12px;
  color: var(--color-5);
  letter-spacing: 0.1em;
}

.indicator-text {
  font-family: var(--font-primary);
  font-size: 10px;
  background-color: #0df3e3;
  color: #0d141c;
  padding: 3px 8px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
}


/* ============================================
   RESPONSIVE — SECTIONS
   ============================================ */

/* ---- Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  /* About */
  .about-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .about-text {
    max-width: 100%;
  }

  .disciplines-diagram {
    width: 380px;
    height: 345px;
  }

  .discipline-circle {
    width: 200px;
    height: 200px;
  }

  /* Projects */
  .projects-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .projects-left {
    position: relative;
    margin-bottom: 10px; /* was var(--space-lg) / 24px — tightened to reduce excess vertical gaps */
  }

  .projects-right {
    width: 100%;
    max-width: 100%;
  }

  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
  }

  /* Experience */
  .experience-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .experience-text p {
    max-width: 100%;
  }

  .brands-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Mobile / Small Tablet (≤ 768px) ---- */
@media (max-width: 768px) {
  /* Hero */
  .hero-content {
    padding-bottom: var(--space-3xl);
  }

  .hero-top-label {
    display: none;
  }

  /* About */
  .disciplines-diagram {
    width: 300px;
    height: 275px;
  }

  .discipline-circle {
    width: 160px;
    height: 160px;
  }

  .discipline-label {
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .disciplines-center-logo {
    width: 24px;
  }

  /* Projects */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }

  .project-card--tall {
    grid-row: span 1;
  }

  /* Experience */
  .brands-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  .section--projects,
  .section--about,
  .section--experience {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
}

/* ---- Mobile Small (≤ 480px) ---- */
@media (max-width: 480px) {
  /* About */
  .disciplines-diagram {
    width: 260px;
    height: 240px;
  }

  .discipline-circle {
    width: 140px;
    height: 140px;
  }

  /* Projects */
  .projects-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  /* Experience */
  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand-item img {
    max-width: 80px;
  }
}