:root {
  --ink: #173e38;
  --ink-deep: #0d2b27;
  --paper: #f5eee0;
  --paper-deep: #e9dfcd;
  --coral: #ed6b4d;
  --blue: #2f7892;
  --white: #fffdf7;
  --line: rgba(23, 62, 56, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; }
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.skip-link { position: fixed; top: 0; left: 1rem; transform: translateY(-120%); background: white; padding: .75rem 1rem; z-index: 100; }
.skip-link:focus { transform: translateY(0); }

.site-header { height: 86px; position: absolute; z-index: 20; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.25rem, 5vw, 5.5rem); color: var(--white); border-bottom: 1px solid rgba(255,255,255,.27); }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-family: Georgia, serif; font-weight: 700; font-size: 1.28rem; letter-spacing: -.02em; }
.brand em { font-weight: 400; }
.brand-mark { width: 38px; height: 38px; }
.site-nav { display: flex; align-items: center; gap: clamp(1.3rem, 3vw, 3rem); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.site-nav > a:not(.nav-cta) { padding: 1rem 0; position: relative; }
.site-nav > a:not(.nav-cta)::after { content: ""; position: absolute; bottom: .65rem; left: 0; width: 0; height: 1px; background: currentColor; transition: width .25s; }
.site-nav > a:hover::after { width: 100%; }
.nav-cta { border: 1px solid rgba(255,255,255,.6); padding: .75rem 1rem; display: flex; gap: 1.1rem; transition: .25s; }
.nav-cta:hover { background: var(--white); color: var(--ink); }
.menu-toggle { display: none; }

.hero { min-height: 760px; height: 100svh; color: var(--white); position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.hero > img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center 46%; animation: hero-in 1.6s ease-out both; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,29,26,.78) 0%, rgba(7,29,26,.35) 52%, rgba(7,29,26,.12) 100%), linear-gradient(0deg, rgba(7,29,26,.65), transparent 45%); }
.hero-copy { z-index: 2; position: relative; padding: 0 clamp(1.25rem, 8vw, 9rem) clamp(4rem, 9vh, 7rem); max-width: 900px; }
.eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; display: flex; align-items: center; gap: .7rem; margin: 0 0 1.3rem; }
.eyebrow span { width: 32px; height: 1px; background: var(--coral); }
.eyebrow.light span { background: #f2a487; }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; line-height: .91; letter-spacing: -.055em; margin: 0; }
h1 { font-size: clamp(4.1rem, 9.2vw, 9rem); }
h1 i, h2 i, h3 i { font-weight: 400; color: var(--coral); }
.hero-intro { max-width: 620px; font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.6; margin: 2rem 0 2.2rem; color: rgba(255,255,255,.88); }
.hero-actions { display: flex; gap: 2rem; align-items: center; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .9rem 1.25rem; border: 0; cursor: pointer; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-coral { color: white; background: var(--coral); }
.button-coral:hover { background: #d95a3d; }
.button-dark { color: var(--white); background: var(--ink); }
.button-dark:hover { background: var(--ink-deep); }
.text-link { display: inline-flex; gap: 1.5rem; align-items: center; font-size: .72rem; text-transform: uppercase; font-weight: 800; letter-spacing: .14em; border-bottom: 1px solid currentColor; padding-bottom: .35rem; }
.light-link { color: white; border-color: rgba(255,255,255,.5); }
.hero-note { z-index: 2; position: absolute; right: clamp(1.25rem, 5vw, 5.5rem); bottom: clamp(4rem, 9vh, 7rem); display: flex; align-items: flex-start; gap: .8rem; padding-left: 1.1rem; border-left: 1px solid rgba(255,255,255,.45); }
.hero-note p { margin: 0; font-size: .65rem; letter-spacing: .12em; line-height: 1.8; text-transform: uppercase; }
.hero-note strong { display: block; font-size: .76rem; color: white; }
.pulse { width: 7px; height: 7px; background: var(--coral); border-radius: 50%; margin-top: .4rem; box-shadow: 0 0 0 6px rgba(237,107,77,.18); }
.side-label { position: absolute; z-index: 2; right: -3.7rem; top: 45%; transform: rotate(90deg); margin: 0; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; }

.section-pad { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 8vw, 9rem); }
.intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10vw; align-items: end; }
h2 { font-size: clamp(3.4rem, 6.5vw, 6.8rem); }
.intro-body { padding-bottom: .5rem; max-width: 530px; }
.intro-body .lead { font-family: Georgia, serif; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.45; margin-top: 0; }
.intro-body > p:not(.lead) { color: #4d625d; margin: 1.5rem 0 2rem; }

.city-bridge { position: relative; min-height: 680px; display: flex; align-items: flex-end; overflow: hidden; color: var(--white); }
.city-bridge > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transition: transform 1s ease; }
.city-bridge:hover > img { transform: scale(1.015); }
.city-bridge-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,29,26,.82), rgba(7,29,26,.08) 72%); }
.city-bridge-copy { position: relative; z-index: 1; width: 100%; padding: clamp(3rem, 7vw, 7rem) clamp(1.25rem, 8vw, 9rem); display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem; }
.city-bridge-copy h2 { max-width: 850px; font-size: clamp(3.8rem, 7vw, 7.2rem); }
.city-bridge-copy > p:last-child { max-width: 410px; margin: 0 0 .7rem; color: rgba(255,255,255,.78); }

.experiences { padding-top: 2rem; }
.section-head { display: grid; grid-template-columns: 1.3fr .5fr; gap: 5rem; align-items: end; margin-bottom: 5rem; }
.section-head > p { color: #526963; margin: 0 0 .7rem; }
.route-line { list-style: none; margin: -2rem 0 3rem; padding: 1.3rem clamp(1rem, 3vw, 2rem); display: grid; grid-template-columns: repeat(2, 1fr); background: var(--ink); color: var(--white); }
.route-line li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; padding: .5rem clamp(.5rem, 2vw, 2rem); border-right: 1px solid rgba(255,255,255,.18); }
.route-line li:last-child { border-right: 0; }
.route-line li > span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--coral); border-radius: 50%; color: var(--coral); font-family: Georgia, serif; font-style: italic; }
.route-line strong { font-family: Georgia, serif; font-weight: 400; line-height: 1.2; }
.route-line small { color: rgba(255,255,255,.55); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.tour-card { display: grid; grid-template-columns: 1.18fr .82fr; background: var(--white); min-height: 630px; margin-bottom: 2rem; }
.tour-card.reverse { grid-template-columns: .82fr 1.18fr; }
.tour-card.reverse .tour-image { order: 2; }
.tour-image { position: relative; min-height: 600px; overflow: hidden; }
.tour-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.tour-card:hover .tour-image img { transform: scale(1.025); }
.tour-number { position: absolute; top: 1.5rem; left: 1.5rem; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); font-family: Georgia, serif; font-style: italic; }
.photo-tag { position: absolute; bottom: 0; right: 0; color: var(--ink); background: var(--paper); padding: .8rem 1rem; font-size: .62rem; font-weight: bold; text-transform: uppercase; letter-spacing: .13em; }
.tour-copy { padding: clamp(2rem, 5vw, 5rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.tour-copy h3 { font-size: clamp(3.5rem, 5vw, 5.8rem); margin-bottom: 1.8rem; }
.tour-copy > p:not(.eyebrow) { color: #52635f; max-width: 440px; margin: 0 0 1.7rem; }
.tour-facts { width: 100%; margin: 0 0 2rem; border-top: 1px solid var(--line); }
.tour-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.tour-facts dt { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.tour-facts dd { margin: 0; font-family: Georgia, serif; font-style: italic; }

.guide { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: var(--white); }
.guide-portrait { position: relative; min-height: 790px; }
.guide-portrait img { width: 100%; height: 100%; object-fit: cover; }
.guide-badge { position: absolute; right: -64px; top: 50%; transform: translateY(-50%) rotate(-8deg); width: 128px; height: 128px; border-radius: 50%; background: var(--coral); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.guide-badge strong { font-family: Georgia, serif; font-size: 1.8rem; line-height: 1; }
.guide-badge span { text-transform: uppercase; letter-spacing: .14em; font-size: .56rem; line-height: 1.4; }
.guide-copy { padding: clamp(4rem, 9vw, 9rem); display: flex; flex-direction: column; justify-content: center; }
.guide-copy h2 { margin-bottom: 2.4rem; }
.guide-lead { font-family: Georgia, serif; font-size: clamp(1.25rem, 2vw, 1.7rem); font-style: italic; line-height: 1.5; border-left: 2px solid var(--coral); padding-left: 1.5rem; }
.guide-copy > p:not(.eyebrow):not(.guide-lead) { color: rgba(255,255,255,.68); }
.guide-points { list-style: none; padding: 1.5rem 0 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.guide-points span { color: var(--coral); margin-right: .4rem; }

.day { display: grid; grid-template-columns: .75fr 1.1fr .65fr; gap: 2rem; align-items: center; overflow: hidden; }
.day-copy { padding-right: 2rem; }
.day-copy h2 { font-size: clamp(3.5rem, 5.4vw, 5.8rem); }
.day-copy > p:last-child { color: #52635f; margin-top: 2rem; }
.day-image { position: relative; }
.day-image.primary img { height: 650px; object-fit: cover; }
.day-image.secondary { transform: translateY(4rem); }
.day-image.secondary img { height: 430px; object-fit: cover; }
.day-image span, .gallery-item span { position: absolute; bottom: 0; left: 0; background: var(--paper); padding: .65rem .85rem; font-size: .6rem; font-weight: bold; letter-spacing: .13em; text-transform: uppercase; }

.gallery { background: var(--paper-deep); padding-top: 2rem; }
.gallery-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 4rem; }
.gallery-head > p { color: #52635f; }
.gallery-grid { display: grid; grid-template-columns: 1.05fr 1.15fr .85fr .85fr; height: 560px; gap: 2px; background: var(--paper); }
.gallery-item { position: relative; border: 0; padding: 0; overflow: hidden; cursor: zoom-in; background: var(--ink); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s, opacity .3s; }
.gallery-item:hover img { transform: scale(1.04); opacity: .88; }
.gallery-item span { color: var(--ink); }

.contact { background: var(--ink-deep); color: var(--white); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(4rem, 10vw, 10rem); }
.contact-copy h2 { font-size: clamp(3.6rem, 6vw, 6.5rem); }
.contact-copy > p:not(.eyebrow) { color: rgba(255,255,255,.68); max-width: 500px; margin: 2rem 0 2.8rem; }
.contact-detail { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.2); padding: .75rem 0; font-size: .67rem; text-transform: uppercase; letter-spacing: .11em; }
.contact-detail span { color: rgba(255,255,255,.5); }
.contact-email { align-self: center; background: var(--paper); color: var(--ink); padding: clamp(2rem, 5vw, 4.5rem); }
.contact-email-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 3rem; border-radius: 50%; background: var(--coral); color: white; font-family: Georgia, serif; font-size: 1.4rem; }
.contact-email p { margin: 0 0 .7rem; font-size: .67rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.contact-email a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0 1rem; border-bottom: 1px solid var(--line); font-family: Georgia, serif; font-size: clamp(1.4rem, 2.6vw, 2.65rem); line-height: 1.2; letter-spacing: -.035em; overflow-wrap: anywhere; }
.contact-email a span { flex: 0 0 auto; color: var(--coral); font-family: Arial, sans-serif; font-size: 1rem; }
.contact-email small { display: block; max-width: 430px; margin-top: 1.5rem; color: #697a76; font-size: .8rem; line-height: 1.6; }

.footer { background: #071e1b; color: rgba(255,255,255,.65); padding: 4rem clamp(1.25rem, 8vw, 9rem) 2rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; align-items: center; }
.footer-brand { color: white; }
.footer > p { font-size: .75rem; }
.footer-links { display: flex; justify-content: flex-end; gap: 2rem; text-transform: uppercase; letter-spacing: .12em; font-size: .65rem; font-weight: bold; color: white; }
.copyright { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.5rem; margin-top: 1rem; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(90vw, 1000px); max-height: 90vh; overflow: visible; }
.lightbox::backdrop { background: rgba(5,20,18,.9); backdrop-filter: blur(5px); }
.lightbox img { max-height: 84vh; width: auto; max-width: 90vw; object-fit: contain; }
.lightbox button { position: absolute; right: 0; top: -3rem; background: none; color: white; border: 0; font-size: 2rem; cursor: pointer; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }

@keyframes hero-in { from { transform: scale(1.06); opacity: .7; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .site-header { height: 72px; position: absolute; }
  .menu-toggle { position: relative; z-index: 22; width: 42px; height: 42px; padding: 11px; border: 0; background: transparent; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
  .menu-toggle span { display: block; width: 100%; height: 1px; background: white; transition: .25s; }
  .menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 0; background: var(--ink-deep); flex-direction: column; justify-content: center; align-items: flex-start; padding: 3rem; font-family: Georgia, serif; font-size: 2rem; text-transform: none; transform: translateX(100%); transition: transform .35s; }
  .menu-open .site-nav { transform: translateX(0); }
  .site-nav .nav-cta { font-family: Arial, sans-serif; font-size: .7rem; text-transform: uppercase; margin-top: 1rem; }
  .hero { min-height: 700px; }
  .hero-copy { padding-bottom: 4rem; }
  .hero-note, .side-label { display: none; }
  .city-bridge-copy { display: block; }
  .city-bridge-copy > p:last-child { margin-top: 1.5rem; }
  .intro, .section-head, .guide, .contact { grid-template-columns: 1fr; }
  .section-head { gap: 2rem; }
  .route-line { margin-top: 0; grid-template-columns: 1fr; }
  .route-line li { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); padding: .8rem .4rem; }
  .route-line li:last-child { border-bottom: 0; }
  .tour-card, .tour-card.reverse { grid-template-columns: 1fr; }
  .tour-card.reverse .tour-image { order: 0; }
  .tour-image { min-height: 480px; }
  .guide-portrait { min-height: 620px; }
  .guide-badge { right: 1rem; top: auto; bottom: -55px; transform: rotate(-8deg); }
  .day { grid-template-columns: 1fr 1fr; }
  .day-copy { grid-column: 1 / -1; max-width: 650px; padding: 0 0 2rem; }
  .day-image.primary img { height: 520px; }
  .day-image.secondary { transform: translateY(2rem); }
  .gallery-grid { grid-template-columns: 1.2fr .8fr; height: 720px; }
  .gallery-item:last-child { grid-column: auto; }
  .footer { grid-template-columns: 1fr 1fr; }
  .footer-links { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 580px) {
  .brand { font-size: 1.08rem; }
  .brand-mark { width: 32px; height: 32px; }
  .hero { min-height: 680px; }
  .hero > img { object-position: 60% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(7,29,26,.85), rgba(7,29,26,.08) 90%); }
  h1 { font-size: clamp(3.6rem, 18vw, 5rem); }
  .hero-intro { font-size: .98rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.3rem; }
  .section-pad { padding: 5rem 1.25rem; }
  .intro { gap: 2rem; }
  .experiences { padding-top: 1rem; }
  .tour-card { min-height: 0; }
  .tour-image { min-height: 410px; }
  .city-bridge { min-height: 620px; }
  .city-bridge > img { object-position: 62% center; }
  .tour-copy { padding: 2.3rem 1.4rem; }
  .guide-portrait { min-height: 520px; }
  .guide-copy { padding: 5rem 1.25rem; }
  .guide-points { grid-template-columns: 1fr; }
  .day { grid-template-columns: 1fr; gap: 1rem; }
  .day-copy { grid-column: auto; }
  .day-image.primary img, .day-image.secondary img { height: 460px; }
  .day-image.secondary { transform: none; }
  .gallery-head { display: block; padding-bottom: 3rem; }
  .gallery-head > p { margin-top: 1.5rem; }
  .gallery-grid { height: auto; grid-template-columns: 1fr; }
  .gallery-item, .gallery-item:last-child { grid-column: auto; height: 420px; }
  .contact { gap: 3rem; }
  .footer { grid-template-columns: 1fr; }
  .footer-links, .copyright { grid-column: 1; }
}
