:root {
  --black: #080706;
  --deep-black: #030303;
  --cream: #f3e9d8;
  --off-white: #f8f3ea;
  --warm-neutral: #c8b89f;
  --muted-gold: #b89b5e;
  --soft-brown: #6f5b45;
  --border: rgba(243, 233, 216, 0.18);

  --serif: "Cormorant Garamond", serif;
  --sans: "Inter", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  font-family: var(--sans);
  background: var(--black);
  color: var(--cream);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  width: 100%;
  display: block;
}

/* GRAIN */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.09;
  background-image: url("https://grainy-gradients.vercel.app/noise.svg");
}

/* ADVANCED CURSOR */

.cursor {
  position: fixed;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background: rgba(243,233,216,0.08);

  border: 1px solid rgba(243,233,216,0.65);

  backdrop-filter: blur(10px);

  pointer-events: none;

  z-index: 99999;

  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    width 0.35s ease,
    height 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease;

  mix-blend-mode: difference;
}

.cursor-text {
  font-size: 0.6rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: white;

  opacity: 0;

  transition: 0.25s ease;

  white-space: nowrap;
}

/* VIEW STATE */

.cursor.view {
  width: 110px;
  height: 110px;

  background: rgba(184,155,94,0.18);

  border-color: rgba(184,155,94,0.65);
}

.cursor.view .cursor-text {
  opacity: 1;
}

/* LINK STATE */

.cursor.link {
  width: 56px;
  height: 56px;

  background: rgba(243,233,216,0.12);
}

/* HIDE ON MOBILE */

@media (max-width: 850px) {
  .cursor {
    display: none;
  }
}

/* LOADER */
.loader {
  position: fixed;
  inset: 0;
  background: var(--deep-black);
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-inner {
  text-align: center;
  overflow: hidden;
}

.loader-inner p {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

/* NAV */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 86px;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  backdrop-filter: blur(18px);
  background: rgba(8, 7, 6, 0.35);
  border-bottom: 1px solid rgba(243, 233, 216, 0.08);
}

.nav-logo img {
  width: 52px;
  height: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.2rem);
}

.nav-links a {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(243, 233, 216, 0.75);
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--cream);
}

/* =========================================================
   HOME PAGE — CLEAN PREMIUM FINAL VERSION
   Ayotayo Samuel Olowoyo
========================================================= */

.home-page {
  --home-black: #070605;
  --home-charcoal: #0d0b09;
  --home-brown: #15100d;
  --home-card: rgba(244, 234, 216, 0.055);
  --home-card-soft: rgba(244, 234, 216, 0.025);

  --home-cream: #f4ead8;
  --home-white: #fff8ea;
  --home-muted: rgba(244, 234, 216, 0.68);
  --home-muted-soft: rgba(244, 234, 216, 0.48);

  --home-gold: #b89b5e;
  --home-gold-bright: #d6b86c;
  --home-green: #203527;
  --home-line: rgba(244, 234, 216, 0.13);

  background: var(--home-black);
  color: var(--home-cream);
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.home-page *,
.home-page *::before,
.home-page *::after {
  box-sizing: border-box;
}

.home-page main {
  background:
    radial-gradient(circle at 16% 8%, rgba(184, 155, 94, 0.13), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(32, 53, 39, 0.22), transparent 32rem),
    linear-gradient(180deg, #070605 0%, #15100d 42%, #080706 100%);
}

.home-page img {
  display: block;
  max-width: 100%;
}

.home-page h1,
.home-page h2,
.home-page h3 {
  font-family: var(--serif), "Cormorant Garamond", serif;
  color: var(--home-white);
  font-weight: 600;
  text-wrap: balance;
  font-kerning: normal;
}

.home-page p,
.home-page a,
.home-page span,
.home-page button {
  letter-spacing: 0.006em;
}

.home-page .eyebrow {
  margin: 0;
  color: var(--home-gold-bright);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* =========================================================
   FINAL HOME HERO FIX — CLEAN PORTFOLIO VERSION
   Paste this at the VERY BOTTOM of style.css
========================================================= */

body.home-page .hero {
  min-height: 100svh;
  padding: clamp(8rem, 12vw, 11rem) 5vw clamp(4rem, 7vw, 6rem);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

body.home-page .hero-grid {
  width: min(100%, 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

body.home-page .hero-content {
  width: min(100%, 1040px) !important;
  max-width: 1040px !important;
  position: relative;
  z-index: 3;
}

/* eyebrow */
body.home-page .hero .eyebrow,
body.home-page .hero-eyebrow {
  margin: 0 0 1.15rem !important;
  color: #d9bd6f;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.45 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}

/* main title — this is the real fix */
body.home-page .hero-title,
body.home-page .hero-content h1,
body.home-page .hero h1 {
  max-width: 980px !important;
  margin: 0 !important;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4rem, 7.2vw, 7.7rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  font-weight: 650;

  color: #fff8ea;
  text-wrap: balance;
}

/* paragraph */
body.home-page .hero-copy,
body.home-page .hero-content > p:not(.eyebrow) {
  max-width: 780px !important;
  margin: 1.55rem 0 0 !important;

  color: rgba(244, 234, 216, 0.78);
  font-size: clamp(1rem, 1.08vw, 1.12rem) !important;
  line-height: 1.75 !important;
  letter-spacing: 0.002em;
  font-weight: 500;
}

/* buttons */
body.home-page .hero-actions {
  margin-top: 2.1rem !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* tone down the huge ghost text at the bottom */
body.home-page .hero::after {
  font-size: clamp(4rem, 11vw, 9rem) !important;
  line-height: 0.9;
  opacity: 0.055 !important;
  bottom: 1.3rem !important;
}

/* keep the side info from crashing into content */
body.home-page .hero-side {
  position: absolute;
  right: 5vw;
  bottom: clamp(3rem, 6vw, 5rem);
  z-index: 3;

  color: #d9bd6f;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =========================================================
   HOME HERO RESPONSIVE FIX
========================================================= */

@media (max-width: 1100px) {
  body.home-page .hero {
    padding: 8rem 1.5rem 5rem;
  }

  body.home-page .hero-title,
  body.home-page .hero-content h1,
  body.home-page .hero h1 {
    max-width: 900px !important;
    font-size: clamp(3.7rem, 8vw, 6.6rem) !important;
    line-height: 1.12 !important;
  }

  body.home-page .hero-side {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 3rem;
  }
}

@media (max-width: 760px) {
  body.home-page .hero {
    min-height: auto;
    padding: 7.5rem 1rem 4.5rem;
  }

  body.home-page .hero-title,
  body.home-page .hero-content h1,
  body.home-page .hero h1 {
    max-width: 100% !important;
    font-size: clamp(3rem, 13vw, 4.8rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
  }

  body.home-page .hero-copy,
  body.home-page .hero-content > p:not(.eyebrow) {
    max-width: 100% !important;
    margin-top: 1.25rem !important;
    font-size: 0.96rem !important;
    line-height: 1.68 !important;
  }

  body.home-page .hero-actions {
    margin-top: 1.7rem !important;
  }

  body.home-page .hero::after {
    display: none;
  }
}

/* =========================================================
   HERO
========================================================= */

.home-page .hero {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid;
  align-items: end;

  padding: clamp(8rem, 11vw, 10rem) 5vw clamp(4.8rem, 7vw, 6rem);
}

.home-page .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -5;

  background:
    radial-gradient(circle at 74% 32%, rgba(184, 155, 94, 0.25), transparent 31rem),
    radial-gradient(circle at 18% 78%, rgba(32, 53, 39, 0.26), transparent 28rem),
    linear-gradient(135deg, #070605 0%, #17100d 54%, #050404 100%);
}

.home-page .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(7, 6, 5, 0.95) 0%, rgba(7, 6, 5, 0.58) 55%, rgba(7, 6, 5, 0.25) 100%),
    linear-gradient(to top, rgba(7, 6, 5, 0.92) 0%, rgba(7, 6, 5, 0.42) 54%, rgba(7, 6, 5, 0.14) 100%);
}

.home-page .hero-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.18;

  background-image:
    linear-gradient(rgba(244, 234, 216, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 234, 216, 0.075) 1px, transparent 1px);
  background-size: 108px 108px;

  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 72%, transparent 100%);
}

/* no circle decoration */
.home-page .hero::before {
  display: none !important;
  content: none !important;
}

.home-page .hero::after {
  content: "Brand / Packaging / Type / Detail";
  position: absolute;
  left: 5vw;
  bottom: -0.7rem;
  z-index: -1;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4.5rem, 12vw, 12.5rem);
  line-height: 0.82;
  letter-spacing: -0.055em;
  white-space: nowrap;

  color: rgba(244, 234, 216, 0.055);
  pointer-events: none;
}

.home-page .hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 1120px);
}

.home-page .hero-title,
.home-page .hero-content h1 {
  max-width: 1120px;
  margin: 1rem 0 0;

  font-size: clamp(4.1rem, 9.6vw, 10rem);
  line-height: 1.02;
  letter-spacing: -0.058em;
}

.home-page .hero-copy,
.home-page .hero-content p:not(.eyebrow) {
  max-width: 700px;
  margin-top: 1.35rem;

  color: rgba(244, 234, 216, 0.76);
  font-size: clamp(0.98rem, 1.08vw, 1.12rem);
  line-height: 1.75;
  font-weight: 500;
}

.home-page .hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.home-page .hero-side {
  position: absolute;
  right: 5vw;
  bottom: 4.5rem;

  display: grid;
  gap: 0.35rem;
  text-align: right;

  color: rgba(244, 234, 216, 0.62);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =========================================================
   BUTTONS
========================================================= */

.home-page .btn,
.home-page .featured-work-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;

  min-height: 48px;
  padding: 0.95rem 1.25rem;

  border-radius: 999px;
  border: 1px solid rgba(184, 155, 94, 0.42);

  background:
    linear-gradient(135deg, rgba(184, 155, 94, 0.28), rgba(244, 234, 216, 0.055));

  color: #fff8ea;
  text-decoration: none;

  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.135em;
  text-transform: uppercase;

  transition:
    transform 0.4s cubic-bezier(.19, 1, .22, 1),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.home-page .btn:hover,
.home-page .featured-work-btn:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 184, 108, 0.72);
  background:
    linear-gradient(135deg, rgba(184, 155, 94, 0.38), rgba(244, 234, 216, 0.08));

  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.36),
    0 0 36px rgba(184, 155, 94, 0.09);
}

.home-page .btn.secondary {
  background: rgba(244, 234, 216, 0.045);
  border-color: rgba(244, 234, 216, 0.16);
  color: rgba(244, 234, 216, 0.82);
}

.home-page .btn.secondary:hover {
  color: #fff8ea;
  border-color: rgba(184, 155, 94, 0.52);
}

/* =========================================================
   FEATURED WORK SECTION
   Fixed: no card should be taller than the screen
========================================================= */

.home-page .featured {
  position: relative;
  padding: clamp(85px, 8vw, 120px) 5vw;

  background:
    radial-gradient(circle at 86% 8%, rgba(184, 155, 94, 0.1), transparent 28rem),
    linear-gradient(180deg, #080706 0%, #12100d 100%);
}

.home-page .section-heading {
  max-width: 980px;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}

.home-page .section-heading h2 {
  max-width: 980px;
  margin: 0.85rem 0 0;

  font-size: clamp(3rem, 6vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.048em;
}

.home-page .project-list {
  width: min(100%, 1120px);
  margin: 0 auto;

  display: grid;
  gap: 1rem;
}

/* Main card */
.home-page .project-row {
  position: relative;
  overflow: hidden;

  width: 100%;
  min-height: 0;
  height: clamp(245px, 30vw, 340px);

  padding: 0.85rem;

  display: grid;
  grid-template-columns: 54px minmax(260px, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(0.9rem, 2vw, 1.5rem);
  align-items: stretch;

  color: inherit;
  text-decoration: none;

  border-radius: 30px;
  border: 1px solid rgba(244, 234, 216, 0.13);

  background:
    linear-gradient(145deg, rgba(244, 234, 216, 0.062), rgba(244, 234, 216, 0.02));

  box-shadow:
    0 24px 74px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  transition:
    transform 0.5s cubic-bezier(.19, 1, .22, 1),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.home-page .project-row::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 82% 18%, rgba(184, 155, 94, 0.12), transparent 28rem),
    linear-gradient(90deg, rgba(184, 155, 94, 0.045), transparent 50%);

  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.home-page .project-row:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 155, 94, 0.42);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.4),
    0 0 42px rgba(184, 155, 94, 0.07);
}

.home-page .project-row:hover::after {
  opacity: 1;
}

/* Number */
.home-page .project-number {
  position: relative;
  z-index: 2;

  padding-top: 0.35rem;

  color: var(--home-gold-bright);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

/* Text side */
.home-page .project-row-copy {
  position: relative;
  z-index: 2;

  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 1rem 0 0.75rem;
}

.home-page .project-row-copy h3 {
  margin: 0;

  font-size: clamp(2.35rem, 4.4vw, 4.7rem);
  line-height: 0.92;
  letter-spacing: -0.052em;
}

.home-page .project-row-copy p {
  max-width: 500px;
  margin: 0.85rem 0 0;

  color: rgba(244, 234, 216, 0.72);
  font-size: clamp(0.86rem, 1vw, 0.96rem);
  line-height: 1.62;
  font-weight: 500;
}

/* Image container */
.home-page .project-image-wrap {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;
  min-height: 0;

  border-radius: 23px;
  overflow: hidden;

  background: #11100d;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.26),
    inset 0 0 0 1px rgba(244, 234, 216, 0.08);
}

/* Image fit */
.home-page .project-image-wrap img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  border-radius: inherit;

  transition:
    transform 0.8s cubic-bezier(.19, 1, .22, 1),
    filter 0.35s ease;
}

.home-page .project-row:hover .project-image-wrap img {
  transform: scale(1.035);
  filter: brightness(1.05) contrast(1.04);
}

/* Better framing per project */
.home-page .project-row[href*="isokan"] .project-image-wrap img {
  object-position: center;
}

.home-page .project-row[href*="ecothreads"] .project-image-wrap img {
  object-position: center 38%;
}

.home-page .project-row[href*="hydraforce"] .project-image-wrap img {
  object-position: center;
}

.home-page .project-row[href*="sdn"] .project-image-wrap img {
  object-position: center;
}

/* View all button */
.home-page .featured-actions {
  width: min(100%, 1120px);
  margin: 1.75rem auto 0;

  display: flex;
  justify-content: flex-end;
}

/* =========================================================
   PRACTICE SECTION
========================================================= */

.home-page .practice {
  position: relative;
  padding: clamp(90px, 9vw, 135px) 5vw;

  background:
    radial-gradient(circle at 82% 22%, rgba(184, 155, 94, 0.16), transparent 31rem),
    radial-gradient(circle at 14% 78%, rgba(32, 53, 39, 0.24), transparent 28rem),
    linear-gradient(135deg, #0b0907 0%, #1a130f 60%, #080706 100%);

  overflow: hidden;
}

.home-page .practice::after {
  content: "Systems / Story / Detail";
  position: absolute;
  left: 5vw;
  bottom: -1.1rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4rem, 12vw, 12rem);
  line-height: 0.8;
  letter-spacing: -0.055em;

  color: rgba(244, 234, 216, 0.055);
  pointer-events: none;
}

.home-page .practice > h2 {
  max-width: 1120px;
  margin: 0.85rem 0 0;

  font-size: clamp(3.1rem, 6.4vw, 6.8rem);
  line-height: 0.9;
  letter-spacing: -0.052em;
}

.home-page .practice-grid {
  position: relative;
  z-index: 2;

  width: min(100%, 980px);
  margin-top: clamp(2rem, 4vw, 3rem);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-page .practice-grid span {
  min-height: 92px;
  padding: 1.25rem;

  display: flex;
  align-items: center;

  border-radius: 24px;
  border: 1px solid rgba(244, 234, 216, 0.16);

  background:
    linear-gradient(145deg, rgba(244, 234, 216, 0.075), rgba(244, 234, 216, 0.025));

  color: var(--home-white);
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(1.45rem, 2.1vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.035em;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

.home-page .practice-grid span:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 155, 94, 0.42);
  background:
    linear-gradient(145deg, rgba(184, 155, 94, 0.13), rgba(244, 234, 216, 0.035));
}

/* =========================================================
   CLOSING CTA
========================================================= */

.home-page .closing {
  min-height: 76vh;
  padding: clamp(90px, 9vw, 140px) 5vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  background:
    radial-gradient(circle at 74% 35%, rgba(184, 155, 94, 0.22), transparent 32rem),
    radial-gradient(circle at 18% 80%, rgba(32, 53, 39, 0.22), transparent 27rem),
    linear-gradient(135deg, #080706 0%, #1b1410 60%, #070605 100%);
}

.home-page .closing h2 {
  max-width: 900px;
  margin: 0;

  font-size: clamp(3.3rem, 7.8vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.052em;
}

.home-page .closing .btn {
  margin-top: 2rem;
}

/* =========================================================
   FOOTER — CONSISTENT
========================================================= */

.home-page .site-footer {
  position: relative;
  padding: clamp(4.5rem, 7vw, 7rem) 5vw 2rem;

  background:
    radial-gradient(circle at 85% 8%, rgba(184, 155, 94, 0.12), transparent 28rem),
    linear-gradient(180deg, #080706 0%, #050404 100%);

  border-top: 1px solid rgba(244, 234, 216, 0.12);
  color: var(--home-cream);
  overflow: hidden;
}

.home-page .site-footer::before {
  content: "Ayotayo Samuel Olowoyo";
  position: absolute;
  left: 5vw;
  top: 1.2rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: 0.84;
  letter-spacing: -0.058em;

  color: rgba(244, 234, 216, 0.045);
  white-space: nowrap;
  pointer-events: none;
}

.home-page .footer-top {
  position: relative;
  z-index: 2;

  width: min(100%, 960px);
  padding-bottom: clamp(2.8rem, 5vw, 4.5rem);
}

.home-page .footer-top h2 {
  margin: 0;

  font-size: clamp(3rem, 6.4vw, 6.8rem);
  line-height: 0.9;
  letter-spacing: -0.052em;
}

.home-page .footer-top p {
  max-width: 620px;
  margin-top: 1.1rem;

  color: rgba(244, 234, 216, 0.68);
  font-size: clamp(0.95rem, 1.08vw, 1.05rem);
  line-height: 1.72;
  font-weight: 500;
}

.home-page .footer-bottom {
  position: relative;
  z-index: 2;

  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 234, 216, 0.14);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.home-page .footer-bottom p {
  margin: 0;

  color: rgba(244, 234, 216, 0.66);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-page .footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.home-page .footer-links a {
  color: rgba(244, 234, 216, 0.76);
  text-decoration: none;

  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.home-page .footer-links a:hover {
  color: var(--home-gold-bright);
  transform: translateY(-2px);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .home-page .hero {
    min-height: auto;
    padding: 130px 1.25rem 82px;
  }

  .home-page .hero::after {
    left: 1.25rem;
    white-space: normal;
    font-size: clamp(3.5rem, 17vw, 7.5rem);
  }

  .home-page .hero-side {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 2rem;
    text-align: left;
  }

  .home-page .featured,
  .home-page .practice,
  .home-page .closing,
  .home-page .site-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .home-page .project-row {
    height: auto;
    min-height: 0;

    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .home-page .project-number {
    padding: 0.4rem 0.7rem 0;
  }

  .home-page .project-row-copy {
    padding: 0.8rem 0.7rem 1rem;
  }

  .home-page .project-image-wrap {
    order: -1;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .home-page .practice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .site-footer::before {
    left: 1.25rem;
  }
}

@media (max-width: 720px) {
  .home-page .hero {
    padding: 115px 1rem 75px;
  }

  .home-page .hero-title,
  .home-page .hero-content h1 {
    font-size: clamp(3.2rem, 17vw, 5.25rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
  }

  .home-page .hero-copy,
  .home-page .hero-content p:not(.eyebrow) {
    font-size: 0.95rem;
    line-height: 1.68;
  }

  .home-page .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .home-page .btn {
    width: 100%;
  }

  .home-page .section-heading h2,
  .home-page .practice > h2,
  .home-page .closing h2 {
    font-size: clamp(2.7rem, 13vw, 4.4rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
  }

  .home-page .project-list {
    gap: 0.9rem;
  }

  .home-page .project-row {
    padding: 0.6rem;
    border-radius: 24px;
  }

  .home-page .project-image-wrap {
    border-radius: 18px;
    aspect-ratio: 16 / 10;
  }

  .home-page .project-row-copy h3 {
    font-size: clamp(2.1rem, 11vw, 3.45rem);
  }

  .home-page .project-row-copy p {
    font-size: 0.9rem;
  }

  .home-page .practice-grid {
    grid-template-columns: 1fr;
  }

  .home-page .practice-grid span {
    min-height: 80px;
    border-radius: 20px;
  }

  .home-page .featured-actions {
    justify-content: stretch;
  }

  .home-page .featured-work-btn {
    width: 100%;
  }

  .home-page .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-page .footer-links {
    gap: 0.8rem;
  }
}

@media (max-width: 460px) {
  .home-page .hero {
    padding-top: 105px;
  }

  .home-page .hero-title,
  .home-page .hero-content h1 {
    font-size: clamp(3rem, 18vw, 4.7rem);
  }

  .home-page .project-image-wrap {
    aspect-ratio: 4 / 3;
  }

  .home-page .site-footer::before {
    white-space: normal;
    font-size: clamp(3rem, 17vw, 5rem);
  }
}

/* =========================================================
   HOME HERO TEXT SPACING FIX
   Better rhythm, cleaner hierarchy, less cramped
========================================================= */

.home-page .hero {
  padding-top: clamp(145px, 13vh, 170px);
  padding-bottom: clamp(70px, 9vh, 95px);
}

.home-page .hero-content {
  width: min(100%, 1120px);
}

/* Eyebrow */
.home-page .hero-content .eyebrow {
  margin: 0 0 clamp(1.1rem, 1.8vw, 1.6rem);

  font-size: clamp(0.68rem, 0.72vw, 0.76rem);
  line-height: 1.2;
  letter-spacing: 0.17em;
}

/* Main headline */
.home-page .hero-content h1,
.home-page .hero-title {
  margin: 0;

  max-width: 1080px;

  font-size: clamp(4.7rem, 8.6vw, 9.2rem);
  line-height: 0.86;
  letter-spacing: -0.055em;

  text-wrap: balance;
}

/* Paragraph */
.home-page .hero-copy,
.home-page .hero-content p.hero-copy {
  max-width: 720px;

  margin-top: clamp(1.45rem, 2.3vw, 2rem);

  font-size: clamp(0.98rem, 1.05vw, 1.12rem);
  line-height: 1.72;
  letter-spacing: 0.005em;

  color: rgba(243, 233, 216, 0.76);
}

/* Buttons */
.home-page .hero-actions {
  margin-top: clamp(2rem, 3vw, 2.65rem);

  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Side selected works text */
.home-page .hero-side {
  position: absolute;
  right: 5vw;
  bottom: clamp(3rem, 6vh, 5rem);

  display: grid;
  gap: 0.35rem;

  text-align: right;
  z-index: 3;
}

.home-page .hero-side span {
  color: rgba(243, 233, 216, 0.82);

  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.home-page .hero-side span:first-child {
  color: var(--home-gold);
}

/* Keep the huge background text low and less distracting */
.home-page .hero::after {
  bottom: -0.35rem;
  opacity: 0.75;
}

/* =========================================================
   HERO RESPONSIVE SPACING
========================================================= */

@media (max-width: 1050px) {
  .home-page .hero {
    padding: 135px 1.2rem 85px;
  }

  .home-page .hero-content h1,
  .home-page .hero-title {
    max-width: 920px;
    font-size: clamp(4rem, 12vw, 7.4rem);
    line-height: 0.88;
  }

  .home-page .hero-copy,
  .home-page .hero-content p.hero-copy {
    max-width: 680px;
  }

  .home-page .hero-side {
    position: relative;
    right: auto;
    bottom: auto;

    margin-top: 3rem;

    text-align: left;
  }
}

@media (max-width: 700px) {
  .home-page .hero {
    padding: 118px 1rem 72px;
  }

  .home-page .hero-content .eyebrow {
    margin-bottom: 1rem;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }

  .home-page .hero-content h1,
  .home-page .hero-title {
    font-size: clamp(3.4rem, 16vw, 5.5rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
  }

  .home-page .hero-copy,
  .home-page .hero-content p.hero-copy {
    margin-top: 1.25rem;

    max-width: 100%;

    font-size: 0.92rem;
    line-height: 1.66;
  }

  .home-page .hero-actions {
    margin-top: 1.65rem;
    gap: 0.75rem;
  }

  .home-page .hero-side {
    margin-top: 2.4rem;
  }
}

@media (max-width: 460px) {
  .home-page .hero-content h1,
  .home-page .hero-title {
    font-size: clamp(3rem, 17vw, 4.7rem);
    line-height: 0.92;
  }

  .home-page .hero-copy,
  .home-page .hero-content p.hero-copy {
    font-size: 0.88rem;
  }
}

/* =========================================================
   GLOBAL FOOTER — ALL PAGES EXCEPT HOME
   Clean, premium, consistent portfolio footer
========================================================= */

body:not(.home-page) .site-footer {
  position: relative;
  overflow: hidden;

  padding: clamp(4.5rem, 7vw, 7rem) 5vw 2rem;

  background:
    radial-gradient(circle at 82% 8%, rgba(184, 155, 94, 0.13), transparent 30rem),
    radial-gradient(circle at 16% 82%, rgba(32, 53, 39, 0.2), transparent 28rem),
    linear-gradient(180deg, #0a0807 0%, #050404 100%);

  border-top: 1px solid rgba(244, 234, 216, 0.12);
  color: #f4ead8;
}

/* Soft oversized name in background */
body:not(.home-page) .site-footer::before {
  content: "Ayotayo Samuel Olowoyo";
  position: absolute;
  left: 5vw;
  top: 1rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  font-weight: 600;

  color: rgba(244, 234, 216, 0.045);
  white-space: nowrap;
  pointer-events: none;
}

/* Top footer content */
body:not(.home-page) .footer-top {
  position: relative;
  z-index: 2;

  width: min(100%, 980px);
  padding-bottom: clamp(2.8rem, 5vw, 4.5rem);
}

body:not(.home-page) .footer-top h2 {
  margin: 0;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(3rem, 6.4vw, 6.8rem);
  line-height: 0.9;
  letter-spacing: -0.052em;
  font-weight: 600;

  color: #fff8ea;
  text-wrap: balance;
}

body:not(.home-page) .footer-top p {
  max-width: 650px;
  margin-top: 1.15rem;

  color: rgba(244, 234, 216, 0.68);
  font-size: clamp(0.95rem, 1.08vw, 1.05rem);
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* Bottom row */
body:not(.home-page) .footer-bottom {
  position: relative;
  z-index: 2;

  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 234, 216, 0.14);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

body:not(.home-page) .footer-bottom p {
  margin: 0;

  color: rgba(244, 234, 216, 0.66);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Social links */
body:not(.home-page) .footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}

body:not(.home-page) .footer-links a {
  position: relative;

  color: rgba(244, 234, 216, 0.76);
  text-decoration: none;

  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

body:not(.home-page) .footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.28rem;

  width: 100%;
  height: 1px;

  background: #d6b86c;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

body:not(.home-page) .footer-links a:hover {
  color: #d6b86c;
  transform: translateY(-2px);
}

body:not(.home-page) .footer-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

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

@media (max-width: 900px) {
  body:not(.home-page) .site-footer {
    padding: 4.5rem 1.25rem 2rem;
  }

  body:not(.home-page) .site-footer::before {
    left: 1.25rem;
    font-size: clamp(3.6rem, 14vw, 7rem);
    white-space: normal;
  }

  body:not(.home-page) .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  body:not(.home-page) .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  body:not(.home-page) .site-footer {
    padding: 4rem 1rem 1.6rem;
  }

  body:not(.home-page) .footer-top h2 {
    font-size: clamp(2.7rem, 14vw, 4.4rem);
    line-height: 0.94;
    letter-spacing: -0.045em;
  }

  body:not(.home-page) .footer-top p {
    font-size: 0.9rem;
    line-height: 1.65;
  }

  body:not(.home-page) .footer-bottom p,
  body:not(.home-page) .footer-links a {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
  }

  body:not(.home-page) .footer-links {
    gap: 0.8rem;
  }
}



/* =========================================================
   WORK PAGE — CLEAN RESPONSIVE PROJECT GALLERY FIX
========================================================= */

.work-page {
  background: #080706;
  color: #f3e9d8;
  overflow-x: hidden;
}

.work-page main {
  background:
    radial-gradient(circle at 20% 8%, rgba(184, 155, 94, 0.16), transparent 28rem),
    radial-gradient(circle at 82% 22%, rgba(36, 54, 42, 0.2), transparent 30rem),
    linear-gradient(180deg, #080706 0%, #11100d 46%, #080706 100%);
}

/* =========================================================
   WORK HERO
========================================================= */

.work-hero {
  min-height: 82vh;
  padding: 150px 5vw 90px;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}

.work-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 30%, rgba(184, 155, 94, 0.18), transparent 30rem),
    linear-gradient(135deg, rgba(8, 7, 6, 0.98), rgba(26, 20, 16, 0.85));
  z-index: 0;
}

.work-hero > div {
  position: relative;
  z-index: 1;
  max-width: 1120px;
}

.work-hero .eyebrow {
  color: #b89b5e;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.work-hero h1 {
  margin-top: 1rem;
  max-width: 1050px;
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4rem, 8.6vw, 9.4rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: #fff8ea;
  text-wrap: balance;
}

.work-hero p:not(.eyebrow) {
  max-width: 620px;
  margin-top: 1.4rem;
  color: rgba(243, 233, 216, 0.72);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.75;
}


/* =========================================================
   WORK PAGE — FINAL HERO TEXT FIX
   Paste at the VERY BOTTOM of style.css
========================================================= */

body.work-page .work-hero,
body.work-page .page-hero,
body.work-page .hero {
  min-height: 86svh !important;
  padding: clamp(8rem, 11vw, 10rem) 5vw clamp(4rem, 7vw, 6rem) !important;

  display: flex !important;
  align-items: center !important;

  position: relative !important;
  overflow: hidden !important;
}

body.work-page .work-hero-content,
body.work-page .page-hero-content,
body.work-page .hero-content {
  width: min(100%, 1080px) !important;
  max-width: 1080px !important;
  position: relative !important;
  z-index: 3 !important;
}

/* eyebrow */
body.work-page .work-hero .eyebrow,
body.work-page .page-hero .eyebrow,
body.work-page .hero .eyebrow {
  margin: 0 0 1.15rem !important;

  color: #d9bd6f !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* main headline — fixes touching */
body.work-page .work-hero h1,
body.work-page .page-hero h1,
body.work-page .hero h1,
body.work-page .work-hero-title,
body.work-page .page-title {
  max-width: 980px !important;
  margin: 0 !important;

  font-family: var(--serif), "Cormorant Garamond", serif !important;
  font-size: clamp(4rem, 7.35vw, 7.75rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
  font-weight: 650 !important;

  color: #fff8ea !important;
  text-wrap: balance !important;
}

/* intro text */
body.work-page .work-hero p:not(.eyebrow),
body.work-page .page-hero p:not(.eyebrow),
body.work-page .hero p:not(.eyebrow) {
  max-width: 720px !important;
  margin: 1.45rem 0 0 !important;

  color: rgba(244, 234, 216, 0.76) !important;
  font-size: clamp(0.98rem, 1.08vw, 1.1rem) !important;
  line-height: 1.7 !important;
  letter-spacing: 0.002em !important;
  font-weight: 500 !important;
}

/* =========================================================
   WORK PAGE — TABLET
========================================================= */

@media (max-width: 1100px) {
  body.work-page .work-hero,
  body.work-page .page-hero,
  body.work-page .hero {
    min-height: auto !important;
    padding: 8rem 1.5rem 5rem !important;
  }

  body.work-page .work-hero h1,
  body.work-page .page-hero h1,
  body.work-page .hero h1,
  body.work-page .work-hero-title,
  body.work-page .page-title {
    max-width: 900px !important;
    font-size: clamp(3.6rem, 8.4vw, 6.6rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
  }
}

/* =========================================================
   WORK PAGE — MOBILE
========================================================= */

@media (max-width: 700px) {
  body.work-page .work-hero,
  body.work-page .page-hero,
  body.work-page .hero {
    padding: 7.2rem 1rem 4.2rem !important;
  }

  body.work-page .work-hero h1,
  body.work-page .page-hero h1,
  body.work-page .hero h1,
  body.work-page .work-hero-title,
  body.work-page .page-title {
    max-width: 100% !important;
    font-size: clamp(3rem, 13.5vw, 4.8rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
  }

  body.work-page .work-hero p:not(.eyebrow),
  body.work-page .page-hero p:not(.eyebrow),
  body.work-page .hero p:not(.eyebrow) {
    max-width: 100% !important;
    margin-top: 1.15rem !important;
    font-size: 0.94rem !important;
    line-height: 1.66 !important;
  }

  body.work-page .work-hero .eyebrow,
  body.work-page .page-hero .eyebrow,
  body.work-page .hero .eyebrow {
    font-size: 0.66rem !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 0.8rem !important;
  }
}


/* =========================================================
   WORK GALLERY
========================================================= */

.work-gallery {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 0 5vw 130px;

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 1.7vw, 1.5rem);
  align-items: start;
}

/* =========================================================
   PROJECT CARD BASE
========================================================= */

.work-card {
  grid-column: span 6;
  display: block;
  text-decoration: none;
  color: inherit;

  padding: 0.65rem;
  border-radius: 30px;

  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.075), rgba(243, 233, 216, 0.025));

  border: 1px solid rgba(243, 233, 216, 0.14);

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  transition:
    transform 0.55s cubic-bezier(.19, 1, .22, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.work-card:hover {
  transform: translateY(-8px);
  border-color: rgba(184, 155, 94, 0.42);
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.42),
    0 0 44px rgba(184, 155, 94, 0.08);
}

/* Big cards */
.work-card.large {
  grid-column: span 12;
}

/* Archive card */
.work-card.archive {
  grid-column: span 6;
}

/* =========================================================
   IMAGE WRAPPER
========================================================= */

.work-image {
  width: 100%;
  overflow: hidden;
  border-radius: 23px;
  background: #11100d;
}

/* default image */
.work-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;

  transition:
    transform 0.85s cubic-bezier(.19, 1, .22, 1),
    filter 0.45s ease;
}

.work-card:hover .work-image img {
  transform: scale(1.035);
  filter: brightness(1.04) contrast(1.04);
}

/* =========================================================
   PROJECT-SPECIFIC IMAGE FITS
========================================================= */

/* ISOKAN billboard — wide hero image */
.work-card[href*="isokan"] .work-image {
  aspect-ratio: 16 / 7.4;
}

.work-card[href*="isokan"] .work-image img {
  object-fit: cover;
  object-position: center;
}

/* HydraForce — product lineup / sports packaging */
.work-card[href*="hydraforce"] .work-image {
  aspect-ratio: 16 / 9;
}

.work-card[href*="hydraforce"] .work-image img {
  object-fit: cover;
  object-position: center;
}

/* SDN Drinks — clean product mockup */
.work-card[href*="sdn-drinks"] .work-image {
  aspect-ratio: 16 / 9;
}

.work-card[href*="sdn-drinks"] .work-image img {
  object-fit: cover;
  object-position: center;
}

/* Equalizer — poster/mockup needs controlled fit */
.work-card[href*="equalizer"] .work-image {
  aspect-ratio: 16 / 9;
}

.work-card[href*="equalizer"] .work-image img {
  object-fit: cover;
  object-position: center;
}

/* EcoThreads — wide cinematic image */
.work-card[href*="ecothreads"] .work-image {
  aspect-ratio: 16 / 7.8;
}

.work-card[href*="ecothreads"] .work-image img {
  object-fit: cover;
  object-position: 62% 28%;
}

/* Selected Explorations — use collage thumbnail */
.work-card.archive .work-image {
  aspect-ratio: 16 / 9;
}

.work-card.archive .work-image img {
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   WORK INFO
========================================================= */

.work-info {
  padding: 1.25rem 0.4rem 0.35rem;
}

.work-info span {
  display: block;
  margin-bottom: 0.7rem;
  color: #b89b5e;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.work-info h2 {
  margin: 0;
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: #fff8ea;
}

.work-info p {
  max-width: 560px;
  margin-top: 0.8rem;
  color: rgba(243, 233, 216, 0.68);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* =========================================================
   CARD TONE VARIATIONS
========================================================= */

.work-card.soft {
  background:
    linear-gradient(145deg, rgba(236, 211, 174, 0.1), rgba(243, 233, 216, 0.025));
}

.work-card.dark {
  background:
    linear-gradient(145deg, rgba(40, 40, 38, 0.5), rgba(243, 233, 216, 0.025));
}

.work-card.earthy {
  background:
    linear-gradient(145deg, rgba(83, 77, 56, 0.22), rgba(243, 233, 216, 0.025));
}

.work-card.archive {
  background:
    linear-gradient(145deg, rgba(184, 155, 94, 0.13), rgba(243, 233, 216, 0.025));
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {
  .work-hero {
    min-height: auto;
    padding: 130px 1.2rem 80px;
  }

  .work-gallery {
    width: 100%;
    padding: 0 1.2rem 110px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .work-card,
  .work-card.archive {
    grid-column: span 6;
  }

  .work-card.large {
    grid-column: span 6;
  }

  .work-card[href*="isokan"] .work-image,
  .work-card[href*="ecothreads"] .work-image {
    aspect-ratio: 16 / 8.4;
  }
}

@media (max-width: 640px) {
  .work-hero {
    padding: 115px 1.05rem 70px;
  }

  .work-hero h1 {
    font-size: clamp(3.2rem, 15vw, 5rem);
    line-height: 0.92;
  }

  .work-hero p:not(.eyebrow) {
    font-size: 0.95rem;
  }

  .work-gallery {
    padding: 0 1.05rem 90px;
    gap: 1rem;
  }

  .work-card {
    padding: 0.5rem;
    border-radius: 24px;
  }

  .work-image {
    border-radius: 18px;
  }

  .work-info {
    padding: 1rem 0.25rem 0.25rem;
  }

  .work-info h2 {
    font-size: clamp(2.2rem, 12vw, 3.4rem);
  }

  .work-info p {
    font-size: 0.9rem;
  }

  .work-card[href*="isokan"] .work-image,
  .work-card[href*="hydraforce"] .work-image,
  .work-card[href*="sdn-drinks"] .work-image,
  .work-card[href*="equalizer"] .work-image,
  .work-card[href*="ecothreads"] .work-image,
  .work-card.archive .work-image {
    aspect-ratio: 16 / 10;
  }

  .work-card[href*="ecothreads"] .work-image img {
    object-position: 65% 24%;
  }
}

/* =========================================================
   ISOKAN — COMPLETE LUXURY FASHION PROJECT PAGE
   Fresh responsive CSS
========================================================= */

.project-isokan {
  --iso-black: #060504;
  --iso-deep: #0b0906;
  --iso-charcoal: #11100c;
  --iso-green: #14261d;
  --iso-deep-green: #0d1812;
  --iso-cream: #f3e9d8;
  --iso-cream-soft: #e4d5bb;
  --iso-gold: #b89b5e;
  --iso-muted: rgba(243, 233, 216, 0.68);
  --iso-line: rgba(243, 233, 216, 0.13);

  background: var(--iso-black);
  color: var(--iso-cream);
  overflow-x: hidden;
}

.project-isokan * {
  box-sizing: border-box;
}

.project-isokan img,
.project-isokan video {
  max-width: 100%;
  display: block;
}

.project-isokan .eyebrow {
  color: var(--iso-gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* =========================================================
   ISOKAN HERO RESPONSIVE FIX
   Paste at the VERY BOTTOM of style.css
========================================================= */

.project-isokan {
  --iso-black: #080706;
  --iso-ink: #11100d;
  --iso-cream: #f3e9d8;
  --iso-gold: #b89b5e;
  --iso-green: #183c34;
}

/* HERO BASE */

.project-isokan .isokan-hero {
  position: relative;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;

  display: flex;
  align-items: flex-end;

  padding: clamp(7rem, 11vw, 9rem) 5vw 5.8rem;

  background: var(--iso-black);
}

/* VIDEO BACKGROUND */

.project-isokan .isokan-hero-media,
.project-isokan .project-hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;

  width: 100%;
  height: 100%;
  border-radius: 0;
  border: 0;
  overflow: hidden;

  background: #080706;
}

.project-isokan .isokan-hero-media video,
.project-isokan .project-hero-media video,
.project-isokan .isokan-hero-media img,
.project-isokan .project-hero-media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;

  filter: brightness(0.82) contrast(1.08) saturate(0.92);
  transform: scale(1.015);
}

/* CINEMATIC OVERLAY */

.project-isokan .isokan-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    linear-gradient(
      to right,
      rgba(8, 7, 6, 0.96) 0%,
      rgba(8, 7, 6, 0.82) 34%,
      rgba(8, 7, 6, 0.48) 64%,
      rgba(8, 7, 6, 0.22) 100%
    ),
    linear-gradient(
      to top,
      rgba(8, 7, 6, 0.94) 0%,
      rgba(8, 7, 6, 0.66) 34%,
      rgba(8, 7, 6, 0.18) 76%
    ),
    radial-gradient(
      circle at 78% 18%,
      rgba(184, 155, 94, 0.18),
      transparent 36%
    );
}

/* SUBTLE EDITORIAL GRID */

.project-isokan .isokan-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      to bottom,
      rgba(243, 233, 216, 0.06),
      transparent 18%,
      transparent 80%,
      rgba(243, 233, 216, 0.05)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(243, 233, 216, 0.025) 0,
      rgba(243, 233, 216, 0.025) 1px,
      transparent 1px,
      transparent 110px
    );

  opacity: 0.55;
  pointer-events: none;
}

/* HERO CONTENT */

.project-isokan .isokan-hero-content,
.project-isokan .project-hero-content {
  position: relative;
  z-index: 5;

  width: min(920px, 100%);
  max-width: 920px;
}

.project-isokan .isokan-hero-content .eyebrow,
.project-isokan .project-hero-content .eyebrow {
  margin: 0 0 0.95rem;

  color: var(--iso-gold);
  font-size: clamp(0.62rem, 0.8vw, 0.78rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.project-isokan .isokan-hero-content h1,
.project-isokan .project-hero-content h1 {
  margin: 0;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4.4rem, 10.5vw, 10.5rem);
  line-height: 0.82;
  letter-spacing: -0.025em;
  font-weight: 600;

  color: #fff7e7;
  text-shadow: 0 18px 70px rgba(0, 0, 0, 0.45);
}

.project-isokan .isokan-hero-lead,
.project-isokan .project-hero-content > p {
  max-width: 640px;
  margin-top: 1.2rem;

  color: rgba(243, 233, 216, 0.84);
  font-size: clamp(0.96rem, 1.2vw, 1.12rem);
  line-height: 1.72;
  font-weight: 500;
}

/* META */

.project-isokan .isokan-meta,
.project-isokan .project-meta {
  width: min(850px, 100%);
  margin-top: 2.15rem;
  padding-top: 1.25rem;

  display: grid;
  grid-template-columns: 0.65fr 1.5fr 1.1fr;
  gap: 1.35rem;

  border-top: 1px solid rgba(243, 233, 216, 0.22);
}

.project-isokan .isokan-meta div,
.project-isokan .project-meta div {
  display: block;
}

.project-isokan .isokan-meta span,
.project-isokan .project-meta span {
  display: block;
  margin-bottom: 0.42rem;

  color: var(--iso-gold);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.project-isokan .isokan-meta p,
.project-isokan .project-meta p {
  margin: 0;

  color: rgba(243, 233, 216, 0.86);
  font-size: 0.9rem;
  line-height: 1.55;
  font-weight: 600;
}

/* STORY STRIP */

.project-isokan .isokan-story-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 8;
  width: 100%;
  overflow: hidden;

  padding: 0.72rem 0;

  border-top: 1px solid rgba(243, 233, 216, 0.16);
  background: rgba(8, 7, 6, 0.48);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  pointer-events: none;
}

.project-isokan .isokan-story-track {
  display: flex;
  width: max-content;
  animation: isokanStripLoop 32s linear infinite;
  will-change: transform;
}

.project-isokan .isokan-story-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;

  gap: clamp(1.4rem, 3vw, 3.2rem);
  padding-right: clamp(1.4rem, 3vw, 3.2rem);
}

.project-isokan .isokan-story-group span {
  white-space: nowrap;

  color: rgba(243, 233, 216, 0.9);
  font-size: clamp(0.56rem, 0.75vw, 0.72rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.project-isokan .isokan-story-group span::after {
  content: "•";
  margin-left: clamp(1.4rem, 3vw, 3.2rem);
  color: var(--iso-gold);
}

@keyframes isokanStripLoop {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* TABLET */

@media (max-width: 1024px) {
  .project-isokan .isokan-hero {
    padding: 7.5rem 4vw 5.6rem;
  }

  .project-isokan .isokan-hero-media video,
  .project-isokan .project-hero-media video {
    object-position: 58% center;
  }

  .project-isokan .isokan-hero-content h1,
  .project-isokan .project-hero-content h1 {
    font-size: clamp(4.2rem, 13vw, 8rem);
  }
}

/* MOBILE */

@media (max-width: 760px) {
  .project-isokan .isokan-hero {
    min-height: 100svh;
    padding: 6.3rem 1.1rem 4.7rem;
    align-items: flex-end;
  }

  .project-isokan .isokan-hero-media video,
  .project-isokan .project-hero-media video,
  .project-isokan .isokan-hero-media img,
  .project-isokan .project-hero-media img {
    object-fit: cover;
    object-position: 60% center;
    transform: scale(1.04);
  }

  .project-isokan .isokan-hero::before {
    background:
      linear-gradient(
        to right,
        rgba(8, 7, 6, 0.96) 0%,
        rgba(8, 7, 6, 0.78) 45%,
        rgba(8, 7, 6, 0.42) 100%
      ),
      linear-gradient(
        to top,
        rgba(8, 7, 6, 0.97) 0%,
        rgba(8, 7, 6, 0.78) 38%,
        rgba(8, 7, 6, 0.26) 78%
      );
  }

  .project-isokan .isokan-hero::after {
    background:
      linear-gradient(
        to bottom,
        rgba(243, 233, 216, 0.05),
        transparent 22%,
        transparent 78%,
        rgba(243, 233, 216, 0.04)
      );
    opacity: 0.45;
  }

  .project-isokan .isokan-hero-content,
  .project-isokan .project-hero-content {
    width: 100%;
    max-width: 100%;
  }

  .project-isokan .isokan-hero-content .eyebrow,
  .project-isokan .project-hero-content .eyebrow {
    max-width: 290px;
    font-size: 0.57rem;
    letter-spacing: 0.14em;
  }

  .project-isokan .isokan-hero-content h1,
  .project-isokan .project-hero-content h1 {
    font-size: clamp(3.2rem, 18vw, 5.4rem);
    line-height: 0.86;
    letter-spacing: -0.018em;
  }

  .project-isokan .isokan-hero-lead,
  .project-isokan .project-hero-content > p {
    max-width: 330px;
    margin-top: 0.9rem;

    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(243, 233, 216, 0.86);
  }

  .project-isokan .isokan-meta,
  .project-isokan .project-meta {
    margin-top: 1.35rem;
    padding-top: 1rem;

    grid-template-columns: 1fr;
    gap: 0.75rem;

    border-top-color: rgba(243, 233, 216, 0.2);
  }

  .project-isokan .isokan-meta span,
  .project-isokan .project-meta span {
    margin-bottom: 0.24rem;
    font-size: 0.56rem;
    letter-spacing: 0.16em;
  }

  .project-isokan .isokan-meta p,
  .project-isokan .project-meta p {
    max-width: 310px;
    font-size: 0.74rem;
    line-height: 1.42;
  }

  .project-isokan .isokan-story-strip {
    padding: 0.55rem 0;
  }

  .project-isokan .isokan-story-track {
    animation-duration: 23s;
  }

  .project-isokan .isokan-story-group {
    gap: 1rem;
    padding-right: 1rem;
  }

  .project-isokan .isokan-story-group span {
    font-size: 0.48rem;
    letter-spacing: 0.13em;
  }

  .project-isokan .isokan-story-group span::after {
    margin-left: 1rem;
  }
}

/* SMALL PHONES */

@media (max-width: 430px) {
  .project-isokan .isokan-hero {
    padding: 5.8rem 1rem 4.4rem;
  }

  .project-isokan .isokan-hero-media video,
  .project-isokan .project-hero-media video {
    object-position: 63% center;
    transform: scale(1.06);
  }

  .project-isokan .isokan-hero-content h1,
  .project-isokan .project-hero-content h1 {
    font-size: clamp(3rem, 19vw, 4.8rem);
  }

  .project-isokan .isokan-hero-lead,
  .project-isokan .project-hero-content > p {
    max-width: 300px;
  }

  .project-isokan .isokan-meta p,
  .project-isokan .project-meta p {
    max-width: 290px;
  }
}

/* EXTRA SHORT DEVTOOLS / SMALL HEIGHT FIX */

@media (max-height: 760px) and (max-width: 760px) {
  .project-isokan .isokan-hero {
    min-height: 720px;
    padding-top: 5.5rem;
  }

  .project-isokan .isokan-meta,
  .project-isokan .project-meta {
    gap: 0.55rem;
  }
}

/* =========================================================
   GLOBAL SECTION SYSTEM
========================================================= */

.project-isokan .isokan-section {
  position: relative;
  padding: clamp(82px, 10vw, 125px) 5vw;
}

.project-isokan .isokan-section h2,
.project-isokan .isokan-final-world h2,
.project-isokan .isokan-builder-copy h2 {
  max-width: 1040px;
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2.6rem, 5.4vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.026em;
  font-weight: 600;
  text-wrap: balance;
}

.project-isokan .isokan-section-heading {
  max-width: 980px;
  margin-bottom: clamp(2.3rem, 4vw, 3.6rem);
}

.project-isokan .isokan-section-heading p:not(.eyebrow),
.project-isokan .isokan-copy p,
.project-isokan .isokan-builder-copy p {
  max-width: 700px;
  margin-top: 1rem;
  color: var(--iso-muted);
  line-height: 1.8;
}

/* captions */
.project-isokan figcaption {
  margin: 0;
  padding: 0.75rem 0.15rem 0.05rem;
  color: rgba(243, 233, 216, 0.62);
  font-size: 0.76rem;
  line-height: 1.45;
}

/* all clickable image wrappers */
.project-isokan .lightbox-trigger {
  display: block;
}

/* =========================================================
   SNAPSHOT
========================================================= */

.project-isokan .isokan-snapshot-section {
  padding-top: 72px;
  padding-bottom: 72px;
  background:
    radial-gradient(circle at 88% 20%, rgba(184, 155, 94, 0.08), transparent 30%),
    linear-gradient(180deg, #070604, #0f0c09);
}

.project-isokan .isokan-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--iso-line);
  border-left: 1px solid var(--iso-line);
}

.project-isokan .isokan-snapshot-grid article {
  min-height: 235px;
  padding: 1.5rem;
  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.055), rgba(243, 233, 216, 0.018));
  border-right: 1px solid var(--iso-line);
  border-bottom: 1px solid var(--iso-line);
}

.project-isokan .isokan-snapshot-grid span {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--iso-gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.project-isokan .isokan-snapshot-grid p {
  margin: 0;
  color: rgba(243, 233, 216, 0.76);
  line-height: 1.65;
}

/* =========================================================
   OVERVIEW
========================================================= */

.project-isokan .isokan-overview {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  background:
    radial-gradient(circle at 82% 14%, rgba(184, 155, 94, 0.12), transparent 28%),
    linear-gradient(135deg, #101c16, #070604 72%);
}

.project-isokan .isokan-pillars {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.project-isokan .isokan-pillars span {
  padding: 0.68rem 1rem;
  border: 1px solid rgba(243, 233, 216, 0.16);
  border-radius: 999px;
  color: rgba(243, 233, 216, 0.78);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* =========================================================
   ISOKAN — FINAL RESPONSIVE OVERRIDES
   Paste at the VERY BOTTOM of style.css
========================================================= */


/* =========================================================
   LARGE TABLETS / SMALL LAPTOPS
   iPad Pro landscape, 13-inch-ish screens
========================================================= */

@media (max-width: 1366px) {
  body.project-isokan .isokan-hero {
    min-height: auto !important;
    padding: clamp(7rem, 9vw, 9rem) 5vw 0 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr) !important;
    gap: clamp(2rem, 4vw, 4rem) !important;
    align-items: center !important;

    overflow: hidden !important;
  }

  body.project-isokan .isokan-hero-media {
    position: relative !important;
    inset: auto !important;

    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;

    border-radius: clamp(24px, 3vw, 42px) !important;
    overflow: hidden !important;

    background: #080706 !important;
    box-shadow:
      0 32px 90px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  body.project-isokan .isokan-hero-media video {
    width: 100% !important;
    height: 100% !important;

    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body.project-isokan .isokan-hero-content {
    width: 100% !important;
    max-width: 680px !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body.project-isokan .isokan-hero-content h1 {
    font-size: clamp(5rem, 10vw, 9rem) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.055em !important;
    margin: 0 !important;
  }

  body.project-isokan .isokan-hero-lead {
    max-width: 560px !important;
    margin-top: 1.1rem !important;
    font-size: clamp(1rem, 1.2vw, 1.14rem) !important;
    line-height: 1.68 !important;
  }

  body.project-isokan .isokan-meta {
    margin-top: 1.7rem !important;
    gap: 1rem !important;
  }

  body.project-isokan .isokan-story-strip {
    grid-column: 1 / -1 !important;
    position: relative !important;
    inset: auto !important;
    margin-top: clamp(3rem, 5vw, 4.5rem) !important;
  }
}


/* =========================================================
   IPAD PORTRAIT / TABLET
========================================================= */

@media (max-width: 1024px) {
  body.project-isokan .isokan-hero {
    padding: 7.5rem 1.5rem 0 !important;

    grid-template-columns: 1fr !important;
    gap: 2.4rem !important;
  }

  body.project-isokan .isokan-hero-media {
    width: min(100%, 860px) !important;
    margin: 0 auto !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 32px !important;
  }

  body.project-isokan .isokan-hero-content {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    text-align: left !important;
  }

  body.project-isokan .isokan-hero-content h1 {
    font-size: clamp(5rem, 16vw, 8rem) !important;
    line-height: 0.9 !important;
  }

  body.project-isokan .isokan-hero-lead {
    max-width: 680px !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  body.project-isokan .isokan-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 1rem !important;
  }

  body.project-isokan .isokan-section {
    padding: clamp(4.5rem, 8vw, 6.5rem) 1.5rem !important;
  }

  body.project-isokan .isokan-overview {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  body.project-isokan .isokan-section-heading,
  body.project-isokan .isokan-overview > div,
  body.project-isokan .isokan-copy,
  body.project-isokan .isokan-builder-copy {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.project-isokan .isokan-section-heading h2,
  body.project-isokan .isokan-overview h2,
  body.project-isokan .isokan-builder-copy h2 {
    font-size: clamp(3.2rem, 9vw, 5.8rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
  }

  body.project-isokan .isokan-snapshot-grid,
  body.project-isokan .isokan-identity-grid,
  body.project-isokan .isokan-application-grid,
  body.project-isokan .isokan-editorial-grid,
  body.project-isokan .isokan-process-grid {
    width: min(100%, 860px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  body.project-isokan .isokan-digital-stage {
    width: min(100%, 900px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  body.project-isokan .isokan-digital-stack {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  body.project-isokan .isokan-mobile-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.8rem !important;
  }

  body.project-isokan .isokan-builder {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  body.project-isokan .isokan-builder-stage {
    width: min(100%, 900px) !important;
    margin: 0 auto !important;
  }
}


/* =========================================================
   SMALL TABLETS / LARGE PHONES
========================================================= */

@media (max-width: 820px) {
  body.project-isokan .isokan-hero {
    padding: 7rem 1.15rem 0 !important;
    gap: 2rem !important;
  }

  body.project-isokan .isokan-hero-media {
    aspect-ratio: 4 / 3 !important;
    border-radius: 26px !important;
  }

  body.project-isokan .isokan-hero-media video {
    object-fit: cover !important;
    object-position: center center !important;
  }

  body.project-isokan .isokan-hero-content h1 {
    font-size: clamp(4.4rem, 18vw, 7rem) !important;
    line-height: 0.92 !important;
  }

  body.project-isokan .isokan-meta {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  body.project-isokan .isokan-meta > div {
    padding: 0 0 0.85rem !important;
    border-bottom: 1px solid rgba(243, 233, 216, 0.14) !important;
  }

  body.project-isokan .isokan-meta > div:last-child {
    border-bottom: 0 !important;
  }

  body.project-isokan .isokan-story-group {
    gap: 1.4rem !important;
    padding: 0.9rem 0 !important;
  }

  body.project-isokan .isokan-story-group span {
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
  }

  body.project-isokan .isokan-section {
    padding: 4.8rem 1.15rem !important;
  }

  body.project-isokan .isokan-section-heading h2,
  body.project-isokan .isokan-overview h2,
  body.project-isokan .isokan-builder-copy h2,
  body.project-isokan .isokan-final-world h2 {
    font-size: clamp(2.8rem, 11vw, 4.6rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
  }

  body.project-isokan .isokan-snapshot-grid,
  body.project-isokan .isokan-identity-grid,
  body.project-isokan .isokan-application-grid,
  body.project-isokan .isokan-editorial-grid,
  body.project-isokan .isokan-process-grid,
  body.project-isokan .isokan-digital-stack {
    grid-template-columns: 1fr !important;
  }

  body.project-isokan figure,
  body.project-isokan .isokan-process-grid article {
    border-radius: 24px !important;
  }

  body.project-isokan figure a,
  body.project-isokan .isokan-process-grid article a {
    border-radius: 18px !important;
  }

  body.project-isokan .isokan-mobile-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.85rem !important;
  }

  body.project-isokan .isokan-browser-frame img,
  body.project-isokan .isokan-identity-grid img,
  body.project-isokan .isokan-application-grid img,
  body.project-isokan .isokan-editorial-grid img,
  body.project-isokan .isokan-process-grid img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  body.project-isokan .isokan-final-world {
    min-height: 78vh !important;
    padding: 4rem 1.15rem !important;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {
  body.project-isokan .isokan-hero {
    padding: 6.4rem 1rem 0 !important;
    gap: 1.75rem !important;
  }

  body.project-isokan .isokan-hero-media {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 22px !important;
  }

  body.project-isokan .isokan-hero-media video {
    object-fit: cover !important;
    object-position: center center !important;
  }

  body.project-isokan .isokan-hero-content .eyebrow {
    margin-bottom: 0.75rem !important;
    font-size: 0.66rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.15em !important;
  }

  body.project-isokan .isokan-hero-content h1 {
    font-size: clamp(3.7rem, 22vw, 5.8rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.055em !important;
  }

  body.project-isokan .isokan-hero-lead {
    margin-top: 0.9rem !important;
    max-width: 100% !important;
    font-size: 0.95rem !important;
    line-height: 1.66 !important;
  }

  body.project-isokan .isokan-meta {
    margin-top: 1.25rem !important;
  }

  body.project-isokan .isokan-meta span {
    font-size: 0.62rem !important;
    letter-spacing: 0.15em !important;
  }

  body.project-isokan .isokan-meta p {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
  }

  body.project-isokan .isokan-story-strip {
    margin-top: 2.7rem !important;
  }

  body.project-isokan .isokan-section {
    padding: 4.3rem 1rem !important;
  }

  body.project-isokan .isokan-section-heading {
    margin-bottom: 1.7rem !important;
  }

  body.project-isokan .isokan-section-heading h2,
  body.project-isokan .isokan-overview h2,
  body.project-isokan .isokan-builder-copy h2,
  body.project-isokan .isokan-final-world h2 {
    font-size: clamp(2.45rem, 13vw, 3.8rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
  }

  body.project-isokan .isokan-section-heading p:not(.eyebrow),
  body.project-isokan .isokan-copy p,
  body.project-isokan .isokan-builder-copy p {
    font-size: 0.93rem !important;
    line-height: 1.68 !important;
  }

  body.project-isokan .isokan-pillars {
    gap: 0.55rem !important;
  }

  body.project-isokan .isokan-pillars span {
    font-size: 0.66rem !important;
    letter-spacing: 0.12em !important;
    padding: 0.65rem 0.8rem !important;
  }

  body.project-isokan .isokan-snapshot-grid article {
    padding: 1.15rem !important;
    border-radius: 20px !important;
  }

  body.project-isokan .isokan-snapshot-grid article span {
    font-size: 0.64rem !important;
    letter-spacing: 0.15em !important;
  }

  body.project-isokan .isokan-snapshot-grid article p {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }

  body.project-isokan figure {
    padding: 0.5rem !important;
    border-radius: 20px !important;
  }

  body.project-isokan figure a {
    border-radius: 15px !important;
  }

  body.project-isokan figure figcaption {
    font-size: 0.68rem !important;
    line-height: 1.45 !important;
    padding-top: 0.6rem !important;
  }

  body.project-isokan .isokan-mobile-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  body.project-isokan .isokan-mobile-row figure {
    padding: 0.45rem !important;
  }

  body.project-isokan .isokan-builder-stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  body.project-isokan .builder-desktop,
  body.project-isokan .builder-phone {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    display: block !important;
  }

  body.project-isokan .builder-phone {
    width: min(62%, 240px) !important;
    margin: 0 auto !important;
  }

  body.project-isokan .isokan-final-world {
    min-height: 72vh !important;
    padding: 3.5rem 1rem !important;
  }

  body.project-isokan .isokan-final-world img {
    object-position: center !important;
  }
}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media (max-width: 390px) {
  body.project-isokan .isokan-hero {
    padding-top: 6rem !important;
  }

  body.project-isokan .isokan-hero-content h1 {
    font-size: clamp(3.3rem, 21vw, 4.6rem) !important;
  }

  body.project-isokan .isokan-section-heading h2,
  body.project-isokan .isokan-overview h2,
  body.project-isokan .isokan-builder-copy h2,
  body.project-isokan .isokan-final-world h2 {
    font-size: clamp(2.25rem, 12vw, 3.2rem) !important;
  }

  body.project-isokan .isokan-mobile-row {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   LANDSCAPE PHONES / SHORT SCREENS
   fixes hero video being too tall
========================================================= */

@media (max-height: 760px) and (orientation: landscape) {
  body.project-isokan .isokan-hero {
    min-height: auto !important;
    padding: 6rem 5vw 0 !important;
    grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.1fr) !important;
    gap: 2rem !important;
  }

  body.project-isokan .isokan-hero-media {
    aspect-ratio: 16 / 9 !important;
    max-height: 58vh !important;
  }

  body.project-isokan .isokan-hero-content h1 {
    font-size: clamp(3.8rem, 8vw, 6rem) !important;
    line-height: 0.9 !important;
  }

  body.project-isokan .isokan-hero-lead {
    margin-top: 0.8rem !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
  }

  body.project-isokan .isokan-meta {
    margin-top: 1rem !important;
  }

  body.project-isokan .isokan-story-strip {
    margin-top: 2rem !important;
  }
}


/* =========================================================
   ISOKAN IDENTITY SYSTEM — NO EMPTY IMAGE SPACES FIX
   Paste at the VERY bottom of style.css
========================================================= */

.project-isokan .isokan-identity-system {
  background:
    radial-gradient(circle at 18% 18%, rgba(184, 155, 94, 0.08), transparent 28%),
    linear-gradient(135deg, #070604 0%, #0d0c09 55%, #050403 100%);
}

/* works for your newer class */
.project-isokan .isokan-identity-grid,

/* works if the section is still using image-grid three */
.project-isokan .image-grid.three {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: start;
}

/* card container */
.project-isokan .isokan-identity-grid figure,
.project-isokan .image-grid.three figure {
  margin: 0;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(243, 233, 216, 0.14);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

/* clickable image area */
.project-isokan .isokan-identity-grid figure a,
.project-isokan .image-grid.three figure a {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: #f3e9d8;
}

/* image itself */
.project-isokan .isokan-identity-grid figure img,
.project-isokan .image-grid.three figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

  border: none;
  border-radius: 0;

  transform: scale(1.015);
}

/* caption area */
.project-isokan .isokan-identity-grid figcaption,
.project-isokan .image-grid.three figcaption {
  margin: 0;
  padding: 0.85rem 0.95rem 1rem;
  background: rgba(243, 233, 216, 0.035);
  border-top: 1px solid rgba(243, 233, 216, 0.08);

  color: rgba(243, 233, 216, 0.68);
  font-size: 0.76rem;
  line-height: 1.4;
}

/* hover */
.project-isokan .isokan-identity-grid figure:hover,
.project-isokan .image-grid.three figure:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 155, 94, 0.38);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

.project-isokan .isokan-identity-grid figure:hover img,
.project-isokan .image-grid.three figure:hover img {
  transform: scale(1.045);
}

/* responsive */
@media (max-width: 1100px) {
  .project-isokan .isokan-identity-grid,
  .project-isokan .image-grid.three {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .project-isokan .isokan-identity-grid figure a,
  .project-isokan .image-grid.three figure a {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 600px) {
  .project-isokan .isokan-identity-grid,
  .project-isokan .image-grid.three {
    margin-top: 2rem;
    gap: 1rem;
  }

  .project-isokan .isokan-identity-grid figure,
  .project-isokan .image-grid.three figure {
    border-radius: 18px;
  }

  .project-isokan .isokan-identity-grid figure a,
  .project-isokan .image-grid.three figure a {
    border-radius: 18px 18px 0 0;
  }

  .project-isokan .isokan-identity-grid figcaption,
  .project-isokan .image-grid.three figcaption {
    padding: 0.75rem 0.8rem 0.9rem;
  }
}

/* =========================================================
   BRAND APPLICATIONS — NEW DESIGN
========================================================= */

.project-isokan .isokan-applications {
  background:
    radial-gradient(circle at 12% 10%, rgba(184, 155, 94, 0.16), transparent 28%),
    linear-gradient(135deg, #f3e9d8, #d7c5a7);
  color: #080706;
}

.project-isokan .isokan-applications .eyebrow {
  color: #6f5832;
}

.project-isokan .isokan-applications .isokan-section-heading p {
  color: rgba(8, 7, 6, 0.66);
}

.project-isokan .isokan-application-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.project-isokan .app-card {
  padding: 0.55rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(8, 7, 6, 0.1);
  overflow: hidden;
}

.project-isokan .app-card a {
  width: 100%;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: #eadbc5;
}

.project-isokan .app-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-position: center;
}

/* varied editorial application layout */
.project-isokan .app-card:nth-child(1) {
  grid-column: span 4;
}

.project-isokan .app-card:nth-child(1) a {
  height: 470px;
}

.project-isokan .app-card:nth-child(1) img {
  object-fit: cover;
}

.project-isokan .app-card:nth-child(2) {
  grid-column: span 8;
}

.project-isokan .app-card:nth-child(2) a {
  height: 470px;
}

.project-isokan .app-card:nth-child(2) img {
  object-fit: cover;
}

.project-isokan .app-card:nth-child(3) {
  grid-column: span 7;
}

.project-isokan .app-card:nth-child(3) a {
  height: 385px;
}

.project-isokan .app-card:nth-child(3) img {
  object-fit: cover;
}

.project-isokan .app-card:nth-child(4) {
  grid-column: span 5;
}

.project-isokan .app-card:nth-child(4) a {
  height: 385px;
}

.project-isokan .app-card:nth-child(4) img {
  object-fit: cover;
}

.project-isokan .app-card:nth-child(5) {
  grid-column: 4 / span 6;
}

.project-isokan .app-card:nth-child(5) a {
  height: 330px;
}

.project-isokan .app-card:nth-child(5) img {
  object-fit: contain;
  background: #eadbc5;
}

.project-isokan .app-card figcaption {
  color: rgba(8, 7, 6, 0.62);
}

/* =========================================================
   ISOKAN DIGITAL EXPERIENCE — CLEAN PREMIUM FIX
========================================================= */

.project-isokan .isokan-digital-experience {
  background:
    radial-gradient(circle at 20% 15%, rgba(184,155,94,0.12), transparent 28%),
    radial-gradient(circle at 85% 70%, rgba(24,58,52,0.26), transparent 32%),
    linear-gradient(135deg, #080706 0%, #111812 50%, #070706 100%);
  color: var(--iso-cream);
  overflow: hidden;
}

/* Main stage */
.project-isokan .isokan-digital-stage {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 1.7vw, 1.5rem);
  align-items: start;
}

/* Stop JS/parallax from pushing cards around */
.project-isokan .isokan-digital-stage .isokan-browser-frame,
.project-isokan .isokan-digital-stage .isokan-mobile-row figure {
  transform: none !important;
}

/* Desktop card base */
.project-isokan .isokan-browser-frame {
  margin: 0;
  padding: 0.75rem;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(243,233,216,0.08), rgba(243,233,216,0.025));
  border: 1px solid rgba(243,233,216,0.13);
  box-shadow: 0 24px 70px rgba(0,0,0,0.28);
  overflow: hidden;
}

/* Click area */
.project-isokan .isokan-browser-frame a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 19px;
  overflow: hidden;
  background: #050504;
}

/* Images should fit, not crop */
.project-isokan .isokan-browser-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 19px;
}

/* Main homepage */
.project-isokan .isokan-browser-frame.desktop-main {
  grid-column: span 7;
}

.project-isokan .isokan-browser-frame.desktop-main a {
  height: clamp(300px, 38vw, 520px);
}

/* Right stacked desktop pages */
.project-isokan .isokan-digital-stack {
  grid-column: span 5;
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.35rem);
}

.project-isokan .isokan-digital-stack .isokan-browser-frame a {
  height: clamp(210px, 20vw, 300px);
}

/* Outfit builder wide */
.project-isokan .isokan-browser-frame.desktop-wide {
  grid-column: span 7;
}

.project-isokan .isokan-browser-frame.desktop-wide a {
  height: clamp(300px, 34vw, 480px);
}

/* About page beside outfit builder */
.project-isokan .isokan-browser-frame.desktop-small {
  grid-column: span 5;
}

.project-isokan .isokan-browser-frame.desktop-small a {
  height: clamp(260px, 28vw, 410px);
}

/* Captions */
.project-isokan .isokan-browser-frame figcaption,
.project-isokan .isokan-mobile-row figcaption {
  margin: 0;
  padding: 0.75rem 0.2rem 0.1rem;
  color: rgba(243,233,216,0.72);
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

/* Mobile screen row */
.project-isokan .isokan-mobile-row {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.5vw, 1.35rem);
  margin-top: 0.5rem;
}

.project-isokan .isokan-mobile-row figure {
  margin: 0;
  padding: 0.7rem;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(243,233,216,0.075), rgba(243,233,216,0.025));
  border: 1px solid rgba(243,233,216,0.13);
  box-shadow: 0 20px 55px rgba(0,0,0,0.24);
  overflow: hidden;
}

.project-isokan .isokan-mobile-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(360px, 44vw, 560px);
  border-radius: 20px;
  overflow: hidden;
  background: #050504;
}

.project-isokan .isokan-mobile-row img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  display: block;
  border-radius: 20px;
}

/* Hover polish */
.project-isokan .isokan-browser-frame,
.project-isokan .isokan-mobile-row figure {
  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.project-isokan .isokan-browser-frame:hover,
.project-isokan .isokan-mobile-row figure:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(184,155,94,0.36);
  box-shadow:
    0 28px 85px rgba(0,0,0,0.32),
    0 0 35px rgba(184,155,94,0.06);
}

.project-isokan .isokan-browser-frame img,
.project-isokan .isokan-mobile-row img {
  transition: transform 0.75s cubic-bezier(.19,1,.22,1);
}

.project-isokan .isokan-browser-frame:hover img,
.project-isokan .isokan-mobile-row figure:hover img {
  transform: scale(1.018);
}

/* Tablet */
@media (max-width: 1100px) {
  .project-isokan .isokan-browser-frame.desktop-main,
  .project-isokan .isokan-digital-stack,
  .project-isokan .isokan-browser-frame.desktop-wide,
  .project-isokan .isokan-browser-frame.desktop-small {
    grid-column: span 12;
  }

  .project-isokan .isokan-browser-frame.desktop-main a,
  .project-isokan .isokan-browser-frame.desktop-wide a,
  .project-isokan .isokan-browser-frame.desktop-small a,
  .project-isokan .isokan-digital-stack .isokan-browser-frame a {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .project-isokan .isokan-mobile-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-isokan .isokan-mobile-row a {
    height: clamp(420px, 68vw, 620px);
  }
}

/* Mobile */
@media (max-width: 700px) {
  .project-isokan .isokan-digital-experience {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .project-isokan .isokan-digital-stage {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .project-isokan .isokan-browser-frame,
  .project-isokan .isokan-mobile-row figure {
    grid-column: span 1;
    padding: 0.55rem;
    border-radius: 20px;
  }

  .project-isokan .isokan-browser-frame a {
    border-radius: 15px;
    aspect-ratio: 16 / 10;
  }

  .project-isokan .isokan-browser-frame img {
    border-radius: 15px;
  }

  .project-isokan .isokan-digital-stack {
    grid-column: span 1;
  }

  .project-isokan .isokan-mobile-row {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }

  .project-isokan .isokan-mobile-row a {
    height: auto;
    max-height: 78vh;
  }

  .project-isokan .isokan-mobile-row img {
    height: auto;
    max-height: 78vh;
  }

  .project-isokan .isokan-browser-frame figcaption,
  .project-isokan .isokan-mobile-row figcaption {
    font-size: 0.74rem;
  }
}

/* =========================================================
   OUTFIT BUILDER
========================================================= */

.project-isokan .isokan-builder {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 5vw;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(184, 155, 94, 0.12), transparent 28%),
    #080706;
}

.project-isokan .isokan-builder-stage {
  min-height: 620px;
  position: relative;
}

.project-isokan .builder-desktop {
  position: absolute;
  inset: 8% 6% auto 0;
  display: block;
  padding: 0.75rem;
  border-radius: 28px;
  background: rgba(243, 233, 216, 0.06);
  border: 1px solid rgba(243, 233, 216, 0.12);
  box-shadow: 0 30px 90px rgba(0,0,0,0.34);
}

.project-isokan .builder-desktop img {
  width: 100%;
  max-height: 490px;
  object-fit: contain;
  border-radius: 20px;
  background: #090806;
}

.project-isokan .builder-phone {
  position: absolute;
  right: 0;
  bottom: 4%;
  width: 24%;
  min-width: 150px;
  padding: 0.55rem;
  border-radius: 32px;
  background: rgba(243, 233, 216, 0.08);
  border: 1px solid rgba(243, 233, 216, 0.14);
  box-shadow: 0 28px 80px rgba(0,0,0,0.45);
}

.project-isokan .builder-phone img {
  width: 100%;
  border-radius: 24px;
}

/* =========================================================
   EDITORIAL
========================================================= */

.project-isokan .isokan-editorial {
  background:
    radial-gradient(circle at 10% 12%, rgba(184, 155, 94, 0.14), transparent 28%),
    linear-gradient(135deg, #f3e9d8, #d8c8ad);
  color: #080706;
}

.project-isokan .isokan-editorial .eyebrow {
  color: #6f5832;
}

.project-isokan .isokan-editorial .isokan-section-heading p {
  color: rgba(8, 7, 6, 0.64);
}

.project-isokan .isokan-editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem;
}

.project-isokan .isokan-editorial-grid figure {
  grid-column: span 6;
  padding: 0.55rem;
  border-radius: 24px;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(8,7,6,0.11);
  overflow: hidden;
}

.project-isokan .isokan-editorial-grid a {
  display: block;
  height: 410px;
  border-radius: 18px;
  overflow: hidden;
}

.project-isokan .isokan-editorial-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-isokan .isokan-editorial-grid figcaption {
  color: rgba(8, 7, 6, 0.62);
}

.project-isokan .zine-link {
  display: inline-flex;
  margin-top: 2rem;
  padding: 0.95rem 1.45rem;
  border-radius: 999px;
  border: 1px solid rgba(8, 7, 6, 0.18);
  color: #080706;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.35s ease, background 0.35s ease;
}

.project-isokan .zine-link:hover {
  transform: translateY(-4px);
  background: rgba(8, 7, 6, 0.08);
}

/* =========================================================
   PROCESS — ISOKAN FULL WIDTH 2-CARD FIX
========================================================= */

.project-isokan .isokan-process {
  background:
    radial-gradient(circle at 18% 12%, rgba(184, 155, 94, 0.10), transparent 26%),
    radial-gradient(circle at 88% 75%, rgba(24, 60, 45, 0.22), transparent 34%),
    #080706;
  color: #f3e9d8;
}

.project-isokan .isokan-process .section-heading {
  max-width: 900px;
  margin-bottom: 3rem;
}

/* FULL WIDTH GRID — removes that awkward empty right side */
.project-isokan .isokan-process-grid {
  width: 100%;
  max-width: none;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}

/* card */
.project-isokan .isokan-process-grid article {
  min-width: 0;
  padding: 0.85rem;
  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      rgba(243, 233, 216, 0.07),
      rgba(243, 233, 216, 0.025)
    );

  border: 1px solid rgba(243, 233, 216, 0.13);
  overflow: hidden;

  transition:
    transform 0.55s cubic-bezier(.19,1,.22,1),
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    background 0.45s ease;
}

/* image box */
.project-isokan .isokan-process-grid a {
  display: block;
  width: 100%;

  aspect-ratio: 16 / 8.8;
  border-radius: 19px;
  overflow: hidden;

  background: #f3e9d8;
}

/* image */
.project-isokan .isokan-process-grid img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;

  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;

  transition: transform 0.75s cubic-bezier(.19,1,.22,1);
}

/* text */
.project-isokan .isokan-process-grid span {
  display: block;
  margin-top: 1.1rem;

  color: var(--iso-gold, #b89b5e);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.project-isokan .isokan-process-grid h3 {
  margin-top: 0.35rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 600;

  color: #f3e9d8;
}

.project-isokan .isokan-process-grid p {
  max-width: 520px;
  margin-top: 0.7rem;

  color: rgba(243, 233, 216, 0.66);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* hover */
.project-isokan .isokan-process-grid article:hover {
  transform: translateY(-7px);
  border-color: rgba(184, 155, 94, 0.42);

  background:
    linear-gradient(
      145deg,
      rgba(243, 233, 216, 0.095),
      rgba(243, 233, 216, 0.03)
    );

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.34),
    0 0 45px rgba(184, 155, 94, 0.08);
}

.project-isokan .isokan-process-grid article:hover img {
  transform: scale(1.04);
}

/* tablet */
@media (max-width: 950px) {
  .project-isokan .isokan-process-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .project-isokan .isokan-process-grid article {
    border-radius: 22px;
    padding: 0.7rem;
  }

  .project-isokan .isokan-process-grid a {
    border-radius: 16px;
    aspect-ratio: 16 / 9.5;
  }
}

/* mobile */
@media (max-width: 700px) {
  .project-isokan .isokan-process-grid {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }

  .project-isokan .isokan-process-grid h3 {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .project-isokan .isokan-process-grid p {
    max-width: 100%;
  }
}

/* =========================================================
   FINAL BRAND WORLD
========================================================= */

.project-isokan .isokan-final-world {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: end;
  padding: 5vw;
  overflow: hidden;
  background: #080706;
}

.project-isokan .isokan-final-world a {
  position: absolute;
  inset: 0;
  display: block;
}

.project-isokan .isokan-final-world img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-isokan .isokan-final-world::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(7, 6, 4, 0.9), rgba(7, 6, 4, 0.24) 58%, rgba(7, 6, 4, 0.12)),
    linear-gradient(to right, rgba(7, 6, 4, 0.76), transparent 58%);
  pointer-events: none;
}

.project-isokan .isokan-final-world div {
  position: relative;
  z-index: 2;
  max-width: 980px;
}

.project-isokan .isokan-final-world h2 {
  margin-top: 0.7rem;
  color: var(--iso-cream);
}

/* =========================================================
   HOVERS
========================================================= */

.project-isokan figure,
.project-isokan .app-card,
.project-isokan .isokan-browser-frame,
.project-isokan .isokan-mobile-row figure,
.project-isokan .isokan-process-grid article,
.project-isokan .builder-desktop,
.project-isokan .builder-phone {
  transition:
    transform 0.55s cubic-bezier(.19,1,.22,1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.project-isokan figure:hover,
.project-isokan .app-card:hover,
.project-isokan .isokan-browser-frame:hover,
.project-isokan .isokan-mobile-row figure:hover,
.project-isokan .isokan-process-grid article:hover,
.project-isokan .builder-desktop:hover,
.project-isokan .builder-phone:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 155, 94, 0.38);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.24);
}

.project-isokan figure img,
.project-isokan .app-card img,
.project-isokan .isokan-browser-frame img,
.project-isokan .isokan-mobile-row img,
.project-isokan .isokan-process-grid img,
.project-isokan .builder-desktop img,
.project-isokan .builder-phone img {
  transition: transform 0.75s cubic-bezier(.19,1,.22,1);
}

.project-isokan figure:hover img,
.project-isokan .app-card:hover img,
.project-isokan .isokan-browser-frame:hover img,
.project-isokan .isokan-mobile-row figure:hover img,
.project-isokan .isokan-process-grid article:hover img,
.project-isokan .builder-desktop:hover img,
.project-isokan .builder-phone:hover img {
  transform: scale(1.025);
}

/* =========================================================
   RESPONSIVE — TABLETS
========================================================= */

@media (max-width: 1100px) {
  .project-isokan .isokan-meta {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .project-isokan .isokan-overview,
  .project-isokan .isokan-builder,
  .project-isokan .isokan-digital-stage {
    grid-template-columns: 1fr;
  }

  .project-isokan .isokan-snapshot-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-isokan .isokan-identity-grid {
    grid-template-columns: 1fr;
  }

  .project-isokan .isokan-identity-grid a {
    height: auto;
    max-height: 76vh;
  }

  .project-isokan .isokan-identity-grid img {
    height: auto;
  }

  .project-isokan .app-card:nth-child(1),
  .project-isokan .app-card:nth-child(2),
  .project-isokan .app-card:nth-child(3),
  .project-isokan .app-card:nth-child(4),
  .project-isokan .app-card:nth-child(5) {
    grid-column: span 6;
  }

  .project-isokan .isokan-mobile-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-isokan .isokan-builder-stage {
    min-height: auto;
    display: grid;
    gap: 1.2rem;
  }

  .project-isokan .builder-desktop,
  .project-isokan .builder-phone {
    position: static;
    width: 100%;
    min-width: 0;
  }

  .project-isokan .builder-phone {
    max-width: 320px;
    justify-self: center;
  }

  .project-isokan .isokan-process-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 760px) {
  .project-isokan .isokan-hero {
    min-height: 92vh;
    padding: 112px 1.2rem 60px;
  }

  .project-isokan .isokan-hero-media video,
  .project-isokan .isokan-hero-media img {
    object-position: center;
  }

  .project-isokan .isokan-hero::before {
    background:
      linear-gradient(to top, rgba(6, 5, 4, 0.94), rgba(6, 5, 4, 0.58), transparent),
      linear-gradient(to right, rgba(6, 5, 4, 0.76), rgba(6, 5, 4, 0.25));
  }

  .project-isokan .isokan-hero-content h1 {
    font-size: clamp(3.5rem, 18vw, 5.5rem);
    letter-spacing: -0.026em;
  }

  .project-isokan .isokan-hero-lead {
    font-size: 0.95rem;
  }

  .project-isokan .isokan-section {
    padding: 78px 1.2rem;
  }

  .project-isokan .isokan-section h2,
  .project-isokan .isokan-final-world h2,
  .project-isokan .isokan-builder-copy h2 {
    font-size: clamp(2.5rem, 12.5vw, 4.1rem);
    letter-spacing: -0.024em;
  }

  .project-isokan .isokan-snapshot-section {
    padding: 60px 1.2rem;
  }

  .project-isokan .isokan-snapshot-grid,
  .project-isokan .isokan-application-grid,
  .project-isokan .isokan-editorial-grid {
    grid-template-columns: 1fr;
  }

  .project-isokan .isokan-snapshot-grid article {
    min-height: auto;
  }

  .project-isokan .app-card:nth-child(1),
  .project-isokan .app-card:nth-child(2),
  .project-isokan .app-card:nth-child(3),
  .project-isokan .app-card:nth-child(4),
  .project-isokan .app-card:nth-child(5),
  .project-isokan .isokan-editorial-grid figure {
    grid-column: span 1;
  }

  .project-isokan .app-card:nth-child(1) a,
  .project-isokan .app-card:nth-child(2) a,
  .project-isokan .app-card:nth-child(3) a,
  .project-isokan .app-card:nth-child(4) a,
  .project-isokan .app-card:nth-child(5) a {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .project-isokan .app-card:nth-child(1) img,
  .project-isokan .app-card:nth-child(2) img,
  .project-isokan .app-card:nth-child(3) img,
  .project-isokan .app-card:nth-child(4) img,
  .project-isokan .app-card:nth-child(5) img {
    object-fit: contain;
    background: #eadbc5;
  }

  .project-isokan .isokan-browser-frame img,
  .project-isokan .isokan-digital-stack img,
  .project-isokan .desktop-wide img,
  .project-isokan .desktop-small img {
    height: auto;
    max-height: 76vh;
  }

  .project-isokan .isokan-mobile-row {
    grid-template-columns: 1fr;
  }

  .project-isokan .isokan-mobile-row a {
    height: auto;
    max-height: 76vh;
  }

  .project-isokan .isokan-mobile-row img {
    width: 100%;
    height: auto;
  }

  .project-isokan .isokan-editorial-grid a {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .project-isokan .isokan-process-grid a {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .project-isokan .isokan-final-world {
    min-height: 82vh;
    padding: 1.2rem;
  }
}

/* =========================================================
   RESPONSIVE — SMALL PHONES
========================================================= */

@media (max-width: 460px) {
  .project-isokan .isokan-hero {
    padding: 105px 1rem 52px;
  }

  .project-isokan .isokan-meta {
    margin-top: 1.7rem;
  }

  .project-isokan .isokan-story-track {
    gap: 2rem;
    animation-duration: 26s;
  }

  .project-isokan .isokan-story-track span {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }

  .project-isokan .isokan-section {
    padding: 68px 1rem;
  }

  .project-isokan .isokan-section-heading {
    margin-bottom: 2rem;
  }

  .project-isokan .isokan-pillars span {
    font-size: 0.64rem;
  }

  .project-isokan figcaption {
    font-size: 0.68rem;
  }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  .project-isokan .isokan-story-track {
    animation: none;
  }

  .project-isokan *,
  .project-isokan *::before,
  .project-isokan *::after {
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   ABOUT PAGE — UPDATED HUMAN-FIRST VERSION
========================================================= */

.about-page {
  --about-black: #080706;
  --about-charcoal: #11100d;
  --about-cream: #f3e9d8;
  --about-soft: #d8cbbb;
  --about-gold: #b89b5e;
  --about-green: #1f332b;
  --about-line: rgba(243, 233, 216, 0.14);

  background: var(--about-black);
  color: var(--about-cream);
}

.about-page .eyebrow {
  color: var(--about-gold);
}

/* =========================================================
   ABOUT PAGE HERO — CLEANER EDITORIAL VERSION
========================================================= */

.about-hero-new {
  min-height: 100vh;
  padding: 128px 6vw 78px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.72fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at 82% 18%, rgba(184, 155, 94, 0.14), transparent 28%),
    radial-gradient(circle at 12% 80%, rgba(31, 51, 43, 0.55), transparent 34%),
    linear-gradient(135deg, #080706 0%, #14110d 58%, #050504 100%);
}

.about-hero-new::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(8, 7, 6, 0.18),
      transparent 45%,
      rgba(184, 155, 94, 0.04)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(243, 233, 216, 0.025) 0,
      rgba(243, 233, 216, 0.025) 1px,
      transparent 1px,
      transparent 118px
    );
  opacity: 0.55;
  pointer-events: none;
}

.about-hero-copy,
.about-visual-card {
  position: relative;
  z-index: 2;
}

/* LEFT TEXT */

.about-hero-copy {
  max-width: 760px;
}

.about-hero-copy h1 {
  max-width: 760px;
  margin-top: 1rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(3.2rem, 5.8vw, 6.8rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  font-weight: 600;

  color: #fff8ea;
  text-wrap: balance;
}

.about-hero-lead {
  max-width: 620px;
  margin-top: 1.35rem;

  color: rgba(243, 233, 216, 0.74);
  font-size: clamp(0.98rem, 1.05vw, 1.12rem);
  line-height: 1.78;
}

.about-hero-statement {
  max-width: 610px;
  margin-top: 1.8rem;
  padding: 1.05rem 1.2rem;

  border-left: 1px solid rgba(184, 155, 94, 0.65);

  background:
    linear-gradient(
      90deg,
      rgba(184, 155, 94, 0.1),
      rgba(243, 233, 216, 0.018)
    );
}

.about-hero-statement p {
  margin: 0;
  color: rgba(243, 233, 216, 0.72);
  line-height: 1.68;
  font-size: 0.95rem;
}

/* RIGHT IMAGE CARD */

.about-visual-card {
  align-self: center;
  padding: 0.75rem;

  border-radius: 32px;
  border: 1px solid rgba(243, 233, 216, 0.12);

  background:
    linear-gradient(
      145deg,
      rgba(243, 233, 216, 0.075),
      rgba(243, 233, 216, 0.025)
    );

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  backdrop-filter: blur(18px);
}

.about-portrait-frame {
  height: clamp(430px, 62vh, 650px);
  border-radius: 25px;
  overflow: hidden;

  background:
    radial-gradient(circle at 70% 10%, rgba(184, 155, 94, 0.18), transparent 30%),
    #17130f;
}

.about-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;

  filter: contrast(1.03) saturate(0.95) brightness(0.96);
  transition: transform 0.9s cubic-bezier(.19, 1, .22, 1);
}

.about-visual-card:hover .about-portrait-frame img {
  transform: scale(1.035);
}

.about-visual-note {
  padding: 1rem 0.35rem 0.2rem;
}

.about-visual-note span {
  display: block;
  margin-bottom: 0.45rem;

  color: var(--about-gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.about-visual-note p {
  max-width: 440px;
  margin: 0;

  color: rgba(243, 233, 216, 0.68);
  line-height: 1.62;
  font-size: 0.88rem;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
  .about-hero-new {
    min-height: auto;
    padding: 125px 1.4rem 80px;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-hero-copy {
    max-width: 900px;
  }

  .about-hero-copy h1 {
    max-width: 900px;
    font-size: clamp(3.4rem, 10vw, 6.4rem);
  }

  .about-visual-card {
    max-width: 620px;
  }

  .about-portrait-frame {
    height: 520px;
  }
}

@media (max-width: 650px) {
  .about-hero-new {
    padding: 110px 1rem 68px;
    gap: 2rem;
  }

  .about-hero-copy h1 {
    font-size: clamp(2.9rem, 14vw, 4.5rem);
    line-height: 0.96;
    letter-spacing: -0.018em;
  }

  .about-hero-lead {
    font-size: 0.95rem;
    line-height: 1.68;
  }

  .about-hero-statement {
    margin-top: 1.4rem;
    padding: 0.95rem 1rem;
  }

  .about-visual-card {
    border-radius: 24px;
    padding: 0.6rem;
  }

  .about-portrait-frame {
    height: 380px;
    border-radius: 18px;
  }

  .about-visual-note p {
    font-size: 0.84rem;
  }
}

/* GENERAL SECTIONS */

.about-thinking,
.about-process,
.about-background,
.about-build,
.about-personal,
.about-cta {
  padding: 115px 5vw;
  position: relative;
}

.about-section-heading {
  max-width: 980px;
  margin-bottom: 3.2rem;
}

.about-section-heading h2,
.about-background h2,
.about-personal h2,
.about-cta h2 {
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2.8rem, 5.7vw, 6.1rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}

/* PERSPECTIVE */

.about-thinking {
  background:
    radial-gradient(circle at 15% 20%, rgba(184, 155, 94, 0.1), transparent 28%),
    #0c0b09;
}

.about-perspective-layout {
  max-width: 1060px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  border-top: 1px solid rgba(243, 233, 216, 0.16);
  padding-top: 2rem;
}

.about-perspective-layout p {
  color: rgba(243, 233, 216, 0.7);
  line-height: 1.85;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
}

/* PROCESS */

.about-process {
  background:
    radial-gradient(circle at 85% 18%, rgba(31, 51, 43, 0.55), transparent 30%),
    #080706;
}

.about-thinking-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--about-line);
  border-left: 1px solid var(--about-line);
}

.about-thinking-grid article {
  min-height: 310px;
  padding: 1.7rem;

  border-right: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);

  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.045), rgba(243, 233, 216, 0.015));

  transition:
    transform 0.45s ease,
    background 0.45s ease,
    border-color 0.45s ease;
}

.about-thinking-grid article:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 155, 94, 0.35);
  background:
    linear-gradient(145deg, rgba(184, 155, 94, 0.09), rgba(243, 233, 216, 0.02));
}

.about-thinking-grid span {
  color: var(--about-gold);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.about-thinking-grid h3 {
  margin-top: 1.2rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.about-thinking-grid p {
  margin-top: 1.05rem;
  color: rgba(243, 233, 216, 0.66);
  line-height: 1.7;
}

/* =========================================================
   ABOUT BACKGROUND SECTION — UPGRADED EDITORIAL DESIGN
========================================================= */

.about-background,
.about-section.about-background,
.about-light-section.about-background {
  position: relative;
  overflow: hidden;
  padding: clamp(95px, 10vw, 150px) 6vw;
  background:
    radial-gradient(circle at 12% 20%, rgba(168, 143, 90, 0.13), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(47, 58, 51, 0.08), transparent 30%),
    linear-gradient(135deg, #f3eee4 0%, #e8dfd1 100%);
  color: #11110e;
}

/* soft editorial texture */
.about-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(17, 17, 14, 0.035) 0,
      rgba(17, 17, 14, 0.035) 1px,
      transparent 1px,
      transparent 118px
    );
  opacity: 0.45;
  pointer-events: none;
}

/* subtle oversized background word */
.about-background::after {
  content: "PRACTICE";
  position: absolute;
  right: -4vw;
  bottom: -3vw;
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(6rem, 18vw, 18rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: rgba(17, 17, 14, 0.035);
  pointer-events: none;
}

/* main layout */
.about-background-inner,
.about-background .about-section-inner,
.about-background .about-two-column,
.about-background .two-column {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.7fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}

/* left side */
.about-background .eyebrow {
  margin-bottom: 1.2rem;
  color: #8a713b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.about-background h2 {
  max-width: 720px;
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(3.25rem, 6.3vw, 7rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  font-weight: 600;
  text-wrap: balance;
}

/* right side editorial card */
.about-background .section-copy,
.about-background .about-copy,
.about-background .about-section-copy {
  position: relative;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1.4rem, 2.3vw, 2.2rem);

  border-radius: 28px;
  border: 1px solid rgba(17, 17, 14, 0.1);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0.16)
    );

  box-shadow:
    0 28px 80px rgba(17, 17, 14, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);

  backdrop-filter: blur(14px);
}

/* small gold line detail */
.about-background .section-copy::before,
.about-background .about-copy::before,
.about-background .about-section-copy::before {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin-bottom: 1.25rem;
  background: #a88f5a;
}

.about-background p {
  max-width: 620px;
  color: rgba(17, 17, 14, 0.68);
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.85;
}

.about-background p + p {
  margin-top: 1.1rem;
}

/* optional mini tags if you have spans/list inside */
.about-background .about-tags,
.about-background .pillar-list,
.about-background .skill-tags {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.about-background .about-tags span,
.about-background .pillar-list span,
.about-background .skill-tags span {
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 14, 0.12);
  color: rgba(17, 17, 14, 0.7);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.22);
}

/* bottom editorial rule */
.about-background .about-section-inner::after,
.about-background-inner::after {
  content: "";
  grid-column: 1 / -1;
  display: block;
  height: 1px;
  margin-top: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(
    90deg,
    rgba(17, 17, 14, 0.18),
    rgba(168, 143, 90, 0.5),
    transparent
  );
}

/* RESPONSIVE */
@media (max-width: 950px) {
  .about-background,
  .about-section.about-background,
  .about-light-section.about-background {
    padding: 90px 1.25rem;
  }

  .about-background-inner,
  .about-background .about-section-inner,
  .about-background .about-two-column,
  .about-background .two-column {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-background h2 {
    max-width: 850px;
    font-size: clamp(3rem, 10vw, 5.8rem);
    line-height: 1.07;
  }

  .about-background .section-copy,
  .about-background .about-copy,
  .about-background .about-section-copy {
    max-width: 720px;
    padding: 1.4rem;
  }
}

@media (max-width: 600px) {
  .about-background,
  .about-section.about-background,
  .about-light-section.about-background {
    padding: 78px 1rem;
  }

  .about-background h2 {
    font-size: clamp(2.55rem, 12vw, 4.1rem);
    line-height: 1.12;
    letter-spacing: -0.008em;
  }

  .about-background p {
    font-size: 0.93rem;
    line-height: 1.78;
  }

  .about-background .section-copy,
  .about-background .about-copy,
  .about-background .about-section-copy {
    border-radius: 22px;
    padding: 1.2rem;
  }

  .about-background::after {
    font-size: 6rem;
    right: -20vw;
    bottom: 2rem;
  }
}

/* FOCUS AREAS */

.about-build {
  background:
    radial-gradient(circle at 84% 20%, rgba(184, 155, 94, 0.12), transparent 30%),
    linear-gradient(135deg, #080706 0%, #14110d 55%, #0a0a08 100%);
}

.about-build-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

.about-build-grid article {
  min-height: 260px;
  padding: 1.4rem;

  border-radius: 26px;
  border: 1px solid rgba(243, 233, 216, 0.12);
  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.055), rgba(243, 233, 216, 0.018));

  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.about-build-grid article:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 155, 94, 0.4);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.28);
}

.about-build-grid span {
  display: block;
  margin-bottom: 1rem;

  color: var(--about-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about-build-grid p {
  margin: 0;
  color: rgba(243, 233, 216, 0.68);
  line-height: 1.7;
}

/* PERSONAL */

.about-personal {
  background:
    linear-gradient(135deg, #f3e9d8 0%, #d9cdbb 100%);
  color: var(--about-black);
}

.about-personal-card {
  max-width: 1180px;
  margin: 0 auto;

  padding: clamp(2rem, 5vw, 5rem);
  border-radius: 38px;

  background:
    radial-gradient(circle at 85% 15%, rgba(184, 155, 94, 0.18), transparent 26%),
    rgba(255, 255, 255, 0.28);

  border: 1px solid rgba(8, 7, 6, 0.1);
  box-shadow: 0 28px 80px rgba(8, 7, 6, 0.09);
}

.about-personal .eyebrow {
  color: #766035;
}

.about-personal h2 {
  max-width: 1100px;
}

.about-personal p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 1.5rem;

  color: rgba(8, 7, 6, 0.66);
  line-height: 1.78;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
}

/* CTA */

.about-cta {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  background:
    radial-gradient(circle at 70% 30%, rgba(184, 155, 94, 0.14), transparent 28%),
    linear-gradient(135deg, #080706, #14110d 58%, #050504);
}

.about-cta h2 {
  max-width: 900px;
  margin-top: 0.8rem;
}

.about-cta-link {
  display: inline-flex;
  margin-top: 2rem;
  padding: 1rem 1.5rem;

  border-radius: 999px;
  border: 1px solid rgba(184, 155, 94, 0.35);

  color: var(--about-cream);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  background:
    linear-gradient(145deg, rgba(184, 155, 94, 0.14), rgba(243, 233, 216, 0.025));

  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.about-cta-link:hover {
  transform: translateY(-5px);
  border-color: rgba(184, 155, 94, 0.7);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   ABOUT PAGE TEXT SPACING FIX
   Fixes large serif headings touching each other
========================================================= */

/* If your body does not have class="about-page", add it:
   <body class="about-page">
*/

.about-page h1,
.about-page h2,
.about-hero-copy h1,
.about-section h2,
.about-light-section h2,
.about-card h2,
.about-editorial-card h2,
.about-feature h2 {
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-kerning: normal;
  text-wrap: balance;
}

/* Hero headline specifically */
.about-hero-copy h1 {
  max-width: 900px;
  font-size: clamp(3.6rem, 6.4vw, 7rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
}

/* Big light-section headings like "I'm building my design practice..." */
.about-light-section h2,
.about-section-light h2,
.about-background h2,
.about-outside h2 {
  max-width: 980px;
  font-size: clamp(3rem, 6.2vw, 6.8rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

/* If you have extra-large quote/title text */
.about-statement,
.about-big-text,
.about-editorial-title {
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(3rem, 6vw, 6.6rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Paragraphs under big headings */
.about-page p,
.about-hero-lead,
.about-section-copy p,
.about-card p {
  line-height: 1.75;
}

/* Add better space between label, heading, and body copy */
.about-page .eyebrow {
  margin-bottom: 1.2rem;
  letter-spacing: 0.18em;
}

.about-section h2 + p,
.about-light-section h2 + p,
.about-background h2 + p,
.about-outside h2 + p {
  margin-top: 1.5rem;
}

/* Make sure sections breathe properly */
.about-section,
.about-light-section,
.about-background,
.about-outside {
  padding-top: clamp(80px, 10vw, 135px);
  padding-bottom: clamp(80px, 10vw, 135px);
}

/* Tablet */
@media (max-width: 950px) {
  .about-hero-copy h1,
  .about-light-section h2,
  .about-section-light h2,
  .about-background h2,
  .about-outside h2,
  .about-statement,
  .about-big-text,
  .about-editorial-title {
    font-size: clamp(3rem, 10vw, 5.8rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
  }
}

/* Phone */
@media (max-width: 600px) {
  .about-hero-copy h1,
  .about-light-section h2,
  .about-section-light h2,
  .about-background h2,
  .about-outside h2,
  .about-statement,
  .about-big-text,
  .about-editorial-title {
    font-size: clamp(2.65rem, 13vw, 4.4rem);
    line-height: 1.12;
    letter-spacing: -0.006em;
  }

  .about-page .eyebrow {
    margin-bottom: 0.95rem;
  }
}

/* RESPONSIVE */

@media (max-width: 1050px) {
  .about-hero-new {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 130px 1.4rem 80px;
  }

  .about-visual-card {
    max-width: 620px;
  }

  .about-portrait-frame,
  .about-portrait-frame img {
    min-height: 460px;
  }

  .about-thinking,
  .about-process,
  .about-background,
  .about-build,
  .about-personal,
  .about-cta {
    padding: 90px 1.4rem;
  }

  .about-perspective-layout,
  .about-thinking-grid,
  .about-background-inner {
    grid-template-columns: 1fr;
  }

  .about-build-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .about-hero-new {
    padding: 115px 1rem 70px;
  }

  .about-hero-copy h1 {
    font-size: clamp(3rem, 15vw, 4.8rem);
    line-height: 0.94;
    letter-spacing: -0.022em;
  }

  .about-hero-lead,
  .about-hero-statement p {
    font-size: 0.95rem;
    line-height: 1.68;
  }

  .about-portrait-frame,
  .about-portrait-frame img {
    min-height: 360px;
  }

  .about-visual-card {
    border-radius: 24px;
    padding: 0.65rem;
  }

  .about-portrait-frame {
    border-radius: 18px;
  }

  .about-section-heading h2,
  .about-background h2,
  .about-personal h2,
  .about-cta h2 {
    font-size: clamp(2.45rem, 13vw, 4rem);
    line-height: 0.98;
  }

  .about-build-grid {
    grid-template-columns: 1fr;
  }

  .about-thinking-grid article,
  .about-build-grid article {
    min-height: auto;
  }

  .about-personal-card {
    border-radius: 26px;
    padding: 1.5rem;
  }
}

/* =========================================================
   CONTACT PAGE
   Ayotayo Samuel Olowoyo Portfolio
========================================================= */

.contact-page {
  --contact-black: #080706;
  --contact-ink: #11100d;
  --contact-brown: #1b1410;
  --contact-brown-soft: #241a13;
  --contact-cream: #f3e9d8;
  --contact-cream-bright: #fff8ea;
  --contact-soft: #c9bda9;
  --contact-gold: #b89b5e;
  --contact-green: #203527;
  --contact-line: rgba(243, 233, 216, 0.14);

  background: var(--contact-black);
  color: var(--contact-cream);
  overflow-x: hidden;
}

.contact-page main {
  background:
    radial-gradient(circle at 14% 8%, rgba(184, 155, 94, 0.16), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(32, 53, 39, 0.26), transparent 31rem),
    linear-gradient(180deg, #080706 0%, #17110d 48%, #080706 100%);
}

.contact-page p,
.contact-page a,
.contact-page label,
.contact-page span,
.contact-page small,
.contact-page input,
.contact-page textarea,
.contact-page button {
  letter-spacing: 0.01em;
}

.contact-page .eyebrow {
  color: var(--contact-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* =========================================================
   HAMBURGER SAFETY
========================================================= */

.mobile-toggle {
  position: relative;
  z-index: 1002;
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(243, 233, 216, 0.14);
  border-radius: 999px;
  background: rgba(8, 7, 6, 0.42);
  cursor: pointer;
}

.mobile-toggle span {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #f3e9d8;
  transform: translateX(-50%);
  transition:
    top 0.35s ease,
    transform 0.35s ease,
    opacity 0.35s ease;
}

.mobile-toggle span:first-child {
  top: 17px;
}

.mobile-toggle span:last-child {
  top: 25px;
}

.mobile-toggle.active span:first-child,
.mobile-toggle.is-active span:first-child {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}

.mobile-toggle.active span:last-child,
.mobile-toggle.is-active span:last-child {
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 1.2rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(184, 155, 94, 0.16), transparent 22rem),
    rgba(8, 7, 6, 0.96);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.mobile-menu.active,
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-inner {
  display: grid;
  gap: 1rem;
  text-align: center;
}

.mobile-menu-inner a {
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(3rem, 12vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: #f3e9d8;
  text-decoration: none;
  opacity: 1;
}

.mobile-menu-inner a:hover {
  color: var(--contact-gold);
}

body.menu-open {
  overflow: hidden;
}

/* =========================================================
   HERO
========================================================= */

.contact-hero {
  min-height: 82vh;
  padding: 145px 5vw 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 76% 28%, rgba(184, 155, 94, 0.2), transparent 28rem),
    radial-gradient(circle at 18% 82%, rgba(32, 53, 39, 0.28), transparent 25rem),
    linear-gradient(135deg, rgba(8, 7, 6, 0.98), rgba(25, 18, 13, 0.9));
}

.contact-hero::after {
  content: "Contact / Direction / Ideas";
  position: absolute;
  left: 5vw;
  bottom: 1.6rem;
  z-index: -1;
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4rem, 11vw, 11rem);
  line-height: 0.82;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: rgba(243, 233, 216, 0.055);
  pointer-events: none;
}

.contact-hero-copy {
  max-width: 1080px;
}

.contact-hero h1 {
  margin-top: 1rem;
  max-width: 1050px;
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4rem, 8.6vw, 9.1rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--contact-cream-bright);
  text-wrap: balance;
}

.contact-hero-copy > p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 1.45rem;
  color: rgba(243, 233, 216, 0.74);
  font-size: clamp(1rem, 1.22vw, 1.14rem);
  line-height: 1.78;
}

.contact-note-card {
  padding: 1.45rem;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.08), rgba(243, 233, 216, 0.025));
  border: 1px solid var(--contact-line);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.contact-note-card span {
  display: block;
  margin-bottom: 0.85rem;
  color: var(--contact-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-note-card p {
  margin: 0;
  color: rgba(243, 233, 216, 0.7);
  line-height: 1.72;
}

/* =========================================================
   MAIN CONTACT LAYOUT
========================================================= */

.contact-main {
  padding: clamp(70px, 8vw, 115px) 5vw;
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
  align-items: start;
}

.contact-info-panel,
.contact-form-panel {
  height: auto;
  align-self: start;
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.075), rgba(243, 233, 216, 0.025));
  border: 1px solid var(--contact-line);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.contact-info-panel {
  min-height: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
}

.contact-info-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(184, 155, 94, 0.18), transparent 18rem),
    radial-gradient(circle at 88% 90%, rgba(32, 53, 39, 0.28), transparent 20rem);
  pointer-events: none;
}

.contact-info-panel > * {
  position: relative;
  z-index: 1;
}

.contact-info-panel h2,
.contact-form-heading h2 {
  margin-top: 0.9rem;
  font-family: var(--serif), "Cormorant Garamond", serif;
  line-height: 0.94;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--contact-cream-bright);
  text-wrap: balance;
}

.contact-info-panel h2 {
  max-width: 520px;
  font-size: clamp(2.7rem, 4.5vw, 4.9rem);
}

.contact-info-panel p {
  max-width: 480px;
  margin-top: 0.95rem;
  color: rgba(243, 233, 216, 0.69);
  line-height: 1.76;
}

/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-details {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.contact-detail-block {
  padding-top: 1rem;
  border-top: 1px solid rgba(243, 233, 216, 0.13);
}

.contact-detail-block > span {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--contact-gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =========================================================
   HIDDEN EMAIL CARD
========================================================= */

.contact-email-card {
  padding: clamp(1.15rem, 2vw, 1.55rem);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.08), rgba(243, 233, 216, 0.025));
  border: 1px solid rgba(243, 233, 216, 0.14);
}

.contact-email-card h3 {
  margin-top: 0.75rem;
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--contact-cream-bright);
}

.contact-email-card p:not(.eyebrow) {
  max-width: 420px;
  margin-top: 0.85rem;
  color: rgba(243, 233, 216, 0.68);
  font-size: 0.9rem;
  line-height: 1.65;
}

.email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.15rem;
}

.email-btn,
.email-copy-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(184, 155, 94, 0.38);
  border-radius: 999px;
  padding: 0.72rem 0.95rem;
  background: rgba(184, 155, 94, 0.12);
  color: #f3e9d8;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease;
}

.email-copy-btn {
  background: transparent;
}

.email-btn:hover,
.email-copy-btn:hover {
  transform: translateY(-3px);
  background: rgba(184, 155, 94, 0.22);
  border-color: rgba(184, 155, 94, 0.65);
}

.email-status {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  color: rgba(243, 233, 216, 0.52);
  letter-spacing: 0.06em;
}

/* =========================================================
   OLD EMAIL ROW SUPPORT
   Keep this in case an older block still exists
========================================================= */

.email-copy-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.email-copy-row a {
  color: #fff8ea;
  text-decoration: none;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  word-break: break-word;
}

.email-copy-row a:hover {
  color: var(--contact-gold);
}

.copy-email-btn {
  border: 1px solid rgba(243, 233, 216, 0.16);
  background: rgba(243, 233, 216, 0.06);
  color: var(--contact-cream);
  padding: 0.65rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

.copy-email-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 155, 94, 0.5);
  background: rgba(184, 155, 94, 0.12);
}

.copy-feedback {
  display: block;
  min-height: 1rem;
  margin-top: 0.5rem;
  color: var(--contact-gold);
  font-size: 0.72rem;
}

/* =========================================================
   SOCIAL LINKS
========================================================= */

.contact-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.contact-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(243, 233, 216, 0.15);
  background: rgba(243, 233, 216, 0.045);
  color: rgba(243, 233, 216, 0.82);
  text-decoration: none;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    color 0.35s ease;
}

.contact-socials a:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 155, 94, 0.5);
  background: rgba(184, 155, 94, 0.12);
  color: #fff8ea;
}

/* =========================================================
   FORM PANEL
========================================================= */

.contact-form-panel {
  padding: clamp(1.25rem, 2.6vw, 2rem);
}

.contact-form-heading {
  margin-bottom: clamp(1.25rem, 2.2vw, 1.8rem);
}

.contact-form-heading h2 {
  font-size: clamp(2.7rem, 4.8vw, 5rem);
  line-height: 0.92;
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.hidden-field {
  display: none;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.field-group {
  display: grid;
  gap: 0.4rem;
}

.field-group.full {
  grid-column: 1 / -1;
}

.field-group label {
  color: rgba(243, 233, 216, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.field-group input,
.field-group textarea {
  width: 100%;
  border: 1px solid rgba(243, 233, 216, 0.14);
  outline: none;
  background: rgba(8, 7, 6, 0.42);
  color: #fff8ea;
  border-radius: 18px;
  padding: 0.92rem 1rem;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.55;
  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.field-group textarea {
  min-height: 155px;
  max-height: 270px;
  resize: vertical;
}

.field-group input::placeholder,
.field-group textarea::placeholder {
  color: rgba(243, 233, 216, 0.35);
}

.field-group input:focus,
.field-group textarea:focus {
  border-color: rgba(184, 155, 94, 0.55);
  background: rgba(8, 7, 6, 0.64);
  box-shadow: 0 0 0 4px rgba(184, 155, 94, 0.08);
}

.field-group.is-error input,
.field-group.is-error textarea {
  border-color: rgba(255, 130, 110, 0.75);
}

.field-error {
  min-height: 1rem;
  color: #ff9a86;
  font-size: 0.72rem;
  line-height: 1.35;
}

.message-helper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: -0.15rem;
}

.character-count {
  color: rgba(243, 233, 216, 0.44);
  font-size: 0.72rem;
  white-space: nowrap;
}

.contact-submit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.2rem;
  padding: 0.86rem 1.15rem;
  border: 1px solid rgba(184, 155, 94, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(184, 155, 94, 0.28), rgba(243, 233, 216, 0.06));
  color: #fff8ea;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(.19, 1, .22, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.contact-submit:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 155, 94, 0.65);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.35),
    0 0 34px rgba(184, 155, 94, 0.1);
}

.contact-submit.is-loading {
  pointer-events: none;
  opacity: 0.72;
}

.submit-arrow {
  transition: transform 0.35s ease;
}

.contact-submit:hover .submit-arrow {
  transform: translate(3px, -3px);
}

.form-status {
  min-height: 0;
  margin-top: 0.35rem;
  color: rgba(243, 233, 216, 0.72);
  font-size: 0.85rem;
  line-height: 1.5;
}

.form-status.success {
  color: var(--contact-gold);
}

.form-status.error {
  color: #ff9a86;
}

/* =========================================================
   CONTACT STORY STRIP
========================================================= */

.contact-story-strip {
  overflow: hidden;
  border-top: 1px solid rgba(243, 233, 216, 0.12);
  border-bottom: 1px solid rgba(243, 233, 216, 0.12);
  background: #080706;
}

.contact-story-track {
  display: flex;
  width: max-content;
  animation: contactStoryMove 26s linear infinite;
}

.contact-story-group {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.05rem 1rem;
}

.contact-story-group span {
  color: rgba(243, 233, 216, 0.74);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact-story-group span::after {
  content: "•";
  margin-left: 2rem;
  color: var(--contact-gold);
}

@keyframes contactStoryMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .contact-main {
    grid-template-columns: 1fr;
    padding: 85px 1.2rem;
  }

  .contact-info-panel,
  .contact-form-panel {
    width: 100%;
  }

  .contact-info-panel {
    min-height: auto;
  }

  .contact-details {
    margin-top: 2rem;
  }
}

@media (max-width: 1000px) {
  .desktop-nav {
    display: none;
  }

  .mobile-toggle {
    display: block;
  }

  .mobile-menu {
    display: grid;
  }

  .contact-hero {
    min-height: auto;
    padding: 130px 1.2rem 80px;
    grid-template-columns: 1fr;
  }

  .contact-hero::after {
    left: 1.2rem;
    white-space: normal;
    font-size: clamp(3.4rem, 17vw, 7rem);
  }

  .contact-note-card {
    max-width: 560px;
  }
}

@media (max-width: 700px) {
  .contact-hero {
    padding: 115px 1.05rem 70px;
  }

  .contact-hero h1 {
    font-size: clamp(3.2rem, 15vw, 5rem);
    line-height: 0.94;
  }

  .contact-hero-copy > p:not(.eyebrow) {
    font-size: 0.95rem;
  }

  .contact-main {
    padding: 70px 1rem;
    gap: 1rem;
  }

  .contact-note-card,
  .contact-info-panel,
  .contact-form-panel,
  .contact-email-card {
    border-radius: 22px;
  }

  .contact-info-panel,
  .contact-form-panel {
    padding: 1rem;
  }

  .contact-info-panel h2,
  .contact-form-heading h2 {
    font-size: clamp(2.5rem, 13vw, 4rem);
    line-height: 0.94;
  }

  .contact-info-panel p,
  .contact-email-card p:not(.eyebrow) {
    font-size: 0.9rem;
    line-height: 1.65;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .field-group input,
  .field-group textarea {
    border-radius: 16px;
    padding: 0.88rem 0.95rem;
  }

  .field-group textarea {
    min-height: 145px;
  }

  .message-helper {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .email-actions,
  .contact-socials {
    flex-direction: column;
    align-items: stretch;
  }

  .email-btn,
  .email-copy-btn,
  .contact-socials a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .contact-submit {
    width: 100%;
    justify-content: center;
  }

  .contact-story-group {
    gap: 1.4rem;
  }

  .contact-story-group span::after {
    margin-left: 1.4rem;
  }
}

@media (max-width: 430px) {
  .contact-hero h1 {
    font-size: clamp(3rem, 16vw, 4.4rem);
  }

  .contact-main {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .contact-email-card h3 {
    font-size: clamp(2rem, 10vw, 2.7rem);
  }

  .mobile-menu-inner a {
    font-size: clamp(2.8rem, 16vw, 4.6rem);
  }
}


/* =========================================================
   SELECTED EXPLORATIONS — CURATED VISUAL ARCHIVE
========================================================= */

.explorations-page {
  --ex-black: #080706;
  --ex-charcoal: #11100d;
  --ex-cream: #f3e9d8;
  --ex-muted: rgba(243, 233, 216, 0.68);
  --ex-gold: #b89b5e;
  --ex-red: #b74334;
  --ex-green: #1f332b;
  --ex-line: rgba(243, 233, 216, 0.13);

  background: var(--ex-black);
  color: var(--ex-cream);
  overflow-x: hidden;
}

.explorations-page * {
  box-sizing: border-box;
}

.explorations-page img {
  max-width: 100%;
  display: block;
}

.explorations-page .eyebrow {
  color: var(--ex-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.explorations-page .lightbox-trigger {
  display: block;
}

.explorations-page figcaption {
  margin: 0;
  padding: 0.75rem 0.15rem 0.05rem;
  color: rgba(243, 233, 216, 0.62);
  font-size: 0.76rem;
  line-height: 1.45;
}

/* HERO */

.explore-hero {
  min-height: 88svh;
  padding: 140px 5vw 90px;
  display: grid;
  grid-template-columns: 1.2fr 0.65fr;
  gap: 5vw;
  align-items: end;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at 82% 20%, rgba(184, 155, 94, 0.14), transparent 28%),
    radial-gradient(circle at 14% 82%, rgba(183, 67, 52, 0.16), transparent 30%),
    linear-gradient(135deg, #080706 0%, #14110d 58%, #050504 100%);
}

.explore-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(243, 233, 216, 0.025) 0,
      rgba(243, 233, 216, 0.025) 1px,
      transparent 1px,
      transparent 118px
    );
  opacity: 0.5;
  pointer-events: none;
}

.explore-hero-copy,
.explore-hero-aside {
  position: relative;
  z-index: 2;
}

.explore-hero-copy h1 {
  margin-top: 1rem;
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4rem, 9.6vw, 9.6rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: #fff8ea;
}

.explore-hero-copy p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 1.4rem;
  color: rgba(243, 233, 216, 0.76);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.76;
}

.explore-hero-aside {
  align-self: center;
  padding: 1.4rem;
  border-radius: 28px;
  border: 1px solid rgba(243, 233, 216, 0.13);
  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.07), rgba(243, 233, 216, 0.025));
  backdrop-filter: blur(18px);
}

.explore-hero-aside span {
  display: block;
  color: var(--ex-gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.explore-hero-aside p {
  margin-top: 1rem;
  color: rgba(243, 233, 216, 0.7);
  line-height: 1.65;
}

/* GENERAL SECTIONS */

.explore-section,
.explore-final {
  position: relative;
  padding: clamp(85px, 10vw, 130px) 5vw;
}

.explore-section-heading {
  max-width: 1020px;
  margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
}

.explore-section-heading h2,
.explore-final-copy h2 {
  max-width: 1080px;
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2.7rem, 5.6vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.explore-section-heading p:not(.eyebrow),
.explore-final-copy p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 1rem;
  color: var(--ex-muted);
  line-height: 1.76;
}

/* =========================================================
   SELECTED EXPLORATIONS PAGE
   Ayotayo Samuel Olowoyo Portfolio
========================================================= */

.explorations-page {
  --explore-black: #080706;
  --explore-ink: #11100d;
  --explore-brown: #1b1410;
  --explore-brown-soft: #2a2019;
  --explore-cream: #f3e9d8;
  --explore-muted: #c8bca8;
  --explore-gold: #b89b5e;
  --explore-green: #203527;
  --explore-line: rgba(243, 233, 216, 0.13);

  background: var(--explore-black);
  color: var(--explore-cream);
  overflow-x: hidden;
}

.explorations-page *,
.explorations-page *::before,
.explorations-page *::after {
  box-sizing: border-box;
}

.explorations-page main {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 6%, rgba(184, 155, 94, 0.13), transparent 24rem),
    radial-gradient(circle at 88% 18%, rgba(32, 53, 39, 0.22), transparent 28rem),
    linear-gradient(180deg, #080706 0%, #100d0a 38%, #080706 100%);
}

.explorations-page .eyebrow {
  color: var(--explore-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.explorations-page img {
  max-width: 100%;
}

/* =========================================================
   HERO
========================================================= */

.explore-hero {
  min-height: 92vh;
  padding: 150px 5vw 85px;

  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;

  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.explore-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to right, rgba(8, 7, 6, 0.9), rgba(8, 7, 6, 0.38)),
    radial-gradient(circle at 72% 34%, rgba(184, 155, 94, 0.16), transparent 26rem),
    radial-gradient(circle at 18% 80%, rgba(32, 53, 39, 0.28), transparent 24rem);
}

.explore-hero::after {
  content: "Archive / Visual Studies / Posters / Type / Community";
  position: absolute;
  left: 5vw;
  bottom: 2rem;
  z-index: -1;

  width: 100%;
  white-space: nowrap;

  color: rgba(243, 233, 216, 0.08);
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4rem, 11vw, 11rem);
  line-height: 0.8;

  pointer-events: none;
}

.explore-hero-copy {
  max-width: 1050px;
}

.explore-hero h1 {
  margin-top: 1.1rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4rem, 10vw, 10.5rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  font-weight: 600;

  color: #fff8ea;
  text-wrap: balance;
}

.explore-hero-copy > p {
  max-width: 720px;
  margin-top: 1.45rem;

  color: rgba(243, 233, 216, 0.72);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.75;
}

.explore-hero-aside {
  align-self: end;

  padding: 1.4rem;
  border-radius: 24px;

  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.075), rgba(243, 233, 216, 0.025));

  border: 1px solid rgba(243, 233, 216, 0.14);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.explore-hero-aside span {
  display: block;
  margin-bottom: 0.9rem;

  color: var(--explore-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.explore-hero-aside p {
  color: rgba(243, 233, 216, 0.68);
  line-height: 1.65;
  font-size: 0.95rem;
}

/* =========================================================
   GENERAL SECTIONS
========================================================= */

.explore-section {
  padding: clamp(85px, 9vw, 135px) 5vw;
  position: relative;
  overflow: hidden;
}

.explore-section-heading {
  max-width: 1000px;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.explore-section-heading h2,
.explore-final-copy h2 {
  margin-top: 0.85rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2.9rem, 6.2vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-weight: 600;

  text-wrap: balance;
}

.explore-section-heading > p:not(.eyebrow),
.explore-final-copy > p {
  max-width: 700px;
  margin-top: 1.1rem;

  color: rgba(243, 233, 216, 0.67);
  font-size: 1rem;
  line-height: 1.78;
}

/* =========================================================
   UNIVERSAL IMAGE CARD SYSTEM
========================================================= */

.explorations-page figure {
  margin: 0;
}

.explorations-page figure a,
.final-collage a {
  display: block;
  width: 100%;
  overflow: hidden;
  background: #11100d;
}

.explorations-page figure img,
.final-collage img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;

  transition:
    transform 0.85s cubic-bezier(.19, 1, .22, 1),
    filter 0.45s ease;
}

.explorations-page figcaption {
  margin: 0;
  padding-top: 0.72rem;

  color: rgba(243, 233, 216, 0.65);
  font-size: 0.74rem;
  line-height: 1.45;
}

.explorations-page figure:hover img,
.final-collage a:hover img {
  transform: scale(1.035);
  filter: brightness(1.06) contrast(1.04);
}

/* =========================================================
   COMMUNITY & EVENT GRAPHICS
========================================================= */

.explorations-page .explore-community {
  padding-bottom: clamp(70px, 8vw, 120px);

  background:
    radial-gradient(circle at 18% 8%, rgba(184, 155, 94, 0.13), transparent 28rem),
    radial-gradient(circle at 90% 60%, rgba(58, 33, 25, 0.45), transparent 30rem),
    linear-gradient(135deg, #0b0907 0%, #1a130f 55%, #080706 100%);
}

.explorations-page .community-wall {
  width: min(100%, 1180px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.25vw, 1.25rem);
  align-items: start;
}

.explorations-page .community-wall figure {
  margin: 0;
  padding: 0.48rem;
  border-radius: 22px;
  overflow: hidden;

  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.075), rgba(243, 233, 216, 0.02));

  border: 1px solid rgba(243, 233, 216, 0.13);

  box-shadow:
    0 22px 65px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  transition:
    transform 0.5s cubic-bezier(.19, 1, .22, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.explorations-page .community-wall figure:hover {
  transform: translateY(-5px);
  border-color: rgba(184, 155, 94, 0.38);
  box-shadow:
    0 30px 85px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(184, 155, 94, 0.07);
}

.explorations-page .community-wall figure > a,
.explorations-page .community-system-grid a {
  display: block;
  width: 100%;
  overflow: hidden;

  border-radius: 17px;
  background: #11100d;
}

.explorations-page .community-wall img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;

  border-radius: 17px;
}

.explorations-page .community-wall figcaption {
  margin: 0;
  padding: 0.62rem 0.12rem 0.05rem;

  color: rgba(243, 233, 216, 0.68);
  font-size: 0.7rem;
  line-height: 1.4;
}

/* Young Adult Sunday, 1920x1080 */
.explorations-page .community-feature {
  grid-column: 1 / 7;
}

.explorations-page .community-feature > a {
  aspect-ratio: 16 / 9;
}

/* Women's Week, 4500x5625 */
.explorations-page .community-wall .community-portrait:nth-of-type(2) {
  grid-column: 7 / 10;
}

.explorations-page .community-wall .community-portrait:nth-of-type(2) > a {
  aspect-ratio: 4 / 5;
}

/* Mother's Day, 4500x5625 */
.explorations-page .community-wall .community-portrait:nth-of-type(3) {
  grid-column: 10 / 13;
}

.explorations-page .community-wall .community-portrait:nth-of-type(3) > a {
  aspect-ratio: 4 / 5;
}

/* Words From The Pulpit system */
.explorations-page .community-system {
  grid-column: 1 / 8;
}

.explorations-page .community-system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.explorations-page .community-system-grid a {
  aspect-ratio: 16 / 9;
}

.explorations-page .community-system-grid img {
  object-fit: cover;
  object-position: center;
}

/* Sunday School, 1920x1080 */
.explorations-page .community-wide {
  grid-column: 8 / 13;
}

.explorations-page .community-wide > a {
  aspect-ratio: 16 / 9;
}

.explorations-page .community-small {
  display: none;
}

/* =========================================================
   POSTER EXPLORATIONS CLEAN FIX
========================================================= */

.explorations-page .explore-posters {
  background:
    radial-gradient(circle at 20% 20%, rgba(20, 82, 130, 0.16), transparent 28rem),
    radial-gradient(circle at 82% 64%, rgba(184, 155, 94, 0.12), transparent 26rem),
    linear-gradient(180deg, #080706 0%, #101319 50%, #080706 100%);
}

.explorations-page .poster-showcase {
  width: min(100%, 1180px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 0.9fr 1fr;
  grid-template-areas:
    "star copy camp"
    "star grape camp";

  gap: 1.25rem;
  align-items: start;
}

.explorations-page .poster-showcase figure,
.explorations-page .poster-copy-panel {
  margin: 0;
  height: auto;
  min-height: 0;
  align-self: start;

  border-radius: 26px;
  overflow: hidden;

  background: rgba(243, 233, 216, 0.045);
  border: 1px solid rgba(243, 233, 216, 0.14);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.explorations-page .poster-atmospheric {
  grid-area: star;
}

.explorations-page .poster-copy-panel {
  grid-area: copy;
}

.explorations-page .poster-camp {
  grid-area: camp;
}

.explorations-page .poster-graphic {
  grid-area: grape;
}

.explorations-page .poster-showcase figure {
  padding: 0.55rem;
}

.explorations-page .poster-showcase a {
  display: block;
  overflow: hidden;
  height: auto;
  border-radius: 20px;
}

/* tall posters */
.explorations-page .poster-atmospheric a,
.explorations-page .poster-camp a {
  aspect-ratio: 4 / 5.25;
}

/* grape is square so it does not become huge */
.explorations-page .poster-graphic a {
  aspect-ratio: 1 / 1;
}

/* image fit */
.explorations-page .poster-showcase img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;
}

/* grape needs to stay readable */
.explorations-page .poster-graphic img {
  object-fit: cover;
  object-position: center;
}

.explorations-page .poster-copy-panel {
  padding: 1.5rem;
}

.explorations-page .poster-copy-panel h3 {
  margin-top: 0.8rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;

  color: #f3e9d8;
}

.explorations-page .poster-copy-panel p:not(.eyebrow) {
  margin-top: 1rem;

  color: rgba(243, 233, 216, 0.68);
  line-height: 1.65;
  font-size: 0.92rem;
}

.explorations-page .poster-showcase figcaption {
  margin: 0;
  padding: 0.72rem 0.3rem 0.12rem;

  color: rgba(243, 233, 216, 0.72);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* =========================================================
   PERSONAL IDENTITY
========================================================= */

.explorations-page .explore-identity {
  padding: clamp(90px, 10vw, 150px) 5vw;

  background:
    radial-gradient(circle at 18% 25%, rgba(184, 155, 94, 0.14), transparent 28rem),
    radial-gradient(circle at 82% 70%, rgba(60, 43, 28, 0.36), transparent 30rem),
    linear-gradient(135deg, #080706 0%, #15110d 58%, #060504 100%);
}

.explorations-page .identity-board {
  width: min(100%, 1180px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.35fr 0.9fr 0.9fr;
  gap: clamp(1rem, 1.4vw, 1.35rem);
  align-items: start;
}

.explorations-page .identity-board figure {
  margin: 0;
  padding: 0.65rem;
  border-radius: 28px;
  overflow: hidden;
  height: fit-content;

  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.07), rgba(243, 233, 216, 0.018));

  border: 1px solid rgba(243, 233, 216, 0.14);

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  transition:
    transform 0.55s cubic-bezier(.19, 1, .22, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.explorations-page .identity-board figure:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 155, 94, 0.46);
  box-shadow:
    0 36px 90px rgba(0, 0, 0, 0.36),
    0 0 46px rgba(184, 155, 94, 0.08);
}

.explorations-page .identity-board a {
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
}

.explorations-page .identity-main a {
  min-height: 420px;

  background:
    radial-gradient(circle at center, rgba(255, 221, 62, 0.18), transparent 45%),
    radial-gradient(circle at 48% 48%, rgba(184, 155, 94, 0.14), transparent 58%),
    linear-gradient(135deg, #11100d, #060504);
}

.explorations-page .identity-dark a,
.explorations-page .identity-light a {
  min-height: 280px;
}

.explorations-page .identity-dark a {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 48%),
    linear-gradient(135deg, #171512, #0a0907);
}

.explorations-page .identity-light a {
  background:
    radial-gradient(circle at center, rgba(184, 155, 94, 0.12), transparent 48%),
    linear-gradient(135deg, #f4edc8, #eee4aa);
}

.explorations-page .identity-board img {
  height: auto;
  display: block;
  object-fit: contain;

  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.24));

  transition:
    transform 0.75s cubic-bezier(.19, 1, .22, 1),
    filter 0.45s ease;
}

.explorations-page .identity-main img {
  width: min(43%, 300px);
}

.explorations-page .identity-dark img,
.explorations-page .identity-light img {
  width: min(58%, 230px);
}

.explorations-page .identity-board figure:hover img {
  transform: scale(1.055);
}

.explorations-page .identity-board figcaption {
  margin: 0;
  padding: 0.72rem 0.15rem 0.08rem;

  color: rgba(243, 233, 216, 0.72);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* =========================================================
   EXPLORATIONS — PACKAGING & PRINT STUDIES
========================================================= */

.explorations-page .explore-packaging-study {
  background:
    radial-gradient(circle at 15% 20%, rgba(184, 155, 94, 0.16), transparent 28rem),
    radial-gradient(circle at 90% 65%, rgba(255, 255, 255, 0.42), transparent 30rem),
    linear-gradient(135deg, #f2eadb 0%, #d8cfbd 100%);

  color: #080706;
}

.explorations-page .explore-packaging-study .eyebrow {
  color: #80673a;
}

.explorations-page .explore-packaging-study .explore-section-heading h2 {
  color: #080706;
}

.explorations-page .explore-packaging-study .explore-section-heading p:not(.eyebrow) {
  color: rgba(8, 7, 6, 0.64);
}

/* layout */
.explorations-page .packaging-study-wrap {
  width: min(100%, 1180px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* copy */
.explorations-page .packaging-study-copy {
  max-width: 560px;
}

.explorations-page .packaging-study-copy h3 {
  margin-top: 0.85rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2.6rem, 4.4vw, 5.2rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-weight: 600;

  color: #080706;
}

.explorations-page .packaging-study-copy p:not(.eyebrow) {
  margin-top: 1.15rem;
  max-width: 520px;

  color: rgba(8, 7, 6, 0.64);
  line-height: 1.75;
  font-size: 0.98rem;
}

/* two packaging cards */
.explorations-page .packaging-study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.5vw, 1.35rem);
  align-items: start;
}

/* card */
.explorations-page .packaging-study-main {
  margin: 0;
  padding: 0.65rem;
  border-radius: 28px;

  background:
    linear-gradient(145deg, rgba(255,255,255,0.62), rgba(255,255,255,0.2));

  border: 1px solid rgba(8, 7, 6, 0.1);

  box-shadow:
    0 24px 70px rgba(8, 7, 6, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.45);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}

.explorations-page .packaging-study-main:hover {
  transform: translateY(-5px);
  border-color: rgba(128, 103, 58, 0.32);
  box-shadow:
    0 32px 90px rgba(8, 7, 6, 0.16),
    0 0 34px rgba(184, 155, 94, 0.08);
}

/* image area */
.explorations-page .packaging-study-main a {
  display: flex;
  align-items: center;
  justify-content: center;

  aspect-ratio: 5 / 7;
  border-radius: 21px;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.45), transparent 55%),
    #f8f1e4;
}

.explorations-page .packaging-study-main img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;

  transition: transform 0.75s cubic-bezier(.19, 1, .22, 1);
}

.explorations-page .packaging-study-main:hover img {
  transform: scale(1.025);
}

.explorations-page .packaging-study-main figcaption {
  margin: 0;
  padding: 0.72rem 0.15rem 0.05rem;

  color: rgba(8, 7, 6, 0.62);
  font-size: 0.74rem;
  line-height: 1.45;
}

/* tablet */
@media (max-width: 1000px) {
  .explorations-page .packaging-study-wrap {
    grid-template-columns: 1fr;
  }

  .explorations-page .packaging-study-copy {
    max-width: 760px;
  }
}

/* mobile */
@media (max-width: 700px) {
  .explorations-page .packaging-study-grid {
    grid-template-columns: 1fr;
  }

  .explorations-page .packaging-study-main {
    padding: 0.55rem;
    border-radius: 22px;
  }

  .explorations-page .packaging-study-main a {
    border-radius: 17px;
    aspect-ratio: 5 / 7;
  }

  .explorations-page .packaging-study-copy h3 {
    font-size: clamp(2.4rem, 12vw, 4rem);
  }
}

/* =========================================================
   VISUAL PLAYGROUND
========================================================= */

.explorations-page .explore-final {
  padding: clamp(90px, 9vw, 140px) 5vw;

  display: grid;
  grid-template-columns: 0.76fr 1.24fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;

  background:
    radial-gradient(circle at 12% 18%, rgba(184, 155, 94, 0.15), transparent 26rem),
    radial-gradient(circle at 85% 58%, rgba(82, 45, 35, 0.34), transparent 34rem),
    linear-gradient(135deg, #080706 0%, #18120e 58%, #070604 100%);

  overflow: hidden;
  position: relative;
}

.explorations-page .explore-final-copy {
  max-width: 520px;
  position: relative;
  z-index: 2;
}

.explorations-page .explore-final-copy h2 {
  color: #f3e9d8;
  font-size: clamp(3.5rem, 7.4vw, 7.5rem);
}

.explorations-page .final-collage {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.explorations-page .final-collage a {
  position: relative;
  overflow: hidden;

  border-radius: 24px;
  border: 1px solid rgba(243, 233, 216, 0.15);

  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.08), rgba(243, 233, 216, 0.025));

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  transition:
    transform 0.55s cubic-bezier(.19, 1, .22, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.explorations-page .final-collage a:hover {
  transform: translateY(-7px) scale(1.012);
  border-color: rgba(184, 155, 94, 0.5);
  box-shadow:
    0 42px 110px rgba(0, 0, 0, 0.44),
    0 0 46px rgba(184, 155, 94, 0.09);
}

.explorations-page .final-collage span {
  position: absolute;
  left: 0.72rem;
  bottom: 0.72rem;
  z-index: 2;

  padding: 0.43rem 0.68rem;
  border-radius: 999px;

  background: rgba(8, 7, 6, 0.6);
  border: 1px solid rgba(243, 233, 216, 0.13);
  backdrop-filter: blur(12px);

  color: rgba(243, 233, 216, 0.9);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* collage placements */
.explorations-page .collage-wide {
  grid-column: span 7;
  aspect-ratio: 16 / 9;
}

.explorations-page .collage-tall {
  grid-column: span 5;
  grid-row: span 2;
  aspect-ratio: 4 / 5.4;
}

.explorations-page .collage-small {
  grid-column: span 4;
  aspect-ratio: 16 / 9;
}

.explorations-page .collage-logo {
  grid-column: span 4;
  aspect-ratio: 1 / 1;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at center, rgba(255, 221, 62, 0.16), transparent 48%),
    linear-gradient(135deg, #15110d, #0a0806);
}

.explorations-page .collage-logo img {
  width: 48%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.35));
}

.explorations-page .collage-medium {
  grid-column: span 4;
  aspect-ratio: 1 / 1;
}

/* =========================================================
   LIGHTBOX
========================================================= */

.explorations-page .lightbox {
  background: rgba(5, 5, 4, 0.92);
  backdrop-filter: blur(18px);
}

.explorations-page .lightbox img {
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  object-fit: contain;
}

/* =========================================================
   EXPLORATIONS PAGE — RESPONSIVE FIT FIX
   Tablet + Mobile
========================================================= */

/* Make all exploration image links behave consistently */
.explorations-page figure > a,
.explorations-page .final-collage a,
.explorations-page .community-system-grid a,
.explorations-page .packaging-study-main a {
  display: block;
  width: 100%;
  overflow: hidden;
}

/* Make all normal images fill their visual boxes cleanly */
.explorations-page figure img,
.explorations-page .final-collage img,
.explorations-page .community-system-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-position: center;
}

/* =========================================================
   TABLET — 1050px AND DOWN
========================================================= */

@media (max-width: 1050px) {

  /* HERO */
  .explorations-page .explore-hero {
    min-height: auto;
    padding: 130px 1.25rem 75px;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .explorations-page .explore-hero::after {
    left: 1.25rem;
    bottom: 1rem;
    font-size: clamp(3rem, 16vw, 7rem);
    white-space: normal;
  }

  .explorations-page .explore-hero-aside {
    max-width: 620px;
  }

  .explorations-page .explore-section {
    padding: 90px 1.25rem;
  }

  /* COMMUNITY */
  .explorations-page .community-wall {
    width: min(100%, 900px);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
  }

  .explorations-page .community-feature,
  .explorations-page .community-system,
  .explorations-page .community-wide {
    grid-column: 1 / -1;
  }

  .explorations-page .community-wall .community-portrait:nth-of-type(2) {
    grid-column: 1 / 4;
  }

  .explorations-page .community-wall .community-portrait:nth-of-type(3) {
    grid-column: 4 / 7;
  }

  .explorations-page .community-feature > a,
  .explorations-page .community-wide > a,
  .explorations-page .community-system-grid a {
    aspect-ratio: 16 / 9;
  }

  .explorations-page .community-portrait > a {
    aspect-ratio: 4 / 5;
  }

  .explorations-page .community-wall img,
  .explorations-page .community-system-grid img {
    object-fit: cover;
  }

  /* POSTERS */
  .explorations-page .poster-showcase {
    width: min(100%, 900px);
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "star camp"
      "copy grape" !important;
    gap: 1rem;
    align-items: start;
  }

  .explorations-page .poster-atmospheric a,
  .explorations-page .poster-camp a {
    aspect-ratio: 4 / 5.25;
  }

  .explorations-page .poster-graphic a {
    aspect-ratio: 1 / 1;
  }

  .explorations-page .poster-showcase img {
    object-fit: cover;
  }

  /* IDENTITY */
  .explorations-page .identity-board {
    width: min(100%, 900px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .explorations-page .identity-main {
    grid-column: 1 / -1;
  }

  .explorations-page .identity-main a {
    min-height: 340px;
  }

  .explorations-page .identity-dark a,
  .explorations-page .identity-light a {
    min-height: 260px;
  }

  .explorations-page .identity-board img {
    width: min(50%, 220px);
    height: auto;
    object-fit: contain;
  }

  .explorations-page .identity-main img {
    width: min(38%, 280px);
  }

  /* PACKAGING */
  .explorations-page .packaging-study-wrap {
    width: min(100%, 900px);
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .explorations-page .packaging-study-copy {
    max-width: 760px;
  }

  .explorations-page .packaging-study-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .explorations-page .packaging-study-main a {
    aspect-ratio: 5 / 7;
  }

  .explorations-page .packaging-study-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* FINAL COLLAGE */
  .explorations-page .explore-final {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 95px 1.25rem;
  }

  .explorations-page .explore-final-copy {
    max-width: 760px;
  }

  .explorations-page .final-collage {
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
  }

  .explorations-page .final-collage a {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
  }

  .explorations-page .collage-wide {
    grid-column: span 4;
    aspect-ratio: 16 / 9;
  }

  .explorations-page .collage-tall {
    grid-column: span 2;
    aspect-ratio: 4 / 5;
  }

  .explorations-page .collage-small {
    grid-column: span 3;
    aspect-ratio: 16 / 9;
  }

  .explorations-page .collage-logo {
    grid-column: span 3;
    aspect-ratio: 16 / 9;
  }

  .explorations-page .collage-medium {
    grid-column: span 6;
    aspect-ratio: 16 / 9;
  }

  .explorations-page .collage-logo {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .explorations-page .collage-logo img {
    width: 32%;
    height: auto;
    object-fit: contain;
  }
}

/* =========================================================
   MOBILE — 700px AND DOWN
========================================================= */

@media (max-width: 700px) {

  /* GENERAL */
  .explorations-page .explore-hero {
    padding: 115px 1rem 70px;
  }

  .explorations-page .explore-hero h1 {
    font-size: clamp(3.2rem, 18vw, 5rem);
    line-height: 0.9;
  }

  .explorations-page .explore-hero-copy > p,
  .explorations-page .explore-hero-aside p,
  .explorations-page .explore-section-heading > p:not(.eyebrow),
  .explorations-page .explore-final-copy p:not(.eyebrow) {
    font-size: 0.94rem;
    line-height: 1.7;
  }

  .explorations-page .explore-section {
    padding: 78px 1rem;
  }

  .explorations-page .explore-section-heading {
    margin-bottom: 2rem;
  }

  .explorations-page .explore-section-heading h2,
  .explorations-page .explore-final-copy h2 {
    font-size: clamp(2.45rem, 13vw, 4rem);
    line-height: 0.96;
  }

  /* COMMUNITY */
  .explorations-page .community-wall {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .explorations-page .community-feature,
  .explorations-page .community-wall .community-portrait:nth-of-type(2),
  .explorations-page .community-wall .community-portrait:nth-of-type(3),
  .explorations-page .community-system,
  .explorations-page .community-wide {
    grid-column: 1;
  }

  .explorations-page .community-wall figure {
    padding: 0.45rem;
    border-radius: 20px;
  }

  .explorations-page .community-wall figure > a,
  .explorations-page .community-system-grid a {
    border-radius: 15px;
  }

  .explorations-page .community-feature > a,
  .explorations-page .community-wide > a,
  .explorations-page .community-system-grid a {
    aspect-ratio: 16 / 9;
  }

  .explorations-page .community-portrait > a {
    aspect-ratio: 4 / 5;
  }

  .explorations-page .community-system-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .explorations-page .community-wall img,
  .explorations-page .community-system-grid img {
    object-fit: cover;
  }

  /* POSTERS */
  .explorations-page .poster-showcase {
    width: 100%;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "star"
      "copy"
      "camp"
      "grape" !important;
    gap: 1rem;
  }

  .explorations-page .poster-showcase figure,
  .explorations-page .poster-copy-panel {
    border-radius: 22px;
  }

  .explorations-page .poster-atmospheric a,
  .explorations-page .poster-camp a {
    aspect-ratio: 4 / 5.2;
  }

  .explorations-page .poster-graphic a {
    aspect-ratio: 4 / 3;
  }

  .explorations-page .poster-showcase img {
    object-fit: cover;
    object-position: center;
  }

  .explorations-page .poster-copy-panel {
    padding: 1.25rem;
  }

  .explorations-page .poster-copy-panel h3 {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
    line-height: 0.98;
  }

  /* PACKAGING */
  .explorations-page .packaging-study-wrap {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .explorations-page .packaging-study-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .explorations-page .packaging-study-main {
    padding: 0.5rem;
    border-radius: 20px;
  }

  .explorations-page .packaging-study-main a {
    aspect-ratio: 5 / 7;
    border-radius: 15px;
  }

  .explorations-page .packaging-study-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .explorations-page .packaging-study-copy h3 {
    font-size: clamp(2.25rem, 12vw, 3.8rem);
    line-height: 0.96;
  }

  /* PERSONAL IDENTITY */
  .explorations-page .identity-board {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .explorations-page .identity-main {
    grid-column: auto;
  }

  .explorations-page .identity-board figure {
    padding: 0.5rem;
    border-radius: 20px;
  }

  .explorations-page .identity-main a,
  .explorations-page .identity-dark a,
  .explorations-page .identity-light a {
    min-height: 230px;
    border-radius: 15px;
  }

  .explorations-page .identity-board img,
  .explorations-page .identity-main img {
    width: min(50%, 185px);
    height: auto;
    object-fit: contain;
  }

  /* FINAL COLLAGE */
  .explorations-page .explore-final {
    min-height: auto;
    padding: 80px 1rem;
  }

  .explorations-page .explore-final::before {
    display: none;
  }

  .explorations-page .final-collage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .explorations-page .final-collage a {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 20px;
  }

  .explorations-page .collage-wide,
  .explorations-page .collage-small,
  .explorations-page .collage-medium {
    aspect-ratio: 16 / 9;
  }

  .explorations-page .collage-tall {
    aspect-ratio: 4 / 5;
  }

  .explorations-page .collage-logo {
    aspect-ratio: 16 / 9;
  }

  .explorations-page .collage-logo img {
    width: 32%;
    height: auto;
    object-fit: contain;
  }

  .explorations-page .final-collage img {
    object-fit: cover;
  }

  .explorations-page .final-collage span {
    font-size: 0.6rem;
  }

  .explorations-page figcaption {
    font-size: 0.68rem;
  }
}

/* =========================================================
   SMALL PHONES — 480px AND DOWN
========================================================= */

@media (max-width: 480px) {

  .explorations-page .explore-hero {
    padding-top: 105px;
  }

  .explorations-page .explore-hero h1 {
    font-size: clamp(3rem, 17vw, 4.6rem);
  }

  .explorations-page .explore-section-heading h2,
  .explorations-page .explore-final-copy h2 {
    font-size: clamp(2.35rem, 13vw, 3.7rem);
  }

  .explorations-page .poster-copy-panel h3 {
    font-size: clamp(2rem, 11vw, 3.1rem);
  }

  .explorations-page .community-wall,
  .explorations-page .poster-showcase,
  .explorations-page .packaging-study-grid,
  .explorations-page .identity-board,
  .explorations-page .final-collage {
    gap: 0.85rem;
  }

  .explorations-page .community-wall figure,
  .explorations-page .poster-showcase figure,
  .explorations-page .packaging-study-main,
  .explorations-page .identity-board figure {
    border-radius: 18px;
  }

  .explorations-page .community-wall figure > a,
  .explorations-page .poster-showcase figure a,
  .explorations-page .packaging-study-main a,
  .explorations-page .identity-board a {
    border-radius: 13px;
  }
}


/* =========================================================
   EXPLORATIONS — CLOSING NOTE
   Clean, controlled, and consistent
========================================================= */

.explore-closing {
  width: min(calc(100% - 10vw), 1180px);
  margin: clamp(4rem, 7vw, 6rem) auto clamp(5rem, 8vw, 7rem);
  padding: clamp(2.4rem, 4vw, 4rem);

  position: relative;
  overflow: hidden;

  border-radius: 32px;
  border: 1px solid rgba(243, 233, 216, 0.11);

  background:
    radial-gradient(circle at 85% 18%, rgba(184, 155, 94, 0.12), transparent 24rem),
    radial-gradient(circle at 12% 100%, rgba(32, 53, 39, 0.18), transparent 22rem),
    linear-gradient(135deg, #0b0907 0%, #17120e 55%, #0b0907 100%);

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);

  color: #f3e9d8;
}

.explore-closing > * {
  position: relative;
  z-index: 2;
}

.explore-closing .eyebrow {
  margin: 0 0 0.9rem;

  color: #b89b5e;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.explore-closing h2 {
  max-width: 11ch;
  margin: 0 0 1.1rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2.7rem, 5.8vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 600;

  color: #fff8ea;
  text-wrap: balance;
}

.explore-closing > p:not(.eyebrow) {
  max-width: 760px;
  margin: 0 0 1.8rem;

  color: rgba(243, 233, 216, 0.72);
  font-size: clamp(0.96rem, 1.08vw, 1.08rem);
  line-height: 1.8;
  letter-spacing: 0.002em;
}

.explore-closing .text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;

  color: #fff8ea;
  text-decoration: none;

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(184, 155, 94, 0.45);

  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.explore-closing .text-link::after {
  content: "↗";
  font-size: 0.9rem;
  color: #b89b5e;
  transition: transform 0.3s ease;
}

.explore-closing .text-link:hover {
  color: #b89b5e;
  border-color: #b89b5e;
  transform: translateY(-2px);
}

.explore-closing .text-link:hover::after {
  transform: translate(3px, -3px);
}

/* subtle top accent */
.explore-closing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 140px;
  height: 1px;

  background: linear-gradient(90deg, #b89b5e, transparent);
  opacity: 0.9;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
  .explore-closing {
    width: min(calc(100% - 2.4rem), 1180px);
    padding: 2rem 1.5rem 2.2rem;
    border-radius: 26px;
  }

  .explore-closing h2 {
    max-width: 12ch;
    font-size: clamp(2.5rem, 8vw, 4.4rem);
  }

  .explore-closing > p:not(.eyebrow) {
    max-width: 100%;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {
  .explore-closing {
    width: min(calc(100% - 2rem), 1180px);
    margin: 3.5rem auto 4.5rem;
    padding: 1.65rem 1.1rem 1.85rem;
    border-radius: 22px;
  }

  .explore-closing .eyebrow {
    margin-bottom: 0.7rem;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }

  .explore-closing h2 {
    max-width: 100%;
    margin-bottom: 0.9rem;
    font-size: clamp(2.2rem, 12vw, 3.5rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
  }

  .explore-closing > p:not(.eyebrow) {
    margin-bottom: 1.35rem;
    font-size: 0.93rem;
    line-height: 1.7;
  }

  .explore-closing .text-link {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
}

/* =========================================================
   MOBILE NAV FIX
========================================================= */

.mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(243, 233, 216, 0.14);
  border-radius: 999px;
  background: rgba(8, 7, 6, 0.35);
  backdrop-filter: blur(14px);
  cursor: pointer;
  position: relative;
  z-index: 10001;
}

.mobile-toggle span {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #f3e9d8;
  border-radius: 99px;
  transform: translateX(-50%);
  transition:
    transform 0.35s ease,
    top 0.35s ease,
    opacity 0.35s ease;
}

.mobile-toggle span:first-child {
  top: 17px;
}

.mobile-toggle span:last-child {
  top: 25px;
}

.mobile-toggle.is-active span:first-child {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}

.mobile-toggle.is-active span:last-child {
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at 20% 20%, rgba(184, 155, 94, 0.14), transparent 24rem),
    radial-gradient(circle at 82% 78%, rgba(32, 53, 39, 0.28), transparent 26rem),
    rgba(8, 7, 6, 0.96);

  backdrop-filter: blur(22px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-12px);
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease,
    transform 0.4s ease;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-menu-inner {
  display: grid;
  gap: 1.4rem;
  text-align: center;
}

.mobile-menu-inner a {
  color: #f3e9d8;
  text-decoration: none;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(3rem, 13vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.035em;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.mobile-menu-inner a:hover {
  color: #b89b5e;
  transform: translateY(-3px);
}

body.menu-open {
  overflow: hidden;
}

@media (max-width: 950px) {
  .desktop-nav {
    display: none;
  }

  .mobile-toggle {
    display: inline-flex;
  }

  .site-nav {
    z-index: 10000;
  }
}

@media (min-width: 951px) {
  .mobile-menu {
    display: none;
  }
}

.work-card,
.archive-card,
.process-card,
.snapshot-card,
.area-card,
.contact-link-card,
.project-row {
  transition:
    transform 0.7s cubic-bezier(.19,1,.22,1),
    border-color 0.4s ease,
    background 0.4s ease;
}

.work-card:hover,
.archive-card:hover,
.process-card:hover,
.snapshot-card:hover,
.area-card:hover,
.contact-link-card:hover {
  transform: translateY(-10px);
}

figure,
.work-image,
.project-image-wrap,
.archive-card {
  position: relative;
}

figure::before,
.work-image::before,
.project-image-wrap::before,
.archive-card::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at center,
    rgba(184,155,94,0.12),
    transparent 70%);

  opacity: 0;

  transition: 0.5s ease;

  pointer-events: none;

  z-index: 1;
}

figure:hover::before,
.work-image:hover::before,
.project-image-wrap:hover::before,
.archive-card:hover::before {
  opacity: 1;
}

/* =========================================================
   HYDRAFORCE PRO — SHORT PREMIUM PROJECT PAGE
========================================================= */

.project-hydraforce {
  --hydra-black: #050608;
  --hydra-navy: #07121d;
  --hydra-deep: #0b1723;
  --hydra-blue: #26a9e0;
  --hydra-cyan: #62d5ff;
  --hydra-orange: #ff8a1f;
  --hydra-yellow: #ffd33d;
  --hydra-green: #4fc35b;
  --hydra-cream: #fff4df;
  --hydra-muted: rgba(255, 244, 223, 0.72);
  --hydra-line: rgba(255, 244, 223, 0.14);

  background: var(--hydra-black);
  color: var(--hydra-cream);
  overflow-x: hidden;
}

.project-hydraforce * {
  box-sizing: border-box;
}

.project-hydraforce img {
  display: block;
  max-width: 100%;
}

.project-hydraforce .eyebrow {
  margin: 0 0 0.9rem;
  color: var(--hydra-yellow);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.project-hydraforce p {
  letter-spacing: 0.005em;
}

.project-hydraforce h1,
.project-hydraforce h2,
.project-hydraforce h3 {
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-weight: 650;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* HERO */

.hydra-hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 150px 5vw 82px;
  overflow: hidden;
  isolation: isolate;
  background: var(--hydra-black);
}

.hydra-hero-img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.72) contrast(1.08) saturate(1.08);
  transform: scale(1.03);
}

.hydra-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(
      to right,
      rgba(5, 6, 8, 0.96) 0%,
      rgba(5, 6, 8, 0.82) 36%,
      rgba(5, 6, 8, 0.38) 70%,
      rgba(5, 6, 8, 0.18) 100%
    ),
    linear-gradient(
      to top,
      rgba(5, 6, 8, 0.95) 0%,
      rgba(5, 6, 8, 0.58) 42%,
      rgba(5, 6, 8, 0.18) 78%
    ),
    radial-gradient(circle at 78% 24%, rgba(38, 169, 224, 0.24), transparent 30rem),
    radial-gradient(circle at 18% 70%, rgba(255, 138, 31, 0.18), transparent 28rem);
}

.hydra-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 244, 223, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 244, 223, 0.045) 1px, transparent 1px);
  background-size: 110px 110px;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 78%, transparent);
  opacity: 0.55;
  pointer-events: none;
}

.hydra-hero-content {
  width: min(100%, 980px);
  position: relative;
  z-index: 2;
}

.hydra-hero h1 {
  margin: 0;
  color: #fff9ed;
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: 0.88;
}

.hydra-hero-content > p:not(.eyebrow) {
  max-width: 680px;
  margin: 1.25rem 0 0;
  color: rgba(255, 244, 223, 0.82);
  font-size: clamp(1rem, 1.18vw, 1.14rem);
  line-height: 1.75;
}

.hydra-meta {
  width: min(100%, 860px);
  margin-top: 2rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 244, 223, 0.24);
  display: grid;
  grid-template-columns: 0.6fr 1.4fr 1fr;
  gap: 1.4rem;
}

.hydra-meta span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--hydra-yellow);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.hydra-meta p {
  margin: 0;
  color: rgba(255, 244, 223, 0.86);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* STORY STRIP */

.project-hydraforce .project-story-strip {
  overflow: hidden;
  border-top: 1px solid rgba(255, 244, 223, 0.12);
  border-bottom: 1px solid rgba(255, 244, 223, 0.12);
  background: #07121d;
}

.project-hydraforce .project-story-track {
  display: flex;
  width: max-content;
  animation: hydraStoryMove 25s linear infinite;
}

.project-hydraforce .project-story-group {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
}

.project-hydraforce .project-story-group span {
  color: rgba(255, 244, 223, 0.75);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.project-hydraforce .project-story-group span::after {
  content: "•";
  margin-left: 2rem;
  color: var(--hydra-yellow);
}

@keyframes hydraStoryMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* GLOBAL SECTIONS */

.hydra-section {
  padding: clamp(82px, 9vw, 120px) 5vw;
  position: relative;
}

.hydra-section-heading {
  max-width: 940px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hydra-section-heading h2,
.hydra-overview h2,
.hydra-final h2 {
  margin: 0;
  max-width: 980px;
  color: #fff9ed;
  font-size: clamp(2.7rem, 5.7vw, 6rem);
  line-height: 0.96;
}

.hydra-section-heading p:not(.eyebrow) {
  max-width: 680px;
  margin-top: 1rem;
  color: var(--hydra-muted);
  line-height: 1.78;
}

/* OVERVIEW */

.hydra-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 138, 31, 0.16), transparent 28rem),
    radial-gradient(circle at 92% 70%, rgba(38, 169, 224, 0.15), transparent 30rem),
    linear-gradient(135deg, #07121d 0%, #0c1824 55%, #050608 100%);
}

.hydra-copy p {
  margin: 0;
  color: var(--hydra-muted);
  font-size: 1rem;
  line-height: 1.82;
}

.hydra-copy p + p {
  margin-top: 1rem;
}

/* IMAGE CARD BASE */

.project-hydraforce figure {
  margin: 0;
  padding: 0.75rem;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 244, 223, 0.08), rgba(255, 244, 223, 0.025));
  border: 1px solid rgba(255, 244, 223, 0.13);
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.45s cubic-bezier(.19, 1, .22, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.project-hydraforce figure:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 211, 61, 0.35);
  box-shadow:
    0 30px 86px rgba(0, 0, 0, 0.4),
    0 0 34px rgba(38, 169, 224, 0.08);
}

.project-hydraforce figure a {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 21px;
  background: #0a1118;
}

.project-hydraforce figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-position: center;
  transition: transform 0.7s cubic-bezier(.19, 1, .22, 1);
}

.project-hydraforce figure:hover img {
  transform: scale(1.018);
}

.project-hydraforce figcaption {
  margin: 0;
  padding: 0.8rem 0.2rem 0.05rem;
  color: rgba(255, 244, 223, 0.66);
  font-size: 0.76rem;
  line-height: 1.48;
  letter-spacing: 0.01em;
}

/* FLAVOUR LABELS */

.hydra-flavours {
  background:
    radial-gradient(circle at 80% 14%, rgba(255, 211, 61, 0.13), transparent 28rem),
    linear-gradient(135deg, #050608 0%, #09141f 58%, #050608 100%);
}

.hydra-label-grid {
  width: min(100%, 1180px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.hydra-label-grid figure a {
  aspect-ratio: 16 / 7.2;
  background: #f9f9f5;
}

.hydra-label-grid img {
  object-fit: contain;
  background: #f9f9f5;
}

/* PRODUCT WORLD */

.hydra-product-world {
  background:
    radial-gradient(circle at 18% 20%, rgba(38, 169, 224, 0.18), transparent 28rem),
    linear-gradient(135deg, #07121d 0%, #0d1b2b 56%, #050608 100%);
}

.hydra-two-grid {
  width: min(100%, 1180px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.hydra-two-grid figure a {
  aspect-ratio: 16 / 10;
  background: #f6f6f2;
}

.hydra-two-grid img {
  object-fit: cover;
}

/* PROCESS */

.hydra-process {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 138, 31, 0.14), transparent 28rem),
    linear-gradient(135deg, #050608 0%, #0b1723 60%, #050608 100%);
}

.hydra-process-grid {
  width: min(100%, 1180px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.hydra-process-grid figure a {
  aspect-ratio: 4 / 3;
  background: #f7f2e7;
}

.hydra-process-grid img {
  object-fit: contain;
  background: #f7f2e7;
}

/* PACKAGING DIELINES */

.hydra-packaging-system {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 211, 61, 0.15), transparent 28rem),
    radial-gradient(circle at 88% 76%, rgba(38, 169, 224, 0.13), transparent 28rem),
    linear-gradient(135deg, #08131e 0%, #0d1b2b 55%, #050608 100%);
}

.hydra-pack-grid {
  width: min(100%, 1180px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.hydra-pack-grid figure {
  background:
    linear-gradient(145deg, rgba(255, 244, 223, 0.1), rgba(255, 244, 223, 0.035));
}

.hydra-pack-grid figure a {
  aspect-ratio: 16 / 10.5;
  background: #ffffff;
}

.hydra-pack-grid img {
  object-fit: contain;
  background: #ffffff;
  padding: 0.35rem;
}

/* POSTER */

.hydra-poster-section {
  background:
    radial-gradient(circle at 80% 20%, rgba(38, 169, 224, 0.15), transparent 28rem),
    linear-gradient(135deg, #050608 0%, #101c28 58%, #050608 100%);
}

.hydra-poster-grid {
  width: min(100%, 1080px);
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 1.25rem;
  align-items: start;
}

.hydra-poster-grid figure:first-child a {
  aspect-ratio: 3 / 4;
  background: #111;
}

.hydra-poster-grid figure:last-child a {
  aspect-ratio: 16 / 10;
  background: #111;
}

.hydra-poster-grid img {
  object-fit: cover;
}

/* FINAL */

.hydra-final {
  min-height: 92vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: clamp(5rem, 8vw, 8rem) 5vw;
  overflow: hidden;
  background: #050608;
}

.hydra-final img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.78) contrast(1.08) saturate(1.08);
}

.hydra-final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top, rgba(5, 6, 8, 0.96) 0%, rgba(5, 6, 8, 0.68) 32%, rgba(5, 6, 8, 0.18) 76%),
    linear-gradient(to right, rgba(5, 6, 8, 0.88), rgba(5, 6, 8, 0.22));
  pointer-events: none;
}

.hydra-final > div {
  position: relative;
  z-index: 3;
  max-width: 760px;
}

.hydra-final h2 {
  color: #fff9ed;
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 0.88;
  text-shadow: 0 20px 70px rgba(0, 0, 0, 0.48);
}

/* RESPONSIVE */

@media (max-width: 1050px) {
  .hydra-hero {
    min-height: 92svh;
    padding: 130px 1.25rem 70px;
  }

  .hydra-section {
    padding: 82px 1.25rem;
  }

  .hydra-overview,
  .hydra-label-grid,
  .hydra-two-grid,
  .hydra-process-grid,
  .hydra-pack-grid,
  .hydra-poster-grid {
    grid-template-columns: 1fr;
  }

  .hydra-label-grid figure a {
    aspect-ratio: 16 / 8;
  }

  .hydra-poster-grid {
    width: min(100%, 760px);
  }

  .hydra-poster-grid figure:first-child a,
  .hydra-poster-grid figure:last-child a {
    aspect-ratio: 4 / 3;
  }

  .hydra-poster-grid figure:first-child img,
  .hydra-poster-grid figure:last-child img {
    object-fit: contain;
    background: #111;
  }
}

@media (max-width: 700px) {
  .hydra-hero {
    min-height: 88svh;
    padding: 118px 1rem 60px;
  }

  .hydra-hero h1 {
    font-size: clamp(3.2rem, 16vw, 5rem);
    line-height: 0.92;
  }

  .hydra-hero-content > p:not(.eyebrow) {
    max-width: 95%;
    font-size: 0.95rem;
    line-height: 1.68;
  }

  .hydra-meta {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .hydra-meta div {
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 244, 223, 0.13);
  }

  .hydra-meta div:last-child {
    border-bottom: none;
  }

  .hydra-section {
    padding: 72px 1rem;
  }

  .hydra-section-heading h2,
  .hydra-overview h2,
  .hydra-final h2 {
    font-size: clamp(2.6rem, 12vw, 4.2rem);
    line-height: 0.98;
  }

  .project-hydraforce figure {
    padding: 0.55rem;
    border-radius: 22px;
  }

  .project-hydraforce figure a {
    border-radius: 16px;
  }

  .project-hydraforce figcaption {
    font-size: 0.7rem;
    padding-top: 0.65rem;
  }

  .hydra-label-grid figure a,
  .hydra-two-grid figure a,
  .hydra-process-grid figure a,
  .hydra-pack-grid figure a,
  .hydra-poster-grid figure:first-child a,
  .hydra-poster-grid figure:last-child a {
    aspect-ratio: 4 / 3;
  }

  .hydra-label-grid img,
  .hydra-process-grid img,
  .hydra-pack-grid img,
  .hydra-poster-grid img {
    object-fit: contain;
  }

  .hydra-final {
    min-height: 78vh;
    padding: 4rem 1rem;
  }
}

/* =========================================================
   GLOBAL PROJECT STORY STRIP
   Works for EcoThreads, SDN, HydraForce, etc.
========================================================= */

.project-story-strip {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;

  border-top: 1px solid rgba(245, 239, 228, 0.12);
  border-bottom: 1px solid rgba(245, 239, 228, 0.12);

  background:
    linear-gradient(
      90deg,
      rgba(8, 7, 6, 0.96),
      rgba(18, 20, 22, 0.96),
      rgba(8, 7, 6, 0.96)
    );
}

.project-story-track {
  display: flex;
  width: max-content;
  animation: projectStoryMove 28s linear infinite;
  will-change: transform;
}

.project-story-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: 1rem 1.5rem;
}

.project-story-group span {
  position: relative;
  display: inline-flex;
  align-items: center;

  color: rgba(245, 239, 228, 0.74);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.project-story-group span::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: clamp(1.5rem, 3vw, 3rem);

  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

/* HydraForce colour accent */
.project-hydraforce .project-story-strip {
  background:
    linear-gradient(
      90deg,
      rgba(6, 7, 8, 0.98),
      rgba(13, 20, 26, 0.98),
      rgba(6, 7, 8, 0.98)
    );
}

.project-hydraforce .project-story-group span {
  color: rgba(102, 217, 239, 0.82);
}

/* EcoThreads colour accent */
.project-ecothreads .project-story-group span {
  color: rgba(232, 216, 185, 0.78);
}

/* SDN colour accent */
.project-sdn .project-story-group span {
  color: rgba(183, 146, 84, 0.88);
}

@keyframes projectStoryMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.project-story-strip:hover .project-story-track {
  animation-play-state: paused;
}

/* Mobile */
@media (max-width: 700px) {
  .project-story-group {
    gap: 1.4rem;
    padding: 0.85rem 1rem;
  }

  .project-story-group span {
    font-size: 0.62rem;
    letter-spacing: 0.13em;
  }

  .project-story-group span::after {
    width: 5px;
    height: 5px;
    margin-left: 1.4rem;
  }
}

/* ======================================================
   SDN.DRINKS — FINAL CLEAN PREMIUM PAGE
   Scoped, organized, consistent image + caption system
====================================================== */

.project-sdn {
  --sdn-cream: #f7f0e8;
  --sdn-paper: #efe5dc;
  --sdn-blush: #ead8d3;
  --sdn-rose: #c96f83;
  --sdn-green: #506748;
  --sdn-gold: #b79254;
  --sdn-earth: #33231f;
  --sdn-cocoa: #4b3029;
  --sdn-ink: #17110f;
  --sdn-muted: rgba(23, 17, 15, 0.64);
  --sdn-line: rgba(51, 35, 31, 0.1);

  background: var(--sdn-cream);
  color: var(--sdn-ink);
  overflow-x: hidden;
}

.project-sdn * {
  box-sizing: border-box;
}

.project-sdn img {
  max-width: 100%;
  display: block;
}

.project-sdn h1,
.project-sdn h2,
.project-sdn h3 {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 600;
  letter-spacing: -0.018em;
  word-spacing: 0.025em;
  text-wrap: balance;
}

.project-sdn h1 {
  font-size: clamp(4.2rem, 9vw, 9rem);
  line-height: 0.88;
}

.project-sdn h2 {
  font-size: clamp(2.4rem, 4.8vw, 4.9rem);
  line-height: 1.02;
}

.project-sdn p {
  line-height: 1.72;
}

.project-sdn .eyebrow {
  margin-bottom: 0.9rem;
  color: var(--sdn-gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ======================================================
   HERO
====================================================== */

.project-sdn .sdn-hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 130px 5vw 72px;
  overflow: hidden;
  background: #17110f;
}

.project-sdn .sdn-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.03);
}

.project-sdn .sdn-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(23, 17, 15, 0.82), rgba(23, 17, 15, 0.48), rgba(23, 17, 15, 0.12)),
    linear-gradient(to top, rgba(23, 17, 15, 0.9), rgba(23, 17, 15, 0.22), transparent),
    radial-gradient(circle at 82% 22%, rgba(183, 146, 84, 0.14), transparent 32%);
}

.project-sdn .sdn-hero-content {
  position: relative;
  z-index: 2;
  max-width: 870px;
  color: var(--sdn-cream);
}

.project-sdn .sdn-hero-content h1,
.project-sdn .sdn-hero-content h2 {
  color: #fff8ee;
}

.project-sdn .sdn-hero-content h2 {
  margin-top: 0.65rem;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.008em;
}

.project-sdn .sdn-hero-content > p:not(.eyebrow) {
  max-width: 650px;
  margin-top: 1.15rem;
  color: rgba(247, 240, 232, 0.84);
  font-size: 1rem;
  line-height: 1.75;
}

.project-sdn .sdn-meta {
  max-width: 790px;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(247, 240, 232, 0.25);

  display: grid;
  grid-template-columns: 0.7fr 1.45fr 1fr;
  gap: 2rem;
}

.project-sdn .sdn-meta span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--sdn-gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.project-sdn .sdn-meta p {
  margin: 0;
  color: rgba(247, 240, 232, 0.9);
  font-weight: 600;
  line-height: 1.5;
}


/* ======================================================
   BRAND SNAPSHOT
====================================================== */

.project-sdn .sdn-snapshot {
  padding: 80px 5vw 95px;
  background: var(--sdn-earth);
  color: var(--sdn-cream);
}

.project-sdn .sdn-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(247, 240, 232, 0.18);
  border-left: 1px solid rgba(247, 240, 232, 0.18);
}

.project-sdn .sdn-snapshot-card {
  min-height: 230px;
  padding: 1.5rem;
  border-right: 1px solid rgba(247, 240, 232, 0.18);
  border-bottom: 1px solid rgba(247, 240, 232, 0.18);
  background: linear-gradient(145deg, rgba(247, 240, 232, 0.055), rgba(247, 240, 232, 0.018));
}

.project-sdn .sdn-snapshot-card span {
  display: block;
  margin-bottom: 1.2rem;
  color: var(--sdn-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.project-sdn .sdn-snapshot-card p {
  margin: 0;
  color: rgba(247, 240, 232, 0.84);
  font-weight: 600;
  line-height: 1.55;
}

/* ======================================================
   OVERVIEW
====================================================== */

.project-sdn .sdn-overview {
  padding: 95px 5vw;
  background:
    radial-gradient(circle at 85% 20%, rgba(183, 146, 84, 0.12), transparent 30%),
    linear-gradient(135deg, #5b3c32, #34231f);
  color: var(--sdn-cream);
}

.project-sdn .sdn-overview h2 {
  max-width: 950px;
}

.project-sdn .sdn-overview > p:last-child {
  max-width: 700px;
  margin-top: 1.35rem;
  color: rgba(247, 240, 232, 0.74);
}

/* ======================================================
   GLOBAL SECTION SETUP
====================================================== */

.project-sdn .sdn-section {
  padding: 95px 5vw;
}

.project-sdn .sdn-section-heading {
  max-width: 960px;
  margin-bottom: 2.6rem;
}

.project-sdn .sdn-section-heading h2 {
  max-width: 920px;
}

.project-sdn .sdn-section-heading p:not(.eyebrow) {
  max-width: 680px;
  color: var(--sdn-muted);
}

/* ======================================================
   BASE FIGURE STYLE
   This stays simple so it does not break each section
====================================================== */

.project-sdn figure {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(51, 35, 31, 0.08);
  box-shadow: 0 18px 55px rgba(51, 35, 31, 0.08);
}

.project-sdn figure a {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f3e8dd;
}

.project-sdn figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-position: center;
  transition: transform 0.7s ease;
}

.project-sdn figure:hover img {
  transform: scale(1.018);
}

.project-sdn figcaption {
  margin: 0;
  padding: 0.78rem 0.95rem 0.9rem;
  color: rgba(23, 17, 15, 0.62);
  font-size: 0.74rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
}



/* ======================================================
   SDN LOGO SYSTEM — FIX TOP CROP
   Paste at the VERY BOTTOM of style.css
====================================================== */

.project-sdn .sdn-guideline-grid figure.wide > a {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  background: #f8f2ea;
}

.project-sdn .sdn-guideline-grid figure.wide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: top center;
  border-radius: 16px;
  background: #f8f2ea;
}

/* if the first logo board is the one cropping, force it cleanly */
.project-sdn .sdn-guideline-grid figure.wide:first-child > a,
.project-sdn .sdn-guideline-grid figure:first-child > a {
  aspect-ratio: 1534 / 1012;
}

.project-sdn .sdn-guideline-grid figure.wide:first-child img,
.project-sdn .sdn-guideline-grid figure:first-child img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  max-height: none;
}



/* ======================================================
   SDN.DRINKS — LOGO & VISUAL SYSTEM
   Left-aligned, consistent with the rest of the page
   Does NOT affect packaging
====================================================== */

.project-sdn .sdn-soft {
  padding: 95px 5vw;
  background:
    radial-gradient(circle at 15% 12%, rgba(201, 111, 131, 0.08), transparent 26rem),
    radial-gradient(circle at 88% 62%, rgba(80, 103, 72, 0.09), transparent 28rem),
    linear-gradient(135deg, #f7f0e8 0%, #eadfd3 100%);
  color: var(--sdn-ink);
}

/* Heading should match other SDN sections */
.project-sdn .sdn-soft .sdn-section-heading {
  max-width: 960px;
  margin: 0 0 2.6rem;
}

.project-sdn .sdn-soft .sdn-section-heading h2 {
  max-width: 920px;
  color: var(--sdn-ink);
}

.project-sdn .sdn-soft .eyebrow {
  color: var(--sdn-gold);
}

/* Main grid — left aligned, not weirdly centred */
.project-sdn .sdn-guideline-grid {
  width: 100%;
  max-width: 1180px;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

/* Card */
.project-sdn .sdn-guideline-grid figure {
  margin: 0;
  padding: 0.72rem;
  border-radius: 26px;
  overflow: hidden;

  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.32));

  border: 1px solid rgba(51, 35, 31, 0.09);

  box-shadow:
    0 20px 58px rgba(51, 35, 31, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);

  transition:
    transform 0.45s cubic-bezier(.19, 1, .22, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.project-sdn .sdn-guideline-grid figure:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 111, 131, 0.24);
  box-shadow:
    0 28px 72px rgba(51, 35, 31, 0.12),
    0 0 30px rgba(201, 111, 131, 0.055);
}

/* Layout placement */
.project-sdn .sdn-guideline-grid figure.wide {
  grid-column: span 12;
}

.project-sdn .sdn-guideline-grid figure:not(.wide) {
  grid-column: span 6;
}

/* Image holder */
.project-sdn .sdn-guideline-grid figure > a {
  width: 100%;
  display: block;
  overflow: hidden;

  border-radius: 19px;
  background: #f8f2ea;
}

/* Exact card proportions so images sit properly */
.project-sdn .sdn-guideline-grid figure:nth-child(1) > a {
  aspect-ratio: 16 / 7.4;
}

.project-sdn .sdn-guideline-grid figure:nth-child(2) > a,
.project-sdn .sdn-guideline-grid figure:nth-child(3) > a {
  aspect-ratio: 16 / 9;
}

.project-sdn .sdn-guideline-grid figure:nth-child(4) > a {
  aspect-ratio: 16 / 7.6;
}

/* Images fill containers properly */
.project-sdn .sdn-guideline-grid img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center center;

  padding: 0;
  border-radius: 16px;
  background: #f8f2ea;

  transition: transform 0.65s cubic-bezier(.19, 1, .22, 1);
}

.project-sdn .sdn-guideline-grid figure:hover img {
  transform: scale(1.012);
}

/* Captions — cleaner, aligned, attached to cards */
.project-sdn .sdn-guideline-grid figcaption {
  margin: 0;
  min-height: 42px;
  padding: 0.7rem 0.15rem 0.05rem;

  color: rgba(23, 17, 15, 0.62);
  font-size: 0.74rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* ======================================================
   TABLET
====================================================== */

@media (max-width: 1000px) {
  .project-sdn .sdn-soft {
    padding: 80px 1.25rem;
  }

  .project-sdn .sdn-guideline-grid {
    grid-template-columns: 1fr;
    max-width: 860px;
  }

  .project-sdn .sdn-guideline-grid figure,
  .project-sdn .sdn-guideline-grid figure.wide,
  .project-sdn .sdn-guideline-grid figure:not(.wide) {
    grid-column: span 1;
  }

  .project-sdn .sdn-guideline-grid figure:nth-child(1) > a,
  .project-sdn .sdn-guideline-grid figure:nth-child(4) > a {
    aspect-ratio: 16 / 8.4;
  }

  .project-sdn .sdn-guideline-grid figure:nth-child(2) > a,
  .project-sdn .sdn-guideline-grid figure:nth-child(3) > a {
    aspect-ratio: 16 / 9.2;
  }
}

/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 650px) {
  .project-sdn .sdn-soft {
    padding: 68px 1rem;
  }

  .project-sdn .sdn-soft .sdn-section-heading {
    margin-bottom: 1.8rem;
  }

  .project-sdn .sdn-guideline-grid {
    gap: 1rem;
  }

  .project-sdn .sdn-guideline-grid figure {
    padding: 0.55rem;
    border-radius: 22px;
  }

  .project-sdn .sdn-guideline-grid figure:nth-child(1) > a,
  .project-sdn .sdn-guideline-grid figure:nth-child(2) > a,
  .project-sdn .sdn-guideline-grid figure:nth-child(3) > a,
  .project-sdn .sdn-guideline-grid figure:nth-child(4) > a {
    aspect-ratio: 16 / 10;
  }

  .project-sdn .sdn-guideline-grid figure > a,
  .project-sdn .sdn-guideline-grid img {
    border-radius: 15px;
  }

  .project-sdn .sdn-guideline-grid figcaption {
    min-height: auto;
    padding-top: 0.62rem;
    font-size: 0.68rem;
    line-height: 1.4;
  }
}

/* ======================================================
   PACKAGING SYSTEM
   Clean fit + consistent image proportions
====================================================== */

.project-sdn .sdn-packaging {
  background:
    radial-gradient(circle at 84% 18%, rgba(201, 111, 131, 0.14), transparent 30%),
    linear-gradient(135deg, #fff8f0, #ead8d3);
}

/* =========================================
   MAIN FEATURE ONLY
========================================= */

.project-sdn .sdn-feature {
  max-width: 1120px;
  margin: 0 auto 1.5rem;

  padding: 0.72rem;
  border-radius: 28px;

  overflow: hidden;

  background:
    linear-gradient(145deg, rgba(255,255,255,0.74), rgba(255,255,255,0.34));

  border: 1px solid rgba(51,35,31,0.08);

  box-shadow:
    0 20px 58px rgba(51,35,31,0.08),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

.project-sdn .sdn-feature a {
  width: 100%;
  display: block;

  overflow: hidden;

  border-radius: 20px;
  background: #f7f0e8;

  aspect-ratio: 16 / 8.8;
}

.project-sdn .sdn-feature img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  border-radius: 20px;

  transition: transform 0.7s ease;
}

.project-sdn .sdn-feature:hover img {
  transform: scale(1.015);
}

.project-sdn .sdn-feature figcaption {
  padding: 0.7rem 0.15rem 0.05rem;

  color: rgba(23,17,15,0.62);
  font-size: 0.74rem;
  line-height: 1.45;
}

/* =========================================
   SHARED GRIDS
========================================= */

.project-sdn .sdn-flavour-grid,
.project-sdn .sdn-packaging-grid,
.project-sdn .sdn-touch-grid,
.project-sdn .sdn-campaign-grid {
  width: min(100%, 1180px);
  margin-inline: auto;

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.35rem;

  align-items: start;
}

/* =========================================
   FLAVOUR LABELS
========================================= */

.project-sdn .sdn-flavour-grid figure,
.project-sdn .sdn-packaging-grid figure {
  grid-column: span 4;

  padding: 0.72rem;
  border-radius: 26px;

  overflow: hidden;

  background:
    linear-gradient(145deg, rgba(255,255,255,0.74), rgba(255,255,255,0.34));

  border: 1px solid rgba(51,35,31,0.08);

  box-shadow:
    0 20px 58px rgba(51,35,31,0.08),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

.project-sdn .sdn-flavour-grid a,
.project-sdn .sdn-packaging-grid a {
  width: 100%;
  display: block;

  overflow: hidden;

  border-radius: 18px;
  background: #f7f0e8;
}

/* LABEL SYSTEMS — keep original clean artwork look */
.project-sdn .sdn-flavour-grid a {
  height: auto;
  aspect-ratio: unset;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f7f0e8;
}

.project-sdn .sdn-flavour-grid img {
  width: 100%;
  height: auto;

  display: block;

  object-fit: contain;
  object-position: center;

  border-radius: 18px;

  transition: transform 0.7s ease;
}

/* MOCKUPS */
.project-sdn .sdn-packaging-grid {
  margin-top: 1.15rem;
}

.project-sdn .sdn-packaging-grid a {
  aspect-ratio: 1 / 1;
}

.project-sdn .sdn-packaging-grid img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  border-radius: 18px;

  transition: transform 0.7s ease;
}

.project-sdn .sdn-flavour-grid figure:hover img,
.project-sdn .sdn-packaging-grid figure:hover img {
  transform: scale(1.015);
}

/* CAPTIONS */
.project-sdn .sdn-flavour-grid figcaption,
.project-sdn .sdn-packaging-grid figcaption {
  padding: 0.7rem 0.15rem 0.05rem;

  color: rgba(23,17,15,0.62);
  font-size: 0.74rem;
  line-height: 1.45;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

  .project-sdn .sdn-flavour-grid,
  .project-sdn .sdn-packaging-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-sdn .sdn-flavour-grid figure,
  .project-sdn .sdn-packaging-grid figure {
    grid-column: span 1;
  }

  .project-sdn .sdn-feature a {
    aspect-ratio: 16 / 10;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

  .project-sdn .sdn-feature,
  .project-sdn .sdn-flavour-grid figure,
  .project-sdn .sdn-packaging-grid figure {
    padding: 0.55rem;
    border-radius: 22px;
  }

  .project-sdn .sdn-flavour-grid,
  .project-sdn .sdn-packaging-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .project-sdn .sdn-feature a {
    aspect-ratio: 4 / 3;
  }

  .project-sdn .sdn-feature a,
  .project-sdn .sdn-flavour-grid a,
  .project-sdn .sdn-packaging-grid a,
  .project-sdn .sdn-feature img,
  .project-sdn .sdn-flavour-grid img,
  .project-sdn .sdn-packaging-grid img {
    border-radius: 15px;
  }

  .project-sdn .sdn-feature figcaption,
  .project-sdn .sdn-flavour-grid figcaption,
  .project-sdn .sdn-packaging-grid figcaption {
    font-size: 0.68rem;
    line-height: 1.4;
  }
}

/* ======================================================
   PRINT & BRAND TOUCHPOINTS
====================================================== */

.project-sdn .sdn-touchpoints {
  background:
    radial-gradient(circle at 16% 18%, rgba(201, 111, 131, 0.08), transparent 28%),
    linear-gradient(135deg, #33251f, #4a2f29);
  color: var(--sdn-cream);
}

.project-sdn .sdn-touchpoints .sdn-section-heading p:not(.eyebrow) {
  color: rgba(247, 240, 232, 0.66);
}

.project-sdn .sdn-touch-grid figure {
  grid-column: span 4;
  padding: 0.9rem;
  border-radius: 28px;
  background: rgba(247, 240, 232, 0.08);
  border-color: rgba(247, 240, 232, 0.14);
}

.project-sdn .sdn-touch-grid figure.large {
  grid-column: span 8;
}

.project-sdn .sdn-touch-grid a {
  height: min(42vh, 310px);
  border-radius: 20px;
  background: #efe4da;
}

.project-sdn .sdn-touch-grid figure.large a {
  height: min(52vh, 420px);
}

.project-sdn .sdn-touch-grid img {
  object-fit: cover;
  border-radius: 20px;
}

.project-sdn .sdn-touchpoints figcaption {
  color: rgba(247, 240, 232, 0.68);
}

.project-sdn .sdn-touch-grid figure:nth-child(2) img {
  object-fit: contain;
  background: #f7f0e8;
  padding: 0.5rem;
}

/* ======================================================
   CAMPAIGN
====================================================== */

.project-sdn .sdn-campaign {
  background:
    radial-gradient(circle at 12% 18%, rgba(80, 103, 72, 0.12), transparent 30%),
    linear-gradient(180deg, #f7f0e8, #efe4da);
}

.project-sdn .sdn-campaign-grid figure {
  grid-column: span 6;
  padding: 1rem;
  border-radius: 30px;
  background: #f6f1eb;
}

.project-sdn .sdn-campaign-grid figure.wide {
  grid-column: span 12;
  max-width: 1080px;
  margin-inline: auto;
}

.project-sdn .sdn-campaign-grid a {
  height: min(54vh, 500px);
  border-radius: 20px;
  background: transparent;
}

.project-sdn .sdn-campaign-grid figure.wide a {
  height: min(66vh, 620px);
  padding: 0.5rem;
}

.project-sdn .sdn-campaign-grid img {
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
  object-position: center;
  border-radius: 20px;
}

.project-sdn .sdn-campaign-grid figure:first-child img {
  width: auto;
  max-width: 100%;
  max-height: 620px;
}

.project-sdn .sdn-campaign-grid figure:nth-child(2) img {
  object-fit: cover;
}

.project-sdn .sdn-campaign-grid figure.wide img {
  width: 100%;
  object-fit: contain;
}

/* ======================================================
   FINAL BRAND WORLD
====================================================== */

.project-sdn .sdn-final {
  min-height: 92vh;
  padding: clamp(5rem, 8vw, 8rem) 5vw;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #16100d;
}

.project-sdn .sdn-final img {
  position: absolute;
  inset: 0;
  z-index: 1;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center top;

  background: #f4eee8;
}

/* ======================================================
   FINAL BRAND WORLD
====================================================== */

.project-sdn .sdn-final {
  min-height: 92vh;
  padding: clamp(5rem, 8vw, 8rem) 5vw;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #16100d;
}

.project-sdn .sdn-final img {
  filter:
    brightness(0.78)
    contrast(1.05)
    saturate(0.92);
  position: absolute;
  inset: 0;
  z-index: 1;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center top;

  background: #f4eee8;
}

.project-sdn .sdn-final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(28, 17, 14, 0.9) 0%,
      rgba(28, 17, 14, 0.72) 18%,
      rgba(28, 17, 14, 0.28) 42%,
      transparent 68%
    );
}

.project-sdn .sdn-final > div {
  position: relative;
  z-index: 3;
  max-width: 780px;
  padding-bottom: 1rem;
}

.project-sdn .sdn-final .eyebrow {
  color: #d3a95e;
}

.project-sdn .sdn-final h2 {
  color: #fff7ec;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.project-sdn .sdn-final > div {
  position: relative;
  z-index: 3;
  max-width: 780px;
  padding-bottom: 1rem;
}

.project-sdn .sdn-final .eyebrow {
  color: #d3a95e;
}

.project-sdn .sdn-final h2 {
  color: #fff7ec;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 1100px) {
  .project-sdn .sdn-hero {
    min-height: 92vh;
    padding: 120px 4vw 64px;
  }

  .project-sdn .sdn-hero-content {
    max-width: 760px;
  }

  .project-sdn .sdn-meta {
    grid-template-columns: 0.7fr 1.4fr 1fr;
    gap: 1.4rem;
  }

  .project-sdn .sdn-snapshot-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-sdn .sdn-flavour-grid figure,
  .project-sdn .sdn-packaging-grid figure,
  .project-sdn .sdn-touch-grid figure,
  .project-sdn .sdn-campaign-grid figure {
    grid-column: span 6;
  }

  .project-sdn .sdn-touch-grid figure.large,
  .project-sdn .sdn-campaign-grid figure.wide {
    grid-column: span 12;
  }
}

@media (max-width: 850px) {
  .project-sdn h1 {
    font-size: clamp(3.2rem, 15vw, 5.8rem);
    line-height: 0.92;
  }

  .project-sdn h2 {
    font-size: clamp(2rem, 9vw, 3.6rem);
    line-height: 1.02;
  }

  .project-sdn .sdn-hero {
    min-height: 88vh;
    padding: 110px 1.2rem 56px;
    align-items: flex-end;
  }

  .project-sdn .sdn-hero-bg {
    object-position: center;
  }

  .project-sdn .sdn-hero-overlay {
    background:
      linear-gradient(to top, rgba(23, 17, 15, 0.94), rgba(23, 17, 15, 0.55), transparent),
      linear-gradient(to right, rgba(23, 17, 15, 0.7), rgba(23, 17, 15, 0.25));
  }

  .project-sdn .sdn-hero-content {
    max-width: 100%;
  }

  .project-sdn .sdn-hero-content > p:not(.eyebrow) {
    max-width: 95%;
    font-size: 0.95rem;
  }

  .project-sdn .sdn-meta {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .project-sdn .sdn-meta div {
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(247, 240, 232, 0.14);
  }

  .project-sdn .sdn-meta div:last-child {
    border-bottom: none;
  }

  .project-sdn .sdn-snapshot,
  .project-sdn .sdn-overview,
  .project-sdn .sdn-section {
    padding: 72px 1.2rem;
  }

  .project-sdn .sdn-snapshot-grid,
  .project-sdn .sdn-guideline-grid,
  .project-sdn .sdn-flavour-grid,
  .project-sdn .sdn-packaging-grid,
  .project-sdn .sdn-touch-grid,
  .project-sdn .sdn-campaign-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .project-sdn .sdn-snapshot-card,
  .project-sdn .sdn-guideline-grid figure,
  .project-sdn .sdn-guideline-grid figure.wide,
  .project-sdn .sdn-flavour-grid figure,
  .project-sdn .sdn-packaging-grid figure,
  .project-sdn .sdn-touch-grid figure,
  .project-sdn .sdn-touch-grid figure.large,
  .project-sdn .sdn-campaign-grid figure,
  .project-sdn .sdn-campaign-grid figure.wide {
    grid-column: span 1;
    width: 100%;
    max-width: 100%;
  }

  .project-sdn .sdn-snapshot-card {
    min-height: auto;
  }

  .project-sdn figure {
    border-radius: 20px;
  }

  .project-sdn .sdn-guideline-grid figure > a,
  .project-sdn .sdn-guideline-grid figure.wide > a,
  .project-sdn .sdn-feature a,
  .project-sdn .sdn-flavour-grid a,
  .project-sdn .sdn-packaging-grid a,
  .project-sdn .sdn-touch-grid a,
  .project-sdn .sdn-touch-grid figure.large a,
  .project-sdn .sdn-campaign-grid a,
  .project-sdn .sdn-campaign-grid figure.wide a {
    height: auto;
    min-height: unset;
    max-height: none;
    aspect-ratio: auto;
  }

  .project-sdn .sdn-guideline-grid img,
  .project-sdn .sdn-feature img,
  .project-sdn .sdn-flavour-grid img,
  .project-sdn .sdn-packaging-grid img,
  .project-sdn .sdn-touch-grid img,
  .project-sdn .sdn-campaign-grid img {
    width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
  }

  .project-sdn .sdn-campaign-grid figure:first-child img {
    width: 100%;
  }

  .project-sdn .sdn-final {
    min-height: 78vh;
    padding: 4rem 1.2rem;
    align-items: flex-end;
  }

  .project-sdn .sdn-final h2 {
    font-size: clamp(2.6rem, 13vw, 4.4rem);
    line-height: 1;
  }
}

@media (max-width: 520px) {
  .project-sdn .sdn-hero {
    min-height: 86vh;
    padding: 100px 1rem 46px;
  }

  .project-sdn .eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.13em;
  }

  .project-sdn .sdn-hero-content h1 {
    font-size: clamp(3rem, 17vw, 4.7rem);
  }

  .project-sdn .sdn-hero-content h2 {
    font-size: clamp(1.7rem, 9vw, 3rem);
  }

  .project-sdn .sdn-hero-content > p:not(.eyebrow) {
    max-width: 100%;
    font-size: 0.9rem;
  }

  .project-sdn .sdn-snapshot,
  .project-sdn .sdn-overview,
  .project-sdn .sdn-section {
    padding: 62px 1rem;
  }

  .project-sdn .sdn-section-heading {
    margin-bottom: 1.8rem;
  }

  .project-sdn .sdn-snapshot-card {
    padding: 1.2rem;
  }

  .project-sdn figcaption {
    font-size: 0.68rem;
    padding: 0.65rem 0.78rem;
  }

  .project-sdn .sdn-guideline-grid figcaption {
    min-height: auto;
    padding: 0.68rem 0.78rem;
  }

  .project-sdn .sdn-guideline-grid figure,
  .project-sdn .sdn-feature,
  .project-sdn .sdn-flavour-grid figure,
  .project-sdn .sdn-packaging-grid figure,
  .project-sdn .sdn-touch-grid figure,
  .project-sdn .sdn-campaign-grid figure {
    padding: 0.65rem;
  }

  .project-sdn .sdn-guideline-grid img,
  .project-sdn .sdn-feature img,
  .project-sdn .sdn-flavour-grid img,
  .project-sdn .sdn-packaging-grid img,
  .project-sdn .sdn-touch-grid img,
  .project-sdn .sdn-campaign-grid img {
    max-height: 66vh;
  }
}

/* =========================================================
   THE EQUALIZER — TYPOGRAPHIC MOVIE POSTER CASE STUDY
   Updated: images fit cleanly inside containers
========================================================= */

.project-equalizer {
  --eq-black: #050404;
  --eq-charcoal: #0d0b0b;
  --eq-panel: #100d0d;
  --eq-blood: #b74334;
  --eq-red: #e6503f;
  --eq-cream: #f3e9d8;
  --eq-muted: rgba(243, 233, 216, 0.68);
  --eq-line: rgba(243, 233, 216, 0.13);

  background: var(--eq-black);
  color: var(--eq-cream);
  overflow-x: hidden;
}

.project-equalizer * {
  box-sizing: border-box;
}

.project-equalizer img {
  max-width: 100%;
  display: block;
}

.project-equalizer figure {
  margin: 0;
}

.project-equalizer .eyebrow {
  color: var(--eq-red);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* =========================================================
   EQUALIZER HERO — VISIBLE IMAGE FIX
========================================================= */

.equalizer-hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: flex;
  align-items: flex-end;

  padding: clamp(7rem, 11vw, 9rem) 5vw clamp(4.8rem, 7vw, 6rem);

  background: #050404;
}

.equalizer-hero-image {

  position: absolute;

  inset: 0;

  z-index: -4;

  width: 100%;

  height: 100%;

  overflow: hidden;

  background: #050404;

}

.equalizer-hero-image img {

  width: 100%;

  height: 115%;

  object-fit: cover;

  object-position: center center;

  /* this is the main fix */

  transform: translateY(100px) scale(1.04);

  filter: brightness(0.74) contrast(1.12) saturate(0.88);

}

/* dark overlay so text stays readable */

.equalizer-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  background:

    linear-gradient(

      to right,

      rgba(5, 4, 4, 0.97) 0%,

      rgba(5, 4, 4, 0.88) 34%,

      rgba(5, 4, 4, 0.58) 63%,

      rgba(5, 4, 4, 0.28) 100%

    ),

    linear-gradient(

      to top,

      rgba(5, 4, 4, 0.96) 0%,

      rgba(5, 4, 4, 0.58) 45%,

      rgba(5, 4, 4, 0.22) 100%

    );

}

/* responsive fix */

@media (max-width: 760px) {

  .equalizer-hero-image img {

    height: 112%;

    object-position: center center;

    transform: translateY(45px) scale(1.06);

    filter: brightness(0.62) contrast(1.12) saturate(0.85);

  }

}

.equalizer-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 48%, rgba(230, 80, 63, 0.18), transparent 25%),
    repeating-linear-gradient(
      90deg,
      rgba(243, 233, 216, 0.026) 0,
      rgba(243, 233, 216, 0.026) 1px,
      transparent 1px,
      transparent 108px
    );
  pointer-events: none;
}

.equalizer-hero-copy {
  position: relative;
  z-index: 4;
  width: min(900px, 100%);
}

.equalizer-hero h1 {
  margin: 0.95rem 0 0;
  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(4rem, 10.5vw, 10.5rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #fff4e8;
  text-shadow: 0 22px 70px rgba(0, 0, 0, 0.65);
}

.equalizer-hero-copy > p {
  max-width: 700px;
  margin-top: 1.25rem;
  color: rgba(243, 233, 216, 0.86);
  font-size: clamp(0.96rem, 1.15vw, 1.12rem);
  line-height: 1.72;
}

.equalizer-meta {
  width: min(920px, 100%);
  margin-top: 2.2rem;
  padding-top: 1.3rem;

  display: grid;
  grid-template-columns: 0.55fr 1.25fr 1fr 1.1fr;
  gap: 1.25rem;

  border-top: 1px solid rgba(243, 233, 216, 0.22);
}

.equalizer-meta span {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--eq-red);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.equalizer-meta p {
  margin: 0;
  color: rgba(243, 233, 216, 0.82);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* RESPONSIVE HERO */
@media (max-width: 760px) {
  .equalizer-hero {
    min-height: 94svh;
    padding: 6.4rem 1rem 5rem;
  }

  .equalizer-hero-image img {
    object-position: center;
    filter: brightness(0.65) contrast(1.14) saturate(0.85);
  }

  .equalizer-hero::before {
    background:
      linear-gradient(
        to right,
        rgba(5, 4, 4, 0.96) 0%,
        rgba(5, 4, 4, 0.78) 55%,
        rgba(5, 4, 4, 0.42) 100%
      ),
      linear-gradient(
        to top,
        rgba(5, 4, 4, 0.98) 0%,
        rgba(5, 4, 4, 0.7) 42%,
        rgba(5, 4, 4, 0.28) 100%
      );
  }

  .equalizer-hero h1 {
    font-size: clamp(3.2rem, 17vw, 5.2rem);
    line-height: 0.88;
  }

  .equalizer-hero-copy > p {
    max-width: 350px;
    font-size: 0.9rem;
    line-height: 1.62;
  }

  .equalizer-meta {
    grid-template-columns: 1fr;
    margin-top: 1.45rem;
    gap: 0.75rem;
  }
}

/* =========================================================
   GLOBAL SECTIONS
========================================================= */

.eq-section {
  position: relative;
  padding: clamp(82px, 10vw, 125px) 5vw;
  background:
    radial-gradient(circle at 85% 15%, rgba(183, 67, 52, 0.1), transparent 28%),
    linear-gradient(135deg, #050404 0%, #100d0d 58%, #050404 100%);
}

.eq-section h2,
.eq-final-world h2 {
  max-width: 1020px;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2.7rem, 5.5vw, 5.9rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
  font-weight: 700;
  color: var(--eq-cream);
}

.eq-section-heading {
  max-width: 960px;
  margin-bottom: clamp(2.4rem, 4vw, 3.6rem);
}

.eq-section-heading p:not(.eyebrow),
.eq-copy p {
  max-width: 720px;
  margin-top: 1rem;
  color: var(--eq-muted);
  line-height: 1.78;
}

.project-equalizer figcaption {
  margin: 0;
  padding: 0.75rem 0.2rem 0.05rem;
  color: rgba(243, 233, 216, 0.62);
  font-size: 0.76rem;
  line-height: 1.45;
}

.project-equalizer .lightbox-trigger {
  display: block;
}

/* =========================================================
   SNAPSHOT
========================================================= */

.eq-snapshot-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.eq-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--eq-line);
  border-left: 1px solid var(--eq-line);
}

.eq-snapshot-grid article {
  min-height: 235px;
  padding: 1.55rem;

  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.055), rgba(243, 233, 216, 0.018));

  border-right: 1px solid var(--eq-line);
  border-bottom: 1px solid var(--eq-line);
}

.eq-snapshot-grid span {
  display: block;
  margin-bottom: 1.1rem;

  color: var(--eq-red);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eq-snapshot-grid p {
  margin: 0;
  color: rgba(243, 233, 216, 0.76);
  line-height: 1.65;
}

/* =========================================================
   OVERVIEW
========================================================= */

.eq-overview {
  display: grid;
  grid-template-columns: 1fr 0.88fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  background:
    radial-gradient(circle at 18% 18%, rgba(183, 67, 52, 0.13), transparent 28%),
    linear-gradient(135deg, #0d0b0b, #050404 70%);
}

.eq-pillars {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.eq-pillars span {
  padding: 0.68rem 1rem;

  border: 1px solid rgba(183, 67, 52, 0.34);
  border-radius: 999px;

  color: rgba(243, 233, 216, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;

  background: rgba(183, 67, 52, 0.07);
}

/* =========================================================
   IMAGE CARD SYSTEM
   This fixes the image fitting problem
========================================================= */

.eq-wide-board,
.eq-two-grid figure,
.eq-poster-showcase figure,
.eq-alt-grid figure,
.eq-process-grid article {
  padding: 0.65rem;

  border-radius: 26px;
  overflow: hidden;

  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.055), rgba(243, 233, 216, 0.018));

  border: 1px solid rgba(243, 233, 216, 0.12);
  box-shadow: 0 24px 75px rgba(0, 0, 0, 0.24);
}

.eq-wide-board a,
.eq-two-grid figure a,
.eq-poster-showcase figure a,
.eq-alt-grid figure a,
.eq-process-grid article a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  overflow: hidden;

  border-radius: 19px;
  background: #f3eee7;
}

/* Main wide type/artifact board */
.eq-wide-board {
  width: min(100%, 1180px);
  margin-inline: auto;
}

.eq-wide-board a {
  aspect-ratio: 16 / 8.8;
}

/* This is the main fix */
.eq-wide-board img,
.eq-two-grid img,
.eq-poster-showcase img,
.eq-alt-grid img,
.eq-process-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #f3eee7;
}

/* =========================================================
   STROKE / ALPHABET
========================================================= */

.eq-stroke-section {
  background:
    radial-gradient(circle at 82% 20%, rgba(183, 67, 52, 0.12), transparent 30%),
    #080606;
}

.eq-two-grid {
  width: min(100%, 1180px);
  margin-inline: auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.eq-two-grid figure a {
  aspect-ratio: 16 / 10;
}

/* If your stroke library/alphabet images are very wide, this keeps them readable */
.eq-stroke-section .eq-two-grid figure a {
  background: #f3eee7;
}

.eq-stroke-section .eq-two-grid img {
  object-fit: contain;
  padding: 0.25rem;
}

/* =========================================================
   PROCESS
========================================================= */

.eq-process-grid {
  width: min(100%, 1180px);
  margin-inline: auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.eq-process-grid article a {
  aspect-ratio: 16 / 10;
}

/* process images should not crop */
.eq-process-grid img {
  object-fit: contain;
  padding: 0.25rem;
}

.eq-process-grid span {
  display: block;
  margin-top: 1.1rem;

  color: var(--eq-red);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eq-process-grid h3 {
  margin-top: 0.4rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(1.9rem, 3vw, 2.55rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.eq-process-grid p {
  max-width: 380px;
  margin-top: 0.7rem;

  color: rgba(243, 233, 216, 0.64);
  line-height: 1.65;
}

/* =========================================================
   FINAL POSTER
========================================================= */

.eq-final-poster-section {
  background:
    radial-gradient(circle at 18% 18%, rgba(183, 67, 52, 0.16), transparent 28%),
    linear-gradient(135deg, #050404, #130d0d 58%, #050404);
}

.eq-poster-showcase {
  width: min(100%, 1180px);
  margin-inline: auto;

  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 1.2rem;
  align-items: start;
}

/* final poster should stay portrait */
.eq-poster-showcase figure:first-child a {
  aspect-ratio: 2 / 3;
  background: #080606;
}

/* mockup / presentation board */
.eq-poster-showcase figure:last-child a {
  aspect-ratio: 16 / 10;
  background: #080606;
}

.eq-poster-showcase figure:first-child img,
.eq-poster-showcase figure:last-child img {
  object-fit: contain;
  background: #080606;
}

/* =========================================================
   ALTERNATIVE POSTER
========================================================= */

.eq-alt-section {
  background:
    radial-gradient(circle at 82% 20%, rgba(183, 67, 52, 0.14), transparent 28%),
    #080606;
}

.eq-alt-grid {
  width: min(100%, 1180px);
  margin-inline: auto;

  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: stretch;
}

.eq-alt-grid figure a {
  aspect-ratio: 2 / 3;
  background: #080606;
}

.eq-alt-grid figure img {
  object-fit: contain;
  background: #080606;
}

.eq-alt-note {
  padding: clamp(1.5rem, 4vw, 4rem);
  border-radius: 28px;

  background:
    linear-gradient(145deg, rgba(183, 67, 52, 0.13), rgba(243, 233, 216, 0.025));

  border: 1px solid rgba(183, 67, 52, 0.28);

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eq-alt-note span {
  color: var(--eq-red);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eq-alt-note h3 {
  margin-top: 0.8rem;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.eq-alt-note p {
  max-width: 520px;
  margin-top: 1rem;
  color: rgba(243, 233, 216, 0.7);
  line-height: 1.75;
}

/* =========================================================
   FINAL WORLD
========================================================= */

.eq-final-world {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: end;
  padding: 5vw;
  overflow: hidden;
  background: #050404;
}

.eq-final-world a {
  position: absolute;
  inset: 0;
  display: block;
}

.eq-final-world img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.eq-final-world::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5, 4, 4, 0.9), rgba(5, 4, 4, 0.24) 58%, rgba(5, 4, 4, 0.12)),
    linear-gradient(to right, rgba(5, 4, 4, 0.78), transparent 58%);
  pointer-events: none;
}

.eq-final-world div {
  position: relative;
  z-index: 2;
  max-width: 980px;
}

.eq-final-world h2 {
  margin-top: 0.7rem;
}

/* =========================================================
   HOVERS
========================================================= */

.project-equalizer figure,
.eq-process-grid article,
.eq-alt-note {
  transition:
    transform 0.55s cubic-bezier(.19, 1, .22, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.project-equalizer figure:hover,
.eq-process-grid article:hover {
  transform: translateY(-6px);
  border-color: rgba(183, 67, 52, 0.42);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.34),
    0 0 45px rgba(183, 67, 52, 0.08);
}

.project-equalizer figure img,
.eq-process-grid img {
  transition: transform 0.75s cubic-bezier(.19, 1, .22, 1);
}

.project-equalizer figure:hover img,
.eq-process-grid article:hover img {
  transform: scale(1.015);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .equalizer-meta,
  .project-equalizer .project-meta,
  .eq-snapshot-grid,
  .eq-overview,
  .eq-two-grid,
  .eq-poster-showcase,
  .eq-alt-grid,
  .eq-process-grid {
    grid-template-columns: 1fr;
  }

  .equalizer-hero {
    min-height: 96svh;
    padding: 7.2rem 1.4rem 5.5rem;
  }

  .eq-two-grid figure a,
  .eq-process-grid article a,
  .eq-wide-board a,
  .eq-poster-showcase figure:last-child a {
    aspect-ratio: 16 / 10;
  }

  .eq-poster-showcase figure:first-child a,
  .eq-alt-grid figure a {
    aspect-ratio: 2 / 3;
  }
}

@media (max-width: 760px) {
  .equalizer-hero {
    min-height: 94svh;
    padding: 6.4rem 1rem 5rem;
  }

  .equalizer-hero-image img {
    object-position: 62% center;
    transform: scale(1.05);
  }

  .equalizer-hero::before {
    background:
      linear-gradient(
        to right,
        rgba(5, 4, 4, 0.96) 0%,
        rgba(5, 4, 4, 0.76) 48%,
        rgba(5, 4, 4, 0.36) 100%
      ),
      linear-gradient(
        to top,
        rgba(5, 4, 4, 0.98) 0%,
        rgba(5, 4, 4, 0.78) 38%,
        rgba(5, 4, 4, 0.2) 78%
      );
  }

  .equalizer-hero h1 {
    font-size: clamp(3.2rem, 17vw, 5.2rem);
    line-height: 0.88;
    letter-spacing: -0.03em;
  }

  .equalizer-hero-copy > p {
    max-width: 340px;
    font-size: 0.9rem;
    line-height: 1.62;
  }

  .equalizer-meta,
  .project-equalizer .project-meta {
    margin-top: 1.45rem;
    padding-top: 1rem;
    gap: 0.75rem;
  }

  .equalizer-meta span,
  .project-equalizer .project-meta span {
    font-size: 0.58rem;
  }

  .equalizer-meta p,
  .project-equalizer .project-meta p {
    max-width: 320px;
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .eq-section {
    padding: 78px 1rem;
  }

  .eq-section h2,
  .eq-final-world h2 {
    font-size: clamp(2.45rem, 12vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
  }

  .eq-snapshot-grid article {
    min-height: auto;
  }

  .eq-wide-board,
  .eq-two-grid figure,
  .eq-poster-showcase figure,
  .eq-alt-grid figure,
  .eq-process-grid article {
    padding: 0.45rem;
    border-radius: 20px;
  }

  .eq-wide-board a,
  .eq-two-grid figure a,
  .eq-process-grid article a,
  .eq-poster-showcase figure:last-child a {
    border-radius: 15px;
    aspect-ratio: 4 / 3;
  }

  .eq-poster-showcase figure:first-child a,
  .eq-alt-grid figure a {
    border-radius: 15px;
    aspect-ratio: 2 / 3;
  }

  .eq-wide-board img,
  .eq-two-grid img,
  .eq-process-grid img,
  .eq-poster-showcase img,
  .eq-alt-grid img {
    padding: 0.25rem;
  }

  .eq-final-world {
    min-height: 82vh;
    padding: 1rem;
  }
}

@media (max-width: 460px) {
  .equalizer-hero {
    min-height: 90svh;
    padding: 6rem 1rem 4.6rem;
  }

  .equalizer-hero h1 {
    font-size: clamp(3rem, 18vw, 4.7rem);
  }

  .equalizer-hero-copy > p {
    max-width: 300px;
  }

  .project-equalizer figcaption {
    font-size: 0.68rem;
  }
}

/* =========================================================
   ECOTHREADS — LUXURY CASE STUDY COMPLETE CSS
   Clean image fitting / responsive / premium editorial style
========================================================= */

.project-ecothreads {
  --eco-black: #080806;
  --eco-charcoal: #111612;
  --eco-deep: #0c100d;
  --eco-green: #1f2e25;
  --eco-olive: #303a32;
  --eco-cream: #ede6d8;
  --eco-soft: #f5eddf;
  --eco-stone: #c9bfae;
  --eco-muted: #8d8477;
  --eco-gold: #a88f5a;
  --eco-line-light: rgba(237, 230, 216, 0.14);
  --eco-line-dark: rgba(17, 22, 18, 0.13);

  background: var(--eco-charcoal);
  color: var(--eco-cream);
  overflow-x: hidden;
}

.project-ecothreads main {
  background: var(--eco-charcoal);
}

.project-ecothreads .eyebrow {
  color: var(--eco-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.project-ecothreads img {
  display: block;
  max-width: 100%;
}

.project-ecothreads figure {
  margin: 0;
}

.project-ecothreads a {
  color: inherit;
}

.project-ecothreads figure a,
.project-ecothreads .lightbox-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
}

.project-ecothreads figure img {
  width: 100%;
  height: 100%;
  object-position: center;
}

/* =========================================================
   ECOTHREADS HERO
========================================================= */

.project-ecothreads .eco-hero-new {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #111612;
  border-bottom: 1px solid rgba(237, 230, 214, 0.12);
}

.project-ecothreads .eco-hero-new > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* THIS is the important part */
  object-position: 72% 18%;
}

.project-ecothreads .eco-hero-new::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(8, 10, 9, 0.72) 0%,
      rgba(8, 10, 9, 0.48) 28%,
      rgba(8, 10, 9, 0.18) 52%,
      rgba(8, 10, 9, 0.08) 100%
    );
}

.project-ecothreads .eco-hero-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  padding: clamp(7rem, 10vw, 9rem) 5vw clamp(2.2rem, 4vw, 3rem);
  color: #f6f0e5;
}

.project-ecothreads .eco-hero-overlay .eyebrow {
  margin: 0 0 1rem;
  color: #d2b46c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-ecothreads .eco-hero-overlay h1 {
  margin: 0;
  font-family: "EB Garamond", serif;
  font-size: clamp(4rem, 8vw, 6.4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #fffaf0;
}

.project-ecothreads .eco-tagline {
  margin: 0.4rem 0 1rem;
  font-family: "EB Garamond", serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
  color: #f3ead9;
}

.project-ecothreads .eco-hero-text {
  max-width: 560px;
  margin: 0 0 2rem;
  color: rgba(246, 240, 229, 0.86);
  font-size: 1rem;
  line-height: 1.75;
}

.project-ecothreads .eco-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 720px;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(246, 240, 229, 0.2);
}

.project-ecothreads .eco-meta-grid span {
  display: block;
  margin-bottom: 0.35rem;
  color: #d2b46c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-ecothreads .eco-meta-grid p {
  margin: 0;
  color: #f6f0e5;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  .project-ecothreads .eco-hero-new {
    min-height: 82vh;
  }

  .project-ecothreads .eco-hero-new > img {
    object-position: 68% 16%;
  }

  .project-ecothreads .eco-hero-overlay {
    max-width: 640px;
    padding: 6.5rem 1.4rem 2rem;
  }

  .project-ecothreads .eco-meta-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    max-width: 420px;
  }
}

@media (max-width: 640px) {
  .project-ecothreads .eco-hero-new {
    min-height: 76vh;
  }

  .project-ecothreads .eco-hero-new > img {
    object-position: 66% 15%;
  }

  .project-ecothreads .eco-hero-overlay {
    padding: 6rem 1.1rem 1.6rem;
  }

  .project-ecothreads .eco-hero-overlay h1 {
    font-size: clamp(3.3rem, 14vw, 4.8rem);
  }

  .project-ecothreads .eco-tagline {
    font-size: clamp(1.5rem, 7vw, 2.1rem);
  }

  .project-ecothreads .eco-hero-text {
    font-size: 0.95rem;
    line-height: 1.65;
  }
}

/* =========================================================
   STORY STRIP
========================================================= */

.project-ecothreads .project-story-strip {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(237, 230, 216, 0.12);
  border-bottom: 1px solid rgba(237, 230, 216, 0.12);
  background: #0b0d0b;
}

.project-ecothreads .project-story-track {
  display: flex;
  width: max-content;
  animation: ecoStoryLoop 24s linear infinite;
}

.project-ecothreads .project-story-group {
  display: flex;
  align-items: center;
  gap: 2.35rem;
  padding: 0.85rem 1.2rem;
  white-space: nowrap;
}

.project-ecothreads .project-story-group span {
  color: rgba(237, 230, 216, 0.84);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@keyframes ecoStoryLoop {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
   GENERAL SECTIONS
========================================================= */

.project-ecothreads .eco-section {
  padding: clamp(90px, 9vw, 132px) 5vw;
  position: relative;
  overflow: hidden;
}

.project-ecothreads .eco-section-heading {
  max-width: 1000px;
  margin-bottom: clamp(2rem, 4vw, 3.6rem);
}

.project-ecothreads .eco-section h2,
.project-ecothreads .eco-final-lux h2 {
  font-family: "EB Garamond", serif;
  font-size: clamp(2.85rem, 5.8vw, 6.25rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 600;
}

.project-ecothreads .eco-section-heading p:not(.eyebrow),
.project-ecothreads .eco-copy-stack p {
  max-width: 690px;
  margin-top: 1rem;
  color: rgba(237, 230, 216, 0.68);
  line-height: 1.78;
}

.project-ecothreads .eco-copy-stack p + p {
  margin-top: 1rem;
}

.project-ecothreads .eco-section-label {
  font-family: "EB Garamond", serif;
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--eco-gold);
}

/* =========================================================
   BRAND OVERVIEW
========================================================= */

.project-ecothreads .eco-overview-new {
  display: grid;
  grid-template-columns: 90px 1fr 0.85fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  background:
    radial-gradient(circle at 15% 20%, rgba(168, 143, 90, 0.13), transparent 28rem),
    linear-gradient(135deg, #ede6d8 0%, #d9cfbd 100%);
  color: var(--eco-charcoal);
}

.project-ecothreads .eco-overview-new .eyebrow {
  color: #766038;
}

.project-ecothreads .eco-overview-new .eco-copy-stack p {
  color: rgba(17, 22, 18, 0.68);
}

/* =========================================================
   ECOTHREADS — LOGO + COLOUR SYSTEM SMALLER FIT
   Use this for:
   - ecothreads-logo-system.PNG
   - ecothreads-colour-system.PNG
========================================================= */

.project-ecothreads .eco-feature-image {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 0.5rem;

  border-radius: 24px;
  overflow: hidden;

  background:
    linear-gradient(145deg, rgba(237, 230, 216, 0.075), rgba(237, 230, 216, 0.02));

  border: 1px solid rgba(237, 230, 216, 0.13);

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* light version for colour system */
.project-ecothreads .eco-feature-image.light {
  width: min(100%, 860px);

  background:
    linear-gradient(145deg, rgba(17, 22, 18, 0.04), rgba(17, 22, 18, 0.015));

  border: 1px solid rgba(17, 22, 18, 0.1);

  box-shadow:
    0 22px 60px rgba(17, 22, 18, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* clickable image area */
.project-ecothreads .eco-feature-image a {
  display: block;
  width: 100%;

  aspect-ratio: 16 / 9;

  border-radius: 18px;
  overflow: hidden;

  background: #111612;
}

/* actual image */
.project-ecothreads .eco-feature-image img {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
  object-position: center;

  border-radius: 18px;

  transition:
    transform 0.75s cubic-bezier(.19, 1, .22, 1),
    filter 0.4s ease;
}

/* colour system image background */
.project-ecothreads .eco-feature-image.light a {
  background: #ede6d8;
}

/* hover */
.project-ecothreads .eco-feature-image:hover img {
  transform: scale(1.018);
  filter: brightness(1.03) contrast(1.03);
}

/* caption */
.project-ecothreads .eco-feature-image figcaption {
  margin: 0;
  padding: 0.65rem 0.15rem 0.05rem;

  color: rgba(237, 230, 216, 0.68);
  font-size: 0.73rem;
  line-height: 1.42;
}

.project-ecothreads .eco-feature-image.light figcaption {
  color: rgba(17, 22, 18, 0.62);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
  .project-ecothreads .eco-feature-image {
    width: min(100%, 820px);
  }

  .project-ecothreads .eco-feature-image.light {
    width: min(100%, 800px);
  }
}

@media (max-width: 700px) {
  .project-ecothreads .eco-feature-image,
  .project-ecothreads .eco-feature-image.light {
    width: 100%;
    padding: 0.42rem;
    border-radius: 20px;
  }

  .project-ecothreads .eco-feature-image a {
    aspect-ratio: 16 / 10;
    border-radius: 15px;
  }

  .project-ecothreads .eco-feature-image img {
    border-radius: 15px;
  }

  .project-ecothreads .eco-feature-image figcaption {
    font-size: 0.68rem;
  }
}

@media (max-width: 480px) {
  .project-ecothreads .eco-feature-image a {
    aspect-ratio: 4 / 3;
  }
}

/* =========================================================
   ECOTHREADS — COLOUR SYSTEM FIX
   Keeps image + caption visible on screen
========================================================= */

.project-ecothreads .eco-colour-system {
  padding: clamp(4.5rem, 7vw, 6.5rem) 5vw !important;
  overflow: visible !important;

  background:
    radial-gradient(circle at 86% 16%, rgba(184, 155, 94, 0.13), transparent 28rem),
    linear-gradient(135deg, #080706 0%, #15100d 55%, #080706 100%);
}

/* heading should stay left and not take too much height */
.project-ecothreads .eco-colour-system .eco-section-heading {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin: 0 0 clamp(1.5rem, 2.5vw, 2rem) !important;
  text-align: left !important;
}

.project-ecothreads .eco-colour-system .eyebrow {
  margin: 0 0 0.85rem !important;

  color: #b89b5e;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.project-ecothreads .eco-colour-system h2 {
  max-width: 1060px !important;
  margin: 0 !important;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(2.8rem, 5vw, 5.4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  font-weight: 650;

  color: #fff8ea;
  text-align: left !important;
  text-wrap: balance;
}

/* figure/card */
.project-ecothreads .eco-colour-system .eco-feature-image.light {
  width: min(
    100%,
    1060px,
    calc((100svh - 300px) * 1.55)
  ) !important;

  margin: 0 !important;
  padding: 0.65rem !important;

  border-radius: 28px;
  border: 1px solid rgba(243, 233, 216, 0.16);

  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.09), rgba(243, 233, 216, 0.025));

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  overflow: visible !important;
}

/* image container */
.project-ecothreads .eco-colour-system .eco-feature-image.light a {
  display: block;
  width: 100%;

  aspect-ratio: 1534 / 1012;
  max-height: min(52svh, 470px);

  overflow: hidden;
  border-radius: 21px;
  background: #e9dfcf;
}

/* image fills properly */
.project-ecothreads .eco-colour-system .eco-feature-image.light img {
  width: 100% !important;
  height: 100% !important;

  display: block;
  object-fit: cover !important;
  object-position: center center !important;

  border-radius: 21px;
}

/* caption now visible */
.project-ecothreads .eco-colour-system .eco-feature-image.light figcaption {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  margin: 0 !important;
  padding: 0.75rem 0.15rem 0.05rem !important;

  color: rgba(243, 233, 216, 0.68) !important;
  font-size: 0.74rem !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .project-ecothreads .eco-colour-system {
    padding: 4.8rem 1.25rem !important;
  }

  .project-ecothreads .eco-colour-system .eco-feature-image.light {
    width: 100% !important;
  }

  .project-ecothreads .eco-colour-system .eco-feature-image.light a {
    max-height: 430px;
  }
}

@media (max-width: 700px) {
  .project-ecothreads .eco-colour-system {
    padding: 4.2rem 1rem !important;
  }

  .project-ecothreads .eco-colour-system h2 {
    max-width: 100% !important;
    font-size: clamp(2.4rem, 11vw, 3.8rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
  }

  .project-ecothreads .eco-colour-system .eco-feature-image.light {
    padding: 0.45rem !important;
    border-radius: 20px;
  }

  .project-ecothreads .eco-colour-system .eco-feature-image.light a {
    aspect-ratio: 4 / 3;
    max-height: none;
    border-radius: 15px;
  }

  .project-ecothreads .eco-colour-system .eco-feature-image.light img {
    border-radius: 15px;
  }

  .project-ecothreads .eco-colour-system .eco-feature-image.light figcaption {
    font-size: 0.68rem !important;
    padding-top: 0.65rem !important;
  }
}

/* =========================================================
   ECOTHREADS — TYPOGRAPHY BOARD FIX
   Image size: 1534 x 1012
========================================================= */

.project-ecothreads .eco-typography-board {
  padding: clamp(4.5rem, 7vw, 7rem) 5vw;
  background:
    radial-gradient(circle at 88% 16%, rgba(184, 155, 94, 0.12), transparent 28rem),
    linear-gradient(135deg, #080706 0%, #15100d 55%, #080706 100%);
  color: #f3e9d8;
  overflow: hidden;
}

/* keep everything aligned like your other sections */
.project-ecothreads .eco-typography-board .eco-section-heading {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin: 0 0 clamp(1.7rem, 3vw, 2.4rem) !important;
  text-align: left !important;
}

/* eyebrow */
.project-ecothreads .eco-typography-board .eyebrow {
  margin: 0 0 0.85rem !important;

  color: #b89b5e;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* title — left aligned and not too massive */
.project-ecothreads .eco-typography-board h2 {
  max-width: 900px !important;
  margin: 0 !important;

  font-family: var(--serif), "Cormorant Garamond", serif;
  font-size: clamp(3rem, 5.4vw, 5.9rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.045em !important;
  font-weight: 650;

  color: #fff8ea;
  text-align: left !important;
  text-wrap: balance;
}

/* paragraph */
.project-ecothreads .eco-typography-board .eco-section-heading > p:not(.eyebrow) {
  max-width: 780px !important;
  margin: 1.15rem 0 0 !important;

  color: rgba(243, 233, 216, 0.74);
  font-size: clamp(0.96rem, 1.05vw, 1.08rem);
  line-height: 1.72;
  letter-spacing: 0.003em;
  text-align: left !important;
}

/* image container — controlled size, left aligned, not huge */
.project-ecothreads .eco-type-image {
  /*
    This keeps the board visible without forcing a giant scroll.
    It also keeps the exact image proportion: 1534 / 1012.
  */
  width: min(
    100%,
    1120px,
    calc((100svh - 260px) * 1.515)
  ) !important;

  margin: 0 !important;
  padding: 0.65rem !important;

  border-radius: 28px;
  border: 1px solid rgba(243, 233, 216, 0.16);

  background:
    linear-gradient(145deg, rgba(243, 233, 216, 0.09), rgba(243, 233, 216, 0.025));

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  overflow: hidden;
}

/* actual image area */
.project-ecothreads .eco-type-image a {
  display: block;
  width: 100%;
  aspect-ratio: 1534 / 1012;

  overflow: hidden;
  border-radius: 21px;
  background: #e9dfcf;
}

/* fills the container with no weird empty gaps */
.project-ecothreads .eco-type-image img {
  width: 100% !important;
  height: 100% !important;

  display: block;
  object-fit: cover !important;
  object-position: center center !important;

  border-radius: 21px;
}

/* caption */
.project-ecothreads .eco-type-image figcaption {
  margin: 0;
  padding: 0.75rem 0.15rem 0.05rem;

  color: rgba(243, 233, 216, 0.62);
  font-size: 0.74rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .project-ecothreads .eco-typography-board {
    padding: 4.8rem 1.25rem;
  }

  .project-ecothreads .eco-type-image {
    width: 100% !important;
  }
}

@media (max-width: 700px) {
  .project-ecothreads .eco-typography-board {
    padding: 4.2rem 1rem;
  }

  .project-ecothreads .eco-typography-board h2 {
    max-width: 100% !important;
    font-size: clamp(2.6rem, 12vw, 4rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.035em !important;
  }

  .project-ecothreads .eco-typography-board .eco-section-heading > p:not(.eyebrow) {
    max-width: 100% !important;
    font-size: 0.94rem;
    line-height: 1.68;
  }

  .project-ecothreads .eco-type-image {
    padding: 0.45rem !important;
    border-radius: 20px;
  }

  .project-ecothreads .eco-type-image a,
  .project-ecothreads .eco-type-image img {
    border-radius: 15px;
  }

  .project-ecothreads .eco-type-image figcaption {
    font-size: 0.68rem;
  }
}

/* =========================================================
   SKETCHES & PROCESS
========================================================= */

.project-ecothreads .eco-process-lux {
  background:
    radial-gradient(circle at 20% 20%, rgba(201, 191, 174, 0.1), transparent 28rem),
    linear-gradient(135deg, #111612 0%, #171c16 100%);
}

.project-ecothreads .eco-process-board {
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem;
  align-items: start;
}

.project-ecothreads .eco-process-board figure {
  padding: 0.62rem;
  border-radius: 28px;
  background: rgba(237, 230, 216, 0.055);
  border: 1px solid rgba(237, 230, 216, 0.13);
  box-shadow: 0 24px 75px rgba(0, 0, 0, 0.22);
}

.project-ecothreads .eco-process-board a {
  aspect-ratio: 16 / 9;
  border-radius: 21px;
  background: #ede6d8;
}

.project-ecothreads .eco-process-board img {
  object-fit: contain;
  object-position: center;
  border-radius: 21px;
}

.project-ecothreads .eco-process-board figcaption {
  padding: 0.7rem 0.15rem 0.05rem;
  color: rgba(237, 230, 216, 0.66);
  font-size: 0.74rem;
  line-height: 1.45;
}

/* =========================================================
   CAMPAIGN WORLD
========================================================= */

.project-ecothreads .eco-campaign-world {
  background:
    radial-gradient(circle at 82% 18%, rgba(168, 143, 90, 0.12), transparent 30rem),
    linear-gradient(135deg, #111612 0%, #252820 58%, #10130f 100%);
}

.project-ecothreads .eco-campaign-pair {
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 1.25rem;
  align-items: start;
}

.project-ecothreads .eco-campaign-pair + .eco-campaign-pair {
  margin-top: 3rem;
}

.project-ecothreads .eco-campaign-pair figure {
  padding: 0.55rem;
  border-radius: 28px;
  background: rgba(237, 230, 216, 0.055);
  border: 1px solid rgba(237, 230, 216, 0.13);
  box-shadow: 0 24px 75px rgba(0, 0, 0, 0.26);
}

.project-ecothreads .eco-campaign-pair figure:first-child a {
  aspect-ratio: 4 / 5;
  border-radius: 21px;
  background: #111612;
}

.project-ecothreads .eco-campaign-pair figure:last-child a {
  aspect-ratio: 16 / 9;
  border-radius: 21px;
  background: #111612;
}

.project-ecothreads .eco-campaign-pair img {
  object-fit: contain;
  object-position: center;
  border-radius: 21px;
}

.project-ecothreads .eco-campaign-pair figcaption {
  padding: 0.72rem 0.15rem 0.05rem;
  color: rgba(237, 230, 216, 0.68);
  font-size: 0.74rem;
  line-height: 1.45;
}

/* =========================================================
   ECOTHREADS — PACKAGING & BRAND TOUCHPOINTS CLEAN FIX
========================================================= */

.project-ecothreads .eco-packaging-lux {
  background:
    radial-gradient(circle at 15% 12%, rgba(168,143,90,0.13), transparent 28rem),
    radial-gradient(circle at 85% 70%, rgba(47,58,51,0.08), transparent 30rem),
    linear-gradient(135deg, #eee6d8 0%, #d8cebd 100%);
  color: var(--eco-charcoal);
}

.project-ecothreads .eco-packaging-lux .eco-section-heading {
  max-width: 980px;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.project-ecothreads .eco-packaging-lux .eyebrow {
  color: #796332;
}

.project-ecothreads .eco-packaging-lux h2 {
  color: var(--eco-charcoal);
}

/* MAIN GRID */
.project-ecothreads .eco-touchpoint-grid {
  width: min(100%, 1180px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 1.45vw, 1.35rem);
  align-items: start;
}

/* CARD BASE */
.project-ecothreads .eco-touchpoint-grid figure {
  margin: 0;
  padding: 0.55rem;

  border-radius: 24px;
  overflow: hidden;

  background:
    linear-gradient(145deg, rgba(255,255,255,0.46), rgba(255,255,255,0.18));

  border: 1px solid rgba(17,22,18,0.11);

  box-shadow:
    0 22px 65px rgba(17,22,18,0.09),
    inset 0 1px 0 rgba(255,255,255,0.42);

  transition:
    transform 0.5s cubic-bezier(.19,1,.22,1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.project-ecothreads .eco-touchpoint-grid figure:hover {
  transform: translateY(-5px);
  border-color: rgba(168,143,90,0.35);
  box-shadow:
    0 30px 80px rgba(17,22,18,0.14),
    0 0 34px rgba(168,143,90,0.08);
}

/* IMAGE WRAPPER */
.project-ecothreads .eco-touchpoint-grid figure > a {
  display: block;
  width: 100%;

  border-radius: 18px;
  overflow: hidden;

  background: #efe7d8;
}

/* IMAGE BASE */
.project-ecothreads .eco-touchpoint-grid img {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
  object-position: center;

  border-radius: 18px;

  transition:
    transform 0.75s cubic-bezier(.19,1,.22,1),
    filter 0.4s ease;
}

.project-ecothreads .eco-touchpoint-grid figure:hover img {
  transform: scale(1.025);
  filter: brightness(1.04) contrast(1.03);
}

/* CAPTIONS */
.project-ecothreads .eco-touchpoint-grid figcaption {
  margin: 0;
  padding: 0.68rem 0.15rem 0.05rem;

  color: rgba(17,22,18,0.62);
  font-size: 0.74rem;
  line-height: 1.4;
}

/* =========================================================
   INDIVIDUAL LAYOUTS
========================================================= */

/* Shopping bag 01 — wide hero card */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(1) {
  grid-column: 1 / 9;
}

.project-ecothreads .eco-touchpoint-grid figure:nth-child(1) > a {
  aspect-ratio: 16 / 8.5;
}

/* Shopping bag 02 */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(2) {
  grid-column: 9 / 13;
}

.project-ecothreads .eco-touchpoint-grid figure:nth-child(2) > a {
  aspect-ratio: 4 / 3.15;
}

/* Hang tag */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(3) {
  grid-column: 1 / 5;
}

.project-ecothreads .eco-touchpoint-grid figure:nth-child(3) > a {
  aspect-ratio: 4 / 3;
}

/* Packaging box */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(4) {
  grid-column: 5 / 9;
}

.project-ecothreads .eco-touchpoint-grid figure:nth-child(4) > a {
  aspect-ratio: 4 / 3;
}

/* Tissue paper */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(5) {
  grid-column: 9 / 13;
}

.project-ecothreads .eco-touchpoint-grid figure:nth-child(5) > a {
  aspect-ratio: 4 / 3;
}

/* Dust bag */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(6) {
  grid-column: 1 / 5;
}

.project-ecothreads .eco-touchpoint-grid figure:nth-child(6) > a {
  aspect-ratio: 4 / 3.2;
}

/* Neck label */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(7) {
  grid-column: 5 / 9;
}

.project-ecothreads .eco-touchpoint-grid figure:nth-child(7) > a {
  aspect-ratio: 4 / 3.2;
}

/* Care label */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(8) {
  grid-column: 9 / 13;
}

.project-ecothreads .eco-touchpoint-grid figure:nth-child(8) > a {
  aspect-ratio: 4 / 3.2;
}

/* Hem label — full-width ending so it does NOT sit awkwardly alone */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(9) {
  grid-column: 3 / 11;
}

.project-ecothreads .eco-touchpoint-grid figure:nth-child(9) > a {
  aspect-ratio: 16 / 6.2;
}

/* =========================================================
   IMAGE-SPECIFIC FITTING
========================================================= */

/* Shopping bags should feel cinematic and fill their containers */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(1) img,
.project-ecothreads .eco-touchpoint-grid figure:nth-child(2) img {
  object-fit: cover;
  object-position: center;
}

/* Hang tag and small product pieces need full visibility */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(3) img,
.project-ecothreads .eco-touchpoint-grid figure:nth-child(4) img,
.project-ecothreads .eco-touchpoint-grid figure:nth-child(5) img,
.project-ecothreads .eco-touchpoint-grid figure:nth-child(6) img {
  object-fit: cover;
  object-position: center;
}

/* Clothing label closeups should fill nicely */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(7) img,
.project-ecothreads .eco-touchpoint-grid figure:nth-child(8) img,
.project-ecothreads .eco-touchpoint-grid figure:nth-child(9) img {
  object-fit: cover;
  object-position: center;
}

/* If care label crops too much, this keeps the tag visible */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(8) img {
  object-position: center 45%;
}

/* Hem label works better slightly higher */
.project-ecothreads .eco-touchpoint-grid figure:nth-child(9) img {
  object-position: center 48%;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {
  .project-ecothreads .eco-touchpoint-grid {
    width: min(100%, 900px);
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .project-ecothreads .eco-touchpoint-grid figure:nth-child(1),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(9) {
    grid-column: 1 / 7;
  }

  .project-ecothreads .eco-touchpoint-grid figure:nth-child(2),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(3),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(4),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(5),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(6),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(7),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(8) {
    grid-column: span 3;
  }

  .project-ecothreads .eco-touchpoint-grid figure:nth-child(1) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(9) > a {
    aspect-ratio: 16 / 8;
  }

  .project-ecothreads .eco-touchpoint-grid figure:nth-child(2) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(3) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(4) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(5) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(6) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(7) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(8) > a {
    aspect-ratio: 4 / 3;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .project-ecothreads .eco-packaging-lux {
    padding: 80px 1.15rem;
  }

  .project-ecothreads .eco-touchpoint-grid {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .project-ecothreads .eco-touchpoint-grid figure,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(1),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(2),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(3),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(4),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(5),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(6),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(7),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(8),
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(9) {
    grid-column: 1 / -1;
    padding: 0.45rem;
    border-radius: 20px;
  }

  .project-ecothreads .eco-touchpoint-grid figure > a,
  .project-ecothreads .eco-touchpoint-grid img {
    border-radius: 15px;
  }

  .project-ecothreads .eco-touchpoint-grid figure:nth-child(1) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(2) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(3) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(4) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(5) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(6) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(7) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(8) > a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(9) > a {
    aspect-ratio: 16 / 10;
  }

  .project-ecothreads .eco-touchpoint-grid figcaption {
    font-size: 0.7rem;
  }
}

/* =========================================================
   ENVIRONMENTAL APPLICATIONS
========================================================= */

.project-ecothreads .eco-environment-lux {
  background:
    radial-gradient(circle at 18% 20%, rgba(168, 143, 90, 0.12), transparent 30rem),
    linear-gradient(135deg, #111612 0%, #203027 60%, #0d110e 100%);
}

.project-ecothreads .eco-environment-lux-grid {
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.project-ecothreads .eco-environment-lux-grid figure {
  padding: 0.55rem;
  border-radius: 28px;
  background: rgba(237, 230, 216, 0.055);
  border: 1px solid rgba(237, 230, 216, 0.13);
  box-shadow: 0 24px 75px rgba(0, 0, 0, 0.24);
}

.project-ecothreads .eco-environment-lux-grid a {
  aspect-ratio: 16 / 10;
  border-radius: 21px;
  background: #10130f;
}

.project-ecothreads .eco-environment-lux-grid img {
  object-fit: contain;
  object-position: center;
  border-radius: 21px;
}

.project-ecothreads .eco-environment-lux-grid figcaption {
  padding: 0.72rem 0.15rem 0.05rem;
  color: rgba(237, 230, 216, 0.68);
  font-size: 0.74rem;
  line-height: 1.45;
}

/* =========================================================
   ECOTHREADS — CAMPAIGN WORLD FIX
========================================================= */

.project-ecothreads .eco-campaign-world {
  background:
    radial-gradient(circle at 82% 18%, rgba(168,143,90,0.14), transparent 30rem),
    radial-gradient(circle at 18% 75%, rgba(47,58,51,0.22), transparent 30rem),
    linear-gradient(135deg, #111612 0%, #222920 58%, #0d110e 100%);
  color: var(--eco-cream);
}

.project-ecothreads .eco-campaign-world .eco-section-heading {
  max-width: 1050px;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* each row */
.project-ecothreads .eco-campaign-pair,
.project-ecothreads .eco-campaign-pair.reverse {
  width: min(100%, 1180px);
  margin: 0 auto clamp(2rem, 4vw, 4rem);

  display: grid;
  grid-template-columns: 0.9fr 1.25fr;
  gap: clamp(1rem, 1.5vw, 1.35rem);
  align-items: start;
}

/* card */
.project-ecothreads .eco-campaign-pair figure {
  margin: 0;
  padding: 0.55rem;

  border-radius: 26px;
  overflow: hidden;

  background:
    linear-gradient(145deg, rgba(237,230,216,0.075), rgba(237,230,216,0.02));

  border: 1px solid rgba(237,230,216,0.13);

  box-shadow:
    0 24px 70px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.04);

  transition:
    transform 0.5s cubic-bezier(.19,1,.22,1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.project-ecothreads .eco-campaign-pair figure:hover {
  transform: translateY(-5px);
  border-color: rgba(168,143,90,0.38);
  box-shadow:
    0 34px 90px rgba(0,0,0,0.38),
    0 0 36px rgba(168,143,90,0.08);
}

/* image wrapper */
.project-ecothreads .eco-campaign-pair a {
  display: block;
  width: 100%;

  border-radius: 19px;
  overflow: hidden;

  background: #111612;
}

/* flat campaign designs */
.project-ecothreads .eco-campaign-pair figure:first-child a {
  aspect-ratio: 4 / 5;
}

/* billboard/environment mockups */
.project-ecothreads .eco-campaign-pair figure:last-child a {
  aspect-ratio: 16 / 9;
}

/* images */
.project-ecothreads .eco-campaign-pair img {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
  object-position: center;

  border-radius: 19px;

  transition:
    transform 0.75s cubic-bezier(.19,1,.22,1),
    filter 0.4s ease;
}

.project-ecothreads .eco-campaign-pair figure:hover img {
  transform: scale(1.025);
  filter: brightness(1.04) contrast(1.04);
}

/* captions */
.project-ecothreads .eco-campaign-pair figcaption {
  margin: 0;
  padding: 0.7rem 0.15rem 0.05rem;

  color: rgba(237,230,216,0.68);
  font-size: 0.74rem;
  line-height: 1.42;
}

/* prevent the flat campaign from being weirdly cut */
.project-ecothreads .eco-campaign-pair figure:first-child img {
  object-fit: cover;
  object-position: center;
}

/* keep mockups cinematic */
.project-ecothreads .eco-campaign-pair figure:last-child img {
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   ECOTHREADS — DIGITAL CAMPAIGN FIX
========================================================= */

.project-ecothreads .eco-digital-lux {
  background:
    radial-gradient(circle at 80% 18%, rgba(168,143,90,0.12), transparent 28rem),
    linear-gradient(135deg, #111612 0%, #1f261f 58%, #0b0f0c 100%);
  color: var(--eco-cream);
}

.project-ecothreads .eco-digital-lux .eco-section-heading {
  max-width: 950px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* digital grid */
.project-ecothreads .eco-digital-grid {
  width: min(100%, 1080px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

/* card */
.project-ecothreads .eco-digital-grid figure {
  margin: 0;
  padding: 0.6rem;

  border-radius: 28px;
  overflow: hidden;

  background:
    linear-gradient(145deg, rgba(237,230,216,0.075), rgba(237,230,216,0.02));

  border: 1px solid rgba(237,230,216,0.13);

  box-shadow:
    0 26px 80px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* wrapper */
.project-ecothreads .eco-digital-grid a {
  display: block;
  width: 100%;

  aspect-ratio: 16 / 9;

  border-radius: 20px;
  overflow: hidden;

  background: #111612;
}

/* image */
.project-ecothreads .eco-digital-grid img {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
  object-position: center;

  border-radius: 20px;

  transition:
    transform 0.75s cubic-bezier(.19,1,.22,1),
    filter 0.4s ease;
}

.project-ecothreads .eco-digital-grid figure:hover img {
  transform: scale(1.025);
  filter: brightness(1.04) contrast(1.04);
}

.project-ecothreads .eco-digital-grid figcaption {
  margin: 0;
  padding: 0.72rem 0.15rem 0.05rem;

  color: rgba(237,230,216,0.68);
  font-size: 0.74rem;
  line-height: 1.42;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {
  .project-ecothreads .eco-campaign-pair,
  .project-ecothreads .eco-campaign-pair.reverse {
    width: min(100%, 900px);
    grid-template-columns: 1fr;
  }

  .project-ecothreads .eco-campaign-pair figure:first-child a,
  .project-ecothreads .eco-campaign-pair figure:last-child a {
    aspect-ratio: 16 / 9;
  }

  .project-ecothreads .eco-digital-grid {
    width: min(100%, 900px);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .project-ecothreads .eco-campaign-world,
  .project-ecothreads .eco-digital-lux {
    padding: 80px 1.15rem;
  }

  .project-ecothreads .eco-campaign-pair,
  .project-ecothreads .eco-campaign-pair.reverse {
    width: 100%;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .project-ecothreads .eco-campaign-pair figure,
  .project-ecothreads .eco-digital-grid figure {
    padding: 0.45rem;
    border-radius: 21px;
  }

  .project-ecothreads .eco-campaign-pair a,
  .project-ecothreads .eco-campaign-pair img,
  .project-ecothreads .eco-digital-grid a,
  .project-ecothreads .eco-digital-grid img {
    border-radius: 15px;
  }

  .project-ecothreads .eco-campaign-pair figure:first-child a,
  .project-ecothreads .eco-campaign-pair figure:last-child a,
  .project-ecothreads .eco-digital-grid a {
    aspect-ratio: 16 / 10;
  }

  .project-ecothreads .eco-campaign-pair figcaption,
  .project-ecothreads .eco-digital-grid figcaption {
    font-size: 0.7rem;
  }
}

/* =========================================================
   FINAL SECTION
========================================================= */

.project-ecothreads .eco-final-lux {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: end;
  padding: 5vw;
  overflow: hidden;
  isolation: isolate;
  background: #080806;
}

.project-ecothreads .eco-final-lux > img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.84) contrast(1.04);
}

.project-ecothreads .eco-final-lux::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.86), transparent 62%),
    linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent 62%);
}

.project-ecothreads .eco-final-lux div {
  max-width: 900px;
  position: relative;
  z-index: 2;
}

.project-ecothreads .eco-final-lux p {
  font-family: "EB Garamond", serif;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.95;
  color: rgba(237, 230, 216, 0.88);
}

.project-ecothreads .eco-final-lux h2 {
  margin-top: 0.4rem;
  color: var(--eco-cream);
}

/* =========================================================
   HOVER POLISH
========================================================= */

.project-ecothreads figure img {
  transition:
    transform 0.8s cubic-bezier(.19, 1, .22, 1),
    filter 0.45s ease;
}

.project-ecothreads figure:hover img {
  transform: scale(1.018);
  filter: brightness(1.04) contrast(1.03);
}

/* =========================================================
   TABLET RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
  .project-ecothreads .eco-hero-new {
    min-height: 90vh;
    padding: 120px 1.25rem 66px;
  }

  .project-ecothreads .eco-meta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .project-ecothreads .eco-section {
    padding: 90px 1.25rem;
  }

  .project-ecothreads .eco-overview-new,
  .project-ecothreads .eco-type-new,
  .project-ecothreads .eco-process-board,
  .project-ecothreads .eco-campaign-pair {
    grid-template-columns: 1fr;
  }

  .project-ecothreads .eco-section-label {
    display: none;
  }

  .project-ecothreads .eco-type-display {
    min-height: 360px;
  }

  .project-ecothreads .eco-touchpoint-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .project-ecothreads .eco-touchpoint-grid figure,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(2) {
    grid-column: span 3;
  }

  .project-ecothreads .eco-touchpoint-grid figure.large {
    grid-column: span 6;
  }

  .project-ecothreads .eco-environment-lux-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE RESPONSIVE
========================================================= */

@media (max-width: 700px) {
  .project-ecothreads .eco-hero-new {
    min-height: 88vh;
    padding: 110px 1rem 58px;
  }

  .project-ecothreads .eco-hero-new::before {
    background:
      linear-gradient(
        to top,
        rgba(8, 8, 6, 0.96) 0%,
        rgba(8, 8, 6, 0.7) 45%,
        rgba(8, 8, 6, 0.22) 100%
      ),
      linear-gradient(
        to right,
        rgba(8, 8, 6, 0.82),
        rgba(8, 8, 6, 0.18)
      );
  }

  .project-ecothreads .eco-hero-overlay h1 {
    font-size: clamp(3.4rem, 17vw, 5.2rem);
    line-height: 0.88;
  }

  .project-ecothreads .eco-tagline {
    font-size: clamp(1.8rem, 9vw, 3rem);
  }

  .project-ecothreads .eco-meta-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .project-ecothreads .project-story-group {
    gap: 1.4rem;
    padding: 0.75rem 1rem;
  }

  .project-ecothreads .project-story-group span {
    font-size: 0.64rem;
  }

  .project-ecothreads .eco-section {
    padding: 78px 1rem;
  }

  .project-ecothreads .eco-section h2,
  .project-ecothreads .eco-final-lux h2 {
    font-size: clamp(2.45rem, 13vw, 4rem);
    line-height: 0.95;
  }

  .project-ecothreads .eco-feature-image,
  .project-ecothreads .eco-process-board figure,
  .project-ecothreads .eco-campaign-pair figure,
  .project-ecothreads .eco-touchpoint-grid figure,
  .project-ecothreads .eco-environment-lux-grid figure,
  .project-ecothreads .eco-digital-grid figure {
    padding: 0.45rem;
    border-radius: 20px;
  }

  .project-ecothreads .eco-feature-image a,
  .project-ecothreads .eco-process-board a,
  .project-ecothreads .eco-campaign-pair a,
  .project-ecothreads .eco-touchpoint-grid a,
  .project-ecothreads .eco-environment-lux-grid a,
  .project-ecothreads .eco-digital-grid a {
    border-radius: 15px;
  }

  .project-ecothreads .eco-feature-image img,
  .project-ecothreads .eco-process-board img,
  .project-ecothreads .eco-campaign-pair img,
  .project-ecothreads .eco-touchpoint-grid img,
  .project-ecothreads .eco-environment-lux-grid img,
  .project-ecothreads .eco-digital-grid img {
    border-radius: 15px;
  }

  .project-ecothreads .eco-feature-image a,
  .project-ecothreads .eco-process-board a,
  .project-ecothreads .eco-environment-lux-grid a {
    aspect-ratio: 16 / 10;
  }

  .project-ecothreads .eco-campaign-pair figure:first-child a {
    aspect-ratio: 4 / 5;
  }

  .project-ecothreads .eco-campaign-pair figure:last-child a {
    aspect-ratio: 16 / 9;
  }

  .project-ecothreads .eco-touchpoint-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .project-ecothreads .eco-touchpoint-grid figure,
  .project-ecothreads .eco-touchpoint-grid figure.large,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(2) {
    grid-column: 1;
  }

  .project-ecothreads .eco-touchpoint-grid figure.large a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(4) a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(5) a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(6) a {
    aspect-ratio: 16 / 10;
  }

  .project-ecothreads .eco-touchpoint-grid figure:nth-child(2) a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(3) a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(7) a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(8) a,
  .project-ecothreads .eco-touchpoint-grid figure:nth-child(9) a {
    aspect-ratio: 4 / 3;
  }

  .project-ecothreads .eco-type-display {
    min-height: 310px;
  }

  .project-ecothreads .eco-type-display::after {
    position: static;
    margin-top: 1.2rem;
    display: block;
  }

  .project-ecothreads .type-serif {
    margin-top: 1.6rem;
    font-size: clamp(3.4rem, 16vw, 5rem);
  }

  .project-ecothreads .type-sans {
    font-size: 0.62rem;
  }

  .project-ecothreads .eco-digital-grid {
    width: 100%;
  }

  .project-ecothreads .eco-digital-grid a {
    aspect-ratio: 4 / 5;
  }

  .project-ecothreads .eco-final-lux {
    min-height: 80vh;
    padding: 1rem;
    align-items: end;
  }
}

/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {
  .project-ecothreads .eco-hero-new {
    padding-top: 100px;
  }

  .project-ecothreads .eco-hero-overlay h1 {
    font-size: clamp(3rem, 17vw, 4.6rem);
  }

  .project-ecothreads .eco-section-heading {
    margin-bottom: 1.8rem;
  }

  .project-ecothreads .eco-section h2,
  .project-ecothreads .eco-final-lux h2 {
    font-size: clamp(2.3rem, 12.5vw, 3.7rem);
  }

  .project-ecothreads figcaption {
    font-size: 0.68rem;
  }
}

/* =========================================================
   LIGHTBOX SAFETY
========================================================= */

.project-ecothreads .lightbox {
  background: rgba(5, 5, 4, 0.92);
  backdrop-filter: blur(18px);
}

.project-ecothreads .lightbox img {
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ======================================================
   OVERALL PORTFOLIO RESPONSIVE PATCH
====================================================== */

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
}

.site-nav {
  width: 100%;
  max-width: 100vw;
}

main {
  width: 100%;
  overflow-x: hidden;
}

section {
  max-width: 100vw;
}

.section,
.project-section,
.case-section {
  padding-left: clamp(1rem, 5vw, 5rem);
  padding-right: clamp(1rem, 5vw, 5rem);
}

.section-heading,
.project-heading,
.case-heading {
  max-width: 980px;
}

.section-heading h1,
.section-heading h2,
.project-heading h1,
.project-heading h2,
.case-heading h1,
.case-heading h2 {
  text-wrap: balance;
  letter-spacing: -0.015em;
  line-height: 1.02;
}

.section-heading p,
.project-heading p,
.case-heading p {
  max-width: 680px;
  line-height: 1.72;
}

/* keep images from becoming crazy tall */
figure img,
.image-card img,
.project-card img,
.case-image img,
.mockup-card img {
  max-height: 78vh;
  object-fit: contain;
}

/* better cards */
figure,
.image-card,
.project-card,
.case-image,
.mockup-card {
  overflow: hidden;
}

/* desktop image grids */
.project-grid,
.work-grid,
.case-grid,
.gallery-grid {
  align-items: start;
}

/* clickable images feel cleaner */
.lightbox-trigger {
  display: block;
  cursor: none;
}

.lightbox-trigger img {
  transition: transform 0.6s ease, filter 0.6s ease;
}

.lightbox-trigger:hover img {
  transform: scale(1.015);
  filter: brightness(1.03);
}

/* tablets */
@media (max-width: 1100px) {
  .section,
  .project-section,
  .case-section {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .project-grid,
  .work-grid,
  .case-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}

/* mobile */
@media (max-width: 850px) {
  .site-nav {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .nav-logo img {
    max-width: 58px;
    height: auto;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .section,
  .project-section,
  .case-section {
    padding: 72px 1.2rem;
  }

  .section-heading,
  .project-heading,
  .case-heading {
    max-width: 100%;
  }

  .section-heading h1,
  .section-heading h2,
  .project-heading h1,
  .project-heading h2,
  .case-heading h1,
  .case-heading h2 {
    font-size: clamp(2.4rem, 11vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
  }

  .section-heading p,
  .project-heading p,
  .case-heading p {
    font-size: 0.95rem;
  }

  .project-grid,
  .work-grid,
  .case-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  figure img,
  .image-card img,
  .project-card img,
  .case-image img,
  .mockup-card img {
    width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
  }

  figure,
  .image-card,
  .project-card,
  .case-image,
  .mockup-card {
    border-radius: 20px;
  }

  .cursor {
    display: none;
  }

  .lightbox-trigger {
    cursor: pointer;
  }
}

/* small phones */
@media (max-width: 520px) {
  .section,
  .project-section,
  .case-section {
    padding: 62px 1rem;
  }

  .section-heading h1,
  .section-heading h2,
  .project-heading h1,
  .project-heading h2,
  .case-heading h1,
  .case-heading h2 {
    font-size: clamp(2.1rem, 12vw, 3.5rem);
  }

  .eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.13em;
  }

  figure img,
  .image-card img,
  .project-card img,
  .case-image img,
  .mockup-card img {
    max-height: 66vh;
  }

  .site-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .footer-top h2 {
    font-size: clamp(2rem, 11vw, 3.2rem);
    line-height: 1;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1.2rem;
    align-items: flex-start;
  }
}

/* LIGHTBOX */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3vw;
  background: rgba(8, 8, 6, 0.92);
  backdrop-filter: blur(18px);
}

.lightbox.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
}

.lightbox.active img {
  transform: scale(1);
}

.lightbox-close {
  position: fixed;
  top: 22px;
  right: 30px;
  z-index: 1000000;
  border: none;
  background: transparent;
  color: white;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover {
  opacity: 1;
}

.lightbox-trigger {
  cursor: zoom-in;
  display: block;
}

.lightbox-trigger img {
  transition:
    transform 0.6s cubic-bezier(.19,1,.22,1),
    filter 0.4s ease;
}

.lightbox-trigger:hover img {
  transform: scale(1.015);
  filter: brightness(1.03);
}

/* =========================================================
   ACCESSIBILITY FIX — LOADER CONTRAST
   Paste at the VERY BOTTOM of style.css
========================================================= */

.loader {
  background: #080706 !important;
}

.loader[aria-hidden="true"] .loader-inner p {
  color: #fff8ea !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* hide loader fully after it finishes */
.loader.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}