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

/* ========================================================================== */
/* VITRAZH 2.0 — CINEMA × EDITORIAL × LAYERS                                  */
/* ========================================================================== */

:root {
  --vit-navy: #192c3b;
  --vit-burgundy: #340910;
  --vit-ivory: #f3eee4;
  --vit-cream: #f2eddc;
  --vit-slate: #252c34;
  --vit-black: #1b1c1d;
}

body {
  background: var(--vit-ivory);
}

/* One quiet physical grain, never scrapbook texture. */
body::before {
  opacity: .035;
  mix-blend-mode: multiply;
}

/* Editorial microtype. */
.kicker,
.visual-index,
.portfolio-copy > span,
.portfolio-card span,
.kids-concept-copy > span,
.tariff > span,
.package-label,
.test-art span,
.proof-strip span,
.brief-panel > span,
.design-system-kicker {
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: .19em !important;
  text-transform: uppercase;
}

/* HERO / editorial impact: photograph, frame, colour plane, type, line. */
.hero {
  position: relative;
  background: var(--vit-ivory) !important;
}

.hero-copy {
  background:
    linear-gradient(136deg, transparent 0 73%, rgba(25, 44, 59, .045) 73% 100%),
    var(--vit-ivory) !important;
}

.hero-copy::before {
  width: min(36vw, 510px);
  left: -21%;
  top: 14%;
  border-color: rgba(25, 44, 59, .25);
}

.hero-copy::after {
  content: "+  VISUAL NOTE / 001";
  right: 5%;
  top: 8%;
  font: 600 9px/1 Manrope, Arial, sans-serif;
  letter-spacing: .18em;
  color: var(--vit-burgundy);
}

.hero h1 {
  max-width: 860px;
  color: var(--vit-navy);
  font-size: clamp(76px, 8vw, 140px);
  line-height: .82 !important;
  letter-spacing: -.055em !important;
}

.hero h1 em { color: var(--vit-burgundy); }

.hero-visual {
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(243, 238, 228, .04) 1px, transparent 1px),
    linear-gradient(rgba(243, 238, 228, .04) 1px, transparent 1px),
    var(--vit-navy) !important;
  background-size: 62px 62px, 62px 62px, auto !important;
}

.hero-visual::before {
  width: 46%;
  left: -12%;
  bottom: -14%;
  background: rgba(52, 9, 16, .88);
  border: 1px solid rgba(243, 238, 228, .16);
  mix-blend-mode: normal;
}

.hero-visual::after {
  inset: 8% 7% auto auto;
  width: 30%;
  height: 34%;
  background: rgba(243, 238, 228, .06);
  border: 1px solid rgba(243, 238, 228, .65);
  box-shadow: -26px 28px 0 rgba(52, 9, 16, .42);
}

.hero-visual .hero-work {
  width: 98% !important;
  top: 45% !important;
  filter: saturate(.52) contrast(1.08) sepia(.09) drop-shadow(0 30px 42px rgba(0, 0, 0, .3)) !important;
}

.hero-visual > p {
  right: 5% !important;
  bottom: 5% !important;
  width: min(72%, 610px) !important;
  background: rgba(243, 238, 228, .92) !important;
  border: 1px solid rgba(243, 238, 228, .42) !important;
  border-left: 4px solid var(--vit-burgundy) !important;
  color: var(--vit-navy) !important;
  backdrop-filter: none !important;
}

/* Quiet first pause after the visual impact. */
.proof-strip {
  background: var(--vit-navy) !important;
}

.intro-section {
  position: relative;
  background:
    linear-gradient(90deg, rgba(25, 44, 59, .038) 1px, transparent 1px),
    linear-gradient(rgba(25, 44, 59, .038) 1px, transparent 1px),
    var(--vit-ivory) !important;
  background-size: 54px 54px, 54px 54px, auto !important;
}

.intro-section::after {
  content: "AI_IZ_SERDCA  /  STUDY 002";
  position: absolute;
  right: 4vw;
  bottom: 24px;
  font: 600 8px/1 Manrope, Arial, sans-serif;
  letter-spacing: .2em;
  color: rgba(25, 44, 59, .5);
}

.intro-photo-main {
  position: relative;
  z-index: 2;
  box-shadow: 18px 18px 0 rgba(52, 9, 16, .12) !important;
}

.intro-photo-main::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 26%;
  height: 32%;
  right: -6%;
  top: 13%;
  border: 1px solid rgba(25, 44, 59, .5);
  background: rgba(243, 238, 228, .1);
  pointer-events: none;
}

/* Section headings are editorial, but readable: no accidental collisions. */
.intro-copy h2,
.section-intro h2,
.cost-copy h2,
.process-head h2,
.test-copy h2,
.portfolio-head h2,
.about-copy h2,
.faq-head h2,
.fit-section h2,
.contact-copy h2 {
  line-height: .92 !important;
  letter-spacing: -.045em !important;
}

.section-intro > .kicker,
.cost-copy > .kicker,
.process-head > .kicker,
.test-copy > .kicker,
.portfolio-head > .kicker,
.about-copy > .kicker,
.faq-head > .kicker,
.fit-section > div > .kicker,
.contact-copy > .kicker,
.intro-copy > .kicker {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  font-size: clamp(46px, 5.2vw, 82px) !important;
  line-height: .9 !important;
  letter-spacing: -.055em !important;
  text-transform: none !important;
  color: rgba(25, 44, 59, .18) !important;
}

/* Light layered story: one plane, one circle, one connecting line. */
.diagnosis {
  position: relative;
  background: var(--vit-cream) !important;
}

.diagnosis::before {
  content: "";
  position: absolute;
  right: 7vw;
  top: 7vw;
  width: min(18vw, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(52, 9, 16, .12);
  pointer-events: none;
}

.diagnosis-grid {
  position: relative;
  z-index: 1;
  background: rgba(243, 238, 228, .42);
}

.diagnosis-image { box-shadow: 16px 16px 0 rgba(25, 44, 59, .09) !important; }

.statement {
  background: transparent !important;
  border-left-color: var(--vit-burgundy) !important;
}

.statement::after { background: rgba(52, 9, 16, .1); }

/* Dark statement. Burgundy remains an accent, never the whole field. */
.cost-section,
.process-section,
.principle-section,
.fit-section {
  background:
    radial-gradient(circle at 88% 14%, rgba(52, 9, 16, .34), transparent 22%),
    var(--vit-navy) !important;
}

.cost-copy > .kicker,
.process-head > .kicker,
.fit-section > div > .kicker {
  color: rgba(243, 238, 228, .16) !important;
}

.cost-copy h2 em,
.process-head h2 em,
.fit-section h2 em,
.principle-frame h2 em {
  color: #d7b8a2 !important;
}

/* Quiet formula page. */
.formula-section,
.outcome-section {
  background: var(--vit-ivory) !important;
}

.formula > div,
.outcome-grid article {
  background: rgba(242, 237, 220, .55) !important;
}

.result-panel {
  position: relative;
  overflow: hidden;
  background: var(--vit-navy) !important;
}

.result-panel::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 5%;
  top: 7%;
  width: 24%;
  height: 34%;
  border: 1px solid rgba(243, 238, 228, .5);
  pointer-events: none;
}

/* Test section: frame-inside-frame, not a UI glass card. */
.test-section { background: var(--vit-cream) !important; }

.test-art::after {
  content: "";
  position: absolute;
  inset: 12% 10% auto auto;
  width: 33%;
  height: 36%;
  border: 1px solid rgba(243, 238, 228, .62);
  background: rgba(243, 238, 228, .06);
}

/* Main package: deep navy field, burgundy only as a decisive accent. */
.package-section { background: var(--vit-ivory) !important; }

.package-card {
  background:
    linear-gradient(90deg, transparent 0 76%, rgba(52, 9, 16, .28) 76% 100%),
    var(--vit-navy) !important;
}

.package-label,
.package-bonus span { color: #d7b8a2 !important; }

.package-bonus {
  background: var(--vit-slate) !important;
  border-top: 1px solid rgba(243, 238, 228, .18);
}

.button-light {
  background: var(--vit-ivory) !important;
  color: var(--vit-navy) !important;
}

.value-note {
  background: var(--vit-cream) !important;
}

/* Tariffs alternate a quiet cream page with one denser visual card. */
.tariffs-section {
  background: var(--vit-cream) !important;
}

.tariff {
  background: var(--vit-ivory) !important;
  box-shadow: none !important;
}

.tariff::after {
  content: "+";
  position: absolute;
  right: 28px;
  top: 24px;
  font: 300 24px/1 Arial, sans-serif;
  color: var(--vit-burgundy);
}

.tariff-example-media {
  box-shadow: 14px 14px 0 rgba(25, 44, 59, .09) !important;
}

/* Portfolio is the visual-collage climax; the surrounding space stays calm. */
.portfolio-section {
  background:
    linear-gradient(rgba(243, 238, 228, .965), rgba(243, 238, 228, .965)),
    radial-gradient(circle at 22% 11%, rgba(52, 9, 16, .28), transparent 30%) !important;
}

.portfolio-project,
.kids-concept,
.portfolio-card {
  position: relative;
}

.portfolio-project::after,
.portfolio-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 3%;
  top: 4%;
  width: 17%;
  height: 22%;
  border: 1px solid rgba(25, 44, 59, .36);
  pointer-events: none;
}

.portfolio-images,
.portfolio-pair,
.kids-concept-image {
  box-shadow: 12px 12px 0 rgba(25, 44, 59, .075) !important;
}

.jewelry-card > div:last-child {
  background: var(--vit-black) !important;
}

/* FAQ is the quiet page after the portfolio climax. */
.faq-section {
  background: var(--vit-ivory) !important;
}

.faq-list details[open] {
  background: var(--vit-cream) !important;
}

/* Final conversion alternates quiet ivory and deep navy. */
.contact-section {
  background: var(--vit-ivory) !important;
}

.brief-panel {
  background:
    radial-gradient(circle at 88% 12%, rgba(52, 9, 16, .45), transparent 22%),
    var(--vit-navy) !important;
}

.design-system-cta {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 74%, rgba(52, 9, 16, .18) 74% 100%),
    var(--vit-black) !important;
}

.design-system-cta::before {
  content: "";
  position: absolute;
  left: 18%;
  bottom: -42%;
  width: 36%;
  aspect-ratio: 1;
  border: 1px solid rgba(243, 238, 228, .14);
  border-radius: 50%;
  pointer-events: none;
}

.design-system-cta > * { position: relative; z-index: 1; }
.design-system-kicker { color: #d7b8a2 !important; }

.design-system-copy > p {
  border-left-color: var(--vit-burgundy) !important;
}

.design-system-cta > a {
  background: var(--vit-burgundy) !important;
  border: 1px solid rgba(243, 238, 228, .36) !important;
}

.footer { background: var(--vit-black) !important; }

@media (max-width: 900px) {
  .hero-visual::after { width: 28%; height: 28%; }
  .portfolio-project::after,
  .portfolio-card::after { width: 24%; height: 18%; }
}

@media (max-width: 620px) {
  .hero h1 {
    font-size: clamp(51px, 14.4vw, 64px) !important;
    line-height: .86 !important;
  }

  .section-intro > .kicker,
  .cost-copy > .kicker,
  .process-head > .kicker,
  .test-copy > .kicker,
  .portfolio-head > .kicker,
  .about-copy > .kicker,
  .faq-head > .kicker,
  .fit-section > div > .kicker,
  .contact-copy > .kicker,
  .intro-copy > .kicker {
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .94 !important;
  }

  .intro-copy h2,
  .section-intro h2,
  .cost-copy h2,
  .process-head h2,
  .test-copy h2,
  .portfolio-head h2,
  .about-copy h2,
  .faq-head h2,
  .fit-section h2,
  .contact-copy h2 {
    line-height: .96 !important;
  }

  .hero-visual .hero-work { width: 108% !important; }
  .intro-section::after { right: 20px; }
  .portfolio-project::after,
  .portfolio-card::after { width: 29%; height: 14%; }
}

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

:root {
  --ink: #102330;
  --wine: #4a0b18;
  --paper: #f3eee4;
  --paper-deep: #e3dacb;
  --charcoal: #252c34;
  --black: #1b1c1d;
  --gold: #b08c5a;
  --muted: #766f66;
  --line: rgba(27, 28, 29, .22);
  --display: "Vitrazh Display", "Cormorant Garamond", Georgia, serif;
  --swash: "Vitrazh Swash", "Vitrazh Display", "Cormorant Garamond", Georgia, serif;
}

html { background: var(--paper); overflow-x: hidden; }

body {
  color: var(--black);
  background:
    linear-gradient(rgba(243, 238, 228, .94), rgba(243, 238, 228, .94)),
    radial-gradient(circle at 20% 0%, rgba(176, 140, 90, .18), transparent 36%),
    var(--paper);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

h1, h2, h3,
.portfolio-card h3,
.package-main h3,
.tariff h3,
.brief-panel h3,
.statement h3,
.phase button strong {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  letter-spacing: -.025em;
}

h1 em, h2 em, h3 em { font-family: var(--swash) !important; font-style: normal !important; }

.kicker,
.visual-index,
.portfolio-copy > span,
.portfolio-card span,
.kids-concept-copy > span,
.tariff > span,
.package-label,
.test-art span,
.proof-strip span,
.brief-panel > span,
.design-system-kicker {
  letter-spacing: .24em !important;
  text-transform: uppercase;
}

.nav-shell {
  background: rgba(243, 238, 228, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.nav-shell nav a { color: var(--charcoal); }
.nav-shell nav a::after { background: var(--wine); }
.logo-image { filter: brightness(.28) sepia(.2); }

.nav-cta,
.button-dark {
  background: var(--wine) !important;
  color: var(--paper) !important;
  border-radius: 0 !important;
  border: 1px solid var(--wine) !important;
}

.nav-cta:hover,
.button-dark:hover { background: var(--ink) !important; border-color: var(--ink) !important; }

.hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

.hero-copy {
  position: relative;
  background:
    linear-gradient(135deg, transparent 0 72%, rgba(74, 11, 24, .06) 72% 100%),
    var(--paper);
}

.hero-copy::before {
  content: "";
  position: absolute;
  width: min(32vw, 430px);
  aspect-ratio: 1;
  border: 1px solid rgba(74, 11, 24, .26);
  border-radius: 50%;
  left: -18%;
  top: 18%;
  z-index: -1;
}

.hero-copy::after {
  content: "+";
  position: absolute;
  right: 6%;
  top: 11%;
  color: var(--wine);
  font: 300 34px/1 Arial, sans-serif;
}

.hero h1 {
  color: var(--ink);
  font-size: clamp(78px, 8.4vw, 148px);
  line-height: .74;
}

.hero h1 em { color: var(--wine); }
.hero-lead { color: #544f49; max-width: 720px; }
.hero-actions p { color: var(--muted); }

.hero-visual {
  background:
    linear-gradient(150deg, rgba(16, 35, 48, .05), rgba(27, 28, 29, .92)),
    var(--charcoal);
  overflow: hidden;
}

.hero-visual::before {
  content: "";
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(74, 11, 24, .78);
  left: -15%;
  bottom: -22%;
  mix-blend-mode: multiply;
  display: block;
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 7% 7% auto auto;
  width: 28%;
  height: 34%;
  border: 1px solid rgba(243, 238, 228, .72);
  box-shadow: -28px 30px 0 rgba(16, 35, 48, .72);
  display: block;
}

.hero-work {
  filter: saturate(.58) contrast(1.08) sepia(.08);
  position: relative;
  z-index: 1;
}

.hero-visual p,
.visual-index { z-index: 3; color: var(--paper) !important; }

.hero-visual > p {
  background: rgba(74, 11, 24, .9) !important;
  border-left: 2px solid var(--gold) !important;
  backdrop-filter: blur(8px);
}

.proof-strip {
  background: var(--ink);
  color: var(--paper);
  border-color: rgba(243, 238, 228, .18);
}

.proof-strip > div { border-color: rgba(243, 238, 228, .18); }
.proof-strip strong { font-family: var(--display); color: var(--paper); }
.proof-strip span { color: rgba(243, 238, 228, .65); }

.intro-section,
.section,
.portfolio-section,
.contact-section { background-color: var(--paper); }

.intro-section {
  background-image:
    linear-gradient(90deg, rgba(16, 35, 48, .045) 1px, transparent 1px),
    linear-gradient(rgba(16, 35, 48, .045) 1px, transparent 1px);
  background-size: 48px 48px;
}

.intro-name { color: rgba(74, 11, 24, .07) !important; font-family: var(--display) !important; }
.intro-copy h2, .section-intro h2, .process-head h2, .portfolio-head h2, .contact-copy h2 { color: var(--ink); }
.intro-copy h2 em, .section-intro h2 em, .process-head h2 em, .portfolio-head h2 em, .contact-copy h2 em { color: var(--wine); }
.intro-copy a, .tariff a { color: var(--wine); border-color: var(--wine); }

.intro-photo-main,
.diagnosis-image,
.portfolio-images,
.shi-say-collage,
.kids-concept-image,
.tariff-example-media {
  border: 1px solid rgba(27, 28, 29, .24);
  box-shadow: 12px 12px 0 rgba(16, 35, 48, .08);
}

.intro-photo-main img,
.diagnosis-image img,
.portfolio-section img,
.tariff-example-media img { filter: saturate(.72) contrast(1.06); }

.diagnosis { border-top-color: var(--line); }
.symptoms article,
.statement,
.outcome-grid article,
.phase,
.tariff,
.portfolio-card > div:last-child,
.faq-list details { border-color: var(--line) !important; }

.symptoms article b,
.outcome-grid article > span,
.cost-list span,
.phase button span,
.portfolio-card span,
.portfolio-copy > span,
.kids-concept-copy > span { color: var(--wine) !important; }

.statement {
  background: var(--paper-deep);
  position: relative;
  overflow: hidden;
}

.statement::after {
  content: "";
  position: absolute;
  width: 190px;
  aspect-ratio: 1;
  border-radius: 50%;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(74, 11, 24, .14);
}

.cost-section,
.principle-section,
.fit-section {
  background:
    radial-gradient(circle at 88% 17%, rgba(74, 11, 24, .62), transparent 20%),
    var(--black) !important;
  color: var(--paper);
}

.cost-copy h2,
.principle-frame h2,
.fit-section h2 { color: var(--paper) !important; }
.cost-copy h2 em,
.principle-frame h2 em,
.fit-section h2 em { color: #d7b8a2 !important; }
.cost-section .kicker,
.principle-section .kicker,
.fit-section .kicker { color: #d5b078 !important; }
.cost-body,
.cost-list article,
.fit-section li { border-color: rgba(243, 238, 228, .2) !important; }
.cost-body p,
.fit-section li,
.principle-frame p { color: rgba(243, 238, 228, .72) !important; }

.formula-section { background: var(--paper-deep); }
.formula > div { background: var(--paper); border-color: var(--line); }
.formula > i { color: var(--wine); font-family: var(--display); }
.formula h3 { color: var(--ink); }

.result-panel {
  background: var(--ink) !important;
  color: var(--paper);
  border-radius: 0 !important;
}
.result-panel h3 { color: var(--paper) !important; }
.result-panel p { color: rgba(243, 238, 228, .7) !important; }
.result-panel span { color: #d5b078 !important; }
.result-panel img { filter: saturate(.4) sepia(.25) contrast(1.08); }

.outcome-section { background: var(--paper); }
.outcome-grid article { background: rgba(255, 255, 255, .24); }

.process-section {
  background: var(--ink) !important;
  color: var(--paper);
}
.process-head h2 { color: var(--paper); }
.process-head h2 em { color: #d7b8a2; }
.process-head p { color: rgba(243, 238, 228, .66); }
.phase { background: transparent !important; border-color: rgba(243, 238, 228, .2) !important; }
.phase button { color: var(--paper) !important; }
.phase button span { color: #d5b078 !important; }
.phase-content p,
.phase-content li { color: rgba(243, 238, 228, .68) !important; }
.phase button i { color: var(--paper); }

.test-section { background: var(--paper-deep); }
.test-art {
  background:
    linear-gradient(rgba(16, 35, 48, .78), rgba(16, 35, 48, .78)),
    url("../assets/paper-brain.png") center/cover !important;
  color: var(--paper) !important;
}
.test-art strong { font-family: var(--display); }
.test-copy blockquote { color: var(--wine) !important; border-color: var(--wine) !important; }

.package-section { background: var(--paper); }
.package-card { background: var(--wine) !important; color: var(--paper); border-radius: 0 !important; }
.package-card h3, .package-card h4 { color: var(--paper) !important; }
.package-card p, .package-card li { color: rgba(243, 238, 228, .72) !important; }
.package-list, .package-bonus { border-color: rgba(243, 238, 228, .22) !important; }
.button-light { background: var(--paper) !important; color: var(--wine) !important; border-radius: 0 !important; }
.value-note { border-color: var(--line) !important; background: var(--paper-deep); }

.tariffs-section { background: var(--paper-deep); }
.tariff { background: var(--paper); border-radius: 0 !important; }
.tariff-example-copy { background: var(--paper) !important; }
.tariff h3 { color: var(--ink); }

.portfolio-section {
  background:
    linear-gradient(rgba(243, 238, 228, .95), rgba(243, 238, 228, .95)),
    radial-gradient(circle at 30% 15%, rgba(74, 11, 24, .3), transparent 32%);
}
.display-word { font-family: var(--display) !important; color: rgba(74, 11, 24, .065) !important; }
.portfolio-project,
.kids-concept,
.portfolio-card { border-color: var(--line) !important; }
.portfolio-card h3,
.kids-concept h3 { color: var(--ink); }
.jewelry-card > div:last-child { background: var(--ink) !important; }
.jewelry-card h3 { color: var(--paper) !important; }
.jewelry-card p { color: rgba(243, 238, 228, .68) !important; }

.principle-frame {
  border-color: rgba(243, 238, 228, .2) !important;
  background: rgba(16, 35, 48, .34);
}

.faq-section { background: var(--paper); }
.faq-list summary { color: var(--ink); }
.faq-list details[open] { background: var(--paper-deep); }

.contact-section { background: var(--paper-deep); }
.brief-panel { background: var(--ink) !important; color: var(--paper); border-radius: 0 !important; }
.brief-panel h3 { color: var(--paper) !important; }
.brief-panel p { color: rgba(243, 238, 228, .7) !important; }
.brief-panel .social-link { border-color: rgba(243, 238, 228, .22) !important; color: var(--paper); }

.design-system-cta {
  background:
    linear-gradient(105deg, rgba(27, 28, 29, .96), rgba(16, 35, 48, .94)),
    var(--black) !important;
  color: var(--paper);
}
.design-system-cta h2 { color: var(--paper) !important; }
.design-system-cta h2 em { color: #d7b8a2 !important; }
.design-system-cta p { color: rgba(243, 238, 228, .68) !important; }
.design-system-cta > a { background: var(--wine) !important; border-color: rgba(243, 238, 228, .25) !important; }

.back-to-top { background: var(--wine) !important; color: var(--paper) !important; }
.footer { background: var(--black) !important; color: rgba(243, 238, 228, .65) !important; border-color: rgba(243, 238, 228, .18) !important; }
.footer .logo-image { filter: brightness(0) invert(1) sepia(.2); opacity: .82; }

@media (max-width: 900px) {
  .hero h1 { font-size: clamp(70px, 15vw, 118px); }
  .hero-copy::before { width: 68vw; left: -30%; }
  .hero-visual::after { width: 22%; height: 25%; }
}

@media (max-width: 620px) {
  .hero h1 { font-size: clamp(58px, 18vw, 82px); }
  .kicker { letter-spacing: .16em !important; }
  .hero-visual::before { width: 82%; }
  .statement::after { opacity: .45; }
  .intro-photo-main,
  .diagnosis-image,
  .portfolio-images,
  .shi-say-collage,
  .kids-concept-image,
  .tariff-example-media { box-shadow: 7px 7px 0 rgba(16, 35, 48, .08); }
}

/* Composition refinements after the first visual review */
h1, h2, h3,
.portfolio-card h3,
.package-main h3,
.tariff h3,
.brief-panel h3,
.statement h3,
.phase button strong {
  letter-spacing: -.045em;
}

.kicker,
.visual-index,
.portfolio-copy > span,
.portfolio-card span,
.kids-concept-copy > span,
.tariff > span,
.package-label,
.test-art span,
.proof-strip span,
.brief-panel > span,
.design-system-kicker {
  letter-spacing: .14em !important;
}

/* The opening artwork now reads as part of the same material world as the page. */
.hero-visual {
  background:
    linear-gradient(90deg, rgba(243, 238, 228, .045) 1px, transparent 1px),
    linear-gradient(rgba(243, 238, 228, .045) 1px, transparent 1px),
    radial-gradient(circle at 78% 22%, rgba(176, 140, 90, .22), transparent 24%),
    linear-gradient(145deg, #202b31 0%, #102330 54%, #1b1c1d 100%) !important;
  background-size: 54px 54px, 54px 54px, auto, auto !important;
}

.hero-visual::before {
  width: 64%;
  left: -18%;
  bottom: -24%;
  border: 1px solid rgba(243, 238, 228, .18);
  background: rgba(74, 11, 24, .86);
}

.hero-visual::after {
  inset: 8% 6% auto auto;
  width: 31%;
  height: 31%;
  border-color: rgba(243, 238, 228, .62);
  box-shadow:
    -24px 26px 0 rgba(74, 11, 24, .44),
    24px -20px 0 rgba(176, 140, 90, .08);
}

.hero-visual .hero-work {
  width: 96% !important;
  top: 44% !important;
  filter: saturate(.34) sepia(.2) contrast(1.12) brightness(.96) !important;
  filter: saturate(.34) sepia(.2) contrast(1.12) brightness(.96) drop-shadow(0 28px 34px rgba(0, 0, 0, .24)) !important;
}

/* Pale display labels support the content instead of becoming a second headline. */
.section-intro > .kicker,
.cost-copy > .kicker,
.process-head > .kicker,
.test-copy > .kicker,
.portfolio-head > .kicker,
.about-copy > .kicker,
.faq-head > .kicker,
.fit-section > div > .kicker,
.contact-copy > .kicker,
.intro-copy > .kicker {
  letter-spacing: -.075em !important;
}

.intro-copy > .kicker {
  max-width: 760px;
  font-size: clamp(58px, 6.7vw, 112px) !important;
  line-height: .78 !important;
}

.intro-copy h2 {
  max-width: 720px;
  font-size: clamp(62px, 6.8vw, 108px) !important;
  line-height: .79 !important;
  letter-spacing: -.06em !important;
}

/* Rebalanced three-part section introductions. */
.split-intro {
  grid-template-columns: minmax(160px, .42fr) minmax(0, 1.14fr) minmax(260px, .7fr) !important;
  column-gap: clamp(28px, 4vw, 64px) !important;
  row-gap: 28px !important;
  align-items: start !important;
}

.split-intro > .kicker {
  max-width: 250px;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  font-size: clamp(48px, 4.8vw, 76px) !important;
  line-height: .82 !important;
}

.split-intro > h2 {
  max-width: 720px;
  font-size: clamp(60px, 6vw, 92px) !important;
  line-height: .82 !important;
  letter-spacing: -.055em !important;
}

.split-intro > p:last-child {
  position: relative;
  margin: 38px 0 0 !important;
  padding: 24px 26px 24px 30px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .22);
  color: #57524c !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
}

.split-intro > p:last-child::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 4px;
  height: calc(100% + 2px);
  background: var(--wine);
}

/* Process: the label, promise and explanation now form one balanced column. */
.process-head {
  padding: 86px clamp(42px, 5vw, 76px) 90px 4vw !important;
}

.process-head > .kicker {
  max-width: 440px;
  margin: 0 0 34px !important;
  font-size: clamp(52px, 5.2vw, 80px) !important;
  line-height: .8 !important;
}

.process-head > h2 {
  max-width: 640px;
  font-size: clamp(58px, 5.3vw, 82px) !important;
  line-height: .82 !important;
  letter-spacing: -.055em !important;
}

.process-head > p:last-child {
  max-width: 600px !important;
  margin-top: 34px !important;
  padding: 22px 24px;
  border: 1px solid rgba(243, 238, 228, .2);
  border-left: 3px solid var(--gold);
  background: rgba(243, 238, 228, .045);
  color: rgba(243, 238, 228, .7) !important;
}

/* Matching alignment for the qualification and final-contact blocks. */
.fit-section {
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr) !important;
  gap: clamp(52px, 7vw, 110px);
  align-items: start;
}

.fit-section > div > .kicker {
  max-width: 560px;
  margin: 0 0 40px !important;
  font-size: clamp(52px, 5vw, 78px) !important;
  line-height: .82 !important;
}

.fit-section h2 {
  max-width: 650px;
  font-size: clamp(58px, 5.2vw, 82px) !important;
  line-height: .84 !important;
}

.fit-section ul {
  margin-top: 108px !important;
}

.contact-section {
  grid-template-columns: minmax(0, 1.05fr) minmax(480px, .95fr) !important;
}

.contact-copy {
  overflow: visible !important;
  padding-right: 5vw !important;
}

.contact-copy > .kicker {
  width: calc(100% - 18px) !important;
  max-width: 620px;
  padding-right: 18px;
  font-size: clamp(54px, 5.2vw, 82px) !important;
  line-height: .82 !important;
  white-space: normal !important;
}

.contact-copy h2 {
  max-width: 650px;
  padding-right: .12em;
  font-size: clamp(60px, 5.5vw, 88px) !important;
  line-height: .82 !important;
  letter-spacing: -.055em !important;
  overflow: visible;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .split-intro {
    grid-template-columns: minmax(135px, .36fr) minmax(0, 1fr) minmax(230px, .64fr) !important;
    column-gap: 26px !important;
  }

  .split-intro > .kicker { font-size: clamp(44px, 4.8vw, 62px) !important; }
  .split-intro > h2 { font-size: clamp(56px, 5.7vw, 76px) !important; }
}

@media (max-width: 900px) {
  .split-intro {
    grid-template-columns: 1fr !important;
  }

  .split-intro > .kicker,
  .split-intro > h2,
  .split-intro > p:last-child {
    max-width: 760px;
  }

  .split-intro > p:last-child { margin-top: 4px !important; }
  .process-head { width: 100%; box-sizing: border-box; padding: 76px 4vw !important; }
  .process-head > .kicker { max-width: 620px; }

  .fit-section {
    grid-template-columns: 1fr !important;
  }

  .fit-section ul { margin-top: 12px !important; }

  .contact-section {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .hero h1 {
    max-width: 100%;
    padding-right: .08em;
    font-size: clamp(52px, 14.8vw, 66px);
    line-height: .78;
    letter-spacing: -.06em;
  }

  .intro-copy > .kicker,
  .split-intro > .kicker,
  .process-head > .kicker,
  .fit-section > div > .kicker,
  .contact-copy > .kicker {
    font-size: clamp(43px, 13vw, 66px) !important;
    line-height: .84 !important;
  }

  .intro-copy h2,
  .split-intro > h2,
  .process-head > h2,
  .fit-section h2,
  .contact-copy h2 {
    font-size: clamp(48px, 14vw, 66px) !important;
    line-height: .84 !important;
  }

  .hero-visual .hero-work { width: 108% !important; }
}

/* Vitrazh has long ascenders and descenders: give multiline headings enough air. */
.hero h1 {
  line-height: .82 !important;
}

.section-intro > .kicker,
.cost-copy > .kicker,
.process-head > .kicker,
.test-copy > .kicker,
.portfolio-head > .kicker,
.about-copy > .kicker,
.faq-head > .kicker,
.fit-section > div > .kicker,
.contact-copy > .kicker,
.intro-copy > .kicker {
  line-height: .9 !important;
}

.intro-copy h2,
.section-intro h2,
.cost-copy h2,
.process-head h2,
.test-copy h2,
.portfolio-head h2,
.about-copy h2,
.faq-head h2,
.fit-section h2,
.contact-copy h2 {
  line-height: .95 !important;
}

.package-main h3,
.brief-panel h3,
.kids-concept-copy h3,
.portfolio-card h3,
.portfolio-copy h3,
.result-panel h3,
.statement h3,
.tariff h3 {
  line-height: .97 !important;
}

/* The design-system handoff follows the same hierarchy as the revised sections. */
.design-system-cta {
  grid-template-columns: minmax(150px, .4fr) minmax(0, 1.32fr) minmax(250px, .62fr) !important;
  gap: clamp(30px, 4vw, 64px) !important;
  align-items: start !important;
  padding-top: 82px !important;
  padding-bottom: 82px !important;
}

.design-system-kicker {
  max-width: 180px;
  margin-top: 12px !important;
  letter-spacing: .14em !important;
  line-height: 1.55;
  color: #d5b078 !important;
}

.design-system-copy h2 {
  max-width: 760px;
  font-size: clamp(46px, 4.45vw, 70px) !important;
  line-height: .94 !important;
  letter-spacing: -.045em !important;
}

.design-system-copy > p {
  position: relative;
  max-width: 760px;
  margin-top: 34px !important;
  padding: 22px 24px 22px 28px;
  border: 1px solid rgba(243, 238, 228, .18);
  border-left: 3px solid var(--gold);
  background: rgba(243, 238, 228, .045);
  color: rgba(243, 238, 228, .72) !important;
}

.design-system-cta > a {
  align-self: center;
  margin-top: 18px;
  border-color: rgba(176, 140, 90, .64) !important;
}

@media (max-width: 900px) {
  .design-system-cta {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 68px 4vw !important;
  }

  .design-system-kicker {
    max-width: none;
    margin: 0 !important;
  }

  .design-system-copy h2 { max-width: 720px; }
  .design-system-cta > a { width: min(100%, 520px); margin-top: 0; }
}

@media (max-width: 620px) {
  .hero h1 { line-height: .84 !important; }

  .intro-copy h2,
  .section-intro h2,
  .cost-copy h2,
  .process-head h2,
  .test-copy h2,
  .portfolio-head h2,
  .about-copy h2,
  .faq-head h2,
  .fit-section h2,
  .contact-copy h2,
  .package-main h3,
  .brief-panel h3,
  .kids-concept-copy h3,
  .portfolio-card h3,
  .portfolio-copy h3,
  .tariff h3 {
    line-height: .92 !important;
  }

  .design-system-cta { padding: 58px 20px !important; }
  .design-system-copy h2 { font-size: clamp(44px, 13.2vw, 60px) !important; line-height: .96 !important; }
  .design-system-copy > p { padding: 20px 20px 20px 24px; }

  .process-head > .kicker,
  .process-head > h2 {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
  }

  .package-main h3 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(36px, 10.5vw, 46px) !important;
    letter-spacing: -.055em !important;
    overflow-wrap: normal;
  }
}