/* Device layouts are isolated from the approved desktop composition. */
@media (max-width:1180px), (pointer:coarse) and (max-width:1366px) {
  :root { --space:clamp(20px,4.5vw,48px); --header-height:80px; }
  .page-home, .page-technology, .page-solutions { background:#f0f1ef; }
  .technical-step:not(.is-active), .product-step:not(.is-active) { visibility:hidden; }
  .site-header, .page-technology .site-header, .page-solutions .site-header, .page-faq .site-header {
    position:fixed; height:var(--header-height); background:#f0f1eff5; backdrop-filter:blur(12px);
  }
  .nav { gap:22px; }
  .nav a { white-space:nowrap; }
  .home-sticky, .technical-sticky, .product-sticky { height:100svh; min-height:0; }
  .home-story { height:440svh; }
  .technical-story { height:370svh; }
  .product-story { height:500svh; }
  .home-sticky { --visual-top:320px; }
  .technical-sticky, .product-sticky { --visual-top:290px; }
  .optical-host { inset:var(--visual-top) 0 76px; }
  .home-intro, .home-micro-copy, .page-home .home-outro {
    top:calc(var(--header-height) + 24px); left:var(--space); right:var(--space); max-width:none; padding:0;
  }
  .home-intro h1 { font-size:clamp(44px,6.5vw,70px); margin-bottom:18px; }
  .home-intro .positioning { font-size:17px; line-height:1.8; }
  .home-micro-copy h2 { font-size:clamp(30px,4.2vw,42px); margin-bottom:14px; }
  .home-micro-copy p:last-child { max-width:32em; font-size:16px; }
  .home-outro h2 { font-size:clamp(30px,4.6vw,46px); line-height:1.4; }
  .page-technology .technical-step, .page-technology .technical-step:nth-child(2), .page-technology .technical-step:nth-child(3),
  .page-solutions .product-step, .page-solutions .product-step:nth-child(2), .page-solutions .product-step:nth-child(3), .page-solutions .product-step:nth-child(4) {
    top:calc(var(--header-height) + 24px); left:var(--space); right:var(--space); max-width:none;
  }
  .page-technology .technical-step { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
  .page-technology .technical-description { padding-top:34px; width:auto; max-width:none; }
  .technical-step .eyebrow, .product-step .eyebrow { font-size:12px; margin-bottom:12px; }
  .technical-step h2, .product-step h2 { font-size:clamp(28px,3.8vw,38px); line-height:1.3; margin-bottom:12px; }
  .technical-description p, .page-solutions .product-step>p:last-child { font-size:15px; line-height:1.8; max-width:none; }
  .page-solutions .product-step { display:grid; grid-template-columns:1fr 1fr; gap:0 32px; }
  .product-step .eyebrow { grid-column:1 / -1; }
  .page-solutions .product-step>p:last-child { grid-column:2; grid-row:2; align-self:start; }
  .product-step h2 { grid-column:1; grid-row:2; }
  .scene-bottom { left:var(--space); right:var(--space); bottom:max(20px,env(safe-area-inset-bottom)); gap:12px; font-size:12px; }
  .scene-bottom .visual-note { font-size:11px; }
  .product-progress { gap:24px; font-size:12px; }
  .page-solutions .product-annotation>[data-product-state] {
    top:var(--annotation-y,var(--visual-top)); left:var(--annotation-x,50%); right:auto; bottom:auto; transform:translate(-50%,-100%);
    padding:0 0 12px; font-size:12px; line-height:1.5; letter-spacing:0; white-space:nowrap; color:#596166;
  }
  .page-solutions .product-annotation>[data-product-state]:after { display:none; }
  .home-note { left:var(--space); bottom:24px; font-size:11px; }
  .home-bottom { left:var(--space); right:var(--space); bottom:24px; }
  .scroll-cue { display:flex; font-size:12px; }
  .page-home .chapter-link, .page-technology .chapter-link, .page-solutions .chapter-link, .page-faq .faq-ending {
    padding:54px var(--space) 64px; min-height:0; gap:32px;
  }
  .chapter-link h2 { font-size:clamp(32px,4.8vw,48px); }
  .text-link { font-size:15px; padding:10px 0; white-space:normal; }
  .site-footer.contact-footer { min-height:0; padding:48px var(--space); }
  .contact-content { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; }
  .contact-intro p, .contact-company h3 { font-size:18px; line-height:1.85; }
  .contact-intro br { display:none; }
  .contact-company h3 { margin-bottom:20px; }
  .contact-details { grid-auto-rows:minmax(32px,auto); row-gap:12px; }
  .contact-details>div { grid-template-columns:64px minmax(0,1fr); gap:16px; align-items:start; }
  .contact-details dd { overflow-wrap:anywhere; }
  .contact-details a { min-height:32px; }
  .faq-section { padding:calc(var(--header-height) + 36px) var(--space) 24px; }
  .faq-intro, .faq-item { grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:36px; }
  .faq-section h1 { font-size:36px; }
  .faq-intro>p, .faq-answer p { font-size:16px; line-height:1.85; }
  .faq-question h2 { font-size:24px; }
  .faq-item { scroll-margin-top:calc(var(--header-height) + 20px); }
  .has-static-visual .home-story, .has-static-visual .home-sticky { min-height:680px; height:100svh; }
  .has-static-visual .home-optics { background: url('./assets/home-display-dunes.webp') center / contain no-repeat; }
  .has-static-visual .technical-visual { display:none; }
  .has-static-visual .technical-sticky .scene-bottom { display:none; }
  .has-static-visual .technical-step { visibility:visible; }
  .has-static-visual .technical-sticky { padding:calc(var(--header-height) + 12px) var(--space) 48px; }
  .has-static-visual .page-technology .technical-step { display:block; padding-top:32px; }
  .has-static-visual .page-technology .technical-description { padding-top:0; }
  .has-static-visual .static-capabilities { padding:calc(var(--header-height) + 32px) var(--space) 24px; }
  .has-static-visual .static-capabilities figure { gap:32px; }
}

@media (max-width:850px) {
  .menu-toggle { display:block; min-width:64px; min-height:44px; }
  .nav { display:none; position:absolute; top:calc(var(--header-height) - 4px); left:var(--space); right:var(--space); max-height:calc(100svh - var(--header-height) - 20px); overflow-y:auto;
    background:#fffffff5; border:1px solid #d9dcdc; box-shadow:0 15px 40px #252f3510; padding:16px 24px; flex-direction:column; align-items:stretch; gap:4px; backdrop-filter:blur(12px); }
  .nav.open { display:flex; }
  .nav a { font-size:16px; padding:12px 0; min-height:48px; }
  .nav a[aria-current=page]:after { width:30px; }
  .contact-content { grid-template-columns:1fr; gap:32px; }
  .contact-intro p { max-width:36em; }
}

@media (max-width:700px) {
  :root { --header-height:72px; }
  .brand { gap:10px; }
  .brand img { width:32px; height:32px; }
  .brand span { font-size:15px; }
  .home-intro, .home-micro-copy, .page-home .home-outro,
  .page-technology .technical-step, .page-technology .technical-step:nth-child(2), .page-technology .technical-step:nth-child(3),
  .page-solutions .product-step, .page-solutions .product-step:nth-child(2), .page-solutions .product-step:nth-child(3), .page-solutions .product-step:nth-child(4) { top:calc(var(--header-height) + 18px); }
  .home-intro h1 { font-size:clamp(42px,12vw,60px); margin-bottom:14px; }
  .home-intro .positioning { font-size:15px; }
  .page-technology .technical-step, .page-solutions .product-step { display:block; }
  .page-technology .technical-description { padding:0; }
  .technical-step h2, .product-step h2 { font-size:28px; margin-bottom:12px; }
  .technical-description p, .page-solutions .product-step>p:last-child { font-size:14px; line-height:1.75; }
  .home-micro-copy h2 { font-size:29px; }
  .home-micro-copy p:last-child { font-size:14px; }
  .home-outro h2 { font-size:clamp(26px,7.1vw,34px); }
  .scene-bottom { flex-wrap:wrap; bottom:max(18px,env(safe-area-inset-bottom)); gap:10px; }
  .technical-sticky .scene-bottom { display:grid; grid-template-columns:1fr auto; gap:4px 16px; }
  .technical-sticky .scene-bottom .visual-note { grid-column:1; grid-row:2; }
  .technical-sticky .fine-progress { grid-column:2; grid-row:1 / 3; width:60px; }
  .product-progress { width:100%; gap:20px; justify-content:space-between; }
  .product-progress li { padding-top:8px; }
  .product-sticky .scene-bottom { bottom:max(16px,env(safe-area-inset-bottom)); gap:8px; }
  .page-home .chapter-link, .page-technology .chapter-link, .page-solutions .chapter-link, .page-faq .faq-ending { padding:40px var(--space) 48px; gap:24px; }
  .chapter-link h2 { font-size:32px; }
  .chapter-link .text-link { align-self:flex-end; text-align:right; }
  .site-footer.contact-footer { padding:36px var(--space) max(40px,env(safe-area-inset-bottom)); }
  .contact-intro p, .contact-company h3 { font-size:17px; }
  .contact-details>div { gap:12px; }
  .faq-section { padding-top:calc(var(--header-height) + 28px); }
  .faq-intro, .faq-item { display:block; }
  .faq-intro { margin-bottom:26px; }
  .faq-section h1 { font-size:32px; margin-bottom:18px; }
  .faq-intro>p, .faq-answer p { font-size:15px; line-height:1.9; }
  .faq-item { padding:24px 0 28px; }
  .faq-question h2 { font-size:22px; line-height:1.5; max-width:none; }
  .faq-number { font-size:12px; margin-bottom:8px; }
  .faq-answer { padding-top:16px; }
  .faq-answer p+p { margin-top:12px; }
  .has-static-visual .static-capabilities figure { display:block; margin-bottom:40px; }
}

/* A short landscape viewport needs side-by-side copy and artwork. */
@media (max-width:1180px) and (max-height:550px), (pointer:coarse) and (max-width:1366px) and (max-height:550px) {
  :root { --header-height:60px; --space:24px; }
  .brand img { width:28px; height:28px; }
  .home-intro, .home-micro-copy, .page-home .home-outro,
  .page-technology .technical-step, .page-technology .technical-step:nth-child(2), .page-technology .technical-step:nth-child(3),
  .page-solutions .product-step, .page-solutions .product-step:nth-child(2), .page-solutions .product-step:nth-child(3), .page-solutions .product-step:nth-child(4) {
    display:block; top:76px; left:var(--space); right:auto; width:33%; text-align:left;
  }
  .page-technology .technical-description { padding:0; }
  .optical-host { inset:86px 0 52px 38%; }
  .home-intro h1 { font-size:34px; margin-bottom:10px; }
  .home-intro .positioning, .home-micro-copy p:last-child { font-size:12px; line-height:1.7; }
  .technical-step h2, .product-step h2, .home-micro-copy h2, .home-outro h2 { font-size:23px; margin-bottom:10px; }
  .technical-step .eyebrow, .product-step .eyebrow { font-size:10px; margin-bottom:8px; }
  .technical-description p, .page-solutions .product-step>p:last-child { font-size:12px; line-height:1.7; }
  .page-solutions .product-annotation>[data-product-state] { font-size:11px; padding-bottom:8px; }
  .scene-bottom { bottom:14px; }
  .product-progress { width:auto; gap:22px; }
  .technical-sticky .scene-bottom { display:flex; }
  .product-sticky .scene-bottom { bottom:12px; }
  .home-note, .home-bottom { bottom:16px; }
  .has-static-visual .home-story, .has-static-visual .home-sticky { min-height:380px; }
}