/* ==========================================================================
   Cleramo Hotel Group — global styles
   Layered on top of Bootstrap 5.3. Only what Bootstrap doesn't already give us.
   Palette: deep charcoal, warm brass, bone white. Coastal Perth mood.
   ========================================================================== */

:root {
  --clr-ink: #101418;
  --clr-ink-soft: #1c2229;
  --clr-ink-muted: #3a424b;
  --clr-bone: #f4efe6;
  --clr-bone-warm: #e8dfd0;
  --clr-brass: #c69a53;
  --clr-brass-deep: #9c7538;
  --clr-sea: #14343d;
  --clr-sand: #d9c9ad;
  --clr-text-on-dark: #f1ece2;
  --clr-text-on-dark-dim: #c8bfae;
  --clr-text-on-light: #171b20;
  --clr-text-on-light-dim: #4a515a;
  --clr-line-dark: rgba(244, 239, 230, 0.14);
  --clr-line-light: rgba(16, 20, 24, 0.12);
  --clr-overlay: rgba(12, 16, 20, 0.62);
  --clr-overlay-strong: rgba(12, 16, 20, 0.78);

  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  --sz-gutter: clamp(1rem, 4vw, 3rem);
  --sz-section: clamp(4rem, 9vw, 9rem);
  --radius-sm: 2px;
  --radius-md: 6px;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

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

body {
  background-color: var(--clr-bone);
  color: var(--clr-text-on-light);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .cr-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--clr-text-on-light);
}

h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); }

a { color: var(--clr-brass-deep); text-decoration: none; transition: color 0.25s var(--ease-out); }
a:hover { color: var(--clr-ink); }

img { max-width: 100%; height: auto; display: block; }

/* -------------------------------------------------------------------------
   Reusable scaffolding
   ------------------------------------------------------------------------- */

.cr-section { padding: var(--sz-section) 0; position: relative; }
.cr-section--dark { background-color: var(--clr-ink); color: var(--clr-text-on-dark); }
.cr-section--dark h1, .cr-section--dark h2, .cr-section--dark h3, .cr-section--dark h4 { color: var(--clr-text-on-dark); }
.cr-section--bone { background-color: var(--clr-bone); }
.cr-section--sand { background-color: var(--clr-sand); }
.cr-section--sea { background-color: var(--clr-sea); color: var(--clr-text-on-dark); }
.cr-section--sea h2, .cr-section--sea h3 { color: var(--clr-text-on-dark); }

.cr-kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clr-brass-deep);
  display: inline-block;
  margin-bottom: 1.25rem;
}
.cr-section--dark .cr-kicker,
.cr-section--sea .cr-kicker { color: var(--clr-brass); }

.cr-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  max-width: 62ch;
}
.cr-section--dark .cr-lead,
.cr-section--sea .cr-lead { color: var(--clr-text-on-dark-dim); }

.cr-rule { height: 1px; background: var(--clr-line-light); border: 0; }
.cr-section--dark .cr-rule,
.cr-section--sea .cr-rule { background: var(--clr-line-dark); }

/* Vertical hairline + section index decorations */
.cr-index {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--clr-brass-deep);
}
.cr-section--dark .cr-index, .cr-section--sea .cr-index { color: var(--clr-brass); }

.cr-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--clr-brass-deep);
}
.cr-section--dark .cr-vertical { color: var(--clr-brass); }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.cr-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.9rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  text-decoration: none;
}
.cr-btn--brass { background: var(--clr-brass); color: var(--clr-ink); }
.cr-btn--brass:hover { background: var(--clr-brass-deep); color: var(--clr-bone); }
.cr-btn--ghost { background: transparent; color: var(--clr-ink); border-color: var(--clr-ink); }
.cr-btn--ghost:hover { background: var(--clr-ink); color: var(--clr-bone); }
.cr-section--dark .cr-btn--ghost,
.cr-section--sea .cr-btn--ghost { color: var(--clr-text-on-dark); border-color: var(--clr-text-on-dark); }
.cr-section--dark .cr-btn--ghost:hover,
.cr-section--sea .cr-btn--ghost:hover { background: var(--clr-text-on-dark); color: var(--clr-ink); }

/* -------------------------------------------------------------------------
   Cards and bento blocks
   ------------------------------------------------------------------------- */

.cr-card {
  background: var(--clr-bone-warm);
  border: 1px solid var(--clr-line-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.cr-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(16, 20, 24, 0.14); }
.cr-card__body { padding: 1.75rem 1.5rem; }
.cr-card__img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--clr-ink-soft); }

.cr-section--dark .cr-card {
  background: var(--clr-ink-soft);
  border-color: var(--clr-line-dark);
}
.cr-section--dark .cr-card h3 { color: var(--clr-text-on-dark); }

/* Bento grid: mixed-size tiles */
.cr-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.cr-bento__a { grid-column: span 7; grid-row: span 2; }
.cr-bento__b { grid-column: span 5; }
.cr-bento__c { grid-column: span 5; }
.cr-bento__d { grid-column: span 4; }
.cr-bento__e { grid-column: span 8; }

@media (max-width: 991px) {
  .cr-bento__a, .cr-bento__b, .cr-bento__c, .cr-bento__d, .cr-bento__e { grid-column: span 12; }
}

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

.cr-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--clr-text-on-dark);
  overflow: hidden;
}
.cr-hero__inner { position: relative; z-index: 3; padding: 6rem 0 4rem; }
.cr-hero__title {
  color: var(--clr-text-on-dark);
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
}
.cr-hero__sub { color: var(--clr-text-on-dark-dim); max-width: 52ch; margin-top: 1.5rem; }
.cr-hero__stamp {
  position: absolute;
  top: 2rem;
  right: var(--sz-gutter);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--clr-brass);
  border: 1px solid var(--clr-brass);
  padding: 0.55rem 0.9rem;
  text-transform: uppercase;
}

/* Page hero for detail pages */
.cr-hero-detail {
  min-height: 62vh;
  align-items: center;
  background-size: cover;
  background-position: center;
}

/* -------------------------------------------------------------------------
   Typography-driven section
   ------------------------------------------------------------------------- */

.cr-display-block {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 12vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--clr-ink);
  word-break: break-word;
}
.cr-section--dark .cr-display-block { color: var(--clr-text-on-dark); }
.cr-display-block em { font-style: italic; color: var(--clr-brass); }

/* Monumental numbers */
.cr-mono-number {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 10rem);
  line-height: 0.82;
  color: var(--clr-brass);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Editorial list / process
   ------------------------------------------------------------------------- */

.cr-process { list-style: none; padding: 0; margin: 0; counter-reset: cr-step; }
.cr-process > li {
  position: relative;
  padding: 1.6rem 0 1.6rem 4.5rem;
  border-top: 1px solid var(--clr-line-light);
  counter-increment: cr-step;
}
.cr-section--dark .cr-process > li { border-color: var(--clr-line-dark); }
.cr-process > li::before {
  content: "0" counter(cr-step);
  position: absolute;
  left: 0;
  top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--clr-brass-deep);
}
.cr-process > li:last-child { border-bottom: 1px solid var(--clr-line-light); }
.cr-section--dark .cr-process > li:last-child { border-color: var(--clr-line-dark); }

/* -------------------------------------------------------------------------
   Gallery
   ------------------------------------------------------------------------- */

.cr-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 12vw;
  gap: 0.75rem;
}
.cr-gallery__tile { overflow: hidden; position: relative; }
.cr-gallery__tile img { width: 100%; height: 100%; object-fit: cover; }
.cr-gallery__tile figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 0.9rem;
  background: linear-gradient(to top, rgba(12,16,20,0.86), transparent);
  color: var(--clr-text-on-dark);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cr-gallery__tile--tall { grid-row: span 2; }
.cr-gallery__tile--wide { grid-column: span 2; }

@media (max-width: 767px) {
  .cr-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 24vw; }
  .cr-gallery__tile--wide { grid-column: span 2; }
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */

.cr-field { margin-bottom: 1.15rem; }
.cr-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-text-on-light-dim);
  margin-bottom: 0.45rem;
}
.cr-section--dark .cr-label { color: var(--clr-text-on-dark-dim); }
.cr-input, .cr-textarea, .cr-select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--clr-line-light);
  padding: 0.7rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--clr-text-on-light);
  transition: border-color 0.25s var(--ease-out);
}
.cr-section--dark .cr-input,
.cr-section--dark .cr-textarea,
.cr-section--dark .cr-select { color: var(--clr-text-on-dark); border-color: var(--clr-line-dark); }
.cr-input:focus, .cr-textarea:focus, .cr-select:focus {
  outline: none;
  border-color: var(--clr-brass);
}
.cr-textarea { min-height: 120px; resize: vertical; }
.cr-field__err { color: #b5523a; font-size: 0.82rem; margin-top: 0.3rem; display: none; }
.cr-field--invalid .cr-input,
.cr-field--invalid .cr-textarea { border-color: #b5523a; }
.cr-field--invalid .cr-field__err { display: block; }

/* -------------------------------------------------------------------------
   Reveal animation (works with AOS in tandem)
   ------------------------------------------------------------------------- */

.cr-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.cr-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cr-reveal { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------------
   Cookie banner — Cleramo specific
   ------------------------------------------------------------------------- */

.cr-cookie {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  width: min(680px, calc(100% - 2rem));
  background: var(--clr-ink);
  color: var(--clr-text-on-dark);
  border: 1px solid var(--clr-brass);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.5rem 1.25rem;
  z-index: 1080;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.5rem;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.cr-cookie.is-open { opacity: 1; pointer-events: auto; }

.cr-cookie__mark {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clr-brass);
  grid-column: 1 / -1;
}
.cr-cookie__text { margin: 0; color: var(--clr-text-on-dark-dim); font-size: 0.94rem; line-height: 1.55; }
.cr-cookie__text a { color: var(--clr-brass); text-decoration: underline; text-underline-offset: 3px; }
.cr-cookie__text a:hover { color: var(--clr-text-on-dark); }

.cr-cookie__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.cr-cookie__btn {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.25s var(--ease-out);
}
.cr-cookie__btn--accept { background: var(--clr-brass); color: var(--clr-ink); }
.cr-cookie__btn--accept:hover { background: var(--clr-brass-deep); color: var(--clr-bone); }
.cr-cookie__btn--decline { background: transparent; color: var(--clr-text-on-dark); border-color: var(--clr-line-dark); }
.cr-cookie__btn--decline:hover { border-color: var(--clr-text-on-dark); }

@media (max-width: 620px) {
  .cr-cookie { grid-template-columns: 1fr; }
  .cr-cookie__actions { justify-content: flex-start; }
}

/* -------------------------------------------------------------------------
   Footer / header helpers
   ------------------------------------------------------------------------- */

.cr-header-contact { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; }
.cr-brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; }
.cr-footer { background: var(--clr-ink); color: var(--clr-text-on-dark-dim); }
.cr-footer h5 {
  color: var(--clr-text-on-dark);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.cr-footer a { color: var(--clr-text-on-dark-dim); }
.cr-footer a:hover { color: var(--clr-brass); }
.cr-footer__meta { font-size: 0.8rem; line-height: 1.7; }

@media (max-width: 575px) {
  .cr-hero { min-height: 78vh; }
  .cr-hero__stamp { display: none; }
}
/* ==========================================================================
   Accessibility contrast overrides (appended)
   ========================================================================== */

/* Links on light surfaces: darken brass so it clears AA (4.5:1) */
a { color: #6b4a1c; }
a:hover { color: var(--clr-ink); }

/* Kickers: darker brass on light sections, brighter brass on dark ones */
.cr-section--bone .cr-kicker,
.cr-section--sand .cr-kicker { color: #6b4a1c; }

.cr-section--dark .cr-kicker,
.cr-section--sea .cr-kicker { color: #e6c17f; }

/* Monumental numbers sitting on bone-warm cards */
.cr-section--bone .cr-mono-number,
.cr-section--sand .cr-mono-number { color: #7a5a2b; }

/* Links inside dark / sea sections (but never the buttons) */
.cr-section--dark a:not(.cr-btn),
.cr-section--sea a:not(.cr-btn) { color: var(--clr-brass); }
.cr-section--dark a:not(.cr-btn):hover,
.cr-section--sea a:not(.cr-btn):hover { color: var(--clr-text-on-dark); }

/* Cards inside the sea section inherit light text; keep their surface dark
   so headings, copy and ghost buttons stay legible. */
.cr-section--sea .cr-card {
  background: var(--clr-ink-soft);
  border-color: var(--clr-line-dark);
}
.cr-section--sea .cr-card h3 { color: var(--clr-text-on-dark); }

/* ==========================================================================
   QA contrast overrides — contacts page light sections
   Kickers, body links and textarea placeholders on the bone / sand surfaces
   needed a darker tone to clear 4.5:1 while dark sections keep the brass hue.
   ========================================================================== */

.cr-section--bone .cr-kicker,
.cr-section--sand .cr-kicker {
  color: #6b4f1e;
}

.cr-section--bone p a,
.cr-section--sand p a,
.cr-section--bone li a,
.cr-section--sand li a,
.cr-section--bone h2 a,
.cr-section--sand h2 a,
.cr-section--bone h3 a,
.cr-section--sand h3 a {
  color: #6b4f1e;
}

.cr-section--bone .cr-input::placeholder,
.cr-section--bone .cr-textarea::placeholder,
.cr-section--sand .cr-input::placeholder,
.cr-section--sand .cr-textarea::placeholder {
  color: #5a5a5a;
  opacity: 1;
}

/* ==========================================================================
   Contrast & layout overrides (appended)
   ========================================================================== */

/* Kickers on light backgrounds: darker brass for >= 4.5:1 */
.cr-section--bone .cr-kicker,
.cr-section--sand .cr-kicker { color: #6b4f22; }

/* Monumental numbers on light backgrounds: darker brass for >= 3:1 */
.cr-section--bone .cr-mono-number,
.cr-section--sand .cr-mono-number { color: #7a5a25; }

/* Cards inside the sea section need a dark surface (light headings sat on bone) */
.cr-section--sea .cr-card {
  background: var(--clr-ink-soft);
  border-color: var(--clr-line-dark);
}

/* Labels and links on the sea section */
.cr-section--sea .cr-label { color: var(--clr-text-on-dark-dim); }
.cr-section--sea a:not(.cr-btn) { color: var(--clr-brass); }
.cr-section--sea a:not(.cr-btn):hover { color: var(--clr-text-on-dark); }

/* Links inside dark sections (brass-deep was 4.42:1 on ink) */
.cr-section--dark a:not(.cr-btn) { color: var(--clr-brass); }
.cr-section--dark a:not(.cr-btn):hover { color: var(--clr-text-on-dark); }

/* Placeholder text in dark forms */
.cr-section--dark .cr-input::placeholder,
.cr-section--dark .cr-textarea::placeholder {
  color: var(--clr-text-on-dark-dim);
  opacity: 1;
}

/* Ghost buttons on the dark hero must be legible */
.cr-hero .cr-btn--ghost {
  color: var(--clr-text-on-dark);
  border-color: var(--clr-text-on-dark);
}
.cr-hero .cr-btn--ghost:hover {
  background: var(--clr-text-on-dark);
  color: var(--clr-ink);
}

/* ==========================================================================
   QA fix — cookie policy hero kicker contrast
   The ".cr-kicker" inside a hero sits on a dark photographic overlay, so it
   needs the brighter brass tone used on dark surfaces to clear 4.5:1.
   ========================================================================== */
.cr-hero .cr-kicker { color: #e6c17f; }

/* ==========================================================================
   QA fixes — homepage contrast
   ========================================================================== */

/* Hero kickers sit on dark photographic overlays: use a light tone so they
   clear AA against the sampled background. */
.cr-hero .cr-kicker {
  color: #f6efe1;
}

/* Kickers on light (bone / sand) surfaces need a much darker brass. */
.cr-section--bone .cr-kicker,
.cr-section--sand .cr-kicker {
  color: #3a2a08;
}

/* Cookie banner uses the shipped .cr-cookie styles; make sure its surface,
   text tones and buttons always keep AA contrast on the dark panel. */
.cr-cookie .cr-cookie__mark { color: #e6c17f; }
.cr-cookie__text { color: #e4dccb; }
.cr-cookie__text a { color: #e6c17f; }
.cr-cookie__btn--decline {
  color: #f1ece2;
  border-color: rgba(244, 239, 230, 0.4);
}
.cr-cookie__btn--decline:hover {
  border-color: #f1ece2;
  color: #ffffff;
}

/* ==========================================================================
   Service-page QA overrides — contrast on hero photography, light cards,
   and the bone / sand / dark section text ramp.
   ========================================================================== */

/* 1. Hero decorative text sits directly on photography whose brightness we
   cannot control, so give each small element its own dark backing and a
   near-white gold so the ratio clears AA on any image. */
.cr-hero__stamp {
  color: #fbf0d8;
  background: rgba(12, 16, 20, 0.94);
  border-color: #fbf0d8;
}
.cr-hero .cr-vertical {
  color: #f4efe6;
  background: rgba(12, 16, 20, 0.94);
  padding: 0.9rem 0.4rem;
}
.cr-hero .cr-kicker {
  color: #fbf0d8;
  background: rgba(12, 16, 20, 0.94);
  padding: 0.4rem 0.75rem;
  font-weight: 600;
}

/* 2. The hero price card is a bone-warm surface, so text inside it must be
   dark — it was inheriting the hero's light "on-dark" colour. */
.cr-hero .cr-card { color: var(--clr-text-on-light); }
.cr-hero .cr-card p,
.cr-hero .cr-card .cr-label { color: var(--clr-text-on-light); }

/* 3. Kickers: much darker brass on light sections, warm near-white on dark. */
.cr-section--bone .cr-kicker,
.cr-section--sand .cr-kicker { color: #3f2d0f; }
.cr-section--dark .cr-kicker,
.cr-section--sea .cr-kicker { color: #fbf0d8; }

/* 4. Lead copy and uppercase labels on dark / sea surfaces: lift them to the
   full on-dark ivory so they are not "dim" against the ink background. */
.cr-section--dark .cr-lead,
.cr-section--sea .cr-lead { color: #f1ece2; }
.cr-section--dark .cr-label,
.cr-section--sea .cr-label { color: #ece4d6; }

/* 5. Small form labels on the light cards keep enough darkness to read. */
.cr-hero .cr-label,
.cr-section--bone .cr-label,
.cr-section--sand .cr-label { color: #3a4049; }
.cr-section--bone .cr-card .cr-label,
.cr-section--sand .cr-card .cr-label { color: #3a4049; }

/* ==========================================================================
   QA fix — terms & conditions sidebar card contrast
   The "Need a hand?" kicker and the mail/phone links sit inside a
   bone-warm (.cr-card) surface, where the shared brass tones were too
   light. Darken just those elements inside cards so they clear AA.
   ========================================================================== */
.cr-section--bone .cr-card .cr-kicker,
.cr-section--sand .cr-card .cr-kicker {
  color: #1c1305;
}

.cr-section--bone .cr-card p a,
.cr-section--bone .cr-card li a,
.cr-section--sand .cr-card p a,
.cr-section--sand .cr-card li a {
  color: #201607;
}
.cr-section--bone .cr-card p a:hover,
.cr-section--bone .cr-card li a:hover,
.cr-section--sand .cr-card p a:hover,
.cr-section--sand .cr-card li a:hover {
  color: #101418;
}

/* ==========================================================================
   QA fix — privacy-policy sidebar contact link contrast
   The mailto link inside the bone-warm contact card sat at ~3:1. Darken the
   tone so it clears AA (4.5:1) on the bone-warm surface. Scoped to the
   sidebar card so the article copy is untouched.
   ========================================================================== */
.cr-section--bone aside .cr-card__body ul li a {
  color: #5a4318;
}
.cr-section--bone aside .cr-card__body ul li a:hover {
  color: var(--clr-ink);
}

/* ==========================================================================
   QA fix (pass 2) — privacy-policy sidebar contact link contrast
   The previous tone still measured below AA on the bone-warm card. Use a
   much darker brown that clears 4.5:1 on that surface. Scoped to the sidebar
   card so the article copy is unaffected.
   ========================================================================== */
.cr-section--bone aside .cr-card__body ul li a {
  color: #2b1e06;
}
.cr-section--bone aside .cr-card__body ul li a:hover {
  color: #101418;
}

/* ==========================================================================
   QA fix — thank-you page dark-section display copy contrast
   A .cr-display paragraph inside a dark (.cr-section--dark) block was
   inheriting the light-surface ink colour (#171b20) and disappeared against
   the #101418 background. Headings are already recoloured for dark sections;
   the .cr-display utility needs the same treatment.
   ========================================================================== */
.cr-section--dark .cr-display,
.cr-section--sea .cr-display { color: var(--clr-text-on-dark); }

/* Header mark stays compact; the footer logo keeps its own size. */
header .navbar-brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Hero carousel must span the section. As a flex item it otherwise
   shrinks to the Bootstrap container (540px from the sm breakpoint),
   which leaves a blank strip on the right. */
.cr-hero > .carousel {
  width: 100%;
  max-width: 100%;
  flex: 1 0 100%;
}