/* Components have no desktop footprint, including before JavaScript runs. */
.phone-menu-button, .phone-menu:not([open]) { display: none; }

@media (max-width: 1099px) {
  /* Keep the no-JavaScript navigation available; replace it only after menu setup. */
  :root.phone-nav-ready .site-head nav,
  :root.phone-nav-ready .hero header nav { display: none; }
  :root.phone-nav-ready .site-head,
  :root.phone-nav-ready .hero header {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
  }
  :root.phone-nav-ready :is(.site-head,.hero header) .mark.logo {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0;
  }
  :root.phone-nav-ready :is(.site-head,.hero header) .mark.logo svg {
    width: auto;
    height: 22px;
    margin: 0;
  }
  :root.phone-nav-ready :is(.site-head,.hero header) .mark::after,
  :root.phone-nav-ready :is(.site-head,.hero header) nav::after,
  :root.phone-nav-ready :is(.site-head,.hero header) nav a::before,
  :root.phone-nav-ready :is(.site-head,.hero header) nav a::after { content: none; }
  .phone-menu-button, .phone-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: 500 16px/1.4 var(--sans);
    cursor: pointer;
  }
  .phone-menu[open] {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: max(20px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    border: 0;
    background: var(--plaster);
    color: var(--ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .phone-menu::backdrop { background: var(--plaster); }
  .phone-menu-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .phone-menu-title { font: 400 34px/1.2 var(--serif); }
  .phone-menu nav { display: grid; gap: 8px; margin: 40px 0 32px; }
  .e-page .phone-menu nav a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 12px 0;
    border-bottom: 1px solid #b08d5755;
    font: 400 28px/1.25 var(--serif);
    text-decoration: none;
  }
  .phone-menu nav a[aria-current] { font-weight: 600; }
  .e-page .phone-menu .phone-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 18px;
    background: var(--ink);
    color: var(--plaster);
    font: 500 16px/1.5 var(--sans);
    text-align: center;
    text-decoration: none;
  }
  :is(.phone-menu-button,.phone-menu-close,.phone-menu a):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }
  html.phone-menu-open, html.phone-menu-open body {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }

}

@media (max-width: 600px) {
  /* Phone hero: the complete heading, introduction and both actions fit at 667px high. */
  :root .hero { height: 100svh; min-height: 0; --h: 100svh; }
  :root .hero .copy {
    left: 24px;
    width: calc(100% - 48px);
    max-width: none;
    bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }
  :root.opt-h1 .hero h1 {
    font-size: clamp(36px, 10vw, 44px);
    line-height: 1.04;
    white-space: normal;
    max-width: 100%;
  }
  :root .hero .lede { font-size: 16px; line-height: 1.5; max-width: 34ch; margin-top: 16px; }
  :root .hero .ctas { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 20px; }
  :root .hero :is(.btn,.u-tl) { min-height: 48px; height: auto; padding-block: 12px; font-size: 15px; line-height: 1.4; }
  :root .hero .u-tl { margin-left: 0; }

  /* Intrinsic sizing and long labels must wrap within the phone's content column. */
  .e-page :is(main,.wrap,.sh > *,.c-grid > *,.form-wrap,.info,.legal > *) { min-width: 0; }
  .e-page :is(p,dd,figcaption,.tl,.btn) { overflow-wrap: anywhere; }
  .e-page .ctas, .e-page .dw-act { flex-wrap: wrap; }
  .e-page .btn { max-width: 100%; height: auto; min-height: 48px; white-space: normal; line-height: 1.4; padding-block: 14px; }
  .e-page :is(a,button,summary,label[for]) { min-width: 44px; min-height: 44px; }
  .e-page :is(.tl,.u-tl,.fn,.crumb a,.foot-line a,.table-top a,.u-cart a,.form-disclosure a),
  .e-page label[for] { display: inline-flex; align-items: center; }
  .e-page :is(button,.btn,.chips span) { font-size: 15px; }
  .e-page :is(input:not([type=checkbox]):not([type=radio]):not(.vh),select,textarea) { min-height: 44px; max-width: 100%; font-size: 16px; }
  .e-page .chips label { display: flex; align-items: center; min-height: 44px; }
  .e-page :is(.num,.tags,.p2-label,.vn-tag,.sh-tag,.d-tag,.r1-folio,.r2-compare-guide) { font-size: 14px; }
  .e-page .hero .lede { font-size: 16px; }
  .e-page .c-oak-band .sh .eyebrow { font-size: 14px; }
  .e-page .r1-team .u-cart :is(th,td,caption,.r),
  .e-page .r1-team .u-cart tr.foot :is(th,td),
  .e-page .tafel .when dt,
  .e-page .team .who span { font-size: 14px; line-height: 1.5; }
  .e-page .r1-team .u-cart th { width: auto; white-space: nowrap; overflow-wrap: normal; letter-spacing: .08em; }
  .e-page .u-cart td { overflow-wrap: anywhere; }
  .e-page .foot-line .fl > p:last-child { padding-right: 0; }
  .e-page a.olympeion-concept { min-height: 44px; max-width: calc(100% - 24px); white-space: normal; }
  .e-page [id] { scroll-margin-top: 84px; }
}

/* Round 2: additional content exists only in the small-screen layout. */
.phone-drawing-key { display: none; }

@media (max-width: 1099px) {
  .e-page a.olympeion-concept {
    position: static;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    margin: 24px 0 0;
    padding: 10px 12px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }
  .e-page :is(a,button,summary,label[for]) { min-width: 44px; min-height: 44px; }
  .e-page :is(.tl,.u-tl,.fn,.crumb a,.foot-line a,.table-top a,.u-cart a,.form-disclosure a,.award-back a),
  .e-page details.q .body a { display: inline-flex; align-items: center; }
  .e-page .btn { min-height: 48px; }
  .phone-menu nav { margin: 24px 0 20px; gap: 0; }
  .phone-menu-contact { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 12px; }
  .phone-menu-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font: 400 14px/1.5 var(--sans);
  }
  .phone-menu-contact p { width: 100%; font: 400 14px/1.5 var(--sans); }
}

@media (max-width: 700px) {
  /* SVG coordinates are preserved for desktop. Labels get clear spaces on phones. */
  .e-page.review-keuken .review-plan-cover text { font-size: 60px; }
  .review-plan-cover .phone-kastenwand { transform: translateY(24px); }
  .review-plan-cover .phone-island { transform: translateY(16px); }
  .review-plan-cover .phone-table { transform: translate(-35px, 10px); }
  .e-page.review-zolder .review-section-lead .plan text { font-size: 60px; }
  .review-section-lead .phone-bed { transform: translate(-46px, 12px); }
  .review-section-lead .phone-bank { transform: translate(-70px, 58px); }
  .review-section-lead .phone-cupboard-left { transform: translate(75px, 62px); }
  .review-section-lead .phone-cupboard-right { transform: translate(-155px, 62px); }
  .e-page.review-zolder .review-section-lead .plan > svg { overflow: visible; margin-bottom: 24px; }
}

@media (max-width: 600px) {
  .e-page .proj .table { display: block; }
  .e-page .proj .table > svg { display: block; width: 100%; height: auto; }
  .e-page .proj .table svg text { font-size: 32px; letter-spacing: 1px; }
  .e-page .proj .table figcaption { position: static; margin-top: 12px; }
  .e-page .b3-drawing figcaption span { display: block; }
  .e-page .b3-drawing .b3-place { margin-bottom: 64px; padding-right: 0; }
  .e-page .b3-drawing .b3-note-arrow { top: calc(100% + 8px); bottom: auto; right: 0; transform: none; }

  /* Replace miniature SVG lettering with readable HTML in the same figure. */
  .e-page .scan-frame .scan text[font-size="9"],
  .e-page .u-section .u-draw text,
  .e-page .ex-b .plan > svg text { display: none; }
  .e-page .scan-frame .scan text[font-size="17"] { font-size: 18px; }
  .e-page .phone-drawing-key { display: block; margin-top: 16px; font: 400 14px/1.6 var(--sans); }
  .phone-drawing-key strong { display: block; font-weight: 500; margin-bottom: 8px; }
  .phone-drawing-key dl > div { display: flex; justify-content: space-between; gap: 16px; }
  .phone-drawing-key :is(dt,dd) { font: inherit; margin: 0; }
  .phone-drawing-key ol { padding-left: 24px; }
  .phone-drawing-key p { margin-top: 12px; }

  .e-page .r1-drawing-caption .small { font-size: 14px; }
  .e-page .prices thead th { font-size: 12px; line-height: 1.5; letter-spacing: .04em; }
  .e-page.award-werkwijze .prices td { white-space: nowrap; padding-left: 12px; }
  .e-page .proj :is(dt,dd) { font-size: 14px; line-height: 1.6; }
  .e-page.award-privacy .legal h2 { margin-top: 32px; }
  .e-page.award-privacy .legal h2:first-child { margin-top: 0; }

  .e-page.award-contact .c-side .callers { align-items: start; }
  .e-page.award-contact .c-side .callers figure { margin: 0; transform: none; }
  .e-page.award-contact .c-side .callers img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
  .e-page.award-contact .form-wrap form > div > label:not(.tl) { display: flex; width: 100%; margin-bottom: 8px; }

  /* Shorten the pauses before the next chapter and the closing invitation. */
  .e-page .doorway { padding-top: 56px; padding-bottom: 48px; }
  .e-page .doorway .frame.door { margin-bottom: 28px; }
  .e-page.award-case .chapter { padding-top: 32px; }
  .e-page.review-zolder #hoofdstuk-2 { padding-top: 32px !important; }
  .e-page .ex-head { margin-bottom: 24px; }
  .e-page .c-scroll > .next { padding-block: 32px; }
  .e-page .c-scroll > .b3-result { margin-top: 32px; padding-block: 0; border-block: 0; }
  .e-page .b3-result-inner { padding-block: 32px; }

  .e-page details.q .body a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 1099px) and (hover: none) {
  .phone-keyboard-hint { display: none; }
}