/* U2 Travel & Yachting — design system.
 * Art direction "Gulet" per DESIGN.md. Read that before changing a token.
 * Fonts are self-hosted and subset per locale; the @font-face blocks are emitted by
 * src/templates/layout.mjs so an English page never downloads Cyrillic glyph data.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* palette — the only place a hex may appear */
  --petrol: #0e2a33;
  --petrol-deep: #0a1f26;
  --canvas: #fbf7f0;
  --canvas-sunk: #f3ede3;
  --teak: #8a5a33;
  --brass: #b8894b;
  --brass-deep: #966d38;   /* AA-safe brass for text on canvas */
  --sea-glass: #7fa6a0;
  --ink: #14100e;
  --ink-soft: #4a443e;
  --rule: #e0d7c8;
  --rule-dark: #24444e;    /* hairline on petrol grounds */
  --white: #fff;

  /* type */
  --ff-display: "Alegreya", "Iowan Old Style", Palatino, Georgia, serif;
  --ff-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* scale — 12 13 15 17 21 27 34 44 58 76 96 */
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-body: 1.0625rem;
  --t-lg: 1.3125rem;
  --t-xl: 1.6875rem;
  --t-2xl: 2.125rem;
  --t-3xl: 2.75rem;
  --t-4xl: 3.625rem;
  --t-5xl: 4.75rem;
  --t-6xl: 6rem;

  /* space — 4 8 12 16 24 32 48 64 96 128 160 */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --s-40: 10rem;

  --measure: 64ch;
  --page: 78rem;
  --gutter: var(--s-6);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur: 320ms;

  --header-h: 4.5rem;
}

@media (min-width: 60em) {
  :root {
    --t-body: 1.125rem;
    --gutter: var(--s-12);
    --header-h: 5.25rem;
  }
}

/* ---------------------------------------------------------------- reset */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--ff-ui);
  font-size: var(--t-body);
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
picture,
svg,
video { display: block; max-width: 100%; height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 400;          /* DESIGN.md: display weight never exceeds 500 */
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: clamp(var(--t-3xl), 7vw, var(--t-5xl)); }
h2 { font-size: clamp(var(--t-2xl), 4.5vw, var(--t-4xl)); }
h3 { font-size: clamp(var(--t-xl), 3vw, var(--t-2xl)); line-height: 1.15; }
h4 { font-size: var(--t-lg); line-height: 1.25; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--brass); }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Eyebrow label. Sentence case and letter-spaced — never uppercase: it breaks Turkish
 * (istanbul -> ISTANBUL, not İSTANBUL) and reads as a template. See DESIGN.md §2. */
.eyebrow {
  font-family: var(--ff-ui);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--teak);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 4rem;
}

.lede {
  font-size: clamp(var(--t-lg), 2.2vw, var(--t-xl));
  line-height: 1.45;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 46ch;
}

.muted { color: var(--ink-soft); }
.small { font-size: var(--t-base); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------------------------------------------------------------- layout */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--page));
  margin-inline: auto;
}

.wrap--narrow { max-width: 46rem; }

.section { padding-block: clamp(var(--s-16), 9vw, var(--s-32)); }
.section--tight { padding-block: clamp(var(--s-12), 6vw, var(--s-24)); }

.section--sunk { background: var(--canvas-sunk); }

.section--dark {
  background: var(--petrol);
  color: var(--canvas);
}

.section--dark .eyebrow { color: var(--sea-glass); }
.section--dark .eyebrow::after { background: var(--rule-dark); }
.section--dark .muted,
.section--dark .lede { color: #c3d2d6; }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }

.grid { display: grid; gap: var(--s-8); }

/* Low density on purpose — 2-3 per row, never 4+. Luxury reads as big plates. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

.split {
  display: grid;
  gap: clamp(var(--s-8), 5vw, var(--s-16));
  align-items: center;
}

@media (min-width: 56em) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: clamp(var(--s-8), 4vw, var(--s-12));
}

.section-head p { margin-bottom: 0; }

/* ---------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--brass);
  --btn-fg: var(--petrol-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3rem;           /* 48px tap target */
  padding: var(--s-3) var(--s-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;         /* 0 or 2px only — 16px everywhere is the slop tell */
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn:hover { --btn-bg: var(--brass-deep); border-color: var(--brass-deep); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--rule);
}

.btn--ghost:hover { --btn-bg: transparent; border-color: var(--ink); }

.section--dark .btn--ghost { --btn-fg: var(--canvas); border-color: var(--rule-dark); }
.section--dark .btn--ghost:hover { border-color: var(--sea-glass); }

.btn--wa {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  border-color: currentColor;
}

.btn--wa:hover { --btn-bg: rgb(255 255 255 / 0.08); }

.btn--lg { min-height: 3.5rem; padding-inline: var(--s-8); font-size: var(--t-body); }

.btn .icon { flex: none; }

/* text link with a moving rule under it */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-base);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--brass), var(--brass));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--dur) var(--ease);
}

.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link .icon--arrow { transition: transform var(--dur) var(--ease); }
.link:hover .icon--arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------- header */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  flex: none;
}

.brand__mark { flex: none; }

.brand__name {
  font-family: var(--ff-display);
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  line-height: 1;
}

.brand__sub {
  display: block;
  font-family: var(--ff-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-top: 2px;
}

.nav { display: none; }

@media (min-width: 62em) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    margin-inline-start: auto;
  }

  .nav a {
    font-size: var(--t-base);
    text-decoration: none;
    padding-block: var(--s-2);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
  }

  .nav a:hover,
  .nav a[aria-current="page"] { border-bottom-color: var(--brass); }
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-inline-start: auto;
}

@media (min-width: 62em) { .header__actions { margin-inline-start: 0; } }

.header__tel {
  display: none;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 75em) { .header__tel { display: inline-flex; } }

/* language switcher — names, never flags (flags are countries, not languages) */
.langs { position: relative; }

.langs__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-3);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: var(--t-base);
  cursor: pointer;
}

.langs__list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--s-2));
  min-width: 11rem;
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.langs__list a {
  display: block;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-base);
  text-decoration: none;
}

.langs__list a:hover { background: var(--canvas-sunk); }
.langs__list a[aria-current="true"] { color: var(--brass-deep); font-weight: 500; }

/* mobile drawer */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
}

@media (min-width: 62em) { .burger { display: none; } }

.burger span,
.burger span::before,
.burger span::after {
  content: "";
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.burger span::before { transform: translateY(-6px); }
.burger span::after { transform: translateY(4.5px); }

.drawer {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 40;
  padding: var(--s-8) var(--gutter);
  background: var(--canvas);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.drawer[data-open="true"] { transform: none; opacity: 1; visibility: visible; }

.drawer a {
  display: block;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-display);
  font-size: var(--t-2xl);
  text-decoration: none;
}

/* ---------------------------------------------------------------- hero */

.hero { position: relative; background: var(--petrol); color: var(--canvas); }

.hero__media { position: relative; }

.hero__media img {
  width: 100%;
  aspect-ratio: 2 / 1;          /* one of the three permitted ratios */
  object-fit: cover;
}

@media (max-width: 45em) {
  .hero__media img { aspect-ratio: 4 / 5; }
}

/* Scrim: a vertical gradient only. No coloured overlay, no duotone.
 * It has to carry the whole text block, not just the headline — on a tour page that block is
 * breadcrumb + h1 + lede + buttons, and the top of it was landing on bare sunlit marble where
 * cream text is unreadable. Weighted to stay soft over the upper third of the picture. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(10 31 38 / 0.92) 0%,
    rgb(10 31 38 / 0.74) 26%,
    rgb(10 31 38 / 0.46) 52%,
    rgb(10 31 38 / 0.18) 76%,
    rgb(10 31 38 / 0) 100%
  );
}

.hero__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding-block: clamp(var(--s-8), 5vw, var(--s-16));
}

.hero__body .wrap { max-width: var(--page); }

.hero h1 { color: var(--canvas); max-width: 18ch; margin-bottom: var(--s-4); }

.hero .lede { color: #d6e0e2; max-width: 40ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-8);
}

.hero--page .hero__media img { aspect-ratio: 2 / 1; max-height: 58vh; }

/* ---------------------------------------------------------------- cards */

.card {
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.card:hover { border-color: var(--teak); }

.card__media { position: relative; overflow: hidden; background: var(--canvas-sunk); }

.card__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.card:hover .card__media img { transform: scale(1.03); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-3);
  padding: var(--s-6);
}

.card__title {
  font-family: var(--ff-display);
  font-size: var(--t-xl);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}

.card__title a { text-decoration: none; }

/* Whole card clickable, but the real link stays the accessible target. */
.card__title a::after { content: ""; position: absolute; inset: 0; }

.card { position: relative; }

.card__summary { color: var(--ink-soft); font-size: var(--t-base); margin: 0; flex: 1; }

.card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  margin-top: auto;
}

.card__meta { font-size: var(--t-sm); color: var(--ink-soft); }

/* price — the one place brass is allowed to shout */
.price {
  font-family: var(--ff-display);
  font-size: var(--t-xl);
  color: var(--brass-deep);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.price__from { font-family: var(--ff-ui); font-size: var(--t-sm); color: var(--ink-soft); letter-spacing: 0.02em; }
.price__unit { font-family: var(--ff-ui); font-size: var(--t-sm); color: var(--ink-soft); }

.price--enquire { font-size: var(--t-lg); color: var(--ink-soft); }

/* ---------------------------------------------------------------- at-a-glance strip */

.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.glance > div { background: var(--canvas); padding: var(--s-6) var(--s-4); }

.glance dt {
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
}

.glance dd { margin: 0; font-size: var(--t-body); font-weight: 500; }

/* ---------------------------------------------------------------- itinerary rail */

.itinerary { list-style: none; margin: 0; padding: 0; position: relative; }

.itinerary::before {
  content: "";
  position: absolute;
  inset-inline-start: 4.75rem;
  top: 0.6rem;
  bottom: 1.5rem;
  width: 1px;
  background: var(--rule);
  transform-origin: top;
}

/* The rail draws itself as the list scrolls into view. Native scroll-timeline, no JS.
 * Unsupported browsers simply get the finished line, which is a perfectly good outcome. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .itinerary::before {
      animation: draw-rail linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 45%;
    }
  }
}

@keyframes draw-rail { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.itinerary li {
  position: relative;
  display: grid;
  grid-template-columns: 4.75rem 1fr;
  gap: var(--s-6);
  padding-bottom: var(--s-8);
}

.itinerary li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(4.75rem - 3px);
  top: 0.55rem;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brass);
}

.itinerary time,
.itinerary .itinerary__time {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--teak);
  padding-top: 1px;
}

.itinerary p { margin: 0; }

/* ---------------------------------------------------------------- include / exclude */

.inex { display: grid; gap: var(--s-8); }

@media (min-width: 48em) { .inex { grid-template-columns: 1fr 1fr; } }

.inex ul { list-style: none; margin: 0; padding: 0; }

.inex li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-base);
}

.icon--check { color: var(--sea-glass); }
.icon--cross { color: var(--teak); }

/* ---------------------------------------------------------------- price table */

.rates { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

.rates caption { text-align: start; padding-bottom: var(--s-4); color: var(--ink-soft); font-size: var(--t-base); }

.rates th,
.rates td { padding: var(--s-3) var(--s-4); text-align: start; border-bottom: 1px solid var(--rule); }

.rates th {
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.rates td + td,
.rates th + th { text-align: end; }

.rates tbody tr:hover { background: var(--canvas-sunk); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------- sticky booking bar */

.bookbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--gutter);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: var(--petrol);
  color: var(--canvas);
  border-top: 1px solid var(--rule-dark);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease);
}

.bookbar[data-visible="true"] { transform: none; }

@media (min-width: 62em) { .bookbar { display: none; } }

.bookbar .price { color: var(--brass); font-size: var(--t-lg); }
.bookbar .price__from { color: #b7c6ca; }
.bookbar .btn { margin-inline-start: auto; flex: none; }

/* ---------------------------------------------------------------- filters */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-4);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;          /* pills are the one place a full radius belongs */
  font-size: var(--t-base);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.chip:hover { border-color: var(--teak); }

.chip[aria-pressed="true"] {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--canvas);
}


/* ---------------------------------------------------------------- currency switch */

.cur { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }

.cur button {
  min-height: 2.5rem;
  padding: var(--s-2) var(--s-4);
  background: none;
  border: 0;
  font-size: var(--t-base);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.cur button[aria-pressed="true"] { background: var(--petrol); color: var(--canvas); }

/* ---------------------------------------------------------------- notes & flags */

.note {
  padding: var(--s-4) var(--s-6);
  border-inline-start: 2px solid var(--brass);
  background: var(--canvas-sunk);
  font-size: var(--t-base);
}

.note p:last-child { margin-bottom: 0; }

.note--warn { border-inline-start-color: var(--teak); }

/* ---------------------------------------------------------------- FAQ */

.faq { border-top: 1px solid var(--rule); }

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-6);
  font-family: var(--ff-display);
  font-size: var(--t-lg);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-inline-end: 1.5px solid var(--teak);
  border-block-end: 1.5px solid var(--teak);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur) var(--ease);
}

.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }

.faq details > div { padding-bottom: var(--s-6); }
.faq details p { margin-bottom: 0; }

/* ---------------------------------------------------------------- footer */

.footer {
  background: var(--petrol-deep);
  color: #c3d2d6;
  padding-block: var(--s-16) var(--s-8);
  font-size: var(--t-base);
}

.footer h2,
.footer h3 { color: var(--canvas); }

.footer__grid {
  display: grid;
  gap: var(--s-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--rule-dark);
}

.footer h3 {
  font-family: var(--ff-ui);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-4);
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: var(--s-2); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--canvas); text-decoration: underline; text-decoration-color: var(--brass); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
  justify-content: space-between;
  padding-top: var(--s-8);
  font-size: var(--t-sm);
  color: #92a6ab;
}

/* TÜRSAB licence — the local ABTA/ATOL equivalent, and currently invisible on their site */
.licence {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule-dark);
  border-radius: 2px;
  font-size: var(--t-sm);
  line-height: 1.35;
}

.licence strong { color: var(--canvas); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- utility */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: -4rem;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--brass);
  color: var(--petrol-deep);
  border-radius: 2px;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}

.skip:focus { top: var(--s-3); }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(78%, 20rem);
  gap: var(--s-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
}

.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

@media (min-width: 56em) {
  .rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    overflow: visible;
  }
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- legal prose (/terms/, /privacy/)
 * Long-form reading, one column. Sections are separated by a hairline rather than by whitespace
 * alone so the shape of the document is visible while scrolling. h2 is pulled well down the scale:
 * the global h2 clamp is display size and would shout on a page like this. */

.legal { margin-top: clamp(var(--s-8), 4vw, var(--s-12)); }

.legal > section + section {
  margin-top: var(--s-12);
  padding-top: var(--s-12);
  border-top: 1px solid var(--rule);
}

.legal h2 {
  font-size: var(--t-xl);
  line-height: 1.2;
  margin-bottom: var(--s-4);
}

.legal p:last-child { margin-bottom: 0; }

.legal address {
  font-style: normal;
  color: var(--ink-soft);
  margin-top: var(--s-6);
}

.legal__note { margin-top: clamp(var(--s-12), 6vw, var(--s-16)); }
.legal__more { margin-top: var(--s-6); }

/* ---------------------------------------------------------------- airport rate tables (transfers.mjs)
 * Every row in a transfer table leads with a passenger-band row header, so the first price cell is
 * a td preceded by a th and misses the shared `td + td` end-alignment. Figures have to sit in one
 * column or a rate card stops being readable at a glance. The row header is pulled back to body
 * colour and weight — the shared .rates th styling is meant for column headers. */

.rates--pax td { text-align: end; }

.rates--pax tbody th {
  font-size: var(--t-body);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
}

.table-scroll + .note { margin-top: var(--s-4); }

/* ---------------------------------------------------------------- action row (/contact/)
 * A wrapped row of buttons outside a hero. Identical geometry to .hero__actions, which is scoped
 * to the hero by name only — this is the generic one, so any page can use it. */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-8);
}

/* ---------------------------------------------------------------- tours index
 * src/templates/tours-index.mjs. Two additions only.
 *
 * .card__price — the catalogue prices several tours per group or per vehicle, not per person.
 * Stating the basis matters (a £160 group price beside a £35 per-person one is otherwise a lie of
 * omission), and .price is nowrap, so the basis needs its own line rather than squeezing the
 * days/duration meta beside it.
 *
 * .card__cta — .card__title a::after covers the whole card, so any second link inside a card is
 * dead unless it is lifted above that overlay. Used only on tours we cannot honestly price, where
 * the "ask us" WhatsApp link is the entire call to action.
 */
.card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
  text-align: end;
}

.card__cta {
  position: relative;
  z-index: 1;
  gap: var(--s-1);
  font-size: var(--t-sm);
}

/* Phone and WhatsApp are the only way to reach this agency — no email is published — so the
 * contact links keep a full tap target even here in the small print. */
.legal .link { min-height: 3rem; }

/* ---------------------------------------------------------------- term rows (/yachting/)
 * src/templates/yachting.mjs. One addition.
 *
 * Charter carries no price, so the page explains what a charter price is made of instead: four
 * term/definition rows. A <dl> is the honest element for that, and hairline rows keep it from
 * reading as a feature-card grid. Colours are inherited rather than set, so the same list works on
 * canvas and inside .section--dark — which is where it is actually used.
 */
.rows { margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.rows > div {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 44em) {
  .rows > div { grid-template-columns: 13rem 1fr; gap: var(--s-8); align-items: baseline; }
}

.rows dt {
  font-family: var(--ff-display);
  font-size: var(--t-lg);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.rows dd { margin: 0; max-width: var(--measure); color: var(--ink-soft); }

.section--dark .rows,
.section--dark .rows > div { border-color: var(--rule-dark); }
.section--dark .rows dd { color: #c3d2d6; }

/* ---------------------------------------------------------------- tour detail
 * Added for src/templates/tour-detail.mjs. Two things the system did not already have:
 * the breadcrumb trail that sits above the hero title, and the enquiry panel that sits
 * beside the price table (and becomes the sticky bar's inline counterpart).
 */

.crumbs {
  font-family: var(--ff-ui);
  font-size: var(--t-sm);
  margin: 0 0 var(--s-4);
}

.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
}

.crumbs li { display: flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; opacity: 0.45; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-decoration-color: var(--brass); }
.crumbs [aria-current] { opacity: 0.72; }

.pricebox {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(var(--s-6), 4vw, var(--s-8));
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 2px;          /* 0 or 2px only */
  align-self: start;
}

/* The one figure on the page allowed to be large. Everything else stays in tabular body size. */
.pricebox .price { font-size: clamp(var(--t-2xl), 5vw, var(--t-3xl)); line-height: 1.1; }
.pricebox .price__from { display: block; margin-bottom: calc(var(--s-2) * -1); }
.pricebox .btn { width: 100%; }
.pricebox p:last-child { margin-bottom: 0; }

/* Hero breadcrumb sits at the very top of the text block, where the scrim is deliberately at its
 * softest so the photograph still reads. A neutral shadow is the proportionate fix — this is the
 * legibility kind, not the coloured glow DESIGN.md bans. */
.hero .crumbs {
  text-shadow: 0 1px 3px rgb(10 31 38 / 0.75);
}

.hero .crumbs [aria-current] { opacity: 0.85; }