/* =========================================================================
   INDIA JOURNEYS FOR JAPAN — Core Stylesheet
   -------------------------------------------------------------------------
   Design tokens live at the top. Change colors/fonts here and they apply
   across the whole site. See README.md for a plain-language guide.
   ========================================================================= */

:root{
  /* ---- Color tokens ------------------------------------------------- */
  --c-ivory:      #F6F1E7;
  --c-ivory-deep: #EFE7D8;
  --c-white:      #FFFFFF;
  --c-charcoal:   #262320;
  --c-charcoal-soft: #55504A;
  --c-green:      #2E4A3B;
  --c-green-deep: #1F332A;
  --c-terracotta: #C1603A;
  --c-terracotta-soft: #E6C3AE;
  --c-saffron:    #D89A3E;
  --c-gold:       #A9824C;
  --c-border:     rgba(38,35,32,0.12);
  --c-border-soft:rgba(38,35,32,0.07);

  /* ---- Type tokens ---------------------------------------------------- */
  --f-display: "Shippori Mincho", "EB Garamond", serif;
  --f-body: "Noto Sans JP", "Zen Kaku Gothic New", -apple-system, "Hiragino Sans", sans-serif;

  /* ---- Layout tokens --------------------------------------------------- */
  --max-w: 1240px;
  --radius: 2px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --section-pad: clamp(3.5rem, 8vw, 7rem);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--f-body);
  color: var(--c-charcoal);
  background: var(--c-ivory);
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--f-display); font-weight: 600; margin:0 0 0.6em; line-height:1.4; letter-spacing:.01em; }
p{ margin:0 0 1em; color: var(--c-charcoal-soft); }
.container{ max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* focus states for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--c-terracotta);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   Bilingual toggle — body gets .lang-ja or .lang-en, JS switches it.
   Elements are tagged with class "ja" or "en".
   ========================================================================= */
body.lang-ja .en{ display:none !important; }
body.lang-en .ja{ display:none !important; }
html[lang]{ }

/* =========================================================================
   Route-line signature motif
   A dotted horizontal line with waypoint dots — represents a journey/route.
   Reused in the hero, tour route summaries and section dividers.
   ========================================================================= */
.route-line{
  display:flex; align-items:center; gap:.5rem; width:100%;
}
.route-line .dot{
  width:7px; height:7px; border-radius:50%; background: var(--c-terracotta); flex:none;
}
.route-line .dot.hollow{ background: transparent; border:1.5px solid var(--c-terracotta); }
.route-line .seg{ flex:1 1 auto; height:1px; background: repeating-linear-gradient(90deg, var(--c-gold) 0 6px, transparent 6px 12px); min-width: 12px; }
.route-line.small .dot{ width:5px; height:5px; }

.route-steps{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 0; font-family: var(--f-body); font-size:.9rem; color: var(--c-charcoal-soft); }
.route-steps .stop{ padding: .15rem .15rem; white-space:nowrap; color:var(--c-charcoal); font-weight:600;}
.route-steps .arrow{ color: var(--c-gold); padding:0 .5rem; }

/* =========================================================================
   Image placeholder blocks
   Because licensed photography must be supplied by the site owner, every
   image slot renders as a styled placeholder with the exact file path it
   expects. Replace by dropping a real photo at that path — see README.
   ========================================================================= */
.ph{
  position:relative;
  width:100%; height:100%;
  min-height: 220px;
  background:
    linear-gradient(155deg, var(--c-green-deep) 0%, var(--c-green) 55%, var(--c-terracotta) 130%);
  overflow:hidden;
  display:flex; align-items:flex-end;
  isolation:isolate;
}
.ph::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(90deg, rgba(246,241,231,.08) 0 1px, transparent 1px 34px);
  z-index:0;
}
.ph::after{
  content:"";
  position:absolute; left:8%; right:8%; top:50%;
  height:1px;
  background: repeating-linear-gradient(90deg, rgba(246,241,231,.55) 0 6px, transparent 6px 13px);
}
.ph .ph-label{
  position:relative; z-index:1;
  margin: 0 0 1rem 1rem;
  font-size:.72rem;
  color: rgba(246,241,231,.92);
  background: rgba(31,51,42,.55);
  border: 1px solid rgba(246,241,231,.35);
  padding: .45em .8em;
  border-radius: var(--radius);
  font-family: var(--f-body);
  letter-spacing:.02em;
  backdrop-filter: blur(2px);
}
.ph.tone-2::before{ background-image: repeating-linear-gradient(90deg, rgba(246,241,231,.08) 0 1px, transparent 1px 34px); }
.ph.tone-2{ background: linear-gradient(155deg, var(--c-terracotta) 0%, var(--c-saffron) 60%, var(--c-green) 140%); }
.ph.tone-3{ background: linear-gradient(160deg, var(--c-green) 0%, var(--c-gold) 70%, var(--c-green-deep) 140%); }
.ph.tone-4{ background: linear-gradient(160deg, var(--c-charcoal) 0%, var(--c-green-deep) 65%, var(--c-terracotta) 140%); }

/* =========================================================================
   Header / Navigation
   ========================================================================= */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: rgba(246,241,231,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem clamp(1.25rem, 4vw, 3rem);
  max-width: var(--max-w); margin:0 auto;
  gap: 1.5rem;
}
.brand{ display:flex; flex-direction:column; line-height:1.15; }
.brand .brand-ja{ font-family: var(--f-display); font-size:1.28rem; letter-spacing:.04em; color: var(--c-green-deep); }
.brand .brand-en{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color: var(--c-charcoal-soft); margin-top:.15rem; }

.main-nav{ display:none; }
.main-nav ul{ display:flex; align-items:center; gap: clamp(1rem,2vw,1.9rem); }
.main-nav a{
  font-size:.92rem; color: var(--c-charcoal); position:relative; padding: .3rem 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: var(--c-terracotta); transform:scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap: .9rem; }
.lang-switch{ display:flex; align-items:center; gap:.4rem; font-size:.82rem; }
.lang-switch button{
  background:none; border:none; color: var(--c-charcoal-soft); padding:.2rem .3rem;
}
.lang-switch button[aria-pressed="true"]{ color: var(--c-terracotta); font-weight:700; border-bottom:1px solid var(--c-terracotta); }
.lang-switch .sep{ color: var(--c-border); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: .8em 1.5em; border-radius: var(--radius);
  font-size:.92rem; letter-spacing:.02em; border:1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--c-green-deep); color: var(--c-ivory); }
.btn-primary:hover{ background: var(--c-green); }
.btn-outline{ background:transparent; border-color: var(--c-charcoal); color: var(--c-charcoal); }
.btn-outline:hover{ border-color: var(--c-terracotta); color: var(--c-terracotta); }
.btn-terracotta{ background: var(--c-terracotta); color: var(--c-ivory); }
.btn-terracotta:hover{ background:#a94f2f; }
.btn-ghost-light{ background: rgba(246,241,231,.12); border-color: rgba(246,241,231,.55); color: var(--c-ivory); }
.btn-ghost-light:hover{ background: rgba(246,241,231,.92); color: var(--c-green-deep); }
.btn-sm{ padding:.55em 1.1em; font-size:.82rem; }
.btn-block{ width:100%; }

.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:38px; background:none; border:1px solid var(--c-border); border-radius: var(--radius);
}
.nav-toggle span{ display:block; height:1.5px; width:18px; background: var(--c-charcoal); margin:0 auto; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px);
  background: var(--c-ivory); z-index:80;
  transform: translateX(100%); transition: transform .3s ease;
  display:flex; flex-direction:column; padding: 1.4rem;
  box-shadow: -10px 0 30px rgba(0,0,0,.1);
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.mobile-nav ul{ display:flex; flex-direction:column; gap:0; }
.mobile-nav a{ display:block; padding: .95rem 0; border-bottom:1px solid var(--c-border-soft); font-size:1.02rem; }
.mobile-nav .mobile-cta{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.7rem; }
.nav-scrim{ position:fixed; inset:0; background:rgba(31,29,26,.4); z-index:70; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.nav-scrim.open{ opacity:1; pointer-events:auto; }

@media (min-width: 960px){
  .main-nav{ display:block; }
  .nav-toggle, .mobile-nav, .nav-scrim{ display:none; }
}

/* Sticky mobile contact bar */
.mobile-cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background: var(--c-border); border-top:1px solid var(--c-border);
}
.mobile-cta-bar a{
  background: var(--c-green-deep); color: var(--c-ivory); text-align:center; padding: .95rem .5rem; font-size:.85rem;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.mobile-cta-bar a.email{ background: var(--c-terracotta); }
@media (min-width: 960px){ .mobile-cta-bar{ display:none; } body{ padding-bottom:0 !important; } }
body{ padding-bottom: 58px; }
@media (min-width:960px){ body{ padding-bottom:0; } }

/* =========================================================================
   Hero
   ========================================================================= */
.hero{ position:relative; padding-top: clamp(2.5rem,6vw,4rem); }
.hero-grid{
  display:grid; grid-template-columns:1fr; gap: 2.5rem; align-items:center;
}
.hero-eyebrow{ display:flex; align-items:center; gap:.6rem; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color: var(--c-terracotta); margin-bottom:1.1rem; }
.hero-eyebrow .line{ width:26px; height:1px; background: var(--c-terracotta); }
.hero h1{ font-size: clamp(2rem, 5.2vw, 3.4rem); color: var(--c-green-deep); margin-bottom:.55em; }
.hero .lead{ font-size:1.06rem; max-width:46ch; margin-bottom:1.8rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.6rem; }
.hero-route{ margin-top:1.8rem; max-width: 420px; }
.hero-route .route-steps{ margin-top:.5rem; }
.hero-media{ position:relative; }
.hero-media .ph{ min-height: 320px; border-radius: var(--radius); }
@media (min-width: 900px){
  .hero-grid{ grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
  .hero-media .ph{ min-height: 480px; }
}

/* =========================================================================
   Sections / generic
   ========================================================================= */
.section{ padding: var(--section-pad) 0; }
.section-alt{ background: var(--c-white); }
.section-dark{ background: var(--c-green-deep); color: var(--c-ivory); }
.section-dark h2, .section-dark h3{ color: var(--c-ivory); }
.section-dark p{ color: rgba(246,241,231,.78); }

.section-head{ margin-bottom: 2.6rem; max-width: 62ch; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color: var(--c-terracotta); margin-bottom:.8rem; }
.eyebrow .line{ width:22px; height:1px; background: var(--c-terracotta); }
.section-head h2{ font-size: clamp(1.6rem, 3.4vw, 2.35rem); color: var(--c-green-deep); }
.section-dark .eyebrow{ color: var(--c-saffron); }
.section-dark .eyebrow .line{ background: var(--c-saffron); }

.section-foot{ margin-top: 2.4rem; display:flex; }
.section-foot.center{ justify-content:center; }

hr.divider{ border:none; border-top:1px solid var(--c-border); margin: var(--section-pad) 0; }

/* =========================================================================
   Cards — destinations / tours
   ========================================================================= */
.grid{ display:grid; gap: var(--gap); }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: 1fr; }
@media (min-width: 640px){ .grid-2{ grid-template-columns: 1fr 1fr; } .grid-4{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px){ .grid-3{ grid-template-columns: repeat(3,1fr); } .grid-4{ grid-template-columns: repeat(4,1fr); } }

.card{
  background: var(--c-white); border:1px solid var(--c-border-soft);
  border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column;
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover{ box-shadow: 0 18px 40px rgba(38,35,32,.09); transform: translateY(-3px); }
.card .ph{ aspect-ratio: 4/3; min-height:0; }
.card-body{ padding: 1.3rem 1.35rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.card-kicker{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--c-terracotta); margin-bottom:.5rem; }
.card h3{ font-size:1.18rem; color: var(--c-green-deep); margin-bottom:.35rem; }
.card .card-en{ font-size:.78rem; color: var(--c-charcoal-soft); margin-bottom:.7rem; letter-spacing:.02em; }
.card p{ font-size:.92rem; margin-bottom:1rem; }
.card-meta{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; font-size:.8rem; color: var(--c-charcoal-soft); margin-bottom:1rem; }
.card-meta span{ display:inline-flex; align-items:center; gap:.35rem; }
.card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.card-link{ font-size:.86rem; color: var(--c-green-deep); border-bottom:1px solid var(--c-gold); padding-bottom:1px; }
.card-link:hover{ color: var(--c-terracotta); border-color: var(--c-terracotta); }

.tag{
  display:inline-block; font-size:.72rem; padding:.3em .75em; border-radius: 999px;
  border:1px solid var(--c-border); color: var(--c-charcoal-soft); background: var(--c-ivory);
}

/* Category filter bar */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: 2.4rem; }
.filter-bar button{
  border:1px solid var(--c-border); background: var(--c-white); color: var(--c-charcoal-soft);
  padding:.55em 1.1em; border-radius: 999px; font-size:.84rem; transition: all .2s ease;
}
.filter-bar button[aria-pressed="true"]{ background: var(--c-green-deep); border-color: var(--c-green-deep); color: var(--c-ivory); }
.filter-bar button:hover{ border-color: var(--c-terracotta); color: var(--c-terracotta); }
.filter-bar button[aria-pressed="true"]:hover{ color: var(--c-ivory); }

/* =========================================================================
   Why-us / feature cards
   ========================================================================= */
.feature{ padding: 1.9rem 1.6rem; border:1px solid var(--c-border-soft); background: var(--c-white); border-radius: var(--radius); }
.feature .num{ font-family: var(--f-display); font-size:.85rem; color: var(--c-terracotta); margin-bottom: .9rem; letter-spacing:.05em; }
.feature h3{ font-size:1.06rem; color: var(--c-green-deep); margin-bottom:.5rem; }
.feature p{ font-size:.9rem; margin-bottom:0; }

/* =========================================================================
   Itinerary timeline
   ========================================================================= */
.timeline{ position:relative; padding-left: 2.4rem; }
.timeline::before{
  content:""; position:absolute; left: 9px; top:6px; bottom:6px; width:1px;
  background: repeating-linear-gradient(180deg, var(--c-gold) 0 6px, transparent 6px 12px);
}
.timeline-item{ position:relative; padding-bottom: 2.1rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left: -2.4rem; top:.35rem; width:9px; height:9px; border-radius:50%;
  background: var(--c-terracotta); border: 3px solid var(--c-ivory); box-shadow:0 0 0 1px var(--c-terracotta);
}
.timeline-day{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color: var(--c-terracotta); margin-bottom:.3rem; }
.timeline-item h4{ font-size:1.06rem; color: var(--c-green-deep); margin-bottom:.4rem; }
.timeline-item p{ font-size:.92rem; margin-bottom:0; }

/* =========================================================================
   Detail page layout (tours / destinations)
   ========================================================================= */
.detail-hero{ position:relative; }
.detail-hero .ph{ min-height: 300px; }
@media (min-width:900px){ .detail-hero .ph{ min-height: 420px; } }
.detail-hero-overlay{
  position:absolute; left:0; right:0; bottom:0; padding: 1.6rem 0 1.9rem;
  background: linear-gradient(0deg, rgba(31,29,26,.72) 0%, rgba(31,29,26,0) 100%);
}
.detail-hero-overlay .container{ color: var(--c-ivory); }
.detail-hero-overlay h1{ color: var(--c-ivory); font-size: clamp(1.7rem,4vw,2.6rem); margin-bottom:.5rem; }
.detail-hero-overlay .route-steps{ color: rgba(246,241,231,.85); }
.detail-hero-overlay .route-steps .stop{ color: var(--c-ivory); }

.breadcrumb{ font-size:.8rem; color: var(--c-charcoal-soft); padding: 1rem 0; }
.breadcrumb a{ color: var(--c-charcoal-soft); }
.breadcrumb a:hover{ color: var(--c-terracotta); }
.breadcrumb .sep{ margin:0 .5rem; color: var(--c-border); }

.detail-layout{ display:grid; grid-template-columns:1fr; gap: 3rem; }
@media (min-width: 980px){ .detail-layout{ grid-template-columns: 2fr 1fr; } }

.info-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
.info-list dt{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--c-terracotta); margin-bottom:.25rem; }
.info-list dd{ margin:0; font-size:.94rem; color: var(--c-charcoal); }

.gallery{ display:grid; grid-template-columns: repeat(3,1fr); gap: .7rem; margin: 1.6rem 0 2.2rem; }
.gallery .ph{ aspect-ratio: 1/1; min-height:0; }

.check-list li{ position:relative; padding-left: 1.6rem; margin-bottom:.6rem; font-size:.94rem; }
.check-list.yes li::before{ content:"○"; position:absolute; left:0; color: var(--c-green); font-size:.8em; top:.15em; }
.check-list.no li::before{ content:"×"; position:absolute; left:0; color: var(--c-terracotta); font-size:.85em; top:.1em; }

.side-card{ background: var(--c-white); border:1px solid var(--c-border-soft); border-radius: var(--radius); padding: 1.6rem; margin-bottom: 1.4rem; position:sticky; top:5.5rem; }
.side-card h3{ font-size:1.05rem; color: var(--c-green-deep); margin-bottom:.9rem; }
.side-card .btn{ margin-bottom:.7rem; }

.faq-item{ border-bottom:1px solid var(--c-border); padding: 1.2rem 0; }
.faq-item summary{ cursor:pointer; font-weight:600; color: var(--c-green-deep); list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color: var(--c-terracotta); font-family: var(--f-display); flex:none; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin-top:.9rem; font-size:.94rem; }

/* =========================================================================
   Testimonials
   ========================================================================= */
.testimonial{ background: var(--c-white); border:1px solid var(--c-border-soft); border-radius: var(--radius); padding: 1.8rem 1.7rem; position:relative; }
.testimonial .quote-mark{ font-family: var(--f-display); font-size:2.4rem; color: var(--c-terracotta-soft); line-height:1; margin-bottom:.4rem; }
.testimonial p{ font-size:.96rem; color: var(--c-charcoal); }
.testimonial .who{ font-size:.82rem; color: var(--c-charcoal-soft); margin-top:1rem; }
.testimonial .demo-tag{ display:inline-block; margin-top:.7rem; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--c-terracotta); border:1px solid var(--c-terracotta-soft); padding:.2em .6em; border-radius: var(--radius); }

/* =========================================================================
   Forms
   ========================================================================= */
.form-grid{ display:grid; grid-template-columns:1fr; gap: 1.2rem; }
@media (min-width:700px){ .form-grid.two{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field.full{ grid-column: 1/-1; }
.field label{ font-size:.86rem; color: var(--c-charcoal); font-weight:600; }
.field .req{ color: var(--c-terracotta); }
.field input, .field select, .field textarea{
  border:1px solid var(--c-border); background: var(--c-white); border-radius: var(--radius);
  padding: .8em .9em; font-family: inherit; font-size:.94rem; color: var(--c-charcoal);
}
.field textarea{ min-height: 130px; resize:vertical; }
.field small{ font-size:.78rem; color: var(--c-charcoal-soft); }
.field.error input, .field.error select, .field.error textarea{ border-color: var(--c-terracotta); }
.field .err-msg{ font-size:.78rem; color: var(--c-terracotta); display:none; }
.field.error .err-msg{ display:block; }

.checkbox-group{ display:flex; flex-wrap:wrap; gap:.6rem; }
.checkbox-group label{ display:flex; align-items:center; gap:.5rem; font-weight:400; font-size:.88rem; border:1px solid var(--c-border); padding:.5em 1em; border-radius:999px; }
.checkbox-group input{ width:auto; }

.form-note{ font-size:.82rem; color: var(--c-charcoal-soft); background: var(--c-ivory-deep); border:1px solid var(--c-border-soft); padding: 1rem 1.2rem; border-radius: var(--radius); margin-top:1.6rem; }
.form-status{ margin-top:1rem; font-size:.92rem; padding: .8em 1em; border-radius: var(--radius); display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:#EAF1EA; color: var(--c-green-deep); border:1px solid var(--c-green); }
.form-status.bad{ background:#F7E8E1; color:#8A3A1E; border:1px solid var(--c-terracotta); }

/* =========================================================================
   CTA band
   ========================================================================= */
.cta-band{ background: var(--c-green-deep); color: var(--c-ivory); padding: clamp(3rem,7vw,5rem) 0; text-align:center; }
.cta-band h2{ color: var(--c-ivory); }
.cta-band p{ color: rgba(246,241,231,.8); max-width: 56ch; margin:0 auto 1.8rem; }
.cta-band .actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer{ background: var(--c-charcoal); color: rgba(246,241,231,.82); padding: 4rem 0 1.6rem; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap: 2.4rem; margin-bottom: 2.8rem; }
@media (min-width: 720px){ .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-brand .brand-ja{ color: var(--c-ivory); font-family: var(--f-display); font-size:1.2rem; }
.footer-brand p{ color: rgba(246,241,231,.6); font-size:.88rem; margin-top:.8rem; max-width: 32ch; }
.footer-col h4{ font-family: var(--f-body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--c-saffron); margin-bottom:1.1rem; font-weight:700; }
.footer-col ul li{ margin-bottom:.65rem; }
.footer-col a{ color: rgba(246,241,231,.75); font-size:.9rem; }
.footer-col a:hover{ color: var(--c-ivory); }
.footer-bottom{ border-top:1px solid rgba(246,241,231,.14); padding-top: 1.6rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.8rem; color: rgba(246,241,231,.55); }
.footer-bottom a{ color: rgba(246,241,231,.55); }
.footer-bottom a:hover{ color: var(--c-ivory); }

/* =========================================================================
   Misc utility
   ========================================================================= */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-center{ text-align:center; }
.small{ font-size:.85rem; color: var(--c-charcoal-soft); }
.skip-link{
  position:absolute; left:-9999px; top:0; background: var(--c-terracotta); color:#fff; padding: .8em 1.2em; z-index:999;
}
.skip-link:focus{ left: 1rem; top: 1rem; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* =========================================================================
   Progressive-enhancement: scroll reveal
   Content is fully visible by default. JS adds .has-reveal to <body> only
   once it has confirmed it can observe elements, so nothing ever stays
   hidden if JavaScript fails to run.
   ========================================================================= */
.has-reveal .reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.has-reveal .reveal.in-view{ opacity: 1; transform: translateY(0); }
.has-reveal .reveal-stagger > *{ transition-delay: calc(var(--stagger-i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce){
  .has-reveal .reveal{ opacity:1; transform:none; transition:none; }
}

/* Card hover: slight lift + tilt (subtle, disabled under reduced motion via global rule) */
.card{ transition: box-shadow .3s ease, transform .3s ease; }
.card:hover{ box-shadow: 0 20px 44px rgba(38,35,32,.12); transform: translateY(-4px) scale(1.008); }

/* =========================================================================
   Hero slideshow — cross-fading layers with Ken Burns zoom
   ========================================================================= */
.hero-slideshow{
  position:relative; min-height:320px; border-radius: var(--radius); overflow:hidden;
}
@media (min-width:900px){ .hero-slideshow{ min-height:480px; } }
.hero-slideshow .slide{
  position:absolute; inset:0; opacity:0; transition: opacity 1.2s ease;
}
.hero-slideshow .slide.active{ opacity:1; z-index:1; }
.hero-slideshow .slide .ph{ min-height:0; height:100%; animation: kenburns 9s ease-in-out infinite alternate; }
.hero-slideshow .slide.active .ph{ animation-play-state: running; }
@keyframes kenburns{ from{ transform: scale(1); } to{ transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce){
  .hero-slideshow .slide{ transition: opacity .01ms; }
  .hero-slideshow .slide .ph{ animation: none; }
}
.hero-slideshow .slide-dots{
  position:absolute; left:0; right:0; bottom:1rem; z-index:2;
  display:flex; justify-content:center; gap:.5rem;
}
.hero-slideshow .slide-dots button{
  width:8px; height:8px; border-radius:50%; background: rgba(246,241,231,.5); border:1px solid rgba(246,241,231,.8);
  padding:0;
}
.hero-slideshow .slide-dots button[aria-current="true"]{ background: var(--c-ivory); width:22px; border-radius:5px; }

/* =========================================================================
   Carousels — swipeable rows with scroll-snap + optional arrows
   ========================================================================= */
.carousel-wrap{ position:relative; }
.carousel{
  display:flex; gap: var(--gap); overflow-x:auto; scroll-snap-type: x mandatory;
  padding-bottom: .5rem; scrollbar-width: thin; scrollbar-color: var(--c-gold) transparent;
  -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar{ height:6px; }
.carousel::-webkit-scrollbar-thumb{ background: var(--c-border); border-radius:4px; }
.carousel > *{ scroll-snap-align:start; flex: 0 0 82%; min-width:82%; }
@media (min-width:640px){ .carousel > *{ flex:0 0 46%; min-width:46%; } }
@media (min-width:1000px){ .carousel > *{ flex:0 0 31%; min-width:31%; } }
.carousel-nav{
  display:flex; gap:.6rem; justify-content:flex-end; margin-bottom:1rem;
}
.carousel-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--c-border);
  background: var(--c-white); display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-size:1.1rem; color: var(--c-charcoal);
  transition: border-color .2s ease, color .2s ease;
}
.carousel-btn:hover{ border-color: var(--c-terracotta); color: var(--c-terracotta); }
.carousel-btn:disabled{ opacity:.35; pointer-events:none; }

/* =========================================================================
   Testimonial carousel
   ========================================================================= */
.testi-carousel{ position:relative; max-width: 760px; margin: 0 auto; }
.testi-track{ display:flex; overflow:hidden; }
.testi-slide{
  flex: 0 0 100%; min-width:100%; opacity:0; transition: opacity .5s ease;
  position:relative; margin-left:-100%;
}
.testi-slide.active{ opacity:1; position:relative; margin-left:0; z-index:1; }
.testi-slide:not(.active){ position:absolute; inset:0; }
.testi-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1.6rem; }
.testi-dots button{ width:8px; height:8px; border-radius:50%; background: var(--c-border); border:none; }
.testi-dots button[aria-current="true"]{ background: var(--c-terracotta); width:20px; border-radius:5px; }

/* =========================================================================
   Editorial storytelling sections
   ========================================================================= */
.editorial{ padding: var(--section-pad) 0; }
.editorial-row{ display:grid; grid-template-columns:1fr; gap: 2.4rem; align-items:center; }
@media (min-width: 900px){
  .editorial-row{ grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .editorial-row.reverse .editorial-media{ order:2; }
}
.editorial-media .ph{ min-height: 320px; }
.editorial-copy .eyebrow{ margin-bottom:1rem; }
.editorial-copy h2{ font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: var(--c-green-deep); }
.editorial-copy p{ font-size:1rem; max-width: 46ch; }

/* =========================================================================
   Interactive route map
   ========================================================================= */
.route-map-wrap{ background: var(--c-white); border:1px solid var(--c-border-soft); border-radius: var(--radius); padding: 1.4rem; }
.route-map{ width:100%; height:auto; display:block; }
.route-map .india-outline{ fill: var(--c-ivory-deep); stroke: var(--c-border); stroke-width:1.5; }
.route-map .route-path{
  fill:none; stroke: var(--c-terracotta); stroke-width:2; stroke-dasharray: 6 7; stroke-linecap:round;
  stroke-dashoffset: 0;
}
.has-reveal .route-map .route-path{
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  transition: stroke-dashoffset 2.2s cubic-bezier(.2,.7,.3,1);
}
.has-reveal .in-view .route-map .route-path{ stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce){
  .has-reveal .route-map .route-path{ stroke-dashoffset: 0; transition:none; }
}
.route-map .pin{ fill: var(--c-green-deep); stroke: var(--c-ivory); stroke-width:2; }
.route-map .pin-label{ font-family: var(--f-body); font-size:11px; fill: var(--c-charcoal); font-weight:600; }
.route-map .pin-order{ font-family: var(--f-body); font-size:9px; fill: var(--c-ivory); font-weight:700; text-anchor:middle; }