/* Portfolio captions: label, title and explanation occupy separate columns. */
.portfolio-grid > article > :last-child,
.portfolio-grid > .portfolio-project > :last-child,
.portfolio-grid > .portfolio-card > :last-child {
  position: static !important;
  display: grid !important;
  grid-template-columns: 64px minmax(160px, .85fr) minmax(0, 1.15fr) !important;
  grid-auto-rows: auto !important;
  column-gap: clamp(16px, 2vw, 28px) !important;
  row-gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
  height: auto !important;
  min-height: 190px !important;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 38px) !important;
  overflow: visible !important;
  transform: none !important;
}

/* Readability pass: body copy must stay comfortable on ordinary laptops. */
.package-main > p,
.package-list li,
.package-bonus p,
.result-levels p,
.tariff-example-copy > p,
.tariff-note,
.portfolio-card-copy p,
.portfolio-intro-note p,
.portfolio-disclaimer,
.fit-section li,
.design-system-steps p {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.package-main > p,
.package-list li,
.package-bonus p,
.fit-section li,
.design-system-steps p {
  color: rgba(243, 238, 228, .84) !important;
}

.package-list li {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.package-bonus p {
  max-width: 880px;
}

.result-levels p,
.tariff-example-copy > p,
.tariff-note,
.portfolio-card-copy p,
.portfolio-intro-note p,
.portfolio-disclaimer {
  color: #566772 !important;
}

.tariff-example-copy li {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.intro-copy > p,
.method-copy > p,
.result-panel p,
.client-result-note {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.social-link {
  font-size: 12px !important;
}

@media (max-width: 700px) {
  .package-main > p,
  .package-list li,
  .package-bonus p,
  .result-levels p,
  .tariff-example-copy > p,
  .tariff-note,
  .portfolio-card-copy p,
  .portfolio-intro-note p,
  .portfolio-disclaimer,
  .fit-section li,
  .design-system-steps p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  .tariff-example-copy li {
    font-size: 14px !important;
  }
}

/* Absolute final text floor for all meaningful content. */
main p {
  font-size: 16px !important;
  line-height: 1.68 !important;
}

main li {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

main .tariff-example-copy li {
  font-size: 14px !important;
}

main .kicker,
main .section-kicker,
main .package-label,
main .design-system-kicker,
main .portfolio-card > div:last-child > span,
main .kids-concept-copy > span,
main .tariff > span {
  font-size: 11px !important;
}

/* Final cascade: site-wide comfort settings. */
main p { font-size: 16px !important; line-height: 1.68 !important; }
main li { font-size: 15px !important; line-height: 1.6 !important; }
main .kicker,
main .section-kicker,
main .package-label,
main .design-system-kicker,
main .portfolio-card > div:last-child > span,
main .kids-concept-copy > span,
main .tariff > span { font-size: 11px !important; line-height: 1.5 !important; }

.tariff-grid,
.kids-concept,
.portfolio-grid {
  width: min(100%, 1540px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.tariff-example { min-height: 0 !important; }
.tariff-example-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-height: 650px !important;
  overflow: hidden !important;
}
.tariff-example-media img {
  width: 100% !important;
  height: 100% !important;
  max-height: 650px !important;
  object-fit: contain !important;
}
.kids-concept {
  grid-template-columns: minmax(300px, .58fr) minmax(0, 1.42fr) !important;
}
.kids-concept-image { max-height: 650px !important; overflow: hidden !important; }
.kids-concept-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: 650px !important;
  object-fit: contain !important;
}
.portfolio-grid { gap: clamp(64px, 6vw, 96px) 22px !important; }
.portfolio-images,
.portfolio-card .portfolio-images { max-height: 560px !important; }
.portfolio-card-wide .portfolio-images { max-height: 520px !important; }
.portfolio-head {
  min-height: 0 !important;
  padding-top: 78px !important;
  padding-bottom: 86px !important;
}

.entry-path { gap: 16px !important; border: 0 !important; }
.entry-path article {
  min-height: 260px !important;
  padding: 26px !important;
  border: 1px solid rgba(243, 238, 228, .24) !important;
  background: rgba(243, 238, 228, .045) !important;
}
.entry-path .entry-action {
  min-height: 68px !important;
  margin-top: 26px !important;
  padding: 15px 18px !important;
  justify-content: center !important;
  border: 1px solid rgba(213, 176, 120, .72) !important;
  background: var(--vit-burgundy) !important;
  color: var(--vit-ivory) !important;
}
.entry-path .entry-action b {
  color: var(--vit-ivory) !important;
  font-size: 14px !important;
  letter-spacing: .06em !important;
}
.entry-path .entry-action small {
  color: rgba(243, 238, 228, .76) !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
}
.entry-path .entry-action:not(.entry-action--pending):hover,
.entry-path .entry-action:not(.entry-action--pending):focus-visible {
  background: #6b1020 !important;
  border-color: var(--vit-ivory) !important;
  transform: translateY(-2px);
}
.entry-path .entry-action--pending {
  background: rgba(243, 238, 228, .08) !important;
  border-style: dashed !important;
  opacity: 1 !important;
}

@media (max-width: 900px) {
  .tariff-example-media,
  .tariff-example-media img,
  .kids-concept-image,
  .kids-concept-image img,
  .portfolio-images,
  .portfolio-card .portfolio-images,
  .portfolio-card-wide .portfolio-images { max-height: none !important; }
  .kids-concept { grid-template-columns: 1fr !important; }
}

/* Site-wide comfort pass: readable content, restrained media, obvious actions. */
main p {
  font-size: 16px !important;
  line-height: 1.68 !important;
}

main li {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

main .kicker,
main .section-kicker,
main .package-label,
main .design-system-kicker,
main .portfolio-card > div:last-child > span,
main .kids-concept-copy > span,
main .tariff > span {
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.tariff-grid,
.kids-concept,
.portfolio-grid {
  width: min(100%, 1540px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.tariff-example {
  min-height: 0 !important;
}

.tariff-example-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-height: 650px !important;
  overflow: hidden !important;
}

.tariff-example-media img {
  width: 100% !important;
  height: 100% !important;
  max-height: 650px !important;
  object-fit: contain !important;
}

.kids-concept {
  grid-template-columns: minmax(300px, .58fr) minmax(0, 1.42fr) !important;
}

.kids-concept-image {
  max-height: 650px !important;
  overflow: hidden !important;
}

.kids-concept-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: 650px !important;
  object-fit: contain !important;
}

.portfolio-grid {
  gap: clamp(64px, 6vw, 96px) 22px !important;
}

.portfolio-images,
.portfolio-card .portfolio-images {
  max-height: 560px !important;
}

.portfolio-card-wide .portfolio-images {
  max-height: 520px !important;
}

.portfolio-head {
  min-height: 0 !important;
  padding-top: 78px !important;
  padding-bottom: 86px !important;
}

.entry-path {
  gap: 16px !important;
  border: 0 !important;
}

.entry-path article {
  min-height: 260px !important;
  padding: 26px !important;
  border: 1px solid rgba(243, 238, 228, .24) !important;
  background: rgba(243, 238, 228, .045) !important;
}

.entry-path .entry-action {
  min-height: 68px !important;
  margin-top: 26px !important;
  padding: 15px 18px !important;
  justify-content: center !important;
  border: 1px solid rgba(213, 176, 120, .72) !important;
  background: var(--vit-burgundy) !important;
  color: var(--vit-ivory) !important;
  transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}

.entry-path .entry-action b {
  color: var(--vit-ivory) !important;
  font-size: 14px !important;
  letter-spacing: .06em !important;
}

.entry-path .entry-action small {
  color: rgba(243, 238, 228, .76) !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
}

.entry-path .entry-action:not(.entry-action--pending):hover,
.entry-path .entry-action:not(.entry-action--pending):focus-visible {
  background: #6b1020 !important;
  border-color: var(--vit-ivory) !important;
  transform: translateY(-2px);
}

.entry-path .entry-action--pending {
  background: rgba(243, 238, 228, .08) !important;
  border-style: dashed !important;
  opacity: 1 !important;
}

@media (max-width: 900px) {
  main p { font-size: 16px !important; }
  main li { font-size: 15px !important; }

  .tariff-example-media,
  .tariff-example-media img,
  .kids-concept-image,
  .kids-concept-image img {
    max-height: none !important;
  }

  .kids-concept {
    grid-template-columns: 1fr !important;
  }

  .portfolio-images,
  .portfolio-card .portfolio-images,
  .portfolio-card-wide .portfolio-images {
    max-height: none !important;
  }
}

.portfolio-grid > * > :last-child > * {
  position: static !important;
  inset: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

.portfolio-grid > * > :last-child h2,
.portfolio-grid > * > :last-child h3,
.portfolio-grid > * > :last-child [class*="title"] {
  font-size: clamp(40px, 3.5vw, 62px) !important;
  line-height: .91 !important;
  letter-spacing: -.035em !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.portfolio-grid > * > :last-child p,
.portfolio-grid > * > :last-child [class*="description"] {
  padding: 0 !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.6 !important;
  overflow-wrap: break-word !important;
}

/* FAQ: keep the text and the disclosure control as separate elements. */
.faq-section .faq-question-text {
  display: block;
  min-width: 0;
  padding-right: 28px;
  text-align: left;
}

.faq-section .faq-toggle {
  display: inline-flex !important;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: #192c3b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  transition: transform .2s ease;
}

.faq-section button:has(.faq-toggle),
.faq-section summary:has(.faq-toggle) {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

.faq-section details[open] .faq-toggle,
.faq-section .faq-item.is-open .faq-toggle,
.faq-section .faq-item.active .faq-toggle,
.faq-section button[aria-expanded="true"] .faq-toggle {
  transform: none;
}

/* The legacy stylesheet hides every summary span when a row opens. Keep the
   question visible and let JavaScript update only the dedicated icon. */
.faq-section details[open] summary .faq-question-text {
  font-size: 25px !important;
}

.faq-section details[open] summary .faq-question-text::after,
.faq-section details[open] summary .faq-toggle::after {
  content: none !important;
}

.faq-section details[open] summary .faq-toggle {
  font-size: 20px !important;
}

.faq-section button:focus-visible,
.faq-section summary:focus-visible {
  outline: 2px solid #340910;
  outline-offset: 5px;
}

@media (max-width: 1100px) {
  .portfolio-grid > article > :last-child,
  .portfolio-grid > .portfolio-project > :last-child,
  .portfolio-grid > .portfolio-card > :last-child {
    grid-template-columns: 54px minmax(140px, .8fr) minmax(0, 1.2fr) !important;
    column-gap: 14px !important;
  }

  .portfolio-grid > * > :last-child h2,
  .portfolio-grid > * > :last-child h3,
  .portfolio-grid > * > :last-child [class*="title"] {
    font-size: clamp(36px, 4vw, 52px) !important;
  }
}

@media (max-width: 700px) {
  .portfolio-grid > article > :last-child,
  .portfolio-grid > .portfolio-project > :last-child,
  .portfolio-grid > .portfolio-card > :last-child {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    row-gap: 18px !important;
    padding: 24px 20px 30px !important;
  }

  .portfolio-grid > * > :last-child h2,
  .portfolio-grid > * > :last-child h3,
  .portfolio-grid > * > :last-child [class*="title"] {
    font-size: clamp(38px, 12vw, 54px) !important;
  }
}

/* Process accordion: restore a clear editorial hierarchy on the dark field. */
.process-section .phase-list {
  border-left-color: rgba(243, 238, 228, .18) !important;
}

.process-section .phase {
  border-bottom: 1px solid rgba(243, 238, 228, .2) !important;
}

.process-section .phase > button {
  min-height: 142px !important;
  grid-template-columns: 68px minmax(0, 1fr) 30px !important;
  gap: clamp(18px, 2.2vw, 34px) !important;
  padding: 34px clamp(32px, 4vw, 62px) !important;
}

.process-section .phase > button > span {
  color: #d5b078 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
}

.process-section .phase > button > strong {
  color: #f3eee4 !important;
  font-size: clamp(23px, 2vw, 30px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
}

.process-section .phase > button > i {
  color: #f3eee4 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 22px !important;
  font-style: normal !important;
  font-weight: 300 !important;
  text-align: center !important;
}

.process-section .phase-content {
  padding: 0 clamp(32px, 4vw, 62px) 46px calc(clamp(32px, 4vw, 62px) + 102px) !important;
}

.process-section .phase-content li {
  padding: 20px 0 !important;
  border-top: 1px solid rgba(243, 238, 228, .14) !important;
}

.process-section .phase-content li > b {
  display: block !important;
  color: #f3eee4 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -.015em !important;
}

.process-section .phase-content li > p {
  max-width: 660px !important;
  margin: 9px 0 0 !important;
  color: rgba(243, 238, 228, .78) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

@media (max-width: 900px) {
  .process-section .process-head > h2 {
    font-size: clamp(42px, 11.4vw, 50px) !important;
    line-height: .94 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .process-section .phase > button {
    min-height: 112px !important;
    grid-template-columns: 54px minmax(0, 1fr) 24px !important;
    gap: 14px !important;
    padding: 26px 20px !important;
  }

  .process-section .phase > button > strong {
    font-size: clamp(21px, 5.8vw, 27px) !important;
  }

  .process-section .phase-content {
    padding: 0 20px 34px 88px !important;
  }

  .process-section .phase-content li > b {
    font-size: 19px !important;
  }

  .process-section .phase-content li > p {
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  .process-section .process-head > h2 {
    font-size: 43px !important;
  }

  .process-section .phase-content {
    padding-left: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-section .faq-toggle { transition: none; }
}
/* Keep the main tariff label, title and explanation in separate lanes. */
.package-section .section-intro.split-intro {
  display: grid !important;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr) minmax(250px, .62fr) !important;
  column-gap: clamp(42px, 5vw, 82px) !important;
  row-gap: 28px !important;
  align-items: start !important;
}

.package-section .section-intro.split-intro > .kicker {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: static !important;
  width: 100% !important;
  max-width: 180px !important;
  margin: 8px 0 0 !important;
  font-size: clamp(38px, 3.8vw, 56px) !important;
  line-height: .86 !important;
  overflow-wrap: normal !important;
}

.package-section .section-intro.split-intro > h2 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: static !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 !important;
  font-size: clamp(58px, 5.6vw, 88px) !important;
  line-height: .84 !important;
}

.package-section .section-intro.split-intro > p:last-child {
  grid-column: 3 !important;
  grid-row: 1 !important;
  position: relative !important;
  margin: 44px 0 0 !important;
}

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

  .package-section .section-intro.split-intro > .kicker {
    max-width: 150px !important;
    font-size: 38px !important;
  }

  .package-section .section-intro.split-intro > h2 {
    font-size: clamp(56px, 6vw, 72px) !important;
  }
}

@media (max-width: 900px) {
  .package-section .section-intro.split-intro {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .package-section .section-intro.split-intro > .kicker,
  .package-section .section-intro.split-intro > h2,
  .package-section .section-intro.split-intro > p:last-child {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .package-section .section-intro.split-intro > .kicker {
    font-size: clamp(42px, 12vw, 62px) !important;
  }
}

/* Refined editorial scale: hierarchy comes from contrast and spacing, not
   oversized type that crowds imagery and pushes the offer below the fold. */
@media (min-width: 901px) {
  .hero {
    min-height: calc(100svh - 78px) !important;
    grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr) !important;
  }

  .hero-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(54px, 7vh, 82px) 4vw clamp(58px, 7vh, 88px) !important;
  }

  .hero h1 {
    max-width: 760px !important;
    font-size: clamp(68px, 5.65vw, 96px) !important;
    line-height: .89 !important;
    letter-spacing: -.045em !important;
  }

  .hero-lead {
    max-width: 620px !important;
    margin: clamp(26px, 4vh, 38px) 0 22px !important;
    font-size: clamp(15px, 1.15vw, 18px) !important;
    line-height: 1.58 !important;
  }

  .hero-result-line {
    max-width: 600px !important;
    margin: 0 0 28px !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  .intro-copy h2 {
    max-width: 680px !important;
    font-size: clamp(54px, 4.8vw, 74px) !important;
    line-height: .94 !important;
  }

  .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 {
    font-size: clamp(52px, 4.55vw, 72px) !important;
    line-height: .95 !important;
    letter-spacing: -.038em !important;
  }

  .statement h3,
  .result-panel h3,
  .kids-concept-copy h3,
  .brief-panel h3 {
    font-size: clamp(38px, 3.65vw, 58px) !important;
    line-height: .96 !important;
  }

  .package-main h3 {
    font-size: clamp(62px, 5.7vw, 82px) !important;
    line-height: .88 !important;
  }

  .principle-frame h2 {
    max-width: 1040px !important;
    font-size: clamp(66px, 6.1vw, 90px) !important;
    line-height: .88 !important;
  }

  .package-section .section-intro.split-intro > h2 {
    font-size: clamp(56px, 4.7vw, 70px) !important;
    line-height: .9 !important;
  }

  .tariffs-section .section-intro h2,
  .portfolio-head h2 {
    font-size: clamp(54px, 4.8vw, 72px) !important;
  }
}

@media (min-width: 901px) and (max-width: 1440px) {
  .hero h1 {
    font-size: clamp(66px, 5.45vw, 80px) !important;
  }

  .package-section .section-intro.split-intro > h2 {
    font-size: clamp(54px, 4.55vw, 64px) !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 {
    font-size: clamp(50px, 4.35vw, 64px) !important;
  }
}

@media (max-width: 700px) {
  .hero h1 {
    font-size: clamp(48px, 13.5vw, 62px) !important;
    line-height: .9 !important;
    letter-spacing: -.04em !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 {
    font-size: clamp(42px, 11.5vw, 54px) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
  }

  .principle-frame h2,
  .package-main h3,
  .brief-panel h3,
  .kids-concept-copy h3 {
    font-size: clamp(46px, 12.5vw, 58px) !important;
    line-height: .94 !important;
  }
}

/* Final readability override after all legacy section rules. */
.package-main > p,
.package-list li,
.package-bonus p,
.result-levels p,
.tariff-example-copy > p,
.tariff-note,
.portfolio-card-copy p,
.portfolio-intro-note p,
.portfolio-disclaimer,
.fit-section li,
.design-system-steps p {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.package-main > p,
.package-list li,
.package-bonus p,
.fit-section li,
.design-system-steps p {
  color: rgba(243, 238, 228, .84) !important;
}

.package-list li {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.result-levels p,
.tariff-example-copy > p,
.tariff-note,
.portfolio-card-copy p,
.portfolio-intro-note p,
.portfolio-disclaimer {
  color: #566772 !important;
}

.tariff-example-copy li {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.intro-copy > p,
.method-copy > p,
.result-panel p,
.client-result-note {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.social-link {
  font-size: 12px !important;
}

@media (max-width: 700px) {
  .package-main > p,
  .package-list li,
  .package-bonus p,
  .result-levels p,
  .tariff-example-copy > p,
  .tariff-note,
  .portfolio-card-copy p,
  .portfolio-intro-note p,
  .portfolio-disclaimer,
  .fit-section li,
  .design-system-steps p {
    font-size: 16px !important;
  }

  .tariff-example-copy li {
    font-size: 14px !important;
  }
}