/* Shared phone and tablet finish. Desktop composition stays in the page styles. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 980px) {
  body:not(.lp-page) .sheet {
    max-height: calc(100vh - var(--header-h) - 24px);
    max-height: calc(100dvh - var(--header-h) - 24px - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body:not(.lp-page) .menu-btn { margin-left: 0; }
}

@media (max-width: 900px) {
  body.lp-page .pf-mobile nav { overscroll-behavior: contain; }
  body.lp-page .pf-mobile nav a { min-height: 48px; }
  body.lp-page .pf-service-nav > .pf-wrap { scrollbar-width: thin; }
}

@media (max-width: 700px) {
  body:not(.lp-page) { --step-pad: 20px; }
  body:not(.lp-page) header {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    padding-inline: 16px;
  }
  body:not(.lp-page) .brand { min-width: 0; min-height: 44px; display: flex; align-items: center; }
  body:not(.lp-page) .brand img { width: 110px; height: auto; }
  body:not(.lp-page) .nav-side { min-width: 0; }
  body:not(.lp-page) #nav-contact { min-height: 44px; padding: 10px 13px; font-size: 12px; }
  body:not(.lp-page) .baken-hero {
    padding: 40px 20px 48px;
    justify-content: center;
    min-height: calc(100svh - 64px);
  }
  .baken-hero > h1 { font-size: clamp(36px, 10.4vw, 56px); line-height: 1.08; max-width: 100%; }
  .baken-hero > .sub { max-width: 34ch; font-size: 16px; line-height: 1.6; margin-top: 14px; }
  .baken-hero > .sub br { display: none; }
  .baken-hero .dots { margin-top: 24px; }
  /* Natural height follows optional fields, validation and the email draft. */
  #lead.steps { min-height: 0 !important; margin-top: 24px; scroll-margin-top: 84px; }
  #lead > .step, #lead > .done { position: relative; display: none; }
  #lead > .step.active, #lead > .done.active { display: flex; }
  #lead .prompt { font-size: clamp(20px, 5.5vw, 26px); line-height: 1.3; }
  #lead .hint { font-size: 14px; line-height: 1.65; max-width: 36ch; }
  #lead .home-form-meta { font-size: 12px; }
  #lead [data-key="service"] .chips { gap: 10px; }
  #lead [data-key="service"] .chip { display: flex; justify-content: center; align-items: center; min-height: 52px; padding: 12px 8px; font-size: 13px; }
  #lead .controls { justify-content: center; flex-wrap: wrap; gap: 10px 16px; width: 100%; }
  #lead .field-error:not(.show), #lead .controls:has(> [hidden]:only-child) { display: none; }
  #lead :is(.btn, .btn-ghost) { min-height: 48px; }
  #lead :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { max-width: 100%; scroll-margin-block: 100px 32px; }
  #lead .big-field, #lead .telrow { min-width: 0; }
  #lead .home-optional { width: 100%; }
  #lead .home-optional summary { min-height: 44px; padding-block: 10px; }
  #lead .summary { text-align: left; }

  #what-we-do { padding-inline: 20px; padding-top: 80px; }
  #what-we-do .lv-section-heading h2 { font-size: clamp(30px, 8vw, 40px); line-height: 1.14; }
  #what-we-do .tri { margin-top: 40px; }
  #what-we-do .svc h3 { white-space: normal; font-size: clamp(28px, 7.6vw, 34px); }
  #what-we-do .svc__text p { font-size: 16px; line-height: 1.65; min-height: 0; max-width: 42ch; }
  body.lr-enhanced #what-we-do .lv-mockstage.lr-home-stage { width: 100%; margin-inline: 0; }
  body.lr-enhanced #what-we-do .lr-service-link { min-height: 52px; font-size: 14px; }
  body.lr-enhanced #what-we-do .lr-services-close { gap: 20px; margin-top: 30px; }
  body.lr-enhanced #what-we-do .lr-services-close .lv-service-cta { width: 100%; max-width: 360px; }
  #how { padding: 80px 20px 0; }
  #how > h2 { font-size: clamp(30px, 8vw, 40px); line-height: 1.16; }
  .lv-process .lv-process__grid { width: calc(100% - 40px); max-width: 480px; gap: 20px; }
  .lv-process .lv-process__visual { height: clamp(200px, 60vw, 260px); }
  .lv-process .lv-process__body { padding: 22px 22px 24px; }
  .lv-process .lv-process__body h3 { font-size: 26px; }
  .lv-process .lv-process__body > p:not(.lv-process__outcome) { font-size: 16px; line-height: 1.65; }
  body:not(.lp-page) #faq { padding-block: 80px; }
  body:not(.lp-page) #faq .faq summary { font-size: 16px; line-height: 1.45; }
  body:not(.lp-page) #faq .faq .fa p { font-size: 16px; line-height: 1.7; }
  .cta-close { padding: 48px 20px 80px; }
  .cta-close #cta-enquiry { width: 100%; max-width: 360px; }
  body:not(.lp-page) footer { padding: 44px 20px calc(92px + env(safe-area-inset-bottom)); }
  footer .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  footer .f-col { min-width: 0; }
  footer .f-col > a { display: flex; align-items: center; min-height: 44px; font-size: 14px; overflow-wrap: anywhere; }
  footer .f-base { flex-wrap: wrap; row-gap: 12px; }
}

@media (max-width: 650px) {
  body.lp-page .pf-wrap { width: calc(100% - 40px); }
  body.lp-page .pf-header:not(.fc-campaign-header) { grid-template-columns: 44px minmax(0, 1fr) max-content; gap: 8px; }
  body.lp-page .pf-header .pf-logo { min-width: 0; min-height: 44px; display: flex; align-items: center; }
  body.lp-page .pf-logo img { width: 110px; max-width: 100%; }
  body.lp-page .pf-header-contact { min-width: 0; }
  body.lp-page .pf-header-contact > a:last-child { font-size: 12px; padding-inline: 10px; }
  body.lp-page .pf-mobile nav { inset-inline: 12px; top: 72px; padding: 8px; max-height: calc(100dvh - 88px - env(safe-area-inset-bottom)); }
  body.lp-page .pf-mobile nav a { padding: 14px; }
  body.lp-page .pf-service-nav > .pf-wrap { justify-content: flex-start; gap: 24px; padding-inline: 20px; width: 100%; }
  body.lp-page .pf-service-nav a { min-height: 48px; font-size: 12px; padding-block: 15px; }
  body.lp-page :is(.cx-showcase, .cx-approach, .cx-details, .cx-faq, .lp-contact) { scroll-margin-top: 16px; }
  body.lp-page :is(.cx-hero, .cx-portfolio-hero) h1 { font-size: clamp(32px, 8.7vw, 48px); overflow-wrap: break-word; }
  body.lp-page :is(.pf-wrap, .cx-hero, .lp-contact-panel) > * { min-width: 0; }
  body.lp-page :is(.cx-lead, .cx-section-heading > p, .ed-benefit-copy p, .cx-approach-intro > p, .cx-steps p, .cx-investment > p, .pf-faq details p, .lp-contact-copy > p, .work-intro, .ip-hero-copy > p, .ip-prose p, .ip-principles p, .ip-factor-list p, .ip-options p, .pf-support p) { font-size: 16px; line-height: 1.7; }
  body.lp-page .cx-faq .pf-faq summary, body.lp-page .pf-faq summary { font-size: 16px; line-height: 1.5; }
  body.lp-page .pf-actions { gap: 12px; }
  body.lp-page .pf-actions .pf-button { width: 100%; max-width: 360px; font-size: 14px; }
  body.lp-page .pf-actions .pf-textlink { min-height: 44px; font-size: 14px; }
  body.lp-page .pf-actions { justify-content: center; }
  body.lp-page .lp-contact-copy > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; overflow-wrap: anywhere; max-width: 100%; }
  body.lp-page .lp-contact-panel { padding: 24px 20px; }
  body.lp-page .lp-contact-fields { grid-template-columns: minmax(0, 1fr); }
  body.lp-page .lp-contact-panel :is(input, textarea, select) { min-width: 0; max-width: 100%; font-size: 16px; scroll-margin-block: 140px 32px; }
  body.lp-page :is(.lp-contact-hint, .ed-next-step, .cx-goals-note, .ed-example-note) { font-size: 12px; line-height: 1.65; }
  body.lp-page .lp-related a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
  body.lp-page .pf-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  body.lp-page .pf-footer nav { gap: 0; }
  body.lp-page .pf-footer nav > span { margin-bottom: 12px; }
  body.lp-page .pf-footer nav a { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
  body.lp-page .pf-footer-grid { column-gap: 18px; }
  body.lp-page .fc-campaign-header { padding-inline: 16px; gap: 12px; }
  body.lp-page .fc-campaign-header .pf-logo img { width: 110px; }
  body.lp-page .fc-campaign-header .pf-button { min-height: 44px; font-size: 12px; padding-inline: 12px; }
  body.lp-page .fc-campaign-header .ui-arrow { display: none; }
  body.lp-diensten .cx-path-copy > p { font-size: 16px; line-height: 1.7; }
  body.lp-diensten .lr-path-link { font-size: 14px; }
  body.lp-portfolio .work-category-copy p, body.lp-portfolio .work-live-caption p, body.lp-portfolio .work-live-instruction { font-size: 15px; line-height: 1.7; }
  body.lp-portfolio .work-hero h1 { font-size: clamp(34px, 9vw, 48px); overflow-wrap: break-word; }
  body.lp-portfolio .work-category-nav { gap: 6px; }
  body.lp-portfolio .work-category-nav a { padding-inline: 13px; font-size: 12px; }
  body.lp-portfolio .work-browser-address { min-width: 0; flex: 1; font-size: 11px; }
  body.lp-portfolio .work-live-close { font-size: 12px; min-height: 48px; }
  body.lp-portfolio .work-live-card[data-live-active="true"] .work-live-viewport { height: clamp(240px, 64svh, 640px); min-height: 0; }
  body.lp-portfolio .work-live-help { font-size: 12px; }
  body.lp-portfolio .work-live-help a { min-height: 44px; }
  body.lp-portfolio .work-live-external { font-size: 14px; }
}

/* A chat on a phone in either orientation is one usable, keyboard-aware panel. */
@media (max-width: 767px), (hover: none) and (max-height: 500px) {
  .bkn-chat.is-open { z-index: 320; }
  body.levren-chat-open { overflow: hidden; }
  .bkn-chat.is-open .bkn-chat__toggle { display: none; }
  .bkn-chat .bkn-chat__panel {
    position: fixed; inset: var(--chat-top, 0px) 0 auto;
    width: 100%; max-width: 100%; height: var(--chat-height, 100dvh);
    max-height: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .bkn-chat .bkn-chat__close {
    position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px;
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; background: #f0f4f9; color: #102440; cursor: pointer;
  }
  .bkn-chat .bkn-chat__close svg { width: 16px; height: 16px; }
  .bkn-chat .bkn-chat__head { padding-top: max(20px, env(safe-area-inset-top)); padding-right: 66px; }
  .bkn-chat .bkn-chat__fine { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  body .bkn-chat .bkn-opt { min-height: 44px; }
  .bkn-chat .bkn-chat__log { overscroll-behavior: contain; }
  body:not(.levren-chat-open):has(input:focus, textarea:focus, select:focus) .bkn-chat { visibility: hidden; pointer-events: none; }
  body:has(.pf-mobile[open], #menubtn[aria-expanded="true"]) .bkn-chat:not(.is-open) { visibility: hidden; }
  .lv-reviews .lv-review__read { min-height: 44px; }
  .lv-review-dialog { max-height: calc(100dvh - 32px); }
}

@media (max-width: 370px) {
  body.lp-page .pf-header:not(.fc-campaign-header) { gap: 5px; padding-inline: 10px; }
  body.lp-page .pf-header .pf-logo img { width: 100px; }
  body.lp-page .pf-header-contact > a:last-child { font-size: 11px; padding-inline: 8px; }
  body.lp-page .ed-benefit-copy, body.lp-page .cx-investment { padding-inline: 20px; }
  body.lp-page .cx-goals { padding-inline: 16px; }
  body.lp-page .cx-goal-options a { gap: 9px; padding-inline: 12px; }
  body.lp-portfolio .work-category-nav a { padding-inline: 11px; }
  .lv-process .lv-process__body { padding-inline: 20px; }
}

@media (max-width: 980px) and (max-height: 500px) {
  body:not(.lp-page) .baken-hero { min-height: 0; padding-top: 32px; padding-bottom: 44px; }
  .hero-light__ribbon, .hero-light__caustic { animation: none; }
  body.lp-portfolio .work-live-card[data-live-active="true"] .work-live-viewport { height: 65svh; min-height: 200px; }
}