/* ==========================================================================
   Karoo Animal Art Studio — global stylesheet

   Design values are taken from the original site's Elementor kit:
     palette      #4A210D / #2A1004 / #CFBE9D / #030406 / #554C43
     body         Background-texture.jpg, repeat-y, sand text at 15px
     headings     Philosopher 700, UPPERCASE — 48 / 36 / 23px
     buttons      white ground, brown text; inverts to near-black on hover
     container    1140px (1024 tablet, 767 mobile)

   Sections: 1 Tokens · 2 Reset · 3 Typography · 4 Layout · 5 Buttons
             6 Header · 7 Hero · 8 Content blocks · 9 Gallery · 10 FAQ
             11 Form · 12 Footer · 13 Utilities · 14 Motion
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  /* Brand palette */
  --c-brown:      #4a210d;
  --c-brown-deep: #2a1004;
  --c-sand:       #cfbe9d;
  --c-accent:     #554c43;
  --c-ink:        #030406;
  --c-white:      #ffffff;

  /* The signature brown gradient — hero card, footer, dark panels */
  --g-brown: linear-gradient(180deg, var(--c-brown) 0%, var(--c-brown-deep) 100%);

  /* Typography */
  --f-display: "Philosopher", "Georgia", serif;
  --f-body:    "Poppins", "Helvetica Neue", Arial, sans-serif;

  --fs-h1:    48px;
  --fs-h2:    36px;
  --fs-h3:    23px;
  --fs-h4:    26px;
  --fs-body:  15px;

  /* Spacing & shape */
  --space-section: 80px;
  --gutter:        20px;
  --maxw:          1140px;
  --radius:        5px;
  --shadow-card:   0 0 10px 0 rgba(0, 0, 0, .5);
  --shadow-panel:  0 0 10px 5px rgba(0, 0, 0, .28);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 1024px) {
  :root {
    --fs-h1: 34px;
    --fs-h2: 26px;
    --fs-h3: 18px;
    --maxw: 1024px;
    --space-section: 60px;
  }
}
@media (max-width: 767px) {
  :root {
    --maxw: 767px;
    --fs-h4: 15px;
  }
}

/* 2. Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* The textured ground the whole site sits on */
  background: var(--c-ink) url("../img/Background-texture.jpg") top center / contain repeat-y;
  color: var(--c-sand);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--c-white); text-decoration: none; }
a:hover, a:focus-visible { color: var(--c-sand); }

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

:focus-visible {
  outline: 3px solid var(--c-sand);
  outline-offset: 3px;
}

/* 3. Typography ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 .55em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* The lighter display face used for hero sub-titles */
h4 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  letter-spacing: 1px;
  color: var(--c-sand);
}

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

strong { color: var(--c-white); font-weight: 600; }

/* 4. Layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Full-bleed rows — the original runs these edge to edge with 5% padding
   rather than inside the 1140px container. */
.wrap--wide {
  max-width: none;
  padding-inline: 5%;
}

.section { padding-block: var(--space-section); position: relative; }

/* The two decorative ring motifs from the original, at their natural 690px */
.section--circle-right {
  background: url("../img/circle-bg.png") bottom right no-repeat;
}
.section--circle-left {
  background: url("../img/circle-bg-left.png") center left no-repeat;
}
@media (max-width: 767px) {
  .section--circle-right, .section--circle-left { background-image: none; }
}

/* A panel in the house brown gradient */
.section--panel {
  background: var(--g-brown);
  box-shadow: var(--shadow-panel);
}

/* A section laid over a photograph, darkened for legibility */
/* Two-column text + image block */
.split {
  display: grid;
  gap: 40px;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: 50px; }
  /* Image left, text right — without changing DOM order */
  .split--reverse > :first-child { order: 2; }
}

.split__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  object-fit: cover;
}

/* Two interlocking columns: picture then copy on the left, copy then picture
   on the right, so the two photographs sit diagonally opposite each other.
   Stacks to picture / copy / copy / picture on narrow screens. */
.zigzag { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .zigzag { grid-template-columns: 1fr 1fr; gap: 0 6%; }
}

.zigzag__col { display: flex; flex-direction: column; }

.zigzag__media { margin: 0 0 40px; }
/* A picture closing a column is spaced above rather than below */
.zigzag__col > .zigzag__media:last-child { margin: 40px 0 0; }

.zigzag__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 0 31px 0 rgba(0, 0, 0, .74);
}

.text-center { text-align: center; }
.measure-center { max-width: 760px; margin-inline: auto; }

/* 5. Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  text-decoration: none;
  padding: 15px 32px;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-brown);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: var(--c-ink);
  color: var(--c-white);
}

/* Secondary treatment for use on top of a white or sand ground */
/* Two or more buttons sitting side by side, wrapping on narrow screens */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}
.text-center .btn-row { justify-content: center; }

/* 6. Header -------------------------------------------------------------- */
/* Transparent bar sitting on the textured ground, with a soft dark wash */
.header {
  position: relative;
  z-index: 999;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, 0) 100%);
}

.header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
}

/* Oryx mark + wordmark + two-line descriptor */
.header__brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: none;
  color: inherit;
}
.header__brand:hover { color: inherit; }
.header__brand img { width: 62px; height: auto; }

.header__words { display: block; padding-top: 2px; }

.header__name {
  display: block;
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-white);
}

.header__tagline {
  display: block;
  margin: 6px 0 0;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-sand);
}

.nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-block;
  padding: 12px 0;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-sand);
  transition: color .2s var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current="page"] { color: var(--c-white); }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  margin: 5px auto;
  background: var(--c-white);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav__toggle { display: block; }

  .nav__list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--c-ink);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--ease);
  }
  .nav__list[data-open="true"] { max-height: 80vh; overflow-y: auto; }

  .nav__link {
    padding: 14px var(--gutter);
    border-top: 1px solid rgba(207, 190, 157, .15);
  }
  .nav__link[aria-current="page"] { background: rgba(207, 190, 157, .08); }
}

@media (max-width: 400px) {
  .header__tagline { display: none; }
}

/* 7. Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  /* Title card hangs off the bottom edge of the photograph */
  align-items: end;
  min-height: 62vh;
  background: var(--c-brown-deep) bottom center / cover no-repeat;
  text-align: center;
  isolation: isolate;
  /* Pull the hero up so the transparent header sits over the image */
  margin-top: -118px;
  padding-top: 178px;
  padding-bottom: 0;
  /* How far the card drops past the photo into the next section */
  --card-overhang: 140px;
}
/* Weighted towards the foot of the photograph. Keyword/percentage positions
   stay inside the box no matter how it is sized; an absolute offset would
   slide the image off the bottom edge and expose the ground behind it. */
.hero--home {
  min-height: 80vh;
  background-position: center bottom;
}

/* Black at the very top, cleared by a third of the way down, so the header
   reads against the photograph. The home hero uses a softer wash. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 31%);
}
.hero--home::after {
  background: linear-gradient(180deg, var(--c-ink) 5%, rgba(3, 4, 6, 0) 50%);
  opacity: .5;
}

@media (max-width: 1024px) {
  .hero {
    min-height: 60vh;
    margin-top: -104px;
    padding-top: 150px;
    --card-overhang: 90px;
  }
  .hero--home { min-height: 60vh; background-position: center; }
}
@media (max-width: 767px) {
  .hero { --card-overhang: 60px; }
}

.hero__inner { position: relative; }

/* The signature raised brown card carrying the page title */
.hero__card {
  display: inline-block;
  padding: 38px 60px;
  margin-bottom: calc(var(--card-overhang) * -1);
  background-image: var(--g-brown);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-align: left;
}
@media (max-width: 1024px) { .hero__card { padding: 30px 45px; } }
@media (max-width: 767px)  { .hero__card { padding: 22px 26px; } }

/* Three stacked lines: small sand, large white, small sand */
.hero__title {
  font-size: var(--fs-h1);
  line-height: 1.06;
  color: var(--c-white);
  margin: 0;
}
.hero__title span { display: block; }

.hero__title-sm {
  font-size: .55em;
  font-weight: 400;
  line-height: 1.25;
  color: var(--c-sand);
}

.hero__title-lg { font-weight: 700; }

/* Inner pages carry a wider title block anchored to the left of the container.
   The strap line sits on a solid foot beneath the gradient, so the two read
   as one card with a two-tone base. */
.hero--page { text-align: left; }

.hero--page .hero__card {
  display: block;
  width: 60%;
  padding: 0;
  background-image: none;
  overflow: hidden;
}
.hero--page .hero__card h1 {
  margin: 0;
  padding: 10% 10% 2%;
  background-image: var(--g-brown);
}

.hero__sub {
  margin: 0;
  padding: 0 10% 10%;
  background: var(--c-brown-deep);
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-sand);
}

@media (max-width: 1024px) { .hero--page .hero__card { width: 75%; } }
@media (max-width: 767px)  { .hero--page .hero__card { width: 100%; } }

/* The section following a hero has to clear the overhanging card */
.hero + .section { padding-top: calc(var(--space-section) + 140px); }
@media (max-width: 1024px) { .hero + .section { padding-top: calc(var(--space-section) + 90px); } }
@media (max-width: 767px)  { .hero + .section { padding-top: calc(var(--space-section) + 60px); } }

/* 8. Content blocks ------------------------------------------------------ */
.section__head { margin-bottom: 45px; }
.section__head p { color: var(--c-sand); }

/* Intro block — copy on the left, a cut-out mount rising out of the hero
   photograph on the right, with the ring motif behind it. */
.section--intro { position: relative; }

.intro { display: grid; gap: 40px; }

.intro__figure { margin: 0; }
.intro__figure img {
  width: 100%;
  margin-inline: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .45));
}

@media (min-width: 900px) {
  /* Copy keeps to the left half; the mount is lifted out of flow so it can
     overlap the hero above without pushing the section down. */
  .intro__text { max-width: 46%; }

  .intro__figure {
    position: absolute;
    right: 3%;
    top: calc(-1 * var(--intro-lift, 375px));
    width: min(600px, 34vw);
    margin: 0;
  }
}

@media (min-width: 900px) and (max-width: 1400px) {
  .intro__figure { --intro-lift: 300px; width: min(480px, 32vw); }
}

/* Animal mounts — centred copy between two cut-out mounts that bleed off
   each edge, over a 50% black wash of the body texture. */
.section--mounts {
  position: relative;
  isolation: isolate;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .28);
  padding-block: 100px;
  overflow: hidden;
}
.section--mounts::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-ink);
  opacity: .5;
}

.mounts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1000px) {
  .mounts { grid-template-columns: 1fr minmax(0, 600px) 1fr; gap: 10px; }
}

.mounts__text { text-align: center; }
.mounts__text p { color: var(--c-sand); }

.mounts__figure { margin: 0; }
.mounts__figure img {
  width: 100%;
  margin-inline: auto;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5));
}

@media (min-width: 1000px) {
  .mounts__figure--left  { margin-left: -8%; }
  .mounts__figure--right { margin-right: -6%; }
  .mounts__figure--left img  { max-width: 620px; margin-inline: 0 auto; }
  .mounts__figure--right img { max-width: 460px; margin-inline: auto 0; }
}
@media (max-width: 999px) {
  /* Keep one cut-out for flavour, drop the other so the copy stays legible */
  .mounts__figure--left { display: none; }
  .mounts__figure img { max-width: 320px; }
}

/* Two-column list of mounting options — CSS columns fill top-to-bottom,
   which gives the 1-4 / 5-8 split the original has. */
.list-two {
  columns: 2;
  column-gap: 40px;
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  line-height: 1.95;
  color: var(--c-white);
  list-style: none;
  margin: 30px 0 40px;
  padding: 0;
}
.list-two a { color: var(--c-white); }
.list-two a:hover, .list-two a:focus-visible { color: var(--c-sand); }
@media (max-width: 480px) { .list-two { columns: 1; } }

/* Cut-out artwork inside a split — no card frame, since the PNG carries its
   own masked edge. It sits on the baseline of the row and, on desktop, runs
   out past the container to the page edge the way the original does. */
.cutout { margin: 0; align-self: end; }
.cutout img { width: 90%; margin-inline: auto; }

@media (min-width: 1025px) {
  .cutout { margin-left: -5%; }
  .cutout img { width: 80%; margin-inline: 0 auto; }
}

/* Simple feature list with sand markers */
.ticks { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-sand);
}

/* 9. Gallery ------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery__item { margin: 0; }

.gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--c-brown-deep);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
}
.gallery__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.gallery__btn:hover img, .gallery__btn:focus-visible img { transform: scale(1.07); opacity: .85; }

/* Collapsed state — JS reveals the rest via the "Show all" button */
.gallery[data-collapsed="true"] .gallery__item[data-extra="true"] { display: none; }

.gallery__more { margin-top: 25px; text-align: center; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 30px;
  background: rgba(3, 4, 6, .95);
}
.lightbox.is-open { display: grid; }

.lightbox__img {
  max-width: min(100%, 1100px);
  max-height: 82vh;
  width: auto;
  border-radius: var(--radius);
  object-fit: contain;
}

.lightbox__caption {
  margin-top: 15px;
  text-align: center;
  color: var(--c-sand);
  font-size: 14px;
}

.lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  color: var(--c-sand);
  background: rgba(74, 33, 13, .75);
  border: 1px solid rgba(207, 190, 157, .3);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.lightbox__btn:hover { background: var(--c-brown); }
.lightbox__btn--prev  { left: 20px; }
.lightbox__btn--next  { right: 20px; }
.lightbox__btn--close { top: 20px; right: 20px; transform: none; }

/* 10. FAQ accordion ------------------------------------------------------ */
.faq { max-width: 860px; margin-inline: auto; }

.faq__item { border-bottom: 1px solid rgba(207, 190, 157, .25); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-white);
  background: none;
  border: 0;
  cursor: pointer;
}
.faq__q:hover { color: var(--c-sand); }

.faq__icon {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: .35em;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--c-sand);
  transition: transform .3s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }

/* Height animated by JS setting max-height */
.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s var(--ease);
}
.faq__a > div { padding-bottom: 25px; }

/* 11. Form --------------------------------------------------------------- */
.form-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.field--full { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--c-sand);
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 15px;
  background: var(--c-brown-deep);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--c-sand);
  transition: border-color .2s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(207, 190, 157, .5); }
.field input:focus, .field textarea:focus {
  border-color: var(--c-sand);
  outline: none;
}
.field textarea { min-height: 150px; resize: vertical; }

/* Honeypot — hidden from people, visible to naive bots */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  display: none;
}
.form__status.is-visible { display: block; }
.form__status.is-success { background: rgba(207, 190, 157, .15); border: 1px solid var(--c-sand); }
.form__status.is-error   { background: rgba(180, 60, 40, .2);   border: 1px solid #d97a63; }

.field__error {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #f0b3a3;
  min-height: 1.2em;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #d97a63; }

/* 12. Footer ------------------------------------------------------------- */
.footer {
  background-image: var(--g-brown);
  box-shadow: var(--shadow-panel);
  color: var(--c-sand);
  padding-block: 60px 0;
  font-size: 14px;
}

.footer a { color: var(--c-sand); }
.footer a:hover, .footer a:focus-visible { color: var(--c-white); }

.footer__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; } }

.footer h2 {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: 20px;
}

.footer__logo img { width: 120px; margin-bottom: 18px; }
.footer__tagline {
  font-family: var(--f-display);
  font-size: 17px;
  color: var(--c-sand);
}

.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 8px; }

.footer address { font-style: normal; }

.footer__socials { display: flex; gap: 10px; margin-top: 22px; }
.footer__socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(207, 190, 157, .35);
  border-radius: 50%;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.footer__socials a:hover { background: var(--c-brown-deep); border-color: var(--c-sand); }
.footer__socials svg { width: 18px; height: 18px; fill: currentColor; }

.footer__wessa { margin-top: 22px; }
.footer__wessa img { width: 90px; opacity: .9; }

.footer__bar {
  margin-top: 45px;
  padding-block: 18px;
  border-top: 1px solid rgba(207, 190, 157, .2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 25px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(207, 190, 157, .75);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 1100;
  padding: 14px 20px;
  background: var(--c-white);
  color: var(--c-brown);
  font-weight: 600;
}
.skip-link:focus { left: 16px; top: 16px; }

/* 13. Utilities ---------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.map-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* 14. Motion ------------------------------------------------------------- */
/* Elements fade in as they enter the viewport (toggled by IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}