/* Japan Luggage Express homepage prototype — isolated page styles. */

#jle-home-page {
      --navy: #123c5a;
      --blue: #1678b8;
      --blue-dark: #0b5f98;
      --sky: #eaf6fc;
      --ice: #f5fbfe;
      --ink: #213647;
      --muted: #5c7180;
      --line: #d9e8ef;
      --white: #fff;
      --shadow: 0 18px 48px rgba(24, 71, 100, .10);
      --radius: 18px;
      --content: 1180px;
    }
#jle-home-page * { box-sizing: border-box; }
#jle-home-page {
      margin: 0;
      color: var(--ink);
      background: var(--white);
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.65;
    }
#jle-home-page a { color: var(--blue-dark); }
#jle-home-page a:focus-visible, #jle-home-page summary:focus-visible { outline: 3px solid #68c5f2; outline-offset: 3px; }
#jle-home-page .wrap { width: min(var(--content), calc(100% - 44px)); margin-inline: auto; }
#jle-home-page .button { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 0 21px; border: 0; border-radius: 7px; background: var(--blue); color: white; font-size: .91rem; font-weight: 750; text-decoration: none; box-shadow: 0 7px 17px rgba(22,120,184,.19); transition: background .18s ease, transform .18s ease; }
#jle-home-page .button:hover { color: white; background: var(--blue-dark); transform: translateY(-1px); }
#jle-home-page .hero { position: relative; overflow: hidden; min-height: 560px; padding:0; display: flex; align-items: center; background: #eef8fc; }
#jle-home-page .hero-photo { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: none; object-fit: contain; object-position: right center; }
#jle-home-page .hero:before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, #f0f9fd 0%, #f0f9fd 33%, rgba(240,249,253,.90) 42%, rgba(240,249,253,.35) 51%, rgba(240,249,253,0) 60%, rgba(240,249,253,0) 100%); }
#jle-home-page .hero-content { position: relative; z-index: 2; padding-block: 40px; }
#jle-home-page .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 17px; color: var(--blue-dark); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
#jle-home-page .eyebrow:before { content: ""; width: 24px; height: 2px; background: #42a9d5; }
#jle-home-page h1, #jle-home-page h2, #jle-home-page h3, #jle-home-page p { margin-top: 0; }
#jle-home-page h1 { max-width: 590px; margin-bottom: 18px; color: var(--navy); font-size: clamp(2.45rem, 4.5vw, 4.2rem); line-height: 1.06; letter-spacing: -.055em; }
#jle-home-page .hero-copy { max-width: 510px; margin-bottom: 27px; color: #435f72; font-size: 1.11rem; }
#jle-home-page .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
#jle-home-page .button-secondary { display: inline-flex; align-items: center; min-height: 47px; padding: 0 17px; border: 1px solid #9fc9de; border-radius: 9px; color: var(--navy); background: rgba(255,255,255,.72); font-weight: 700; text-decoration: none; }
#jle-home-page .button-secondary:hover { background: white; border-color: var(--blue); }
#jle-home-page .hero-note { margin: 17px 0 0; color: #587487; font-size: .86rem; }
#jle-home-page .trustbar { background: var(--navy); color: white; }
#jle-home-page .trust-items { display: grid; grid-template-columns: repeat(4,1fr); }
#jle-home-page .trust-item { min-height: 78px; display: flex; align-items: center; justify-content: center; gap: 11px; padding: 15px; border-right: 1px solid rgba(255,255,255,.15); font-size: .91rem; font-weight: 700; text-align: center; }
#jle-home-page .trust-item:last-child { border-right: 0; }
#jle-home-page .trust-icon { color: #7dd3f2; font-size: 1.2rem; }
#jle-home-page section { padding: 88px 0; }
#jle-home-page .section-head { max-width: 700px; margin: 0 auto 38px; text-align: center; }
#jle-home-page .section-head .eyebrow { justify-content: center; }
#jle-home-page h2 { margin-bottom: 13px; color: var(--navy); font-size: clamp(1.9rem, 3vw, 2.65rem); line-height: 1.17; letter-spacing: -.04em; }
#jle-home-page .section-head p { margin-bottom: 0; color: var(--muted); font-size: 1.02rem; }
#jle-home-page .service-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; max-width: 820px; margin-inline: auto; }
#jle-home-page .service-card { position: relative; overflow: hidden; min-height: 295px; padding: 32px; border: 1px solid var(--line); border-top: 4px solid #54a9d1; border-radius: 12px; background: linear-gradient(135deg,#fff 55%,#eff8fc); box-shadow: var(--shadow); }
#jle-home-page .service-card.sea { border-top-color: #4b96b8; background: linear-gradient(135deg,#fff 55%,#eff5f7); }
#jle-home-page .service-card:after { content: ""; position: absolute; right: -55px; bottom: -75px; width: 190px; height: 190px; border-radius: 50%; background: rgba(123,202,232,.17); }
#jle-home-page .service-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 15px; color: var(--blue-dark); background: var(--sky); font-size: 1.45rem; }
#jle-home-page .service-card h3 { position: relative; z-index: 1; margin-bottom: 10px; color: var(--navy); font-size: 1.45rem; }
#jle-home-page .service-card p { position: relative; z-index: 1; max-width: 440px; margin-bottom: 20px; color: var(--muted); }
#jle-home-page .text-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none; }
#jle-home-page .text-link:after { content: "→"; transition: transform .15s ease; }
#jle-home-page .text-link:hover:after { transform: translateX(3px); }
#jle-home-page .intro { background: #faf2e3; }
#jle-home-page .couple-story { background: #fff; }
#jle-home-page .couple-story-layout { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 54px; }
#jle-home-page .couple-story-photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow); }
#jle-home-page .couple-story-copy p { color: var(--muted); }
#jle-home-page .couple-story-copy h2 { max-width: 480px; }
#jle-home-page .intro-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 68px; }
#jle-home-page .intro-copy .eyebrow { margin-bottom: 14px; }
#jle-home-page .intro-copy h2 { max-width: 500px; }
#jle-home-page .intro-copy p { color: var(--muted); }
#jle-home-page .intro-copy .button { margin-top: 7px; }
#jle-home-page .feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
#jle-home-page .feature { min-height: 145px; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: white; }
#jle-home-page .feature strong { display: block; margin-bottom: 7px; color: var(--navy); font-size: 1rem; }
#jle-home-page .feature p { margin: 0; color: var(--muted); font-size: .9rem; }
#jle-home-page .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; counter-reset: step; }
#jle-home-page .step { padding: 25px 24px 23px; border-top: 3px solid #6dc2e4; background: #f7fbfd; border-radius: 0 0 13px 13px; }
#jle-home-page .step-number { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 50%; color: white; background: var(--blue); font-weight: 800; }
#jle-home-page .step h3 { margin-bottom: 8px; color: var(--navy); font-size: 1.1rem; }
#jle-home-page .step p { margin: 0; color: var(--muted); font-size: .94rem; }
#jle-home-page .destinations { padding: 60px 0; background: #f1f8fc; }
#jle-home-page .destination-inner { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 45px; }
#jle-home-page .destination-inner h2 { margin-bottom: 8px; font-size: 1.85rem; }
#jle-home-page .destination-inner p { margin-bottom: 0; color: var(--muted); }
#jle-home-page .destination-tags { display: flex; flex-wrap: wrap; gap: 10px; }
#jle-home-page .destination-tags span { padding: 8px 14px; border: 1px solid #d1e5ef; border-radius: 999px; color: #31566e; background: white; font-size: .9rem; font-weight: 700; }
#jle-home-page .resources { background: #faf2e3; }
#jle-home-page .resource-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
#jle-home-page .resource-card { display: flex; min-height: 170px; flex-direction: column; align-items: flex-start; padding: 23px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; background: white; transition: box-shadow .18s ease, transform .18s ease; }
#jle-home-page .resource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
#jle-home-page .resource-card small { margin-bottom: 9px; color: var(--blue); font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
#jle-home-page .resource-card strong { margin-bottom: 7px; color: var(--navy); font-size: 1.05rem; }
#jle-home-page .resource-card span { color: var(--muted); font-size: .9rem; }
#jle-home-page .commercial { padding-top: 0; }
#jle-home-page .commercial-panel { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 34px 38px; border-radius: var(--radius); color: white; background: linear-gradient(115deg, #164769, #167db6); }
#jle-home-page .commercial-panel h2 { margin-bottom: 8px; color: white; font-size: 1.75rem; }
#jle-home-page .commercial-panel p { max-width: 690px; margin: 0; color: #e1f2fa; }
#jle-home-page .commercial-panel .button-secondary { flex: 0 0 auto; border-color: rgba(255,255,255,.45); color: white; background: rgba(255,255,255,.08); }
#jle-home-page .quote-band { padding: 72px 0; text-align: center; background: #faf2e3; }
#jle-home-page .quote-band h2 { margin-bottom: 12px; }
#jle-home-page .quote-band p { max-width: 650px; margin: 0 auto 24px; color: var(--muted); }
#jle-home-page .phone-note { margin: 15px 0 0; color: #435f72; font-size: .92rem; }
#jle-home-page .phone-note a { color: var(--blue-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1100px) {
    
}
@media (max-width: 880px) {
#jle-home-page .hero { min-height: 530px; }
#jle-home-page .intro-layout { gap: 35px; }
#jle-home-page .couple-story-layout { gap: 30px; }
    
}
@media (max-width: 640px) {
#jle-home-page .wrap { width: min(100% - 32px, var(--content)); }
#jle-home-page .hero { min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding-top: 0; }
#jle-home-page .hero-photo { padding-top: 0; position: relative; inset: auto; display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; object-position: center; }
#jle-home-page .hero:before { display: none; }
#jle-home-page .hero-content { padding-block: 30px 40px; }
#jle-home-page .couple-story-layout { grid-template-columns: 1fr; }
#jle-home-page h1 { max-width: 520px; margin-bottom: 13px; font-size: clamp(2.2rem, 10vw, 3rem); }
#jle-home-page .hero-copy { margin-bottom: 19px; font-size: 1rem; }
#jle-home-page .hero-note { margin-top: 12px; }
#jle-home-page .hero-actions { gap: 9px; }
#jle-home-page .button, #jle-home-page .button-secondary { min-height: 45px; padding-inline: 14px; font-size: .86rem; }
#jle-home-page .trust-items { grid-template-columns: 1fr 1fr; }
#jle-home-page .trust-item { min-height: 63px; padding: 11px 8px; border-bottom: 1px solid rgba(255,255,255,.15); font-size: .82rem; }
#jle-home-page .trust-item:nth-child(2) { border-right: 0; }
#jle-home-page .trust-item:nth-child(n+3) { border-bottom: 0; }
#jle-home-page section { padding: 64px 0; }
#jle-home-page .section-head { margin-bottom: 28px; }
#jle-home-page .service-grid, #jle-home-page .intro-layout, #jle-home-page .steps, #jle-home-page .resource-grid, #jle-home-page .destination-inner { grid-template-columns: 1fr; }
#jle-home-page .service-card { min-height: 0; padding: 25px; }
#jle-home-page .intro-layout { gap: 28px; }
#jle-home-page .feature-list { gap: 10px; }
#jle-home-page .feature { min-height: 140px; padding: 17px; }
#jle-home-page .steps { gap: 13px; }
#jle-home-page .destinations { padding: 48px 0; }
#jle-home-page .destination-inner { gap: 20px; }
#jle-home-page .resource-card { min-height: 140px; }
#jle-home-page .commercial { padding-top: 0; }
#jle-home-page .commercial-panel { align-items: flex-start; flex-direction: column; padding: 27px 23px; }
#jle-home-page .quote-band { padding: 58px 0; }
    
}
@media (prefers-reduced-motion: reduce) {
#jle-home-page *, #jle-home-page *:before, #jle-home-page *:after { transition-duration: .01ms !important; } 
}
  
/* Local corrections for the shared fixed header; no common file is changed. */
#main-content { padding:60px 0 0; margin:0; width:100%; max-width:none; }
body.jle-home-document > footer { top:0; }
#jle-home-page { font-size:16px; width:100%; min-width:0; overflow-wrap:break-word; }
#jle-home-page *, #jle-home-page *::before, #jle-home-page *::after { box-sizing:border-box; }
#jle-home-page img { border:0; }
#jle-home-page .intro { position:relative; }


#jle-home-page .feature, #jle-home-page .service-card, #jle-home-page .step { min-width:0; }
#jle-home-page .couple-story { padding:64px 0; }
#jle-home-page .couple-story-layout { gap:36px; }
#jle-home-page .couple-story-photo { display:block; width:100%; max-width:100%; height:auto; aspect-ratio:auto; object-fit:contain; align-self:center; }
#jle-home-page .couple-story-copy { min-width:0; }
@media (max-width:640px) {
 #jle-home-page .couple-story { padding:44px 0; }
 #jle-home-page .couple-story-layout { gap:24px; }
}
#jle-home-page #shipping-options { scroll-margin-top:76px; }
@media (max-width:880px) and (min-width:641px) {
 /* At tablet widths, put the intact photo above the text rather than fading it. */
 #jle-home-page .hero { min-height:0; padding:0; flex-direction:column; align-items:stretch; }
 #jle-home-page .hero-photo { position:relative; inset:auto; width:100%; max-width:100%; height:auto; padding:0; opacity:1; object-fit:contain; }
 #jle-home-page .hero:before { display:none; }
 #jle-home-page .hero-content { padding-block:30px 40px; }
}
@media (max-width:640px) {


}
@media (max-width:380px) {
 #jle-home-page .feature-list { grid-template-columns:1fr; }
 #jle-home-page .feature { min-height:0; }
 #jle-home-page .eyebrow { font-size:.69rem; letter-spacing:.07em; }
}
body.jle-home-document .jle-inline-1 {display:none;visibility:hidden}
body.jle-home-document .jle-inline-2 {margin:22px 0 0;text-align:center}

/* 2026-10-20: Hero photo correction. Replace the existing TOP-only CSS file.
   Header clearance is applied once to main-content, independent of body class.
   Desktop Hero has no section padding; only the text container has vertical padding.
   The photo retains its full height and original aspect ratio. */
@media (min-width:881px) {
 #jle-home-page .hero-photo { opacity:1; padding:0; }
}