/* GENERATED FILE — from theme.PAGES_CSS. Do not edit. Edits here are lost on the next build. */

/* ---------------- home: the services bento ---------------- */
.bento{display:grid;grid-template-columns:1.12fr 1fr 1fr;grid-template-rows:310px 226px;gap:14px;margin-top:50px}
.pcell{position:relative;overflow:hidden;border-radius:2px;display:block;text-decoration:none}
.pcell.tall{grid-row:1 / span 2}
.pcell.wide{grid-column:2 / span 2}
.pcell img{width:100%;height:100%;object-fit:cover;transition:transform 5s var(--ease)}
.pcell:hover img{transform:scale(1.035)}
/* The demo's scrim ran .08 at 28% straight to .92 at the foot. On a tall desktop cell that is
   plenty. On a 250px mobile cell the haldi eyebrow lands in the thin part of the ramp and sits
   over a bright photograph, which axe cannot see and an eye forgives. A mid-stop fixes it
   without touching the desktop look: the top of the frame is as open as the demo's. */
.pcell .shade{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(12,24,56,.08) 28%,rgba(12,24,56,.55) 62%,rgba(12,24,56,.94))}
/* The caption plate. The cell-wide .shade alone leaves the eyebrow sitting on open photograph:
   measured at 1.4-3.2 against the brightest decile behind it, well under AA, on a mark axe
   cannot check because it cannot see through an image. So the text block carries its own ramp.
   Tuned against build/visual_guard.py photo_contrast, not against an opinion. */
.pcell .txt{position:absolute;left:0;right:0;bottom:0;padding:64px 24px 20px;color:var(--rice);
  text-shadow:0 1px 10px rgba(12,24,56,.65);
  background:linear-gradient(180deg,rgba(9,18,42,0) 0%,rgba(9,18,42,.80) 46%,
    rgba(9,18,42,.95) 78%,rgba(9,18,42,.97) 100%)}
.pcell .ey{font-family:var(--ff-m);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--haldi);display:block;margin-bottom:6px}
.pcell .txt h3{font-size:24px;font-weight:400;margin-bottom:4px;color:var(--rice)}
.pcell .txt p{font-family:var(--ff-s);font-size:15px;line-height:1.55;color:var(--rice-dim);max-width:36ch}
.pcell.flat{background:var(--night);display:flex;flex-direction:column;justify-content:flex-end;padding:26px 28px;color:var(--rice)}
.pcell.flat .kg{color:var(--haldi);width:26px;height:16px;margin-bottom:auto}
.pcell.flat h3{font-size:24px;font-weight:400;margin-bottom:6px;color:var(--rice)}
.pcell.flat p{font-size:15px;line-height:1.6;color:var(--rice-dim);max-width:50ch}

/* ---------------- home: the calm calendar ---------------- */
.device .cal-grid{display:grid;grid-template-columns:360px 1fr;gap:56px;margin-top:52px;align-items:start}
.windows{display:flex;flex-direction:column;border-top:1px solid var(--line-d)}
.windows button{appearance:none;background:none;border:0;border-bottom:1px solid var(--line-d);
  text-align:left;cursor:pointer;padding:19px 12px;display:flex;align-items:baseline;gap:14px;
  transition:background .3s var(--ease);border-radius:2px;width:100%}
.windows button:hover{background:rgba(243,234,217,.06)}
.windows .dotmark{width:10px;height:10px;border-radius:50%;border:1.6px solid var(--haldi);flex:none;transform:translateY(-1px)}
.windows button[aria-pressed="true"] .dotmark{background:var(--haldi)}
.windows .name{font-family:var(--ff-d);font-weight:300;font-size:20px;color:var(--rice)}
.windows button[aria-pressed="true"] .name{font-weight:600;color:var(--haldi)}
.windows .w{font-family:var(--ff-m);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rice-dim);display:block;margin-top:3px}
.device .answer-seat{display:grid;grid-template-columns:190px 1fr;gap:36px;align-items:start}
.device .clasp-hold{color:var(--haldi)}
.answer{background:var(--rice);color:var(--ink);border-radius:2px;padding:38px 42px;min-height:340px;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.answer.fade{opacity:0;transform:translateY(6px)}
.answer .field{margin-bottom:20px}
.answer .field:last-child{margin-bottom:0}
.answer .k{font-family:var(--ff-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--kumkum);margin-bottom:3px}
.answer .v{font-family:var(--ff-d);font-weight:400;font-size:17px;line-height:1.65;max-width:56ch}
.cal-note{font-family:var(--ff-d);font-weight:300;color:var(--rice-dim);max-width:56ch;margin-top:18px;font-size:17px}

/* ---------------- home: the three islands ---------------- */
.isles{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-top:50px}
.isle{position:relative;overflow:hidden;border-radius:2px;min-height:300px;display:block;text-decoration:none}
.isle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 5s var(--ease)}
.isle:hover img{transform:scale(1.03)}
.isle .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,24,56,.06) 30%,rgba(12,24,56,.9))}
/* same measured plate as .pcell .txt */
.isle .txt{position:absolute;left:0;right:0;bottom:0;padding:68px 26px 22px;color:var(--rice);
  text-shadow:0 1px 10px rgba(12,24,56,.65);
  background:linear-gradient(180deg,rgba(9,18,42,0) 0%,rgba(9,18,42,.80) 44%,
    rgba(9,18,42,.95) 76%,rgba(9,18,42,.97) 100%)}
.isle .co{font-family:var(--ff-m);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--haldi);display:block;margin-bottom:5px}
.isle .txt h3{font-size:25px;font-weight:400;margin-bottom:4px;color:var(--rice)}
.isle .txt p{font-size:15px;line-height:1.55;color:var(--rice-dim);max-width:50ch}
.isle.big{grid-row:1 / span 2;min-height:640px}
.side{display:grid;grid-template-rows:1fr 1fr;gap:14px;grid-row:1 / span 2}

/* ---------------- home: two shores ---------------- */
.shores{background:var(--sand)}
.shores .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;margin-top:46px}
.shores .cols .t-ey{font-family:var(--ff-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--kumkum-deep);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.shores .cols .t-ey .kg{width:19px;color:var(--kumkum-deep)}
.shores .cols p{font-family:var(--ff-d);font-weight:400;font-size:16.5px;line-height:1.8;color:var(--ink);max-width:44ch}
.margin-note{margin-top:60px;max-width:400px;transform:rotate(-1.2deg);font-family:var(--ff-d);font-weight:300;font-size:18px;color:var(--dust);line-height:1.7}
.margin-note .sig{font-family:var(--ff-s);font-weight:600;font-size:24px;color:var(--kumkum);margin-top:8px}

/* ---------------- home: the wedding panel ---------------- */
.wedding{padding-top:0;padding-bottom:0}
.wed-grid{display:grid;grid-template-columns:1fr 1fr;min-height:660px}
.wed-grid .photo{position:relative;overflow:hidden}
.wed-grid .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.wed-grid .panel{background:var(--kumkum-deep);color:var(--rice);display:flex;flex-direction:column;
  justify-content:center;padding:84px 76px;position:relative}
.wed-grid .panel .chapter .num{color:var(--haldi)}
.wed-grid .panel .chapter .kg{color:var(--haldi)}
.wed-grid .panel .chapter .t{color:var(--rice-dim)}
.wed-grid .panel h2{color:var(--rice)}
.wed-grid .panel h2 em{color:var(--haldi)}
.wed-grid .panel p{font-family:var(--ff-d);font-weight:300;max-width:52ch;color:var(--rice-dim);margin:18px 0 34px;font-size:17px;line-height:1.8}
.wed-grid .panel .clasp-wed{position:absolute;top:36px;right:44px;color:var(--rice)}
.wed-grid .panel .clasp-wed .kclasp{width:86px;height:86px}
@media (max-width:1200px){.wed-grid .panel .clasp-wed{display:none}}
.wed-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px 10px 0}
.wed-strip figure{margin:0;position:relative;overflow:hidden;height:300px}
.wed-strip img{width:100%;height:100%;object-fit:cover;display:block}
.wed-note{text-align:center;font-family:var(--ff-m);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dust);padding:20px 22px 34px}

/* ---------------- home: the honest answer about hotels ---------------- */
.hotels{text-align:center}
.hotels .chapter{justify-content:center}
.hotels h2{margin:0 auto}
.hotels p{font-family:var(--ff-d);font-weight:300;max-width:56ch;margin:16px auto 28px;color:var(--dust);font-size:17px}
.hotels a.out{font-family:var(--ff-m);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--kumkum);text-decoration:none;border-bottom:1px solid var(--haldi);
  display:inline-block;padding:11px 2px}
.hotels a.out:hover{color:var(--kumkum-deep)}

/* ---------------- the plan section ---------------- */
.plan{background:var(--sand)}
.plan-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;margin-top:6px;align-items:start}
.plan-grid .note p{font-family:var(--ff-d);font-weight:300;max-width:44ch;color:var(--ink);margin-top:16px;font-size:18px;line-height:1.8}
.plan-grid .note .who{margin-top:26px;font-family:var(--ff-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dust)}

/* ---------------- the wedding builder (ported from thebook.js, repainted) ---------------- */
.wedbook form{padding:44px 46px}
.wb-step{display:flex;align-items:baseline;gap:12px;font-family:var(--ff-m);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dust);margin:34px 0 16px;
  padding-bottom:11px;border-bottom:1px solid var(--line-l)}
.wb-step:first-of-type{margin-top:6px}
.wb-step span{font-family:var(--ff-s);font-weight:600;font-size:17px;color:var(--kumkum);
  letter-spacing:0}
.wb-isls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wb-isl input{position:absolute;opacity:0;width:0;height:0}
.wb-box{display:flex;flex-direction:column;gap:4px;color:var(--ink);border:1px solid var(--line-l);border-radius:2px;
  padding:18px 18px 20px;cursor:pointer;background:#FBF5E9;height:100%;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.wb-isl:hover .wb-box{border-color:rgba(162,42,30,.4)}
.wb-isl input:checked + .wb-box{border-color:var(--kumkum);background:var(--sand);
  box-shadow:inset 0 0 0 1px var(--kumkum)}
.wb-isl input:focus-visible + .wb-box{outline:2px solid var(--haldi);outline-offset:3px}
.wb-box strong{font-family:var(--ff-d);font-weight:400;font-size:21px}
.wb-box .wb-d{font-size:14.5px;color:var(--dust);line-height:1.5}
.wb-box .wb-p{font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kumkum-deep);margin-top:8px}
.wb-adds{display:flex;flex-direction:column;border-top:1px solid var(--line-l)}
.wb-add{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:start;
  padding:16px 2px;border-bottom:1px solid var(--line-l);cursor:pointer}
.wb-add[hidden]{display:none}
.wb-add input{width:18px;height:18px;margin-top:3px;accent-color:var(--kumkum)}
.wb-t b{display:block;font-family:var(--ff-d);font-weight:400;font-size:19px;margin-bottom:2px}
.wb-t small{font-size:14.5px;color:var(--dust);line-height:1.55}
.wb-pr{font-family:var(--ff-m);font-size:12px;letter-spacing:.08em;color:var(--kumkum-deep);
  white-space:nowrap;padding-top:4px}
.wb-total{background:var(--night);color:var(--rice);border-radius:2px;padding:26px 22px;
  text-align:center;margin:28px 0 4px}
.wb-total .lab{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--haldi)}
.wb-total .big{font-family:var(--ff-d);font-weight:300;font-size:46px;line-height:1.1;margin:6px 0 2px}
.wb-total .inr{font-family:var(--ff-m);font-size:11.5px;letter-spacing:.1em;color:var(--rice-dim)}
.wb-total .psub{font-size:14.5px;color:var(--rice-dim);margin-top:10px}
.wb-note{font-size:13.5px;color:var(--dust);text-align:center;margin-top:14px}
@media (max-width:940px){
  .wedbook form{padding:30px 22px}
  .wb-isls{grid-template-columns:1fr}
  .wb-add{grid-template-columns:22px 1fr;gap:12px}
  .wb-pr{grid-column:2;padding-top:2px}
}

/* ---------------- shared page vocabulary (past the demo) ---------------- */
.crumb{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:4px;color:var(--rice-dim)}
.crumb a{color:var(--rice-dim);text-decoration:none;display:inline-block;padding:14px 0}
/* Over a photograph the breadcrumb is navigation, not ornament, and .78 alpha on a bright
   frame is the difference between 3.88 and passing. It stays dimmed everywhere else,
   where the ground is a flat colour and the dimming is doing its job. */
.hero .crumb,.hero .crumb a{color:var(--rice)}
.hero .crumb .sep{opacity:.5}
.crumb a:hover{color:var(--rice)}
.crumb .sep{margin:0 9px;opacity:.6}
.crumb [aria-current]{color:var(--haldi)}
section .crumb,.sec--ed .crumb{color:var(--dust)}
section .crumb a{color:var(--dust)}

/* the text hero */
.thero{background:var(--night);color:var(--rice);padding:150px 0 92px;position:relative;overflow:hidden}
.thero h1{font-size:58px;font-weight:200;color:var(--rice);max-width:18ch;line-height:1.14}
.thero h1 em{font-style:normal;font-weight:400;color:var(--haldi)}
.thero .sub{max-width:56ch;font-size:18px;color:var(--rice-dim);margin-top:20px}
.thero .chapter .num{color:var(--haldi)}
.thero .chapter .kg{color:var(--haldi)}
.thero .chapter .t{color:var(--rice-dim)}
.thero .metas{display:flex;gap:44px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--line-d)}
.thero .metas .k{display:block;font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--haldi);margin-bottom:4px}
.thero .metas .v{font-family:var(--ff-d);font-weight:300;font-size:21px;color:var(--rice)}
.thero-clasp{position:absolute;right:-40px;top:60px;color:rgba(243,234,217,.5)}
.thero-clasp .kclasp{width:230px;height:230px}
@media (max-width:1100px){.thero-clasp{display:none}}

/* the editorial two-column */
.sec--ed{padding-top:104px;padding-bottom:104px}
.edgrid{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start;max-width:1240px}
.edrail h2{font-size:36px;max-width:16ch;margin-top:6px}
.edbody p{max-width:66ch;margin-bottom:20px}
.edbody p:last-child{margin-bottom:0}
.dark .edbody p{color:var(--rice-dim)}

/* card grid */
.cardgrid{display:grid;gap:22px;margin-top:44px}
/* A grid of one. Left at full width it ran a 1000px photograph out to 1160 and made the single
   property on Cerf Island read as the most important stay on the page, which is not what one
   card in a list means. Held to the width of a two-up column, it reads as what it is. */
.cardgrid.c1{grid-template-columns:minmax(0,560px);justify-content:center}
.cardgrid.c2{grid-template-columns:repeat(2,1fr)}
.cardgrid.c3{grid-template-columns:repeat(3,1fr)}
.cardgrid.c4{grid-template-columns:repeat(4,1fr)}
.cardgrid.c5{grid-template-columns:repeat(5,1fr)}
.card{display:block;text-decoration:none;background:var(--rice);border:1px solid var(--line-l);
  border-radius:2px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
a.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(34,36,30,.13)}
.card .ci{aspect-ratio:4 / 3;overflow:hidden;background:var(--sand)}
.card .ci img{width:100%;height:100%;object-fit:cover;transition:transform 4s var(--ease)}
a.card:hover .ci img{transform:scale(1.04)}
.card .cb{padding:22px 24px 26px}
.card .ey{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kumkum);display:block;margin-bottom:7px}
.card h3{font-size:22px;font-weight:400;margin-bottom:7px}
.card p{font-size:15.5px;line-height:1.6;color:var(--dust)}
.card .cmeta{display:block;margin-top:14px;font-family:var(--ff-m);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--kumkum-deep)}
.dark .card{background:rgba(243,234,217,.05);border-color:var(--line-d)}
.dark .card h3{color:var(--rice)}
.dark .card p{color:var(--rice-dim)}
.dark .card .ey,.dark .card .cmeta{color:var(--haldi)}
.sandy .card{background:var(--rice)}

/* galleries */
.gal{display:grid;gap:12px;margin-top:44px}
.gal.g1{grid-template-columns:1fr}
.gal.g2{grid-template-columns:repeat(2,1fr)}
.gal.g3{grid-template-columns:repeat(3,1fr)}
.gal.g4{grid-template-columns:repeat(4,1fr)}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:2px}
.gal img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
.gal figcaption{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dust);padding:9px 2px 0}
.dark .gal figcaption{color:var(--rice-dim)}
.bfig{margin:30px 0}
.bfig img{width:100%;border-radius:2px}
.bfig figcaption{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dust);padding:9px 2px 0}

/* the alternating band */
.band{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:56px}
.band--flip .bt{order:2}
.band .bp img{width:100%;height:auto;border-radius:2px;aspect-ratio:3 / 2;object-fit:cover;display:block}  /* the band is a landscape component: a portrait source is cropped to it rather than
     allowed to stretch the row to its own height and strand the text at the bottom */
.band .bt h2{font-size:36px;margin-bottom:18px}
.band .bt p{margin-bottom:16px;color:var(--dust);max-width:52ch}
.dark .band .bt p{color:var(--rice-dim)}

/* the stacked row list */
.rowlist{margin-top:44px;border-top:1px solid var(--line-l)}
.rl-row{display:grid;grid-template-columns:300px 1fr;gap:44px;padding:26px 0;
  border-bottom:1px solid var(--line-l);align-items:start}
.rl-k h3{font-size:22px;font-weight:400;margin-bottom:5px}
.rl-k span{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--kumkum-deep)}
.rl-b{color:var(--dust);max-width:64ch}
.rl-b p{margin-bottom:12px}
.rl-b p:last-child{margin-bottom:0}
.dark .rowlist,.dark .rl-row{border-color:var(--line-d)}
.dark .rl-b{color:var(--rice-dim)}
.dark .rl-k span{color:var(--haldi)}

/* key facts */
.kf{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:44px;
  background:var(--line-l);border:1px solid var(--line-l)}
.kf > div{background:var(--rice);padding:22px 24px}
.kf dt{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kumkum);margin-bottom:6px}
.kf dd{font-family:var(--ff-d);font-weight:300;font-size:20px;line-height:1.4}
.dark .kf{background:var(--line-d);border-color:var(--line-d)}
.dark .kf > div{background:var(--night)}
.dark .kf dt{color:var(--haldi)}
.sandy .kf > div{background:var(--sand)}

/* FAQ */
.faq{margin-top:40px;border-top:1px solid var(--line-l);max-width:78ch}
.faq details{border-bottom:1px solid var(--line-l)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:var(--ff-d);font-weight:400;font-size:20px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:19px;font-family:var(--ff-s);
  font-size:22px;color:var(--kumkum);transition:transform .3s var(--ease)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 22px;color:var(--dust);max-width:70ch}
.faq .a p{margin-bottom:12px}
.faq .a p:last-child{margin-bottom:0}
.dark .faq,.dark .faq details{border-color:var(--line-d)}
.dark .faq .a{color:var(--rice-dim)}
.dark .faq summary::after{color:var(--haldi)}

/* related */
.rel{margin-top:60px;padding-top:34px;border-top:1px solid var(--line-l)}
.rel h3{font-size:18px;font-family:var(--ff-m);font-weight:500;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dust);margin-bottom:18px}
.rel .rl{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 26px}
.rel .rl.c1{grid-template-columns:1fr}
.rel .rl.c2{grid-template-columns:repeat(2,1fr)}
.rel .rl.c3{grid-template-columns:repeat(3,1fr)}
.rel .rl a{display:block;padding:11px 0;border-bottom:1px solid var(--line-l);text-decoration:none;
  font-family:var(--ff-d);font-weight:300;font-size:17px}
.rel .rl a:hover{color:var(--kumkum)}
.dark .rel,.dark .rel .rl a{border-color:var(--line-d)}
.dark .rel .rl a{color:var(--rice)}

/* the closing CTA band */
.ctaband{text-align:center;position:relative;overflow:hidden}
.ctaband h2{margin:0 auto}
.ctaband p{max-width:56ch;margin:16px auto 30px;color:var(--rice-dim);font-family:var(--ff-d);
  font-weight:300;font-size:18px}
.ctaband .go{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.ctaband .chapter{justify-content:center}
.clasp-cta{position:absolute;left:50%;top:-30px;transform:translateX(-50%);color:rgba(243,234,217,.16)}
.clasp-cta .kclasp{width:200px;height:200px}

/* centred section heads */
.chapter--c{justify-content:center}
.h2--c{margin-left:auto;margin-right:auto;text-align:center}
.lede--c{margin-left:auto;margin-right:auto;text-align:center}

/* ---------------- the split hero (car leaves) ---------------- */
.shero{background:var(--night);color:var(--rice);padding:142px 0 0;position:relative;overflow:hidden}
.sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-bottom:60px}
.sh-txt h1{font-size:52px;font-weight:200;color:var(--rice);line-height:1.14;max-width:15ch}
.sh-txt h1 em{font-style:normal;font-weight:400;color:var(--haldi)}
.sh-txt .sub{max-width:48ch;font-size:18px;color:var(--rice-dim);margin-top:18px}
.sh-txt .chapter .num,.sh-txt .chapter .kg{color:var(--haldi)}
.sh-txt .chapter .t{color:var(--rice-dim)}
.sh-price{display:flex;align-items:baseline;gap:12px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line-d);flex-wrap:wrap}
.sh-price .big{font-family:var(--ff-d);font-weight:300;font-size:44px;color:var(--rice);line-height:1}
.sh-price .unit{font-family:var(--ff-m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--haldi)}
.sh-price .alt{font-family:var(--ff-m);font-size:12px;letter-spacing:.06em;color:var(--rice-dim)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chip{font-family:var(--ff-m);font-size:11px;letter-spacing:.1em;color:var(--rice-dim);
  border:1px solid var(--line-d);border-radius:2px;padding:8px 12px}
.chip b{color:var(--haldi);font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  font-size:10px;display:block;margin-bottom:3px}
.sh-txt .go{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
/* The product plate. The fleet photographs are studio cut-outs shot on white, so the plate is
   white rather than rice: on rice the cut-out's own background shows as a visible seam. It is
   the photograph's ground, not a design colour, and it is used nowhere else. */
.sh-ph{background:var(--rice);border-radius:2px;aspect-ratio:3 / 2;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.sh-ph img{width:100%;height:100%;object-fit:cover;display:block}
.sh-ph--cut{background:#FFFFFF;padding:18px}
.sh-ph--cut img{object-fit:contain}

/* ---------------- the car widget (ported, repainted) ---------------- */
.carbook{padding:36px 40px 40px}
.cb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  padding-bottom:18px;border-bottom:1px solid var(--line-l);flex-wrap:wrap}
.cb-flag{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kumkum-deep)}
.cb-price{display:flex;align-items:baseline;gap:7px}
.cb-rate-big{font-family:var(--ff-d);font-weight:300;font-size:38px;line-height:1;color:var(--ink)}
.cb-price small{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dust)}
.cb-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin-top:26px}
.cbf--full{grid-column:1 / -1}
.cb-custom[hidden]{display:none}
.cb-pras{grid-column:1 / -1;font-size:14.5px;color:var(--kumkum-deep);background:var(--sand);
  border-radius:2px;padding:12px 14px;margin:0 0 20px}
.cb-pras[hidden]{display:none}
.cb-sum{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  border-top:1px solid var(--line-l);padding-top:20px;margin-top:6px;flex-wrap:wrap}
.cb-line{font-family:var(--ff-m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.cb-tot{font-family:var(--ff-d);font-weight:300;font-size:40px;line-height:1;color:var(--ink)}
.cb-inr{font-family:var(--ff-m);font-size:11.5px;letter-spacing:.06em;color:var(--dust);
  margin-top:8px;margin-bottom:22px}
.cb-sep{margin:0 7px;opacity:.6}
.cb-note{font-size:13.5px;color:var(--dust);margin-top:14px;max-width:60ch}

/* ---------------- the transfer and taxi widget (ported, repainted) ----------------
   Painted as the car widget's twin, because a reader who has already booked a car on this site
   should recognise it. Two differences, and both are the product rather than the design: there
   is no price block, since a transfer is quoted per route, and the whole grid is one column of
   pairs rather than a price ladder. */
.xfer{padding:36px 40px 40px}
.xf-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  padding-bottom:18px;border-bottom:1px solid var(--line-l);flex-wrap:wrap}
.xf-flag{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kumkum-deep);max-width:44ch}
.xf-ttl{font-family:var(--ff-d);font-weight:300;font-size:30px;line-height:1;color:var(--ink)}
.xf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin-top:26px}
.xff--full{grid-column:1 / -1}
.xf-custom[hidden]{display:none}
.xf-note{font-size:13.5px;color:var(--dust);margin-top:14px;max-width:62ch}

/* ---------------- the calm calendar, as a table ---------------- */
.wtab{margin-top:40px;overflow-x:auto}
.wtab:focus-visible{outline:2px solid var(--kumkum);outline-offset:3px}
.wtab table{width:100%;border-collapse:collapse;border-top:1px solid var(--line-l);
  min-width:640px}
.wtab th,.wtab td{text-align:left;padding:13px 14px 13px 2px;border-bottom:1px solid var(--line-l);
  font-family:var(--ff-s);font-size:15px;font-weight:400;vertical-align:top;line-height:1.6}
.wtab thead th{font-family:var(--ff-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--kumkum-deep);font-weight:500}
.wtab tbody th{font-family:var(--ff-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;width:1%}
.wtab td{color:var(--dust-2)}
.wtab td b{color:var(--ink);font-weight:500}
.wtab-note{font-size:14px;color:var(--dust-2);margin-top:16px;max-width:70ch}
.dark .wtab table,.dark .wtab th,.dark .wtab td{border-color:var(--line-d)}
.dark .wtab tbody th,.dark .wtab td b{color:var(--rice)}
.dark .wtab td,.dark .wtab-note{color:var(--rice-dim)}
.dark .wtab thead th{color:var(--haldi)}

.gal-note{font-family:var(--ff-m);font-size:11px;letter-spacing:.05em;color:var(--dust);
  margin-top:14px;text-align:center}

/* ---------------- the opening paragraphs of an article ---------------- */
/* An article's lede is prose and prose needs a measure. Without this it ran to the full 1,150px
   of the wrapper, about a hundred and sixty characters a line, and the paragraphs sat flush
   against each other with no gap. Nothing overflowed, so no guard saw it. */
.lede{max-width:68ch;margin-top:26px}
.lede p{font-size:17.5px;line-height:1.75;color:var(--dust-2);margin-bottom:20px}
.lede p:last-child{margin-bottom:0}
/* BODY PARAGRAPHS SIT 20px APART. site.css opens with `*{margin:0}`, and the only rules that ever
   put a paragraph margin back are `.lede p` and `.edbody p` above. Any paragraph written straight
   into a section, which `prose()` does whenever its output is not wrapped in one of those two,
   therefore ran flush against the next one with a measured gap of exactly ZERO. It was doing that
   on 51 of the 157 pages, 99 pairs, and every guard passed all of them, because two touching
   paragraphs are valid HTML with perfect contrast and no axe violation. Sam found it by looking.
   Adjacent-sibling, so it can never double up with a container that already spaces its own
   paragraphs with margin-bottom, and every one of those is neutralised on the next line anyway.
   20px is not a new number: it is the rhythm `.lede p` and `.edbody p` already set. */
main p + p{margin-top:20px}
/* AND THE SAME PARAGRAPHS HAD NO MEASURE EITHER. `.edbody p` is capped at 66ch and `.lede` at
   60ch, because a line of type longer than about 75 characters is measurably harder to read: the
   eye loses its place on the return sweep. A paragraph written straight into the section wrap
   inherited the full 1160px column, which at 17px is 105 to 167 characters a line. It was doing
   that in 84 paragraphs across 25 pages, worst on the adventure page and the India pillar, and it
   is the same root cause as the missing margin directly above. 66ch is not a new number either.
   `.center` keeps its centring, because a max-width with automatic margins is still centred and a
   max-width without them silently shunts the text to the left. */
main .wrap > p{max-width:66ch}
main .wrap > p.center{margin-left:auto;margin-right:auto}
.spec-note{max-width:74ch}
.lede p + p,.edbody p + p,.band .bt p + p,.rl-b p + p,.faq .a p + p,.tourbody p + p,
.rv-t p + p{margin-top:0}
/* The label boxes are meant to be tight. `.vbox` is an uppercase label sitting directly on the one
   line it labels, and a 20px gap there would break the pair apart rather than fix anything. */
.vbox p + p{margin-top:0}
.dark .lede p{color:var(--rice-dim)}

/* ---------------- the inline offer inside an article ---------------- */
.upsell{margin:34px 0;padding:24px 26px;background:var(--sand);border-left:2px solid var(--kumkum);
  max-width:62ch}
.up-eye{display:block;font-family:var(--ff-m);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--kumkum-deep)}
.up-t{font-family:var(--ff-d);font-weight:300;font-size:24px;line-height:1.15;color:var(--ink);
  margin:9px 0 8px}
.up-x{font-size:15.5px;line-height:1.7;color:var(--dust-2);margin:0 0 14px}
.up-a{font-family:var(--ff-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kumkum-deep);text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;padding:0 2px;box-shadow:inset 0 -1px 0 var(--kumkum)}
.up-a:hover{color:var(--ink);border-color:var(--ink)}
.dark .upsell{background:rgba(255,255,255,.05);border-left-color:var(--haldi)}
.dark .up-eye,.dark .up-a{color:var(--haldi)}
.dark .up-t{color:var(--rice)}
.dark .up-x{color:var(--rice-dim)}
@media(max-width:640px){.upsell{padding:20px 18px}}

/* ---------------- the editorial byline ---------------- */
.byline{display:flex;align-items:flex-start;gap:14px;margin:0 0 34px;padding-bottom:22px;
  border-bottom:1px solid var(--line-l);max-width:70ch}
.byline .by-mark{flex:0 0 auto;line-height:1;opacity:.85;margin-top:2px}
.byline .by-mark svg{width:16px;height:16px;display:block}
.by-t{display:flex;flex-direction:column;gap:3px}
.by-t b{font-family:var(--ff-s);font-weight:500;font-size:16px;color:var(--ink)}
.by-date,.by-note{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust)}
.by-note{text-transform:none;letter-spacing:.02em;font-family:var(--ff-s);font-size:14.5px;
  line-height:1.65;margin-top:5px}
.dark .byline{border-color:var(--line-d)}
.dark .by-t b{color:var(--rice)}
.dark .by-date,.dark .by-note{color:var(--rice-dim)}

.credits{font-family:var(--ff-m);font-size:11px;letter-spacing:.05em;color:var(--dust);
  margin-top:16px;line-height:1.9}
.credits a{color:var(--dust);text-decoration:underline;text-underline-offset:3px}
.credits a:hover{color:var(--kumkum)}

/* ---------------- the spec sheet ---------------- */
.spec{margin-top:40px;max-width:640px}
.spec table{width:100%;border-collapse:collapse;border-top:1px solid var(--line-l)}
.spec th,.spec td{text-align:left;padding:13px 2px;border-bottom:1px solid var(--line-l);
  font-family:var(--ff-s);font-size:15.5px;font-weight:400;vertical-align:top}
.spec th{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--kumkum-deep);width:44%;font-weight:500}
.spec td{color:var(--ink)}
.spec-note{font-size:14px;color:var(--dust);margin-top:14px}
/* the quiet annotation after a price. Its own line, and quieter, because run into the figure it
   read as part of the number. */
.spec td .sn{display:block;font-size:13.5px;color:var(--dust);margin-top:3px}
.dark .spec td .sn{color:var(--rice-dim)}
.dark .spec table,.dark .spec th,.dark .spec td{border-color:var(--line-d)}
.dark .spec td{color:var(--rice)}
.dark .spec th{color:var(--haldi)}
.dark .spec-note{color:var(--rice-dim)}
.sandy .spec th{color:var(--kumkum-deep)}

/* ---------------- the published data table ---------------- */
/* Scrolls sideways rather than squashing on a phone. A statistics table with six columns cannot
   be made to fit 375px without either a font nobody can read or a wrap that breaks the digit
   alignment, and alignment is the whole point of the table. `tabindex` makes the scroller
   keyboard-reachable, which axe requires of any scrollable region. */
.dtab{margin-top:40px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dtab:focus-visible{outline:2px solid var(--kumkum);outline-offset:3px}
.dtab table{width:100%;min-width:520px;border-collapse:collapse;border-top:1px solid var(--line-l)}
.dtab caption{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--kumkum-deep);text-align:left;padding-bottom:12px;line-height:1.8}
.dtab th,.dtab td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--line-l);
  font-family:var(--ff-s);font-size:15px;font-weight:400;vertical-align:baseline;white-space:nowrap}
.dtab thead th{font-family:var(--ff-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dust);font-weight:500;white-space:nowrap}
.dtab tbody th{color:var(--ink);white-space:normal;padding-right:26px}
.dtab td{color:var(--ink)}
.dtab .num{text-align:right;font-variant-numeric:tabular-nums;padding-right:0;padding-left:18px}
.dtab tr.on th,.dtab tr.on td{color:var(--kumkum-deep);font-weight:500}
.dark .dtab table,.dark .dtab th,.dark .dtab td{border-color:var(--line-d)}
.dark .dtab caption{color:var(--haldi)}
.dark .dtab thead th{color:var(--rice-dim)}
.dark .dtab tbody th,.dark .dtab td{color:var(--rice)}
.dark .dtab tr.on th,.dark .dtab tr.on td{color:var(--haldi)}
/* On a phone the four columns overflow and the 2025 figure gets cut mid-number, so a reader sees
   "13,40" and has no reason to believe there is more. Every guard passed that, because it is a
   working sideways scroller and axe, the contrast check and the overflow check are all satisfied
   by it. It simply reads as broken. A scroll shadow was tried first and Chromium would not paint
   it, the mixed `background-attachment` layers a scroller needs for that trick came out empty
   under measurement. The better answer was never the affordance anyway. Five short rows and three
   year columns DO fit inside 375px once the type is set at the size a table wants rather than the
   size body copy wants, so the fix is to make it fit and show every figure at once. */
@media(max-width:560px){
  .dtab table{min-width:0}
  .dtab th,.dtab td{font-size:13.5px;padding:11px 0 11px 0}
  .dtab tbody th{padding-right:10px;hyphens:auto}
  .dtab .num{padding-left:9px}
  .dtab thead th{font-size:9.5px;letter-spacing:.08em}
  .dtab caption{font-size:9.5px;letter-spacing:.12em}
}

/* ---------------- the illustrated history ---------------- */
.hist{margin-top:48px;display:flex;flex-direction:column;gap:14px}
.hrow{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.hrow:nth-child(even) figure{order:2}
.hrow figure{margin:0;border-radius:2px;overflow:hidden}
.hrow figure img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;display:block}
.hrow .ht h3{font-size:27px;font-weight:400;margin-bottom:10px}
.hrow .ht p{color:var(--dust);max-width:52ch}
.dark .hrow .ht p{color:var(--rice-dim)}
.sandy .hrow .ht p{color:var(--dust)}

/* ---------------- excursions ---------------- */
/* six frames, the lead spanning two by two, so the three by three grid is always full */
.tgal{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,auto);
  gap:12px;margin-top:44px}
.tgal figure{margin:0;overflow:hidden;border-radius:2px;background:var(--sand)}
.tgal img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3 / 2}
.tgal .tg-0{grid-column:span 2;grid-row:span 2}
.tgal .tg-0 img{aspect-ratio:auto;height:100%}

.tourwrap{display:grid;grid-template-columns:1.6fr .9fr;gap:56px;align-items:start;margin-top:56px}
.tourbody h2{font-size:29px;margin:44px 0 14px}
.tourbody h2:first-of-type{margin-top:0}
.tourbody p{margin-bottom:15px;max-width:64ch;color:var(--dust)}
.tourbody .kf{margin-top:26px;grid-template-columns:repeat(2,1fr)}

.vbox{background:var(--sand);border-left:2px solid var(--haldi);border-radius:2px;
  padding:22px 24px;margin-bottom:34px;--dust:#635D52}
.vbox-t{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kumkum-deep);margin-bottom:9px}
/* `max-width:none` was here to clear an inherited cap, and it left the callout's line running
   to 143 characters on the beach pages, the widest body text on the site. A measure, not
   `none`. The box still spans its column; only the type inside it stops where the eye can
   still find the next line. */
.vbox p{font-size:15.5px;line-height:1.65;color:var(--ink);margin:0;max-width:66ch}

.ticks{list-style:none;margin:8px 0 0;padding:0}
.ticks li{position:relative;padding:9px 0 9px 30px;border-bottom:1px solid var(--line-l);
  font-size:16px;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:4px;top:16px;width:11px;height:6px;
  border-left:1.6px solid var(--kumkum);border-bottom:1.6px solid var(--kumkum);
  transform:rotate(-45deg)}

.rvbox{display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:center;
  background:var(--sand);border-radius:2px;padding:24px 26px;margin-top:12px;--dust:#635D52}
.rv-n{font-family:var(--ff-d);font-weight:300;font-size:46px;line-height:1;color:var(--ink)}
.rv-n span{display:block;font-family:var(--ff-m);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dust);margin-top:5px}
.rv-t p{margin-bottom:9px;font-size:15.5px;max-width:none}
.rv-t p:last-child{margin-bottom:0}

.tbook{position:sticky;top:96px;background:var(--rice);border:1px solid var(--line-l);
  border-radius:2px;padding:28px 26px 26px}
.tb-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tb-from{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dust)}
.tb-eur{font-family:var(--ff-d);font-weight:300;font-size:38px;line-height:1;color:var(--ink)}
.tb-per{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust)}
.tb-inr{font-family:var(--ff-m);font-size:11.5px;letter-spacing:.06em;color:var(--dust);margin-top:6px}
.tb-facts{margin:20px 0 22px;border-top:1px solid var(--line-l)}
.tb-facts > div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line-l)}
.tb-facts dt{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kumkum-deep)}
.tb-facts dd{font-family:var(--ff-d);font-weight:400;font-size:16px;color:var(--ink);text-align:right}
.tbook .btn{width:100%;text-align:center;margin-bottom:10px}
.tb-note{font-size:13px;line-height:1.6;color:var(--dust);margin-top:12px}

.tourform{margin-top:8px}
.tf-flag{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kumkum-deep);margin-bottom:22px}
.tf-note{font-size:13.5px;color:var(--dust);text-align:center;margin-top:14px}

/* The contact form. It reuses `.f` and `.f.grid2` from site.css, which is the point of the split:
   every form on this node wears the same field, the same label case and the same focus ring, and
   this file only adds what is particular to this one. */
/* The contact form is narrower than the booking widgets and that is on purpose. The transfer
   widget earns the full 1200px wrap because it has eight fields in pairs and a price to show.
   This one has seven fields and no price, and at full wrap the box for "Your name" was 660px
   long, which reads as a database screen rather than as a letter. */
.formcol{max-width:940px;margin:0 auto}
.planform{margin-top:8px}
.pf-flag{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kumkum-deep);line-height:1.9;margin-bottom:22px;max-width:46ch}
.planform .btn{width:100%;text-align:center}
.pf-note{font-size:13.5px;color:var(--dust);text-align:center;margin-top:14px}

/* the hub's group heads */
.tgroup{margin-top:64px}
.tgroup:first-of-type{margin-top:44px}
.tgroup h3{font-size:27px;font-weight:400;margin-bottom:7px}
.tgroup .tg-lede{color:var(--dust);max-width:64ch}
/* The lede above was capped and the paragraphs under it were not, so they ran to 136. */
.tgroup > p{max-width:66ch}
.tgroup .cardgrid{margin-top:26px}
.pill{display:inline-block;font-family:var(--ff-m);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--kumkum-deep);border:1px solid var(--line-l);
  border-radius:2px;padding:5px 9px;margin:0 6px 6px 0}
.dark .pill{color:var(--haldi);border-color:var(--line-d)}

/* ---------------- where to stay ----------------
   The stay leaf borrows the excursion leaf's .tourwrap and .tourbody wholesale and adds only
   what a property page needs that a day out does not: a rating line, a quote pair, and a card
   whose single button leaves this site. Nothing here is a second two-column system. */
.stayb .hblk{margin-bottom:8px}
.stayb .hblk .chapter{margin-bottom:12px}
.stayb h2{margin:0 0 14px}
.stayb .hblk:first-child h2{margin-top:0}
.stayb .kf{margin-top:22px}

.srate{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.srate-n{font-family:var(--ff-d);font-weight:300;font-size:38px;line-height:1;color:var(--ink)}
.srate-o,.srate-c{font-size:15px;color:var(--dust)}
.srate-d{color:var(--line-l)}
.srate-v{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kumkum-deep)}

.hq-in{font-size:15.5px;color:var(--dust);margin-bottom:16px}
.hqs{display:grid;gap:14px}
.hq{margin:0;padding:20px 24px;background:var(--sand);border-left:2px solid var(--kumkum);
  border-radius:2px;font-family:var(--ff-d);font-weight:300;font-size:18px;line-height:1.6;
  color:var(--ink)}
.hq cite{display:block;margin-top:12px;font-style:normal;font-family:var(--ff-m);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--kumkum-deep)}
.hq-out{font-size:15.5px;color:var(--dust);margin-top:16px}
.hq-out b{color:var(--ink)}

.scard{position:sticky;top:96px;background:var(--rice);border:1px solid var(--line-l);
  border-radius:2px;padding:26px 24px 24px}
.sc-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-m);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--kumkum-deep);margin-bottom:16px}
.sc-badge svg{width:20px;height:13px;color:var(--kumkum)}
.sc-rate{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.sc-rate b{font-family:var(--ff-d);font-weight:300;font-size:36px;line-height:1;color:var(--ink)}
.sc-rate span{font-size:13.5px;color:var(--dust)}
.sc-meta{font-size:13.5px;color:var(--dust);margin:6px 0 20px}
.scard .btn{width:100%;text-align:center}
.sc-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.sc-list li{position:relative;padding-left:28px;font-size:14px;line-height:1.55;color:var(--ink)}
.sc-list li::before{content:"";position:absolute;left:3px;top:8px;width:11px;height:6px;
  border-left:1.6px solid var(--kumkum);border-bottom:1.6px solid var(--kumkum);
  transform:rotate(-45deg)}
.sc-disc{font-size:12px;line-height:1.6;color:var(--dust);margin-top:18px;padding-top:15px;
  border-top:1px solid var(--line-l)}

/* the hub: a per-island band, then the cards. Same device as the excursion hub's .tgroup. */
.pickwrap{margin:44px 0 8px}
.pick{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:var(--sand);
  border-radius:2px;overflow:hidden}
.pick figure{margin:0;height:100%}
.pick img{width:100%;height:100%;object-fit:cover;min-height:340px}
.pick .pk{padding:44px 46px;display:flex;flex-direction:column;justify-content:center}
.pick .pk-ey{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kumkum-deep);margin-bottom:12px}
.pick .pk h3{font-size:32px;font-weight:300;margin-bottom:6px}
.pick .pk-where{font-family:var(--ff-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dust);margin-bottom:16px}
.pick .pk p{font-size:16.5px;line-height:1.65;color:var(--ink);margin-bottom:18px;max-width:52ch}
.pick .pk .go{margin-top:4px}

/* ---------------- the live fare widget ---------------- */
.tpw{margin:36px 0 0}
.tp-cities{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.tp-city{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;
  font-family:var(--ff-m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--sand);border:1px solid transparent;border-radius:2px;
  cursor:pointer;transition:background .18s ease,color .18s ease}
.tp-city:hover{background:var(--kumkum-lt);color:var(--rice)}
.tp-city.is-on{background:var(--kumkum-lt);color:var(--rice)}
.tp-city:focus-visible{outline:2px solid var(--kumkum);outline-offset:2px}
/* The embed builds its own iframe and resizes it by postMessage. It reports about 555px once it
   has settled and roughly three thousand while it is still loading, so the slot holds a floor
   rather than a fixed height: a fixed height clips the results, and no floor makes the whole page
   jump when the fare lands. */
.tp-slot{min-height:560px;background:#fff;border-radius:2px;overflow:hidden}
.tp-slot iframe{display:block;width:100%;border:0}
/* THE "Powered by travelpayouts" ATTRIBUTION IS HIDDEN IN JAVASCRIPT, NOT HERE, and that is not a
   style choice. Both the anchor and its `.tp_powered_by` wrapper are written by the embed with
   `display: ... !important` in an INLINE style attribute, and an inline `!important` outranks
   every rule in every stylesheet, including one that is itself `!important`. A CSS rule was tried
   first and measured afterwards: the anchor still painted at 152x12 with `display:inline-block`.
   `_TP_JS` sets the property inline with priority instead, which is the only thing that wins.
   Three earlier rules lived here to make that link accessible, a 44px tap target, a
   `max-width:none` on its logo and a focus ring. A hidden element is outside axe's scope, so all
   three were deleted along with the style-stripping repair in `_TP_JS`. */
.tp-note{font-size:13.5px;line-height:1.68;color:var(--dust);margin:16px 0 0;max-width:74ch}

/* ---------------- the pillar: timeline, office card, sources ---------------- */
.timeline{margin:34px 0 4px;border-top:1px solid var(--line-l)}
.tl-row{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:22px 0;
  border-bottom:1px solid var(--line-l);align-items:start}
.tl-yr{font-family:var(--ff-d);font-weight:300;font-size:27px;line-height:1.1;color:var(--kumkum-deep)}
.tl-tag{display:block;font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dust);margin-bottom:7px}
.tl-bd p{font-size:16.5px;line-height:1.68;color:var(--ink);max-width:66ch;margin:0}

.offgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:34px 0 6px}
/* These two lay their own sand ground inside a rice section, so they rescope --dust the way
   site.css does for `.sandy`. The default #6B655A measures 4.26 against sand and fails AA at
   14px. The sand-scoped value measures 4.81. The static contrast table in gate.py passed this
   pair because it tests the declared pairs; only the browser saw which one was actually used. */
.off,.srcbox{--dust:#635D52}
.off{background:var(--sand);border-radius:2px;padding:34px 34px 30px}
.off-tag{display:block;font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--kumkum-deep);margin-bottom:11px}
.off h3{font-size:24px;font-weight:300;line-height:1.25;margin-bottom:14px}
.off-lines{font-size:16px;line-height:1.72;color:var(--ink);margin:0 0 16px}
.off-h{display:grid;gap:6px;margin:0 0 16px;padding-top:14px;border-top:1px solid var(--line-l)}
.off-h div{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline}
.off-h dt{font-size:14px;color:var(--dust)}
.off-h dd{font-size:14px;color:var(--ink);margin:0;text-align:right}
.off-n{font-size:14px;line-height:1.65;color:var(--dust);margin:0 0 16px;max-width:56ch}
.off-go{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0}
.off-go a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--ff-m);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--kumkum-deep);
  border-bottom:1px solid var(--kumkum)}
.off-go a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* One office and one only, so it does not sit in a two-column grid with a hole beside it. The
   prose goes beside it instead, which is what stops the right half of the section being empty:
   a 68ch lede plus a 660px card, both left-aligned, left five hundred pixels of nothing. */
.offrow{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-top:34px}
.offrow .lede{max-width:none}
.offrow .off{margin:0}

.srcbox{margin:40px 0 0;padding:34px 36px 30px;background:var(--sand);border-radius:2px;
  max-width:790px}
.srcbox h3{font-size:20px;font-weight:300;margin-bottom:16px}
.srclist{margin:0;padding-left:22px;display:grid;gap:9px}
.srclist li{font-size:14.5px;line-height:1.65;color:var(--ink)}
.srclist a{color:var(--kumkum-deep);border-bottom:1px solid var(--line-l)}
.srclist a:hover{border-bottom-color:var(--kumkum)}
.srcbox-n{font-size:13.5px;line-height:1.68;color:var(--dust);margin:18px 0 0;max-width:74ch;
  padding-top:16px;border-top:1px solid var(--line-l)}

/* ---------------- mobile ---------------- */
@media (max-width:940px){
  .tl-row{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .tl-yr{font-size:23px}
  .offgrid,.offrow{grid-template-columns:1fr;gap:18px}
  .off,.srcbox{padding:28px 24px 26px}
  .tp-cities{grid-template-columns:repeat(2,1fr)}
  .tp-slot{min-height:640px}
  .tgal{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}
  /* the lead frame stops spanning at this width: six equal cells in two columns fill three
     rows exactly, where a spanned lead plus five singles would leave an orphan */
  .tgal .tg-0{grid-column:auto;grid-row:auto}
  .tgal .tg-0 img{aspect-ratio:3 / 2}
  .tourwrap{grid-template-columns:1fr;gap:38px}
  .tbook,.scard{position:static}
  .pick{grid-template-columns:1fr}
  .pick img{min-height:260px}
  .pick .pk{padding:34px 26px 36px}
  .pick .pk h3{font-size:28px}
  .tourbody h2{font-size:25px;margin:32px 0 12px}
  .tourbody .kf{grid-template-columns:1fr}
  .rvbox{grid-template-columns:1fr;gap:12px;text-align:left}
  .sh-grid{grid-template-columns:1fr;gap:34px;padding-bottom:56px}
  .shero{padding-top:96px}
  .sh-txt h1{font-size:35px}
  .carbook,.xfer{padding:28px 22px 30px}
  .cb-grid,.xf-grid{grid-template-columns:1fr;gap:0}
  .xf-ttl{font-size:26px}
  .cb-rate-big{font-size:32px}
  .cb-tot{font-size:32px}
  .hrow{grid-template-columns:1fr;gap:18px}
  .hrow:nth-child(even) figure{order:0}
  .spec th{width:50%}
  .bento{grid-template-columns:1fr;grid-template-rows:auto}
  .pcell{min-height:250px}
  .pcell.tall{grid-row:auto;min-height:430px}
  .pcell.wide{grid-column:auto}
  .device .cal-grid{grid-template-columns:1fr;gap:30px}
  .device .answer-seat{grid-template-columns:1fr;gap:24px}
  .device .clasp-hold{display:flex;justify-content:center}
  .answer{padding:30px 26px}
  .isles{grid-template-columns:1fr}
  .isle.big{grid-row:auto;min-height:430px}
  .side{grid-template-rows:auto;grid-row:auto}
  .shores .cols{grid-template-columns:1fr;gap:30px}
  .wed-grid{grid-template-columns:1fr}
  .wed-grid .photo{min-height:440px}
  .wed-strip{grid-template-columns:1fr 1fr;gap:8px;padding:8px 8px 0}
  .wed-strip figure{height:200px}
  .wed-grid .panel{padding:60px 26px}
  .plan-grid{grid-template-columns:1fr;gap:38px}
  .thero{padding:96px 0 64px}
  .thero h1{font-size:37px}
  .thero .metas{gap:26px}
  .edgrid{grid-template-columns:1fr;gap:26px}
  .edrail h2{font-size:30px}
  .cardgrid.c3,.cardgrid.c4,.cardgrid.c5{grid-template-columns:repeat(2,1fr)}
  .gal.g3,.gal.g4{grid-template-columns:repeat(2,1fr)}
  .band{grid-template-columns:1fr;gap:26px}
  .band--flip .bt{order:0}
  .kf{grid-template-columns:repeat(2,1fr)}
  .rl-row{grid-template-columns:1fr;gap:12px}
  .rel .rl{grid-template-columns:1fr}
  .sec--ed{padding-top:68px;padding-bottom:68px}
}
@media (max-width:560px){
  /* On a phone the label column is narrower than its own longest label, so a two-column row
     wraps "Consular, passport and visa services" over three lines with the time hanging beside
     the first of them. Stacked, it reads. */
  .off-h div{grid-template-columns:1fr;gap:2px}
  .off-h dd{text-align:left}
  .cardgrid.c2,.cardgrid.c3,.cardgrid.c4,.cardgrid.c5{grid-template-columns:1fr}
  .gal.g2,.gal.g3,.gal.g4{grid-template-columns:1fr}
  .wed-strip{grid-template-columns:1fr}
  .kf{grid-template-columns:1fr}
}