@charset "UTF-8";

:root{
  --bt-ink:#2d3d35;
  --bt-green:#214f3b;
  --bt-green-deep:#163d2c;
  --bt-gold:#b88f45;
  --bt-gold-soft:#dcc799;
  --bt-ivory:#fffdf8;
  --bt-cream:#f8f3ea;
  --bt-cream2:#fbf8f2;
  --bt-line:#e9e1d4;
  --bt-muted:#6e766f;
  --bt-shadow:0 16px 40px rgba(50,58,47,.09);
}

body{
  background:linear-gradient(180deg,#fffdf9 0%,#faf6ef 100%)!important;
  color:var(--bt-ink)!important;
}

/* 明るいヘッダー */
.site-header{
  background:rgba(255,253,248,.98)!important;
  color:var(--bt-green-deep)!important;
  border-top:3px solid #d7c28f!important;
  border-bottom:1px solid var(--bt-line)!important;
}
.header-inner{height:86px!important}
.brand-kicker{color:#887a5f!important}
.brand-title,.brand-title span{color:var(--bt-green-deep)!important}
.header-note{color:#7b776d!important}
.global-nav{
  background:#fffdf9!important;
  border-top:1px solid #f0e9dc!important;
  border-bottom:1px solid var(--bt-line)!important;
}
.nav-inner a{
  color:var(--bt-green-deep)!important;
  border-color:#eee7da!important;
}
.nav-inner a:hover,.nav-inner a.is-current{
  background:#f5efe5!important;
  color:var(--bt-green-deep)!important;
}
.nav-inner a.is-current:after{background:var(--bt-gold)!important}

/* TOPメイン画像 */
.hero{
  height:620px!important;
  min-height:620px!important;
  background:#e8efe9!important;
  color:var(--bt-green-deep)!important;
}
.hero-image{
  background-image:url('../../images/external-top/top-naiku.jpg')!important;
  background-position:center 48%!important;
  background-size:cover!important;
  filter:saturate(.92) brightness(1.12) contrast(.97)!important;
  transform:none!important;
}
.hero-image:before{display:none!important}
.hero-image:after{
  background:
    linear-gradient(90deg,
      rgba(255,253,248,.97) 0%,
      rgba(255,253,248,.90) 25%,
      rgba(255,253,248,.52) 44%,
      rgba(255,255,255,.06) 68%,
      rgba(255,255,255,0) 100%)!important;
}
.hero-shade{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(47,45,36,.04) 70%,rgba(47,45,36,.12))!important;
  box-shadow:none!important;
}
.hero-content{color:var(--bt-green-deep)!important}
.hero-content:before{background:var(--bt-gold)!important}
.hero-eyebrow{color:#9b793f!important}
.hero h1,.hero h1 span{
  color:var(--bt-green-deep)!important;
  text-shadow:none!important;
}
.hero-lead{
  color:#3e574b!important;
  text-shadow:none!important;
}
.button-primary{
  background:var(--bt-green-deep)!important;
  color:#fff!important;
  border-color:var(--bt-green-deep)!important;
  box-shadow:0 8px 20px rgba(30,62,44,.11)!important;
}
.button-primary:hover{background:#285942!important}
.button-ghost{
  background:rgba(255,253,248,.82)!important;
  color:var(--bt-green-deep)!important;
  border-color:#9eac9f!important;
}
.button-ghost:hover{background:#fff!important}
.hero-caption{color:#69776e!important}

/* 伊勢神宮紹介 */
.intro{
  padding:82px 0 88px!important;
  background:
    radial-gradient(circle at 12% 12%,rgba(184,143,69,.055),transparent 28rem),
    linear-gradient(180deg,#fffdf9,#faf6ee)!important;
}
.section-en{color:#9a7940!important}
.section-heading h2{color:var(--bt-green-deep)!important}
.intro-copy{color:#42534a!important}
.intro-copy .notice{
  color:#737970!important;
  border-left-color:#c1a466!important;
}
.intro-mark{
  background:linear-gradient(145deg,#fffdf8,#f1e9dc)!important;
  border-color:#cfbd96!important;
  outline-color:rgba(184,143,69,.25)!important;
  color:var(--bt-green-deep)!important;
  box-shadow:0 12px 30px rgba(58,53,42,.06)!important;
}
.intro-mark strong{color:#8a6a33!important}

/* 3つの代表コースを明るいカードに */
.featured-routes{
  padding:78px 0 86px!important;
  background:linear-gradient(180deg,#f9f5ed,#f3ecdf)!important;
  color:var(--bt-green-deep)!important;
  border-top:1px solid var(--bt-line)!important;
  border-bottom:1px solid var(--bt-line)!important;
}
.featured-routes:before{display:none!important}
.heading-light .section-en{color:#9a7940!important}
.heading-light h2{color:var(--bt-green-deep)!important}
.heading-description{color:#74756d!important}

.route-grid{gap:20px!important}
.route-card{
  height:395px!important;
  background:#fff!important;
  border:1px solid #e9e0d2!important;
  border-radius:7px!important;
  box-shadow:var(--bt-shadow)!important;
}
.route-photo{
  filter:saturate(.92) brightness(1.08) contrast(.98)!important;
}
.route-naiku .route-photo{
  background-image:url('../../images/external-top/top-naiku.jpg')!important;
  background-position:center 48%!important;
}
.route-geku .route-photo{
  background-image:url('../../images/external-top/top-geku.jpg')!important;
  background-position:center 48%!important;
}
.route-isuzu .route-photo{
  background-image:url('../../images/external-top/top-isuzu.jpg')!important;
  background-position:center 52%!important;
}
.route-overlay{
  background:linear-gradient(180deg,
    rgba(255,255,255,.00) 28%,
    rgba(34,43,36,.12) 52%,
    rgba(24,43,33,.74) 100%)!important;
}
.route-content span{color:#f2dba8!important}
.route-content h3{
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.22)!important;
}
.route-content p{color:#fff!important}
.route-content b{color:#fff3d0!important}
.routes-more a{
  color:var(--bt-green-deep)!important;
  border-color:#bca164!important;
}

/* 行程記録 */
.journey{
  padding:78px 0 86px!important;
  background:#fffdf9!important;
}
.journey-grid{border-color:var(--bt-line)!important}
.journey-grid a{border-color:var(--bt-line)!important}
.journey-grid a:hover{background:#f9f4eb!important}
.journey-grid time{color:#96783e!important}
.journey-grid strong{color:#384b41!important}

/* 最下部も暗くしすぎない */
.closing-visual{
  padding:96px 0 100px!important;
  color:var(--bt-green-deep)!important;
  background:
    linear-gradient(90deg,
      rgba(255,253,248,.94),
      rgba(255,253,248,.74) 47%,
      rgba(255,253,248,.25) 72%,
      rgba(255,255,255,.06)),
    url('../../images/external-top/top-isuzu.jpg') center 48%/cover no-repeat!important;
  background-attachment:scroll!important;
}
.closing-visual .section-en{color:#9a7940!important}
.closing-visual h2{
  color:var(--bt-green-deep)!important;
  text-shadow:none!important;
}
.closing-visual p:not(.section-en){color:#41564b!important}
.text-link{
  color:var(--bt-green-deep)!important;
  border-color:#b79a5f!important;
}

/* 明るいフッター */
.site-footer{
  background:linear-gradient(180deg,#f2ebdf,#e9dfd0)!important;
  color:#69685f!important;
  border-top:1px solid #d4bf92!important;
}
.footer-brand span{color:#8e774d!important}
.footer-brand strong{color:var(--bt-green-deep)!important}
.site-footer nav{
  border-color:#d9cfbf!important;
}
.site-footer nav a{color:#52675b!important}
.footer-note{color:#716e65!important}
.copyright{color:#999187!important}

/* 外部画像クレジット */
.external-photo-note{
  width:min(1120px,calc(100% - 56px));
  margin:0 auto 18px;
  padding-top:14px;
  border-top:1px solid rgba(130,118,91,.18);
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  font-size:10px;
  line-height:1.7;
  color:#89857c;
}
.external-photo-note a{color:#687c70;text-decoration:none}
.external-photo-note a:hover{text-decoration:underline}

@media(max-width:900px){
  .hero{height:570px!important;min-height:570px!important}
  .hero-image:after{
    background:linear-gradient(90deg,
      rgba(255,253,248,.96),
      rgba(255,253,248,.78) 58%,
      rgba(255,253,248,.20) 88%)!important;
  }
  .route-card{height:370px!important}
}
@media(max-width:620px){
  .hero{height:555px!important;min-height:555px!important}
  .hero-content{justify-content:center!important;padding-bottom:18px!important}
  .hero h1{font-size:36px!important}
  .hero-image{background-position:61% 48%!important}
  .hero-image:after{
    background:linear-gradient(90deg,
      rgba(255,253,248,.96),
      rgba(255,253,248,.84) 70%,
      rgba(255,253,248,.26))!important;
  }
  .route-card,.route-card:last-child{height:340px!important}
  .closing-visual{
    background:
      linear-gradient(90deg,rgba(255,253,248,.94),rgba(255,253,248,.72)),
      url('../../images/external-top/top-isuzu.jpg') center/cover no-repeat!important;
  }
}


/* 2026-08-22 TOP refinement: darker typography + front Ujibashi image */
:root{
  --bt-ink:#23342b;
  --bt-green:#174531;
  --bt-green-deep:#103826;
  --bt-muted:#555f59;
}

body{color:var(--bt-ink)!important}
.brand-title,.brand-title span{color:#103826!important}
.header-note{color:#5f665f!important}
.nav-inner a{color:#173f2d!important}

/* New front-facing Ujibashi hero */
.hero-image{
  background-image:url('../../images/external-top/ujibashi-front-cc0.jpg')!important;
  background-position:center 43%!important;
  background-size:cover!important;
  filter:saturate(.90) brightness(1.10) contrast(1.00)!important;
}

/* Light panel behind copy keeps the page bright while increasing legibility */
.hero-image:after{
  background:
    linear-gradient(90deg,
      rgba(255,253,248,.985) 0%,
      rgba(255,253,248,.955) 24%,
      rgba(255,253,248,.78) 39%,
      rgba(255,253,248,.25) 55%,
      rgba(255,255,255,0) 72%)!important;
}
.hero h1,.hero h1 span{
  color:#0e3524!important;
  font-weight:600!important;
}
.hero-lead{
  color:#263f33!important;
  font-weight:500!important;
}
.hero-eyebrow{color:#7f622c!important;font-weight:600!important}
.button-ghost{
  color:#133d2b!important;
  border-color:#849a8b!important;
}

/* Darken general TOP copy without losing the bright look */
.section-heading h2{color:#163d2c!important;font-weight:600!important}
.intro-copy{color:#32453a!important}
.intro-copy .notice{color:#5a625c!important}
.heading-description{color:#59635d!important}
.journey-grid strong{color:#283c31!important}
.journey-grid time{color:#735a2c!important}
.closing-visual p:not(.section-en){color:#30493c!important}

@media(max-width:620px){
  .hero-image{
    background-position:58% 44%!important;
  }
  .hero-image:after{
    background:linear-gradient(90deg,
      rgba(255,253,248,.985) 0%,
      rgba(255,253,248,.94) 70%,
      rgba(255,253,248,.40) 100%)!important;
  }
}


/* === TOP final polish 2026-08-22 === */
:root{
  --polish-ink:#1f3027;
  --polish-green:#123d2a;
  --polish-gold:#a9823d;
  --polish-line:#e5dccd;
  --polish-paper:#fffdf8;
}
body{
  color:var(--polish-ink)!important;
  font-feature-settings:"palt";
}
.container{width:min(1160px,calc(100% - 52px))!important}

/* Header: cleaner hierarchy and less visual density */
.header-inner{height:90px!important}
.brand-kicker{font-size:10px!important;letter-spacing:.25em!important}
.brand-title{font-size:31px!important;letter-spacing:.035em!important}
.header-note{font-size:11px!important;letter-spacing:.05em!important}
.nav-inner a{padding:15px 18px 13px!important}
.nav-inner a .ja{font-weight:600!important;letter-spacing:.055em!important}

/* Hero: improve balance, title readability and image presence */
.hero{height:640px!important;min-height:640px!important}
.hero-content{
  max-width:1160px!important;
  padding-top:4px!important;
}
.hero-content:before{
  width:1px!important;height:68px!important;
  margin-bottom:21px!important;
}
.hero-eyebrow{
  font-size:12px!important;
  letter-spacing:.26em!important;
  margin-bottom:14px!important;
}
.hero h1{
  max-width:650px!important;
  font-size:clamp(42px,4.5vw,64px)!important;
  line-height:1.43!important;
  letter-spacing:.045em!important;
}
.hero-lead{
  max-width:575px!important;
  margin-top:20px!important;
  font-size:16px!important;
  line-height:2.05!important;
  letter-spacing:.035em!important;
}
.hero-actions{margin-top:27px!important;gap:12px!important}
.button{
  min-width:158px!important;
  padding:12px 22px!important;
  font-size:13px!important;
  letter-spacing:.07em!important;
  border-radius:2px!important;
}
.hero-caption{
  right:24px!important;bottom:18px!important;
  padding:6px 10px!important;
  background:rgba(255,253,248,.78)!important;
  color:#4e5e55!important;
  border-radius:2px!important;
  backdrop-filter:blur(3px);
}

/* Intro: more editorial, premium whitespace */
.intro{padding:96px 0 100px!important}
.section-heading{margin-bottom:42px!important}
.section-en{
  font-size:10px!important;
  letter-spacing:.31em!important;
  margin-bottom:10px!important;
}
.section-heading h2{
  font-size:clamp(29px,3vw,40px)!important;
  line-height:1.5!important;
  letter-spacing:.075em!important;
}
.intro-grid{
  gap:72px!important;
  align-items:center!important;
}
.intro-copy{
  font-size:15.5px!important;
  line-height:2.2!important;
  letter-spacing:.025em!important;
}
.intro-copy p{margin-bottom:1.45em!important}
.intro-mark{
  width:188px!important;height:188px!important;
  border-radius:50%!important;
}
.intro-mark strong{font-size:48px!important;font-weight:400!important}

/* Routes: photo-forward but bright and restrained */
.featured-routes{padding:92px 0 100px!important}
.route-grid{gap:24px!important;margin-top:44px!important}
.route-card{
  height:430px!important;
  border-radius:3px!important;
  transition:transform .25s ease,box-shadow .25s ease!important;
}
.route-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 22px 48px rgba(50,58,47,.13)!important;
}
.route-overlay{
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 34%,
    rgba(29,38,32,.08) 51%,
    rgba(20,38,29,.76) 100%)!important;
}
.route-content{padding:0 28px 27px!important}
.route-content span{font-size:10px!important;letter-spacing:.22em!important}
.route-content h3{
  margin:6px 0 8px!important;
  font-size:30px!important;
  letter-spacing:.065em!important;
  font-weight:500!important;
}
.route-content p{font-size:13px!important;line-height:1.7!important}
.route-content b{font-size:12px!important;letter-spacing:.08em!important}
.routes-more{margin-top:38px!important}

/* Journey: reduce cramped feel */
.journey{padding:94px 0 100px!important}
.journey-grid{
  margin-top:42px!important;
  border-top:1px solid var(--polish-line)!important;
}
.journey-grid a{
  min-height:74px!important;
  padding:16px 20px!important;
}
.journey-grid time{
  font-size:11px!important;
  letter-spacing:.08em!important;
}
.journey-grid strong{
  font-size:15px!important;
  line-height:1.55!important;
  font-weight:600!important;
}

/* Closing section */
.closing-visual{padding:112px 0 118px!important}
.closing-visual h2{
  font-size:clamp(30px,3.2vw,43px)!important;
  line-height:1.55!important;
  letter-spacing:.075em!important;
}
.closing-visual p:not(.section-en){
  max-width:620px!important;
  font-size:15px!important;
  line-height:2.05!important;
}
.text-link{
  margin-top:18px!important;
  padding-bottom:5px!important;
  font-weight:600!important;
}

/* Footer */
.footer-inner{padding-top:43px!important;padding-bottom:34px!important}
.footer-brand strong{font-size:23px!important}
.site-footer nav a{font-size:12px!important}
.external-photo-note{
  margin-top:20px!important;
  margin-bottom:20px!important;
  color:#797a73!important;
}

/* Responsive polish */
@media(max-width:900px){
  .container{width:min(100% - 34px,1160px)!important}
  .hero{height:600px!important;min-height:600px!important}
  .hero h1{font-size:48px!important}
  .intro-grid{gap:42px!important}
  .route-grid{gap:15px!important}
  .route-card{height:390px!important}
}
@media(max-width:620px){
  .container{width:calc(100% - 28px)!important}
  .header-inner{height:78px!important}
  .brand-title{font-size:25px!important}
  .header-note{display:none!important}
  .hero{height:590px!important;min-height:590px!important}
  .hero-content:before{height:46px!important;margin-bottom:14px!important}
  .hero h1{
    font-size:37px!important;
    line-height:1.48!important;
    max-width:94%!important;
  }
  .hero-lead{
    font-size:14px!important;
    line-height:1.9!important;
    max-width:91%!important;
  }
  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:min(100%,350px)!important;
  }
  .button{
    min-width:0!important;
    padding:11px 10px!important;
    text-align:center!important;
  }
  .hero-caption{font-size:9px!important;right:12px!important;bottom:10px!important}
  .intro{padding:70px 0 74px!important}
  .section-heading{margin-bottom:30px!important}
  .section-heading h2{font-size:29px!important}
  .intro-grid{gap:32px!important}
  .intro-mark{width:154px!important;height:154px!important}
  .intro-mark strong{font-size:41px!important}
  .featured-routes{padding:70px 0 76px!important}
  .route-grid{margin-top:30px!important}
  .route-card,.route-card:last-child{height:355px!important}
  .journey{padding:70px 0 76px!important}
  .journey-grid a{min-height:68px!important;padding:13px 12px!important}
  .journey-grid strong{font-size:13px!important}
  .closing-visual{padding:78px 0 82px!important}
}


/* === Smartphone image visibility fix === */
@media(max-width:620px){
  /* Use a dedicated mobile crop so Uji Bridge and torii remain recognizable */
  .hero-image{
    background-image:url('../../images/external-top/ujibashi-mobile.jpg')!important;
    background-position:center 45%!important;
    background-size:cover!important;
    filter:saturate(.94) brightness(1.08) contrast(1.02)!important;
  }

  /* Keep text readable without whitening out most of the photo */
  .hero-image:after{
    background:linear-gradient(
      90deg,
      rgba(255,253,248,.94) 0%,
      rgba(255,253,248,.86) 48%,
      rgba(255,253,248,.45) 72%,
      rgba(255,255,255,.08) 100%
    )!important;
  }

  /* Move copy slightly upward/left so more of bridge remains visible */
  .hero-content{
    justify-content:center!important;
    padding-bottom:6px!important;
  }

  /* Bottom visual: make the Isuzu River clearly visible on phones */
  .closing-visual{
    background:
      linear-gradient(
        90deg,
        rgba(255,253,248,.80) 0%,
        rgba(255,253,248,.58) 55%,
        rgba(255,253,248,.22) 100%
      ),
      url('../../images/external-top/top-isuzu.jpg') center 52%/cover no-repeat!important;
  }
  .closing-visual h2{
    text-shadow:0 1px 0 rgba(255,255,255,.55)!important;
  }
  .closing-visual p:not(.section-en){
    color:#243b30!important;
    font-weight:500!important;
  }
}

/* Tablet portrait gets a slightly clearer photo too */
@media(min-width:621px) and (max-width:900px){
  .hero-image{
    background-position:center 45%!important;
    filter:saturate(.93) brightness(1.09) contrast(1.01)!important;
  }
  .hero-image:after{
    background:linear-gradient(
      90deg,
      rgba(255,253,248,.95) 0%,
      rgba(255,253,248,.87) 40%,
      rgba(255,253,248,.34) 67%,
      rgba(255,255,255,.05) 100%
    )!important;
  }
  .closing-visual{
    background:
      linear-gradient(90deg,rgba(255,253,248,.82),rgba(255,253,248,.48) 58%,rgba(255,253,248,.14)),
      url('../../images/external-top/top-isuzu.jpg') center 50%/cover no-repeat!important;
  }
}


/* ==========================================================
   TOP FINAL FINISH — 2026-08-22
   Final spacing / typography / cards / mobile refinement only
   ========================================================== */

/* Overall rhythm */
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{width:min(1140px,calc(100% - 52px))!important}

/* Header */
.site-header{box-shadow:0 2px 12px rgba(42,45,36,.025)!important}
.header-inner{height:88px!important}
.brand-title{font-weight:600!important}
.global-nav{box-shadow:0 3px 12px rgba(42,45,36,.018)!important}
.nav-inner a{
  transition:background-color .2s ease,color .2s ease!important;
}

/* Hero — retain the photo, improve editorial balance */
.hero{height:630px!important;min-height:630px!important}
.hero-content{
  padding-left:4px!important;
  padding-bottom:4px!important;
}
.hero h1{
  font-weight:600!important;
  letter-spacing:.035em!important;
}
.hero-lead{
  color:#263e32!important;
  letter-spacing:.025em!important;
}
.hero-actions .button{
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease!important;
}
.hero-actions .button:hover{transform:translateY(-1px)!important}

/* Intro */
.intro{padding-top:90px!important;padding-bottom:94px!important}
.intro-grid{gap:64px!important}
.intro-copy{max-width:720px!important}
.intro-mark{
  box-shadow:0 15px 34px rgba(65,55,37,.065)!important;
}

/* Route section */
.featured-routes{padding-top:86px!important;padding-bottom:92px!important}
.route-grid{gap:22px!important}
.route-card{
  height:415px!important;
  overflow:hidden!important;
}
.route-photo{
  transition:transform .55s ease,filter .3s ease!important;
}
.route-card:hover .route-photo{
  transform:scale(1.018)!important;
  filter:saturate(.95) brightness(1.09) contrast(.99)!important;
}
.route-content{
  padding-left:26px!important;
  padding-right:26px!important;
  padding-bottom:25px!important;
}
.route-content h3{line-height:1.35!important}
.routes-more a{
  padding-bottom:5px!important;
  font-weight:600!important;
}

/* Journey */
.journey{padding-top:86px!important;padding-bottom:92px!important}
.journey-grid{
  background:rgba(255,255,255,.48)!important;
}
.journey-grid a{
  transition:background-color .18s ease!important;
}
.journey-grid strong{letter-spacing:.015em!important}

/* Closing */
.closing-visual{
  padding-top:102px!important;
  padding-bottom:108px!important;
}
.closing-visual .container{position:relative!important}
.closing-visual h2{max-width:720px!important}
.closing-visual p:not(.section-en){max-width:610px!important}

/* Footer */
.external-photo-note{
  line-height:1.8!important;
  opacity:.88!important;
}
.footer-inner{padding-top:39px!important;padding-bottom:31px!important}

/* Tablet */
@media(min-width:621px) and (max-width:900px){
  .container{width:calc(100% - 38px)!important}
  .hero{height:590px!important;min-height:590px!important}
  .hero h1{font-size:46px!important}
  .hero-lead{max-width:520px!important}
  .route-card{height:380px!important}
}

/* Smartphone — treat as a separate composition */
@media(max-width:620px){
  .container{width:calc(100% - 30px)!important}

  .site-header{position:relative!important}
  .header-inner{
    height:76px!important;
    padding-left:1px!important;
    padding-right:1px!important;
  }
  .brand-kicker{font-size:9px!important}
  .brand-title{font-size:24px!important}
  .global-nav{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  .global-nav::-webkit-scrollbar{display:none!important}
  .nav-inner{
    width:max-content!important;
    min-width:100%!important;
  }
  .nav-inner a{
    min-width:91px!important;
    padding:12px 12px 11px!important;
    font-size:12px!important;
  }

  /* Hero */
  .hero{
    height:570px!important;
    min-height:570px!important;
  }
  .hero-content{
    align-items:flex-start!important;
    justify-content:center!important;
    padding-top:42px!important;
    padding-bottom:0!important;
  }
  .hero-content:before{
    height:39px!important;
    margin-bottom:12px!important;
  }
  .hero-eyebrow{
    font-size:10px!important;
    letter-spacing:.20em!important;
    margin-bottom:11px!important;
  }
  .hero h1{
    max-width:92%!important;
    font-size:35px!important;
    line-height:1.48!important;
    letter-spacing:.025em!important;
  }
  .hero-lead{
    max-width:89%!important;
    margin-top:15px!important;
    font-size:13.5px!important;
    line-height:1.88!important;
  }
  .hero-actions{
    margin-top:20px!important;
    width:min(100%,326px)!important;
    gap:9px!important;
  }
  .button{
    font-size:12px!important;
    padding:10px 8px!important;
  }
  .hero-caption{
    max-width:76%!important;
    line-height:1.45!important;
  }

  /* Intro */
  .intro{padding:62px 0 66px!important}
  .section-heading{margin-bottom:25px!important}
  .section-en{font-size:9px!important;margin-bottom:7px!important}
  .section-heading h2{
    font-size:27px!important;
    line-height:1.5!important;
    letter-spacing:.055em!important;
  }
  .intro-grid{
    gap:26px!important;
    grid-template-columns:1fr!important;
  }
  .intro-copy{
    font-size:14px!important;
    line-height:2!important;
  }
  .intro-mark{
    width:142px!important;
    height:142px!important;
    margin:auto!important;
  }
  .intro-mark strong{font-size:38px!important}

  /* Cards: make photography clear and consistent */
  .featured-routes{padding:62px 0 68px!important}
  .route-grid{
    gap:14px!important;
    margin-top:26px!important;
  }
  .route-card,.route-card:last-child{
    height:330px!important;
    border-radius:3px!important;
  }
  .route-photo{
    filter:saturate(.96) brightness(1.10) contrast(1.00)!important;
  }
  .route-overlay{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,0) 37%,
      rgba(23,37,29,.04) 51%,
      rgba(18,35,26,.69) 100%
    )!important;
  }
  .route-content{
    padding:0 20px 20px!important;
  }
  .route-content h3{
    font-size:26px!important;
    margin:4px 0 6px!important;
  }
  .route-content p{
    font-size:12px!important;
    line-height:1.6!important;
    margin-bottom:7px!important;
  }
  .route-content b{font-size:11px!important}
  .routes-more{margin-top:27px!important}

  /* Journey */
  .journey{padding:62px 0 68px!important}
  .journey-grid{margin-top:27px!important}
  .journey-grid a{
    min-height:64px!important;
    padding:12px 10px!important;
  }
  .journey-grid time{font-size:9px!important}
  .journey-grid strong{
    font-size:12.5px!important;
    line-height:1.48!important;
  }

  /* Bottom image: image remains visible, text remains readable */
  .closing-visual{
    min-height:390px!important;
    padding:68px 0 72px!important;
    display:flex!important;
    align-items:center!important;
  }
  .closing-visual .section-en{font-size:9px!important}
  .closing-visual h2{
    max-width:88%!important;
    font-size:28px!important;
    line-height:1.52!important;
  }
  .closing-visual p:not(.section-en){
    max-width:86%!important;
    font-size:13px!important;
    line-height:1.9!important;
  }

  .external-photo-note{
    width:calc(100% - 30px)!important;
    font-size:9px!important;
    line-height:1.65!important;
  }
  .footer-inner{padding-top:31px!important;padding-bottom:27px!important}
}


/* Smartphone hero lead readability fix */
@media(max-width:620px){
  .hero-lead{
    color:#17382a!important;
    font-weight:600!important;
    text-shadow:0 1px 0 rgba(255,255,255,.72)!important;
    opacity:1!important;
  }

  /* Slightly reduce the white veil behind the right side of the photo
     while keeping enough contrast behind the text */
  .hero-image:after{
    background:linear-gradient(
      90deg,
      rgba(255,253,248,.97) 0%,
      rgba(255,253,248,.92) 44%,
      rgba(255,253,248,.68) 68%,
      rgba(255,253,248,.24) 100%
    )!important;
  }
}