/*
 * The agencies' websites — the stylesheet every theme shares (§36.1, §36.2).
 *
 * §36.1 moved it out of `themes/classic/base.html`. §36.2 rebuilt it to the storefront design,
 * `Sunrise Travels Storefront.dc.html`: bands the width of the window, a split hero, photo cards,
 * tables in cards, a dark enquiry band and footer.
 *
 * Colours: every one is a token the page prints inline, mixed from the agency's own three and
 * checked to read where it is read (`storefront/services/palette.py`) — the page and its cards too,
 * from the theme's own page (§36.3). No rule names a hex but a form field's white and WhatsApp's
 * own green; the fallback palette below is the one block of them.
 *
 * Geometry: `.wrap`, the grids and the two-column pages are the numbers in
 * `storefront/services/layout.py`, which writes each photograph's `sizes` from them. Change one,
 * change both.
 *
 * A theme's own stylesheet (`themes/<handle>/theme.css`) follows this one and sets its fonts and
 * character. Logical properties throughout, so an Urdu or Arabic page mirrors.
 */

/* What a theme may replace. Without the fonts, a theme with no stylesheet of its own would leave
   `var(--body-font)` undefined, the whole `font-family` would be dropped, and the browser's serif
   default would show. */
:root {
  --heading-font: system-ui;
  --body-font: system-ui;
  --heading-weight: 700;
  --heading-tracking: -0.015em;
  --radius: 9px;
  --radius-card: 14px;
  --shadow-card: 0 1px 2px rgba(13, 27, 34, 0.04), 0 10px 30px rgba(13, 27, 34, 0.06);
}

/* The palette of `palette.FALLBACK` (Classic's colours), for a page drawn without its own: the
   failure page, which links this sheet alone (`themes/classic/500.html`). Every other page prints
   the agency's own after this, which wins. */
:root {
  --page: #ffffff;
  --card: #ffffff;
  --primary: #0f5132;
  --accent: #c9a227;
  --text: #101418;
  --on-primary: #ffffff;
  --on-accent: #101418;
  --primary-ink: #0f5132;
  --accent-ink: #836919;
  --body: #404346;
  --meta: #6a6c6f;
  --rule: #e7e8e8;
  --rule-strong: #d4d5d5;
  --tint: #f4f7f6;
  --tint-strong: #e9efed;
  --deep: #101418;
  --on-deep: #f1f1f1;
  --deep-meta: #aeafb0;
  --deep-rule: #313538;
  --accent-on-deep: #e1cc88;
}

/* ---------------------------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body-font), ui-sans-serif, system-ui, sans-serif;
       font-size: 1.03rem; line-height: 1.6; color: var(--body); background: var(--page); }
h1, h2, h3 { font-family: var(--heading-font), ui-sans-serif, system-ui, sans-serif;
             font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking);
             color: var(--text); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.35rem + 3vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.15rem; line-height: 1.3; }
p { margin: 0 0 1em; }
a { color: var(--primary-ink); text-underline-offset: .18em; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--ring, var(--primary-ink)); outline-offset: 2px; }
/* §36.6 — a ring the keyboard can see on every surface: the ink on the page and its cards, the light
   on the dark bands (walked: the ink on the footer's near-black stood at 2 : 1), and the ink again on
   the white card inside the enquiry band. */
.demo-banner, footer.site, .sections:not(.sections--page) > .contact { --ring: var(--on-deep); }
.sections > section.testimonials { --ring: var(--on-primary); }
.form-card { --ring: var(--primary-ink); }
::selection { background: var(--tint-strong); color: var(--text); }

.muted { color: var(--meta); }
.lead { font-size: 1.12rem; line-height: 1.6; color: var(--body); }
.note { font-size: .88rem; color: var(--meta); margin-top: 1rem; }
.stack > * + * { margin-block-start: 1rem; }
.kicker { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
          color: var(--accent-ink); margin: 0 0 .5rem; }
.sold-out { color: #b4271f; font-weight: 600; }
.approx { font-weight: 400; color: var(--meta); font-size: .85em; }
.basis { font-weight: 400; color: var(--meta); font-size: .8rem; font-family: var(--body-font), ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; }

/* A screen reader's, and nobody else's. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip-path: inset(50%); white-space: nowrap; }
/* The form's honeypot, clipped to nothing where it stands. Moved off the page instead, a
   right-to-left page — which scrolls leftwards — grew to reach it (§33.5). */
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden;
            clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 30; padding: .6rem 1rem;
        background: var(--card); color: var(--text); border-radius: var(--radius); font-weight: 700; }
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------------------------------------------
   Layout — `services/layout.py` holds the same numbers
   --------------------------------------------------------------------------------------------- */

.wrap { max-width: 74rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 48rem) { .wrap { padding-inline: 2rem; } }
main { display: block; }
.page { padding-block: 1.5rem 4rem; }

.sections > section { padding-block: 3.5rem; }
@media (min-width: 56rem) { .sections > section { padding-block: 5rem; } }
.sections > section:nth-child(even) { background: var(--tint); }
.sections--page > section:first-child { padding-block-start: 1rem; }

.section-head { max-width: 44rem; margin-bottom: 2rem; }
.section-head h2 { margin-bottom: .35em; }
.section-head .lead { margin: 0; }
.section-head .kicker { margin-bottom: .6rem; }

.page-head { padding-block: 2.5rem 1.75rem; }
.page-head > * { max-width: 46rem; }
.page-head h1 { margin: 0; }
.page-head .lead { margin: 1rem 0 0; }
.back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.25rem;
        font-weight: 700; font-size: .9rem; text-decoration: none; color: var(--primary-ink); }
.back:hover { text-decoration: underline; }
[dir="rtl"] .back__arrow, [dir="rtl"] .dir-arrow { display: inline-block; transform: scaleX(-1); }

/* §39.7 — the trail above a product, a visa, a destination or a post, where the "Back" link was:
   its first crumb goes home, its middle one to the listing. Wraps rather than scrolls at 390px. */
.breadcrumbs { margin-bottom: 1.25rem; font-size: .9rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0;
                  list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: baseline; gap: .5rem; min-width: 0; }
/* One character in both directions: › is mirrored by the browser in right-to-left text (Unicode
   Bidi_Mirrored), so an Urdu page shows ‹ with no rule of its own — one would mirror it back. */
.breadcrumbs li + li::before { content: "\203A"; color: var(--meta); }
.breadcrumbs a { font-weight: 700; text-decoration: none; color: var(--primary-ink); }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--meta); overflow-wrap: anywhere; }

/* Grids by count: `{{ items|length|columns }}`, so none is left alone on a row. */
.grid, .points, .quotes { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.grid--1 { max-width: 24rem; }
@media (min-width: 36rem) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 56rem) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------------------------- */

/* §36.5 — the demo website's own banner (`views._demo_banner`): what it is, and the way back. */
.demo-banner { background: var(--deep); color: var(--on-deep); font-size: .82rem; }
.demo-banner .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding-block: .5rem; }
.demo-banner a { color: var(--accent-on-deep); font-weight: 700; text-decoration: none; }
.demo-banner a:hover { text-decoration: underline; }

header.site { background: var(--page); border-bottom: 1px solid var(--rule); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
                    min-height: 4.5rem; padding-block: .75rem; }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--primary-ink); min-width: 0; }
.brand__name { font-family: var(--heading-font), ui-sans-serif, system-ui, sans-serif;
               font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking);
               font-size: 1.45rem; line-height: 1.1; }
.brand__line { margin-top: .3rem; font-size: .66rem; font-weight: 600; letter-spacing: .16em;
               text-transform: uppercase; color: var(--meta); }
.brand__logo { display: block; height: 2.5rem; width: auto; max-width: 12rem; object-fit: contain; }
.site-menu { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
nav.main ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; flex-wrap: wrap; }
nav.main a { text-decoration: none; color: var(--body); font-size: .95rem; font-weight: 600; }
nav.main a:hover { color: var(--primary-ink); }
.locale-switch, .currency-switch { display: flex; gap: .2rem; padding: .2rem; font-size: .82rem;
                                   border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.locale-switch a, .currency-switch a { padding: .2rem .5rem; border-radius: 6px; text-decoration: none;
                                       color: var(--body); }
.currency-switch a[aria-current], .locale-switch a[aria-current] { font-weight: 700; color: var(--text);
                                                                   background: var(--tint-strong); }
.header-enquire { min-height: 2.6rem; padding: .5rem 1.1rem; }

/* The header's menu, and on a phone the button that opens it. */
.menu-toggle { display: none; }
@media (max-width: 44rem) {
  header.site .wrap { flex-wrap: wrap; }
  .has-menu-toggle .menu-toggle {
    display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .95rem;
    padding: .45rem .8rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--card);
    color: var(--text); cursor: pointer;
  }
  .has-menu-toggle .site-menu { display: none; flex-basis: 100%; flex-direction: column;
                                align-items: stretch; gap: .9rem; padding-block-start: .75rem; }
  .has-menu-toggle .site-menu.is-open { display: flex; }
  nav.main ul { flex-direction: column; gap: .15rem; }
  nav.main a { display: block; padding: .45rem 0; font-size: 1rem; }
  .header-enquire { width: 100%; }
}

/* ---------------------------------------------------------------------------------------------
   Buttons, pills and badges
   --------------------------------------------------------------------------------------------- */

.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
          min-height: 2.75rem; padding: .65rem 1.2rem; border-radius: var(--radius);
          border: 1.5px solid var(--rule-strong); background: var(--card); color: var(--text);
          font: inherit; font-size: .96rem; font-weight: 700; line-height: 1.2; text-decoration: none;
          text-align: center; cursor: pointer; transition: border-color .15s, color .15s, box-shadow .15s; }
.button:hover { border-color: var(--primary-ink); color: var(--primary-ink); }
/* §33.3 — the site's own buttons: the quote's Accept was the browser's plain grey one. */
button.button { font: inherit; font-weight: 700; cursor: pointer; }
.button--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.button--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button--primary:hover, .button--accent:hover { color: inherit; box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .1); }
.button--primary:hover { color: var(--on-primary); border-color: var(--primary); }
.button--accent:hover { color: var(--on-accent); border-color: var(--accent); }
/* §28.4: WhatsApp's own dark green, which white text reads on at 7.7:1; its bright green gives
   2:1, under WCAG's 4.5. */
.button--whatsapp { background: #075e54; border-color: #075e54; color: #fff; }
.button--whatsapp:hover { color: #fff; border-color: #075e54; box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .12); }
.button--large { min-height: 3.1rem; padding: .8rem 1.4rem; font-size: 1rem; }
.button:disabled { opacity: .6; cursor: default; }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.pill { display: inline-block; padding: .2rem .7rem; border: 1px solid var(--rule-strong); border-radius: 999px;
        background: var(--card); font-size: .78rem; font-weight: 600; color: var(--body); }
.pill--urgent { background: var(--tint-strong); border-color: transparent; color: var(--accent-ink); }
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.badges li { padding: .3rem .8rem; border: 1px solid var(--rule-strong); border-radius: 999px;
             font-size: .78rem; font-weight: 600; color: var(--body); background: var(--card); }

/* ---------------------------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------------------------- */

.sections > .hero { padding-block: 3.25rem 3.75rem; }
@media (min-width: 56rem) { .sections > .hero { padding-block: 5rem 5.5rem; } }
.hero__inner { display: grid; gap: 2.5rem; align-items: center; }
.hero:not(.hero--photo) .hero__inner { justify-items: center; text-align: center; }
@media (min-width: 56rem) {
  .hero--photo .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}
.hero__title { font-size: clamp(2.3rem, 1.45rem + 3.6vw, 3.6rem); line-height: 1.05; margin-bottom: .45em; }
.hero__lead { max-width: 34rem; margin: 0 0 1.75rem; font-size: 1.12rem; color: var(--body); }
.hero:not(.hero--photo) .hero__lead { margin-inline: auto; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.5rem; }
.hero:not(.hero--photo) .hero__actions, .hero:not(.hero--photo) .badges { justify-content: center; }
.hero__photo { margin: 0; }
.hero__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
                   border-radius: var(--radius-card); background: var(--tint-strong); box-shadow: var(--shadow-card); }

/* ---------------------------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------------------------- */

.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 1.25rem; }
.card h3 { margin-bottom: .35rem; }
/* Found on the walk (§34.4): in a row of cards each Book now stood where its card's words ended.
   The words fill the card, and Book now keeps to its foot. */
.card--book { display: flex; flex-direction: column; }
.card--book > .card__body { flex: 1 0 auto; }
.card--book { padding: 0; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.card--book:hover { box-shadow: var(--shadow-card); }
.card--book > .card__body { padding: 1.15rem 1.25rem .75rem; }
.card__book { margin-block: 0; padding: 0 1.25rem 1.25rem; }
.card__book .button { width: 100%; text-align: center; }
/* §30.3: a photograph is cropped to its box, never stretched, and never wider than it. §36.2: across
   the card's top, edge to edge. */
.card__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
               background: var(--tint-strong); }
.card h3 { font-size: 1.2rem; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a:hover { color: var(--primary-ink); text-decoration: underline; }
.card__meta { margin: 0 0 .6rem; font-size: .85rem; color: var(--meta); }
.card__summary { margin: 0 0 .9rem; font-size: .92rem; color: var(--body);
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { margin: .25rem 0 .75rem; font-family: var(--heading-font), ui-sans-serif, system-ui, sans-serif;
         font-weight: var(--heading-weight); font-size: 1.3rem; color: var(--text); font-variant-numeric: tabular-nums; }
.card .price { padding-top: .8rem; border-top: 1px solid var(--rule); }
.card--post h3 { font-size: 1.15rem; }

/* ---------------------------------------------------------------------------------------------
   The sections' own pieces
   --------------------------------------------------------------------------------------------- */

.points .block h3 { font-size: 1.1rem; }
.points .block p { margin: 0; color: var(--body); }

.stat-strip { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0; }
.stat-strip div { padding-top: .75rem; border-top: 2px solid var(--primary); }
.stat-strip dt { font-size: .85rem; color: var(--meta); }
.stat-strip dd { margin: 0; font-family: var(--heading-font), ui-sans-serif, system-ui, sans-serif;
                 font-weight: var(--heading-weight); font-size: 1.8rem; color: var(--text); }

.step-list { list-style: none; counter-reset: step; display: grid; gap: 1rem; margin: 0; padding: 0; max-width: 44rem; }
.step-list li { counter-increment: step; position: relative; min-height: 2rem; padding-inline-start: 3rem; }
.step-list li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: -.1rem;
                        width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
                        background: var(--tint-strong); color: var(--primary-ink); font-weight: 700; font-size: .85rem; }

/* Label and value, a row each — the design's office, licences and a product's facts. */
dl.facts { margin: 0; max-width: 36rem; }
dl.facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0;
                 border-bottom: 1px solid var(--rule); }
dl.facts dt { color: var(--meta); }
dl.facts dd { margin: 0; text-align: end; font-weight: 600; color: var(--text); }
table.detail.facts td { text-align: end; font-weight: 600; color: var(--text); }
table.detail.facts .facts__total th { color: var(--text); font-weight: 700; }
table.detail.facts .facts__total td { font-size: 1.2rem; }

/* ---------------------------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------------------------- */

table.detail { width: 100%; border-collapse: collapse; margin: 0; font-size: .95rem; }
table.detail th, table.detail td { text-align: start; padding: .75rem 0; vertical-align: top;
                                   border-bottom: 1px solid var(--rule); }
table.detail th { color: var(--meta); font-weight: 500; }
/* §33.5, found on production: the 40% is for the label of a table of facts — a heading and its
   value. A table with column headings (`scope`) sizes each column to what is in it: given to every
   heading, the 40% left a departures table's prices 59 pixels, every one wrapped. And room between
   columns, or two figures side by side read as one. */
table.detail th:not([scope]) { width: 40%; }
table.detail th:not(:last-child), table.detail td:not(:last-child) {
  padding-inline-end: 1rem;
}
table.detail th[scope="col"] { font-size: .72rem; font-weight: 700; letter-spacing: .1em;
                               text-transform: uppercase; color: var(--meta); vertical-align: bottom; }
table.detail th[scope="row"] { color: var(--text); font-weight: 600; }
/* A figure to the end of its column, and on one line: "INR" over its amount is not a price
   anyone reads at a glance. A table too wide for that scrolls in its `.scroller`. */
table.detail .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.detail .nowrap { white-space: nowrap; }
table.detail td.price { font-size: 1rem; margin: 0; }
table.quote-lines th { width: auto; }
/* §28.5: a table too wide for a phone scrolls inside its own box, as the package page says it
   does, rather than widening the page. */
.scroller { overflow-x: auto; }
.table-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); }
.table-card table.detail th, .table-card table.detail td { padding-inline: 1rem; }
.table-card table.detail tr:first-child th[scope="col"] { background: var(--tint); }
.table-card table.detail tr:last-child > * { border-bottom: 0; }
.table-card + .note { margin-top: 1rem; }

/* §33.3 — on a phone each visa is a block, each figure named by its column. */
.visa-table__book .button { white-space: nowrap; min-height: 2.4rem; padding: .45rem .9rem; }
@media (max-width: 40rem) {
  table.visa-table thead { display: none; }
  table.visa-table, table.visa-table tbody, table.visa-table tr { display: block; width: 100%; }
  table.visa-table tr { border-bottom: 1px solid var(--rule); padding: .75rem 1rem; }
  table.visa-table th[scope=row] { display: block; width: auto; border: 0; padding: .25rem 0; }
  table.visa-table td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .15rem 0; }
  table.visa-table td:not(:last-child) { padding-inline-end: 0; }
  table.visa-table td::before { content: attr(data-label); color: var(--meta); }
  table.visa-table td.visa-table__book { display: block; padding-block: .5rem .25rem; }
  table.visa-table td.visa-table__book .button { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------------------------
   Reviews and the testimonial band
   --------------------------------------------------------------------------------------------- */

.reviews__layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 56rem) { .reviews__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rating-summary { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 1.5rem; }
.rating-average { margin: 0; display: flex; align-items: baseline; gap: .5rem; }
.rating-average strong { font-family: var(--heading-font), ui-sans-serif, system-ui, sans-serif;
                         font-weight: var(--heading-weight); font-size: 3.2rem; line-height: 1; color: var(--primary-ink); }
.rating-bars { margin: 1rem 0 0; display: grid; gap: .4rem; }
.rating-bars div { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .5rem; align-items: center; }
.rating-bars dt { font-size: .85rem; color: var(--body); }
.rating-bars dd { margin: 0; display: flex; align-items: center; gap: .6rem; font-size: .8rem;
                  background: linear-gradient(var(--rule), var(--rule)) left center / calc(100% - 3.2rem) .45rem no-repeat; }
[dir="rtl"] .rating-bars dd { background-position: right center; }
.rating-bars .bar { display: block; height: .45rem; border-radius: 99px; background: var(--accent); flex: none; }
.rating-bars dd .muted { margin-inline-start: auto; }
.review-list { display: grid; gap: 1rem; }
.review .stars { margin: 0 0 .25rem; color: var(--accent-ink); font-weight: 700; }
.review h3 { font-size: 1rem; margin: 0; }
.review .muted { font-size: .82rem; margin: 0 0 .5rem; }
.review p { margin: 0; }
.reply { margin-top: .75rem !important; padding-inline-start: .75rem; border-inline-start: 3px solid var(--rule-strong); }

/* `section.` to outrank the alternate bands' `:nth-child(even)`, which would lay the light tint
   under these light words. */
.sections > section.testimonials { background: var(--primary); color: var(--on-primary); }
.testimonials h2, .testimonials .kicker { color: var(--on-primary); }
.testimonials .card { background: none; border: 0; border-top: 1px solid currentColor; border-radius: 0;
                      padding: 1.25rem 0 0; margin: 0; color: var(--on-primary); }
.testimonials blockquote p { font-family: var(--heading-font), ui-sans-serif, system-ui, sans-serif;
                             font-weight: var(--heading-weight); font-size: 1.3rem; line-height: 1.35; color: inherit; }
.testimonials footer { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; font-size: .9rem; }
.testimonials .muted, .quotes__rated { color: inherit; opacity: .9; }
.quotes__rated { margin: 2rem 0 0; font-size: .92rem; }
.avatar { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
          background: var(--accent); color: var(--on-accent); font-size: .82rem; font-weight: 700; }

/* ---------------------------------------------------------------------------------------------
   FAQ, office, licences, gallery, rates
   --------------------------------------------------------------------------------------------- */

.faq-list { max-width: 50rem; border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { display: flex; gap: .75rem; padding: 1rem 0; cursor: pointer; list-style: none;
                    font-weight: 700; color: var(--text); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "+"; flex: none; width: 1rem; color: var(--primary-ink); font-weight: 700; }
.faq-list details[open] summary::before { content: "\2212"; }
.faq-list details p { margin: 0 0 1rem; padding-inline-start: 1.75rem; color: var(--body); }

.office__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

/* Columns by count, as the cards' (`.grid--N`); a gallery's photographs stand at the top of their
   row, at their own heights. */
.gallery-grid { align-items: start; }
/* §32.2: a gallery photograph fills its column, at its own shape — not cropped: it is a family's
   photograph, not a card's. */
.gallery-grid figure { margin: 0; }
.gallery-grid img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); background: var(--tint-strong); }
.gallery-grid figcaption { margin-top: .4rem; font-size: .85rem; }

.rates table.detail { max-width: 36rem; }

/* ---------------------------------------------------------------------------------------------
   The enquiry band, and every form on the site
   --------------------------------------------------------------------------------------------- */

.contact__inner { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 56rem) { .contact__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.contact__ways { margin: 1.5rem 0 0; }
.contact__ways div { display: flex; gap: .5rem; margin: .4rem 0; }
.contact__ways dt { color: var(--meta); }
.contact__ways dd { margin: 0; }
.contact__ways a { color: inherit; font-weight: 700; text-decoration: none; }
.sections:not(.sections--page) > .contact { background: var(--deep); color: var(--on-deep); }
.sections:not(.sections--page) > .contact h2 { color: var(--on-deep); }
.sections:not(.sections--page) > .contact .contact__ways dt { color: var(--deep-meta); }
.form-card { background: var(--card); color: var(--body); border: 1px solid var(--rule); border-radius: var(--radius-card);
             padding: 1.5rem; box-shadow: var(--shadow-card); }
@media (min-width: 48rem) { .form-card { padding: 1.75rem; } }

.enquiry form > *, .book-dialog form > * { margin: 0; }
.enquiry form > * + *, .book-dialog form > * + * { margin-top: 1.1rem; }
.enquiry label, .book-dialog label { display: block; margin-bottom: .35rem; font-size: .88rem; font-weight: 600; color: var(--text); }
.enquiry input:not([type=hidden]), .enquiry select, .enquiry textarea,
.book-dialog input:not([type=hidden]), .book-dialog select, .book-dialog textarea {
  width: 100%; min-height: 2.9rem; padding: .6rem .8rem; font: inherit; font-size: 1rem; color: var(--text);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); background: #fff;
}
.enquiry textarea, .book-dialog textarea { min-height: 6rem; }
.enquiry input:focus-visible, .enquiry select:focus-visible, .enquiry textarea:focus-visible,
.book-dialog input:focus-visible, .book-dialog select:focus-visible, .book-dialog textarea:focus-visible {
  border-color: var(--primary-ink); outline: 2px solid var(--primary-ink); outline-offset: 0;
}
.enquiry input[type=number], .book-dialog input[type=number] { width: 7rem; }
.enquiry small, .book-dialog small { display: block; margin-top: .35rem; font-size: .8rem; }
.enquiry button[type=submit], .book-dialog button[type=submit] {
  width: 100%; min-height: 3rem; padding: .7rem 1.4rem; border: 0; border-radius: var(--radius);
  background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 700; cursor: pointer;
}
.enquiry button[type=submit]:hover, .book-dialog button[type=submit]:hover { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .1); }
.enquiry button[type=submit]:disabled, .book-dialog button[type=submit]:disabled { opacity: .6; cursor: default; }
.enquiry-status--sent { color: #0f5132; font-weight: 600; }
.enquiry-status--failed { color: #b4271f; }
.phone-field__row { display: flex; gap: .5rem; }
.phone-field__row select { flex: 0 0 8.5rem; width: 8.5rem; }
.phone-field__row input { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------------------------------------
   A product's page: its head, then two columns, then what is too wide for one
   --------------------------------------------------------------------------------------------- */

.product__head { max-width: 48rem; padding-block: 1rem 2.25rem; }
.product__head h1 { font-size: clamp(2rem, 1.35rem + 2.5vw, 3.1rem); margin-bottom: .35em; }
.product__meta { color: var(--meta); margin: 0 0 1rem; }
.product__head .lead { margin: 0; }
.product__body { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) {
  .product__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
}
/* §36.6: a package with nothing for the main column — its panels alone, at reading width. */
@media (min-width: 56rem) { .product__body--panels { grid-template-columns: minmax(0, 32rem); } }
.product__main > * + * { margin-top: 2.5rem; }
.product__main h2, .product__aside h2, .product > section > h2 { font-size: 1.35rem; }
.product > section { margin-top: 3.5rem; }
/* §30.3: the package's photograph, cropped to its box. */
.product-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
                 border-radius: var(--radius-card); background: var(--tint-strong); }
/* Every section beside a product's main column is a card. */
.panel, .product__aside > section { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card);
                                    padding: 1.5rem; box-shadow: var(--shadow-card); }
.product__aside > section + section { margin-top: 1.25rem; }
.panel--price .price { font-size: 1.75rem; margin: 0 0 .5rem; }
.panel .contact-buttons .button { flex: 1 1 100%; }
.stays .stay { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.stays .stay:last-child { border-bottom: 0; }
.stays h3 { font-size: 1rem; margin: 0 0 .15rem; }
.stays p { margin: 0; font-size: .88rem; }

.days { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.day { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0;
       border-bottom: 1px solid var(--rule); }
.day__no { margin: 0; padding-top: .15rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
           text-transform: uppercase; color: var(--meta); }
.day h3 { margin: 0; font-family: var(--body-font), ui-sans-serif, system-ui, sans-serif; font-size: 1rem;
          font-weight: 700; letter-spacing: 0; }
.day__body p { margin: .25rem 0 0; font-size: .92rem; color: var(--body); }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li { position: relative; margin: .5rem 0; padding-inline-start: 1.75rem; }
.checks li::before { content: ""; position: absolute; inset-inline-start: .15rem; top: .45em; width: .9rem; height: .5rem;
                     border-left: 2px solid var(--primary-ink); border-bottom: 2px solid var(--primary-ink);
                     transform: rotate(-45deg); }
.checks--rows li { margin: 0; padding-block: .7rem; border-bottom: 1px solid var(--rule); }
.checks--rows li::before { top: 1.1em; }
.checks__note { display: block; font-size: .85rem; color: var(--meta); }
.checks--not li::before { top: .8em; width: .7rem; height: 0; border-left: 0; border-bottom: 2px solid var(--meta); transform: none; }
.included h3 { margin-top: 1.5rem; font-size: 1.05rem; }

/* §28.4 — a product page's way to the agency. */
.contact-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; }
.book-now { font-weight: 700; }
.book-band { margin-top: 3.5rem; padding: 1.75rem; border: 1px solid var(--rule); border-radius: var(--radius-card);
             background: var(--tint); }
.book-band h2 { margin-bottom: .25em; }
.listing .grid, .listing .scroller { margin-top: .5rem; }

/* ---------------------------------------------------------------------------------------------
   Reading pages: legal, blog, a page of words
   --------------------------------------------------------------------------------------------- */

.reading > * { max-width: 46rem; }
article.reading { max-width: 46rem; }
.prose { max-width: 46rem; }
.prose p, .prose li { color: var(--body); }
.policy .reading { padding-block: 1rem 1rem; }
.policy section { margin-top: 2rem; }
.policy section h2 { font-size: 1.35rem; }
.notice { padding: 1rem 1.25rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--tint);
          font-size: .92rem; }
.notice--ok { border-color: var(--rule-strong); }
.post-photo { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }

/* The traveller's own pages: a quote and a payment. */
.quote, .pay { max-width: 46rem; margin-inline: auto; padding-block: 1.5rem; }
.quote__action, .pay__action { margin-top: 1.5rem; display: grid; gap: .75rem; }
/* §36.6: the action at its own width, at the start of the line in either direction, and the note
   under it apart from it; a notice in it keeps the full width. */
.quote__action > .button, .pay__action > .button { justify-self: start; }

/* A missing page, and a failure. */
.missing { max-width: 36rem; margin: 0 auto; padding-block: 3rem 4rem; text-align: center; }
.missing .lead { margin-bottom: 1.75rem; }
.missing__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ---------------------------------------------------------------------------------------------
   Book now's dialog (§34.4). Without a script it is drawn open in the page.
   --------------------------------------------------------------------------------------------- */

.book-dialog { width: min(34rem, calc(100% - 2rem)); max-height: calc(100% - 2rem);
               border: 0; border-radius: var(--radius-card); padding: 1.5rem 1.5rem .75rem;
               box-shadow: 0 24px 60px rgba(16, 20, 24, .25); }
.book-dialog::backdrop { background: rgba(16, 20, 24, .5); }
.book-dialog:not([open]) { display: none; }
.book-dialog[open]:not(:modal) { position: static; width: auto; box-shadow: none;
                                 border: 1px solid var(--rule); margin: 1.5rem auto 3rem; max-width: 40rem; }
.book-dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.book-dialog__head h2 { margin: 0; font-size: 1.4rem; }
/* Drawn open in the page with no script, nothing could close it: no Close, then. */
.book-dialog[open]:not(:modal) .book-dialog__close { display: none; }
.book-dialog__close { flex: none; padding: .4rem .75rem; border: 1px solid var(--rule-strong); border-radius: var(--radius);
                      background: var(--card); font: inherit; font-size: .9rem; cursor: pointer; }

/* ---------------------------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------------------------- */

footer.site { background: var(--deep); color: var(--deep-meta); padding-block: 3.5rem 2rem; font-size: .92rem; }
footer.site a { color: var(--on-deep); text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
.footer__top { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .footer__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.footer__name { display: block; color: var(--on-deep); font-family: var(--heading-font), ui-sans-serif, system-ui, sans-serif;
                font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); font-size: 1.35rem; }
.footer__about { max-width: 28rem; margin: .6rem 0 1rem; }
.footer__contact div { margin: .2rem 0; }
.footer__nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.footer__nav li { margin: 0 0 .55rem; break-inside: avoid; }
.footer__fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-top: 2.5rem;
                padding-top: 1.25rem; border-top: 1px solid var(--deep-rule); font-size: .82rem; }
/* Room at the foot of a phone's page for the round buttons over its corner. */
@media (max-width: 47.99rem) { footer.site { padding-bottom: 6.5rem; } }

/* §36.2 — the design's WhatsApp and Call, over the page's corner. */
.reach { position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 20; display: flex; flex-direction: column; gap: .6rem; }
@media (min-width: 48rem) { .reach { inset-inline-end: 1.5rem; bottom: 1.5rem; } }
.reach__button { width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center;
                 background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 22px rgba(13, 27, 34, .22); }
.reach__button--whatsapp { background: #075e54; color: #fff; }
/* §36.6 — fixed over whatever the page has scrolled under them, and last in the tab order, so focused
   over the dark footer: a ring in two tones, the page's light inside the ink, one of which shows. */
.reach__button:focus-visible { box-shadow: 0 0 0 2px var(--page), 0 8px 22px rgba(13, 27, 34, .22); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .reach, .header-enquire, .menu-toggle, .book-dialog { display: none !important; }
  .sections > section { background: none !important; color: #000 !important; }
}