/* ==========================================================================
   Coral Yatra — shared stylesheet
   Phone-first: base styles are for small screens; wider layouts are added
   in the @media (min-width: ...) blocks further down each section.
   Layout and fonts come from the approved designs in /design;
   colours follow the Coral Holidays rebrand (see tokens below).
   ========================================================================== */

/* ---------- 1. Brand tokens ---------- */
/* Coral Holidays colours. Contrast (WCAG) noted for older visitors:
   text needs 4.5:1 on its background. */
:root {
  /* Orange */
  --orange: #F47216;        /* brand orange: bands, badges, highlights. Only near-black
                               text on it (5.6:1); too light for text on white (2.9:1) */
  --orange-deep: #B45009;   /* small orange text on white (5.1:1) and tint (4.8:1);
                               orange buttons with white text */
  --orange-deeper: #963F06; /* hover for deep-orange buttons */

  /* Other accent (kept from the design) */
  --green: #2E6B3F;         /* EMI line, "What's included" (6.4:1 on white) */
  --red: #A3222B;           /* "Not included" heading (7.4:1 on white) */

  /* Backgrounds */
  --white: #FFFFFF;
  --tint: #FFF6EF;          /* very light warm orange, alternating sections */
  --tint-strong: #FDE3CE;   /* pills and badges */
  --photo: #EDE6E1;         /* photo placeholders */

  /* Borders */
  --line: #EADFD6;          /* dividers and card edges */
  --line-strong: #8A8586;   /* form fields and dashed cards (3.6:1, easy to see) */

  /* Text */
  --ink: #231F20;           /* near-black: headings, also dark bands */
  --ink-2: #4F4C4D;         /* charcoal: body text (8.5:1 on white), footer */
  --on-dark: #FFFFFF;
  --on-dark-2: #E9E7E7;     /* softer text on charcoal (6.9:1) */
  --on-orange-deep-2: rgba(255, 255, 255, 0.92); /* softer white on deep orange (4.6:1;
                               exactly 90% would be 4.49:1, just under AA) */

  /* Fonts */
  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Mukta Malar', 'Noto Sans Tamil', system-ui, sans-serif;
  --font-tamil: 'Noto Serif Tamil', serif;

  /* Spacing: side gutter grows from 16px (phone) to 96px (desktop design) */
  --gutter: clamp(16px, 6.67vw, 96px);
  --section-y: clamp(56px, 7vw, 96px);
  --radius: 16px;
  --radius-sm: 8px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--orange-deep); }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
/* On dark or coloured bands, a light focus ring shows up better */
.topbar :focus-visible, .legacy :focus-visible, .site-footer :focus-visible,
.register :focus-visible, .yatra-card--featured:focus-visible { outline-color: var(--on-dark); }

h1, h2, h3, p { margin: 0; }

[lang="ta"] { font-family: var(--font-tamil); }

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Anything marked hidden in the HTML stays hidden, whatever its other styles */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 3. Shared text styles ---------- */
.eyebrow {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange-deep);
  font-weight: 700;
}

.title {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.25rem);   /* 52px on desktop */
  line-height: 1.1;
}
.title--md { font-size: clamp(2rem, 1.4rem + 2vw, 2.875rem); }  /* 46px */
.title--sm { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }    /* 48px */

.lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); }

.tamil-kicker {
  font-family: var(--font-tamil);
  font-size: 20px;
  font-weight: 700;
  color: var(--orange-deep);
  line-height: 1.5;
}

.bullets { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bullets li::before { content: "· "; }

.section { padding-block: var(--section-y); }
.section--tint { background: var(--tint); }
.section--line-top { border-top: 1px solid var(--line); }

.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; }
.section-head__text { display: flex; flex-direction: column; gap: 10px; }
.section-head__link { font-weight: 600; font-size: 16px; }

@media (min-width: 900px) {
  .section-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; }
  .section-head__link { flex-shrink: 0; }
}

/* ---------- 4. Buttons & pills ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn--lg { padding: 16px 30px; font-size: 17px; }
.btn--primary { background: var(--orange-deep); color: var(--on-dark); }
.btn--primary:hover { background: var(--orange-deeper); color: var(--on-dark); }
.btn--dark { background: var(--ink); color: var(--on-dark); }
.btn--dark:hover { background: var(--ink-2); color: var(--on-dark); }
.btn--orange { background: var(--orange); color: var(--ink); font-weight: 700; }
.btn--orange:hover { background: var(--tint-strong); color: var(--ink); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: var(--white); }
.btn--outline:hover { background: var(--ink); color: var(--on-dark); }
.btn--light-outline { border-color: var(--on-dark-2); color: var(--on-dark); background: transparent; }
.btn--light-outline:hover { background: var(--on-dark); color: var(--ink); }
.btn--pill { border-radius: 999px; }

.pill {
  display: inline-block;
  padding: 5px 12px;
  background: var(--tint-strong);
  color: var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.pill--bold { font-weight: 700; }
.pill--dark { background: var(--ink); color: var(--on-dark); }
/* Time-limited offer (hidden automatically after data-offer-ends, see site.js) */
.offer {
  align-self: flex-start;
  display: inline-block;
  padding: 6px 12px;
  background: var(--orange);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.pills { display: flex; flex-wrap: wrap; gap: 8px 10px; }

/* ---------- 5. Top bar ---------- */
.topbar { background: var(--ink); color: var(--on-dark-2); font-size: 13px; }
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 20px;
  padding-block: 8px;
}
.topbar__phones { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.topbar a { color: var(--on-dark-2); text-decoration: none; }
.topbar a:hover { color: var(--orange); }
.lang { display: flex; gap: 12px; align-items: center; }
.lang__sep { opacity: 0.5; }
.lang a[aria-current] { color: var(--orange); font-weight: 600; }

/* Social media icons (top bar and footer). Each link is a 44px tap target. */
.social { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--on-dark-2); }
.social a:hover { color: var(--orange); background: rgba(255, 255, 255, 0.08); }
.social--topbar { margin-block: -10px; margin-right: -10px; }
.social--sm a { width: 40px; height: 40px; }
.social--sm svg { width: 18px; height: 18px; }

@media (min-width: 768px) {
  .topbar { font-size: 14px; }
  .topbar .wrap { padding-block: 10px; }
  .topbar__phones { gap: 4px 28px; }
}

/* ---------- 6. Header & navigation ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); border-top: 4px solid var(--orange); }
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 14px;
}

.brand { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; text-decoration: none; }
.brand__name {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.brand__tag {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-wa { display: none; padding: 12px 22px; font-size: 15px; white-space: nowrap; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
/* Without JavaScript the menu is always shown, so the toggle is hidden */
html:not(.js) .nav-toggle { display: none; }

.nav { width: 100%; order: 3; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nav a {
  display: block;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.nav a:hover { color: var(--orange-deep); }
.js .nav { display: none; }
.js .nav.is-open { display: block; }

@media (min-width: 640px) {
  .brand__name { font-size: 36px; }
  .brand__tag { font-size: 12px; letter-spacing: 1.5px; }
  .header-wa { display: inline-flex; }
}

@media (min-width: 1340px) {
  .site-header .wrap { flex-wrap: nowrap; padding-block: 22px; }
  .nav-toggle { display: none; }
  .brand { flex: 0 1 auto; }
  .js .nav, .nav { display: block; width: auto; order: 0; }
  .nav ul { flex-direction: row; gap: clamp(18px, 1.8vw, 32px); }
  .nav a { padding: 0; border: 0; font-size: 16px; white-space: nowrap; }
  .header-actions { order: 1; }
}

/* ---------- 7. Hero ---------- */
.hero { background: var(--tint); padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6.7vw, 96px); }
.hero .wrap { display: grid; gap: 40px; align-items: center; }
.hero__text { display: flex; flex-direction: column; gap: 22px; }
.hero__kicker { font-size: 19px; }
.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);   /* 72px on desktop */
  line-height: 1.02;
  font-weight: 600;
  color: var(--ink);
}
.hero__lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 580px; }
.hero__actions { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.hero__art { border-radius: 20px; overflow: hidden; width: 100%; max-width: 620px; justify-self: center; background: var(--tint-strong); }
.hero__art img { width: 100%; height: auto; }

@media (min-width: 560px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; gap: 16px; }
}
@media (min-width: 1024px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 56px; }
  .hero__text { gap: 26px; }
  .hero__kicker { font-size: 22px; }
  .hero__lede { font-size: 20px; }
}

/* ---------- 8. Trust strip ---------- */
.stats { background: var(--orange-deep); color: var(--on-dark); }  /* white 5.1:1 */
.stats .wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-block: 30px;
  margin-block: 0;
}
.stat { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.stat dt {
  order: -1;
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--on-dark);
  line-height: 1.1;
}
.stat dd {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--on-orange-deep-2);
}

@media (min-width: 700px) { .stats .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .stats .wrap { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block: 34px; }
  .stat dt { font-size: 34px; }
}

/* ---------- 9. Cards (shared) ---------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card__h {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(1.75rem, 1.45rem + 0.9vw, 2.125rem);  /* 34px */
  line-height: 1.15;
}
.card__h--sm { font-size: clamp(1.6rem, 1.4rem + 0.6vw, 2rem); }  /* 32px */

.photo-ph {
  display: flex;
  align-items: flex-end;
  padding: 20px;
  background: var(--photo);
  color: var(--ink-2);
  font-size: 13px;
}

.grid-2, .grid-3 { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 10. Fixed departures ---------- */
.dep-card__photo { min-height: 180px; background: var(--tint); }
.dep-card__img { width: 100%; height: 190px; object-fit: cover; background: var(--tint); }
.dep-card__img--kailash { object-position: 50% 30%; }
.dep-card__img--amarnath { object-position: 50% 40%; }
.dep-card__body { display: flex; flex-direction: column; gap: 14px; padding: 22px; flex-grow: 1; }
.dep-card__desc { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

.route {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--tint);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
}
.route strong { color: var(--ink); }
.route span { color: var(--ink-2); }

.card-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px 16px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.price { display: flex; flex-direction: column; }
.price__label, .price__note { font-size: 13px; color: var(--ink-2); }
.price__amount { font-size: 22px; font-weight: 700; color: var(--orange-deep); line-height: 1.3; }
.price__emi { font-size: 14px; color: var(--green); font-weight: 600; }

/* Departure dates with status badges (filled from the Google Sheet, see departures.js) */
.dep-dates { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dep-date {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.dep-date:first-child { padding-top: 0; }
.dep-date:last-child { border-bottom: 0; padding-bottom: 0; }
.dep-date__day { font-weight: 600; color: var(--ink); }
.dep-date__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dep-date__seats, .dep-date__price { font-size: 15px; color: var(--ink-2); }
.dep-date__wait { font-size: 15px; font-weight: 600; color: var(--orange-deep); }
.dep-date--none { color: var(--ink-2); }

.status {
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.status--open { background: var(--green); color: var(--on-dark); }          /* 6.4:1 */
.status--filling-fast { background: var(--orange); color: var(--ink); }    /* 5.6:1 */
.status--full { background: var(--ink); color: var(--on-dark); }          /* 16:1 */

.price-card__dates { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-block: 1px solid var(--line); }

.soon-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.soon-card__text { display: flex; flex-direction: column; gap: 6px; }
.soon-card h3 { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.soon-card span { font-size: 15px; color: var(--ink-2); }
.soon-card .btn { align-self: flex-start; padding: 12px 20px; }

@media (min-width: 640px) {
  .dep-card__photo { min-height: 220px; }
  .dep-card__img { height: 220px; }
  .dep-card__body { padding: 28px; }
  .soon-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; }
  .soon-card .btn { align-self: auto; flex-shrink: 0; }
}

/* ---------- 11. Two ways to see Kailash ---------- */
.section--tight-top { padding-top: 0; }
.compare-card { gap: 14px; padding: 24px; }
.compare-card--aerial { border: 2px solid var(--ink); }
.compare-card .pill { align-self: flex-start; }
.compare-card .bullets { font-size: 16px; color: var(--ink-2); }
.compare-card .card-foot strong { font-size: 18px; color: var(--ink); }
.compare-card .card-foot .btn { padding: 12px 20px; }
@media (min-width: 640px) { .compare-card { padding: 32px; } }

/* ---------- 12. Free registration panel ---------- */
.register {
  display: grid;
  gap: 32px;
  padding: 28px 20px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: 20px;
}
.register__text { display: flex; flex-direction: column; gap: 16px; }
.register .eyebrow { color: var(--orange); }
.register .title { color: var(--on-dark); }
.register .bullets { gap: 10px; font-size: 17px; line-height: 1.5; }
@media (min-width: 640px) { .register { padding: 40px; } }
@media (min-width: 1100px) {
  .register { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px; }
}

/* ---------- 13. Forms ---------- */
.form-grid { display: grid; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.field input, .field select {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;   /* 16px stops phones from zooming in on tap */
}
.form-grid--on-dark .field input { border-color: transparent; }
.form-grid .btn { width: 100%; height: 52px; font-size: 17px; }
.form-grid__full { grid-column: 1 / -1; }
.form-note { font-size: 14px; font-weight: 400; line-height: 1.5; }
/* Spam trap: moved off-screen, so people never see it but simple bots fill it in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-grid__submit { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }

@media (min-width: 560px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 14. EMI ---------- */
.emi__partner { display: flex; flex-direction: column; gap: 4px; }
.emi__partner span:first-child { font-size: 13px; color: var(--ink-2); }
.emi__partner img { width: auto; height: 52px; }
.emi .section-head__text { max-width: 760px; }
@media (min-width: 900px) { .emi__partner { align-items: flex-end; flex-shrink: 0; } }

.steps { display: grid; gap: 16px; margin: 0 0 28px; padding: 0; list-style: none; }
.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.step__num { font-family: var(--font-head); font-size: 40px; font-weight: 700; color: var(--orange-deep); line-height: 1; }
.step strong { font-size: 18px; color: var(--ink); }
.step span:last-child { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.fineprint { font-size: 13px; line-height: 1.5; color: var(--ink-2); }

@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .step { padding: 28px; } }

/* ---------- 15. Gift a yatra ---------- */
.split { display: grid; gap: 32px; align-items: center; }
.split__photo { aspect-ratio: 520 / 420; border-radius: var(--radius); font-size: 14px; padding: 22px; }
.split__img { width: 100%; height: auto; border-radius: var(--radius); }
.split__text { display: flex; flex-direction: column; gap: 20px; }
.split__text .lede { line-height: 1.65; }
.gift .bullets { font-size: 17px; }
.gift .btn { align-self: flex-start; padding: 15px 26px; }

@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 64px; }
}

/* ---------- 16. Pilgrim care ---------- */
.care .section-head__text { max-width: 820px; }
.care-card { display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.care-card svg { width: 36px; height: 36px; color: var(--orange-deep); }
.care-card h3 { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.care-card p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 640px) { .care-card { padding: 32px; } }

/* ---------- 17. All yatras ---------- */
.yatras .section-head > p { max-width: 460px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.yatra-group { display: flex; flex-direction: column; gap: 18px; }
.yatra-group + .yatra-group { margin-top: 40px; }
.yatra-group__h {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.yatra-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .yatra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .yatra-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.yatra-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink-2);
}
.yatra-card:hover { border-color: var(--orange); color: var(--ink-2); }
.yatra-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.yatra-card__ta { font-size: 15px; color: var(--orange-deep); }
.yatra-card__name { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.yatra-card__desc { font-size: 15px; }
.yatra-card--featured { background: var(--ink); border-color: var(--ink); color: var(--on-dark-2); }
.yatra-card--featured:hover { color: var(--on-dark-2); border-color: var(--orange); background: var(--ink); }
.yatra-card--featured .yatra-card__ta { color: var(--orange); }
.yatra-card--featured .yatra-card__name { color: var(--on-dark); }
@media (min-width: 640px) { .yatra-card { padding: 26px; } }

.badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--tint-strong);
  color: var(--ink);
}
.badge--fixed { background: var(--orange); color: var(--ink); }

/* ---------- 18. Yatra Guide ---------- */
.guide-card { gap: 12px; text-decoration: none; }
.guide-card:hover { border-color: var(--orange); }
.guide-card__img { height: 180px; background: var(--tint); }
.guide-card__body { display: flex; flex-direction: column; gap: 8px; padding: 4px 24px 26px; }
.guide-card__cat { font-size: 13px; letter-spacing: 1px; color: var(--orange-deep); font-weight: 700; text-transform: uppercase; }
.guide-card__ta { font-size: 15px; color: var(--ink-2); }
.guide-card__title { font-family: var(--font-head); font-size: 27px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.guide-card__meta { font-size: 14px; color: var(--ink-2); }
@media (min-width: 640px) { .guide-card__img { height: 200px; } }

/* ---------- 19. Our legacy ---------- */
.legacy { background: var(--ink); color: var(--on-dark-2); }
.legacy .split { gap: 36px; }
.legacy__photo {
  aspect-ratio: 420 / 500;
  max-width: 420px;
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--ink-2);
  color: var(--on-dark);
  border-radius: var(--radius);
  padding: 24px;
  font-size: 14px;
}
img.legacy__photo { height: auto; padding: 0; object-fit: cover; }
.legacy .split__text { gap: 22px; }
.legacy .eyebrow { color: var(--orange); }
.legacy .title { color: var(--on-dark); }
.legacy p { font-size: 17px; line-height: 1.7; }
.people { display: flex; flex-wrap: wrap; gap: 20px 40px; padding-top: 10px; }
.person { display: flex; flex-direction: column; }
.person__name { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--orange); line-height: 1.2; }
.person__role { font-size: 14px; }
@media (min-width: 1024px) {
  .legacy .split { grid-template-columns: 420px minmax(0, 1fr); gap: 72px; }
  .legacy p { font-size: 18px; }
}

/* ---------- 20. Testimonial ---------- */
.testimonial .wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.quote {
  width: 100%;
  max-width: 900px;
  margin: 0;
  padding: 28px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.quote p { font-family: var(--font-head); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.4; color: var(--ink); }
.quote footer { font-size: 15px; color: var(--ink-2); }
@media (min-width: 640px) { .quote { padding: 44px; } }

/* ---------- 21. Contact ---------- */
.contact .wrap { display: grid; gap: 36px; }
.contact__text { display: flex; flex-direction: column; gap: 18px; }
.contact__lines { display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.contact__lines a { text-decoration: none; }
.contact__lines a[target] { text-decoration: underline; }
.contact__reviews { align-self: flex-start; }
@media (min-width: 1100px) {
  .contact .wrap { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 64px; }
  .contact .form-grid { gap: 18px; }
}

/* ---------- 22. Footer ---------- */
.site-footer { background: var(--ink-2); color: var(--on-dark-2); font-size: 15px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 28px; padding-block: 48px; }
.footer-cols { display: grid; gap: 28px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.footer-col strong { color: var(--on-dark); }
.footer-col address { font-style: normal; }
.footer-col a { color: var(--on-dark-2); text-decoration: none; }
.footer-col a:hover { color: var(--on-dark); text-decoration: underline; }
.footer-brand { font-family: var(--font-head); font-size: 32px; font-weight: 700; color: var(--on-dark); line-height: 1.2; }
.footer-about { max-width: 380px; line-height: 1.6; }
.footer-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.footer-reviews { align-self: flex-start; margin-top: 8px; font-size: 15px; }
.site-footer .footer-col .btn--light-outline { color: var(--on-dark); text-decoration: none; }
.site-footer .footer-col .btn--light-outline:hover { color: var(--ink); }
.site-footer .social { margin-left: -10px; }
.footer-col span a[target] { text-decoration: underline; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 20px; font-size: 13px; }
@media (min-width: 900px) {
  .site-footer .wrap { padding-block: 64px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .footer-cols { grid-template-columns: minmax(0, 340px) auto auto auto; justify-content: space-between; gap: 40px; }
}

/* ---------- 23. Phone action bar (small screens only) ---------- */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(35, 31, 32, 0.08);
}
.action-bar .btn { min-height: 46px; padding: 10px 12px; font-size: 16px; }
body { padding-bottom: 72px; }
@media (min-width: 900px) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   24. Package pages (shared template for every yatra page)
   Used by kailash-manasarovar-2027.html and amarnath-helicopter-2027.html.
   A new yatra page copies one of those files and changes only the words.
   ========================================================================== */

/* Hero band */
.pkg-hero { background: var(--ink); color: var(--on-dark-2); }
.pkg-hero .wrap { display: flex; flex-direction: column; gap: 18px; padding-block: clamp(40px, 5vw, 64px) clamp(44px, 5vw, 72px); }
.breadcrumb { font-size: 14px; }
.breadcrumb a { color: var(--on-dark-2); }
.breadcrumb a:hover { color: var(--orange); }
.pkg-hero__kicker { font-family: var(--font-tamil); font-size: 20px; font-weight: 700; color: var(--orange); line-height: 1.5; }
.pkg-hero h1 {
  max-width: 1080px;
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.75rem);   /* 76px on desktop */
  line-height: 1.02;
  font-weight: 600;
  color: var(--on-dark);
}
.facts { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.fact { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; font-size: 15px; color: var(--on-dark); }
.fact--primary { background: var(--white); border-color: var(--white); color: var(--ink); font-weight: 700; }
@media (min-width: 1024px) { .pkg-hero__kicker { font-size: 22px; } .fact { padding: 8px 16px; } }

/* Intro text + price card */
.pkg-intro .wrap { display: grid; gap: 32px; align-items: start; }
.pkg-intro__text { display: flex; flex-direction: column; gap: 20px; }
.pkg-intro__text .lede { line-height: 1.7; }
.chips { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 4px 0 0; list-style: none; }
.chip { padding: 7px 14px; background: var(--tint); border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--ink); }

.price-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: var(--radius);
}
.price-card__amount { font-family: var(--font-head); font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem); font-weight: 700; color: var(--orange-deep); line-height: 1.05; }
.price-card__amount--lg { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem); }
.price-card__note { font-size: 16px; color: var(--ink-2); }
.price-card__emi { font-size: 16px; color: var(--green); font-weight: 700; }
.price-card__warn { padding: 12px; background: var(--tint); border-radius: var(--radius-sm); font-size: 14px; color: var(--ink-2); }
.price-card .btn { width: 100%; }
.price-card__link { text-align: center; font-size: 15px; font-weight: 600; }
.price-card__downloads { display: flex; flex-direction: column; gap: 10px; }
.table-label { margin-bottom: 16px; font-size: 16px; font-weight: 600; color: var(--ink); }
@media (min-width: 640px) { .price-card { padding: 32px; } }
@media (min-width: 1024px) {
  .pkg-intro .wrap { grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; }
}

/* Day-by-day itinerary and cost tables.
   Desktop: a normal table. Phone: each row becomes a small stacked card. */
.table-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.data-table th {
  padding: 16px 20px;
  background: var(--ink);
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: left;
  text-transform: uppercase;
}
.data-table td { padding: 18px 20px; border-top: 1px solid var(--line); vertical-align: top; }
.data-table tbody tr:nth-child(even) { background: var(--tint); }
.data-table td.day { color: var(--orange-deep); font-weight: 700; white-space: nowrap; }
.data-table .total td { background: var(--tint-strong); color: var(--ink); font-size: 18px; font-weight: 700; }
.data-table strong { color: var(--ink); }

@media (max-width: 767px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
  .data-table tr { padding: 16px 18px; border-top: 1px solid var(--line); }
  .data-table tbody tr:first-child { border-top: 0; }
  .data-table td { padding: 0; border: 0; }
  .data-table td + td { margin-top: 6px; }
  /* Label each cell, e.g. "Night stay: Nepalgunj" */
  .data-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ink); }
  .data-table .day { font-size: 17px; }
  .data-table .date { color: var(--ink); font-weight: 600; }
  .data-table .is-empty { display: none; }
  .data-table .total td { background: transparent; font-size: 17px; }
  .data-table tbody tr.total { background: var(--tint-strong); }
}
@media (min-width: 768px) {
  .day-prefix { display: none; }
  .data-table th, .data-table td { padding-inline: 28px; }
  .itinerary .day { width: 110px; }
  .itinerary .date { width: 160px; }
  .itinerary .night { width: 220px; }
  .cost-table td:not(:first-child), .cost-table th:not(:first-child) { width: 200px; }
}
.table-note { margin-top: 16px; font-size: 14px; color: var(--ink-2); }
.stay-summary { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--ink-2); }
.stay-summary strong { color: var(--ink); }
@media (min-width: 900px) { .stay-summary { align-items: flex-end; text-align: right; } }

/* Four faces of Kailash (dark band) */
.faces-band { background: var(--ink); color: var(--on-dark-2); }
.faces-band .eyebrow { color: var(--orange); }
.faces-band .title { color: var(--on-dark); }
.faces { display: grid; gap: 16px; }
.face { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--ink-2); border-radius: 14px; }
.face strong { font-size: 20px; color: var(--on-dark); }
.face span { font-size: 15px; line-height: 1.5; }
/* Jewel colours of each face (content, not brand colours) */
.face__dot { width: 44px; height: 44px; border-radius: 999px; }
.face__dot--lapis { background: #2F4F9A; }
.face__dot--ruby { background: #A3222B; }
.face__dot--gold { background: #D9A441; }
.face__dot--crystal { background: #E6E9EC; }
@media (min-width: 640px) { .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .faces { grid-template-columns: repeat(4, minmax(0, 1fr)); } .face { padding: 26px; } }

/* Included / not included / paid directly */
.incl-grid { display: grid; gap: 24px; }
.incl-stack { display: flex; flex-direction: column; gap: 24px; }
.incl-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.incl-card h3 { font-family: var(--font-head); font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem); font-weight: 700; color: var(--ink); line-height: 1.15; }
.incl-card--yes h3 { color: var(--green); }
.incl-card--no h3 { color: var(--red); }
.incl-card ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 16px; line-height: 1.5; }
.paid-row { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 16px; }
.paid-row strong { color: var(--ink); white-space: nowrap; }
.paid-row--total { padding-bottom: 0; border-bottom: 0; font-size: 17px; }
.paid-row--total strong { color: var(--orange-deep); }
@media (min-width: 640px) { .incl-card { padding: 36px; } }
@media (min-width: 900px) { .incl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }

/* Important notices ("Before you go") */
.notice { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.notice--key { background: var(--tint); border: 2px solid var(--orange); }
.notice strong { font-size: 19px; color: var(--ink); line-height: 1.3; }
.notice span { font-size: 16px; line-height: 1.55; }
@media (min-width: 640px) { .notice { padding: 28px; } }

/* FAQs */
.faq-grid { display: grid; gap: 16px; }
.faq { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.faq h3 { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.faq p { font-size: 16px; line-height: 1.6; }
.faq--cta { gap: 10px; background: var(--ink); border-color: var(--ink); color: var(--on-dark-2); }
.faq--cta h3 { color: var(--on-dark); }
.faq--cta .btn { align-self: flex-start; padding: 10px 18px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .faq { padding: 24px 28px; } }

/* Group photos */
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.photo-grid .photo-ph { height: 150px; border-radius: 12px; background: var(--tint); padding: 14px; }
.photo-grid img { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; background: var(--tint); }
@media (min-width: 900px) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .photo-grid .photo-ph, .photo-grid img { height: 220px; } }

/* Call band at the bottom of a package page */
.enquire-band { background: var(--orange); color: var(--ink); }
.enquire-band .wrap { display: flex; flex-direction: column; gap: 24px; padding-block: clamp(44px, 5vw, 64px); }
.enquire-band h2 { font-family: var(--font-head); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 600; line-height: 1.1; }
.enquire-band p { margin-top: 8px; font-size: 18px; }
.enquire-band__actions { display: flex; flex-direction: column; gap: 12px; }
.enquire-band .btn--outline { background: transparent; }
@media (min-width: 640px) { .enquire-band__actions { flex-direction: row; flex-wrap: wrap; gap: 16px; } }
@media (min-width: 1100px) {
  .enquire-band .wrap { flex-direction: row; justify-content: space-between; align-items: center; }
  .enquire-band__actions { flex-shrink: 0; }
}

/* ==========================================================================
   25. Yatra Guide articles and list page (design: design/guide-kailash-helicopter-vs-aerial.html)
   Built by build/render.js from the files in guide/.
   ========================================================================== */
.wrap--narrow { max-width: calc(860px + 2 * var(--gutter)); }
.article-page { background: var(--tint); }   /* title area, cover and related articles sit on white */

.draft-bar { background: var(--tint-strong); color: var(--ink); font-size: 15px; font-weight: 600; }
.draft-bar .wrap { padding-block: 12px; }

/* Title area */
.article-hero { background: var(--white); padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px); }
.article-hero__inner { display: flex; flex-direction: column; gap: 18px; }
.breadcrumb--light a { color: var(--orange-deep); }
.breadcrumb--light a:hover { color: var(--ink); }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 14px; color: var(--ink-2); }
.article-meta .pill { font-size: 13px; font-weight: 700; }
.article-ta { font-family: var(--font-tamil); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); font-weight: 700; color: var(--orange-deep); line-height: 1.5; }
.article-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);   /* 60px on desktop */
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
}
.article-summary { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); line-height: 1.6; color: var(--ink-2); }
.article-author { display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.article-author__photo { flex-shrink: 0; width: 48px; height: 48px; border-radius: 999px; background: var(--photo); object-fit: cover; }
.article-author__text { display: flex; flex-direction: column; }
.article-author__text strong { font-size: 16px; color: var(--ink); }
.article-author__text span { font-size: 14px; color: var(--ink-2); }

/* Cover photo */
.article-cover { padding-bottom: clamp(32px, 4vw, 56px); background: var(--white); }
.article-cover img, .article-cover__ph { width: 100%; height: clamp(220px, 40vw, 440px); border-radius: var(--radius); object-fit: cover; }

/* Text, tables and notes: text stays at a comfortable reading width; tables may be wider */
.article-flow { display: flex; flex-direction: column; gap: 22px; padding-block: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.75; color: var(--ink-2); }
.article-flow > * { width: 100%; max-width: 860px; margin-inline: auto; }
.article-flow > .compare { max-width: 1060px; }
.article-flow h2, .article-video h2, .article-faqs h2 {
  margin-top: 20px;
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);   /* 40px */
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}
.article-flow > h2:first-child { margin-top: 0; }
.article-flow h3 { font-family: var(--font-head); font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.article-flow ul, .article-flow ol { display: flex; flex-direction: column; gap: 10px; padding-left: 24px; }
.article-flow strong { color: var(--ink); }
.article-flow a { color: var(--orange-deep); }
.article-flow img { width: 100%; height: auto; border-radius: var(--radius); }
.article-flow blockquote { padding: 4px 0 4px 20px; border-left: 4px solid var(--orange); }
.article-flow hr { border: 0; border-top: 1px solid var(--line); }

/* Comparison table. Phone: one card per row, with each column's name above its text */
.compare { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 16px; line-height: 1.5; }
.compare__row { display: grid; gap: 8px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.compare__row:last-child { border-bottom: 0; }
.compare__row:nth-child(odd):not(.compare__row--head) { background: var(--tint); }
.compare__row strong { color: var(--ink); }
.compare__row--head { display: none; background: var(--ink); color: var(--on-dark); font-size: 15px; font-weight: 700; }
.compare__row [data-label]::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange-deep); }
@media (min-width: 800px) {
  .compare__row { grid-template-columns: 220px repeat(var(--cols, 2), minmax(0, 1fr)); gap: 20px; padding: 18px 28px; }
  .compare__row--head { display: grid; }
  .compare__row [data-label]::before { display: none; }
}

.article-note { display: flex; flex-direction: column; gap: 10px; padding: 26px 30px; background: var(--tint); border: 2px solid var(--orange); border-radius: 14px; font-size: 17px; line-height: 1.6; }
.article-note strong { font-size: 19px; color: var(--ink); }

/* Video */
.article-video { display: flex; flex-direction: column; gap: 14px; padding-bottom: clamp(32px, 4vw, 56px); }
.article-video h2 { margin-top: 0; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem); }
.article-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--ink); }
.article-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-video__frame--ph { display: flex; align-items: center; justify-content: center; padding: 20px; color: var(--on-dark-2); font-size: 15px; text-align: center; }

/* "Book this yatra" cards */
.article-book { padding-bottom: clamp(40px, 5vw, 64px); }
.article-book__grid { display: grid; gap: 24px; max-width: 1060px; margin-inline: auto; }
.book-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 3vw, 30px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.book-card__tag { align-self: flex-start; padding: 5px 12px; font-size: 13px; white-space: normal; }
.book-card h3 { font-family: var(--font-head); font-size: clamp(1.625rem, 1.4rem + 0.8vw, 1.875rem); font-weight: 700; line-height: 1.15; color: var(--ink); }
.book-card__line { font-size: 16px; color: var(--ink-2); }
.book-card .btn { align-self: flex-start; }
@media (min-width: 800px) { .article-book__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQs and related articles */
.article-faqs { display: flex; flex-direction: column; gap: 16px; padding-bottom: clamp(40px, 5vw, 64px); }
.article-faqs h2 { margin-top: 0; }
.article-related { padding-block: clamp(40px, 5vw, 64px); background: var(--white); border-top: 1px solid var(--line); }
.article-related .title { margin-bottom: 24px; }
.guide-card__img--photo { width: 100%; height: 180px; object-fit: cover; }
@media (min-width: 640px) { .guide-card__img--photo { height: 200px; } }