/* Follow the visible screen when a phone's browser toolbar expands or retracts.
   The artwork occupies only the space left after the header and copy. */
.hero { height: 100vh; height: 100dvh; min-height: 0; }
.advantages.section { height: 100vh; height: 100dvh; min-height: 0; }
@media (max-width: 720px) {
  .hero .site-header { flex: 0 0 clamp(60px, 10dvh, 72px); min-height: 0; }
  .hero-copy.shell { flex: 0 0 auto; padding-block: clamp(20px, 4dvh, 38px) 16px; }
  .hero .hero-art { flex: 1 1 0; height: auto; min-height: 0; background-size: auto 100%; }
  .advantages.section { padding-block: clamp(18px, 3.5dvh, 36px); }
  .advantages-heading { margin-bottom: clamp(16px, 3dvh, 28px); }
  .advantages-grid li { padding-block: clamp(10px, 2dvh, 18px); }
  .advantages-photo img { max-width: min(190px, 27dvh); }
}

@media (max-width: 720px) and (max-height: 640px) {
  .hero .eyebrow { margin-bottom: 16px; }
  .hero .hero-actions { margin-top: 18px; }
  .advantages-heading .section-index { margin-bottom: 10px; }
  .advantages h2 { font-size: clamp(30px, 8.8vw, 36px); }
  .advantages-layout { column-gap: 16px; }
  .advantages-grid .advantage-stat { padding-bottom: 12px; }
  .advantages-grid .advantage-reach { gap: 16px; }
  .advantages-photo { padding-bottom: 16px; gap: 8px; }
}
@media (min-width: 721px) and (max-height: 700px) {
  .advantages.section { padding-block: 24px; }
  .advantages-heading { margin-bottom: 24px; }
  .advantages-heading .section-index { margin-bottom: 12px; }
  .advantages h2 { font-size: clamp(42px, 8svh, 64px); }
  .advantages-grid li { min-height: 90px; padding-block: 14px; }
  .advantage-stat strong { font-size: clamp(48px, 9svh, 64px); }
}

/* Content budgets for the seven single-screen chapters. */
#process, #markets, #guarantees, #contact { height: 100vh; height: 100dvh; min-height: 0; }
#markets { grid-template-rows: auto minmax(0, 1fr) auto; }
@media (min-width: 901px) and (max-height: 760px) {
  .process-title h2 { font-size: clamp(48px, 11dvh, 84px); }
  .process-title .section-index { margin-bottom: 24px; }
  .process-title > p { margin-top: 24px; }
  .process-list li { min-height: clamp(72px, 14dvh, 108px); }
}
@media (max-width: 900px) {
  #process { padding-block: clamp(18px, 4dvh, 34px); }
  .process-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: clamp(16px, 3dvh, 26px); height: 100%; min-height: 0; }
  .process-title { margin: 0; }
  .process-title .section-index { margin-bottom: 12px; }
  .process-title h2 { font-size: clamp(34px, min(9vw, 7.4dvh), 54px); line-height: 1.02; }
  .process-title > p { margin-top: 14px; font-size: 15px; line-height: 1.35; }
  .process-list { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); min-height: 0; }
  .process-list li { min-height: 0; gap: 12px; grid-template-columns: 22px minmax(0, 1fr) 20px; padding-block: 8px; }
  .process-list p { font-size: clamp(20px, 5.8vw, 29px); line-height: 1.1; }
  .process-list p span { white-space: normal; }
}
@media (max-width: 720px) {
  #markets { padding-block: clamp(28px, 5.5dvh, 64px); }
  .markets-intro { font-size: clamp(28px, 8vw, 36px); }
  .markets-note { font-size: 17px; line-height: 1.4; }
}
@media (max-width: 1180px) {
  .contact .contact-layout > :first-child { transform: none; }
  #contact { padding-block: clamp(18px, 3.5dvh, 32px); justify-content: center; }
  #contact .section-index { margin-bottom: 14px; }
  #contact h2 { font-size: clamp(28px, min(9vw, 5.6dvh), 42px); line-height: 1.05; }
  .contact .contact-actions > p { margin: 14px 0 0; font-size: 14px; line-height: 1.4; }
  .contact .contact-form { margin-top: 18px; grid-template-columns: minmax(0, .34fr) minmax(0, .66fr); column-gap: 14px; }
  .contact-form .contact-field { padding: 6px 0; }
  .contact-form .contact-field > span { font-size: 12px; }
  .contact-form .contact-field input { min-height: 38px; padding-block: 5px; font-size: 16px; }
  .contact-form .contact-mascot { max-height: 138px; object-fit: contain; }
  .contact-form .messenger-choice { margin-top: 16px; padding: 0; }
  .contact-form .messenger-choice legend { margin-bottom: 8px; font-size: 12px; }
  .contact-form .messenger-choice > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .contact-form .messenger-choice label { min-width: 0; }
  .contact-form .messenger-choice label span { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 8px 3px; font-size: 12px; }
  .contact-form .contact-submit { margin-top: 16px; min-height: 48px; padding: 12px 16px; font-size: 16px; }
}

/* Every chapter has an explicit content area; media cannot enlarge its rows. */
#models { height: 100vh; height: 100dvh; min-height: 0; }
.hero-copy.shell { height: calc(100% - 92px); min-height: 0; }
.hero-rays { inset: 92px 0 0; }
.models.section {
  display: grid; grid-template-rows: minmax(0, .32fr) minmax(0, .68fr);
  gap: clamp(18px, 3dvh, 30px); padding-block: clamp(24px, 4dvh, 52px);
}
.models .models-intro { min-height: 0; margin: 0; height: 100%; }
.models-heading-copy .section-index { margin-bottom: clamp(14px, 2.5dvh, 24px); }
.models .models-intro h2 { font-size: clamp(42px, min(5.4vw, 9dvh), 86px); }
.models .models-mascot { height: 100%; min-height: 0; width: 100%; aspect-ratio: auto; object-fit: contain; }
.deliverables { height: 100%; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
.deliverables li { min-height: 0; gap: clamp(12px, 1.4vw, 22px); padding-block: 8px; }
.deliverables img { width: clamp(30px, 5.8dvh, 48px); height: clamp(30px, 5.8dvh, 48px); flex-basis: clamp(30px, 5.8dvh, 48px); }
.deliverables h3 { font-size: clamp(16px, min(1.5vw, 3.1dvh), 23px); line-height: 1.3; }
.process.section { display: flex; align-items: center; padding-block: clamp(24px, 4dvh, 48px); }
.process-layout { width: 100%; height: 100%; min-height: 0; align-items: center; }
.process-title { position: static; min-height: 0; margin: 0; align-self: center; }
.process-list { height: 100%; min-height: 0; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); }
.process-list li { min-height: 0; padding-block: 10px; }
.process-list p { font-size: clamp(24px, min(2.9vw, 5.4dvh), 44px); line-height: 1.15; }
.process-list p span { white-space: normal; }
#guarantees { padding-block: clamp(36px, 6dvh, 70px); }
.guarantee-layout { height: 100%; grid-template-rows: auto minmax(0, 1fr); row-gap: 24px; }
.guarantee-layout > .section-index { margin: 0; }
.guarantee-layout h2 { font-size: clamp(48px, min(6.5vw, 12dvh), 106px); margin: 0; }
.guarantee-copy { width: min(100%, 55dvh, 620px); justify-self: center; margin: 0; row-gap: 18px; }
.guarantees { --guarantee-cell: clamp(44px, 7.5dvh, 62px); }
.guarantee-copy > p { font-size: clamp(20px, min(1.8vw, 3.6dvh), 28px); line-height: 1.25; }
.guarantees::before { box-shadow: 0 0 0 14px #030a1705, 0 0 0 28px #030a1703; }
.guarantees .ambient-wave { animation-name: guarantee-contained-wave; }
@keyframes guarantee-contained-wave { 0% { transform: scale(.88); opacity: 0; } 20% { opacity: .3; } 100% { transform: scale(1.045); opacity: 0; } }
.contact .contact-layout > :first-child { transform: none; }
.contact .campaign-contact-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px 0 8px 10px; margin: 0 0 8px; font-size: 12px; line-height: 1.35; white-space: normal; }
.campaign-contact-summary strong { margin: 0; font-size: 12px; }
.campaign-summary-values { grid-column: 1 / -1; display: grid; min-width: 0; }
.campaign-summary-values > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.campaign-contact-summary .campaign-edit { grid-column: 2; grid-row: 1; align-self: start; margin: 0; padding: 0; font-size: 12px; }
@media (max-width: 1180px) and (max-height: 760px) {
  .contact-actions:has(.campaign-contact-summary) > p { display: none; }
  .contact .contact-form:has(.campaign-contact-summary) { margin-top: 12px; }
}
@media (min-width: 1181px) {
  #contact { display: flex; padding-block: clamp(28px, 5dvh, 60px); }
  .contact-layout { width: 100%; height: 100%; min-height: 0; align-items: center; }
  .contact-layout > :first-child { height: 100%; min-height: 0; display: flex; flex-direction: column; }
  .contact .section-index { margin-bottom: clamp(16px, 3dvh, 30px); }
  .contact h2 { font-size: clamp(42px, min(4.8vw, 8.4dvh), 76px); }
  .contact .contact-mascot { order: 3; position: static; inset: auto; transform: none; flex: 1 1 0; min-height: 0; height: 0; width: min(100%, 38dvh); max-width: none; max-height: none; object-fit: contain; object-position: right center; margin: 20px 28px 0 auto; }
  .contact-actions { margin: 0; align-self: center; }
  .contact-form { margin-top: clamp(20px, 4dvh, 46px); }
  .contact-actions > p { font-size: clamp(16px, 2.5dvh, 19px); }
  .contact-field input { min-height: clamp(44px, 8dvh, 68px); padding-block: 12px; }
}
@media (min-width: 721px) and (max-width: 1050px) {
  .deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); }
  .models.section { grid-template-rows: minmax(0, .25fr) minmax(0, .75fr); }
}
@media (max-width: 900px) {
  .process-layout { align-items: stretch; }
  .process-list p { font-size: clamp(19px, min(5.5vw, 3.8dvh), 28px); }
  #guarantees { padding-block: clamp(26px, 4dvh, 42px); }
  .guarantee-layout { display: grid; grid-template-rows: auto auto minmax(0, 1fr); row-gap: 16px; align-items: center; }
  .guarantee-layout h2 { font-size: clamp(36px, min(9vw, 6.7dvh), 54px); }
  .guarantee-layout h2 em { display: inline; }
  .guarantee-copy { width: min(100%, 470px); align-self: center; justify-self: start; margin: 0; }
  .guarantee-copy li { min-height: 0; height: clamp(36px, 6.5dvh, 54px); }
  .guarantee-copy > p { font-size: clamp(19px, 3.5dvh, 24px); }
}
@media (max-width: 720px) {
  .hero-copy.shell { height: auto; }
  .hero .hero-art { overflow: visible; background-image: none; -webkit-mask-image: none; mask-image: none; }
  .hero .hero-art::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    filter: none; opacity: 1; transform: none; animation: none;
    background: url('/elvion-assets/hero-art-v39.webp') right bottom / auto 100% no-repeat;
    -webkit-mask-image: linear-gradient(transparent, #000 54px); mask-image: linear-gradient(transparent, #000 54px);
  }
  .hero .hero-motion-canvas { -webkit-mask-image: linear-gradient(transparent, #000 54px); mask-image: linear-gradient(transparent, #000 54px); }
  .hero .hero-art:has(.hero-motion-canvas:not([hidden]))::after { display: none; }
  .hero .hero-art::before {
    content: ''; position: absolute; pointer-events: none; bottom: calc(100% - 54px);
    right: -4%; width: 20%; height: 150px; transform: skewX(-26deg); transform-origin: bottom center;
    background: linear-gradient(90deg, transparent, #d8a50085 16%, #f7c000e8 43%, #ffce09e8 75%, #f2b80099);
    filter: blur(6px);
    -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
  }
  .hero > .hero-rays { inset: 0; z-index: 2; opacity: .65; }
  .hero-rays > span { inset: -10% -62% -8% 28%; transform-origin: 100% 20%; background: linear-gradient(132deg, transparent 35%, #f5bf0010 42%, #ffe5a34f 48%, #f5bf0033 53%, transparent 62%); filter: blur(10px); }
  .hero-rays > span:nth-child(2) { inset: -8% -55% -10% 35%; opacity: .2; }
  .hero-rays > span:nth-child(3) { display: none; }
  .models.section { grid-template-rows: clamp(78px, 16dvh, 130px) minmax(0, 1fr); padding-block: clamp(16px, 3.5dvh, 28px); gap: clamp(12px, 2.4dvh, 20px); }
  .models .models-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px; }
  .models-heading-copy .section-index { margin-bottom: 10px; font-size: 10px; line-height: 1.3; }
  .models .models-intro h2 { font-size: clamp(30px, 8.8vw, 38px); line-height: 1; }
  .deliverables { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(11, minmax(0, 1fr)); }
  .deliverables li { padding-block: 3px; gap: 12px; }
  .deliverables img { width: clamp(22px, 3.8dvh, 30px); height: clamp(22px, 3.8dvh, 30px); flex-basis: clamp(22px, 3.8dvh, 30px); }
  .deliverables h3 { font-size: clamp(14px, 2.25dvh, 16px); line-height: 1.2; }
  .process-title { align-self: auto; }
  #markets { padding-block: clamp(28px, 5.5dvh, 54px); }
  .market-elvik { width: min(176px, 25dvh); }
  .guarantee-copy { row-gap: 14px; }
}