:root {
  --ink: #12100f;
  --ink-2: #1c1916;
  --ink-3: #2a2521;
  --ivory: #f8f3eb;
  --sand: #e7dccb;
  --sand-deep: #d6c7b0;
  --clay: #c06b3e;
  --clay-deep: #96482a;
  --gold: #d9b57c;
  --paper: #fffdf9;
  --line: rgba(18, 16, 15, 0.14);
  --line-light: rgba(248, 243, 235, 0.22);
  --shadow-soft: 0 26px 64px -34px rgba(18, 16, 15, 0.6);
  --shadow-lift: 0 18px 40px -22px rgba(18, 16, 15, 0.5);
  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --font-display: Georgia, "Times New Roman", "Playfair Display", serif;
  --font-body: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --container: 1180px;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: inherit;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
}

h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}

p {
  margin-bottom: 1.1rem;
}

a {
  color: var(--clay-deep);
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}

a:hover,
a:focus {
  color: var(--ink);
}

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

.site-shell {
  width: 100%;
  overflow-x: hidden;
}

.container-wide {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  position: relative;
  padding: clamp(64px, 8vw, 118px) 0;
}

.section--tight {
  padding: clamp(48px, 5vw, 78px) 0;
}

.section--sand {
  background-color: var(--sand);
  color: var(--ink);
}

.section--paper {
  background-color: var(--paper);
  color: var(--ink);
}

.section--dark {
  background-color: var(--ink);
  color: var(--ivory);
}

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

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

.section--dark a:hover,
.section--dark a:focus {
  color: var(--ivory);
}

.section--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ivory);
}

.section--photo h1,
.section--photo h2,
.section--photo h3 {
  color: var(--ivory);
}

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay-deep);
  margin-bottom: 18px;
}

.section--dark .section__eyebrow,
.section--photo .section__eyebrow {
  color: var(--gold);
}

.section__eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background-color: currentColor;
  display: inline-block;
}

.section__lead {
  max-width: 62ch;
  font-size: 1.06rem;
  color: rgba(18, 16, 15, 0.78);
}

.section--dark .section__lead,
.section--photo .section__lead {
  color: rgba(248, 243, 235, 0.86);
}

.accent-rule {
  width: 72px;
  height: 3px;
  background-color: var(--clay);
  border: 0;
  margin: 26px 0;
  opacity: 1;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(18, 16, 15, 0.94);
  border-bottom: 1px solid var(--line-light);
  transition: padding 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
  padding: 14px 0;
}

.site-header.is-condensed {
  padding: 6px 0;
  background-color: rgba(18, 16, 15, 0.99);
}

.site-header .navbar-brand img {
  display: block;
}

.site-header .navbar-nav .nav-link {
  color: rgba(248, 243, 235, 0.86);
  font-size: 0.94rem;
  letter-spacing: 0.04em;
  padding: 10px 14px;
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus {
  color: var(--gold);
}

.site-header .navbar-toggler {
  border: 1px solid var(--line-light);
  color: var(--ivory);
  padding: 8px 12px;
}

.site-header .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(217, 181, 124, 0.4);
}

.header-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 0.84rem;
  color: rgba(248, 243, 235, 0.82);
}

.header-contact span,
.header-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(248, 243, 235, 0.82);
}

.header-contact a:hover,
.header-contact a:focus {
  color: var(--gold);
}

.hero-slider {
  position: relative;
  min-height: clamp(520px, 82vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease-out), visibility 0.9s var(--ease-out);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-slide__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 0 24px;
  color: var(--ivory);
}

.hero-slide__kicker {
  display: inline-block;
  font-size: 0.76rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.hero-slide__title {
  font-size: clamp(2.3rem, 5.4vw, 4.2rem);
  color: var(--ivory);
  margin-bottom: 20px;
}

.hero-slide__text {
  font-size: 1.08rem;
  color: rgba(248, 243, 235, 0.88);
  max-width: 52ch;
}

.hero-dots {
  position: absolute;
  left: 24px;
  bottom: 34px;
  z-index: 3;
  display: flex;
  gap: 12px;
}

.hero-dot {
  width: 40px;
  height: 4px;
  border: 0;
  padding: 0;
  background-color: rgba(248, 243, 235, 0.34);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out);
}

.hero-dot.is-active {
  background-color: var(--gold);
}

.btn-studio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  background-color: var(--clay);
  color: #17120e;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}

.btn-studio:hover,
.btn-studio:focus {
  background-color: var(--gold);
  color: #17120e;
  transform: translateY(-2px);
}

.btn-studio--ghost {
  background-color: transparent;
  border-color: rgba(248, 243, 235, 0.5);
  color: var(--ivory);
}

.btn-studio--ghost:hover,
.btn-studio--ghost:focus {
  background-color: var(--ivory);
  border-color: var(--ivory);
  color: var(--ink);
}

.btn-studio--dark {
  background-color: var(--ink);
  color: var(--ivory);
}

.btn-studio--dark:hover,
.btn-studio--dark:focus {
  background-color: var(--clay-deep);
  color: var(--ivory);
}

.frame-card {
  position: relative;
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

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

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

.frame-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

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

.frame-card__body {
  padding: 26px 26px 30px;
}

.frame-card__tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin-bottom: 12px;
}

.frame-card__title {
  margin-bottom: 12px;
}

.frame-card__text {
  color: rgba(18, 16, 15, 0.76);
  margin-bottom: 18px;
}

.frame-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--clay-deep);
}

.frame-card__link:hover,
.frame-card__link:focus {
  color: var(--ink);
}

.stat-block {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.section--dark .stat-block {
  border-top-color: var(--line-light);
}

.stat-block__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  display: block;
  line-height: 1.1;
}

.stat-block__label {
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(18, 16, 15, 0.66);
}

.section--dark .stat-block__label {
  color: rgba(248, 243, 235, 0.72);
}

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

.step-item {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px dashed var(--line);
}

.section--dark .step-item {
  border-bottom-color: var(--line-light);
}

.step-item__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--clay-deep);
}

.section--dark .step-item__num {
  color: var(--gold);
}

.step-item__title {
  margin-bottom: 6px;
}

.step-item__text {
  margin: 0;
  color: rgba(18, 16, 15, 0.76);
}

.section--dark .step-item__text {
  color: rgba(248, 243, 235, 0.78);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--ink-3);
  aspect-ratio: 1 / 1;
}

.gallery-item--wide {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  font-size: 0.9rem;
  color: var(--ivory);
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78));
}

.team-card {
  text-align: left;
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--sand-deep);
  margin-bottom: 18px;
}

.team-card__name {
  margin-bottom: 4px;
}

.team-card__role {
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay-deep);
}

.quote-card {
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  height: 100%;
}

.quote-card__stars {
  color: var(--clay);
  margin-bottom: 14px;
}

.quote-card__text {
  font-family: var(--font-display);
  font-size: 1.14rem;
  line-height: 1.6;
  margin-bottom: 22px;
}

.quote-card__person {
  display: flex;
  align-items: center;
  gap: 14px;
}

.quote-card__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--sand-deep);
}

.quote-card__meta {
  font-size: 0.88rem;
  color: rgba(18, 16, 15, 0.7);
}

.price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--paper);
  padding: 32px;
  height: 100%;
}

.price-card--featured {
  border-color: var(--clay);
  box-shadow: var(--shadow-soft);
}

.price-card__amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  display: block;
  margin: 12px 0 18px;
}

.price-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}

.price-card__list li {
  padding: 9px 0 9px 28px;
  position: relative;
  border-bottom: 1px dashed var(--line);
  color: rgba(18, 16, 15, 0.8);
}

.price-card__list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.72rem;
  color: var(--clay-deep);
  position: absolute;
  left: 0;
  top: 12px;
}

.accordion-studio .accordion-item {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.section--dark .accordion-studio .accordion-item {
  border-bottom-color: var(--line-light);
}

.accordion-studio .accordion-button {
  background-color: transparent;
  color: inherit;
  font-family: var(--font-display);
  font-size: 1.1rem;
  padding: 22px 0;
  box-shadow: none;
}

.accordion-studio .accordion-button:not(.collapsed) {
  color: var(--clay-deep);
  background-color: transparent;
  box-shadow: none;
}

.section--dark .accordion-studio .accordion-button:not(.collapsed) {
  color: var(--gold);
}

.accordion-studio .accordion-button::after {
  margin-left: auto;
}

.accordion-studio .accordion-body {
  padding: 0 0 24px;
  color: rgba(18, 16, 15, 0.78);
}

.section--dark .accordion-studio .accordion-body {
  color: rgba(248, 243, 235, 0.8);
}

.form-shell {
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 46px);
  box-shadow: var(--shadow-soft);
}

.form-shell .form-label {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(18, 16, 15, 0.7);
  margin-bottom: 6px;
}

.form-shell .form-control,
.form-shell .form-select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background-color: var(--ivory);
  color: var(--ink);
  padding: 13px 16px;
}

.form-shell .form-control:focus,
.form-shell .form-select:focus {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(192, 107, 62, 0.22);
}

.form-shell .form-control::placeholder {
  color: rgba(18, 16, 15, 0.45);
}

.form-note {
  font-size: 0.84rem;
  color: rgba(18, 16, 15, 0.66);
}

.info-panel {
  border-left: 3px solid var(--clay);
  padding-left: 20px;
  margin-bottom: 26px;
}

.info-panel__label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay-deep);
  display: block;
  margin-bottom: 4px;
}

.map-frame {
  border: 0;
  width: 100%;
  min-height: 380px;
  border-radius: var(--radius-lg);
  filter: grayscale(0.35);
}

.site-footer {
  background-color: var(--ink);
  color: rgba(248, 243, 235, 0.82);
  padding: clamp(56px, 7vw, 92px) 0 32px;
}

.site-footer h4 {
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-weight: 600;
}

.site-footer a {
  color: rgba(248, 243, 235, 0.82);
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--gold);
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.footer-legal {
  border-top: 1px solid var(--line-light);
  margin-top: 48px;
  padding-top: 26px;
  font-size: 0.84rem;
  color: rgba(248, 243, 235, 0.68);
}

.footer-legal p {
  margin-bottom: 6px;
}

.footer-social {
  display: flex;
  gap: 14px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-light);
}

.footer-social a:hover,
.footer-social a:focus {
  border-color: var(--gold);
  color: var(--gold);
}

.cookie-dock {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1080;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.cookie-dock__shell {
  pointer-events: auto;
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "mark body"
    "actions actions";
  gap: 16px 22px;
  background-color: var(--ink-2);
  color: var(--ivory);
  border: 1px solid rgba(217, 181, 124, 0.38);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  box-shadow: 0 32px 70px -30px rgba(0, 0, 0, 0.85);
  position: relative;
  overflow: hidden;
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}

.cookie-dock__shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--gold) 0 18px,
    transparent 18px 34px
  );
}

.cookie-dock__mark {
  grid-area: mark;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background-color: rgba(217, 181, 124, 0.14);
  color: var(--gold);
  font-size: 1.35rem;
}

.cookie-dock__body {
  grid-area: body;
}

.cookie-dock__title {
  font-family: var(--font-display);
  font-size: 1.24rem;
  margin: 0 0 8px;
  color: var(--ivory);
}

.cookie-dock__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(248, 243, 235, 0.84);
}

.cookie-dock__link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-dock__link:hover,
.cookie-dock__link:focus {
  color: var(--ivory);
}

.cookie-dock__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.cookie-dock__btn {
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 12px 26px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out);
}

.cookie-dock__btn--solid {
  background-color: var(--gold);
  color: #17120e;
}

.cookie-dock__btn--solid:hover,
.cookie-dock__btn--solid:focus {
  background-color: var(--ivory);
  color: var(--ink);
}

.cookie-dock__btn--ghost {
  background-color: transparent;
  border-color: rgba(248, 243, 235, 0.45);
  color: var(--ivory);
}

.cookie-dock__btn--ghost:hover,
.cookie-dock__btn--ghost:focus {
  border-color: var(--ivory);
  background-color: rgba(248, 243, 235, 0.12);
  color: var(--ivory);
}

.cookie-dock.is-dismissed {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

.badge-note {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background-color: rgba(192, 107, 62, 0.16);
  color: var(--clay-deep);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.contact-line i {
  color: var(--clay-deep);
  margin-top: 5px;
}

@media (max-width: 991.98px) {
  .hero-slider {
    min-height: 560px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item--wide {
    grid-column: span 2;
  }

  .cookie-dock {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .cookie-dock__shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "mark"
      "body"
      "actions";
    padding: 22px;
  }

  .cookie-dock__actions {
    justify-content: stretch;
  }

  .cookie-dock__btn {
    flex: 1 1 100%;
  }
}

@media (max-width: 575.98px) {
  body {
    font-size: 16px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item--wide {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }

  .step-item {
    grid-template-columns: 48px 1fr;
  }
}
/* Ghost buttons placed on light sections need dark text for sufficient contrast */
.section--paper .btn-studio--ghost,
.section--sand .btn-studio--ghost {
  background-color: transparent;
  border-color: rgba(18, 16, 15, 0.55);
  color: var(--ink);
}

.section--paper .btn-studio--ghost:hover,
.section--paper .btn-studio--ghost:focus,
.section--sand .btn-studio--ghost:hover,
.section--sand .btn-studio--ghost:focus {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

/* Contrast fix: ghost buttons must stay readable on light sections */
.section--paper .btn-studio--ghost,
.section--sand .btn-studio--ghost {
  background-color: transparent;
  border-color: rgba(18, 16, 15, 0.38);
  color: var(--ink);
}

.section--paper .btn-studio--ghost:hover,
.section--paper .btn-studio--ghost:focus,
.section--sand .btn-studio--ghost:hover,
.section--sand .btn-studio--ghost:focus {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

.section--paper .btn-studio--ghost:hover,
.section--sand .btn-studio--ghost:hover {
  color: var(--ivory);
}

/* ---------------------------------------------------------------
   Contrast fixes: solid buttons and links inside light panels
   --------------------------------------------------------------- */

/* Primary (clay) buttons: ivory text on a darker clay base.
   Also beats `.section--dark a { color: var(--gold) }` on photo sections. */
a.btn-studio:not(.btn-studio--ghost):not(.btn-studio--dark),
button.btn-studio:not(.btn-studio--ghost):not(.btn-studio--dark) {
  background-color: var(--clay-deep);
  border-color: var(--clay-deep);
  color: #fffdf9;
}

a.btn-studio:not(.btn-studio--ghost):not(.btn-studio--dark):hover,
a.btn-studio:not(.btn-studio--ghost):not(.btn-studio--dark):focus,
button.btn-studio:not(.btn-studio--ghost):not(.btn-studio--dark):hover,
button.btn-studio:not(.btn-studio--ghost):not(.btn-studio--dark):focus {
  background-color: #6c3317;
  border-color: #6c3317;
  color: #fffdf9;
}

/* Dark buttons keep ivory text even when a parent section styles all links. */
.section--dark a.btn-studio--dark,
.section--photo a.btn-studio--dark,
.section--dark a.btn-studio--dark:hover,
.section--photo a.btn-studio--dark:hover,
.section--dark a.btn-studio--dark:focus,
.section--photo a.btn-studio--dark:focus {
  color: var(--ivory);
}

/* Inline links inside the white form panel must not inherit the gold
   "link on dark section" colour (gold on white is unreadable). */
.form-shell a:not(.btn-studio),
.form-note a:not(.btn-studio) {
  color: var(--clay-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-shell a:not(.btn-studio):hover,
.form-shell a:not(.btn-studio):focus,
.form-note a:not(.btn-studio):hover,
.form-note a:not(.btn-studio):focus {
  color: var(--ink);
}

/* Inline confirmation shown after a successful (intercepted) submission. */
.form-success {
  border: 1px solid rgba(148, 72, 42, 0.35);
  background-color: rgba(192, 107, 62, 0.1);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  color: var(--ink);
}

.form-success__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 8px;
  color: var(--ink);
}

.form-success__text {
  margin: 0;
  color: rgba(18, 16, 15, 0.82);
}

/* ---------------------------------------------------------------
   Hero slider fix: absolutely positioned slides collapsed their own
   content box, so the fixed-height hero clipped/overlapped the text
   columns. Keep text clear of the floating cookie/info card dock by
   letting the content column share the slide's available height and
   giving the title comfortable room, with extra bottom padding on
   desktop so the last heading line and the paragraph are never
   covered by the floating card or the slide dots.
   --------------------------------------------------------------- */
.hero-slide > .container-wide {
  width: 100%;
}

.hero-slide__inner {
  padding-top: 12px;
  padding-bottom: 12px;
}

.hero-slide__title {
  line-height: 1.22;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (min-width: 768px) {
  .hero-slider {
    min-height: clamp(560px, 86vh, 820px);
    align-items: stretch;
  }

  .hero-slide {
    align-items: center;
  }

  .hero-slide > .container-wide {
    display: flex;
    align-items: center;
  }

  .hero-slide__inner {
    padding-bottom: 96px;
  }
}

/* ---------------------------------------------------------------
   Mobile hero fix: on small screens the hero used a fixed
   min-height while the absolutely positioned slides kept their
   content vertically centered, so the heading and paragraph were
   clipped / covered by the floating cookie card at the bottom.
   Let the absolute slides grow with their content (top aligned,
   auto height) and reserve bottom room on the inner column so the
   last line of the heading and the paragraph stay readable above
   the floating card and the slide dots.
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .hero-slider {
    min-height: 0;
  }

  .hero-slider > .hero-slide,
  .hero-slider > .hero-slide.is-active {
    top: 0;
    bottom: auto;
    min-height: clamp(560px, 82vh, 760px);
    align-items: flex-start;
  }

  .hero-slide__inner {
    max-width: none;
    padding-top: 40px;
    padding-bottom: 220px;
  }

  .hero-slide__title {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
    line-height: 1.2;
  }
}

/* Follow-up: keep the section box measurable on mobile by letting the
   active slide sit in normal flow (position: relative) so its height
   defines the hero, while inactive slides stay stacked absolutely. */
@media (max-width: 767.98px) {
  .hero-slider {
    display: block;
    overflow: visible;
  }

  .hero-slide {
    position: absolute;
    inset: 0;
  }

  .hero-slide.is-active {
    position: relative;
    inset: auto;
    display: flex;
    min-height: clamp(560px, 82vh, 760px);
  }

  .hero-dots {
    position: relative;
    left: 0;
    bottom: 0;
    margin: 0 0 24px 24px;
  }
}

/* Follow-up 2: reserve enough bottom room in the mobile hero so the
   full text block (heading + paragraph + button) clears the floating
   cookie card that sits at the bottom of the viewport. */
@media (max-width: 767.98px) {
  .hero-slide.is-active {
    min-height: max(clamp(560px, 82vh, 760px), calc(100svh - 90px));
  }

  .hero-slide__inner {
    padding-bottom: 300px;
  }
}

/* ---------------------------------------------------------------
   Final mobile hero correction: the hero content must grow with its
   own text instead of relying on a fixed viewport-based min-height,
   so the subtitle paragraph is never cut off or sitting under the
   floating cookie card. Keep the aside room at the bottom so the
   paragraph stays fully visible above the dock, but let the slide
   expand whenever the text needs more space (no clipping).
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .hero-slider > .hero-slide.is-active {
    min-height: 0;
    height: auto;
    align-items: stretch;
  }

  .hero-slide.is-active > .container-wide {
    display: flex;
    align-items: flex-start;
    width: 100%;
  }

  .hero-slide.is-active .hero-slide__inner {
    padding-top: 40px;
    padding-bottom: 300px;
    overflow: visible;
  }

  .hero-slide.is-active .hero-slide__text {
    margin-bottom: 0;
  }
}