/* =====================================================================
   destinito-surface.css
   A "calm surface" layer for Destinito — inspired by the discipline of
   anguillaferrytimes.com. Load AFTER your existing site.css so the
   cascade wins. Nothing here changes markup; it changes tokens, surfaces,
   rhythm, and the orange budget.

   Principles encoded here:
     1. One page background, one card recipe.
     2. Dark only at hero / one CTA band / footer.
     3. Orange is rationed: eyebrows, primary CTA, prices, tint callouts.
     4. One grid, one gutter, never edge-to-edge cards on mobile.
     5. One section opener: eyebrow → H2 → subtitle → "View all".
   ===================================================================== */

/* ---------- 1. TOKENS ------------------------------------------------ */
:root {
  /* Surfaces */
  --d-page:        #F5F7FB;   /* the ONLY body background                 */
  --d-card:        #FFFFFF;
  --d-card-alt:    #FAFBFD;   /* nested sub-blocks inside a card          */
  --d-line:        #E5E9F0;   /* hairline border                           */
  --d-line-strong: #CBD5E1;

  /* Ink (slate scale — body is grey, not black) */
  --d-ink:         #0F172A;   /* headings                                  */
  --d-ink-2:       #475569;   /* body                                      */
  --d-ink-3:       #94A3B8;   /* meta / captions                           */

  /* Brand */
  --d-navy:        #003366;   /* hero, CTA band, footer, nav text          */
  --d-navy-2:      #0B2A4A;   /* hero gradient partner                     */
  --d-orange:      #FF7F0E;   /* eyebrow, primary CTA, price, wordmark "o" */
  --d-orange-ink:  #C45D00;   /* orange used as TEXT on light (AA-safe)    */
  --d-orange-tint: #FFF4E8;   /* tip / callout card background only        */
  --d-orange-line: #FFD9B3;   /* border for tint callouts                  */

  /* Secondary accent for chips/tags (keeps navy+orange dominant) */
  --d-teal:        #0E7490;
  --d-teal-tint:   #E6F6F9;
  --d-teal-line:   #B6E3EC;

  /* Semantic */
  --d-success:     #15803D;  --d-success-tint: #ECFDF3;
  --d-warn:        #B45309;  --d-warn-tint:    #FFFBEB;
  --d-danger:      #B91C1C;  --d-danger-tint:  #FEF2F2;

  /* Shape */
  --d-r-card:      18px;
  --d-r-inner:     12px;
  --d-r-chip:      999px;
  --d-r-btn:       12px;

  /* Elevation — soft, layered, never harsh */
  --d-shadow:      0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
  --d-shadow-hover:0 2px 4px rgba(15,23,42,.05), 0 14px 32px rgba(15,23,42,.08);
  --d-shadow-none: none;

  /* Spacing scale (4px base) */
  --d-1: 4px;  --d-2: 8px;  --d-3: 12px; --d-4: 16px;
  --d-5: 20px; --d-6: 24px; --d-8: 32px; --d-10: 40px;
  --d-12: 48px; --d-16: 64px; --d-20: 80px;

  --d-pad-card:    var(--d-6);   /* inside every card                      */
  --d-gap:         var(--d-4);   /* between cards in a grid                */
  --d-section:     var(--d-16);  /* vertical rhythm between sections       */
  --d-container:   1120px;
  --d-gutter:      24px;

  /* Type */
  --d-font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --d-lh-body: 1.6;
  --d-lh-tight: 1.2;
}

@media (max-width: 640px) {
  :root {
    --d-pad-card: 18px;
    --d-section:  40px;
    --d-gutter:   16px;
    --d-r-card:   16px;
  }
}

/* ---------- 2. BASE -------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--d-page);
  color: var(--d-ink-2);
  font-family: var(--d-font);
  line-height: var(--d-lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--d-ink); line-height: var(--d-lh-tight); margin: 0; }
h1 { font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.75rem); letter-spacing: -.02em; }
h2 { font-weight: 800; font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -.015em; }
h3 { font-weight: 700; font-size: 1.05rem; }
p  { margin: 0 0 var(--d-3); }
a  { color: var(--d-navy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
small, .d-meta { color: var(--d-ink-3); font-size: .8125rem; }

/* Container — one grid, one gutter */
.d-container,
.iig-theme .container {
  width: 100%;
  max-width: var(--d-container);
  margin-inline: auto;
  margin-block: 0;
  padding-inline: var(--d-gutter);
  box-sizing: border-box;
}

/* ---------- 3. SECTION RHYTHM --------------------------------------- */
/* Every section sits on the page colour. No alternating stripes.        */
.d-section {
  background: transparent;
  padding-block: calc(var(--d-section) / 2);
}

/* One opener pattern: eyebrow → h2 → subtitle → action (right) */
.d-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--d-4); margin-bottom: var(--d-5);
}
.d-section-head .d-title-block { min-width: 0; }
.d-eyebrow {
  display: inline-flex; align-items: center; gap: var(--d-2);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--d-orange-ink); margin-bottom: var(--d-2);
}
.d-eyebrow::before {
  content: ""; width: 18px; height: 2px; background: var(--d-orange); border-radius: 2px;
}
.d-subtitle { color: var(--d-ink-2); margin-top: var(--d-2); max-width: 60ch; }
.d-view-all {
  flex: none; font-size: .875rem; font-weight: 600; color: var(--d-navy);
  white-space: nowrap;
}
.d-view-all::after { content: " ›"; }
@media (max-width: 640px) {
  .d-section-head { flex-wrap: wrap; }
}

/* ---------- 4. THE CARD RECIPE --------------------------------------- */
.d-card {
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  box-shadow: var(--d-shadow);
  padding: var(--d-pad-card);
  color: var(--d-ink-2);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.d-card.is-link:hover, a.d-card:hover {
  box-shadow: var(--d-shadow-hover);
  border-color: var(--d-line-strong);
  text-decoration: none;
}
.d-card > h3:first-child { margin-bottom: var(--d-2); }
.d-card-flush { padding: 0; overflow: hidden; }          /* image-topped cards  */
.d-card-flush .d-card-body { padding: var(--d-pad-card); }
.d-card-inner {                                          /* nested sub-block    */
  background: var(--d-card-alt);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-inner);
  padding: var(--d-4);
}

/* Tint callouts — the only place orange/teal fill a surface */
.d-callout {
  border-radius: var(--d-r-card);
  padding: var(--d-5) var(--d-pad-card);
  border: 1px solid var(--d-line);
  background: var(--d-card);
}
.d-callout--tip   { background: var(--d-orange-tint); border-color: var(--d-orange-line); }
.d-callout--info  { background: var(--d-teal-tint);   border-color: var(--d-teal-line); }
.d-callout--ok    { background: var(--d-success-tint); }
.d-callout--warn  { background: var(--d-warn-tint); }
.d-callout h3, .d-callout h4 { font-size: .95rem; margin-bottom: var(--d-1); }

/* Grids — one gap everywhere */
.d-grid { display: grid; gap: var(--d-gap); }
.d-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.d-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.d-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.d-layout-main-side { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--d-6); align-items: start; }
@media (max-width: 960px) { .d-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .d-layout-main-side { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .d-grid-2, .d-grid-3, .d-grid-4 { grid-template-columns: 1fr; } }

/* Horizontal scrollers (mobile carousels) keep the gutter visible */
.d-scroller {
  display: flex; gap: var(--d-gap); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--d-gutter); margin-inline: calc(var(--d-gutter) * -1);
  scrollbar-width: none;
}
.d-scroller::-webkit-scrollbar { display: none; }
.d-scroller > * { flex: 0 0 78%; scroll-snap-align: start; }
@media (min-width: 641px) { .d-scroller > * { flex-basis: 280px; } }

/* ---------- 5. ORANGE BUDGET: buttons, chips, prices ----------------- */
.d-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--d-2);
  padding: 10px 18px; border-radius: var(--d-r-btn); font-weight: 700; font-size: .9rem;
  border: 1px solid transparent; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.d-btn:hover { text-decoration: none; }
.d-btn-primary   { background: var(--d-orange); color: #fff; }          /* 1–2 per screen */
.d-btn-primary:hover { background: #F26F00; box-shadow: 0 6px 16px rgba(255,127,14,.25); }
.d-btn-secondary { background: var(--d-navy); color: #fff; }
.d-btn-ghost     { background: var(--d-card); color: var(--d-navy); border-color: var(--d-line-strong); }
.d-btn-ghost:hover { background: var(--d-card-alt); }
.d-btn-link      { background: transparent; color: var(--d-navy); padding-inline: 0; }

/* Chips / tags — tinted, never solid orange */
.d-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 600; line-height: 1;
  padding: 6px 10px; border-radius: var(--d-r-chip);
  background: var(--d-card-alt); color: var(--d-ink-2); border: 1px solid var(--d-line);
}
.d-chip--accent { background: var(--d-orange-tint); color: var(--d-orange-ink); border-color: var(--d-orange-line); }
.d-chip--teal   { background: var(--d-teal-tint);   color: var(--d-teal);       border-color: var(--d-teal-line); }
.d-chip--navy   { background: #EAF0F7; color: var(--d-navy); border-color: #D5E0EC; }

/* Icon tiles — tinted square with coloured glyph (AFT style) */
.d-icon-tile {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--d-orange-tint); color: var(--d-orange-ink); flex: none;
}
.d-icon-tile--teal { background: var(--d-teal-tint); color: var(--d-teal); }
.d-icon-tile--navy { background: #EAF0F7; color: var(--d-navy); }

/* Price / number highlight */
.d-price { color: var(--d-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.d-price--accent { color: var(--d-orange-ink); }

/* ---------- 6. DARK MOMENTS: hero, CTA band, footer ----------------- */
.d-hero {
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(255,127,14,.18), transparent 60%),
    linear-gradient(135deg, var(--d-navy) 0%, var(--d-navy-2) 60%, #0E3A63 100%);
  color: #fff; padding-block: var(--d-12) var(--d-16);
  border-bottom-left-radius: 28px; border-bottom-right-radius: 28px;
}
.d-hero h1 { color: #fff; }
.d-hero p  { color: rgba(255,255,255,.82); }
.d-hero .d-eyebrow { color: #FFB366; }
.d-hero .d-chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; }

.d-cta-band {
  background: linear-gradient(135deg, var(--d-navy) 0%, var(--d-navy-2) 100%);
  color: #fff; border-radius: var(--d-r-card); padding: var(--d-10) var(--d-8); text-align: center;
}
.d-cta-band h2 { color: #fff; }
.d-cta-band p  { color: rgba(255,255,255,.82); }

footer, .d-footer {
  background: var(--d-navy); color: rgba(255,255,255,.78);
  margin-top: var(--d-section); padding-block: var(--d-12) var(--d-8);
}
footer a, .d-footer a { color: rgba(255,255,255,.85); }
footer h4, .d-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--d-3); }

/* ---------- 7. HEADER / NAV ----------------------------------------- */
.d-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--d-line);
}
.d-header .d-container { display: flex; align-items: center; gap: var(--d-4); min-height: 60px; }
.d-nav a { color: var(--d-ink-2); font-weight: 600; font-size: .9rem; padding: 8px 10px; border-radius: 8px; }
.d-nav a:hover, .d-nav a[aria-current="page"] { color: var(--d-navy); background: var(--d-card-alt); text-decoration: none; }
/* Utility row (language / tourist-resident / account) lives in the drawer on mobile */
@media (max-width: 960px) { .d-utility-row { display: none; } }

/* Bottom nav (mobile): chrome, not a card */
.d-bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  background: #fff; border-top: 1px solid var(--d-line);
  padding: 6px var(--d-2) calc(6px + env(safe-area-inset-bottom));
  display: grid; grid-auto-flow: column; justify-items: center;
}
.d-bottom-nav a { color: var(--d-ink-3); font-size: .7rem; font-weight: 600; display: grid; justify-items: center; gap: 2px; }
.d-bottom-nav a[aria-current="page"] { color: var(--d-navy); }
/* The bottom nav is display:none until 768px (theme-destinito.css:2494),
   so its scroll clearance is scoped to the same breakpoint - an unconditional
   72px would be dead space on desktop. Includes the safe-area inset, which the
   .iig-main padding-bottom it replaces did not. */
@media (max-width: 768px) {
  body.has-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* Neutralise the old clearance so the two do not stack. */
  body.has-bottom-nav .iig-main { padding-bottom: 0; }
}

/* ---------- 8. FORMS ------------------------------------------------- */
.d-input, .d-select {
  width: 100%; padding: 10px 12px; border-radius: var(--d-r-inner);
  border: 1px solid var(--d-line-strong); background: #fff; color: var(--d-ink);
  font: inherit;
}
.d-input:focus, .d-select:focus { outline: 2px solid rgba(255,127,14,.35); outline-offset: 1px; border-color: var(--d-orange); }
.d-label { display: block; font-size: .8rem; font-weight: 700; color: var(--d-ink); margin-bottom: 6px; }
.d-help  { font-size: .75rem; color: var(--d-ink-3); margin-top: 4px; }

/* ---------- 9. OVERLAYS: calm, one at a time ------------------------- */
.d-sheet, .d-modal {
  background: #fff; border: 1px solid var(--d-line); border-radius: 20px;
  box-shadow: 0 24px 64px rgba(15,23,42,.18); padding: var(--d-6);
}
.d-cookie {
  position: fixed; z-index: 60; left: var(--d-4); right: var(--d-4); bottom: var(--d-4);
  max-width: 560px; margin-inline: auto;
}
/* Only one prompt visible at a time — JS should toggle .is-open sequentially */
.d-prompt:not(.is-open) { display: none; }

/* ---------- 10. UTILITIES ------------------------------------------- */
.d-stack > * + * { margin-top: var(--d-3); }
.d-row { display: flex; align-items: center; gap: var(--d-3); }
.d-between { display: flex; align-items: center; justify-content: space-between; gap: var(--d-3); }
.d-muted { color: var(--d-ink-3); }
.d-divider { height: 1px; background: var(--d-line); margin-block: var(--d-4); }
.d-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 11. LEGACY OVERRIDES (real Destinito selectors) ----------
   Every rule below is written against markup that exists today in
   _LayoutDestinito.cshtml / _HomeDestinito.cshtml / theme-destinito.css.

   SPECIFICITY NOTE - why nearly everything is prefixed with .iig-theme:
   most Explore section styling lives in inline <style> blocks INSIDE
   _HomeDestinito.cshtml. Inline <style> in the body comes after this
   linked sheet in document order, so it wins every tie. <body> carries
   class="iig-theme", so prefixing with .iig-theme raises this layer one
   class-level above those blocks and the cascade resolves on specificity
   instead of order. That is what keeps the !important count at zero.
   ------------------------------------------------------------------ */

/* --- 11.1 One page background ------------------------------------- */
/* .iig-theme sets background: var(--iig-bg) (= white). The page colour is
   the whole point of the layer, so it has to be re-set at the same weight. */
.iig-theme { background: var(--d-page); color: var(--d-ink-2); }
.iig-theme .iig-main { background: transparent; }

/* No section may set its own tinted band. These were the alternating
   navy-050 stripes; the cards inside them now carry the contrast instead. */
.iig-theme .iig-sxm-traffic,
.iig-theme .iig-traffic-ad,
.iig-theme .iig-getaround,
.iig-theme .iig-quick-access,
.iig-theme .vt-chips,
.iig-theme .iig-explore,
.iig-theme .iig-sectors { background: transparent; }

/* --- 11.2 One grid, one gutter ------------------------------------ */
/* theme-destinito.css: .iig-theme .container { max-width:1280px; padding:0 12px;
   margin:12px auto 0 }. Matched at the same weight in section 2 of this file. */

/* --- 11.3 One section opener -------------------------------------- */
.iig-theme .iig-section-header,
.iig-theme .hn-head,
.iig-theme .tl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--d-4);
  margin-bottom: var(--d-5);
}

/* Heading size comes from one rule, not per section. Navy is kept here on
   purpose: the repo's own design guideline (theme-destinito.css section 2)
   mandates navy section titles, and navy is a stated brand constant. */
.iig-theme .iig-section-header .section-title,
.iig-theme .hn-head .section-title,
.iig-theme .iig-section-title {
  font-family: var(--d-font);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: var(--d-lh-tight);
  color: var(--d-navy);
  margin: 0;
}

/* Per-section heading downgrades removed - one size for every opener. */
.iig-theme .iig-getaround .section-title,
.iig-theme .iig-quick-access .section-title,
.iig-theme .iig-sectors .section-title {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -.015em;
}

/* Eyebrow: was solid --orange (#FF7F0E) as text on white, about 2.2:1 and
   below AA. --d-orange-ink (#C45D00) clears 4.5:1 and keeps the accent. */
.iig-theme .sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--d-2);
  margin-bottom: var(--d-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--d-orange-ink);
}
.iig-theme .sec-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--d-orange);
  border-radius: 2px;
}

/* --- 11.4 Orange budget: "View all" links become navy ------------- */
/* .iig-section-link and .hn-head-link were both --orange. They are
   navigation affordances, not CTAs, so they lose the accent entirely. */
.iig-theme .iig-section-link,
.iig-theme .hn-head-link,
.iig-theme .iig-nearby-link {
  flex: none;
  color: var(--d-navy);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.iig-theme .iig-section-link:hover,
.iig-theme .hn-head-link:hover,
.iig-theme .iig-nearby-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tinted icon tiles, never solid orange fills. Most already used
   orange-050; this normalises the glyph to the AA-safe ink. */
.iig-theme .ed-cat-ico,
.iig-theme .ga-ico,
.iig-theme .ig-ico,
.iig-theme .iig-sector-icon {
  background: var(--d-orange-tint);
  color: var(--d-orange-ink);
}

/* --- 11.5 One card recipe ----------------------------------------- */
.iig-theme .hn-card,
.iig-theme .ed-cat,
.iig-theme .ed-card,
.iig-theme .ga-card,
.iig-theme .ig-card,
.iig-theme .bs-card,
.iig-theme .iig-quick-btn,
.iig-theme .iig-sector-card,
.iig-theme .iig-featured-card,
.iig-theme .sxm-weather-card,
.iig-theme .iig-nearby-btn {
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  box-shadow: var(--d-shadow);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.iig-theme .hn-card:hover,
.iig-theme .ed-cat:hover,
.iig-theme .ed-card:hover,
.iig-theme .ga-card:hover,
.iig-theme .ig-card:hover,
.iig-theme .bs-card:hover,
.iig-theme .iig-quick-btn:hover,
.iig-theme .iig-sector-card:hover,
.iig-theme .iig-featured-card:hover,
.iig-theme .iig-nearby-btn:hover {
  background: var(--d-card);
  border-color: var(--d-line-strong);
  box-shadow: var(--d-shadow-hover);
}

/* Image-topped cards keep their flush image; only the chrome is unified. */
.iig-theme .bs-card,
.iig-theme .iig-featured-card { overflow: hidden; }

/* Nested sub-blocks inside a card use the alt surface, not another band. */
.iig-theme .sxm-tw-metric,
.iig-theme .loy-dash-mini-card,
.iig-theme .loy-earn {
  background: var(--d-card-alt);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-inner);
}

/* --- 11.6 Dark moments: hero, ONE CTA band, footer ---------------- */
/* Kept dark: .dn-hero (page hero) and the site footer.
   Demoted to cards: the loyalty promo/hero panels and the SSR link
   network, which between them put three more navy slabs mid-page. */
.iig-theme .loy-promo,
.iig-theme .loy-hero {
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  box-shadow: var(--d-shadow);
  color: var(--d-ink-2);
}
.iig-theme .loy-promo h2,
.iig-theme .loy-promo h3,
.iig-theme .loy-hero h2,
.iig-theme .loy-hero h3,
.iig-theme .loy-hero-title,
.iig-theme .loy-promo-title { color: var(--d-navy); }
.iig-theme .loy-promo-step-icon,
.iig-theme .loy-tier-chip {
  background: var(--d-orange-tint);
  color: var(--d-orange-ink);
}
.iig-theme .loy-progress-bar { background: var(--d-line); }
.iig-theme .loy-promo-cta .loy-btn-primary,
.iig-theme .loy-cta {
  background: var(--d-orange);
  color: #fff;
}
.iig-theme .loy-promo-cta .loy-btn-primary:hover,
.iig-theme .loy-cta:hover { background: #F26F00; color: #fff; }

.iig-theme .hub-ssr {
  background: transparent;
  color: var(--d-ink-2);
}
.iig-theme .hub-ssr-heading { color: var(--d-navy); }

/* THE one CTA band: the newsletter. It was the page's only solid-orange
   fill - an orange section background, which the budget rules out. It
   becomes the navy CTA band and keeps orange on the submit button only. */
.iig-theme .nl-card {
  background: linear-gradient(135deg, var(--d-navy) 0%, var(--d-navy-2) 100%);
  border-radius: var(--d-r-card);
  padding: var(--d-10) var(--d-8);
}
.iig-theme .nl-title { color: #fff; font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.iig-theme .nl-sub   { color: rgba(255,255,255,.82); }
.iig-theme .nl-input {
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--d-r-btn);
  background: rgba(255,255,255,.96);
  color: var(--d-ink);
}
.iig-theme .nl-input::placeholder { color: var(--d-ink-3); }
.iig-theme .nl-btn {
  border-radius: var(--d-r-btn);
  background: var(--d-orange);
  color: #fff;
}
.iig-theme .nl-btn:hover { background: #F26F00; }
.iig-theme .nl-msg { color: #fff; }

/* --- 11.7 Slate ink ----------------------------------------------- */
/* Hard black / near-black body copy becomes slate. */
.iig-theme .hn-card-meta,
.iig-theme .ed-meta,
.iig-theme .ga-desc,
.iig-theme .ig-meta,
.iig-theme .iig-sector-count,
.iig-theme .iig-featured-desc,
.iig-theme .iig-quick-btn-desc { color: var(--d-ink-3); }

/* --- 11.8 Header / bottom nav ------------------------------------- */
/* The header was solid navy with white type. It becomes the white,
   hairline-bordered .d-header surface; the wordmark and D-icon are
   untouched (they carry their own colour). */
.iig-theme .iig-mobile-header,
.iig-theme .iig-desktop-header {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--d-line);
  box-shadow: none;
  color: var(--d-ink-2);
}
.iig-theme .iig-desktop-nav {
  background: transparent;
  border-bottom: 1px solid var(--d-line);
}
.iig-theme .iig-desktop-nav-item { color: var(--d-ink-2); font-weight: 600; }
.iig-theme .iig-desktop-nav-item:hover,
.iig-theme .iig-desktop-nav-item.active { color: var(--d-navy); }
.iig-theme .iig-action-btn,
.iig-theme .iig-user-btn {
  background: var(--d-card-alt);
  color: var(--d-navy);
  border: 1px solid var(--d-line);
}
.iig-theme .iig-search input,
.iig-theme .iig-search { background: var(--d-card-alt); color: var(--d-ink); }

/* Bottom nav: white chrome, hairline top border, navy active. */
.iig-theme .iig-bottom-nav {
  background: #fff;
  border-top: 1px solid var(--d-line);
  box-shadow: none;
}
.iig-theme .iig-bottom-nav-item { color: var(--d-ink-3); }
.iig-theme .iig-bottom-nav-item.active { color: var(--d-navy); }

/* --- 11.9 Reset leakage ------------------------------------------- */
/* theme-destinito.css has `.iig-theme * { margin:0; padding:0 }` at (0,1,0)
   plus the universal selector, which beats the bare `p {}` in section 2.
   Paragraph rhythm has to be restated here to survive it. */
.iig-theme .iig-main p { margin: 0 0 var(--d-3); }
.iig-theme .iig-main p:last-child { margin-bottom: 0; }

/* --- 11.10 Community hub (density fold) --------------------------- */
/* Wrapper the four low-signal sections collapse into. See
   _HomeDestinito.cshtml: section[data-section-key="community_hub"]. */
.iig-theme .d-hub { padding: 20px 0 8px; }
.iig-theme .d-hub-disclosure {
  background: var(--d-card);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  box-shadow: var(--d-shadow);
  overflow: hidden;
}
.iig-theme .d-hub-disclosure > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--d-5) var(--d-pad-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--d-3);
  font-weight: 700;
  color: var(--d-navy);
}
.iig-theme .d-hub-disclosure > summary::-webkit-details-marker { display: none; }
.iig-theme .d-hub-summary-hint { font-size: .8125rem; font-weight: 600; color: var(--d-ink-3); }
.iig-theme .d-hub-disclosure > summary::after {
  content: "";
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--d-ink-3);
  border-bottom: 2px solid var(--d-ink-3);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.iig-theme .d-hub-disclosure[open] > summary::after { transform: rotate(-135deg); }
.iig-theme .d-hub-body { padding: 0 var(--d-pad-card) var(--d-pad-card); }
/* Sections nested in the hub lose their own outer rhythm - the card owns it. */
.iig-theme .d-hub-body > [data-section-key] { padding: var(--d-5) 0 0; background: transparent; }
.iig-theme .d-hub-body > [data-section-key] > .container { padding-inline: 0; max-width: none; }


/* --- 11.11 Desktop header rows ------------------------------------ */
/* .iig-desktop-header is a stack of four rows, each with its own fill:
   row-white #f7f7f7, row-blue navy, nav-row --iig-bg-light. Setting the
   header background alone left the navy strip visible, so the rows are
   flattened here and the type inside them re-inked for a light ground. */
.iig-theme .iig-desktop-row-white,
.iig-theme .iig-desktop-row-blue { background: transparent; }
.iig-theme .iig-desktop-nav-row {
  background: transparent;
  border-bottom: 1px solid var(--d-line);
}
.iig-theme .iig-brand-tagline { color: var(--d-ink-3); }

/* Island selector: was translucent white on navy; on a light ground that
   is invisible, so it becomes a bordered chip with navy type. */
.iig-theme .iig-island-selector,
.iig-theme .iig-desktop-actions .iig-island-selector {
  background: var(--d-card-alt);
  border: 1px solid var(--d-line);
  color: var(--d-navy);
}
.iig-theme .iig-desktop-actions .iig-island-selector:hover { background: #fff; }
.iig-theme .iig-desktop-actions .iig-island-selector i,
.iig-theme .iig-desktop-actions .iig-island-selector span,
.iig-theme .iig-island-selector i,
.iig-theme .iig-island-selector span { color: var(--d-navy); }

/* Active nav was a solid navy pill with white type - a second dark surface
   in the chrome. Active is navy TYPE on the tinted row, per the nav rule. */
.iig-theme .iig-desktop-nav-item.active {
  background: var(--d-card-alt);
  color: var(--d-navy);
  font-weight: 700;
}

/* .iig-user-btn was a solid --orange circle: an orange fill in persistent
   chrome, which the budget does not allow. Handled in 11.8. */

/* --- 11.12 One grid: container outliers --------------------------- */
/* Three sections shipped their own .container geometry (max-width:1200px,
   16px padding) in the partial's inline <style>, so they sat wider than
   every other section. Removed at source; this is the belt-and-braces
   half in case another surface re-declares them. */
.iig-theme .iig-nearby .container,
.iig-theme .iig-traffic-ad .container,
.iig-theme .destinito-home-banner .container {
  max-width: var(--d-container);
  padding-inline: var(--d-gutter);
  margin-inline: auto;
}

/* --- 11.13 Visitor-type chips ------------------------------------- */
/* The selected chip was a solid --orange fill sitting directly under the
   hero's orange Ask button - two orange fills in one viewport. Tinted
   accent chip instead, which is what the budget allows for a control. */
.iig-theme .vt-chip {
  background: var(--d-card);
  border: 1px solid var(--d-line);
  color: var(--d-ink-2);
}
.iig-theme .vt-chip.is-selected {
  background: var(--d-orange-tint);
  border-color: var(--d-orange-line);
  color: var(--d-orange-ink);
}


/* --- 11.14 "Island right now" back on the grid -------------------- */
/* .sxm-tw-head / -row / -foot each carried max-width:600px + auto margins,
   so the block floated centred at ~600px while every other section ran the
   full 1120 container - the most visible break in the one-grid rule. They
   now inherit the container's width like everything else. */
.iig-theme .sxm-tw-head,
.iig-theme .sxm-tw-row,
.iig-theme .sxm-tw-foot {
  max-width: none;
  margin-inline: 0;
}
.iig-theme .sxm-tw-foot { text-align: left; }

/* --- 11.15 "Explore nearby" uses the one opener ------------------- */
/* This section shipped its own header pair (.iig-nearby-head/-title)
   instead of .iig-section-header/.section-title, so it rendered at a
   different size and weight from every other opener. */
.iig-theme .iig-nearby-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--d-4);
  margin-bottom: var(--d-5);
}
.iig-theme .iig-nearby-title {
  font-family: var(--d-font);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: var(--d-lh-tight);
  color: var(--d-navy);
  margin: 0;
}

/* --- 11.16 Consent banner: on-token, one sheet -------------------- */
/* _ConsentBanner.cshtml hardcodes #1d4ed8 for its link and accept button -
   a fourth blue, outside the token set. Re-pointed at brand navy.
   NOTE: the prompt sequencing this layer was asked to add already exists -
   consent.js owns first touch and _VisitorTypePopup defers behind a dwell
   timer + snooze (see its comment block, "Consent-first (WT-8 sequence)"),
   and location/notification are only requested from an explicit tap. No
   queue was added; only the surface is restyled. */
.iig-theme .consent-sheet,
.iig-theme .consent-banner {
  border: 1px solid var(--d-line);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(15,23,42,.18);
}
.iig-theme .consent-link { color: var(--d-navy); }
.iig-theme .consent-btn-accept {
  background: var(--d-navy);
  color: #fff;
  border-radius: var(--d-r-btn);
}
.iig-theme .consent-btn-accept:hover { background: var(--d-navy-2); }
.iig-theme .consent-btn-decline { border-radius: var(--d-r-btn); }

/* ---------- 12. REDUCED MOTION -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}