/* ============================================================
   PROJECT PAGE — STEAMLINE
   Charlie Johnson Portfolio
   Dreamweaver-compatible stylesheet
   Breakpoints:
     ≥1728px  Cap — content centred, max-width locked
     1440px   MacBook Pro 16"
     1024px   iPad Pro 13"
     767px    Mobile
============================================================ */

/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  --ink:       #0a0a0a;
  --ink-s:     #333333;
  --ink-m:     #888888;
  --rule:      #e0e0e0;
  --surface:   #f5f5f3;
  --nav-bg:    #ebebeb;
  --white:     #ffffff;
  --img:       #9c9c9c;

  /* Spacing */
  --M:         100px;   /* page margin left/right */
  --GAP:       10px;    /* gap between images */
  --SEC:       70px;    /* gap after a section row, before next HR or title */
  --TXT-GAP:   40px;    /* gap HR→title or title→body */

  /* Max content width — locks at 1728px viewport */
  --MAX:       1528px;  /* 1728 - 2×100 margins */
}

/* ============================================================
   RESET
============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--surface);
  color: var(--ink);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1;
  max-width: 1728px;    /* hard cap — centred on ultra-wide */
  margin-left: auto;
  margin-right: auto;
}

img  { display: block; max-width: 100%; height: auto; }
a    { text-decoration: none; color: inherit; }

/* ============================================================
   NAV
============================================================ */
header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 52px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--rule);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 var(--M);
}

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.nav-logo {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
}

.nav-links {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2.2rem;
}

.nav-links a {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  -webkit-transition: color .15s ease;
          transition: color .15s ease;
}

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

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  width: 100%;
  background: var(--img);
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  display: block;
}

/* Placeholder used before real image is placed */
.hero-img-placeholder {
  width: 100%;
  height: 580px;
  background: var(--img);
  display: block;
}

.hero-gradient {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 260px;
  background: -webkit-linear-gradient(bottom, rgba(0,0,0,.72) 0%, transparent 100%);
  background:         linear-gradient(to top,  rgba(0,0,0,.72) 0%, transparent 100%);
}

.hero-title {
  position: absolute;
  bottom: 0;
  left: var(--M);
  font-size: 112px;
  font-size: clamp(72px, 7.5vw, 112px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.88;
  color: #fff;
  padding-bottom: 32px;
}

/* ============================================================
   META ROW
============================================================ */
.meta-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}

.meta-field {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 12px 20px 12px 0;
  border-right: 1px solid var(--rule);
}

.meta-field:first-child { padding-left: var(--M); }
.meta-field:last-child  { border-right: none; }

.meta-label {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-m);
  margin-bottom: 5px;
}

.meta-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}

/* ============================================================
   PAGE SHELL
============================================================ */
main { padding: 0; }

/* ============================================================
   SECTION WRAPPER
============================================================ */
.section {
  padding: 0 var(--M);
}

.section--flush { padding: 0; }

/* HR between sections */
.sec-rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--SEC) var(--M) 0;
}

/* Section label — tiny uppercase mono above title */
.sec-label {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-m);
  margin-bottom: 16px;
}

/* Section title */
.sec-title {
  font-size: 76px;
  font-size: clamp(52px, 5.5vw, 76px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.88;
  color: var(--ink);
  margin-bottom: var(--TXT-GAP);
}

/* Body text */
.body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-s);
  letter-spacing: -0.01em;
}

/* ============================================================
   IMAGE PLACEHOLDER SYSTEM
   Replace each .ph div with an <img> tag when assets are ready.
   data-label describes the shot type for the photographer.
============================================================ */
.ph {
  position: relative;
  display: block;
  width: 100%;
  background: #c8c8c6;
  overflow: hidden;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Grain overlay */
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 1;
}

/* Shot-type label — bottom-left */
.ph::after {
  content: attr(data-label);
  position: absolute;
  bottom: 14px;
  left: 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,0,0,.38);
  z-index: 2;
  line-height: 1;
}

/* Aspect ratio variants */
.ph--hero   { aspect-ratio: 16 / 7; }
.ph--land   { aspect-ratio: 4 / 3; }
.ph--port   { aspect-ratio: 3 / 4; }
.ph--sq     { aspect-ratio: 1 / 1; }
.ph--wide   { aspect-ratio: 21 / 9; }
.ph--cinema { aspect-ratio: 16 / 9; }

/* Tone variants */
.ph--light  { background: #d4d4d2; }
.ph--mid    { background: #b8b8b6; }
.ph--dark   { background: #8a8a88; }

/* Fixed height overrides — for flex rows where aspect-ratio won't apply */
.ph--h460   { height: 460px; }
.ph--h500   { height: 500px; }
.ph--h420   { height: 420px; }
.ph--h440   { height: 440px; }
.ph--h380   { height: 380px; }
.ph--h360   { height: 360px; }
.ph--h340   { height: 340px; }
.ph--h315   { height: 315px; }
.ph--h520   { height: 520px; }
.ph--h640   { height: 640px; }

/* Crosshair registration mark */
.ph-cross {
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  z-index: 2;
  pointer-events: none;
}

.ph-cross::before,
.ph-cross::after {
  content: '';
  position: absolute;
  background: rgba(0,0,0,.2);
}

.ph-cross::before { width: 1px; height: 100%; left: 50%; top: 0; }
.ph-cross::after  { height: 1px; width: 100%; top: 50%; left: 0; }

/* Legacy fallback */
.img-ph {
  background: #c8c8c6;
  display: block;
  width: 100%;
}

/* ============================================================
   SECTION — OVERVIEW
   image right 65% | text left, bottom-aligned
============================================================ */
.overview-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--GAP);
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.overview-text {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(35% - var(--GAP) / 2);
          flex: 0 0 calc(35% - var(--GAP) / 2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-bottom: 4px;
}

.overview-meta {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-m);
  line-height: 1.6;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}

/* ============================================================
   SECTION — CONFIGURATIONS
   image left 66% | text right, bottom-aligned
============================================================ */
.conf-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--GAP);
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.conf-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-bottom: 4px;
}

/* ============================================================
   SECTION — MARKET RESEARCH
============================================================ */
.mkt-stats-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}

.mkt-stat {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 24px 28px 24px 0;
  border-right: 1px solid var(--rule);
}

.mkt-stat:first-child { padding-left: 0; }
.mkt-stat:last-child  { border-right: none; padding-right: 0; }

.mkt-stat-num {
  font-size: 52px;
  font-size: clamp(36px, 3.5vw, 52px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 8px;
}

.mkt-stat-desc {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-m);
  line-height: 1.5;
}

/* Pull-quote findings */
.mkt-findings {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.mkt-finding {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity .6s ease, -webkit-transform .6s ease;
          transition: opacity .6s ease, transform .6s ease;
}

.mkt-finding.visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.mkt-finding:first-child { border-top: 1px solid var(--rule); }

.mkt-finding-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-m);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 48px;
          flex: 0 0 48px;
  padding-top: 3px;
}

.mkt-finding-text {
  font-size: 34px;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--ink);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.mkt-finding-text strong { font-weight: 600; }

.mkt-img-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--GAP);
  margin-top: 40px;
}

/* ============================================================
   SECTION — USER JOURNEY
   image left 63% | title top + body bottom right
============================================================ */
.uj-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--GAP);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.uj-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}

.uj-title {
  font-size: 52px;
  font-size: clamp(36px, 3.8vw, 52px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.88;
  color: var(--ink);
}

/* ============================================================
   HOW MIGHT WE — full-bleed dark panel (doubled height)
============================================================ */
.hmw {
  background: var(--ink);
  padding: 160px var(--M) 180px;
  margin-top: var(--SEC);
}

.hmw-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #555;
  display: block;
  margin-bottom: 24px;
}

.hmw-question {
  font-size: 120px;
  font-size: clamp(72px, 8vw, 120px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.88;
  color: #fff;
  margin-bottom: 48px;
}

.hmw-answer {
  font-size: 32px;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: rgba(255,255,255,.5);
  max-width: 780px;
}

/* ============================================================
   SECTION — IDEATION
   text left 28% | image right 72%, bottom-aligned
============================================================ */
.ideation-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--GAP);
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.ideation-text {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(28% - var(--GAP) / 2);
          flex: 0 0 calc(28% - var(--GAP) / 2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-bottom: 4px;
}

/* ============================================================
   SECTION — FORM DECISIONS
   title + text left 35% | image right 65%, bottom-aligned
============================================================ */
.form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--GAP);
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.form-text {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(35% - var(--GAP) / 2);
          flex: 0 0 calc(35% - var(--GAP) / 2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-bottom: 4px;
}

/* ============================================================
   SECTION — CARDBOARD PROTOTYPING
   3 equal square images
============================================================ */
.cardboard-imgs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--GAP);
  margin-top: var(--TXT-GAP);
}

/* ============================================================
   SECTION — FINAL DESIGN type moment
============================================================ */
.final-design-band {
  background: var(--nav-bg);
  padding: 32px var(--M) 36px;
  margin-top: var(--SEC);
  overflow: hidden;
}

.final-design-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-m);
  display: block;
  margin-bottom: 14px;
}

.final-design-title {
  font-size: 160px;
  font-size: clamp(100px, 11vw, 160px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.86;
  color: var(--ink);
  /* Wipe-in animation */
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  -webkit-transition: -webkit-clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
          transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.final-design-title.revealed {
  -webkit-clip-path: inset(0 0% 0 0);
          clip-path: inset(0 0% 0 0);
}

/* Full-bleed image below the type band */
.final-design-img {
  width: 100%;
  height: 640px;
  background: var(--img);
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
  opacity: 0;
  -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity .8s ease;
          transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity .8s ease;
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}

.final-design-img.revealed {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

/* ============================================================
   SECTION — THE SOLUTION
   text left 28% | image right
============================================================ */
.solution-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--GAP);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.solution-text {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(28% - var(--GAP) / 2);
          flex: 0 0 calc(28% - var(--GAP) / 2);
}

.solution-detail-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--GAP);
  margin-top: var(--GAP);
}

/* ============================================================
   SECTION — IN CONTEXT
   large left 56% | 2 stacked right
============================================================ */
.context-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--GAP);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.context-stack {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--GAP);
}

/* ============================================================
   FOOTER
============================================================ */
footer {
  margin-top: var(--SEC);
  border-top: 1px solid var(--rule);
  padding: 22px var(--M);
  background: var(--nav-bg);
  font-size: 11px;
  font-weight: 300;
  color: var(--ink-m);
}

/* ============================================================
   SCROLL REVEAL ANIMATION
   JS adds .visible when element enters viewport
============================================================ */
.reveal {
  opacity: 0;
  -webkit-transform: translateY(16px);
          transform: translateY(16px);
  -webkit-transition: opacity .65s ease, -webkit-transform .65s ease;
          transition: opacity .65s ease, transform .65s ease;
  -webkit-transition-delay: var(--d, 0ms);
          transition-delay: var(--d, 0ms);
}

.reveal.visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* ============================================================
   ≥ 1728px — HARD CAP
   Body already max-width: 1728px + centred.
   Internal margins locked — nothing stretches wider.
============================================================ */
@media screen and (min-width: 1728px) {
  :root {
    --M:       100px;
    --SEC:     70px;
    --TXT-GAP: 40px;
  }

  .hero-title        { font-size: 112px; }
  .hmw-question      { font-size: 120px; }
  .final-design-title{ font-size: 160px; }
  .sec-title         { font-size: 76px; }
  .mkt-stat-num      { font-size: 52px; }
  .mkt-finding-text  { font-size: 34px; }
  .hmw-answer        { font-size: 32px; }
  .uj-title          { font-size: 52px; }
}

/* ============================================================
   1440px — MacBook Pro 16"
   Slightly tighter margins, type scale holds via clamp
============================================================ */
@media screen and (max-width: 1440px) {
  :root {
    --M:       80px;
    --SEC:     64px;
    --TXT-GAP: 36px;
  }

  .hero-img,
  .hero-img-placeholder { height: 520px; }

  .ph--h500 { height: 440px; }
  .ph--h520 { height: 460px; }
  .ph--h640 { height: 560px; }
  .ph--h420 { height: 380px; }
  .ph--h460 { height: 420px; }
  .ph--h440 { height: 400px; }

  .final-design-img  { height: 560px; }
  .ph--h315 { height: 275px; }
}

/* ============================================================
   1024px — iPad Pro 13"
   Two-column layouts collapse to stacked where needed.
   Type scales down via clamp but stays impactful.
============================================================ */
@media screen and (max-width: 1024px) {
  :root {
    --M:       48px;
    --SEC:     56px;
    --TXT-GAP: 32px;
  }

  /* NAV */
  .nav-links { gap: 1.5rem; }
  .nav-links a { font-size: 12px; }

  /* HERO */
  .hero-img,
  .hero-img-placeholder { height: 440px; }
  .hero-title { font-size: clamp(56px, 7vw, 88px); padding-bottom: 28px; }

  /* OVERVIEW — stack vertically */
  .overview-row        { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .overview-text       { -webkit-box-flex: unset; -ms-flex: unset; flex: unset; width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-bottom: 24px; }
  .overview-text .ph,
  .overview-row .ph    { width: 100%; -webkit-box-flex: unset; -ms-flex: unset; flex: unset; height: 400px; }

  /* CONFIGURATIONS — stack */
  .conf-row            { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .conf-row .ph        { width: 100%; -webkit-box-flex: unset; -ms-flex: unset; flex: unset; height: 380px; }
  .conf-text           { -webkit-box-flex: unset; -ms-flex: unset; flex: unset; width: 100%; padding-top: 24px; padding-bottom: 0; }

  /* MARKET RESEARCH — 2-col stats */
  .mkt-stats-row       { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .mkt-stat            { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; border-bottom: 1px solid var(--rule); }
  .mkt-stat:nth-child(2) { border-right: none; padding-right: 0; }
  .mkt-stat:nth-child(3) { border-bottom: none; padding-left: 0; padding-right: 28px; border-right: 1px solid var(--rule); }
  .mkt-stat:nth-child(4) { border-right: none; border-bottom: none; padding-right: 0; }
  .mkt-finding-text    { font-size: clamp(20px, 2.8vw, 28px); }
  .mkt-img-row .ph     { aspect-ratio: 4/3; height: auto; }

  /* USER JOURNEY — stack */
  .uj-row              { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .uj-row .ph          { width: 100%; -webkit-box-flex: unset; -ms-flex: unset; flex: unset; height: 380px; }
  .uj-text             { -ms-flex-item-align: auto; align-self: auto; padding-top: 28px; }
  .uj-title            { font-size: clamp(36px, 5vw, 52px); }

  /* HMW */
  .hmw                 { padding: 100px var(--M) 120px; }
  .hmw-question        { font-size: clamp(60px, 7vw, 96px); }
  .hmw-answer          { font-size: clamp(18px, 2.4vw, 26px); }

  /* IDEATION — stack */
  .ideation-row        { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .ideation-text       { -webkit-box-flex: unset; -ms-flex: unset; flex: unset; width: 100%; padding-bottom: 24px; }
  .ideation-row .ph    { width: 100%; height: 400px; }

  /* FORM DECISIONS — stack */
  .form-row            { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .form-text           { -webkit-box-flex: unset; -ms-flex: unset; flex: unset; width: 100%; padding-bottom: 24px; }
  .form-row .ph        { width: 100%; height: 380px; }

  /* CARDBOARD */
  .cardboard-imgs .ph--sq { aspect-ratio: 1/1; }

  /* FINAL DESIGN */
  .final-design-title  { font-size: clamp(80px, 10vw, 130px); }
  .final-design-img    { height: 480px; }

  /* SOLUTION — stack */
  .solution-row        { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .solution-text       { -webkit-box-flex: unset; -ms-flex: unset; flex: unset; width: 100%; margin-bottom: 24px; }
  .solution-row .ph    { width: 100%; height: 420px; }

  /* IN CONTEXT — stack */
  .context-row         { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .context-row > .ph   { width: 100%; -webkit-box-flex: unset; -ms-flex: unset; flex: unset; height: 480px; }
  .context-stack       { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
  .context-stack .ph   { height: 260px; }

  /* HEIGHT OVERRIDES */
  .ph--h500, .ph--h520 { height: 420px; }
  .ph--h460, .ph--h440 { height: 380px; }
  .ph--h640            { height: 480px; }
  .ph--h315            { height: 260px; }
  .ph--h420            { height: 360px; }
}

/* ============================================================
   767px — MOBILE
   Single column. Type pulls back further.
   Images full-width aspect-ratio driven.
============================================================ */
@media screen and (max-width: 767px) {
  :root {
    --M:       20px;
    --SEC:     48px;
    --TXT-GAP: 28px;
    --GAP:     8px;
  }

  /* NAV */
  header { height: auto; min-height: 48px; padding: 10px var(--M); }
  .nav-links { gap: 1rem; }
  .nav-links a,
  .nav-logo  { font-size: 12px; }

  /* HERO */
  .hero-img,
  .hero-img-placeholder { height: 280px; }
  .hero-gradient        { height: 160px; }
  .hero-title           { font-size: clamp(40px, 10vw, 64px); padding-bottom: 20px; }

  /* META ROW — scrollable */
  .meta-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .meta-row::-webkit-scrollbar { display: none; }
  .meta-field { -webkit-box-flex: 0; -ms-flex: 0 0 130px; flex: 0 0 130px; padding-left: var(--M); }
  .meta-field:first-child { padding-left: var(--M); }

  /* SECTION TITLE */
  .sec-title { font-size: clamp(36px, 9vw, 52px); margin-bottom: 24px; }

  /* OVERVIEW */
  .overview-row        { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
  .overview-text       { padding-bottom: 0; padding-top: 20px; }
  .overview-row .ph    { height: auto; aspect-ratio: 4/3; }
  .overview-meta       { margin-bottom: 16px; }

  /* CONFIGURATIONS */
  .conf-row            { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .conf-row .ph        { height: auto; aspect-ratio: 4/3; }
  .conf-text           { padding-top: 20px; }

  /* MARKET RESEARCH */
  .mkt-stats-row       { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .mkt-stat            { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 16px 12px 16px 0; }
  .mkt-stat:nth-child(even) { border-right: none; padding-right: 0; padding-left: 12px; }
  .mkt-stat-num        { font-size: clamp(28px, 7vw, 40px); }
  .mkt-finding         { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; padding: 20px 0; }
  .mkt-finding-num     { -webkit-box-flex: unset; -ms-flex: unset; flex: unset; }
  .mkt-finding-text    { font-size: clamp(18px, 5vw, 24px); }
  .mkt-img-row         { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .mkt-img-row .ph     { height: auto; aspect-ratio: 4/3; }

  /* USER JOURNEY */
  .uj-row              { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .uj-row .ph          { height: auto; aspect-ratio: 4/3; }
  .uj-text             { padding-top: 20px; }
  .uj-title            { font-size: clamp(30px, 8vw, 44px); margin-bottom: 16px; }

  /* HMW */
  .hmw                 { padding: 64px var(--M) 80px; }
  .hmw-question        { font-size: clamp(44px, 10vw, 72px); margin-bottom: 28px; }
  .hmw-answer          { font-size: clamp(16px, 4.5vw, 22px); max-width: 100%; }

  /* IDEATION */
  .ideation-row        { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .ideation-text       { padding-bottom: 20px; }
  .ideation-row .ph    { height: auto; aspect-ratio: 4/3; }

  /* FORM DECISIONS */
  .form-row            { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .form-text           { padding-bottom: 20px; }
  .form-row .ph        { height: auto; aspect-ratio: 4/3; }

  /* CARDBOARD — stack vertically */
  .cardboard-imgs      { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .cardboard-imgs .ph  { aspect-ratio: 4/3; height: auto; }

  /* FINAL DESIGN */
  .final-design-band   { padding: 24px var(--M) 28px; }
  .final-design-title  { font-size: clamp(56px, 13vw, 96px); }
  .final-design-img,
  .ph.final-design-img { height: auto; aspect-ratio: 16/9; }

  /* SOLUTION */
  .solution-row        { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .solution-text       { margin-bottom: 20px; }
  .solution-row .ph    { height: auto; aspect-ratio: 4/3; }
  .solution-detail-row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .solution-detail-row .ph { aspect-ratio: 4/3; height: auto; }

  /* IN CONTEXT */
  .context-row         { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .context-row > .ph   { height: auto; aspect-ratio: 4/3; -webkit-box-flex: unset; -ms-flex: unset; flex: unset; width: 100%; }
  .context-stack       { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .context-stack .ph   { height: auto; aspect-ratio: 4/3; }

  /* SOLUTION PULL QUOTES */
  .solution-pull p     { font-size: clamp(20px, 5.5vw, 28px) !important; padding-top: 20px !important; padding-bottom: 20px !important; }

  /* FOOTER */
  footer               { padding: 18px var(--M); }

  /* HEIGHT RESETS — let aspect-ratio take over on mobile */
  .ph--h460, .ph--h500, .ph--h420,
  .ph--h440, .ph--h520, .ph--h640,
  .ph--h380, .ph--h360, .ph--h340,
  .ph--h315                         { height: auto; }
}