/* Resolution-specific polish. Loaded last so these rules can reconcile the
   full-page layout with small phones, landscape phones and compact laptops. */

/* On narrow phones, each life-care scene gets the full reading width. The
   containing page-frame owns the vertical scroll, so wheel/touch boundaries
   continue to hand off naturally to the next chapter. */
@media (max-width:480px), (max-width:700px) and (orientation:portrait) {
  .life-gallery,
  .fullpage-ready #life-products.life-gallery {
    height:auto;
    min-height:100dvh;
    overflow:visible;
  }
  .life-gallery-header {
    padding-bottom:24px;
  }
  .life-split-grid {
    flex:none;
    grid-template-columns:1fr;
  }
  .life-split-panel {
    min-height:max(500px,calc(100dvh - var(--nav-height)));
    container-type:inline-size;
  }
  .life-split-panel + .life-split-panel {
    border-top:1px solid #d7b48730;
    border-left:0;
  }
  .life-panel-visual {
    inset:0;
    mask-image:none;
  }
  .life-panel-shade {
    background:linear-gradient(90deg,#080c0ad9 0%,#080c0a63 48%,transparent 76%),linear-gradient(0deg,#080c0afc 4%,#080c0ad9 30%,transparent 68%);
  }
  .life-panel-copy {
    right:var(--journey-pad);
    bottom:34px;
    left:var(--journey-pad);
    width:auto;
    max-width:36ch;
  }
  .life-panel-copy h3 {
    margin-bottom:16px;
    font-size:clamp(2rem,10vw,3rem);
  }
  .life-product-role {
    margin-bottom:12px;
    font-size:.6875rem;
  }
  .life-product-description {
    max-width:30ch;
    font-size:.875rem;
    line-height:1.55;
  }
  .life-panel-copy .journey-link {
    margin-top:16px;
    min-height:44px;
    font-size:.8125rem;
  }
  .life-pair-caption {
    position:relative;
    right:auto;
    bottom:auto;
    display:block;
    padding:12px var(--journey-pad) 18px;
    text-align:right;
    font-size:.5625rem;
  }
}

/* A landscape phone has enough width for a split composition but very little
   height. Keep the hero copy below the navigation and move the restored logo
   into its own right-hand field. */
@media (orientation:landscape) and (max-height:500px) {
  :root { --nav-height:56px; }
  .site-nav {
    height:var(--nav-height);
    padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));
  }
  .fullpage-ready .vision-copy {
    right:auto;
    bottom:max(16px,env(safe-area-inset-bottom));
    left:var(--vision-gutter);
    width:min(52%,520px);
  }
  .fullpage-ready .vision-kicker {
    margin-bottom:8px;
    font-size:.6875rem;
  }
  .fullpage-ready .vision-heading {
    font-size:clamp(2.45rem,min(7vw,14dvh),4rem);
    line-height:.92;
  }
  .fullpage-ready .vision-mobile-purpose {
    max-width:34ch;
    margin-top:9px;
    font-size:.8125rem;
    line-height:1.35;
  }
  .fullpage-ready .vision-action {
    min-width:190px;
    min-height:44px;
    margin-top:12px;
    padding:10px 17px;
    font-size:.75rem;
  }
  .vision-emblem {
    top:46%;
    left:75%;
    width:min(42vw,430px);
    max-width:47%;
  }
  .vision-scene::after {
    background:linear-gradient(90deg,#0c1210cf 0%,#0c12105c 43%,transparent 70%),linear-gradient(0deg,#101714b8 0%,transparent 48%);
  }
}

/* The 701–900px landscape range otherwise inherits the tall tablet layout.
   Use the available width so the first product and Core content are visible
   without an image-only or title-only opening view. */
@media (min-width:701px) and (max-width:900px) and (orientation:landscape) and (max-height:500px) {
  .fullpage-ready .journey-header {
    padding:10px var(--journey-pad) 9px;
  }
  .fullpage-ready .journey-header h2 {
    font-size:1.25rem;
  }
  .fullpage-ready .sense-stage {
    height:auto;
    min-height:520px;
    padding:24px var(--journey-pad) 34px;
  }
  .fullpage-ready .sense-copy {
    width:48%;
  }
  .fullpage-ready .sense-copy .scene-title {
    margin:12px 0;
    font-size:clamp(2rem,5.3vw,2.75rem);
  }
  .fullpage-ready .sense-copy .scene-body {
    font-size:.875rem;
    line-height:1.5;
  }
  .fullpage-ready .sense-copy .journey-button {
    margin-top:12px;
  }
}

@media (min-width:520px) and (max-width:900px) and (orientation:landscape) and (max-height:500px) {
  .fullpage-ready .core-section {
    height:auto;
    min-height:max(100dvh,390px);
    padding:calc(var(--nav-height) + 8px) var(--journey-pad) 68px;
    justify-content:center;
  }
  .core-vision-copy {
    width:51%;
    max-width:440px;
  }
  .core-vision-copy .chapter-label {
    margin-bottom:8px;
    font-size:.6875rem;
  }
  .core-vision-copy h2 {
    margin-bottom:8px;
    font-size:clamp(3rem,7vw,4rem);
  }
  .core-tagline {
    margin-bottom:7px;
    font-size:clamp(1.15rem,2.8vw,1.5rem);
  }
  .core-description {
    font-size:.8125rem;
    line-height:1.45;
  }
  .core-vision-copy .journey-link {
    min-height:44px;
    margin-top:7px;
    font-size:.8125rem;
  }
  .core-atmosphere {
    position:absolute;
    inset:var(--nav-height) -4% 56px 45%;
    width:auto;
    height:auto;
    margin:0;
  }
  .core-horizon {
    position:absolute;
    right:var(--journey-pad);
    bottom:5px;
    left:var(--journey-pad);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:30px;
    width:auto;
  }
  .core-sequence {
    gap:16px;
  }
  .core-sequence button {
    min-height:52px;
    padding-top:8px;
  }
  .core-sequence button > span {
    font-size:.875rem;
  }
  .core-sequence button > small {
    display:none;
  }
  .core-outlook {
    padding:0;
  }
  .core-outlook p {
    display:block;
    font-size:.75rem;
  }
}

/* Compact laptop screens keep the footer comfortable to scan while still
   allowing natural internal scrolling when translated copy grows. */
@media (min-width:901px) and (max-height:800px) {
  .fullpage-ready .site-footer {
    padding-top:calc(var(--nav-height) + 14px);
    padding-bottom:14px;
  }
  .footer-top {
    padding-bottom:20px;
  }
  .footer-contact {
    padding:18px 0;
  }
  .footer-contact .journey-link {
    margin-top:10px;
  }
  .footer-columns {
    padding:22px 0;
  }
  .footer-columns h2 {
    margin-bottom:8px;
  }
  .footer-columns a,
  .footer-columns button {
    min-height:36px;
    padding:5px 0;
  }
  .footer-bottom {
    padding-top:14px;
  }
}

@media (min-width:901px) and (max-width:1050px) and (orientation:landscape) {
  .footer-top {
    grid-template-columns:1fr 1.4fr auto;
    gap:24px;
  }
  .footer-top .journey-link {
    grid-column:auto;
  }
  .footer-contact {
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:30px;
  }
  .footer-bottom {
    grid-template-columns:1fr 1.2fr 1fr;
  }
  .footer-bottom p:last-child {
    text-align:right;
  }
}