@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  --sk-deep: #16262a;
  --sk-deep-soft: #22383f;
  --sk-ochre: #c8612f;
  --sk-ochre-deep: #a54b22;
  --sk-ochre-darker: #8f3f1a;
  --sk-gold: #e2a25a;
  --sk-sand: #f5efe5;
  --sk-sand-deep: #ece2d1;
  --sk-cream: #fbf7f0;
  --sk-ink: #1a2023;
  --sk-ink-soft: #455154;
  --sk-on-dark: #f7f2e9;
  --sk-on-dark-soft: rgba(247, 242, 233, 0.75);
  --sk-line: rgba(22, 38, 42, 0.12);
  --sk-line-strong: rgba(22, 38, 42, 0.22);
  --sk-radius-sm: 12px;
  --sk-radius: 20px;
  --sk-radius-lg: 32px;
  --sk-shadow: 0 24px 60px -28px rgba(22, 38, 42, 0.45);
  --sk-shadow-soft: 0 12px 32px -18px rgba(22, 38, 42, 0.35);
  --sk-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sk-font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sk-section-y: clamp(64px, 9vw, 128px);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sk-font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--sk-ink);
  background-color: var(--sk-sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--sk-ochre-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--sk-ochre-darker);
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  font-family: var(--sk-font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--sk-deep);
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2.3rem, 5vw, 4.1rem);
}

h2 {
  font-size: clamp(1.85rem, 3.5vw, 2.85rem);
}

h3 {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
}

p {
  margin: 0 0 1rem;
}

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

.sk-section {
  padding-block: var(--sk-section-y);
}

.sk-section--tight {
  padding-block: clamp(40px, 6vw, 76px);
}

.sk-section--dark {
  background-color: var(--sk-deep);
  color: var(--sk-on-dark);
}

.sk-section--dark h1,
.sk-section--dark h2,
.sk-section--dark h3,
.sk-section--dark h4 {
  color: var(--sk-on-dark);
}

.sk-section--dark p {
  color: var(--sk-on-dark-soft);
}

.sk-section--alt {
  background-color: var(--sk-sand-deep);
}

.sk-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sk-ochre-deep);
  margin-bottom: 1rem;
}

.sk-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background-color: var(--sk-ochre);
  display: inline-block;
  border-radius: 2px;
}

.sk-section--dark .sk-kicker {
  color: var(--sk-gold);
}

.sk-section--dark .sk-kicker::before {
  background-color: var(--sk-gold);
}

.sk-lead {
  font-size: 1.12rem;
  color: var(--sk-ink-soft);
  max-width: 60ch;
}

.sk-section--dark .sk-lead {
  color: var(--sk-on-dark-soft);
}

.sk-eyebrow-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--sk-ochre-deep);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.sk-eyebrow-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--sk-line);
}

.sk-btn {
  --sk-btn-bg: var(--sk-ochre-deep);
  --sk-btn-fg: #fff7ee;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-family: var(--sk-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--sk-btn-fg);
  background-color: var(--sk-btn-bg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  box-shadow: var(--sk-shadow-soft);
  text-decoration: none;
}

.sk-btn:hover {
  transform: translateY(-2px);
  background-color: var(--sk-ochre-darker);
  color: var(--sk-btn-fg);
  text-decoration: none;
}

.sk-btn:focus-visible {
  outline: 3px solid rgba(200, 97, 47, 0.45);
  outline-offset: 2px;
}

.sk-btn--ghost {
  --sk-btn-bg: transparent;
  --sk-btn-fg: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.sk-btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.sk-btn--ghost-dark {
  --sk-btn-bg: transparent;
  --sk-btn-fg: var(--sk-deep);
  border-color: var(--sk-line-strong);
  box-shadow: none;
}

.sk-btn--ghost-dark:hover {
  background-color: rgba(22, 38, 42, 0.06);
  color: var(--sk-deep);
}

.sk-btn--light {
  --sk-btn-bg: var(--sk-cream);
  --sk-btn-fg: var(--sk-deep);
}

.sk-btn--light:hover {
  background-color: #ffffff;
  color: var(--sk-deep);
}

.sk-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  padding-block: 1.1rem;
  color: #ffffff;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.sk-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
}

.sk-header__nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.sk-header__link {
  font-weight: 500;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.sk-header__link:hover {
  color: #ffffff;
  text-decoration: none;
}

.sk-header.is-scrolled {
  background-color: rgba(251, 247, 240, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px -22px rgba(22, 38, 42, 0.45);
  padding-block: 0.6rem;
  color: var(--sk-deep);
}

.sk-header.is-scrolled .sk-header__link {
  color: var(--sk-deep);
}

.sk-header.is-scrolled .sk-header__link:hover {
  color: var(--sk-ochre-deep);
}

.sk-header__contact {
  display: none;
  gap: 1.2rem;
  align-items: center;
  font-size: 0.85rem;
}

.sk-header__contact span {
  color: rgba(255, 255, 255, 0.85);
}

.sk-header.is-scrolled .sk-header__contact span {
  color: var(--sk-ink-soft);
}

.sk-header__contact a {
  color: inherit;
}

@media (min-width: 992px) {
  .sk-header__contact {
    display: flex;
  }
}

.sk-hero {
  position: relative;
  min-height: clamp(560px, 88vh, 820px);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--sk-on-dark);
  padding-block: clamp(120px, 18vh, 180px) clamp(80px, 12vh, 140px);
}

.sk-hero > .container {
  position: relative;
  z-index: 2;
}

.sk-hero h1 {
  color: #ffffff;
  max-width: 22ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.sk-hero .sk-lead {
  color: rgba(247, 242, 233, 0.92);
  max-width: 52ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.sk-hero--compact {
  min-height: clamp(380px, 56vh, 560px);
  padding-block: clamp(120px, 16vh, 160px) clamp(56px, 9vh, 96px);
}

.sk-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  margin-top: 2rem;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(247, 242, 233, 0.85);
}

.sk-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sk-band {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--sk-on-dark);
  padding-block: clamp(72px, 12vw, 132px);
}

.sk-band h1,
.sk-band h2,
.sk-band h3 {
  color: #ffffff;
}

.sk-band p {
  color: rgba(247, 242, 233, 0.88);
}

.sk-grid {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.sk-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sk-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sk-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sk-card {
  background-color: var(--sk-cream);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  overflow: hidden;
  box-shadow: var(--sk-shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  color: var(--sk-ink);
}

.sk-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sk-shadow);
}

.sk-card__media {
  aspect-ratio: 4 / 3;
  background-color: var(--sk-sand-deep);
  overflow: hidden;
}

.sk-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.sk-card:hover .sk-card__media img {
  transform: scale(1.05);
}

.sk-card__body {
  padding: 1.5rem 1.4rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
}

.sk-card__meta {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sk-ochre-deep);
  font-weight: 700;
}

.sk-card__title {
  font-size: 1.22rem;
  margin: 0;
}

.sk-card__text {
  color: var(--sk-ink-soft);
  font-size: 0.95rem;
  margin: 0;
}

.sk-card__link {
  margin-top: auto;
  font-weight: 600;
  color: var(--sk-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.sk-card__link:hover {
  color: var(--sk-ochre-deep);
}

.sk-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sk-stat__value {
  font-family: var(--sk-font-display);
  font-size: clamp(2rem, 3.5vw, 2.9rem);
  color: var(--sk-gold);
  font-weight: 600;
  line-height: 1;
}

.sk-stat__label {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sk-on-dark-soft);
}

.sk-quote {
  background-color: var(--sk-cream);
  border-radius: var(--sk-radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--sk-line);
  display: grid;
  gap: 1rem;
  height: 100%;
}

.sk-quote__text {
  font-family: var(--sk-font-display);
  font-size: 1.14rem;
  line-height: 1.5;
  color: var(--sk-deep);
  margin: 0;
}

.sk-quote__author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: 600;
  color: var(--sk-deep);
  font-size: 0.92rem;
}

.sk-quote__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--sk-sand-deep);
  flex-shrink: 0;
}

.sk-quote__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sk-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.sk-checklist li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.sk-checklist i {
  color: var(--sk-ochre-deep);
  font-size: 1rem;
  line-height: 1.6;
  flex-shrink: 0;
}

.sk-section--dark .sk-checklist i {
  color: var(--sk-gold);
}

.sk-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
}

.sk-timeline li {
  position: relative;
  padding-left: 2.9rem;
}

.sk-timeline li::before {
  content: attr(data-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--sk-deep);
  color: var(--sk-cream);
  font-family: var(--sk-font-body);
  font-size: 0.76rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.sk-section--dark .sk-timeline li::before {
  background-color: var(--sk-gold);
  color: var(--sk-deep);
}

.sk-timeline h3 {
  font-size: 1.08rem;
  margin-bottom: 0.35rem;
}

.sk-timeline p {
  color: var(--sk-ink-soft);
  font-size: 0.95rem;
  margin: 0;
}

.sk-section--dark .sk-timeline p {
  color: var(--sk-on-dark-soft);
}

.sk-form .form-control,
.sk-form .form-select {
  border-radius: var(--sk-radius-sm);
  border: 1px solid var(--sk-line-strong);
  padding: 0.85rem 1rem;
  background-color: var(--sk-cream);
  color: var(--sk-ink);
  font-family: var(--sk-font-body);
}

.sk-form .form-control::placeholder {
  color: rgba(69, 81, 84, 0.7);
}

.sk-form .form-control:focus,
.sk-form .form-select:focus {
  border-color: var(--sk-ochre);
  box-shadow: 0 0 0 4px rgba(200, 97, 47, 0.16);
  background-color: #ffffff;
  color: var(--sk-ink);
}

.sk-form label {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
  color: var(--sk-deep);
}

.sk-accordion .accordion-item {
  background-color: var(--sk-cream);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius-sm) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.sk-accordion .accordion-button {
  background-color: var(--sk-cream);
  color: var(--sk-deep);
  font-weight: 600;
  box-shadow: none;
  padding: 1.1rem 1.25rem;
  font-family: var(--sk-font-body);
}

.sk-accordion .accordion-button:not(.collapsed) {
  background-color: var(--sk-sand-deep);
  color: var(--sk-deep);
}

.sk-accordion .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(200, 97, 47, 0.22);
}

.sk-accordion .accordion-body {
  color: var(--sk-ink-soft);
  font-size: 0.96rem;
}

.sk-rule {
  height: 1px;
  background-color: var(--sk-line);
  border: 0;
  margin: 0;
}

.sk-footer {
  background-color: var(--sk-deep);
  color: var(--sk-on-dark);
  padding-block: clamp(56px, 7vw, 88px) 2rem;
}

.sk-footer h3 {
  color: var(--sk-on-dark);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

.sk-footer p,
.sk-footer address {
  color: var(--sk-on-dark-soft);
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.6;
  margin: 0 0 0.6rem;
}

.sk-footer a {
  color: var(--sk-on-dark-soft);
}

.sk-footer a:hover {
  color: var(--sk-gold);
}

.sk-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.sk-footer__list a {
  font-size: 0.92rem;
}

.sk-footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 242, 233, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(247, 242, 233, 0.65);
}

.sk-cookie-panel {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 4vw, 36px);
  transform: translateX(-50%);
  width: min(760px, calc(100% - 32px));
  z-index: 1080;
  background-color: var(--sk-cream);
  border: 1px solid var(--sk-line-strong);
  border-radius: var(--sk-radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: 0 40px 90px -30px rgba(15, 25, 28, 0.55);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  animation: sk-cookie-rise 0.55s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

@media (min-width: 720px) {
  .sk-cookie-panel {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.sk-cookie-body {
  display: grid;
  gap: 0.5rem;
}

.sk-cookie-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sk-ochre-deep);
  font-weight: 700;
  margin: 0;
}

.sk-cookie-title {
  font-family: var(--sk-font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  margin: 0;
  color: var(--sk-deep);
}

.sk-cookie-text {
  font-size: 0.92rem;
  color: var(--sk-ink-soft);
  margin: 0;
  max-width: 54ch;
  line-height: 1.55;
}

.sk-cookie-more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sk-ochre-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  width: fit-content;
}

.sk-cookie-more:hover {
  color: var(--sk-ochre-darker);
}

.sk-cookie-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.sk-cookie-btn {
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
  font-family: var(--sk-font-body);
}

.sk-cookie-btn:focus-visible {
  outline: 3px solid rgba(200, 97, 47, 0.4);
  outline-offset: 2px;
}

.sk-cookie-btn--ghost {
  background-color: transparent;
  border-color: var(--sk-line-strong);
  color: var(--sk-deep);
}

.sk-cookie-btn--ghost:hover {
  background-color: rgba(22, 38, 42, 0.06);
}

.sk-cookie-btn--solid {
  background-color: var(--sk-ochre-deep);
  color: #fff8ef;
}

.sk-cookie-btn--solid:hover {
  background-color: var(--sk-ochre-darker);
  transform: translateY(-1px);
}

.sk-cookie-panel.is-dismissed {
  animation: sk-cookie-fall 0.34s ease forwards;
}

[data-cookie-banner][hidden] {
  display: none !important;
}

@keyframes sk-cookie-rise {
  from {
    opacity: 0;
    transform: translate(-50%, 24px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes sk-cookie-fall {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, 24px);
  }
}

.sk-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: rgba(200, 97, 47, 0.14);
  color: var(--sk-ochre-deep);
}

.sk-section--dark .sk-badge {
  background-color: rgba(226, 162, 90, 0.18);
  color: var(--sk-gold);
}

.sk-gallery-item figcaption {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: var(--sk-ink-soft);
}

.sk-section--dark .sk-gallery-item figcaption {
  color: var(--sk-on-dark-soft);
}

.sk-gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--sk-radius-sm);
  background-color: var(--sk-sand-deep);
}

.sk-pagination-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.sk-pagination-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--sk-line-strong);
}

.sk-pagination-dots span.is-active {
  width: 26px;
  border-radius: 6px;
  background-color: var(--sk-ochre-deep);
}

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

@media (max-width: 767.98px) {
  .sk-hero {
    min-height: 74vh;
  }

  .sk-header__nav {
    gap: 1rem;
  }

  .sk-header__contact span {
    display: none;
  }
}
/* --- Fix batch: header contrast, mobile header overlap, hero kicker contrast --- */

/* Give the top bar a solid dark backdrop so the white header text/buttons
   always sit on a dark surface (readable contrast), not on the light page. */
.sk-header {
  background-color: #16262a;
  color: #ffffff;
}

.sk-header .sk-header__link,
.sk-header .sk-header__contact span,
.sk-header .navbar-brand,
.sk-header .navbar-toggler {
  color: #ffffff;
}

.sk-header .sk-header__contact span {
  color: rgba(255, 255, 255, 0.92);
}

.sk-header .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}

/* Keep the existing light "scrolled" state readable too. */
.sk-header.is-scrolled {
  background-color: rgba(251, 247, 240, 0.98);
}

/* Below the desktop breakpoint the bar sits in normal flow, so it can never
   cover the top of the hero section on small screens. */
@media (max-width: 991.98px) {
  .sk-header {
    position: relative;
    inset: auto;
    padding-block: 0.85rem;
  }
}

/* Kicker label inside the dark photo hero was low contrast (ochre on black). */
.sk-hero .sk-kicker {
  color: #e2a25a;
}

.sk-hero .sk-kicker::before {
  background-color: #e2a25a;
}

/* === Fix pack: opaque header, header offset, hero kicker contrast === */

/* The header is fixed over the page; give it an opaque dark backdrop so the
   white header links always sit on a dark surface (previously it was
   transparent and white text fell onto the light page background). */
.sk-header {
  background-color: var(--sk-deep);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.6);
}

.sk-header.is-scrolled {
  background-color: rgba(251, 247, 240, 0.97);
  color: var(--sk-deep);
}

/* Header text/links: readable in both header states. */
.sk-header .sk-header__contact span,
.sk-header .sk-header__link {
  color: rgba(255, 255, 255, 0.92);
}

.sk-header.is-scrolled .sk-header__contact span,
.sk-header.is-scrolled .sk-header__link {
  color: var(--sk-ink-soft);
}

.sk-header .navbar-toggler {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
}

.sk-header.is-scrolled .navbar-toggler {
  color: var(--sk-deep);
  border-color: var(--sk-line-strong);
}

.sk-header .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.92);
}

.sk-header .navbar-nav .nav-link:hover,
.sk-header .navbar-nav .nav-link:focus {
  color: #ffffff;
}

.sk-header.is-scrolled .navbar-nav .nav-link {
  color: var(--sk-deep);
}

.sk-header.is-scrolled .navbar-nav .nav-link:hover,
.sk-header.is-scrolled .navbar-nav .nav-link:focus {
  color: var(--sk-ochre-deep);
}

.sk-header .dropdown-menu .dropdown-item {
  color: var(--sk-deep);
}

/* Keep the fixed header from covering the top of the page/hero.
   --sk-header-offset is measured at runtime; the fallback is a safe height. */
body {
  padding-top: var(--sk-header-offset, 92px);
}

/* The hero previously carried extra top padding to clear a transparent
   header. With the opaque header offset in place the padding can shrink. */
.sk-hero {
  padding-block: clamp(48px, 8vh, 88px) clamp(72px, 11vh, 120px);
}

.sk-hero--compact {
  padding-block: clamp(40px, 6vh, 64px) clamp(48px, 8vh, 84px);
}

/* Kicker text inside the dark photo heroes needs the light gold tone
   instead of the ochre, which was too dark against the photo overlay. */
.sk-hero .sk-kicker {
  color: var(--sk-gold);
}

.sk-hero .sk-kicker::before {
  background-color: var(--sk-gold);
}

/* =====================================================================
   QA overrides — blue-mountains-tour-k3 page
   (appended after the base styles so nothing original is altered)
   ===================================================================== */

/* Anchor jumps / scroll-into-view land instantly. The main.js smooth
   anchor handler still animates in-page link clicks, so UX is unchanged,
   but automated clicks no longer race an in-flight smooth scroll. */
html {
  scroll-behavior: auto;
}

/* Fixed header: solid cream bar with dark text so the phone, email,
   address and "Book a tour" button stay readable over the photo hero. */
body.page-blue-mountains .sk-header {
  background-color: rgba(251, 247, 240, 0.97);
  color: var(--sk-deep);
  box-shadow: 0 12px 28px -26px rgba(22, 38, 42, 0.6);
}

body.page-blue-mountains .sk-header__link,
body.page-blue-mountains .sk-header__contact span,
body.page-blue-mountains .sk-header__contact a {
  color: var(--sk-ink-soft);
}

body.page-blue-mountains .sk-header__link:hover {
  color: var(--sk-ochre-deep);
}

body.page-blue-mountains .sk-header .navbar-toggler {
  color: var(--sk-deep);
}

body.page-blue-mountains .sk-header .sk-btn--ghost {
  --sk-btn-fg: var(--sk-deep);
  border-color: rgba(22, 38, 42, 0.38);
  background-color: transparent;
}

body.page-blue-mountains .sk-header .sk-btn--ghost:hover {
  background-color: rgba(22, 38, 42, 0.08);
  color: var(--sk-deep);
}

/* Kicker text sits on dark photo overlays (hero + contact band). */
body.page-blue-mountains .sk-hero .sk-kicker,
body.page-blue-mountains main > section[style*="linear-gradient"] .sk-kicker {
  color: #f8dcb8;
}

body.page-blue-mountains .sk-hero .sk-kicker::before,
body.page-blue-mountains main > section[style*="linear-gradient"] .sk-kicker::before {
  background-color: #f0b276;
}

/* Keep in-page targets clear of the fixed header. */
body.page-blue-mountains main section[id] {
  scroll-margin-top: 130px;
}

/* Mobile: the fixed header no longer covers the top of the hero. */
@media (max-width: 991.98px) {
  body.page-blue-mountains main {
    padding-top: 141px;
  }
}

/* Submit button must not shift under the cursor/pointer on hover. */
body.page-blue-mountains .sk-form .sk-btn:hover {
  transform: none;
}

/* =====================================================================
   QA overrides — cookie-policy page
   The hero on this page has no background photo, so the default
   white-on-photo hero colours left the heading and lead text almost
   invisible against the light sand page background. Switch this hero
   to a light treatment with dark text.
   ===================================================================== */

body.page-cookie-policy .sk-hero {
  background-color: var(--sk-sand-deep);
  color: var(--sk-ink);
}

body.page-cookie-policy .sk-hero h1,
body.page-cookie-policy .sk-hero .display-5 {
  color: var(--sk-deep);
  text-shadow: none;
}

body.page-cookie-policy .sk-hero .sk-lead {
  color: var(--sk-ink-soft);
  text-shadow: none;
}

body.page-cookie-policy .sk-hero .sk-lead a {
  color: var(--sk-ochre-darker);
  text-decoration: underline;
}

body.page-cookie-policy .sk-hero .sk-kicker {
  color: var(--sk-ochre-deeper, #8f3f1a);
}

body.page-cookie-policy .sk-hero .sk-kicker::before {
  background-color: var(--sk-ochre-deeper, #8f3f1a);
}

/* =====================================================================
   QA overrides — homepage (index.html)
   Appended after all base styles; nothing original is removed.
   ===================================================================== */

/* The hero slides rely on a photo + dark gradient only. Under the photo
   (or if the image is slow/blocked) the text sat on the light page cream,
   so white headings and the gold kicker lost all contrast. A solid dark
   base colour under the (semi-transparent) gradient keeps every hero
   headline, lead and kicker readable at all times. */
.sk-hero .carousel-inner > .carousel-item > div {
  background-color: #16262a;
}

/* Lighter gold for kickers sitting on the dark photo overlay (the base
   ochre #c8612f and even --sk-gold are too weak on a photo). */
.sk-hero .sk-kicker,
.sk-hero .sk-kicker::before {
  color: #f8dcb8;
}

.sk-hero .sk-kicker::before {
  background-color: #f0b276;
}

/* Submit buttons inside .sk-form must not shift on hover: the transform
   lift made the button move under the pointer (unstable click target). */
.sk-form .sk-btn {
  transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.sk-form .sk-btn:hover,
.sk-form .sk-btn:focus,
.sk-form .sk-btn:active {
  transform: none;
}

/* =====================================================================
   QA overrides — terms and conditions page
   This hero has no background photo, so the default white-on-photo hero
   colours left the heading, lead and kicker almost invisible against the
   light sand page background. Switch this hero to a light treatment with
   dark, high-contrast text.
   ===================================================================== */

body.page-terms .sk-hero {
  background-color: var(--sk-sand-deep);
  color: var(--sk-ink);
}

body.page-terms .sk-hero h1,
body.page-terms .sk-hero .display-5 {
  color: var(--sk-deep);
  text-shadow: none;
}

body.page-terms .sk-hero .sk-lead {
  color: var(--sk-ink-soft);
  text-shadow: none;
}

body.page-terms .sk-hero .sk-lead a {
  color: var(--sk-ochre-darker);
  text-decoration: underline;
}

body.page-terms .sk-hero .sk-kicker {
  color: var(--sk-ochre-darker);
}

body.page-terms .sk-hero .sk-kicker::before {
  background-color: var(--sk-ochre-darker);
}

/* =====================================================================
   Layout fix — homepage hero slider
   The Bootstrap carousel inside .sk-hero had collapsed to ~68% of the
   section width, so the hero content container started at x=0 and the
   photo/gradient only covered part of the viewport. Restore full-width
   slider so the inner .container regains its centred desktop inset.
   Mobile layout is untouched (it already spanned the full width).
   ===================================================================== */
.sk-hero > .carousel {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
  margin-inline: 0;
}

.sk-hero > .carousel .carousel-inner {
  width: 100%;
}

/* =====================================================================
   Layout fix — homepage hero clipped by the cookie consent panel
   On small screens the cookie panel is a tall fixed overlay pinned to the
   bottom of the viewport, and it covered the hero headline and lead text.
   Give the first hero enough bottom clearance so the whole slide (kicker,
   heading, lead and buttons) sits above the panel, and cap the panel
   height so that clearance stays reasonable. Mobile layout/stacking of
   the hero itself is unchanged.
   ===================================================================== */
@media (max-width: 991.98px) {
  .sk-hero {
    padding-bottom: calc(clamp(240px, 46vh, 380px) + env(safe-area-inset-bottom, 0px));
  }

  .sk-hero .carousel-inner > .carousel-item > div {
    min-height: auto !important;
  }

  .sk-cookie-panel {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .sk-cookie-text {
    display: none;
  }

  .sk-cookie-more {
    margin-top: 0.25rem;
  }
}

/* =====================================================================
   Layout fix — homepage "Why we keep it small" dark photo band
   The section carries a photo + gradient background-image inline but no
   background-size/position, so the image rendered at intrinsic size and
   the card in the right column showed as a huge, mis-positioned block of
   white cream on top of the dark photo. Make the background cover the
   section properly (as every other photo band on the site does) and give
   the quote card its normal, content-sized presentation.
   Scoped to dark sections that use an inline photo background, so other
   sections are unaffected; mobile stacking is unchanged.
   ===================================================================== */
main > section.sk-section--dark[style*="url("] {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

main > section.sk-section--dark[style*="url("] .sk-card {
  height: auto;
}

main > section.sk-section--dark[style*="url("] .sk-card:hover {
  transform: none;
}

/* =====================================================================
   Layout fix — homepage "Why we keep it small" band on mobile
   The quote card in the right column kept .sk-card's `height: 100%`
   inside the flex column, so in the stacked mobile layout it stretched
   to a full card-sized blank block below the buttons instead of sizing
   to its own text. Let it shrink to content on small screens only.
   ===================================================================== */
@media (max-width: 991.98px) {
  main > section.sk-section--dark[style*="url("] .sk-card {
    height: auto;
    flex: 0 0 auto;
  }

  main > section.sk-section--dark[style*="url("] .sk-card__body {
    flex-grow: 0;
  }
}

/* =====================================================================
   Follow-up — the quote card in that dark photo band still rendered as a
   tall blank cream block in the stacked mobile layout (the card was sized
   by the stretched flex/grid item rather than by its own text). Scope the
   removal of the stretch to the stacked layout only; desktop split layout
   is untouched.
   ===================================================================== */
@media (max-width: 991.98px) {
  main > section.sk-section--dark[style*="url("] .row {
    align-items: flex-start !important;
  }

  main > section.sk-section--dark[style*="url("] .col-lg-6 {
    align-self: flex-start;
    height: auto;
  }
}

/* =====================================================================
   Final pass — homepage "Why we keep it small" band (mobile)
   The quote card sits inside a flex column that is stretched by the row,
   and the card itself keeps `height:100%`, so it still painted as a tall
   empty cream block below the buttons. Force the card (and its wrapper
   column) to be content-sized so the block disappears and the dark photo
   band shrinks to its actual content. Desktop split layout untouched.
   ===================================================================== */
@media (max-width: 991.98px) {
  main > section.sk-section--dark[style*="url("] .row > .col-lg-6,
  main > section.sk-section--dark[style*="url("] .row > .col-lg-6 > .sk-card,
  main > section.sk-section--dark[style*="url("] .row > .col-lg-6 .sk-card__body {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 1 auto !important;
  }
}

/* =====================================================================
   Contrast fix — booking/contact band with an inline photo background
   (service pages). The section carries a photo + gradient background but
   no dark section colour class, so headings inherited the near-black
   --sk-deep, the lead/paragraph text the dark grey --sk-ink-soft, the
   contact list the body ink, and the email link the dark ochre — all of
   it nearly invisible on the busy photo. Keep the photo and the split
   layout, but flip the band's text to the light "on dark" palette and
   lighten the email link so everything stays readable.
   Mobile layout is untouched (only colours change).
   ===================================================================== */
main > section.sk-section[style*="linear-gradient"] {
  color: var(--sk-on-dark);
}

main > section.sk-section[style*="linear-gradient"] h1,
main > section.sk-section[style*="linear-gradient"] h2,
main > section.sk-section[style*="linear-gradient"] h3,
main > section.sk-section[style*="linear-gradient"] h4 {
  color: #ffffff;
}

main > section.sk-section[style*="linear-gradient"] p,
main > section.sk-section[style*="linear-gradient"] .sk-lead,
main > section.sk-section[style*="linear-gradient"] ul,
main > section.sk-section[style*="linear-gradient"] li,
main > section.sk-section[style*="linear-gradient"] li span {
  color: rgba(247, 242, 233, 0.92);
}

main > section.sk-section[style*="linear-gradient"] .sk-kicker {
  color: #f8dcb8;
}

main > section.sk-section[style*="linear-gradient"] .sk-kicker::before {
  background-color: #f0b276;
}

/* Contact details inside the band: links need a light tone, the icons a
   warm accent, and the form labels must not fall back to dark ink. */
main > section.sk-section[style*="linear-gradient"] a,
main > section.sk-section[style*="linear-gradient"] a:hover {
  color: #ffe6c9;
}

main > section.sk-section[style*="linear-gradient"] li i {
  color: #f0b276;
}

main > section.sk-section[style*="linear-gradient"] .sk-form label {
  color: #ffffff;
}

/* =====================================================================
   Contrast fix — hero style photo bands (service/blog pages)
   Sections such as the booking band ("Want a seat on a specific date?")
   carry a photo + gradient background inline but no dark section class.
   The .sk-hero base styling does not apply to them, so the last two
   .sk-hero .sk-kicker rules above leak onto their kicker through
   inheritance and produce an invalid declaration. Repaint the kicker
   label and its dash with the light gold used on the other dark photo
   bands so the small uppercase text stays legible. Colours only —
   layout, mobile stacking and the left-aligned text are untouched.
   ===================================================================== */
main > section.sk-section[style*="linear-gradient"] .sk-kicker {
  color: #f8dcb8;
}

main > section.sk-section[style*="linear-gradient"] .sk-kicker::before {
  background-color: #f0b276;
}

/* =====================================================================
   Layout fix — pricing card whitespace on service pages (mobile)
   On narrow screens the pricing columns are stacked, but they keep the
   `align-items-stretch` row behaviour plus the card's `height: 100%` /
   flex-grow body, so each card stretches to the height of the tallest
   block in the row. Inside the stretched card body the checklist used
   Bootstrap's `.mt-3` (plus the body's 0.75rem gap) and had nothing
   pushing it, which left a large vertical blank band between the price
   text and the checklist. Scope the fix to the stacked layout only:
   let the columns/cards size to their own content, and stop the card
   body from absorbing the extra height.
   Desktop three-column layout and left-aligned text are untouched.
   ===================================================================== */
@media (max-width: 991.98px) {
  body.page-blue-mountains #pricing .row.align-items-stretch,
  .page-blue-mountains #pricing .row.align-items-stretch {
    align-items: flex-start !important;
  }

  #pricing .row.align-items-stretch > [class*="col-"] {
    align-self: flex-start;
    height: auto;
  }

  #pricing .row.align-items-stretch > [class*="col-"] > .sk-card {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 1 auto !important;
  }

  #pricing .row.align-items-stretch > [class*="col-"] > .sk-card > .sk-card__body {
    flex-grow: 0;
    min-height: 0;
  }
}