/* Alma Dogmatica — public site design system (index.html, yacht.html, bareboat.html).
   Photography leads; surfaces alternate between deep navy, warm off-white and a cool grey.
   Service/request pages keep their own layout in services.css and share these tokens. */
:root {
  --navy: #0e1a22;
  --slate: #162a34;
  --paper: #f2f0ea;
  --cool: #e7ecec;
  --ink: #17242a;
  --light: #f4f4f0;
  --muted: #56666d; /* on light surfaces */
  --muted-on-dark: #9fb0b6;
  --glass: #86aeb5;
  --sand: #c7b28e;
  --rule: rgba(23, 36, 42, 0.16);
  --rule-on-dark: rgba(244, 244, 240, 0.18);
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(56px, 7.5vw, 112px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body.site {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
:where(.site) img {
  display: block;
  max-width: 100%;
  height: auto;
}
:where(.site) a {
  color: inherit;
}
:where(.site) p {
  margin: 0 0 1em;
  max-width: 62ch;
}
:where(.site) h1,
:where(.site) h2,
:where(.site) h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}
:where(.site) h2 {
  font-size: clamp(38px, 4.6vw, 68px);
}
:where(.site) h3 {
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.1;
}
.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.eyebrow {
  display: block;
  font: 600 12.5px/1.4 var(--body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.lead {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
}
.small {
  font-size: 15px;
  color: var(--muted);
}
.site :focus-visible {
  outline: 2px solid var(--glass);
  outline-offset: 3px;
}

/* ---------- surfaces ---------- */
.band {
  padding: var(--section) 0;
}
.band-paper {
  background: var(--paper);
}
.band-cool {
  background: var(--cool);
}
.band-navy,
.band-slate {
  color: var(--light);
}
.band-navy {
  background: var(--navy);
}
.band-slate {
  background: var(--slate);
}
.band-navy .eyebrow,
.band-slate .eyebrow {
  color: var(--glass);
}
.band-navy .small,
.band-slate .small {
  color: var(--muted-on-dark);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 2px;
  font: 600 15px/1.2 var(--body);
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.btn-primary {
  background: var(--sand);
  color: var(--navy);
}
.btn-primary:hover {
  background: #d6c4a4;
}
.btn-dark {
  background: var(--navy);
  color: var(--light);
}
.btn-dark:hover {
  background: var(--slate);
}
.btn-ghost {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}
.btn-ghost:hover {
  background: rgba(134, 174, 181, 0.16);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.more {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.more::after {
  content: " →";
}

/* ---------- navigation ---------- */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  color: var(--light);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 26px;
}
.nav-solid {
  position: static;
  background: var(--navy);
}
.brand {
  font: 600 26px/1 var(--display);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  gap: clamp(18px, 2.4vw, 36px);
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover {
  border-bottom-color: currentColor;
}
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-on-dark);
  border-radius: 2px;
  color: inherit;
  font: 600 13px/1 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
}
@media (max-width: 760px) {
  .nav {
    position: relative;
    background: var(--navy);
  }
  .nav .wrap {
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .brand {
    font-size: 23px;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 6px 0 10px;
  }
  .nav.open .nav-links {
    display: flex;
  }
  .nav-links a {
    font-size: 17px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rule-on-dark);
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: var(--navy);
  color: var(--light);
}
.hero-media {
  position: relative;
  height: min(80vh, 42vw);
  min-height: 440px;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 50% 100%);
}
/* Two soft scrims only where text sits: under the navigation and under the headline. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 26, 34, 0.5) 0%, rgba(14, 26, 34, 0) 20%),
    linear-gradient(0deg, rgba(14, 26, 34, 0.72) 0%, rgba(14, 26, 34, 0) 34%);
}
.hero-copy {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding-bottom: clamp(20px, 2.2vw, 36px);
}
.hero-copy .wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.hero .eyebrow {
  color: var(--light);
  opacity: 0.86;
  margin-bottom: 8px;
}
.hero h1 {
  font-size: clamp(46px, 5vw, 88px);
  line-height: 0.96;
  white-space: nowrap;
}
.hero-side {
  flex: 0 0 auto;
  padding-bottom: 6px;
}
/* The supporting line is shown where it has its own space: under the headline on phones. */
.hero-side p {
  display: none;
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 18px;
}
.hero-tag {
  font: 500 clamp(19px, 1.6vw, 25px) / 1.3 var(--display);
  margin: 10px 0 22px;
}
.rate {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
  margin: 0 0 26px;
  padding: 18px 0;
  border-top: 1px solid var(--rule-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
}
.rate div {
  min-width: 0;
}
.rate dt {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.rate dd {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 600;
}
/* Below 1000px the copy leaves the photograph and sits under it, so it never covers the yacht. */
@media (max-width: 1000px) {
  .hero-media {
    height: auto;
    min-height: 0;
  }
  .hero-media img {
    height: auto;
    object-fit: initial;
  }
  .hero-media::after {
    background: linear-gradient(0deg, rgba(14, 26, 34, 0.5) 0%, rgba(14, 26, 34, 0) 16%);
  }
  .hero-copy {
    position: static;
    display: block;
    padding: 26px 0 44px;
  }
  .hero-copy .wrap {
    display: block;
  }
  .hero h1 {
    font-size: clamp(46px, 13vw, 60px);
    white-space: normal;
  }
  .hero-side {
    margin-top: 16px;
  }
  .hero-side p {
    display: block;
  }
  .hero .actions .btn {
    flex: 1 1 100%;
  }
}

/* ---------- section heads ---------- */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.head p:last-child {
  margin-bottom: 0;
}
@media (max-width: 860px) {
  .head {
    grid-template-columns: 1fr;
  }
}

/* ---------- three formats ---------- */
.formats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
}
.format {
  display: block;
  text-decoration: none;
}
.format figure {
  margin: 0 0 22px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cool);
}
.format img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.format:hover img {
  transform: scale(1.03);
}
.format .eyebrow {
  margin-bottom: 8px;
}
.format p {
  color: var(--muted);
  margin: 10px 0 14px;
  font-size: 16px;
}
.format .from {
  font-weight: 600;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.format .from::after {
  content: "→";
}
@media (max-width: 860px) {
  .formats {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

/* ---------- yacht showcase ---------- */
.showcase {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cool);
}
.showcase img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 64%;
}
.specs {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
  margin: 0;
  border-bottom: 1px solid var(--rule);
}
.specs div {
  padding: 26px 20px 26px 0;
}
.specs dt {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.specs dd {
  margin: 8px 0 0;
  font: 500 clamp(24px, 2vw, 30px) / 1.1 var(--display);
}
.band-navy .specs,
.band-slate .specs {
  border-color: var(--rule-on-dark);
}
.band-navy .specs dt,
.band-slate .specs dt {
  color: var(--muted-on-dark);
}
@media (max-width: 980px) {
  .specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .specs div {
    padding: 18px 12px 18px 0;
  }
  .showcase {
    aspect-ratio: 3 / 2;
  }
}

/* ---------- editorial gallery: one dominant image and up to four supporting ---------- */
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: clamp(8px, 1vw, 14px);
}
.gallery a {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--slate);
  color: var(--light);
}
.gallery a:first-child {
  grid-row: span 2;
  aspect-ratio: auto;
}
.gallery.trio {
  grid-template-columns: 2fr 1fr;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery a:hover img {
  transform: scale(1.03);
}
.gallery span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 36px 16px 12px;
  font: 600 11.5px/1.3 var(--body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(0deg, rgba(14, 26, 34, 0.6), rgba(14, 26, 34, 0));
}
.gallery + .gallery,
.gallery-title + .gallery {
  margin-top: clamp(8px, 1vw, 14px);
}
.gallery-title {
  font: 600 12.5px/1.4 var(--body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: clamp(40px, 5vw, 64px) 0 18px;
}
@media (max-width: 760px) {
  .gallery,
  .gallery.trio {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .gallery a:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
}

.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 18, 23, 0.96);
  color: var(--light);
}
.lightbox::backdrop {
  background: rgba(10, 18, 23, 0.96);
}
.lightbox-stage {
  position: absolute;
  inset: 64px clamp(12px, 6vw, 96px) 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: 0;
  max-width: none;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lightbox button {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  color: inherit;
  font: 300 34px/1 var(--body);
  cursor: pointer;
}
.lightbox .lb-close {
  top: 10px;
  right: 14px;
}
.lightbox .lb-prev,
.lightbox .lb-next {
  top: 50%;
  transform: translateY(-50%);
}
.lightbox .lb-prev {
  left: clamp(0px, 2vw, 30px);
}
.lightbox .lb-next {
  right: clamp(0px, 2vw, 30px);
}

/* ---------- wide photograph with a caption block ---------- */
.wide {
  margin: 0;
  overflow: hidden;
  background: var(--slate);
}
.wide img {
  width: 100%;
  height: var(--wide-h, clamp(360px, 52vw, 760px));
  object-fit: cover;
  object-position: var(--focus, 50% 60%);
}
@media (max-width: 760px) {
  .wide img {
    height: auto;
    object-fit: initial;
  }
}

/* ---------- split: photograph and text ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.split.flip {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
.split.flip > :first-child {
  order: 2;
}
.split figure {
  margin: 0;
  overflow: hidden;
  background: var(--cool);
}
.split figure img {
  width: 100%;
}
.split h2 {
  margin-bottom: 22px;
}
.split .actions {
  margin-top: 30px;
}
.price-line {
  font: 500 clamp(30px, 3vw, 44px) / 1.1 var(--display);
  margin: 26px 0 6px;
}
.facts {
  margin: 28px 0 0;
  border-top: 1px solid var(--rule);
}
.facts div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.facts dt {
  color: var(--muted);
  font-size: 15.5px;
}
.facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.band-navy .facts,
.band-navy .facts div,
.band-slate .facts,
.band-slate .facts div {
  border-color: var(--rule-on-dark);
}
.band-navy .facts dt,
.band-slate .facts dt {
  color: var(--muted-on-dark);
}
@media (max-width: 860px) {
  .split,
  .split.flip {
    grid-template-columns: 1fr;
  }
  .split.flip > :first-child {
    order: 0;
  }
}

/* ---------- course details ---------- */
.steps {
  list-style: none;
  counter-reset: s;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.steps li {
  counter-increment: s;
  padding: 26px 0 0;
  font-size: 15.5px;
  color: var(--muted);
}
.steps li::before {
  content: "0" counter(s);
  display: block;
  font: 500 34px/1 var(--display);
  color: var(--ink);
  margin-bottom: 14px;
}
.steps strong {
  display: block;
  color: var(--ink);
  font-size: 16.5px;
  margin-bottom: 6px;
}
@media (max-width: 980px) {
  .steps {
    grid-template-columns: 1fr;
    border-top: 0;
  }
  .steps li {
    position: relative;
    padding: 18px 0 18px 56px;
    border-top: 1px solid var(--rule);
  }
  .steps li::before {
    position: absolute;
    left: 0;
    top: 16px;
    margin: 0;
  }
}
.sub {
  margin-top: clamp(48px, 6vw, 88px);
}
.sub > h3 {
  margin-bottom: 24px;
}
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 860px) {
  .cols {
    grid-template-columns: 1fr;
  }
}
:where(.site) table {
  width: 100%;
  border-collapse: collapse;
}
:where(.site) th,
:where(.site) td {
  text-align: left;
  vertical-align: top;
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--rule);
}
:where(.site) th {
  font: 600 12px/1.4 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
:where(.site) td.num {
  font-weight: 600;
  white-space: nowrap;
}
:where(.site) td .small {
  display: block;
}
.dates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.dates-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.note {
  border-left: 2px solid var(--sand);
  padding: 4px 0 4px 20px;
  color: var(--muted);
  font-size: 16px;
}
.paid {
  display: none;
  border-left: 2px solid var(--glass);
  padding: 4px 0 4px 20px;
  margin-bottom: 32px;
}
:where(.site) details {
  border-bottom: 1px solid var(--rule);
  padding: 16px 0;
}
:where(.site) details:first-of-type {
  border-top: 1px solid var(--rule);
}
:where(.site) summary {
  cursor: pointer;
  font-weight: 600;
}
:where(.site) details p,
:where(.site) details ol {
  margin: 12px 0 0;
  color: var(--muted);
}
:where(.site) details ol {
  padding-left: 20px;
  font-size: 15.5px;
}

/* ---------- day trips: three columns, no boxes ---------- */
.trips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.trip {
  display: flex;
  flex-direction: column;
  padding: 34px clamp(18px, 2.6vw, 40px) 8px;
  border-left: 1px solid var(--rule);
}
.trip:first-child {
  padding-left: 0;
  border-left: 0;
}
.trip:last-child {
  padding-right: 0;
}
.trip .price {
  font: 500 clamp(40px, 3.6vw, 54px) / 1 var(--display);
  margin: 14px 0 6px;
}
.trip ul {
  flex: 1;
  margin: 18px 0 26px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 16px;
}
.trip li {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 860px) {
  .trips {
    grid-template-columns: 1fr;
  }
  .trip,
  .trip:first-child,
  .trip:last-child {
    padding: 30px 0;
    border-left: 0;
    border-bottom: 1px solid var(--rule);
  }
}

/* ---------- about ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.about img {
  width: 100%;
}
@media (max-width: 760px) {
  .about {
    grid-template-columns: 1fr;
  }
  .about img {
    max-width: 320px;
  }
}

/* ---------- plain lists ---------- */
.list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 6vw, 96px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 16px;
}
.list strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
}
.band-navy .list,
.band-navy .list li,
.band-slate .list,
.band-slate .list li {
  border-color: var(--rule-on-dark);
  color: var(--muted-on-dark);
}
.band-navy .list strong,
.band-slate .list strong {
  color: var(--light);
}
@media (max-width: 760px) {
  .list {
    grid-template-columns: 1fr;
  }
}

/* ---------- closing call to action and footer ---------- */
.closing h2 {
  max-width: 16ch;
  margin-bottom: 32px;
}
.footer {
  background: var(--navy);
  color: var(--muted-on-dark);
  padding: 44px 0;
  font-size: 14.5px;
  border-top: 1px solid var(--rule-on-dark);
}
.footer p {
  margin-bottom: 8px;
  max-width: none;
}
.footer a {
  color: var(--light);
}

/* ---------- storefront section and forms rendered by services.js / bareboat.js ---------- */
.site #services h2 {
  margin-bottom: 18px;
}
.apply {
  max-width: 820px;
}
.apply h2 {
  margin-bottom: 14px;
}
.apply .svc-form {
  border-radius: 2px;
  border-color: var(--rule);
  padding: clamp(20px, 3vw, 36px);
}
.apply select {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.apply .svc-btn {
  border-radius: 2px;
  background: var(--navy);
  color: var(--light);
}
.apply .svc-btn:hover {
  background: var(--slate);
}

/* ---------- page header without a photograph (yacht page) ---------- */
.page-head {
  padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 72px);
}
.page-head h1 {
  font-size: clamp(56px, 8vw, 128px);
}
.page-head .rate {
  margin-top: 0;
}
.steps-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.band-navy .steps,
.band-navy .steps li,
.band-slate .steps,
.band-slate .steps li {
  border-color: var(--rule-on-dark);
  color: var(--muted-on-dark);
}
.band-navy .steps li::before,
.band-navy .steps strong,
.band-slate .steps li::before,
.band-slate .steps strong {
  color: var(--light);
}
@media (max-width: 980px) {
  .steps-4 {
    grid-template-columns: 1fr;
  }
}

/* ---------- content managed in the admin (docs/adr/0025, DESIGN_LOCK.md) ----------
   Nothing below changes the design as it ships: every rule needs an attribute that only the CMS
   renderer writes. An uploaded picture is one file, so it is cropped by CSS into the frame the
   design defines for its slot (--cms-ar), around the focal point the owner picked for wide
   screens (--cms-d) and for phones (--cms-m). */
[data-cms-section][hidden],
[data-cms-card][hidden] {
  display: none !important;
}
.formats[data-cms-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.formats[data-cms-count="1"] {
  grid-template-columns: minmax(0, 520px);
}
.site img[data-cms-focal] {
  aspect-ratio: var(--cms-ar, auto);
  object-fit: cover;
  object-position: var(--cms-d, 50% 50%);
}
@media (max-width: 1000px) {
  .hero-media img[data-cms-focal] {
    aspect-ratio: 1723 / 724;
    object-fit: cover;
  }
}
@media (max-width: 860px) {
  .formats[data-cms-count] {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .site img[data-cms-focal] {
    object-position: var(--cms-m, var(--cms-d, 50% 50%));
  }
  .hero-media img[data-cms-focal] {
    aspect-ratio: 5 / 4;
  }
  .wide img[data-cms-focal] {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
}

/* ---------- WhatsApp links (the floating button is in services.css) ---------- */
.wa-inline {
  display: inline-block;
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 600;
  text-underline-offset: 3px;
}
.trip .btn + .btn {
  margin-top: 10px;
}
.nav-links a.nav-wa {
  border: 1px solid var(--rule-on-dark);
  border-radius: 2px;
  padding: 6px 12px;
}
@media (max-width: 760px) {
  .nav-links a.nav-wa {
    align-self: flex-start;
    margin-top: 8px;
  }
}