/* ============================================================
   Katerina Sheludko — portfolio
   Implemented from Figma "Kate's Sandbox 2.0" (node 1755:12160)
   Coordinate system: the original canvas is 1440px wide; every
   dimension is expressed as calc(var(--u) * N) where N is the px
   value in Figma, so the whole composition scales fluidly.
   Below 768px each section switches to a stacked mobile layout.
   ============================================================ */

@font-face {
  font-family: "Astronout";
  src: url("../assets/fonts/Astronout.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 1 design px. Scales down fluidly below 1440px; capped at 1px so the
     layout never grows past the Figma canvas width — wider screens get
     the design centered instead (max-width on .section). */
  --u: min(calc(100vw / 1440), 1px);

  --color-ink: #000000;
  --color-ink-soft: #1a1a1a;
  --color-accent: #e22d27;
  --color-paper: #ffffff;
  --color-hairline: #ececec;

  --font-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Reddit Mono", "SFMono-Regular", Menlo, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, ul, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Utility: small mono eyebrow labels */
.mono-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--u) * 11.4);
  letter-spacing: 0.1em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.accent { color: var(--color-accent); }

.section { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; }

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

.hero { height: calc(var(--u) * 2012); }

.hero-grid { position: absolute; inset: 0; pointer-events: none; }
.hero-grid i {
  position: absolute;
  top: 0;
  left: calc(var(--u) * var(--x));
  width: 1px;
  height: calc(var(--u) * 1805);
  background: var(--color-hairline);
}

.hero-title {
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
  color: var(--color-ink);
}

/* Load moment: title fades in line by line (opacity only, transforms stay intact) */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.hero-line-1 { animation: fade-in 0.9s ease-out both; }
.hero-line-2 { animation: fade-in 0.9s ease-out 0.15s both; }
.hero-line-3 { animation: fade-in 0.9s ease-out 0.3s both; }
.hero-tag    { animation: fade-in 0.9s ease-out 0.5s both; }
.hero-line { position: absolute; white-space: nowrap; transform: translateY(-50%); }
.hero-line-1 { left: calc(var(--u) * 63);  top: calc(var(--u) * 265.7); font-size: calc(var(--u) * 249.5); }
.hero-line-2 { left: calc(var(--u) * 63);  top: calc(var(--u) * 504.3); font-size: calc(var(--u) * 222); }
.hero-line-3 { left: calc(var(--u) * 194); top: calc(var(--u) * 749.7); font-size: calc(var(--u) * 222); }

.hero-tag {
  position: absolute;
  transform: translateY(-50%);
  font-size: calc(var(--u) * 33.6);
  line-height: 1;
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.hero-tag-brand       { left: calc(var(--u) * 773); top: calc(var(--u) * 444.5); }
.hero-tag-operations  { left: calc(var(--u) * 804); top: calc(var(--u) * 484.5); }
.hero-tag-innovations { left: calc(var(--u) * 725); top: calc(var(--u) * 565.3); }

.hero-photo { position: absolute; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo-main  { left: calc(var(--u) * 963);  top: calc(var(--u) * 1091); width: calc(var(--u) * 437); height: calc(var(--u) * 718); }
.hero-photo-eye   { left: calc(var(--u) * 40); top: calc(var(--u) * 1137); width: calc(var(--u) * 152); height: calc(var(--u) * 194); }
.hero-photo-smile { left: calc(var(--u) * 40); top: calc(var(--u) * 1452); width: calc(var(--u) * 152); height: calc(var(--u) * 194); }

.hero-quote {
  position: absolute;
  left: calc(var(--u) * 340);
  top: calc(var(--u) * 1147);
  width: calc(var(--u) * 581);
  font-size: calc(var(--u) * 32);
  line-height: calc(var(--u) * 50.7);
}
.script {
  font-family: "Astronout", cursive;
  font-size: calc(var(--u) * 100);
  line-height: 1;
  color: var(--color-accent);
  white-space: nowrap;
}

.hero-script {
  position: absolute;
  left: calc(var(--u) * 337);  /* 677 - 340 */
  top: calc(var(--u) * 121);   /* 1268 - 1147 */
}

.hero-name {
  position: absolute;
  left: calc(var(--u) * 340);
  top: calc(var(--u) * 1541.5);
  font-size: calc(var(--u) * 48);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: calc(var(--u) * 48);
}
.hero-name-line { display: block; }

.hero-bio {
  position: absolute;
  left: calc(var(--u) * 609);
  top: calc(var(--u) * 1546);
  width: calc(var(--u) * 319);
  font-size: calc(var(--u) * 14);
  line-height: calc(var(--u) * 26);
}

.hero-label { position: absolute; top: calc(var(--u) * 1782); white-space: nowrap; }
.hero-label-role  { left: calc(var(--u) * 340); }
.hero-label-scope { left: calc(var(--u) * 609); }

/* ============================================================
   FRAME HEAD (repeating section header pattern)
   ============================================================ */

.frame-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 125.33) calc(var(--u) * 120.32);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--u) * 13.79);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}

.h2 {
  font-weight: 800;
  font-size: calc(var(--u) * 110);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--color-ink-soft);
}
.h2-line { display: block; }
.h2-80 { font-size: calc(var(--u) * 80); }
.h2-indent { padding-left: calc(var(--u) * 250.66); }

.h2-blinky { padding: 0 calc(var(--u) * 80); line-height: 1.1; }
.h2-blinky-i1 { padding-left: calc(var(--u) * 240); }
.h2-blinky-i2 { padding-left: calc(var(--u) * 260); }

.lede-row {
  display: flex;
  gap: calc(var(--u) * 60.16);
  padding-top: calc(var(--u) * 40.1);
  width: 100%;
}
.lede-aside {
  flex: 1 0 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--u) * 13.79);
  letter-spacing: 0.06em;
  color: #8b8880;
}
.lede-text {
  font-family: "Inter", var(--font-sans);
  font-size: calc(var(--u) * 20);
  line-height: 1.65;
  color: var(--color-ink-soft);
  width: calc(var(--u) * 702);
}
.lede-row-blinky { margin-top: calc(var(--u) * 112); }
.lede-row-blinky .lede-aside-right {
  flex: 0 0 calc(var(--u) * 346);
  text-align: right;
  color: var(--color-accent);
}
.lede-text-lg { font-size: calc(var(--u) * 22.56); width: calc(var(--u) * 631); }

.cols-3 {
  display: flex;
  gap: calc(var(--u) * 40);
  padding-top: calc(var(--u) * 48);
  width: 100%;
}
.cols-3 .col {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 14);
}
.col-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--u) * 11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.col-text {
  font-family: "Inter", var(--font-sans);
  font-size: calc(var(--u) * 20);
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: calc(var(--u) * 355);
}

/* ============================================================
   CHAPTER 1 — collage
   ============================================================ */

.ch1-collage {
  margin-left: calc(var(--u) * 108);
  width: calc(var(--u) * 1223);
}

.carousel { overflow: hidden; touch-action: pan-y; }
.carousel-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}
.carousel-slide { flex: 0 0 100%; aspect-ratio: 1223 / 1026; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
/* slide 2 is squarer than the viewport: contain keeps all content, letterbox is white-on-white */
.carousel-slide[data-slide="1"] img { object-fit: contain; }

.carousel-dots {
  display: flex;
  gap: calc(var(--u) * 30);
  margin: calc(var(--u) * 68) 0 calc(var(--u) * 269) calc(var(--u) * 654);
}
.carousel-dots .dot {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e8e8e8;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.carousel-dots .dot:hover { background: #d4d4d4; }
.carousel-dots .dot-active, .carousel-dots .dot-active:hover { background: var(--color-accent); }

/* ============================================================
   CHAPTER 2 — stats collage
   ============================================================ */

.ch2-stats { position: relative; height: calc(var(--u) * 1925); }

.ch2-rules { position: absolute; inset: 0; pointer-events: none; }
.ch2-rules i {
  position: absolute;
  top: calc(var(--u) * -321);
  left: calc(var(--u) * var(--x));
  width: 1px;
  height: calc(var(--u) * 2394);
  background: var(--color-hairline);
}

.ch2-stats > article, .ch2-stats > img, .ch2-stats > .stat { position: absolute; }

.craft-card {
  left: calc(var(--u) * 82);
  top: 0;
  width: calc(var(--u) * 1353);
  display: flex;
  gap: calc(var(--u) * 164);
  padding: calc(var(--u) * 64) calc(var(--u) * 159) calc(var(--u) * 64) calc(var(--u) * 56);
  border-radius: calc(var(--u) * 8);
  background: var(--color-paper);
}
.craft-card-label { flex: 0 0 calc(var(--u) * 240); }
.craft-card-text {
  font-family: "Inter", var(--font-sans);
  font-weight: 500;
  font-size: calc(var(--u) * 38);
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--color-ink-soft);
}

.ch2-img-massage   { left: calc(var(--u) * 124); top: calc(var(--u) * 444); width: calc(var(--u) * 165); }
.ch2-img-lymphatic { left: calc(var(--u) * 309); top: calc(var(--u) * 446); width: calc(var(--u) * 166.4); }

.stat { display: block; }
.stat-num {
  font-weight: 600;
  font-size: calc(var(--u) * 64);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--color-accent);
  white-space: nowrap;
}
.stat-sub {
  font-weight: 600;
  font-size: calc(var(--u) * 46);
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--color-ink);
  white-space: nowrap;
}
.stat-caption {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--u) * 10.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--color-accent);
  white-space: nowrap;
}
.stat-text {
  position: absolute;
  font-family: "Inter", var(--font-sans);
  font-weight: 500;
  font-size: calc(var(--u) * 20);
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--color-ink-soft);
}

.stat-120 { left: calc(var(--u) * 542); top: calc(var(--u) * 442); width: calc(var(--u) * 358); }
.stat-120 .stat-caption { top: calc(var(--u) * 149); }
.stat-120 .stat-text { top: calc(var(--u) * 190); width: calc(var(--u) * 358); }

.stat-ltv { left: calc(var(--u) * 984); top: calc(var(--u) * 634); width: calc(var(--u) * 297); }
.stat-ltv .stat-caption { top: calc(var(--u) * 148); }
.stat-ltv .stat-text { top: calc(var(--u) * 219); width: calc(var(--u) * 297); }

.stat-creatives { left: calc(var(--u) * 120); top: calc(var(--u) * 1188); width: calc(var(--u) * 422); }
.stat-creatives .stat-caption { top: calc(var(--u) * 152); }
.stat-creatives .stat-text { top: calc(var(--u) * 188); width: calc(var(--u) * 422); }

.ch2-arrow { left: calc(var(--u) * 609); top: calc(var(--u) * 1294); width: calc(var(--u) * 38); }

.ch2-stories { left: calc(var(--u) * 652); top: calc(var(--u) * 1008); width: calc(var(--u) * 748); }

/* ============================================================
   CHAPTER 3 — Blinky
   ============================================================ */

#chapter-1 { margin-top: calc(var(--u) * 131); }

#chapter-3 { height: calc(var(--u) * 1717); }
#chapter-3 > figure, #chapter-3 > a, #chapter-3 > img { position: absolute; }

.blinky-video {
  left: calc(var(--u) * 664);
  top: calc(var(--u) * 347);
  width: calc(var(--u) * 326);
  height: calc(var(--u) * 228);
  border-radius: calc(var(--u) * 8);
  overflow: hidden;
}
.blinky-video img { width: 100%; height: 100%; object-fit: cover; }

.blinky-pill {
  left: calc(var(--u) * 1150);
  top: calc(var(--u) * 512);
  display: flex;
  align-items: center;
  height: calc(var(--u) * 31);
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 16);
  background: var(--color-accent);
  color: #fff;
  font-size: calc(var(--u) * 12);
  text-decoration: none;
  white-space: nowrap;
}
.blinky-pill:hover { background: #c9241f; }

.blinky-circle { left: calc(var(--u) * 1082); top: calc(var(--u) * 554); width: calc(var(--u) * 86); }
.blinky-script { position: absolute; left: calc(var(--u) * 679); top: calc(var(--u) * 844); }
.blinky-collage { left: calc(var(--u) * 180); top: calc(var(--u) * 1023); width: calc(var(--u) * 1082); }
.blinky-collage img { width: 100%; }

/* ============================================================
   AWARD CAMPAIGN
   ============================================================ */

.campaign { padding: 0 calc(var(--u) * 125.33); }

.lede-row-campaign { justify-content: flex-start; }
.campaign-stat {
  flex: 0 0 calc(var(--u) * 346);
  font-weight: 700;
  font-size: calc(var(--u) * 48);
  letter-spacing: -0.08em;
  line-height: 1;
  text-align: right;
  color: var(--color-accent);
}
.lede-row-campaign .lede-text-lg { width: calc(var(--u) * 631); }

.campaign-title {
  margin-top: calc(var(--u) * 330);
  font-weight: 800;
  font-size: calc(var(--u) * 80);
  letter-spacing: -0.025em;
  line-height: 0.99;
  text-align: center;
  color: var(--color-ink);
}

.campaign-awards {
  display: block;
  margin: calc(var(--u) * 93) auto 0;
  width: calc(var(--u) * 1118);
}

.campaign-video {
  margin: calc(var(--u) * 90) calc(var(--u) * -34.33) 0;
  width: calc(var(--u) * 1258);
}
.campaign-video img { width: 100%; }

/* ============================================================
   APPROACH — HOW I WORK
   ============================================================ */

.approach {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 25);
  padding: calc(var(--u) * 188) calc(var(--u) * 125.33) 0;
}

.approach-title {
  font-weight: 800;
  font-size: calc(var(--u) * 95.25);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: normal;
  color: var(--color-ink-soft);
}

.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: calc(var(--u) * 55);
  width: 100%;
}
.approach-cell {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 17.5);
  padding: calc(var(--u) * 50) calc(var(--u) * 45) calc(var(--u) * 60);
  border: 1px solid rgba(22, 22, 22, 0.25);
}
/* collapse doubled borders between adjacent cells */
.approach-cell:nth-child(2n) { margin-left: -1px; }
.approach-cell:nth-child(n+3) { margin-top: -1px; }

.approach-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--u) * 15);
  letter-spacing: 0.1em;
  color: var(--color-accent);
}
.approach-head {
  margin: 0;
  font-weight: 700;
  font-size: calc(var(--u) * 30);
  letter-spacing: -0.01em;
  color: var(--color-ink-soft);
}
.approach-text {
  font-family: "Inter", var(--font-sans);
  font-size: calc(var(--u) * 20);
  line-height: 1.6;
  color: #3d3b36;
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 50);
  padding: calc(var(--u) * 213) calc(var(--u) * 125.33) calc(var(--u) * 250);
}

.contact-tag {
  padding: calc(var(--u) * 10) calc(var(--u) * 17.5);
  background: var(--color-ink-soft);
  color: #f2f0ea;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--u) * 13.79);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-title {
  font-weight: 800;
  font-size: calc(var(--u) * 105.28);
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-align: center;
  color: var(--color-ink-soft);
}

.contact-sub {
  font-family: "Inter", var(--font-sans);
  font-size: calc(var(--u) * 22.56);
  color: #3d3b36;
}

.contact-buttons {
  display: flex;
  gap: calc(var(--u) * 17.5);
  padding-top: calc(var(--u) * 10);
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  display: inline-block;
  padding: calc(var(--u) * 17.5) calc(var(--u) * 32.6);
  border: calc(var(--u) * 1.25) solid var(--color-ink-soft);
  border-radius: calc(var(--u) * 10);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--u) * 16.3);
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--color-ink-soft); color: #fff; }
.btn-solid { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-solid:hover { background: #c9241f; border-color: #c9241f; }

/* ============================================================
   MOBILE (< 768px): stacked flow
   ============================================================ */

@media (max-width: 767px) {
  .mono-label { font-size: 11px; }

  .hero { height: auto; padding: 48px 20px 64px; }
  .hero-grid { display: none; }

  .hero-title { display: block; }
  .hero-line { position: static; transform: none; display: block; }
  .hero-line-1, .hero-line-2, .hero-line-3 { font-size: clamp(40px, 13vw, 80px); }
  .hero-line-3 { margin-left: 0.4em; }

  .hero-tags { display: flex; gap: 16px; margin: 20px 0 0; flex-wrap: wrap; }
  .hero-tag { position: static; transform: none; font-size: 18px; }

  .hero-photo-main { position: static; width: 100%; height: auto; margin-top: 40px; }
  .hero-photo-eye, .hero-photo-smile { display: none; }

  .hero-quote { position: static; width: auto; margin-top: 40px; font-size: 24px; line-height: 1.55; }
  .hero-script { position: static; width: fit-content; margin: 12px 0 0 auto; font-size: 87px; }

  .hero-name { position: static; margin-top: 48px; font-size: 40px; line-height: 1; }
  .hero-bio { position: static; width: auto; margin-top: 20px; font-size: 14px; line-height: 26px; }

  .hero-label { position: static; }
  .hero-label-role { margin-top: 32px; }

  /* --- section heads --- */
  .frame-head { padding: 0 20px 64px; gap: 20px; }
  .eyebrow { font-size: 12px; }
  .h2, .h2-80 { font-size: clamp(32px, 9vw, 64px); letter-spacing: -0.03em; }
  .h2-indent, .h2-blinky-i1, .h2-blinky-i2 { padding-left: 0.6em; }
  .h2-blinky { padding: 0; }
  .lede-row { flex-direction: column; gap: 14px; padding-top: 24px; }
  .lede-text, .lede-text-lg { width: auto; font-size: 17px; }
  .lede-aside { font-size: 12px; }
  .lede-row-blinky { margin-top: 24px; }
  .lede-row-blinky .lede-aside-right { flex: none; text-align: left; }
  .cols-3 { flex-direction: column; gap: 24px; padding-top: 28px; }
  .col-label { font-size: 11px; }
  .col-text { font-size: 16px; max-width: none; }

  #chapter-1 { margin-top: 64px; }

  /* --- chapter 1 collage --- */
  .ch1-collage { margin: 0 20px; width: auto; }
  .carousel-dots { justify-content: center; margin: 24px 0 72px; gap: 14px; }
  .carousel-dots .dot { width: 10px; height: 10px; }

  /* --- chapter 2 stats: stacked flow --- */
  .ch2-stats { height: auto; display: flex; flex-direction: column; gap: 32px; padding: 0 20px 64px; }
  .ch2-rules { display: none; }
  .ch2-stats > article, .ch2-stats > img, .ch2-stats > .stat { position: static; }
  .craft-card { width: auto; flex-direction: column; gap: 16px; padding: 0; }
  .craft-card-label { flex: none; }
  .craft-card-text { font-size: 22px; }
  .ch2-img-massage, .ch2-img-lymphatic { display: none; }
  .stat-num { font-size: 44px; }
  .stat-sub { font-size: 30px; }
  .stat-caption { position: static; margin-top: 10px; font-size: 10.5px; white-space: normal; }
  .stat-text { position: static; margin-top: 10px; font-size: 16px; }
  .stat-120, .stat-ltv, .stat-creatives { width: auto; }
  .stat .stat-caption { top: auto; }
  .stat .stat-text { top: auto; width: auto; max-width: 480px; }
  .ch2-arrow { display: none; }
  .ch2-stories { width: 100%; }

  /* --- chapter 3 Blinky --- */
  #chapter-3 { height: auto; padding-bottom: 40px; }
  #chapter-3 > figure, #chapter-3 > a, #chapter-3 > img { position: static; }
  .blinky-video { width: auto; height: auto; margin: 8px 20px 0; }
  .blinky-pill { display: inline-flex; height: 32px; margin: 20px 0 0 20px; font-size: 13px; border-radius: 16px; }
  .blinky-circle { display: none; }
  .blinky-script { position: static; display: block; width: fit-content; margin: 20px 20px 0 auto; font-size: 75px; }
  .blinky-collage { width: auto; margin: 32px 8px 0; }

  /* --- campaign --- */
  .campaign { padding: 0 20px; }
  .campaign-stat { flex: none; font-size: 40px; text-align: left; }
  .campaign-title { margin-top: 80px; font-size: clamp(26px, 7.4vw, 48px); }
  .campaign-awards { margin-top: 40px; width: 100%; }
  .campaign-video { margin: 40px 0 140px; width: auto; }

  /* --- approach --- */
  .approach { padding: 88px 20px 0; gap: 16px; }
  .approach-title { font-size: clamp(34px, 9.5vw, 56px); }
  .approach-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .approach-cell { padding: 28px 24px 32px; gap: 12px; }
  .approach-cell:nth-child(2n) { margin-left: 0; }
  .approach-cell:nth-child(n+2) { margin-top: -1px; }
  .approach-num { font-size: 12px; }
  .approach-head { font-size: 22px; }
  .approach-text { font-size: 16px; }

  /* --- contact --- */
  .contact { padding: 100px 20px 120px; gap: 28px; }
  .contact-tag { font-size: 12px; padding: 8px 14px; }
  .contact-title { font-size: clamp(27px, 7.6vw, 52px); }
  .contact-sub { font-size: 16px; text-align: center; }
  .contact-buttons { gap: 12px; }
  .btn { padding: 14px 22px; font-size: 14px; border-width: 1px; border-radius: 10px; }
}