/* Gel & Noel wedding website v2 */

/* Local editorial fonts keep the wedding typography consistent and fast. */
@import url('fonts.css');

:root {
  --olive: #253719;
  --deep-olive: #10210d;
  --sage: #778566;
  --gold: #b99545;
  --brass: #a9853a;
  --cream: #fff8ed;
  --paper: #fbf4e9;
  --limestone: #e9dac1;
  --ink: #25271f;
  --white: #ffffff;
  --shadow: 0 24px 80px rgba(25, 34, 19, 0.16);
  --fine-line: rgba(185, 149, 69, 0.45);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--deep-olive);
  font-family: "Cormorant Garamond", Georgia, serif;
}

a {
  color: inherit;
}

.browser-bar {
  height: 58px;
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  background: rgba(255,255,255,0.72);
  border-bottom: 1px solid rgba(16, 33, 13, 0.18);
  backdrop-filter: blur(12px);
}

.browser-dots {
  display: flex;
  gap: 8px;
}

.browser-dots span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: block;
}

.browser-dots span:nth-child(1) { background: #e45d4f; }
.browser-dots span:nth-child(2) { background: #e7bd3f; }
.browser-dots span:nth-child(3) { background: #58b763; }

.browser-url {
  justify-self: center;
  width: min(540px, 100%);
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(238, 238, 238, 0.85);
  color: rgba(16, 33, 13, 0.6);
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
}

.browser-icons {
  justify-self: end;
  color: rgba(16, 33, 13, 0.5);
  font-family: Inter, Arial, sans-serif;
  letter-spacing: 10px;
}

/* Language selection page */

.language-body {
  min-height: 100vh;
  overflow-x: hidden;
}

.language-shell {
  min-height: calc(100vh - 58px);
  position: relative;
  display: grid;
  place-items: center;
  padding: 36px 24px 46px;
  background:
    linear-gradient(90deg, rgba(255,248,237,0.97) 0%, rgba(255,248,237,0.94) 45%, rgba(255,248,237,0.78) 70%, rgba(255,248,237,0.52) 100%),
    url("../img/malta-fade.svg");
  background-size: cover;
  background-position: center right;
}

.language-shell::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(330px, 28vw);
  background:
    linear-gradient(90deg, rgba(222, 199, 164, 0.78), rgba(222, 199, 164, 0.30), transparent),
    radial-gradient(circle at 20% 18%, rgba(37, 55, 25, 0.26), transparent 18%),
    radial-gradient(circle at 38% 48%, rgba(37, 55, 25, 0.20), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(185,149,69,0.10));
  border-right: 1px solid rgba(185,149,69,0.18);
}

.language-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 4% 8%, rgba(37,55,25,0.22), transparent 13%),
    radial-gradient(circle at 9% 42%, rgba(37,55,25,0.18), transparent 15%),
    radial-gradient(circle at 97% 90%, rgba(37,55,25,0.18), transparent 16%);
  opacity: 0.82;
}

.language-panel {
  position: relative;
  z-index: 2;
  width: min(820px, 100%);
  text-align: center;
  padding: 20px 24px;
}

.main-logo {
  display: block;
  width: clamp(140px, 13vw, 210px);
  height: auto;
  margin: 0 auto 14px;
}

.language-title {
  margin: 0;
  font-size: clamp(50px, 6.6vw, 88px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--deep-olive);
}

.language-subtitle {
  margin: 10px 0 18px;
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1;
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
}

.tiny-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 12px auto 20px;
  color: var(--gold);
}

.tiny-divider::before,
.tiny-divider::after {
  content: "";
  width: 52px;
  height: 1px;
  background: var(--fine-line);
}

.branch {
  width: 34px;
  height: 16px;
  display: inline-block;
  background:
    url("data:image/svg+xml,%3Csvg width='70' height='34' viewBox='0 0 70 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 26C28 18 43 10 62 5' stroke='%23b99545' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M25 19C21 11 20 7 22 2C28 7 31 12 25 19Z' fill='none' stroke='%23b99545' stroke-width='2'/%3E%3Cpath d='M39 13C37 6 39 2 43 0C48 6 47 11 39 13Z' fill='none' stroke='%23b99545' stroke-width='2'/%3E%3Cpath d='M50 9C51 3 55 1 61 1C62 8 58 11 50 9Z' fill='none' stroke='%23b99545' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.language-buttons {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 20px auto 24px;
}

.language-button {
  display: grid;
  place-items: center;
  min-width: 252px;
  min-height: 92px;
  padding: 16px 32px;
  border: 1px solid var(--gold);
  border-radius: 7px;
  background: rgba(255, 248, 237, 0.72);
  box-shadow: 0 16px 44px rgba(65, 43, 16, 0.08);
  text-decoration: none;
  color: var(--deep-olive);
  font-size: clamp(31px, 3vw, 42px);
  line-height: 1;
  transition: transform 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.language-button:hover,
.language-button:focus {
  transform: translateY(-3px);
  background: rgba(255, 248, 237, 0.96);
  box-shadow: 0 20px 60px rgba(65, 43, 16, 0.15);
}

.language-button .branch {
  margin-bottom: 6px;
}

.language-meta {
  margin-top: 14px;
}

.language-meta .malta {
  margin: 0;
  color: var(--deep-olive);
  font-size: clamp(27px, 2.6vw, 40px);
  font-weight: 500;
}

.language-meta .date {
  margin: 8px 0 0;
  color: var(--brass);
  font-size: clamp(24px, 2.4vw, 34px);
}

.welcome {
  margin-top: 22px;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.15;
}

.welcome p {
  margin: 4px 0;
}

.welcome em {
  color: var(--brass);
}

/* Main wedding pages */

.site-shell {
  background: var(--paper);
}

.top-nav {
  height: 84px;
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  align-items: center;
  padding: 0 7vw;
  background: rgba(255, 250, 242, 0.96);
  border-bottom: 1px solid rgba(185, 149, 69, 0.25);
}

.nav-logo {
  width: 120px;
  display: block;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4vw, 66px);
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.nav-links a {
  text-decoration: none;
  color: var(--ink);
}

.nav-flourish {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  color: var(--gold);
}

.nav-flourish::before {
  content: "";
  width: 1px;
  height: 54px;
  background: var(--fine-line);
}

.nav-flourish .branch {
  width: 78px;
  height: 38px;
}

.home-hero {
  position: relative;
  min-height: 530px;
  display: grid;
  align-items: center;
  padding: 64px 9vw;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8, 12, 7, 0.86) 0%, rgba(8, 12, 7, 0.74) 38%, rgba(8, 12, 7, 0.18) 100%),
    url("../img/hero-placeholder.svg");
  background-size: cover;
  background-position: center;
  color: #fff;
}

.home-hero-content {
  width: min(720px, 100%);
  text-align: center;
}

.home-hero h1 {
  margin: 0;
  font-size: clamp(72px, 10vw, 140px);
  line-height: 0.86;
  font-weight: 400;
  letter-spacing: -0.06em;
}

.home-hero h1 span {
  color: #d3b15b;
}

.hero-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: 28px auto 22px;
  width: min(600px, 100%);
  color: #d3b15b;
}

.hero-line::before,
.hero-line::after {
  content: "";
  height: 1px;
  background: rgba(211,177,91,0.65);
}

.hero-date {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: 0.38em;
  color: #fff;
}

.hero-location {
  margin: 8px 0 18px;
  font-size: clamp(30px, 3.4vw, 48px);
  letter-spacing: 0.28em;
  color: #d3b15b;
  text-transform: uppercase;
}

.hero-tagline {
  margin: 0 auto 24px;
  max-width: 500px;
  font-size: clamp(25px, 2.6vw, 36px);
  line-height: 1.08;
  font-style: italic;
}

.hero-button {
  display: inline-grid;
  place-items: center;
  min-width: 270px;
  height: 58px;
  border: 1px solid #d3b15b;
  color: #f8edda;
  text-decoration: none;
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: rgba(8,12,7,0.18);
}

.cards-strip {
  position: relative;
  padding: 32px 7vw 28px;
  background:
    radial-gradient(circle at 5% 50%, rgba(37,55,25,0.10), transparent 10%),
    radial-gradient(circle at 96% 45%, rgba(37,55,25,0.10), transparent 10%),
    var(--paper);
}

.cards-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1.55fr 1.55fr 1.55fr;
  gap: 28px;
  align-items: stretch;
}

.side-olive {
  display: grid;
  place-items: center;
}

.side-olive::before {
  content: "";
  width: 100px;
  height: 170px;
  background:
    url("data:image/svg+xml,%3Csvg width='150' height='240' viewBox='0 0 150 240' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34 218C61 149 84 83 119 18' stroke='%23657455' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M58 164C30 158 16 143 13 119C42 122 57 136 58 164Z' fill='%23dfe5d2' stroke='%23657455' stroke-width='3'/%3E%3Cpath d='M75 119C47 112 35 96 37 72C64 78 78 94 75 119Z' fill='%23dfe5d2' stroke='%23657455' stroke-width='3'/%3E%3Cpath d='M93 77C68 69 58 54 63 32C88 42 99 56 93 77Z' fill='%23dfe5d2' stroke='%23657455' stroke-width='3'/%3E%3Cpath d='M62 185C91 181 111 167 122 143C94 142 74 157 62 185Z' fill='%23dfe5d2' stroke='%23657455' stroke-width='3'/%3E%3Cpath d='M82 140C111 135 129 120 136 98C110 99 92 114 82 140Z' fill='%23dfe5d2' stroke='%23657455' stroke-width='3'/%3E%3Cpath d='M101 98C126 92 139 77 143 57C120 59 106 74 101 98Z' fill='%23dfe5d2' stroke='%23657455' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.88;
}

.info-card {
  display: grid;
  grid-template-columns: 43% 57%;
  min-height: 210px;
  background: rgba(255,250,242,0.92);
  box-shadow: 0 12px 38px rgba(65, 43, 16, 0.12);
  border: 1px solid rgba(185,149,69,0.16);
}

.info-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 26px;
  text-align: left;
}

.card-icon {
  color: var(--gold);
  font-size: 28px;
  text-align: center;
  margin-bottom: 10px;
}

.info-card h2 {
  margin: 0;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

.info-card p {
  font-size: 20px;
  line-height: 1.25;
  margin: 18px 0 18px;
}

.card-link {
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--deep-olive);
  text-decoration: none;
}

.countdown-band {
  display: grid;
  grid-template-columns: 1.2fr 2.2fr 1.2fr;
  align-items: center;
  gap: 32px;
  padding: 28px 7vw;
  background:
    linear-gradient(rgba(25,39,20,0.96), rgba(25,39,20,0.96)),
    url("../img/hero-placeholder.svg");
  background-size: cover;
  color: #fff8ed;
  border-top: 2px solid rgba(185,149,69,0.7);
}

.count-label {
  text-align: center;
  color: #d3b15b;
  font-family: Inter, Arial, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 13px;
}

.count-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: center;
}

.count-number {
  display: block;
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1;
}

.count-unit {
  display: block;
  margin-top: 8px;
  font-family: Inter, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.until {
  text-align: center;
  color: #d3b15b;
  font-family: Inter, Arial, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 12px;
}

.until em {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 44px;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 4px;
}

.content-section {
  max-width: 920px;
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}

.content-section h2 {
  margin: 0 0 18px;
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 400;
  color: var(--deep-olive);
}

.content-section p {
  font-size: 24px;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 980px) {
  .browser-bar {
    display: none;
  }

  .language-shell {
    min-height: 100vh;
  }

  .top-nav {
    height: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    padding: 22px 24px;
  }

  .nav-flourish {
    display: none;
  }

  .nav-links {
    gap: 18px;
    letter-spacing: 0.12em;
  }

  .home-hero {
    padding: 58px 24px;
    justify-items: center;
  }

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

  .side-olive {
    display: none;
  }

  .countdown-band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .language-shell {
    padding: 26px 18px;
    background:
      linear-gradient(rgba(255,248,237,0.88), rgba(255,248,237,0.88)),
      url("../img/malta-fade.svg");
    background-size: cover;
    background-position: center;
  }

  .language-shell::before {
    width: 36vw;
    opacity: 0.45;
  }

  .language-title {
    font-size: 50px;
  }

  .language-subtitle {
    font-size: 34px;
  }

  .language-button {
    width: 100%;
    min-width: auto;
  }

  .info-card {
    grid-template-columns: 1fr;
  }

  .info-card img {
    height: 180px;
  }

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


/* =========================================================
   V3 LANDING PAGE FIXES
   - remove fake browser bar
   - remove unwanted left divider line
   - improve responsive behaviour
   - replace olive branch icons with proper SVG asset
   ========================================================= */

.browser-bar {
  display: none !important;
}

.language-body {
  min-height: 100vh;
  overflow-x: hidden;
  background: #fff8ed;
}

.language-shell {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(28px, 4vw, 48px) 22px;
  background:
    linear-gradient(90deg, rgba(255,248,237,0.97) 0%, rgba(255,248,237,0.95) 42%, rgba(255,248,237,0.88) 62%, rgba(255,248,237,0.60) 100%),
    url("../img/malta-fade.svg");
  background-size: cover;
  background-position: center right;
}

.language-shell::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(290px, 26vw);
  border-right: none !important;
  background:
    linear-gradient(90deg, rgba(226, 208, 178, 0.68), rgba(226, 208, 178, 0.24), rgba(255,248,237,0)),
    radial-gradient(circle at 20% 18%, rgba(37, 55, 25, 0.18), transparent 17%),
    radial-gradient(circle at 34% 60%, rgba(37, 55, 25, 0.14), transparent 18%);
  opacity: 0.86;
}

.language-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 6% 11%, rgba(37,55,25,0.16), transparent 13%),
    radial-gradient(circle at 10% 42%, rgba(37,55,25,0.12), transparent 15%),
    radial-gradient(circle at 95% 90%, rgba(37,55,25,0.11), transparent 15%);
  opacity: 0.7;
}

.language-panel {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 6px 10px;
}

.main-logo {
  display: block;
  width: clamp(140px, 14vw, 210px);
  height: auto;
  margin: 0 auto 12px;
}

.language-title {
  margin: 0;
  font-size: clamp(44px, 6.2vw, 86px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: #10210d;
}

.language-subtitle {
  margin: 10px 0 12px;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1;
  font-style: italic;
  font-weight: 400;
  color: #a9853a;
}

.tiny-divider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px auto 20px;
}

.tiny-divider span {
  display: inline-block;
  width: 58px;
  height: 1px;
  background: rgba(185,149,69,0.45);
}

.branch-icon {
  display: inline-block;
  height: auto;
}

.branch-small {
  width: 34px;
}

.language-buttons {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 16px auto 24px;
}

.language-button {
  display: grid;
  place-items: center;
  grid-auto-flow: row;
  min-width: 258px;
  min-height: 94px;
  padding: 14px 26px 16px;
  border: 1px solid #b99545;
  border-radius: 7px;
  background: rgba(255, 248, 237, 0.82);
  box-shadow: 0 12px 34px rgba(65, 43, 16, 0.08);
  text-decoration: none;
  color: #10210d;
  font-size: clamp(29px, 3vw, 41px);
  line-height: 1;
  transition: transform 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.language-button:hover,
.language-button:focus {
  transform: translateY(-3px);
  background: rgba(255, 248, 237, 0.96);
  box-shadow: 0 18px 50px rgba(65, 43, 16, 0.12);
}

.button-branch {
  width: 28px;
  margin-bottom: 8px;
}

.language-meta {
  margin-top: 10px;
}

.language-meta .malta {
  margin: 0;
  font-size: clamp(27px, 2.8vw, 40px);
  font-weight: 500;
  color: #10210d;
}

.language-meta .date {
  margin: 8px 0 0;
  font-size: clamp(22px, 2.2vw, 32px);
  color: #a9853a;
}

.welcome {
  margin-top: 18px;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.14;
}

.welcome p {
  margin: 4px 0;
}

.welcome em {
  color: #a9853a;
}

@media (max-width: 900px) {
  .language-shell::before {
    width: 22vw;
    opacity: 0.62;
  }
}

@media (max-width: 680px) {
  .language-shell {
    min-height: 100vh;
    padding: 24px 16px 28px;
    background:
      linear-gradient(rgba(255,248,237,0.91), rgba(255,248,237,0.91)),
      url("../img/malta-fade.svg");
    background-size: cover;
    background-position: center;
  }

  .language-shell::before {
    width: 0;
    background: none;
  }

  .language-shell::after {
    opacity: 0.35;
  }

  .language-panel {
    width: 100%;
    max-width: 560px;
    padding: 0 4px;
  }

  .language-title {
    font-size: clamp(40px, 12vw, 54px);
  }

  .language-subtitle {
    font-size: clamp(28px, 8vw, 38px);
  }

  .tiny-divider span {
    width: 38px;
  }

  .language-buttons {
    gap: 16px;
  }

  .language-button {
    width: 100%;
    min-width: 0;
    min-height: 86px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: clamp(27px, 8vw, 34px);
  }

  .welcome {
    font-size: clamp(21px, 6vw, 26px);
  }
}


/* =========================================================
   V4 LANDING PAGE REFINEMENT
   - fuller olive sprigs
   - no scroll on normal/maximised desktop browsers
   - tighter vertical rhythm
   ========================================================= */

.language-body {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

.language-shell {
  min-height: 100vh;
  height: 100vh;
  padding: clamp(12px, 2vh, 24px) 22px;
  align-items: center;
}

.language-panel {
  width: min(760px, 100%);
  padding: 0 10px;
  transform: translateY(-1vh);
}

.main-logo {
  width: clamp(112px, 10vw, 165px);
  margin-bottom: clamp(6px, 1vh, 10px);
}

.language-title {
  font-size: clamp(42px, 5.2vw, 74px);
  line-height: 0.92;
}

.language-subtitle {
  margin: clamp(5px, 0.8vh, 8px) 0 clamp(6px, 0.9vh, 10px);
  font-size: clamp(27px, 3.4vw, 44px);
}

.tiny-divider {
  gap: 9px;
  margin: clamp(5px, 0.8vh, 8px) auto clamp(10px, 1.4vh, 14px);
}

.tiny-divider span {
  width: clamp(50px, 5.8vw, 82px);
  height: 1px;
  background: rgba(185,149,69,0.46);
}

.branch-small {
  width: 34px;
  height: auto;
}

.language-buttons {
  gap: 24px;
  margin: clamp(9px, 1.2vh, 13px) auto clamp(12px, 1.7vh, 18px);
}

.language-button {
  min-width: clamp(210px, 18vw, 252px);
  min-height: clamp(74px, 9vh, 88px);
  padding: 10px 24px 13px;
  font-size: clamp(28px, 2.5vw, 38px);
}

.button-branch {
  width: 42px;
  margin-bottom: 5px;
}

.language-meta {
  margin-top: clamp(6px, 0.9vh, 10px);
}

.language-meta .malta {
  font-size: clamp(25px, 2.3vw, 34px);
}

.language-meta .date {
  margin-top: 4px;
  font-size: clamp(21px, 2vw, 28px);
}

.welcome {
  margin-top: clamp(10px, 1.4vh, 16px);
  font-size: clamp(21px, 1.8vw, 28px);
}

.welcome p {
  margin: 2px 0;
}

/* Date divider with sprigs on both sides */
.language-meta .date {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.language-meta .date::before,
.language-meta .date::after {
  content: "";
  width: 42px;
  height: 20px;
  display: inline-block;
  background: url("../img/olive-branch.svg") center/contain no-repeat;
}

.language-meta .date::after {
  transform: scaleX(-1);
}

/* On shorter desktop screens, tighten the page a little more */
@media (max-height: 760px) and (min-width: 681px) {
  .language-panel {
    transform: translateY(-2vh) scale(0.92);
    transform-origin: center center;
  }

  .language-shell {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* On very short screens, prevent cropping while still avoiding page scroll */
@media (max-height: 650px) and (min-width: 681px) {
  .language-panel {
    transform: translateY(-1vh) scale(0.84);
  }
}

@media (max-width: 680px) {
  .language-body {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .language-shell {
    min-height: 100svh;
    height: auto;
    padding: 22px 16px;
  }

  .language-panel {
    transform: none;
  }

  .main-logo {
    width: clamp(108px, 34vw, 140px);
  }

  .language-title {
    font-size: clamp(38px, 11vw, 52px);
  }

  .language-subtitle {
    font-size: clamp(27px, 8vw, 36px);
  }

  .language-button {
    min-height: 78px;
  }

  .button-branch {
    width: 40px;
  }

  .language-meta .date {
    gap: 10px;
  }

  .language-meta .date::before,
  .language-meta .date::after {
    width: 32px;
  }
}


/* =========================================================
   V4B LANDING PAGE ONLY
   Base: v4
   Keep olive-branch.svg exactly as it is.
   CSS-only refinements:
   - larger logo
   - smaller title
   - more space between title and Portuguese subtitle
   - continuous divider lines beside olive branch
   - date branches point outwards and sit closer to date
   ========================================================= */

.language-panel {
  width: min(780px, 100%);
}

/* 1) Logo a bit bigger */
.main-logo {
  width: clamp(132px, 12vw, 190px);
  margin-bottom: clamp(8px, 1.2vh, 14px);
}

/* 2) Choose your language a bit smaller */
.language-title {
  font-size: clamp(38px, 4.75vw, 66px);
  line-height: 0.96;
  margin-bottom: 10px;
}

/* 3) More breathing room before Escolha seu idioma */
.language-subtitle {
  margin: 16px 0 14px;
  font-size: clamp(28px, 3.2vw, 42px);
}

/* 4) Dividers: one continuous line each side of the olive branch */
.tiny-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(390px, 70vw);
  margin: 8px auto 16px;
}

.tiny-divider::before,
.tiny-divider::after {
  content: none !important;
}

.tiny-divider span {
  display: block;
  flex: 1 1 auto;
  height: 1px;
  width: auto;
  background: rgba(185,149,69,0.48);
}

.branch-small {
  width: 34px;
  height: auto;
  flex: 0 0 auto;
}

/* Keep the v4 button olive branches exactly as they are */
.button-branch {
  width: 42px;
  margin-bottom: 5px;
}

/* 5) Date branches: point outwards and move a touch closer */
.language-meta .date {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.language-meta .date::before,
.language-meta .date::after {
  content: "";
  width: 34px;
  height: 16px;
  display: inline-block;
  background: url("../img/olive-branch.svg") center/contain no-repeat;
}

/* Left branch points to the left, right branch points to the right */
.language-meta .date::before {
  transform: scaleX(-1);
}

.language-meta .date::after {
  transform: none;
}

@media (max-width: 680px) {
  .main-logo {
    width: clamp(124px, 32vw, 156px);
  }

  .language-title {
    font-size: clamp(36px, 10vw, 48px);
    margin-bottom: 8px;
  }

  .language-subtitle {
    margin: 12px 0 12px;
    font-size: clamp(26px, 7.4vw, 34px);
  }

  .tiny-divider {
    width: min(300px, 78vw);
    gap: 10px;
  }

  .branch-small {
    width: 30px;
  }

  .language-meta .date {
    gap: 8px;
  }

  .language-meta .date::before,
  .language-meta .date::after {
    width: 29px;
    height: 14px;
  }
}


/* =========================================================
   V8 ENGLISH INDEX ONLY
   Target: match reference layout, page ends at countdown,
   fit full page in maximised desktop browser.
   ========================================================= */

/* Desktop: keep the full English homepage inside one viewport */
@media (min-width: 981px) {
  body.site-shell {
    height: 100vh;
    overflow: hidden;
  }

  body.site-shell main {
    height: calc(100vh - 78px);
    display: grid;
    grid-template-rows: 50fr 31fr 12fr;
  }
}

/* Top navigation closer to the reference */
.top-nav {
  height: 78px;
  grid-template-columns: 230px 1fr 230px;
  padding: 0 6vw;
  background: rgba(255, 250, 242, 0.97);
}

.nav-logo {
  width: 118px;
  max-height: 64px;
  object-fit: contain;
  display: block;
}

.nav-links {
  gap: clamp(34px, 4.1vw, 76px);
  font-size: 12px;
  letter-spacing: 0.28em;
  align-items: center;
}

.flag-link {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 20px;
  letter-spacing: 0 !important;
  text-decoration: none;
}

.flag-link img {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 0.5px rgba(16, 33, 13, 0.18);
}

.nav-flourish::before {
  height: 52px;
}

.nav-flourish .branch {
  width: 72px;
  height: 34px;
}

/* Hero section */
.home-hero {
  min-height: 0;
  height: 100%;
  padding: clamp(28px, 3vh, 48px) 9vw;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(8, 12, 7, 0.86) 0%, rgba(8, 12, 7, 0.72) 38%, rgba(8, 12, 7, 0.18) 100%),
    url("../img/hero-placeholder.svg");
  background-size: cover;
  background-position: center;
}

.home-hero-content {
  width: min(640px, 100%);
}

.home-hero h1 {
  font-size: clamp(70px, 8vw, 128px);
  line-height: 0.86;
}

.hero-line {
  width: min(600px, 100%);
  margin: 22px auto 18px;
}

.hero-date {
  font-size: clamp(24px, 2.5vw, 36px);
  letter-spacing: 0.38em;
}

.hero-location {
  margin: 7px 0 14px;
  font-size: clamp(27px, 2.8vw, 42px);
  letter-spacing: 0.28em;
}

.hero-tagline {
  font-size: clamp(23px, 2.2vw, 34px);
  margin-bottom: 20px;
}

.hero-button {
  min-width: 250px;
  height: 52px;
  font-size: 12px;
  letter-spacing: 0.30em;
}

/* Cards section */
.cards-strip {
  height: 100%;
  padding: clamp(18px, 2.2vh, 28px) 6vw;
  display: grid;
  align-items: center;
}

.cards-grid {
  max-width: 1280px;
  width: 100%;
  grid-template-columns: 0.85fr repeat(3, 1.45fr) 0.55fr;
  gap: 26px;
  align-items: center;
}

/* Add right olive column to better echo the reference image */
.cards-grid::after {
  content: "";
  width: 92px;
  height: 150px;
  justify-self: center;
  background:
    url("data:image/svg+xml,%3Csvg width='150' height='240' viewBox='0 0 150 240' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M116 218C89 149 66 83 31 18' stroke='%23657455' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M92 164C120 158 134 143 137 119C108 122 93 136 92 164Z' fill='%23dfe5d2' stroke='%23657455' stroke-width='3'/%3E%3Cpath d='M75 119C103 112 115 96 113 72C86 78 72 94 75 119Z' fill='%23dfe5d2' stroke='%23657455' stroke-width='3'/%3E%3Cpath d='M57 77C82 69 92 54 87 32C62 42 51 56 57 77Z' fill='%23dfe5d2' stroke='%23657455' stroke-width='3'/%3E%3Cpath d='M88 185C59 181 39 167 28 143C56 142 76 157 88 185Z' fill='%23dfe5d2' stroke='%23657455' stroke-width='3'/%3E%3Cpath d='M68 140C39 135 21 120 14 98C40 99 58 114 68 140Z' fill='%23dfe5d2' stroke='%23657455' stroke-width='3'/%3E%3Cpath d='M49 98C24 92 11 77 7 57C30 59 44 74 49 98Z' fill='%23dfe5d2' stroke='%23657455' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.88;
}

.side-olive::before {
  width: 92px;
  height: 150px;
}

.info-card {
  min-height: 0;
  height: clamp(180px, 23vh, 230px);
  grid-template-columns: 43% 57%;
}

.info-card-text {
  padding: clamp(16px, 1.8vh, 24px) 24px;
}

.card-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.info-card h2 {
  font-size: clamp(19px, 1.45vw, 25px);
}

.info-card p {
  font-size: clamp(16px, 1.18vw, 20px);
  line-height: 1.2;
  margin: 12px 0 14px;
}

.card-link {
  font-size: 10.5px;
}

/* Countdown section as bottom of page */
.countdown-band {
  height: 100%;
  min-height: 0;
  padding: 16px 7vw;
  grid-template-columns: 1.2fr 2.2fr 1.2fr;
  align-items: center;
}

.count-label {
  font-size: 11px;
}

.count-number {
  font-size: clamp(34px, 3.4vw, 52px);
}

.count-unit {
  margin-top: 4px;
  font-size: 10px;
}

.until {
  font-size: 11px;
}

.until em {
  font-size: 40px;
}

/* Make sure hidden old sections don't take space */
body.site-shell .content-section {
  display: none;
}

/* Short laptop screens */
@media (max-height: 790px) and (min-width: 981px) {
  .top-nav {
    height: 68px;
  }

  body.site-shell main {
    height: calc(100vh - 68px);
    grid-template-rows: 49fr 32fr 11fr;
  }

  .nav-logo {
    width: 100px;
    max-height: 56px;
  }

  .home-hero h1 {
    font-size: clamp(62px, 7vw, 106px);
  }

  .hero-line {
    margin: 16px auto 12px;
  }

  .hero-tagline {
    margin-bottom: 14px;
  }

  .hero-button {
    height: 46px;
  }

  .info-card {
    height: clamp(160px, 22vh, 205px);
  }

  .info-card-text {
    padding: 14px 20px;
  }

  .info-card p {
    font-size: clamp(14px, 1vw, 17px);
    margin: 9px 0 10px;
  }

  .count-number {
    font-size: clamp(30px, 3vw, 44px);
  }
}

/* Tablet and mobile: stack and allow scrolling */
@media (max-width: 980px) {
  body.site-shell {
    height: auto;
    overflow-y: auto;
  }

  body.site-shell main {
    height: auto;
    display: block;
  }

  .top-nav {
    height: auto;
    grid-template-columns: 1fr;
    padding: 20px 24px;
    gap: 16px;
  }

  .nav-logo {
    width: 104px;
    max-height: none;
    margin: 0 auto;
  }

  .nav-links {
    gap: 18px;
    justify-content: center;
  }

  .home-hero {
    min-height: 460px;
    height: auto;
    padding: 54px 24px;
    justify-items: center;
  }

  .cards-strip {
    height: auto;
    padding: 32px 24px;
  }

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

  .cards-grid::after {
    display: none;
  }

  .info-card {
    height: auto;
    min-height: 0;
  }

  .countdown-band {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   V9 ENGLISH INDEX FIX
   - stop overlaps
   - shorter/wider cards
   - smaller hero text below Gel & Noel
   - existing olive-branch.svg as hero divider
   - countdown fits as bottom band
   ========================================================= */

@media (min-width: 981px) {
  body.site-shell {
    height: 100vh;
    overflow: hidden;
  }

  .top-nav {
    height: 68px;
  }

  body.site-shell main {
    height: calc(100vh - 68px);
    display: grid;
    grid-template-rows: 48% 35% 17%;
    overflow: hidden;
  }
}

/* Keep logo/flag but tighten nav */
.top-nav {
  grid-template-columns: 220px 1fr 220px;
}

.nav-logo {
  width: 108px;
  max-height: 58px;
}

.flag-link img {
  width: 30px;
  height: 21px;
}

/* Hero: keep big title, reduce lower text */
.home-hero {
  min-height: 0;
  height: 100%;
  padding: 22px 9vw 24px;
  overflow: hidden;
}

.home-hero-content {
  width: min(620px, 100%);
  transform: scale(0.92);
  transform-origin: center center;
}

.home-hero h1 {
  font-size: clamp(62px, 7.2vw, 110px);
}

.hero-line {
  width: min(540px, 100%);
  margin: 16px auto 12px;
}

.hero-line .branch {
  width: 34px;
  height: 16px;
  background: url("../img/olive-branch.svg") center/contain no-repeat;
}

.hero-date {
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: 0.36em;
}

.hero-location {
  margin: 5px 0 8px;
  font-size: clamp(23px, 2.2vw, 34px);
  letter-spacing: 0.28em;
}

/* This is the text you said is too big */
.hero-tagline {
  max-width: 480px;
  font-size: clamp(19px, 1.65vw, 26px);
  line-height: 1.02;
  margin-bottom: 14px;
}

.hero-button {
  min-width: 230px;
  height: 44px;
  font-size: 11px;
}

/* Cards: wider and shorter, and no crashing into countdown */
.cards-strip {
  height: 100%;
  padding: 14px 5.5vw;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.cards-grid {
  max-width: 1320px;
  width: 100%;
  grid-template-columns: 0.62fr repeat(3, 1.7fr) 0.62fr;
  gap: 24px;
  align-items: center;
}

.info-card {
  height: clamp(138px, 20vh, 178px);
  min-height: 0;
  grid-template-columns: 46% 54%;
  overflow: hidden;
}

.info-card img {
  height: 100%;
  object-fit: cover;
}

.info-card-text {
  padding: 12px 18px;
  min-width: 0;
}

.card-icon {
  font-size: 18px;
  margin-bottom: 5px;
}

.info-card h2 {
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.03;
  letter-spacing: 0.18em;
}

.info-card p {
  font-size: clamp(13px, 0.92vw, 16px);
  line-height: 1.12;
  margin: 8px 0 9px;
}

.card-link {
  font-size: 9px;
  letter-spacing: 0.22em;
}

.side-olive::before,
.cards-grid::after {
  width: 72px;
  height: 118px;
}

/* Countdown: bottom band, contained */
.countdown-band {
  height: 100%;
  min-height: 0;
  padding: 12px 7vw;
  grid-template-columns: 1.15fr 2.35fr 1.15fr;
  gap: 24px;
  overflow: hidden;
}

.count-label {
  font-size: 10px;
  letter-spacing: 0.22em;
}

.count-grid {
  gap: 10px;
}

.count-number {
  font-size: clamp(28px, 2.7vw, 42px);
}

.count-unit {
  margin-top: 3px;
  font-size: 9px;
}

.until {
  font-size: 10px;
}

.until em {
  font-size: 34px;
}

/* Extra safety for shorter desktop screens */
@media (max-height: 760px) and (min-width: 981px) {
  .top-nav {
    height: 60px;
  }

  body.site-shell main {
    height: calc(100vh - 60px);
    grid-template-rows: 47% 36% 17%;
  }

  .nav-logo {
    width: 92px;
    max-height: 52px;
  }

  .home-hero-content {
    transform: scale(0.84);
  }

  .info-card {
    height: clamp(128px, 19vh, 158px);
  }

  .info-card h2 {
    font-size: clamp(15px, 1.1vw, 18px);
  }

  .info-card p {
    font-size: clamp(12px, 0.86vw, 14px);
    margin: 6px 0 7px;
  }

  .count-number {
    font-size: clamp(25px, 2.4vw, 36px);
  }

  .until em {
    font-size: 30px;
  }
}

/* Tablet/mobile: stack naturally and allow scrolling */
@media (max-width: 980px) {
  body.site-shell {
    height: auto;
    overflow-y: auto;
  }

  body.site-shell main {
    height: auto;
    display: block;
    overflow: visible;
  }

  .home-hero {
    height: auto;
    min-height: 460px;
    padding: 50px 24px;
  }

  .home-hero-content {
    transform: none;
  }

  .cards-strip {
    height: auto;
    overflow: visible;
  }

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

  .info-card {
    height: auto;
    min-height: 190px;
  }

  .countdown-band {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   V10 ENGLISH INDEX SCALE FIX
   Keep top menu as-is.
   Match reference more closely:
   - shorter countdown
   - shorter cream/cards section
   - cards sit higher
   - headings one line
   - divider between heading and card text
   - Open Invitation visible
   ========================================================= */

@media (min-width: 981px) {
  body.site-shell {
    height: 100vh;
    overflow: hidden;
  }

  body.site-shell main {
    height: calc(100vh - 68px);
    display: grid;
    grid-template-rows: 53% 35% 12%;
    overflow: hidden;
  }
}

/* HERO: make content fit so button is not hidden */
.home-hero {
  padding: 18px 9vw 20px;
  overflow: hidden;
}

.home-hero-content {
  transform: scale(0.84) translateY(-2px);
  transform-origin: center center;
}

.home-hero h1 {
  font-size: clamp(58px, 6.8vw, 104px);
}

.hero-line {
  margin: 14px auto 10px;
}

.hero-date {
  font-size: clamp(19px, 1.9vw, 28px);
}

.hero-location {
  margin: 4px 0 8px;
  font-size: clamp(22px, 2.1vw, 32px);
}

.hero-tagline {
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.03;
  margin-bottom: 12px;
}

.hero-button {
  min-width: 220px;
  height: 42px;
  font-size: 10.5px;
}

/* CARDS AREA: lower overall height visually and lift cards */
.cards-strip {
  padding: 10px 5.5vw 16px;
  align-items: start;
}

.cards-grid {
  transform: translateY(4px);
  grid-template-columns: 0.72fr repeat(3, 1.62fr) 0.72fr;
  gap: 24px;
}

/* Wider, shorter rectangles */
.info-card {
  height: clamp(130px, 18vh, 166px);
  grid-template-columns: 46% 54%;
}

.info-card-text {
  padding: 12px 20px;
}

/* Headings one line */
.info-card h2 {
  white-space: nowrap;
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1;
  letter-spacing: 0.17em;
}

/* Divider between heading and text */
.info-card h2::after {
  content: "";
  display: block;
  width: 74px;
  height: 1px;
  margin: 9px auto 0;
  background: rgba(185, 149, 69, 0.46);
}

.info-card p {
  font-size: clamp(12.5px, 0.88vw, 15px);
  line-height: 1.15;
  margin: 9px 0 9px;
}

.card-icon {
  font-size: 18px;
  margin-bottom: 6px;
}

.card-link {
  font-size: 8.8px;
  letter-spacing: 0.22em;
}

/* Make RSVP fit better */
.info-card:nth-of-type(3) p,
.info-card:nth-of-type(4) p {
  line-height: 1.12;
}

/* Side olive branches a touch smaller to match lower card strip */
.side-olive::before,
.cards-grid::after {
  width: 66px;
  height: 108px;
}

/* COUNTDOWN: lower height */
.countdown-band {
  padding: 8px 7vw;
  min-height: 0;
}

.count-label {
  font-size: 9.5px;
  letter-spacing: 0.21em;
}

.count-number {
  font-size: clamp(24px, 2.35vw, 36px);
}

.count-unit {
  margin-top: 2px;
  font-size: 8.5px;
}

.until {
  font-size: 9.5px;
}

.until em {
  font-size: 30px;
}

/* Shorter laptop screens */
@media (max-height: 760px) and (min-width: 981px) {
  body.site-shell main {
    grid-template-rows: 54% 34% 12%;
  }

  .home-hero-content {
    transform: scale(0.78) translateY(-6px);
  }

  .info-card {
    height: clamp(122px, 17vh, 150px);
  }

  .info-card h2 {
    font-size: clamp(14px, 1vw, 16px);
  }

  .info-card h2::after {
    margin-top: 7px;
  }

  .info-card p {
    font-size: clamp(11.5px, 0.82vw, 13.5px);
    margin: 7px 0 7px;
  }

  .count-number {
    font-size: clamp(22px, 2.1vw, 32px);
  }

  .until em {
    font-size: 27px;
  }
}

/* On tablet/mobile, preserve responsive stacking */
@media (max-width: 980px) {
  .home-hero-content {
    transform: none;
  }

  .cards-grid {
    transform: none;
  }

  .info-card h2 {
    white-space: normal;
  }
}


/* =========================================================
   V11 ENGLISH INDEX CARD REFINEMENT
   - proper side olive SVGs
   - taller cards so links do not get cropped
   - centered headings with lower tracking
   - soft floating shadow
   - recreated icon SVGs
   ========================================================= */

@media (min-width: 981px) {
  body.site-shell main {
    height: calc(100vh - 84px);
    grid-template-rows: 50.5% 36.5% 13%;
  }
}

.home-hero {
  padding: 10px 8.5vw 10px;
}

.home-hero-content {
  transform: scale(0.80) translateY(-10px);
}

.hero-date {
  font-size: clamp(18px, 1.75vw, 26px);
}

.hero-location {
  margin: 2px 0 8px;
  font-size: clamp(20px, 1.9vw, 30px);
}

.hero-tagline {
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.05;
  margin-bottom: 12px;
}

.hero-button {
  position: relative;
  z-index: 2;
}

.cards-strip {
  padding: 16px 5.8vw 12px;
}

.cards-grid {
  max-width: 1460px;
  transform: none;
  display: grid;
  grid-template-columns: 0.72fr 1.36fr 1.36fr 1.36fr 0.72fr;
  gap: 40px;
  align-items: center;
}

.side-olive {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 210px;
}

.side-olive::before,
.cards-grid::after {
  display: none !important;
  content: none !important;
}

.side-olive-left,
.side-olive-right {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 92px auto;
}

.side-olive-left {
  background-image: url('../img/side-olive-left.svg');
}

.side-olive-right {
  background-image: url('../img/side-olive-right.svg');
}

.info-card {
  height: auto;
  min-height: 184px;
  grid-template-columns: 44% 56%;
  box-shadow: 0 12px 24px rgba(56, 42, 20, 0.12), 0 4px 10px rgba(56, 42, 20, 0.06);
  border: 1px solid rgba(185, 149, 69, 0.14);
  overflow: hidden;
}

.info-card img {
  height: 100%;
}

.info-card-text {
  justify-content: flex-start;
  align-items: stretch;
  padding: 16px 22px 16px;
  text-align: left;
}

.card-icon {
  display: none;
}

.card-icon-svg {
  width: 24px;
  height: 24px;
  align-self: center;
  margin: 0 0 8px;
}

.info-card h2 {
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(12px, 1.02vw, 17px);
  letter-spacing: 0.11em;
  line-height: 1.05;
}

.info-card h2::after {
  content: '';
  display: block;
  width: 74px;
  height: 1px;
  margin: 10px auto 0;
  background: rgba(185, 149, 69, 0.46);
}

.info-card p {
  font-size: clamp(12.4px, 0.88vw, 16px);
  line-height: 1.18;
  margin: 10px 0 10px;
}

.card-link {
  margin-top: auto;
  font-size: 9.3px;
  letter-spacing: 0.24em;
  color: var(--deep-olive);
}

.card-arrow {
  color: var(--gold);
  letter-spacing: 0;
  padding-left: 3px;
}

.countdown-band {
  padding: 7px 6vw;
}

.count-label {
  font-size: 9px;
}

.count-number {
  font-size: clamp(22px, 2.1vw, 33px);
}

.count-unit {
  font-size: 8px;
  margin-top: 2px;
}

.until {
  font-size: 8.8px;
}

.until em {
  font-size: 27px;
}

@media (max-height: 760px) and (min-width: 981px) {
  body.site-shell main {
    grid-template-rows: 50% 37% 13%;
  }

  .home-hero-content {
    transform: scale(0.76) translateY(-16px);
  }

  .info-card {
    min-height: 174px;
  }

  .info-card-text {
    padding: 14px 18px 14px;
  }

  .info-card h2 {
    font-size: clamp(11px, 0.95vw, 15px);
  }

  .info-card p {
    font-size: clamp(11.5px, 0.8vw, 14px);
    line-height: 1.12;
  }
}

@media (max-width: 980px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .side-olive {
    display: none;
  }

  .info-card {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .card-icon-svg {
    width: 26px;
    height: 26px;
  }

  .info-card h2 {
    white-space: normal;
  }
}


/* =========================================================
   V12 HERO SIZE TWEAK
   - make Gel & Noel banner content about 15% larger
   - make center olive branch about 35% larger
   ========================================================= */
@media (min-width: 981px) {
  .home-hero-content {
    transform: scale(0.92) translateY(-6px);
    transform-origin: center center;
  }

  .hero-line .branch {
    width: 46px;
    height: 22px;
    background-size: contain;
  }

  .hero-button {
    min-width: 232px;
    height: 44px;
    font-size: 11px;
  }
}

@media (max-height: 760px) and (min-width: 981px) {
  .home-hero-content {
    transform: scale(0.88) translateY(-10px);
  }

  .hero-line .branch {
    width: 42px;
    height: 20px;
  }
}


/* =========================================================
   V13 CARD ICON / SIDE BRANCH FIX
   Uses Gel's uploaded SVG files.
   - card icons smaller
   - card icons softer/transparent
   - card images no longer affect icon size
   - side olive branches properly sized and contained
   ========================================================= */

/* Make sure only the left image of each card fills the image half */
.info-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Uploaded icons in the text side of each card */
.info-card .card-icon-svg {
  display: block;
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain;
  align-self: center;
  margin: 0 auto 8px;
  opacity: 0.68;
}

/* The RSVP disco-ball icon is naturally taller, so keep it elegant */
.info-card:nth-of-type(3) .card-icon-svg {
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  margin-bottom: 6px;
  opacity: 0.68;
}

/* Keep headings from being pushed down by the icons */
.info-card-text {
  justify-content: center;
  overflow: hidden;
}

/* Cards slightly taller so links breathe */
.info-card {
  min-height: 198px;
}

/* Link arrows match the brass dividers */
.card-arrow {
  color: #b99545;
  font-weight: 500;
}

/* Use Gel's uploaded left and right branches */
.side-olive-left,
.side-olive-right {
  min-height: 210px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 118px auto;
  opacity: 0.92;
}

.side-olive-left {
  background-image: url("../img/side-olive-left.svg");
}

.side-olive-right {
  background-image: url("../img/side-olive-right.svg");
}

/* Remove older generated branch pseudo-elements completely */
.side-olive::before,
.cards-grid::after {
  display: none !important;
  content: none !important;
}

/* Give the cream cards area a touch more room so branches are not cut */
.cards-strip {
  padding-top: 18px;
  padding-bottom: 18px;
  overflow: visible;
}

/* Keep the countdown as the bottom band without eating the branches */
@media (min-width: 981px) {
  body.site-shell main {
    grid-template-rows: 50% 37% 13%;
  }
}

@media (max-height: 760px) and (min-width: 981px) {
  .info-card {
    min-height: 184px;
  }

  .info-card .card-icon-svg {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    margin-bottom: 6px;
  }

  .info-card:nth-of-type(3) .card-icon-svg {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }

  .side-olive-left,
  .side-olive-right {
    min-height: 188px;
    background-size: 104px auto;
  }
}

@media (max-width: 980px) {
  .info-card .card-icon-svg,
  .info-card:nth-of-type(3) .card-icon-svg {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }

  .side-olive-left,
  .side-olive-right {
    display: none;
  }
}


/* =========================================================
   V14 HERO HEIGHT + TOP RIGHT OLIVE BRANCH
   - use leftover bottom space by making hero taller
   - keep countdown as the bottom of the viewport
   - replace top-right menu olive branch with Gel's uploaded SVG
   ========================================================= */

/* Replace the top-right nav flourish branch */
.nav-flourish .branch {
  width: 76px;
  height: 36px;
  background: url("../img/top-right-olive_branch.svg") center / contain no-repeat !important;
}

/* Make the desktop page use the full visible height */
@media (min-width: 981px) {
  body.site-shell {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  body.site-shell main {
    height: calc(100vh - 68px);
    min-height: calc(100vh - 68px);
    display: grid;
    grid-template-rows: 53% 35% 12%;
    overflow: hidden;
  }

  .home-hero {
    height: 100%;
    min-height: 0;
  }

  .cards-strip {
    height: 100%;
    min-height: 0;
  }

  .countdown-band {
    height: 100%;
    min-height: 0;
  }
}

/* Keep the current content scale, but let the banner breathe vertically */
.home-hero {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* The hero gets the extra height, not the countdown */
@media (max-height: 760px) and (min-width: 981px) {
  body.site-shell main {
    grid-template-rows: 52% 36% 12%;
  }
}

@media (min-height: 820px) and (min-width: 981px) {
  body.site-shell main {
    grid-template-rows: 54% 34% 12%;
  }
}


/* =========================================================
   V15 CONTENT UPDATES
   - Banner divider olive branch 20% bigger only
   ========================================================= */

.hero-line .branch {
  width: 55px;
  height: 26px;
  background-size: contain;
}

@media (max-height: 760px) and (min-width: 981px) {
  .hero-line .branch {
    width: 50px;
    height: 24px;
  }
}


/* =========================================================
   V16 TOP NAV SIDE DIVIDERS
   - add matching vertical divider on the left
   - make both vertical dividers thicker
   - centre logo inside left space
   - centre olive branch inside right space
   ========================================================= */

.top-nav {
  grid-template-columns: 220px 1fr 220px;
}

/* Left logo area */
.top-nav > a:first-child {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 2px solid rgba(185, 149, 69, 0.52);
}

.nav-logo {
  margin: 0 auto;
}

/* Right olive branch area */
.nav-flourish {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Existing right divider, now thicker and aligned like the left */
.nav-flourish::before {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  height: 54px;
  background: rgba(185, 149, 69, 0.52);
}

.nav-flourish .branch {
  margin: 0 auto;
}

/* Keep side spaces balanced on shorter laptop screens */
@media (max-height: 760px) and (min-width: 981px) {
  .top-nav {
    grid-template-columns: 210px 1fr 210px;
  }

  .nav-flourish::before {
    height: 48px;
  }
}

/* Mobile/tablet: remove side divider lines when nav stacks */
@media (max-width: 980px) {
  .top-nav > a:first-child {
    border-right: none;
    height: auto;
  }

  .nav-flourish::before {
    display: none;
  }
}


/* =========================================================
   V17 TOP NAV LINE POSITION
   - make left divider match right divider exactly
   - move both divider lines outwards, closer to logo/olive branch
   - keep logo and olive branch centred inside their side spaces
   ========================================================= */

.top-nav {
  grid-template-columns: 170px 1fr 170px;
}

/* Left logo area: line now matches right divider exactly */
.top-nav > a:first-child {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 2px solid rgba(185, 149, 69, 0.52);
}

/* Centre logo within the smaller left space */
.nav-logo {
  margin: 0 auto;
}

/* Right olive branch area */
.nav-flourish {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right divider keeps the same style as the left one */
.nav-flourish::before {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  height: 54px;
  background: rgba(185, 149, 69, 0.52);
}

/* Centre olive branch within the smaller right space */
.nav-flourish .branch {
  margin: 0 auto;
}

/* Short desktop/laptop */
@media (max-height: 760px) and (min-width: 981px) {
  .top-nav {
    grid-template-columns: 165px 1fr 165px;
  }

  .nav-flourish::before {
    height: 48px;
  }
}

/* Tablet/mobile: stacked nav should not have side dividers */
@media (max-width: 980px) {
  .top-nav {
    grid-template-columns: 1fr;
  }

  .top-nav > a:first-child {
    border-right: none;
  }

  .nav-flourish::before {
    display: none;
  }
}


/* =========================================================
   V18 EXACT MATCHING TOP NAV DIVIDERS
   Fix: left line was a full-height border; right line was a centred pseudo-line.
   Now both are identical centred pseudo-lines.
   ========================================================= */

.top-nav {
  grid-template-columns: 170px 1fr 170px;
}

/* Left logo area */
.top-nav > a:first-child {
  position: relative;
  height: 100%;
  width: 100%;
  border-right: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Left divider: exact match to right divider */
.top-nav > a:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 2px;
  height: 54px;
  transform: translateY(-50%);
  background: rgba(185, 149, 69, 0.52);
}

/* Right olive branch area */
.nav-flourish {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right divider: exact match to left divider */
.nav-flourish::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 54px;
  transform: translateY(-50%);
  background: rgba(185, 149, 69, 0.52);
}

/* Keep logo and olive branch centred in their side spaces */
.nav-logo,
.nav-flourish .branch {
  margin: 0 auto;
}

/* Short desktop/laptop */
@media (max-height: 760px) and (min-width: 981px) {
  .top-nav {
    grid-template-columns: 165px 1fr 165px;
  }

  .top-nav > a:first-child::after,
  .nav-flourish::before {
    height: 48px;
  }
}

/* Tablet/mobile: stacked nav should not have side dividers */
@media (max-width: 980px) {
  .top-nav {
    grid-template-columns: 1fr;
  }

  .top-nav > a:first-child::after,
  .nav-flourish::before {
    display: none !important;
  }
}


/* =========================================================
   V19 COUNTDOWN REFERENCE MATCH
   - top and bottom horizontal brass lines
   - shorter vertical dividers between countdown units
   - textured deep olive background
   - Gel's uploaded left olive branch and I-do SVG
   ========================================================= */

.countdown-band {
  position: relative;
  display: grid;
  grid-template-columns: 62px 185px 1fr 170px;
  align-items: center;
  gap: 18px;
  padding: 14px 28px 12px;
  overflow: hidden;
  background:
    radial-gradient(140% 180% at 50% 0%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.00) 42%),
    radial-gradient(70% 120% at 82% 50%, rgba(185,149,69,0.16) 0%, rgba(185,149,69,0.00) 58%),
    radial-gradient(100% 140% at 12% 100%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 2px, rgba(255,255,255,0) 2px 10px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.032) 0 1px, rgba(0,0,0,0) 1px 12px),
    linear-gradient(90deg, #14331f 0%, #17351f 28%, #233822 56%, #4a4524 100%);
}

.countdown-band::before,
.countdown-band::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 1px;
  background: rgba(185, 149, 69, 0.62);
}

.countdown-band::before { top: 6px; }
.countdown-band::after { bottom: 6px; }

.count-side-branch {
  width: 52px;
  height: 52px;
  background: url('../img/countdown-left-branch.png') center / contain no-repeat;
  justify-self: center;
  opacity: 0.95;
}

.count-label {
  color: #c8a55b;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
}

.count-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  min-width: 0;
}

.count-item {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

.count-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 34px;
  transform: translateY(-50%);
  background: rgba(185, 149, 69, 0.72);
}

.count-number {
  color: #f6f0e2;
  font-size: clamp(32px, 2.6vw, 48px);
  line-height: 0.95;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
}

.count-unit {
  margin-top: 5px;
  color: #f6f0e2;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.until {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  align-self: stretch;
}

.until-text {
  color: #c8a55b;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
}

.ido-script {
  width: 108px;
  height: 40px;
  background: url('../img/countdown-i-do.png') center / contain no-repeat;
  display: block;
}

/* Slightly more compact desktop so the band remains elegant */
@media (min-width: 981px) {
  .countdown-band {
    min-height: 86px;
  }
}

@media (max-height: 760px) and (min-width: 981px) {
  .countdown-band {
    grid-template-columns: 54px 165px 1fr 150px;
    padding: 12px 24px 10px;
  }

  .count-side-branch {
    width: 46px;
    height: 46px;
  }

  .count-label { font-size: 11px; }
  .count-number { font-size: clamp(28px, 2.3vw, 40px); }
  .count-unit { font-size: 9px; }
  .until-text { font-size: 10px; }
  .ido-script { width: 96px; height: 36px; }
  .count-item:not(:last-child)::after { height: 28px; }
}

@media (max-width: 980px) {
  .countdown-band {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 18px 16px;
    text-align: center;
  }

  .countdown-band::before,
  .countdown-band::after {
    left: 10px;
    right: 10px;
  }

  .count-side-branch {
    width: 44px;
    height: 44px;
    margin: 0 auto;
  }

  .count-label {
    text-align: center;
    font-size: 11px;
  }

  .count-grid {
    width: 100%;
  }

  .count-item:not(:last-child)::after {
    height: 24px;
  }

  .count-number {
    font-size: clamp(24px, 8vw, 36px);
  }

  .count-unit {
    font-size: 9px;
  }

  .until-text {
    font-size: 10px;
  }

  .ido-script {
    width: 92px;
    height: 34px;
  }
}


/* =========================================================
   EVENTS PAGE — THREE-CARD CAROUSEL COMPOSITION
   Added to Gel's latest style.css
   ========================================================= */

.events-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: #fbf4e9;
}

.events-page .top-nav {
  position: relative;
  z-index: 20;
}

/*
  The homepage is intentionally locked to one desktop viewport,
  but the Events page needs to scroll normally.
*/
@media (min-width: 981px) {
  body.events-page.site-shell {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.events-page.site-shell main {
    height: auto;
    min-height: calc(100vh - 68px);
    display: block;
    overflow: visible;
  }
}

.events-main {
  position: relative;
  min-height: calc(100vh - 68px);
  overflow: hidden;
  padding: 32px 4.5vw 38px;
  isolation: isolate;
}

/* Waterfall Gardens visual-identity watermark */
.events-watermark {
  position: absolute;
  z-index: -2;
  left: 50%;
  bottom: -7%;
  width: min(1120px, 79vw);
  aspect-ratio: 4 / 3;
  transform: translateX(-50%);
  background: url("../img/background_waterfall_watermark_events.png") center bottom / contain no-repeat;
  opacity: 0.48;
  pointer-events: none;
}

.events-main::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(251,244,233,0.90) 0%,
      rgba(251,244,233,0.68) 27%,
      rgba(251,244,233,0.45) 62%,
      rgba(251,244,233,0.72) 100%
    );
  pointer-events: none;
}

/* Page heading */
.events-heading {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  margin: 0 auto 26px;
  text-align: center;
}

.events-eyebrow {
  margin: 0 0 7px;
  font-family: Inter, Arial, sans-serif;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.31em;
  text-transform: uppercase;
}

.events-heading h1 {
  margin: 0;
  color: var(--deep-olive);
  font-size: clamp(46px, 5vw, 70px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.events-heading-divider,
.weekend-divider {
  display: flex;
  align-items: center;
  justify-content: center;
}

.events-heading-divider {
  gap: 10px;
  margin: 12px auto 9px;
  width: min(270px, 65vw);
}

.events-heading-divider span,
.weekend-divider span {
  display: block;
  height: 1px;
  background: rgba(185,149,69,0.46);
}

.events-heading-divider span {
  flex: 1;
}

.events-heading-divider img {
  width: 28px;
  height: 14px;
  object-fit: contain;
}

.events-heading-copy {
  margin: 0;
  color: var(--deep-olive);
  font-size: 20px;
  font-style: italic;
}

/* Three-event composition */
.events-carousel {
  position: relative;
  z-index: 3;
  width: min(1320px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 30px);
}

.weekend-card {
  position: relative;
  flex: 0 0 auto;
  background: rgba(255,250,242,0.91);
  border: 1px solid rgba(185,149,69,0.24);
  box-shadow:
    0 25px 55px rgba(55,42,23,0.10),
    0 8px 20px rgba(55,42,23,0.06);
  backdrop-filter: blur(2px);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease;
}

/* Day 1 and Day 3 */
.weekend-card-side {
  width: min(29%, 350px);
  min-height: 438px;
  transform: translateY(15px) scale(0.94);
  opacity: 0.90;
}

/* Day 2 / The Big Day */
.weekend-card-main {
  width: min(35%, 430px);
  min-height: 495px;
  z-index: 4;
  transform: scale(1.035);
  border-color: rgba(185,149,69,0.52);
  box-shadow:
    0 34px 72px rgba(55,42,23,0.15),
    0 12px 26px rgba(55,42,23,0.08);
}

.weekend-card-main::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(185,149,69,0.18);
  pointer-events: none;
}

.weekend-card-inner {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 28px 28px 25px;
  text-align: center;
}

.weekend-card-main .weekend-card-inner {
  padding: 31px 32px 28px;
}

.weekend-day {
  margin: 0 0 9px;
  font-family: Inter, Arial, sans-serif;
  color: var(--gold);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.weekend-card h2 {
  margin: 0;
  color: var(--deep-olive);
  font-size: clamp(29px, 2.5vw, 39px);
  font-weight: 400;
  line-height: 0.94;
}

.weekend-card-main h2 {
  font-size: clamp(35px, 3vw, 47px);
}

.weekend-headline-date {
  margin: 10px 0 0;
  color: var(--brass);
  font-family: Inter, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Olive dividers inside each event card */
.weekend-divider {
  gap: 8px;
  width: 150px;
  margin: 15px auto;
}

.weekend-divider span {
  flex: 1;
}

.weekend-divider img {
  width: 23px;
  height: 12px;
  object-fit: contain;
}

.weekend-description {
  margin: 0 auto;
  max-width: 310px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.28;
}

.weekend-card-side .weekend-description {
  font-size: 15.5px;
}

/* Practical details at bottom of each card */
.weekend-details {
  width: 100%;
  margin-top: auto;
  padding-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 18px;
  text-align: left;
}

.weekend-details::before {
  content: "";
  grid-column: 1 / -1;
  display: block;
  height: 1px;
  margin-bottom: 1px;
  background: rgba(185,149,69,0.34);
}

.weekend-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weekend-detail-wide {
  grid-column: 1 / -1;
}

.detail-label {
  font-family: Inter, Arial, sans-serif;
  color: var(--gold);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.detail-value {
  color: var(--deep-olive);
  font-size: 15px;
  line-height: 1.15;
}

.weekend-card-main .detail-value {
  font-size: 16px;
}

.events-dots {
  display: none;
}

.events-note {
  position: relative;
  z-index: 3;
  margin: 38px auto 0;
  text-align: center;
  color: rgba(16,33,13,0.72);
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
}

/* Short desktop/laptop screens */
@media (min-width: 981px) and (max-height: 800px) {
  .events-main {
    padding-top: 22px;
    padding-bottom: 24px;
  }

  .events-heading {
    margin-bottom: 18px;
  }

  .events-heading h1 {
    font-size: clamp(42px, 4.5vw, 62px);
  }

  .events-heading-copy {
    font-size: 17px;
  }

  .weekend-card-side {
    min-height: 390px;
  }

  .weekend-card-main {
    min-height: 440px;
  }

  .weekend-card-inner {
    padding: 22px 24px 21px;
  }

  .weekend-card-main .weekend-card-inner {
    padding: 25px 28px 23px;
  }

  .weekend-card h2 {
    font-size: clamp(26px, 2.15vw, 34px);
  }

  .weekend-card-main h2 {
    font-size: clamp(31px, 2.6vw, 40px);
  }

  .weekend-description {
    font-size: 15px;
    line-height: 1.21;
  }

  .weekend-card-side .weekend-description {
    font-size: 14px;
  }

  .events-note {
    margin-top: 26px;
  }
}

/* Tablet/mobile: real horizontal swipe carousel */
@media (max-width: 980px) {
  .events-main {
    min-height: 0;
    overflow: visible;
    padding: 30px 0 42px;
  }

  .events-watermark {
    width: 125vw;
    bottom: 4%;
    opacity: 0.34;
  }

  .events-heading {
    width: auto;
    padding: 0 22px;
    margin-bottom: 24px;
  }

  .events-heading h1 {
    font-size: clamp(43px, 10vw, 64px);
  }

  .events-heading-copy {
    font-size: 18px;
  }

  .events-carousel {
    width: 100%;
    justify-content: flex-start;
    gap: 15px;
    padding: 20px max(7vw, 20px) 30px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(7vw, 20px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .events-carousel::-webkit-scrollbar {
    display: none;
  }

  .weekend-card,
  .weekend-card-side,
  .weekend-card-main {
    flex: 0 0 min(82vw, 390px);
    width: min(82vw, 390px);
    min-height: 465px;
    transform: none;
    opacity: 1;
    scroll-snap-align: center;
  }

  .weekend-card-main {
    min-height: 495px;
  }

  .weekend-card-inner,
  .weekend-card-main .weekend-card-inner {
    padding: 28px 27px 25px;
  }

  .weekend-card h2,
  .weekend-card-main h2 {
    font-size: clamp(34px, 9vw, 43px);
  }

  .weekend-card-side .weekend-description,
  .weekend-description {
    font-size: 16px;
  }

  .events-dots {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
  }

  .events-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(37,55,25,0.24);
  }

  .events-dots .active {
    width: 18px;
    border-radius: 10px;
    background: var(--gold);
  }

  .events-note {
    padding: 0 24px;
    margin-top: 22px;
  }
}


/* =========================================================
   EVENTS PAGE — COMPACT DESKTOP + VISIBLE WATERMARK + STACKING
   Latest refinement
   ========================================================= */

/* Bring the Waterfall Gardens artwork forward */
.events-watermark {
  bottom: -4%;
  width: min(1240px, 86vw);
  background-image: url("../img/background_waterfall_watermark_events.png");
  opacity: 0.72;
}

/* Reduce the cream veil over the artwork */
.events-main::after {
  background:
    linear-gradient(
      180deg,
      rgba(251,244,233,0.78) 0%,
      rgba(251,244,233,0.48) 24%,
      rgba(251,244,233,0.24) 58%,
      rgba(251,244,233,0.46) 100%
    );
}

/* Desktop: keep the whole composition comfortably within the viewport */
@media (min-width: 1101px) {
  .events-main {
    min-height: calc(100vh - 68px);
    padding: 20px 4.5vw 18px;
  }

  .events-heading {
    margin-bottom: 14px;
  }

  .events-eyebrow {
    margin-bottom: 4px;
    font-size: 9px;
  }

  .events-heading h1 {
    font-size: clamp(44px, 4.1vw, 62px);
  }

  .events-heading-divider {
    margin: 9px auto 6px;
  }

  .events-heading-copy {
    font-size: 17px;
  }

  .events-carousel {
    gap: clamp(18px, 1.8vw, 26px);
  }

  /* Day 1 + Day 3 */
  .weekend-card-side {
    width: min(29%, 350px);
    min-height: 350px;
    transform: translateY(10px) scale(0.96);
  }

  /* Day 2 remains the focus, but is more compact */
  .weekend-card-main {
    width: min(35%, 420px);
    min-height: 395px;
    transform: scale(1.025);
  }

  .weekend-card-inner {
    padding: 19px 24px 18px;
  }

  .weekend-card-main .weekend-card-inner {
    padding: 22px 28px 20px;
  }

  .weekend-day {
    margin-bottom: 6px;
    font-size: 9px;
  }

  .weekend-card h2 {
    font-size: clamp(27px, 2.2vw, 35px);
  }

  .weekend-card-main h2 {
    font-size: clamp(32px, 2.65vw, 42px);
  }

  .weekend-headline-date {
    margin-top: 7px;
    font-size: 9px;
  }

  .weekend-divider {
    width: 140px;
    margin: 11px auto;
  }

  .weekend-description {
    max-width: 315px;
    font-size: 14.5px;
    line-height: 1.18;
  }

  .weekend-card-side .weekend-description {
    font-size: 13.5px;
  }

  .weekend-details {
    padding-top: 12px;
    gap: 9px 18px;
  }

  .detail-label {
    font-size: 7.5px;
  }

  .detail-value,
  .weekend-card-main .detail-value {
    font-size: 14px;
    line-height: 1.08;
  }

  .events-note {
    margin-top: 20px;
    font-size: 14px;
  }
}

/* Narrower windows/tablets:
   stack cards vertically instead of using a horizontal swipe carousel */
@media (max-width: 1100px) {
  body.events-page.site-shell,
  body.events-page.site-shell main {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .events-main {
    overflow: hidden;
    padding: 28px 20px 42px;
  }

  .events-watermark {
    position: fixed;
    width: min(1100px, 135vw);
    bottom: -4%;
    opacity: 0.40;
  }

  .events-heading {
    margin-bottom: 24px;
  }

  .events-carousel {
    width: min(620px, 100%);
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .weekend-card,
  .weekend-card-side,
  .weekend-card-main {
    width: 100%;
    min-height: 0;
    flex: 0 0 auto;
    transform: none;
    opacity: 1;
    scroll-snap-align: none;
  }

  .weekend-card-inner,
  .weekend-card-main .weekend-card-inner {
    min-height: 0;
    padding: 28px 30px 26px;
  }

  .weekend-card-main {
    border-color: rgba(185,149,69,0.52);
    box-shadow:
      0 28px 58px rgba(55,42,23,0.14),
      0 10px 22px rgba(55,42,23,0.07);
  }

  .weekend-card h2,
  .weekend-card-main h2 {
    font-size: clamp(34px, 7vw, 43px);
  }

  .weekend-card-side .weekend-description,
  .weekend-description {
    font-size: 16px;
  }

  .events-dots {
    display: none !important;
  }
}

/* Phone */
@media (max-width: 600px) {
  .events-main {
    padding: 24px 14px 36px;
  }

  .events-heading {
    padding: 0 8px;
  }

  .events-heading h1 {
    font-size: clamp(42px, 12vw, 56px);
  }

  .weekend-card-inner,
  .weekend-card-main .weekend-card-inner {
    padding: 24px 22px 22px;
  }

  .weekend-details {
    grid-template-columns: 1fr;
  }

  .weekend-detail-wide {
    grid-column: auto;
  }
}


/* =========================================================
   EVENTS PAGE — WATERMARK STRONGER + REMOVE DESKTOP SCROLLBAR
   ========================================================= */
.events-watermark {
  width: min(1360px, 92vw);
  bottom: -1.5%;
  background-image: url("../img/background_waterfall_watermark_events.png");
  background-position: center center;
  background-size: contain;
  opacity: 0.82;
}

.events-main::after {
  background:
    linear-gradient(
      180deg,
      rgba(251,244,233,0.70) 0%,
      rgba(251,244,233,0.42) 24%,
      rgba(251,244,233,0.18) 58%,
      rgba(251,244,233,0.38) 100%
    );
}

@media (min-width: 1101px) {
  html, body {
    overflow-x: hidden;
  }

  body.events-page.site-shell {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
  }

  body.events-page.site-shell main {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
  }

  .events-main {
    min-height: calc(100vh - 68px);
    height: calc(100vh - 68px);
    padding: 16px 4.5vw 10px;
  }

  .events-heading {
    margin-bottom: 10px;
  }

  .events-heading-divider {
    margin: 7px auto 5px;
  }

  .events-heading-copy {
    margin-top: 0;
  }

  .events-carousel {
    gap: clamp(16px, 1.5vw, 22px);
  }

  .weekend-card-side {
    min-height: 338px;
  }

  .weekend-card-main {
    min-height: 382px;
  }

  .weekend-card-inner {
    padding: 18px 24px 16px;
  }

  .weekend-card-main .weekend-card-inner {
    padding: 20px 28px 18px;
  }

  .weekend-details {
    padding-top: 10px;
    gap: 8px 18px;
  }

  .events-note {
    margin-top: 18px;
    margin-bottom: 0;
    font-size: 16px;
  }
}


/* =========================================================
   EVENTS PAGE — TRANSLUCENT CARDS + LOWER DESCRIPTIONS
   ========================================================= */

/* Let the Waterfall Gardens artwork gently show through the cards */
.weekend-card {
  background: rgba(255, 250, 242, 0.50);
  backdrop-filter: blur(0.6px);
  -webkit-backdrop-filter: blur(0.6px);
}

/* Keep The Big Day slightly more substantial while still translucent */
.weekend-card-main {
  background: rgba(255, 250, 242, 0.50);
}

/* Move the short descriptions lower into the middle of the cards */
@media (min-width: 1101px) {
  .weekend-description {
    margin: 22px auto 0;
  }

  .weekend-card-main .weekend-description {
    margin-top: 24px;
  }

  /* Keep the details fixed at the bottom */
  .weekend-details {
    margin-top: auto;
  }
}

/* Stacked layouts: preserve the same visual hierarchy without excess empty space */
@media (max-width: 1100px) {
  .weekend-description {
    margin: 20px auto 0;
  }

  .weekend-card-main .weekend-description {
    margin-top: 22px;
  }
}

/* Phone: a touch tighter */
@media (max-width: 600px) {
  .weekend-description,
  .weekend-card-main .weekend-description {
    margin-top: 17px;
  }
}

/* =========================================================
   EVENTS PAGE — CARD HEIGHT REFINEMENT
   Day 1 & Day 3 = 375px
   Day 2 = 420px
   ========================================================= */

@media (min-width: 1101px) {
  .weekend-card-side {
    min-height: 375px;
  }

  .weekend-card-main {
    min-height: 420px;
  }
}


/* =========================================================
   EVENTS PAGE — SIMPLE 15% FEATURE + HOVER ZOOM
   - Day 1 & Day 3 use the same base size
   - Day 2 is 15% larger by default
   - hovering any card makes THAT card the featured card
   - moving to another card transfers the zoom
   - leaving all cards restores Day 2 as the featured card
   - disabled on stacked/touch layouts
   ========================================================= */

@media (min-width: 1101px) {

  /* Give all three cards the same underlying dimensions */
  .weekend-card-side,
  .weekend-card-main {
    width: min(29%, 350px);
    min-height: 375px;
    opacity: 1;
    transform: scale(1);
    transform-origin: center center;
    transition:
      transform 260ms ease,
      box-shadow 260ms ease,
      opacity 260ms ease,
      border-color 260ms ease;
  }

  /* Day 2 is the default featured card: exactly 15% larger */
  .weekend-card-main {
    z-index: 4;
    transform: scale(1.15);
    border-color: rgba(185,149,69,0.52);
    box-shadow:
      0 32px 68px rgba(55,42,23,0.15),
      0 11px 24px rgba(55,42,23,0.08);
  }

  /*
    When any card is being hovered, first return every card
    to its normal base size...
  */
  .events-carousel:has(.weekend-card:hover) .weekend-card {
    transform: scale(1);
    z-index: 2;
  }

  /* ...then enlarge only the card under the pointer */
  .events-carousel .weekend-card:hover {
    transform: scale(1.15);
    z-index: 6;
    border-color: rgba(185,149,69,0.58);
    box-shadow:
      0 34px 72px rgba(55,42,23,0.17),
      0 12px 26px rgba(55,42,23,0.09);
  }

  /* Keep the card spacing comfortable while one card grows */
  .events-carousel {
    gap: clamp(34px, 3vw, 48px);
  }
}

/* No zoom interaction when the cards stack */
@media (max-width: 1100px) {
  .weekend-card,
  .weekend-card-side,
  .weekend-card-main,
  .weekend-card:hover,
  .events-carousel:has(.weekend-card:hover) .weekend-card {
    transform: none;
  }
}

/* =========================================================
   EVENTS PAGE — V6 HOVER SPECIFICITY FIX
   - hovered card now wins over the reset selector
   - zoom grows from the top centre to protect the heading
   ========================================================= */

@media (min-width: 1101px) {
  .weekend-card-side,
  .weekend-card-main {
    transform-origin: top center;
  }

  /* Reset every card while one card is actively hovered */
  .events-carousel:has(.weekend-card:hover) .weekend-card {
    transform: scale(1);
    z-index: 2;
  }

  /* Higher-specificity selector: the hovered card is the only enlarged card */
  .events-carousel:has(.weekend-card:hover) .weekend-card:hover {
    transform: scale(1.15);
    z-index: 6;
    border-color: rgba(185,149,69,0.58);
    box-shadow:
      0 34px 72px rgba(55,42,23,0.17),
      0 12px 26px rgba(55,42,23,0.09);
  }
}


/* =========================================================
   EVENTS PAGE — V7 CENTRED SIDE CARDS + NOTE BELOW
   - reserve the full 15%-zoomed card height in the layout
   - Day 1 and Day 3 sit vertically centred beside Day 2
   - whichever card is enlarged stays centred
   - note sits below all cards, never over Day 2
   - desktop remains locked to the viewport with no scrollbar
   ========================================================= */

@media (min-width: 1101px) {

  /*
    Base card height is 375px.
    375 × 1.15 = 431.25px.
    Reserving 432px means the enlarged card now has real layout room.
  */
  .events-carousel {
    min-height: 432px;
    align-items: center;
    overflow: visible;
  }

  /*
    Scale from the centre.
    Because the carousel now reserves the enlarged height,
    the card can grow in both directions without colliding with
    the heading or the note below.
  */
  .weekend-card-side,
  .weekend-card-main {
    transform-origin: center center;
  }

  /* Default state: Day 2 is featured */
  .weekend-card-main {
    transform: scale(1.15);
  }

  /* While hovering, return all cards to normal first */
  .events-carousel:has(.weekend-card:hover) .weekend-card {
    transform: scale(1);
    z-index: 2;
  }

  /* Then feature only the hovered card */
  .events-carousel:has(.weekend-card:hover) .weekend-card:hover {
    transform: scale(1.15);
    z-index: 6;
  }

  /* The note now follows the reserved carousel height */
  .events-note {
    position: relative;
    margin: 4px auto 0;
    padding: 0;
    line-height: 3;
  }

  /*
    Keep the full Events page inside the visible desktop viewport.
    The carousel has its own reserved zoom space, so hidden overflow
    no longer clips useful content or creates a scrollbar.
  */
  body.events-page.site-shell {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  body.events-page.site-shell main,
  .events-main {
    height: calc(100vh - 68px);
    min-height: 0;
    overflow: hidden;
  }

  .events-main {
    padding-top: 12px;
    padding-bottom: 6px;
  }

  .events-heading {
    margin-bottom: 6px;
  }

  .events-heading-divider {
    margin-top: 5px;
    margin-bottom: 4px;
  }

  .events-heading-copy {
    margin-bottom: 0;
  }
}

/* Keep the stacked responsive layout unaffected */
@media (max-width: 1100px) {
  .events-carousel {
    min-height: 0;
  }

  .weekend-card-side,
  .weekend-card-main {
    transform-origin: center center;
  }

  .events-note {
    margin-top: 20px;
  }
}


/* =========================================================
   V20 INDEX — FLOATING FOUR-CARD GARDEN
   - four equal cards
   - no cream "banner" treatment behind the cards
   - approved olive-tree artwork sits quietly to the right
   - cards float above the artwork
   - desktop remains a single-screen composition
   ========================================================= */

.cards-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper) !important;
}

/* Approved olive-tree artwork: deliberately modest and right-biased */
.cards-strip::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(470px, 31vw);
  aspect-ratio: 624 / 369;
  right: 5.5%;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/arvore.jpg") center / contain no-repeat;
  opacity: 0.34;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Remove all older decorative pseudo-elements from this section */
.cards-grid::after,
.side-olive::before {
  display: none !important;
  content: none !important;
}

.cards-grid {
  position: relative;
  z-index: 1;
  width: min(1480px, 100%);
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.55vw, 26px);
  align-items: center;
  transform: none;
}

/* A little more "floating stationery" and a little less solid block */
.info-card {
  min-width: 0;
  background: rgba(255, 250, 242, 0.86);
  border: 1px solid rgba(185, 149, 69, 0.16);
  box-shadow:
    0 16px 34px rgba(56, 42, 20, 0.13),
    0 5px 13px rgba(56, 42, 20, 0.06);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* Honeymoon card uses the approved tree artwork again as its image panel */
.honeymoon-card > img {
  object-position: 55% center;
}

.honeymoon-card .honeymoon-icon {
  width: 36px !important;
  height: 22px !important;
  max-width: 36px !important;
  max-height: 22px !important;
  opacity: 0.62;
}

.honeymoon-card p {
  font-size: clamp(11.2px, 0.76vw, 13.6px);
  line-height: 1.12;
  margin-top: 7px;
  margin-bottom: 8px;
}

/* Four cards need slightly tighter breathing room on normal desktop */
@media (min-width: 981px) {
  .cards-strip {
    padding-left: 4.2vw;
    padding-right: 4.2vw;
  }

  .info-card {
    min-height: 188px;
  }

  .info-card-text {
    padding-left: 17px;
    padding-right: 17px;
  }

  .info-card h2 {
    font-size: clamp(11.5px, 0.91vw, 15.5px);
    letter-spacing: 0.105em;
  }

  .info-card p {
    font-size: clamp(11.6px, 0.79vw, 14px);
  }

  .honeymoon-card p {
    font-size: clamp(10.8px, 0.72vw, 12.8px);
  }
}

@media (max-height: 760px) and (min-width: 981px) {
  .cards-strip::before {
    width: min(420px, 29vw);
    right: 6%;
    opacity: 0.30;
  }

  .info-card {
    min-height: 176px;
  }

  .info-card-text {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .honeymoon-card p {
    font-size: clamp(10.2px, 0.68vw, 12px);
    line-height: 1.08;
    margin-top: 5px;
    margin-bottom: 6px;
  }
}

/* Tablet: two cards per row, tree still drifts from the right */
@media (max-width: 1100px) and (min-width: 681px) {
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .cards-strip::before {
    width: min(500px, 52vw);
    right: -8%;
    top: 52%;
    opacity: 0.22;
  }

  .honeymoon-card p {
    font-size: 14px;
    line-height: 1.18;
  }
}

/* Phone: cards stack, tree becomes a quiet off-right watermark */
@media (max-width: 680px) {
  .cards-strip {
    padding: 28px 18px 34px;
  }

  .cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cards-strip::before {
    width: 520px;
    right: -250px;
    top: 28%;
    opacity: 0.15;
  }

  .info-card {
    background: rgba(255, 250, 242, 0.91);
  }

  .honeymoon-card p {
    font-size: 16px;
    line-height: 1.2;
  }
}


/* =========================================================
   V23 INDEX — SEAMLESS FULL-PAGE OLIVE TREE BACKGROUND
   - no visible rectangular JPG panel
   - original tree colours remain strong
   - artwork lives behind the whole homepage
   - left edge fades naturally into the paper
   - hero/cards remain transparent
   - countdown remains independent
   ========================================================= */

body.site-shell {
  position: relative;
  background: #fbf4e9;
}

/*
  Full homepage background layer.
  It spans the entire area under the navigation.
  The image itself remains full-colour.
*/
body.site-shell::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 68px 0 0 0;

  background:
    url("../img/arvore.jpg")
    right center / auto 100%
    no-repeat;

  opacity: 1;
  pointer-events: none;

  /*
    Fade the image's left edge into the paper so the JPG
    never reads as a rectangular panel.
  */
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 19%,
      rgba(0,0,0,0.28) 31%,
      rgba(0,0,0,0.72) 43%,
      #000 55%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 19%,
      rgba(0,0,0,0.28) 31%,
      rgba(0,0,0,0.72) 43%,
      #000 55%,
      #000 100%
    );
}

/*
  Subtle left-side paper tone for readability.
  This is not placed over the tree on the right.
*/
body.site-shell::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 68px 0 0 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(251,244,233,0.98) 0%,
      rgba(251,244,233,0.92) 26%,
      rgba(251,244,233,0.52) 41%,
      rgba(251,244,233,0.10) 54%,
      rgba(251,244,233,0.00) 66%
    );
}

/* HERO / BANNER */
.home-hero {
  position: relative;
  z-index: 1;
  background: transparent !important;
  color: var(--deep-olive);
}

.home-hero h1 {
  color: var(--deep-olive);
}

.home-hero h1 span {
  color: var(--gold);
}

.hero-line {
  color: var(--gold);
}

.hero-line::before,
.hero-line::after {
  background: rgba(185,149,69,0.58);
}

.hero-date {
  color: var(--deep-olive);
}

.hero-location {
  color: var(--gold);
}

.hero-tagline {
  color: var(--deep-olive);
}

.hero-button {
  color: var(--deep-olive);
  background: rgba(255,250,242,0.18);
  border-color: var(--gold);
}

.hero-button:hover,
.hero-button:focus {
  background: rgba(255,250,242,0.62);
}

/* CARDS SECTION */
.cards-strip {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.cards-strip::before {
  display: none !important;
  content: none !important;
}

/* Floating cards */
.info-card {
  background: rgba(255,250,242,0.82);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  box-shadow:
    0 16px 36px rgba(56,42,20,0.13),
    0 5px 14px rgba(56,42,20,0.06);
}

/* Countdown stays independent */
.countdown-band {
  position: relative;
  z-index: 2;
}

/* Tablet */
@media (max-width: 980px) {
  body.site-shell::before {
    inset: 0;
    background:
      url("../img/arvore.jpg")
      82% 18% / auto 72%
      no-repeat;

    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,0.25) 20%,
        rgba(0,0,0,0.76) 42%,
        #000 58%
      );

    mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,0.25) 20%,
        rgba(0,0,0,0.76) 42%,
        #000 58%
      );
  }

  body.site-shell::after {
    inset: 0;
    background:
      linear-gradient(
        180deg,
        rgba(251,244,233,0.78) 0%,
        rgba(251,244,233,0.36) 52%,
        rgba(251,244,233,0.68) 100%
      );
  }

  .info-card {
    background: rgba(255,250,242,0.88);
  }
}

/* Phone */
@media (max-width: 680px) {
  body.site-shell::before {
    background:
      url("../img/arvore.jpg")
      88% 14% / auto 60%
      no-repeat;
  }
}



/* =========================================================
   V24 INDEX — LOWER / SHORTER / WIDER CARDS
   ========================================================= */

@media (min-width: 981px) {

  /* Move the whole row slightly lower */
  .cards-grid {
    width: min(1540px, 100%);
    max-width: 1540px;
    gap: clamp(14px, 1.15vw, 20px);
    transform: translateY(18px);
  }

  /* Shorter cards */
  .info-card {
    min-height: 162px;
    height: 162px;
    grid-template-columns: 42% 58%;
  }

  .info-card-text {
    padding: 10px 16px 10px;
  }

  .info-card .card-icon-svg {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    margin-bottom: 5px;
  }

  .info-card:nth-of-type(3) .card-icon-svg {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    margin-bottom: 4px;
  }

  .honeymoon-card .honeymoon-icon {
    width: 31px !important;
    height: 18px !important;
    max-width: 31px !important;
    max-height: 18px !important;
    margin-bottom: 5px;
  }

  .info-card h2 {
    font-size: clamp(11px, 0.86vw, 14.5px);
    letter-spacing: 0.095em;
  }

  .info-card h2::after {
    width: 62px;
    margin-top: 7px;
  }

  .info-card p {
    font-size: clamp(10.9px, 0.74vw, 13px);
    line-height: 1.10;
    margin: 7px 0 7px;
  }

  .honeymoon-card p {
    font-size: clamp(10px, 0.66vw, 11.7px);
    line-height: 1.08;
    margin: 5px 0 6px;
  }

  .card-link {
    font-size: 8.5px;
    letter-spacing: 0.20em;
  }
}

/* Shorter laptop screens */
@media (max-height: 760px) and (min-width: 981px) {
  .cards-grid {
    transform: translateY(14px);
  }

  .info-card {
    height: 150px;
    min-height: 150px;
  }

  .info-card-text {
    padding: 8px 14px;
  }

  .info-card p {
    font-size: clamp(10.2px, 0.69vw, 11.8px);
    margin: 5px 0 6px;
  }

  .honeymoon-card p {
    font-size: clamp(9.5px, 0.62vw, 10.8px);
  }
}

/* Tablet/mobile remains stacked naturally */
@media (max-width: 980px) {
  .cards-grid {
    transform: none;
  }

  .info-card {
    height: auto;
    min-height: 0;
  }
}



/* =========================================================
   V25 INDEX — FOUR-CARD GEOMETRY LOCK
   - all four cards EXACTLY the same height
   - all four cards wider
   - icons identical size and baseline
   - headings/dividers aligned
   - links aligned at the bottom
   - card row moved closer to countdown
   ========================================================= */

@media (min-width: 981px) {

  /* Use much more of the page width */
  .cards-strip {
    padding: 8px 2vw 14px !important;
    display: grid;
    align-items: end !important;
    overflow: visible;
  }

  .cards-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1vw, 18px) !important;
    align-items: stretch !important;
    transform: none !important;
  }

  /* All four cards are physically identical */
  .info-card,
  .honeymoon-card {
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
    grid-template-columns: 40% 60% !important;
    align-self: stretch !important;
    overflow: hidden;
  }

  .info-card > img,
  .honeymoon-card > img {
    width: 100%;
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
    object-fit: cover;
  }

  /*
    Lock the text side to four rows:
    icon / heading+divider / copy / CTA
    This is what keeps everything perfectly aligned.
  */
  .info-card-text {
    display: grid !important;
    grid-template-rows: 30px 31px minmax(0, 1fr) 14px;
    align-items: start;
    min-width: 0;
    height: 100%;
    padding: 9px 15px 9px !important;
    overflow: hidden;
  }

  /* Identical icon box for EVERY card */
  .info-card .card-icon-svg,
  .info-card:nth-of-type(3) .card-icon-svg,
  .honeymoon-card .honeymoon-icon {
    grid-row: 1;
    display: block;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
    align-self: start;
    justify-self: center;
    margin: 0 auto !important;
    opacity: 0.68;
  }

  /* Fixed heading row means every divider lands on the same baseline */
  .info-card h2,
  .honeymoon-card h2 {
    grid-row: 2;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 31px;
    min-height: 31px;
    margin: 0 !important;
    padding: 1px 0 10px;
    white-space: nowrap;
    overflow: visible;
    font-size: clamp(11px, 0.82vw, 14px);
    line-height: 1;
    letter-spacing: 0.09em;
    text-align: center;
  }

  .info-card h2::after,
  .honeymoon-card h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 62px;
    height: 1px;
    margin: 0;
    transform: translateX(-50%);
    background: rgba(185,149,69,0.46);
  }

  /* Copy starts on exactly the same line in every card */
  .info-card p,
  .honeymoon-card p {
    grid-row: 3;
    align-self: start;
    margin: 3px 0 0 !important;
    font-size: clamp(10.7px, 0.70vw, 12.4px) !important;
    line-height: 1.10 !important;
    overflow: hidden;
  }

  /* CTA baseline is identical on all four */
  .card-link {
    grid-row: 4;
    align-self: end;
    margin: 0 !important;
    font-size: 8.4px !important;
    line-height: 1;
    letter-spacing: 0.19em !important;
    white-space: nowrap;
  }
}

/* Shorter desktop/laptop screens */
@media (max-height: 760px) and (min-width: 981px) {
  .cards-strip {
    padding-bottom: 10px !important;
  }

  .info-card,
  .honeymoon-card,
  .info-card > img,
  .honeymoon-card > img {
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
  }

  .info-card-text {
    grid-template-rows: 27px 29px minmax(0, 1fr) 13px;
    padding: 7px 13px 7px !important;
  }

  .info-card .card-icon-svg,
  .info-card:nth-of-type(3) .card-icon-svg,
  .honeymoon-card .honeymoon-icon {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
  }

  .info-card h2,
  .honeymoon-card h2 {
    height: 29px;
    min-height: 29px;
    font-size: clamp(10.5px, 0.77vw, 13px);
  }

  .info-card p,
  .honeymoon-card p {
    font-size: clamp(9.9px, 0.65vw, 11.4px) !important;
  }
}

/* Responsive layouts keep natural height */
@media (max-width: 980px) {
  .info-card,
  .honeymoon-card,
  .info-card > img,
  .honeymoon-card > img {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .info-card-text {
    display: flex !important;
  }
}



/* =========================================================
   V26 INDEX — CARD WIDTH BALANCE + PHOTO CROP FIX
   - cards slightly less wide ("halfway" adjustment)
   - preserve matched heights/alignment
   - lift card1pic and card4pic crop so heads are not cut off
   ========================================================= */

@media (min-width: 981px) {

  /* Pull the grid in slightly from the extreme edges */
  .cards-strip {
    padding-left: 4.2vw !important;
    padding-right: 4.2vw !important;
  }

  .cards-grid {
    width: min(92vw, 1380px) !important;
    max-width: min(92vw, 1380px) !important;
    margin: 0 auto !important;
    gap: clamp(16px, 1.1vw, 20px) !important;
  }

  /* Slightly narrower card proportions than the previous version */
  .info-card,
  .honeymoon-card {
    grid-template-columns: 38% 62% !important;
  }

  /* Keep all cards equal, but show a little more of the top of the images */
  .cards-grid > article:nth-child(1) > img {
    object-position: center 18% !important;
  }

  .cards-grid > article:nth-child(4) > img {
    object-position: center 16% !important;
  }
}

/* Shorter desktop/laptop screens */
@media (max-height: 760px) and (min-width: 981px) {
  .cards-strip {
    padding-left: 4.4vw !important;
    padding-right: 4.4vw !important;
  }

  .cards-grid {
    width: min(91vw, 1340px) !important;
    max-width: min(91vw, 1340px) !important;
    gap: clamp(15px, 1vw, 18px) !important;
  }

  .cards-grid > article:nth-child(1) > img {
    object-position: center 16% !important;
  }

  .cards-grid > article:nth-child(4) > img {
    object-position: center 14% !important;
  }
}



/* =========================================================
   V27 INDEX — CARDS +10% TALLER / +10% WIDER
   - makes the four cards about 10% taller
   - makes the grid/card area a bit wider without going edge-to-edge
   - keeps equal heights, icon alignment, and safer photo crops
   ========================================================= */

@media (min-width: 981px) {
  .cards-strip {
    padding-left: 2.8vw !important;
    padding-right: 2.8vw !important;
  }

  .cards-grid {
    width: min(95vw, 1440px) !important;
    max-width: min(95vw, 1440px) !important;
    gap: clamp(16px, 1vw, 20px) !important;
  }

  .info-card,
  .honeymoon-card {
    height: 183px !important;
    min-height: 183px !important;
    max-height: 183px !important;
    grid-template-columns: 39% 61% !important;
  }

  .info-card > img,
  .honeymoon-card > img {
    height: 183px !important;
    min-height: 183px !important;
    max-height: 183px !important;
  }

  .info-card-text {
    grid-template-rows: 31px 33px minmax(0, 1fr) 15px !important;
    padding: 10px 16px 10px !important;
  }

  .info-card .card-icon-svg,
  .info-card:nth-of-type(3) .card-icon-svg,
  .honeymoon-card .honeymoon-icon {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
    max-width: 29px !important;
    max-height: 29px !important;
  }

  .info-card h2,
  .honeymoon-card h2 {
    height: 33px !important;
    min-height: 33px !important;
  }

  .cards-grid > article:nth-child(1) > img {
    object-position: center 14% !important;
  }

  .cards-grid > article:nth-child(4) > img {
    object-position: center 12% !important;
  }
}

@media (max-height: 760px) and (min-width: 981px) {
  .cards-strip {
    padding-left: 3.1vw !important;
    padding-right: 3.1vw !important;
  }

  .cards-grid {
    width: min(94vw, 1400px) !important;
    max-width: min(94vw, 1400px) !important;
    gap: clamp(15px, 0.95vw, 18px) !important;
  }

  .info-card,
  .honeymoon-card,
  .info-card > img,
  .honeymoon-card > img {
    height: 169px !important;
    min-height: 169px !important;
    max-height: 169px !important;
  }

  .info-card-text {
    grid-template-rows: 29px 31px minmax(0, 1fr) 14px !important;
    padding: 8px 14px 8px !important;
  }

  .cards-grid > article:nth-child(1) > img {
    object-position: center 12% !important;
  }

  .cards-grid > article:nth-child(4) > img {
    object-position: center 10% !important;
  }
}



/* =========================================================
   V28 INDEX — GEL'S DESKTOP SCREEN TUNING
   Target: wide desktop viewport around 800–880px high
   - slightly more breathing room between cards
   - cards remain comfortably tall
   - width pulled back just enough to stop the "one long slab" look
   - card row sits close to countdown without touching it
   ========================================================= */

@media (min-width: 1500px) and (min-height: 761px) and (max-height: 900px) {

  /*
    Your screenshots sit in this viewport range.
    Give the card section just enough room while keeping
    the countdown visibly anchored to the bottom.
  */
  body.site-shell main {
    grid-template-rows: 52.5% 35.5% 12% !important;
  }

  .cards-strip {
    padding:
      8px
      3.6vw
      7px
      3.6vw !important;
    align-items: end !important;
  }

  /*
    Wider than the earlier "halfway" version, but not as stretched
    as the +10% version. The larger gaps do most of the visual work.
  */
  .cards-grid {
    width: min(93vw, 1460px) !important;
    max-width: min(93vw, 1460px) !important;
    margin: 0 auto !important;
    gap: 28px !important;
  }

  /* About 7% taller than the aligned 166px version */
  .info-card,
  .honeymoon-card,
  .info-card > img,
  .honeymoon-card > img {
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
  }

  .info-card,
  .honeymoon-card {
    grid-template-columns: 39% 61% !important;
  }

  .info-card-text {
    grid-template-rows:
      30px
      32px
      minmax(0, 1fr)
      15px !important;
    padding: 9px 15px 9px !important;
  }

  /* Keep all four icons visually identical */
  .info-card .card-icon-svg,
  .info-card:nth-of-type(3) .card-icon-svg,
  .honeymoon-card .honeymoon-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }

  .info-card h2,
  .honeymoon-card h2 {
    height: 32px !important;
    min-height: 32px !important;
  }

  /* Preserve the safer portrait crops */
  .cards-grid > article:nth-child(1) > img {
    object-position: center 13% !important;
  }

  .cards-grid > article:nth-child(4) > img {
    object-position: center 11% !important;
  }
}

/* Slightly shorter large laptop/browser viewport */
@media (min-width: 1500px) and (min-height: 700px) and (max-height: 760px) {
  .cards-strip {
    padding-bottom: 6px !important;
  }

  .cards-grid {
    width: min(92.5vw, 1420px) !important;
    max-width: min(92.5vw, 1420px) !important;
    gap: 26px !important;
  }

  .info-card,
  .honeymoon-card,
  .info-card > img,
  .honeymoon-card > img {
    height: 164px !important;
    min-height: 164px !important;
    max-height: 164px !important;
  }
}



/* =========================================================
   V29 INDEX — +50% CARD SPACING
   - 50% more space between cards
   - 50% more space between cards and countdown/footer
   - keeps card size, alignment and photo crops unchanged
   ========================================================= */

@media (min-width: 1500px) and (min-height: 761px) and (max-height: 900px) {
  .cards-grid {
    gap: 42px !important; /* 28px × 1.5 */
  }

  .cards-strip {
    padding-bottom: 11px !important; /* 7px × 1.5, rounded */
  }
}

@media (min-width: 1500px) and (min-height: 700px) and (max-height: 760px) {
  .cards-grid {
    gap: 39px !important; /* 26px × 1.5 */
  }

  .cards-strip {
    padding-bottom: 9px !important; /* 6px × 1.5 */
  }
}



/* =========================================================
   V30 INDEX — WIDER CARDS + MORE FOOTER SPACE
   - keep card-to-card gap unchanged
   - increase space between cards and footer by 100%
   - make cards about 15% wider
   - increase text slightly (about 1–2px visually)
   ========================================================= */

@media (min-width: 1500px) and (min-height: 761px) and (max-height: 900px) {

  /* Keep the same gap between cards */
  .cards-grid {
    width: min(96vw, 1640px) !important;
    max-width: min(96vw, 1640px) !important;
    gap: 42px !important;
  }

  /* Double the space to the footer/countdown from the current 11px */
  .cards-strip {
    padding-bottom: 22px !important;
    padding-left: 1.9vw !important;
    padding-right: 1.9vw !important;
  }

  /* Slightly larger text */
  .info-card h2,
  .honeymoon-card h2 {
    font-size: clamp(12px, 0.9vw, 15.5px) !important;
  }

  .info-card p,
  .honeymoon-card p {
    font-size: clamp(11.8px, 0.8vw, 14px) !important;
    line-height: 1.14 !important;
  }

  .card-link {
    font-size: 9.6px !important;
  }
}

@media (min-width: 1500px) and (min-height: 700px) and (max-height: 760px) {

  .cards-grid {
    width: min(95vw, 1600px) !important;
    max-width: min(95vw, 1600px) !important;
    gap: 39px !important;
  }

  /* Double the space to the footer/countdown from the current 9px */
  .cards-strip {
    padding-bottom: 18px !important;
    padding-left: 2.2vw !important;
    padding-right: 2.2vw !important;
  }

  .info-card h2,
  .honeymoon-card h2 {
    font-size: clamp(11.4px, 0.84vw, 14px) !important;
  }

  .info-card p,
  .honeymoon-card p {
    font-size: clamp(10.8px, 0.74vw, 12.8px) !important;
    line-height: 1.12 !important;
  }

  .card-link {
    font-size: 9px !important;
  }
}



/* =========================================================
   V31 INDEX — REDUCED BROWSER / TABLET ALIGNMENT
   Target: browser widths 681px–980px
   - full-screen desktop remains untouched
   - two equal cards per row
   - every card has identical total height
   - every image has identical height
   - icons, dividers, copy and CTA align
   - consistent portrait crop positions
   ========================================================= */

@media (min-width: 681px) and (max-width: 980px) {

  body.site-shell {
    height: auto !important;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.site-shell main {
    height: auto !important;
    display: block !important;
    overflow: visible !important;
  }

  /* Two equal columns */
  .cards-strip {
    height: auto !important;
    padding: 34px 5vw 28px !important;
    overflow: visible !important;
  }

  .cards-grid {
    width: min(92vw, 760px) !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 430px !important;
    gap: 28px 22px !important;
    align-items: stretch !important;
    transform: none !important;
  }

  /* Every card is exactly the same size */
  .info-card,
  .honeymoon-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 250px 180px !important;

    width: 100% !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;

    align-self: stretch !important;
    overflow: hidden !important;
  }

  /* Every card image uses the same image box */
  .info-card > img,
  .honeymoon-card > img {
    display: block !important;
    width: 100% !important;
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    object-fit: cover !important;
  }

  /* Safer crops for the two portrait photos */
  .cards-grid > article:nth-child(1) > img {
    object-position: center 16% !important;
  }

  .cards-grid > article:nth-child(2) > img {
    object-position: center 48% !important;
  }

  .cards-grid > article:nth-child(3) > img {
    object-position: center 42% !important;
  }

  .cards-grid > article:nth-child(4) > img {
    object-position: center 14% !important;
  }

  /*
    Identical text geometry on all cards:
    icon / heading+divider / description / CTA
  */
  .info-card-text {
    display: grid !important;
    grid-template-rows: 32px 36px minmax(0, 1fr) 18px !important;
    align-items: start !important;

    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;

    padding: 12px 18px 12px !important;
    overflow: hidden !important;
  }

  /* All icons exactly the same */
  .info-card .card-icon-svg,
  .info-card:nth-of-type(3) .card-icon-svg,
  .honeymoon-card .honeymoon-icon {
    grid-row: 1 !important;
    display: block !important;

    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;

    margin: 0 auto !important;
    justify-self: center !important;
    align-self: start !important;

    object-fit: contain !important;
    opacity: 0.68;
  }

  /* Same heading and divider baseline */
  .info-card h2,
  .honeymoon-card h2 {
    grid-row: 2 !important;

    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    height: 36px !important;
    min-height: 36px !important;

    margin: 0 !important;
    padding: 2px 0 11px !important;

    white-space: nowrap !important;

    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 0.10em !important;
    text-align: center !important;
  }

  .info-card h2::after,
  .honeymoon-card h2::after {
    content: "" !important;
    position: absolute !important;

    left: 50% !important;
    bottom: 3px !important;

    width: 66px !important;
    height: 1px !important;

    margin: 0 !important;
    transform: translateX(-50%) !important;

    background: rgba(185,149,69,0.46) !important;
  }

  /* Copy starts at the same point on every card */
  .info-card p,
  .honeymoon-card p {
    grid-row: 3 !important;
    align-self: start !important;

    margin: 5px 0 0 !important;

    font-size: 14px !important;
    line-height: 1.16 !important;

    overflow: hidden !important;
  }

  /* CTA always sits on exactly the same baseline */
  .card-link {
    grid-row: 4 !important;
    align-self: end !important;

    margin: 0 !important;

    font-size: 9.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.20em !important;

    white-space: nowrap !important;
  }

  /* Keep consistent space before countdown */
  .countdown-band {
    margin-top: 0 !important;
  }
}


/* =========================================================
   V31B — PHONE ALIGNMENT
   Same idea, but one equal-width card per row.
   ========================================================= */

@media (max-width: 680px) {

  .cards-grid {
    width: min(92vw, 430px) !important;
    max-width: 430px !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 440px !important;

    gap: 22px !important;
  }

  .info-card,
  .honeymoon-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 255px 185px !important;

    width: 100% !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;

    overflow: hidden !important;
  }

  .info-card > img,
  .honeymoon-card > img {
    width: 100% !important;
    height: 255px !important;
    min-height: 255px !important;
    max-height: 255px !important;

    object-fit: cover !important;
  }

  .cards-grid > article:nth-child(1) > img {
    object-position: center 16% !important;
  }

  .cards-grid > article:nth-child(4) > img {
    object-position: center 14% !important;
  }

  .info-card-text {
    display: grid !important;
    grid-template-rows: 32px 37px minmax(0, 1fr) 18px !important;

    width: 100% !important;
    height: 185px !important;

    padding: 12px 20px !important;
  }

  .info-card .card-icon-svg,
  .info-card:nth-of-type(3) .card-icon-svg,
  .honeymoon-card .honeymoon-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;

    margin: 0 auto !important;
  }

  .info-card h2,
  .honeymoon-card h2 {
    font-size: 15px !important;
    height: 37px !important;
    min-height: 37px !important;
  }

  .info-card p,
  .honeymoon-card p {
    font-size: 14px !important;
    line-height: 1.17 !important;
    margin-top: 5px !important;
  }

  .card-link {
    font-size: 9.5px !important;
  }
}



/* =========================================================
   V32 INDEX — OLIVE TREE + MATCHING PAPER TEXTURE
   FINAL BACKGROUND COMPOSITION

   Layer 1: exact paper texture extracted from arvore.jpg
   Layer 2: full original olive-tree artwork, never distorted
   Layer 3: hero and cards

   Header/navigation and countdown/footer retain their own backgrounds.
   ========================================================= */

/* Disable the older body-level tree/veil experiments. */
body.site-shell::before,
body.site-shell::after {
  display: none !important;
  content: none !important;
}

/* The entire INDEX content area receives the matching paper texture. */
body.site-shell main {
  position: relative !important;
  isolation: isolate;
  background-color: #f4ede1 !important;
  background-image: url("../img/backgrounds/paper_texture_olive_tree.jpg") !important;
  background-repeat: repeat !important;
  background-position: top left !important;
  background-size: 760px 760px !important;
}

/*
  Put the ORIGINAL tree artwork over that texture.
  'contain' preserves its 624:369 aspect ratio, so there is zero stretching.
  The feathering occurs only in the empty paper margins of the artwork,
  helping the original JPG disappear into the matching texture beneath it.
*/
body.site-shell main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: url("../img/arvore.jpg");
  background-repeat: no-repeat;
  background-position: 72% center;
  background-size: contain;

  opacity: 1;

  -webkit-mask-image: radial-gradient(
    ellipse 67% 88% at 72% 50%,
    #000 0%,
    #000 72%,
    rgba(0,0,0,.88) 81%,
    rgba(0,0,0,.42) 91%,
    transparent 100%
  );

  mask-image: radial-gradient(
    ellipse 67% 88% at 72% 50%,
    #000 0%,
    #000 72%,
    rgba(0,0,0,.88) 81%,
    rgba(0,0,0,.42) 91%,
    transparent 100%
  );
}

/* All index content floats above the artwork. */
body.site-shell main > * {
  position: relative;
  z-index: 1;
}

/* Hero and cards must not paint over the artwork. */
body.site-shell .home-hero,
body.site-shell .cards-strip {
  background: transparent !important;
}

body.site-shell .cards-strip::before {
  display: none !important;
  content: none !important;
}

/* Countdown/footer remains a solid independent band. */
body.site-shell .countdown-band {
  position: relative;
  z-index: 3;
}

/* Tablet: keep a substantial tree without distortion. */
@media (min-width: 681px) and (max-width: 980px) {
  body.site-shell main {
    background-size: 680px 680px !important;
  }

  body.site-shell main::before {
    background-position: 70% 10%;
    background-size: 118% auto;

    -webkit-mask-image: radial-gradient(
      ellipse 82% 38% at 70% 15%,
      #000 0%,
      #000 70%,
      rgba(0,0,0,.55) 88%,
      transparent 100%
    );

    mask-image: radial-gradient(
      ellipse 82% 38% at 70% 15%,
      #000 0%,
      #000 70%,
      rgba(0,0,0,.55) 88%,
      transparent 100%
    );
  }
}

/* Phone: single tree remains visible behind the opening section. */
@media (max-width: 680px) {
  body.site-shell main {
    background-size: 600px 600px !important;
  }

  body.site-shell main::before {
    background-position: 72% 6%;
    background-size: 150% auto;

    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 28%,
      rgba(0,0,0,.52) 39%,
      transparent 52%
    );

    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 28%,
      rgba(0,0,0,.52) 39%,
      transparent 52%
    );
  }
}

/* =========================================================
   V33 INDEX — EXACT TEXTURE SCALE MATCH
   Fixes the paper grain looking enlarged/stretched.

   IMPORTANT:
   - arvore.jpg is the high-resolution 2048 x 1160 original.
   - paper_texture_olive_tree_native.jpg is an UNRESIZED
     480 x 480 crop taken directly from that same image.
   - the texture tile is scaled by the exact same ratio as
     the tree artwork, so the fibres match visually.
   ========================================================= */

body.site-shell main {
  background-color: #f7f0e4 !important;
  background-image:
    url("../img/backgrounds/paper_texture_olive_tree_native.jpg") !important;
  background-repeat: repeat !important;
  background-position: left top !important;

  /*
     Desktop tree height = 114% of main height.
     Native texture crop = 480px high.
     Native tree = 1160px high.
     114% × (480 / 1160) = 47.1724%.

     This makes the repeated paper fibres the SAME scale as
     the paper visible inside the scaled tree JPG.
  */
  background-size: auto 47.1724% !important;
}

body.site-shell main::before {
  background-image: url("../img/arvore.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: auto 114% !important;
  background-position: 105% 52% !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Narrow desktop / tablet: scale by WIDTH and match the texture to it. */
@media (min-width: 681px) and (max-width: 980px) {
  body.site-shell main {
    /* 130% × (480 / 2048) = 30.46875% */
    background-size: 30.46875% auto !important;
  }

  body.site-shell main::before {
    background-size: 130% auto !important;
    background-position: 112% 9% !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* Phone: same principle, with a larger width-relative tree. */
@media (max-width: 680px) {
  body.site-shell main {
    /* 165% × (480 / 2048) = 38.671875% */
    background-size: 38.671875% auto !important;
  }

  body.site-shell main::before {
    background-size: 165% auto !important;
    background-position: 118% 5% !important;
    opacity: 1 !important;
    filter: none !important;
  }
}



/* =========================================================
   V34 INDEX — NARROW SCREEN HERO READABILITY
   Full desktop remains untouched.
   Improves hero readability between 681px and 980px.
   ========================================================= */

@media (min-width: 681px) and (max-width: 980px) {

  /*
    Move the tree farther right so it no longer sits directly
    behind the wedding date / Malta / tagline.
    Texture scale remains exactly as set in V33.
  */
  body.site-shell main::before {
    background-size: 122% auto !important;
    background-position: 148% 9% !important;
  }

  /*
    Restore some presence to the hero on narrower screens.
    Older responsive rules shrink this area too aggressively.
  */
  .home-hero-content {
    width: min(520px, 78vw) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 18px 26px 20px !important;

    transform: none !important;
    transform-origin: center center !important;

    /*
      Not a card or visible panel. This is only a very soft
      paper halo to stop foliage from reducing contrast.
    */
    background:
      radial-gradient(
        ellipse at center,
        rgba(247,240,228,0.88) 0%,
        rgba(247,240,228,0.76) 52%,
        rgba(247,240,228,0.30) 76%,
        rgba(247,240,228,0.00) 100%
      ) !important;
  }

  .home-hero h1 {
    font-size: clamp(50px, 8vw, 66px) !important;
    line-height: 0.94 !important;
  }

  .hero-line {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .hero-date {
    font-size: 16px !important;
    line-height: 1 !important;
    letter-spacing: 0.34em !important;
  }

  .hero-location {
    font-size: 21px !important;
    line-height: 1 !important;
    margin-top: 7px !important;
    margin-bottom: 9px !important;
  }

  .hero-tagline {
    font-size: 17px !important;
    line-height: 1.10 !important;
    margin-bottom: 14px !important;
  }

  .hero-button {
    min-width: 214px !important;
    height: 42px !important;
    font-size: 10px !important;
    letter-spacing: 0.24em !important;
    background: rgba(247,240,228,0.54) !important;
  }
}


/* =========================================================
   V34B — PHONE HERO READABILITY
   ========================================================= */

@media (max-width: 680px) {

  /* Keep the tree visible, but away from the central copy */
  body.site-shell main::before {
    background-size: 150% auto !important;
    background-position: 164% 5% !important;
  }

  .home-hero-content {
    width: min(92vw, 430px) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 18px 20px 20px !important;

    transform: none !important;

    background:
      radial-gradient(
        ellipse at center,
        rgba(247,240,228,0.92) 0%,
        rgba(247,240,228,0.80) 54%,
        rgba(247,240,228,0.35) 77%,
        rgba(247,240,228,0.00) 100%
      ) !important;
  }

  .home-hero h1 {
    font-size: clamp(44px, 12vw, 58px) !important;
  }

  .hero-date {
    font-size: 14px !important;
  }

  .hero-location {
    font-size: 19px !important;
  }

  .hero-tagline {
    font-size: 16px !important;
    line-height: 1.10 !important;
  }

  .hero-button {
    min-width: 200px !important;
    height: 41px !important;
    font-size: 9.5px !important;
  }
}



/* =========================================================
   V35 INDEX — CINZEL HERO TYPOGRAPHY
   Gel & Noel + date + Malta
   ========================================================= */

.home-hero h1,
.hero-date,
.hero-location {
  font-family: "Cinzel", serif !important;
}

/* Keep the large names elegant rather than heavy */
.home-hero h1 {
  font-weight: 400 !important;
}

/* Ampersand keeps its existing gold colour, but now also uses Cinzel */
.home-hero h1 span {
  font-family: "Cinzel", serif !important;
  font-weight: 400 !important;
}

/* Ceremonial date/location treatment */
.hero-date,
.hero-location {
  font-weight: 400 !important;
}



/* =========================================================
   V36 INDEX — CARD TYPOGRAPHY / READABILITY / INTERACTION
   - card text panels more opaque
   - Cinzel headings + CTA
   - Inter descriptions
   - desktop hover enlargement
   - larger readable mobile/tablet text
   ========================================================= */

/* Card text panels: keep the tree from showing through the copy */
.info-card-text {
  background: rgba(255, 250, 242, 0.95) !important;
}

/* New card typography system */
.info-card h2,
.honeymoon-card h2,
.card-link {
  font-family: "Cinzel", serif !important;
}

.info-card p,
.honeymoon-card p {
  font-family: "Inter", Arial, sans-serif !important;
  font-weight: 400 !important;
}

.info-card p strong,
.honeymoon-card p strong {
  font-family: "Inter", Arial, sans-serif !important;
  font-weight: 600 !important;
}

/* Slightly clearer desktop body text */
@media (min-width: 981px) {
  .info-card p,
  .honeymoon-card p {
    font-size: clamp(11.8px, 0.76vw, 13.4px) !important;
    line-height: 1.22 !important;
  }

  .info-card h2,
  .honeymoon-card h2 {
    font-weight: 400 !important;
  }

  .card-link {
    font-weight: 500 !important;
  }
}


/* ---------------------------------------------------------
   HOVER: enlarge the whole card for easier reading
   Only applies to devices that actually have a mouse/pointer.
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  .cards-strip,
  .cards-grid {
    overflow: visible !important;
  }

  .info-card,
  .honeymoon-card {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition:
      transform 220ms ease,
      box-shadow 220ms ease,
      border-color 220ms ease;
    will-change: transform;
  }

  .info-card:hover,
  .info-card:focus-within,
  .honeymoon-card:hover,
  .honeymoon-card:focus-within {
    z-index: 30;
    transform: translateY(-5px) scale(1.075);
    box-shadow:
      0 24px 50px rgba(56, 42, 20, 0.20),
      0 8px 20px rgba(56, 42, 20, 0.10) !important;
    border-color: rgba(185, 149, 69, 0.32) !important;
  }
}


/* ---------------------------------------------------------
   TABLET / REDUCED BROWSER
   Larger text while preserving the equal-card geometry.
   --------------------------------------------------------- */

@media (min-width: 681px) and (max-width: 980px) {

  .info-card h2,
  .honeymoon-card h2 {
    font-size: 16px !important;
    letter-spacing: 0.085em !important;
  }

  .info-card p,
  .honeymoon-card p {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  .card-link {
    font-size: 10px !important;
    letter-spacing: 0.17em !important;
  }

  .info-card-text {
    background: rgba(255, 250, 242, 0.97) !important;
  }
}


/* ---------------------------------------------------------
   PHONE
   Mobile does not have hover, so readability comes from
   larger typography and a highly legible paper panel.
   --------------------------------------------------------- */

@media (max-width: 680px) {

  .info-card h2,
  .honeymoon-card h2 {
    font-size: 17px !important;
    letter-spacing: 0.075em !important;
  }

  .info-card p,
  .honeymoon-card p {
    font-size: 16px !important;
    line-height: 1.28 !important;
  }

  .card-link {
    font-size: 10.5px !important;
    letter-spacing: 0.16em !important;
  }

  .info-card-text {
    background: rgba(255, 250, 242, 0.98) !important;
  }
}



/* =========================================================
   V37 INDEX — CARD CTA SIZE + ">" ARROW
   CTA remains smaller than the card description text.
   ========================================================= */

.card-link {
  font-size: 11.4px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
}

.card-arrow {
  display: inline-block;
  padding-left: 5px !important;
  font-size: 1.08em !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: #b99545 !important;
}

/* Reduced browser / tablet */
@media (min-width: 681px) and (max-width: 980px) {
  .card-link {
    font-size: 12.5px !important;
    letter-spacing: 0.15em !important;
  }
}

/* Phone */
@media (max-width: 680px) {
  .card-link {
    font-size: 13.5px !important;
    letter-spacing: 0.14em !important;
  }
}



/* =========================================================
   V38 HOME INTRO — FOUR-PHOTO CINEMATIC ENTRANCE
   Desktop: four vertical full-height photo panels
   Phone: 2x2 photographic grid
   Photos then fly into their corresponding homepage cards
   ========================================================= */

.gn-home-intro {
  display: none;
}

/* Intro is enabled only when the tiny head script adds this class */
html.gn-intro-pending .gn-home-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1fr;
  overflow: hidden;
  background: #f7f0e4;
  pointer-events: none;
}

.gn-intro-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #f7f0e4;
  box-shadow: inset -1px 0 0 rgba(247, 240, 228, 0.28);
}

.gn-intro-panel:last-child {
  box-shadow: none;
}

.gn-intro-panel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.015);
  backface-visibility: hidden;
}

/* Editorial crops for the opening frame */
.gn-intro-panel:nth-child(1) img { object-position: 50% 22%; }
.gn-intro-panel:nth-child(2) img { object-position: 50% 48%; }
.gn-intro-panel:nth-child(3) img { object-position: 50% 42%; }
.gn-intro-panel:nth-child(4) img { object-position: 50% 18%; }

/*
  Keep the actual page laid out so JavaScript can measure the
  destination cards, but hide it visually until the flight begins.
*/
html.gn-intro-pending body > .browser-bar,
html.gn-intro-pending body > .top-nav,
html.gn-intro-pending body > main {
  opacity: 0 !important;
  transition: opacity 760ms ease !important;
}

html.gn-intro-pending.gn-intro-revealing body > .browser-bar,
html.gn-intro-pending.gn-intro-revealing body > .top-nav,
html.gn-intro-pending.gn-intro-revealing body > main {
  opacity: 1 !important;
}

/* Prevent duplicate photographs while the flying copies are arriving */
html.gn-intro-pending .cards-grid > .info-card > img:first-child {
  opacity: 0 !important;
  transition: opacity 180ms ease !important;
}

html.gn-intro-pending.gn-intro-settled .cards-grid > .info-card > img:first-child {
  opacity: 1 !important;
}

/* Once panels start moving, the overlay itself becomes transparent */
html.gn-intro-flight .gn-home-intro {
  background: transparent;
  overflow: visible;
}

html.gn-intro-flight .gn-intro-panel {
  box-shadow:
    0 16px 40px rgba(42, 32, 20, 0.12);
}

/* Phone composition */
@media (max-width: 680px) {
  html.gn-intro-pending .gn-home-intro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .gn-intro-panel {
    box-shadow:
      inset -1px 0 0 rgba(247, 240, 228, 0.24),
      inset 0 -1px 0 rgba(247, 240, 228, 0.24);
  }
}

/* Respect guests who ask their device for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gn-home-intro {
    display: none !important;
  }

  html.gn-intro-pending body > .browser-bar,
  html.gn-intro-pending body > .top-nav,
  html.gn-intro-pending body > main,
  html.gn-intro-pending .cards-grid > .info-card > img:first-child {
    opacity: 1 !important;
  }
}



/* =========================================================
   V40 — FINAL HOMEPAGE DESKTOP COMPOSITION
   Target: approved screenshot at normal 100% browser zoom.
   EN + PT use exactly the same geometry.
   ========================================================= */

@media (min-width: 1200px) {

  body.home-page {
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  body.home-page main {
    height: calc(100vh - 78px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 52.5% 35.5% 12% !important;
    overflow: hidden !important;
  }

  /* Approved hero proportions */
  body.home-page .home-hero {
    height: 100% !important;
    min-height: 0 !important;
    padding: clamp(24px, 3vh, 38px) 9vw 12px !important;
    display: flex !important;
    align-items: center !important;
  }

  body.home-page .home-hero-content {
    width: min(640px, 100%) !important;
  }

  body.home-page .home-hero h1 {
    font-size: clamp(68px, 6.2vw, 92px) !important;
    line-height: 0.88 !important;
    margin: 0 !important;
  }

  body.home-page .hero-line {
    width: min(590px, 100%) !important;
    margin: 18px auto 14px !important;
  }

  body.home-page .hero-date {
    margin: 0 !important;
    font-size: clamp(18px, 1.45vw, 24px) !important;
    line-height: 1 !important;
    letter-spacing: 0.36em !important;
  }

  body.home-page .hero-location {
    margin: 8px 0 10px !important;
    font-size: clamp(20px, 1.55vw, 25px) !important;
    line-height: 1 !important;
    letter-spacing: 0.28em !important;
  }

  body.home-page .hero-tagline {
    margin: 0 0 14px !important;
    font-size: clamp(17px, 1.25vw, 20px) !important;
    line-height: 1.08 !important;
  }

  body.home-page .hero-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 214px !important;
    height: 42px !important;
    padding: 0 22px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.25em !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Approved card row */
  body.home-page .cards-strip {
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px 1.9vw 22px !important;
    display: grid !important;
    align-items: end !important;
    overflow: visible !important;
  }

  body.home-page .cards-grid {
    width: min(96vw, 1640px) !important;
    max-width: 1640px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 42px !important;
    align-items: stretch !important;
    transform: none !important;
  }

  body.home-page .info-card,
  body.home-page .honeymoon-card {
    width: 100% !important;
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
    grid-template-columns: 39% 61% !important;
    overflow: hidden !important;
  }

  body.home-page .info-card > img,
  body.home-page .honeymoon-card > img {
    width: 100% !important;
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
    object-fit: cover !important;
  }

  body.home-page .cards-grid > article:nth-child(1) > img {
    object-position: center 13% !important;
  }

  body.home-page .cards-grid > article:nth-child(2) > img {
    object-position: center 48% !important;
  }

  body.home-page .cards-grid > article:nth-child(3) > img {
    object-position: center 42% !important;
  }

  body.home-page .cards-grid > article:nth-child(4) > img {
    object-position: center 11% !important;
  }

  body.home-page .info-card-text {
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
    padding: 9px 15px 9px !important;
    display: grid !important;
    grid-template-rows: 30px 32px minmax(0, 1fr) 16px !important;
    background: rgba(255, 250, 242, 0.95) !important;
    overflow: hidden !important;
  }

  body.home-page .info-card .card-icon-svg,
  body.home-page .info-card:nth-of-type(3) .card-icon-svg,
  body.home-page .honeymoon-card .honeymoon-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    margin: 0 auto !important;
  }

  body.home-page .info-card h2,
  body.home-page .honeymoon-card h2 {
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 1px 0 10px !important;
    font-size: clamp(12px, 0.78vw, 15px) !important;
    line-height: 1 !important;
    letter-spacing: 0.09em !important;
  }

  body.home-page .info-card p,
  body.home-page .honeymoon-card p {
    margin: 4px 0 0 !important;
    font-size: clamp(11.5px, 0.68vw, 13px) !important;
    line-height: 1.16 !important;
    overflow: hidden !important;
  }

  body.home-page .card-link {
    margin: 0 !important;
    align-self: end !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.16em !important;
    white-space: nowrap !important;
  }

  body.home-page .countdown-band {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  /* Portuguese is naturally longer. Keep the SAME card size,
     only make the paragraph fractionally smaller where necessary. */
  html[lang="pt-BR"] body.home-page .info-card p,
  html[lang="pt-BR"] body.home-page .honeymoon-card p {
    font-size: clamp(10.8px, 0.63vw, 12.1px) !important;
    line-height: 1.14 !important;
  }

  html[lang="pt-BR"] body.home-page .card-link {
    font-size: 9.8px !important;
    letter-spacing: 0.13em !important;
  }
}

/* Slightly shorter desktop windows: preserve the SAME composition,
   only shave a few pixels from the cards rather than changing layout. */
@media (min-width: 1200px) and (max-height: 760px) {

  body.home-page main {
    grid-template-rows: 53% 35% 12% !important;
  }

  body.home-page .home-hero {
    padding-top: 18px !important;
    padding-bottom: 8px !important;
  }

  body.home-page .home-hero h1 {
    font-size: clamp(62px, 5.6vw, 82px) !important;
  }

  body.home-page .hero-line {
    margin-top: 13px !important;
    margin-bottom: 10px !important;
  }

  body.home-page .hero-tagline {
    margin-bottom: 10px !important;
  }

  body.home-page .hero-button {
    height: 38px !important;
  }

  body.home-page .cards-strip {
    padding-bottom: 14px !important;
  }

  body.home-page .info-card,
  body.home-page .honeymoon-card,
  body.home-page .info-card > img,
  body.home-page .honeymoon-card > img {
    height: 164px !important;
    min-height: 164px !important;
    max-height: 164px !important;
  }

  body.home-page .info-card-text {
    height: 164px !important;
    min-height: 164px !important;
    max-height: 164px !important;
    grid-template-rows: 27px 30px minmax(0, 1fr) 15px !important;
    padding: 7px 13px !important;
  }

  body.home-page .info-card .card-icon-svg,
  body.home-page .info-card:nth-of-type(3) .card-icon-svg,
  body.home-page .honeymoon-card .honeymoon-icon {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
  }

  body.home-page .info-card h2,
  body.home-page .honeymoon-card h2 {
    height: 30px !important;
    min-height: 30px !important;
  }

  body.home-page .info-card p,
  body.home-page .honeymoon-card p {
    font-size: 11.3px !important;
    line-height: 1.12 !important;
  }

  html[lang="pt-BR"] body.home-page .info-card p,
  html[lang="pt-BR"] body.home-page .honeymoon-card p {
    font-size: 10.4px !important;
  }

  body.home-page .card-link {
    font-size: 9.8px !important;
  }
}



/* =========================================================
   V41 — COUNTDOWN POLISH
   Smaller band, lower position, flush with bottom of viewport.
   EN + PT share the same geometry.
   ========================================================= */

@media (min-width: 1200px) {

  /* Give less vertical space to the countdown and more to the card zone */
  body.home-page main {
    grid-template-rows: 52.5% 38.5% 9% !important;
  }

  body.home-page .countdown-band {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    align-self: stretch !important;
    justify-self: stretch !important;

    margin: 0 !important;
    padding: 8px 24px 7px !important;

    grid-template-columns: 46px 150px 1fr 128px !important;
    gap: 12px !important;
  }

  /* Brass rules sit closer to the edges of the smaller band */
  body.home-page .countdown-band::before {
    top: 4px !important;
  }

  body.home-page .countdown-band::after {
    bottom: 4px !important;
  }

  body.home-page .count-side-branch {
    width: 38px !important;
    height: 38px !important;
  }

  body.home-page .count-label {
    font-size: 9px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.17em !important;
  }

  body.home-page .count-grid {
    height: 100% !important;
    align-items: center !important;
  }

  body.home-page .count-item {
    padding: 0 6px !important;
  }

  body.home-page .count-item:not(:last-child)::after {
    height: 22px !important;
  }

  body.home-page .count-number {
    font-size: clamp(27px, 2vw, 34px) !important;
    line-height: 0.90 !important;
  }

  body.home-page .count-unit {
    margin-top: 3px !important;
    font-size: 7.5px !important;
    letter-spacing: 0.20em !important;
  }

  body.home-page .until {
    gap: 1px !important;
  }

  body.home-page .until-text {
    font-size: 8.5px !important;
    letter-spacing: 0.16em !important;
  }

  body.home-page .ido-script {
    width: 76px !important;
    height: 27px !important;
  }
}

/* Short desktop windows, like Gel's current 100% Chrome view */
@media (min-width: 1200px) and (max-height: 760px) {

  body.home-page main {
    grid-template-rows: 53% 38% 9% !important;
  }

  body.home-page .countdown-band {
    padding: 7px 22px 6px !important;
  }

  body.home-page .count-side-branch {
    width: 34px !important;
    height: 34px !important;
  }

  body.home-page .count-number {
    font-size: 28px !important;
  }

  body.home-page .count-label {
    font-size: 8.5px !important;
  }

  body.home-page .count-unit {
    font-size: 7px !important;
  }

  body.home-page .until-text {
    font-size: 8px !important;
  }

  body.home-page .ido-script {
    width: 70px !important;
    height: 25px !important;
  }
}



/* =========================================================
   V42 — REMOVE BOTTOM GAP
   Short-desktop nav is 60px high, so main must subtract 60px,
   not the standard desktop 78px.
   ========================================================= */

@media (min-width: 1200px) and (max-height: 760px) {
  body.home-page main {
    height: calc(100vh - 60px) !important;
  }
}

/* Medium-height desktop uses the 68px navigation rule */
@media (min-width: 1200px) and (min-height: 761px) and (max-height: 790px) {
  body.home-page main {
    height: calc(100vh - 68px) !important;
  }
}

/* Standard/taller desktop */
@media (min-width: 1200px) and (min-height: 791px) {
  body.home-page main {
    height: calc(100vh - 78px) !important;
  }
}



/* =========================================================
   V43 — COUNTDOWN CLEAN / CENTRED FOOTER
   - remove horizontal brass rules
   - Inter throughout, matching OPEN INVITATION
   - smaller side artwork / labels
   - vertically centre every footer element
   ========================================================= */

@media (min-width: 1200px) {

  body.home-page .countdown-band {
    display: grid !important;
    grid-template-columns: 34px 132px minmax(0, 1fr) 108px !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 10px !important;
    padding: 5px 24px !important;
    overflow: hidden !important;
  }

  /* Remove the full-width horizontal dividers */
  body.home-page .countdown-band::before,
  body.home-page .countdown-band::after {
    display: none !important;
    content: none !important;
  }

  /* Same font family as OPEN INVITATION */
  body.home-page .count-label,
  body.home-page .count-number,
  body.home-page .count-unit,
  body.home-page .until-text {
    font-family: Inter, Arial, sans-serif !important;
  }

  /* Smaller left branch */
  body.home-page .count-side-branch {
    width: 27px !important;
    height: 27px !important;
    justify-self: center !important;
    align-self: center !important;
    opacity: 0.90 !important;
  }

  /* Smaller + centred supporting label */
  body.home-page .count-label {
    align-self: center !important;
    justify-self: center !important;
    text-align: center !important;
    font-size: 7.5px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.16em !important;
    font-weight: 500 !important;
    margin: 0 !important;
  }

  /* Centre all four time units vertically in the footer */
  body.home-page .count-grid {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    align-self: center !important;
    align-items: center !important;
    justify-items: center !important;
  }

  body.home-page .count-item {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 5px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.home-page .count-number {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 0.95 !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
  }

  body.home-page .count-unit {
    margin-top: 2px !important;
    font-size: 6.2px !important;
    line-height: 1 !important;
    letter-spacing: 0.18em !important;
    font-weight: 500 !important;
  }

  /* Keep vertical separators, but lighter/shorter */
  body.home-page .count-item:not(:last-child)::after {
    height: 19px !important;
    background: rgba(185,149,69,0.52) !important;
  }

  /* Smaller right-side sign-off, fully centred */
  body.home-page .until {
    height: 100% !important;
    min-height: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  body.home-page .until-text {
    margin: 0 !important;
    font-size: 7px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.14em !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  body.home-page .ido-script {
    width: 56px !important;
    height: 20px !important;
    margin: 0 auto !important;
    align-self: center !important;
  }
}


/* Short desktop windows */
@media (min-width: 1200px) and (max-height: 760px) {

  body.home-page .countdown-band {
    grid-template-columns: 30px 120px minmax(0, 1fr) 96px !important;
    gap: 8px !important;
    padding: 4px 20px !important;
  }

  body.home-page .count-side-branch {
    width: 24px !important;
    height: 24px !important;
  }

  body.home-page .count-label {
    font-size: 7px !important;
  }

  body.home-page .count-number {
    font-size: 22px !important;
  }

  body.home-page .count-unit {
    font-size: 5.8px !important;
  }

  body.home-page .count-item:not(:last-child)::after {
    height: 17px !important;
  }

  body.home-page .until-text {
    font-size: 6.5px !important;
  }

  body.home-page .ido-script {
    width: 50px !important;
    height: 18px !important;
  }
}



/* =========================================================
   V44 — CARD REFINEMENT
   - shorter cards
   - smaller main description text
   - slightly translucent paper panels
   - titles/icons/CTAs remain visually consistent
   ========================================================= */

@media (min-width: 1200px) {

  body.home-page .info-card,
  body.home-page .honeymoon-card {
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;
  }

  body.home-page .info-card > img,
  body.home-page .honeymoon-card > img {
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;
  }

  body.home-page .info-card-text {
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;

    padding: 8px 14px 8px !important;

    grid-template-rows:
      27px
      29px
      minmax(0, 1fr)
      15px !important;

    background: rgba(255, 250, 242, 0.89) !important;
    backdrop-filter: blur(0.35px);
  }

  body.home-page .info-card .card-icon-svg,
  body.home-page .info-card:nth-of-type(3) .card-icon-svg,
  body.home-page .honeymoon-card .honeymoon-icon {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
  }

  body.home-page .info-card h2,
  body.home-page .honeymoon-card h2 {
    height: 29px !important;
    min-height: 29px !important;
    padding: 1px 0 8px !important;
  }

  body.home-page .info-card p,
  body.home-page .honeymoon-card p {
    margin: 3px 0 0 !important;
    font-size: clamp(10px, 0.59vw, 11.2px) !important;
    line-height: 1.15 !important;
  }

  html[lang="pt-BR"] body.home-page .info-card p,
  html[lang="pt-BR"] body.home-page .honeymoon-card p {
    font-size: clamp(9.5px, 0.55vw, 10.5px) !important;
    line-height: 1.13 !important;
  }
}

/* Short desktop windows */
@media (min-width: 1200px) and (max-height: 760px) {

  body.home-page .info-card,
  body.home-page .honeymoon-card,
  body.home-page .info-card > img,
  body.home-page .honeymoon-card > img {
    height: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;
  }

  body.home-page .info-card-text {
    height: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;

    padding: 7px 13px !important;

    grid-template-rows:
      25px
      28px
      minmax(0, 1fr)
      14px !important;

    background: rgba(255, 250, 242, 0.89) !important;
  }

  body.home-page .info-card .card-icon-svg,
  body.home-page .info-card:nth-of-type(3) .card-icon-svg,
  body.home-page .honeymoon-card .honeymoon-icon {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
  }

  body.home-page .info-card h2,
  body.home-page .honeymoon-card h2 {
    height: 28px !important;
    min-height: 28px !important;
    padding-bottom: 7px !important;
  }

  body.home-page .info-card p,
  body.home-page .honeymoon-card p {
    font-size: 9.8px !important;
    line-height: 1.12 !important;
  }

  html[lang="pt-BR"] body.home-page .info-card p,
  html[lang="pt-BR"] body.home-page .honeymoon-card p {
    font-size: 9.2px !important;
    line-height: 1.10 !important;
  }
}



/* =========================================================
   V45 — CARDS SHORTER + MORE OPAQUE
   ========================================================= */

@media (min-width: 1200px) {

  body.home-page .info-card,
  body.home-page .honeymoon-card {
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
  }

  body.home-page .info-card > img,
  body.home-page .honeymoon-card > img {
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
  }

  body.home-page .info-card-text {
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;

    padding: 7px 13px !important;

    grid-template-rows:
      24px
      27px
      minmax(0, 1fr)
      14px !important;

    background: rgba(255, 250, 242, 0.96) !important;
    backdrop-filter: none !important;
  }

  body.home-page .info-card .card-icon-svg,
  body.home-page .info-card:nth-of-type(3) .card-icon-svg,
  body.home-page .honeymoon-card .honeymoon-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }

  body.home-page .info-card h2,
  body.home-page .honeymoon-card h2 {
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 0 6px !important;
  }

  body.home-page .info-card p,
  body.home-page .honeymoon-card p {
    margin: 2px 0 0 !important;
    font-size: clamp(9.6px, 0.55vw, 10.6px) !important;
    line-height: 1.10 !important;
  }

  html[lang="pt-BR"] body.home-page .info-card p,
  html[lang="pt-BR"] body.home-page .honeymoon-card p {
    font-size: clamp(9px, 0.51vw, 10px) !important;
    line-height: 1.08 !important;
  }
}


/* Short desktop windows */
@media (min-width: 1200px) and (max-height: 760px) {

  body.home-page .info-card,
  body.home-page .honeymoon-card,
  body.home-page .info-card > img,
  body.home-page .honeymoon-card > img {
    height: 134px !important;
    min-height: 134px !important;
    max-height: 134px !important;
  }

  body.home-page .info-card-text {
    height: 134px !important;
    min-height: 134px !important;
    max-height: 134px !important;

    padding: 6px 12px !important;

    grid-template-rows:
      22px
      26px
      minmax(0, 1fr)
      13px !important;

    background: rgba(255, 250, 242, 0.97) !important;
  }

  body.home-page .info-card .card-icon-svg,
  body.home-page .info-card:nth-of-type(3) .card-icon-svg,
  body.home-page .honeymoon-card .honeymoon-icon {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    max-width: 21px !important;
    max-height: 21px !important;
  }

  body.home-page .info-card h2,
  body.home-page .honeymoon-card h2 {
    height: 26px !important;
    min-height: 26px !important;
    padding-bottom: 5px !important;
  }

  body.home-page .info-card p,
  body.home-page .honeymoon-card p {
    font-size: 9.2px !important;
    line-height: 1.08 !important;
  }

  html[lang="pt-BR"] body.home-page .info-card p,
  html[lang="pt-BR"] body.home-page .honeymoon-card p {
    font-size: 8.8px !important;
    line-height: 1.06 !important;
  }
}



/* =========================================================
   V46 — SHORTER CARDS + SOFT TRANSPARENCY
   - slightly shorter cards
   - title divider lifted
   - icon/title/description area softly see-through
   - CTA area remains slightly more solid
   ========================================================= */

@media (min-width: 1200px) {

  body.home-page .info-card,
  body.home-page .honeymoon-card,
  body.home-page .info-card > img,
  body.home-page .honeymoon-card > img {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }

  body.home-page .info-card-text {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;

    padding: 6px 12px 6px !important;

    grid-template-rows:
      22px
      25px
      minmax(0, 1fr)
      14px !important;

    /*
      Upper section is softly translucent.
      Bottom CTA strip is a little more solid for readability.
    */
    background:
      linear-gradient(
        to bottom,
        rgba(255, 250, 242, 0.84) 0%,
        rgba(255, 250, 242, 0.84) calc(100% - 21px),
        rgba(255, 250, 242, 0.95) calc(100% - 21px),
        rgba(255, 250, 242, 0.95) 100%
      ) !important;

    backdrop-filter: none !important;
  }

  body.home-page .info-card .card-icon-svg,
  body.home-page .info-card:nth-of-type(3) .card-icon-svg,
  body.home-page .honeymoon-card .honeymoon-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }

  body.home-page .info-card h2,
  body.home-page .honeymoon-card h2 {
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 0 4px !important;
  }

  /* Lift the thin brass divider closer to the title */
  body.home-page .info-card h2::after,
  body.home-page .honeymoon-card h2::after {
    bottom: 6px !important;
  }

  body.home-page .info-card p,
  body.home-page .honeymoon-card p {
    margin-top: 1px !important;
  }
}


/* Short desktop windows */
@media (min-width: 1200px) and (max-height: 760px) {

  body.home-page .info-card,
  body.home-page .honeymoon-card,
  body.home-page .info-card > img,
  body.home-page .honeymoon-card > img {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
  }

  body.home-page .info-card-text {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;

    padding: 5px 11px 5px !important;

    grid-template-rows:
      21px
      24px
      minmax(0, 1fr)
      13px !important;

    background:
      linear-gradient(
        to bottom,
        rgba(255, 250, 242, 0.85) 0%,
        rgba(255, 250, 242, 0.85) calc(100% - 19px),
        rgba(255, 250, 242, 0.96) calc(100% - 19px),
        rgba(255, 250, 242, 0.96) 100%
      ) !important;
  }

  body.home-page .info-card .card-icon-svg,
  body.home-page .info-card:nth-of-type(3) .card-icon-svg,
  body.home-page .honeymoon-card .honeymoon-icon {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
    max-width: 19px !important;
    max-height: 19px !important;
  }

  body.home-page .info-card h2,
  body.home-page .honeymoon-card h2 {
    height: 24px !important;
    min-height: 24px !important;
    padding-bottom: 4px !important;
  }

  body.home-page .info-card h2::after,
  body.home-page .honeymoon-card h2::after {
    bottom: 6px !important;
  }
}



/* =========================================================
   V47 — MORE TRANSLUCENT + SLIGHTLY SHORTER CARDS
   ========================================================= */

@media (min-width: 1200px) {

  body.home-page .info-card,
  body.home-page .honeymoon-card,
  body.home-page .info-card > img,
  body.home-page .honeymoon-card > img {
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
  }

  body.home-page .info-card-text {
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;

    padding: 5px 11px 5px !important;

    grid-template-rows:
      20px
      23px
      minmax(0, 1fr)
      13px !important;

    background:
      linear-gradient(
        to bottom,
        rgba(255, 250, 242, 0.72) 0%,
        rgba(255, 250, 242, 0.72) calc(100% - 18px),
        rgba(255, 250, 242, 0.93) calc(100% - 18px),
        rgba(255, 250, 242, 0.93) 100%
      ) !important;
  }

  body.home-page .info-card .card-icon-svg,
  body.home-page .info-card:nth-of-type(3) .card-icon-svg,
  body.home-page .honeymoon-card .honeymoon-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
  }

  body.home-page .info-card h2,
  body.home-page .honeymoon-card h2 {
    height: 23px !important;
    min-height: 23px !important;
    padding-bottom: 3px !important;
  }

  body.home-page .info-card h2::after,
  body.home-page .honeymoon-card h2::after {
    bottom: 5px !important;
  }

  body.home-page .info-card p,
  body.home-page .honeymoon-card p {
    margin-top: 0 !important;
    font-size: clamp(9.2px, 0.52vw, 10.2px) !important;
    line-height: 1.08 !important;
  }

  html[lang="pt-BR"] body.home-page .info-card p,
  html[lang="pt-BR"] body.home-page .honeymoon-card p {
    font-size: clamp(8.6px, 0.49vw, 9.6px) !important;
    line-height: 1.06 !important;
  }
}


/* Short desktop windows */
@media (min-width: 1200px) and (max-height: 760px) {

  body.home-page .info-card,
  body.home-page .honeymoon-card,
  body.home-page .info-card > img,
  body.home-page .honeymoon-card > img {
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
  }

  body.home-page .info-card-text {
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;

    padding: 5px 10px 4px !important;

    grid-template-rows:
      19px
      22px
      minmax(0, 1fr)
      12px !important;

    background:
      linear-gradient(
        to bottom,
        rgba(255, 250, 242, 0.73) 0%,
        rgba(255, 250, 242, 0.73) calc(100% - 17px),
        rgba(255, 250, 242, 0.94) calc(100% - 17px),
        rgba(255, 250, 242, 0.94) 100%
      ) !important;
  }

  body.home-page .info-card .card-icon-svg,
  body.home-page .info-card:nth-of-type(3) .card-icon-svg,
  body.home-page .honeymoon-card .honeymoon-icon {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }

  body.home-page .info-card h2,
  body.home-page .honeymoon-card h2 {
    height: 22px !important;
    min-height: 22px !important;
    padding-bottom: 3px !important;
  }

  body.home-page .info-card h2::after,
  body.home-page .honeymoon-card h2::after {
    bottom: 5px !important;
  }
}



/* =========================================================
   V48 — EVEN MORE TRANSLUCENT + SLIGHTLY SHORTER
   ========================================================= */

@media (min-width: 1200px) {

  body.home-page .info-card,
  body.home-page .honeymoon-card,
  body.home-page .info-card > img,
  body.home-page .honeymoon-card > img {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
  }

  body.home-page .info-card-text {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;

    padding: 4px 10px 4px !important;

    grid-template-rows:
      18px
      21px
      minmax(0, 1fr)
      12px !important;

    background:
      linear-gradient(
        to bottom,
        rgba(255, 250, 242, 0.60) 0%,
        rgba(255, 250, 242, 0.60) calc(100% - 16px),
        rgba(255, 250, 242, 0.91) calc(100% - 16px),
        rgba(255, 250, 242, 0.91) 100%
      ) !important;
  }

  body.home-page .info-card .card-icon-svg,
  body.home-page .info-card:nth-of-type(3) .card-icon-svg,
  body.home-page .honeymoon-card .honeymoon-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }

  body.home-page .info-card h2,
  body.home-page .honeymoon-card h2 {
    height: 21px !important;
    min-height: 21px !important;
    padding-bottom: 2px !important;
  }

  body.home-page .info-card h2::after,
  body.home-page .honeymoon-card h2::after {
    bottom: 4px !important;
  }

  body.home-page .info-card p,
  body.home-page .honeymoon-card p {
    margin-top: 0 !important;
    font-size: clamp(8.9px, 0.50vw, 9.8px) !important;
    line-height: 1.05 !important;
  }

  html[lang="pt-BR"] body.home-page .info-card p,
  html[lang="pt-BR"] body.home-page .honeymoon-card p {
    font-size: clamp(8.4px, 0.47vw, 9.2px) !important;
    line-height: 1.04 !important;
  }
}


/* Short desktop windows */
@media (min-width: 1200px) and (max-height: 760px) {

  body.home-page .info-card,
  body.home-page .honeymoon-card,
  body.home-page .info-card > img,
  body.home-page .honeymoon-card > img {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
  }

  body.home-page .info-card-text {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;

    padding: 4px 9px 4px !important;

    grid-template-rows:
      18px
      20px
      minmax(0, 1fr)
      12px !important;

    background:
      linear-gradient(
        to bottom,
        rgba(255, 250, 242, 0.61) 0%,
        rgba(255, 250, 242, 0.61) calc(100% - 15px),
        rgba(255, 250, 242, 0.92) calc(100% - 15px),
        rgba(255, 250, 242, 0.92) 100%
      ) !important;
  }

  body.home-page .info-card .card-icon-svg,
  body.home-page .info-card:nth-of-type(3) .card-icon-svg,
  body.home-page .honeymoon-card .honeymoon-icon {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
  }

  body.home-page .info-card h2,
  body.home-page .honeymoon-card h2 {
    height: 20px !important;
    min-height: 20px !important;
  }
}



/* =========================================================
   V49 — SLIMMER DESKTOP MENU
   - shorter header
   - smaller logo / olive flourish / type / language switch
   - HOME / INÍCIO support
   - subtle hover glow
   - homepage viewport recalculated to new nav height
   ========================================================= */

@media (min-width: 1200px) {

  .top-nav {
    height: 54px !important;
    grid-template-columns: 160px minmax(0, 1fr) 160px !important;
    padding: 0 4vw !important;
    background: rgba(255, 250, 242, 0.965) !important;
  }

  .nav-logo {
    width: 82px !important;
    max-height: 43px !important;
    object-fit: contain !important;
  }

  .nav-links {
    gap: clamp(18px, 2.45vw, 44px) !important;
    align-items: center !important;

    font-family: Inter, Arial, sans-serif !important;
    font-size: 9.6px !important;
    line-height: 1 !important;
    letter-spacing: 0.22em !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }

  .nav-links a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    transition:
      color 180ms ease,
      text-shadow 180ms ease,
      filter 180ms ease,
      opacity 180ms ease !important;
  }

  /* Soft wedding-glow hover, not a bright neon effect */
  .nav-links a:not(.flag-link):hover,
  .nav-links a:not(.flag-link):focus-visible {
    color: #2e421f !important;
    text-shadow:
      0 0 7px rgba(185, 149, 69, 0.36),
      0 0 13px rgba(78, 96, 49, 0.20) !important;
    outline: none !important;
  }

  /* Small language text switch used on PT */
  .language-text-link {
    min-width: 22px !important;
    letter-spacing: 0.12em !important;
    color: #667044 !important;
  }

  .flag-link {
    width: 21px !important;
    height: 15px !important;
  }

  .flag-link img {
    width: 21px !important;
    height: 15px !important;
    border-radius: 1.5px !important;
    box-shadow: 0 0 0 0.5px rgba(16, 33, 13, 0.16) !important;
    transition:
      transform 180ms ease,
      filter 180ms ease !important;
  }

  .flag-link:hover img,
  .flag-link:focus-visible img {
    transform: scale(1.05) !important;
    filter:
      drop-shadow(0 0 4px rgba(185, 149, 69, 0.46))
      drop-shadow(0 0 7px rgba(78, 96, 49, 0.18)) !important;
  }

  /* Slimmer left and right side ornaments */
  .top-nav > a:first-child {
    height: 100% !important;
  }

  .nav-flourish::before {
    height: 34px !important;
  }

  .nav-flourish .branch {
    width: 46px !important;
    height: 22px !important;
  }

  /* New navigation is 54px tall: keep footer flush with viewport */
  body.home-page main {
    height: calc(100vh - 54px) !important;
  }
}


/* Short desktop windows */
@media (min-width: 1200px) and (max-height: 760px) {

  .top-nav {
    height: 50px !important;
    grid-template-columns: 145px minmax(0, 1fr) 145px !important;
  }

  .nav-logo {
    width: 74px !important;
    max-height: 39px !important;
  }

  .nav-links {
    gap: clamp(16px, 2.2vw, 38px) !important;
    font-size: 9px !important;
    letter-spacing: 0.20em !important;
  }

  .flag-link,
  .flag-link img {
    width: 19px !important;
    height: 13px !important;
  }

  .nav-flourish::before {
    height: 30px !important;
  }

  .nav-flourish .branch {
    width: 42px !important;
    height: 20px !important;
  }

  body.home-page main {
    height: calc(100vh - 50px) !important;
  }
}



/* =========================================================
   V50 — CENTRE MONOGRAM IN LEFT NAV SLOT
   ========================================================= */

@media (min-width: 1200px) {

  .top-nav > a:first-child {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  .top-nav > a:first-child .nav-logo {
    display: block !important;
    margin: 0 auto !important;
  }
}



/* =========================================================
   V51 — MENU BALANCE + CONTACT
   - true visual centring of monogram in entire left section
   - identical left/right divider heights
   - stronger but refined hover glow
   - contact information replaces right olive flourish
   ========================================================= */

@media (min-width: 1200px) {

  /*
    The nav has horizontal padding. The logo was centred only
    inside the grid column, which made it look too far right.
    Moving it left by half the nav padding centres it visually
    between the viewport edge and the divider.
  */
  .top-nav > a:first-child .nav-logo {
    transform: translateX(-2vw) !important;
  }

  /* Left divider */
  .top-nav > a:first-child::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    width: 2px !important;
    height: 34px !important;
    transform: translateY(-50%) !important;
    background: rgba(185, 149, 69, 0.52) !important;
  }

  /* Right contact section */
  .nav-contact {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: var(--ink) !important;
  }

  /* Right divider: exact twin of the left divider */
  .nav-contact::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 2px !important;
    height: 34px !important;
    transform: translateY(-50%) !important;
    background: rgba(185, 149, 69, 0.52) !important;
  }

  /*
    Same visual-centre correction as the left side,
    but mirrored because of the right page padding.
  */
  .nav-contact-inner {
    transform: translateX(2vw) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 3px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .nav-contact-label {
    font-family: Inter, Arial, sans-serif !important;
    font-size: 6.8px !important;
    line-height: 1 !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    color: #9f8140 !important;
  }

  .nav-contact a {
    font-family: Inter, Arial, sans-serif !important;
    font-size: 7.8px !important;
    line-height: 1 !important;
    letter-spacing: 0.035em !important;
    font-weight: 400 !important;

    color: #334129 !important;
    text-decoration: none !important;

    transition:
      color 180ms ease,
      text-shadow 180ms ease,
      transform 180ms ease !important;
  }

  .nav-contact a:hover,
  .nav-contact a:focus-visible {
    color: #24351c !important;
    transform: scale(1.025) !important;
    text-shadow:
      0 0 5px rgba(185, 149, 69, 0.72),
      0 0 11px rgba(185, 149, 69, 0.42),
      0 0 16px rgba(78, 96, 49, 0.22) !important;
    outline: none !important;
  }

  /* Clearer glow on menu items */
  .nav-links a:not(.flag-link):hover,
  .nav-links a:not(.flag-link):focus-visible {
    color: #2b3f21 !important;
    transform: translateY(-1px) scale(1.025) !important;
    text-shadow:
      0 0 4px rgba(185, 149, 69, 0.88),
      0 0 9px rgba(185, 149, 69, 0.58),
      0 0 16px rgba(78, 96, 49, 0.28) !important;
    outline: none !important;
  }

  .flag-link:hover img,
  .flag-link:focus-visible img {
    transform: scale(1.08) !important;
    filter:
      drop-shadow(0 0 4px rgba(185, 149, 69, 0.78))
      drop-shadow(0 0 8px rgba(185, 149, 69, 0.48))
      drop-shadow(0 0 12px rgba(78, 96, 49, 0.22)) !important;
  }

  /* Old olive-flourish rules must not interfere */
  .nav-flourish {
    display: none !important;
  }
}


/* Short desktop windows */
@media (min-width: 1200px) and (max-height: 760px) {

  .top-nav > a:first-child::after,
  .nav-contact::before {
    height: 30px !important;
  }

  .nav-contact-label {
    font-size: 6.3px !important;
  }

  .nav-contact a {
    font-size: 7.2px !important;
  }
}


/* Stacked/mobile nav: contact becomes a normal centred item */
@media (max-width: 980px) {

  .top-nav > a:first-child .nav-logo {
    transform: none !important;
  }

  .top-nav > a:first-child::after,
  .nav-contact::before {
    display: none !important;
  }

  .nav-contact {
    height: auto !important;
    width: auto !important;
  }

  .nav-contact-inner {
    transform: none !important;
  }
}



/* =========================================================
   V52 — SLIMMER MENU + LARGER MONOGRAM + BRASS GLOW
   ========================================================= */

@media (min-width: 1200px) {

  .top-nav {
    height: 48px !important;
  }

  /* Larger monogram while remaining centred in the left section */
  .nav-logo,
  .top-nav > a:first-child .nav-logo {
    width: 108px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    transform: translateX(-2vw) !important;
  }

  /* Keep both dividers identical and proportional to the slimmer bar */
  .top-nav > a:first-child::after,
  .nav-contact::before {
    height: 30px !important;
    width: 2px !important;
    background: rgba(185, 149, 69, 0.52) !important;
  }

  /* Slightly smaller nav typography for the slimmer ribbon */
  .nav-links {
    font-size: 9.1px !important;
    gap: clamp(17px, 2.3vw, 40px) !important;
    letter-spacing: 0.21em !important;
  }

  .flag-link,
  .flag-link img {
    width: 19px !important;
    height: 13px !important;
  }

  /*
    Brass-only hover glow.
    Same base colour as the dividers: rgb(185,149,69).
  */
  .nav-links a:not(.flag-link):hover,
  .nav-links a:not(.flag-link):focus-visible {
    color: #26351f !important;
    transform: translateY(-1px) scale(1.025) !important;
    text-shadow:
      0 0 3px rgba(185, 149, 69, 1),
      0 0 7px rgba(185, 149, 69, 0.82),
      0 0 13px rgba(185, 149, 69, 0.50) !important;
  }

  .nav-contact a:hover,
  .nav-contact a:focus-visible {
    color: #26351f !important;
    transform: scale(1.025) !important;
    text-shadow:
      0 0 3px rgba(185, 149, 69, 1),
      0 0 7px rgba(185, 149, 69, 0.82),
      0 0 13px rgba(185, 149, 69, 0.50) !important;
  }

  .flag-link:hover img,
  .flag-link:focus-visible img {
    transform: scale(1.08) !important;
    filter:
      drop-shadow(0 0 3px rgba(185, 149, 69, 0.95))
      drop-shadow(0 0 7px rgba(185, 149, 69, 0.70)) !important;
  }

  /* Recalculate the homepage so the footer remains flush */
  body.home-page main {
    height: calc(100vh - 48px) !important;
  }
}


/* Gel's current short desktop viewport at 100% zoom */
@media (min-width: 1200px) and (max-height: 760px) {

  .top-nav {
    height: 44px !important;
  }

  .nav-logo,
  .top-nav > a:first-child .nav-logo {
    width: 102px !important;
    max-height: 41px !important;
  }

  .top-nav > a:first-child::after,
  .nav-contact::before {
    height: 28px !important;
  }

  .nav-links {
    font-size: 8.7px !important;
    gap: clamp(15px, 2.15vw, 36px) !important;
    letter-spacing: 0.19em !important;
  }

  .flag-link,
  .flag-link img {
    width: 18px !important;
    height: 12px !important;
  }

  .nav-contact-label {
    font-size: 6.1px !important;
  }

  .nav-contact a {
    font-size: 7px !important;
  }

  body.home-page main {
    height: calc(100vh - 44px) !important;
  }
}



/* =========================================================
   V54 — SAFE 80% MONOGRAM SCALE + TRUE BRASS HOVER
   Fixes V53 by scaling the visible logo without enlarging its
   layout box, so the menu cannot be pushed or covered.
   ========================================================= */

@media (min-width: 1200px) {

  .top-nav {
    overflow: visible !important;
  }

  .top-nav > a:first-child {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
  }

  .nav-links,
  .nav-contact {
    position: relative !important;
    z-index: 3 !important;
  }

  /* Keep the stable layout box, enlarge only the visible monogram */
  .nav-logo,
  .top-nav > a:first-child .nav-logo {
    width: 108px !important;
    max-width: 108px !important;
    max-height: 44px !important;
    height: auto !important;
    object-fit: contain !important;

    transform: translateX(-2vw) scale(1.8) !important;
    transform-origin: center center !important;

    pointer-events: none !important;
  }

  /* Exact divider brass: #B99545 */
  .top-nav > a:first-child::after,
  .nav-contact::before {
    background: rgba(185, 149, 69, 0.72) !important;
  }

  /* Text itself becomes brass and glow is brass only */
  .nav-links a:not(.flag-link):hover,
  .nav-links a:not(.flag-link):focus-visible,
  .nav-contact a:hover,
  .nav-contact a:focus-visible {
    color: #B99545 !important;
    text-shadow:
      0 0 3px rgba(185, 149, 69, 1),
      0 0 6px rgba(185, 149, 69, 0.90),
      0 0 11px rgba(185, 149, 69, 0.62) !important;
  }

  .flag-link:hover img,
  .flag-link:focus-visible img {
    filter:
      drop-shadow(0 0 3px rgba(185, 149, 69, 1))
      drop-shadow(0 0 7px rgba(185, 149, 69, 0.80)) !important;
  }
}


/* Short desktop viewport */
@media (min-width: 1200px) and (max-height: 760px) {

  .nav-logo,
  .top-nav > a:first-child .nav-logo {
    width: 102px !important;
    max-width: 102px !important;
    max-height: 41px !important;
    transform: translateX(-2vw) scale(1.8) !important;
  }
}



/* =========================================================
   V55 — HERO POSITION / SCALE / ALIGNMENT
   - GEL & NOEL is the visual anchor
   - all copy below shares the same centre axis
   - whole group moves left and slightly lower
   - divider is shorter
   - overall hero is slightly smaller
   ========================================================= */

@media (min-width: 1200px) {

  body.home-page .home-hero {
    padding-left: 4.2vw !important;
    padding-right: 7vw !important;
    padding-top: 20px !important;
    padding-bottom: 6px !important;
    align-items: center !important;
  }

  body.home-page .home-hero-content {
    width: 560px !important;
    max-width: 560px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    text-align: center !important;

    /* Override older inherited scaling */
    transform: translateY(18px) !important;
    transform-origin: center center !important;
  }

  body.home-page .home-hero h1 {
    width: auto !important;
    margin: 0 auto !important;

    font-size: clamp(62px, 5.15vw, 78px) !important;
    line-height: 0.90 !important;
    letter-spacing: -0.045em !important;

    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Shorter divider, centred exactly beneath GEL & NOEL */
  body.home-page .hero-line {
    width: 390px !important;
    max-width: 72% !important;
    margin: 15px auto 11px !important;
  }

  body.home-page .hero-date,
  body.home-page .hero-location,
  body.home-page .hero-tagline,
  body.home-page .hero-button {
    align-self: center !important;
    text-align: center !important;
  }

  body.home-page .hero-date {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    letter-spacing: 0.34em !important;
  }

  body.home-page .hero-location {
    margin: 7px 0 9px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: 0.26em !important;
  }

  body.home-page .hero-tagline {
    margin: 0 0 12px !important;
    font-size: 15.5px !important;
    line-height: 1.08 !important;
  }

  body.home-page .hero-button {
    min-width: 196px !important;
    width: 196px !important;
    height: 37px !important;
    padding: 0 18px !important;

    font-size: 8.6px !important;
    letter-spacing: 0.23em !important;
  }
}


/* Gel's current shorter desktop viewport at 100% zoom */
@media (min-width: 1200px) and (max-height: 760px) {

  body.home-page .home-hero {
    padding-left: 4vw !important;
    padding-top: 12px !important;
    padding-bottom: 3px !important;
  }

  body.home-page .home-hero-content {
    width: 530px !important;
    max-width: 530px !important;
    transform: translateY(16px) !important;
  }

  body.home-page .home-hero h1 {
    font-size: clamp(58px, 4.7vw, 70px) !important;
  }

  body.home-page .hero-line {
    width: 350px !important;
    max-width: 70% !important;
    margin-top: 12px !important;
    margin-bottom: 9px !important;
  }

  body.home-page .hero-date {
    font-size: 14.5px !important;
  }

  body.home-page .hero-location {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    font-size: 16.5px !important;
  }

  body.home-page .hero-tagline {
    margin-bottom: 10px !important;
    font-size: 14.5px !important;
  }

  body.home-page .hero-button {
    min-width: 186px !important;
    width: 186px !important;
    height: 34px !important;
    font-size: 8.1px !important;
  }
}



/* =========================================================
   V56 — SCOPE HOMEPAGE TREE + RESTORE EVENTS PAGE
   The olive-tree artwork/texture belongs ONLY to home-page.
   Events uses its own Waterfall Gardens watermark.
   ========================================================= */

/* ---------------------------------------------------------
   EVENTS: remove inherited homepage paper/tree layers
   --------------------------------------------------------- */

body.events-page.site-shell main.events-main {
  background-color: transparent !important;
  background-image: none !important;
  background-repeat: initial !important;
  background-position: initial !important;
  background-size: initial !important;
}

/* The homepage olive tree must never appear on Events */
body.events-page.site-shell main.events-main::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/*
  An older generic homepage rule gave every direct child of
  <main> z-index:1. Restore the intended Events stacking:
  Waterfall artwork behind cream veil, then all real content.
*/
body.events-page.site-shell .events-watermark {
  position: absolute !important;
  z-index: -2 !important;

  left: 50% !important;
  bottom: -1.5% !important;
  width: min(1360px, 92vw) !important;
  aspect-ratio: 4 / 3 !important;
  transform: translateX(-50%) !important;

  background-image:
    url("../img/background_waterfall_watermark_events.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;

  opacity: 0.82 !important;
  pointer-events: none !important;
}

body.events-page.site-shell .events-main::after {
  z-index: -1 !important;
}

/* Real Events content always sits above the watermark/veil */
body.events-page.site-shell .events-heading {
  position: relative !important;
  z-index: 2 !important;
}

body.events-page.site-shell .events-carousel {
  position: relative !important;
  z-index: 3 !important;
}

body.events-page.site-shell .events-note,
body.events-page.site-shell .events-dots {
  position: relative !important;
  z-index: 2 !important;
}


/* ---------------------------------------------------------
   HARD SAFETY: home artwork belongs only to homepage
   This protects Events and future Travel/Gift pages too.
   --------------------------------------------------------- */

body.site-shell:not(.home-page) main::before {
  background-image: none !important;
}

/*
  Do not globally erase page-specific backgrounds here.
  Each non-home page may provide its own artwork.
  We only neutralise the specific home tree pseudo-layer.
*/



/* =========================================================
   V57 — EVENTS COMPACT FIT + CINZEL + NO BOTTOM GAP
   EN + PT share identical geometry.
   ========================================================= */

/* Events content typography */
body.events-page .events-heading,
body.events-page .events-heading h1,
body.events-page .events-eyebrow,
body.events-page .events-heading-copy,
body.events-page .weekend-card,
body.events-page .weekend-card h2,
body.events-page .weekend-day,
body.events-page .weekend-headline-date,
body.events-page .weekend-description,
body.events-page .detail-label,
body.events-page .detail-value,
body.events-page .events-note {
  font-family: "Cinzel", serif !important;
}

/* Keep menu typography separate */
body.events-page .top-nav,
body.events-page .nav-links,
body.events-page .nav-contact,
body.events-page .nav-contact * {
  font-family: Inter, Arial, sans-serif !important;
}


@media (min-width: 1101px) {

  /* Actual slim menu = 48px */
  body.events-page.site-shell main,
  body.events-page.site-shell .events-main {
    height: calc(100vh - 48px) !important;
    min-height: calc(100vh - 48px) !important;
  }

  .events-main {
    padding: 10px 4.5vw 4px !important;
  }

  /* Slightly tighter heading */
  .events-heading {
    margin-bottom: 4px !important;
  }

  .events-eyebrow {
    margin-bottom: 3px !important;
    font-size: 8px !important;
  }

  .events-heading h1 {
    font-size: clamp(39px, 3.7vw, 56px) !important;
    line-height: 0.93 !important;
  }

  .events-heading-divider {
    width: min(230px, 60vw) !important;
    margin: 5px auto 3px !important;
  }

  .events-heading-copy {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  /*
    Shorter base cards.
    318px × 1.15 = 365.7px, so reserve 366px.
  */
  .events-carousel {
    min-height: 366px !important;
    gap: clamp(30px, 2.7vw, 44px) !important;
    align-items: center !important;
  }

  .weekend-card-side,
  .weekend-card-main {
    width: min(29%, 350px) !important;
    min-height: 318px !important;
    height: 318px !important;
    max-height: 318px !important;
  }

  .weekend-card-main {
    transform: scale(1.15) !important;
  }

  /* Hover transfer remains exactly as before */
  .events-carousel:has(.weekend-card:hover) .weekend-card {
    transform: scale(1) !important;
  }

  .events-carousel:has(.weekend-card:hover) .weekend-card:hover {
    transform: scale(1.15) !important;
  }

  .weekend-card-inner,
  .weekend-card-main .weekend-card-inner {
    min-height: 318px !important;
    height: 318px !important;
    max-height: 318px !important;
    padding: 14px 20px 13px !important;
  }

  .weekend-card-main .weekend-card-inner {
    padding: 15px 22px 14px !important;
  }

  .weekend-day {
    margin-bottom: 4px !important;
    font-size: 7.5px !important;
    letter-spacing: 0.27em !important;
  }

  .weekend-card h2,
  .weekend-card-main h2 {
    font-size: clamp(23px, 1.9vw, 31px) !important;
    line-height: 0.96 !important;
  }

  .weekend-headline-date {
    margin-top: 5px !important;
    font-size: 7.5px !important;
    letter-spacing: 0.18em !important;
  }

  .weekend-divider {
    width: 120px !important;
    margin: 7px auto 6px !important;
  }

  .weekend-divider img {
    width: 18px !important;
    height: 9px !important;
  }

  .weekend-description,
  .weekend-card-side .weekend-description,
  .weekend-card-main .weekend-description {
    margin: 10px auto 0 !important;
    max-width: 300px !important;
    font-size: 10.5px !important;
    line-height: 1.22 !important;
  }

  .weekend-details {
    margin-top: auto !important;
    padding-top: 7px !important;
    gap: 5px 14px !important;
  }

  .weekend-details::before {
    margin-bottom: 0 !important;
  }

  .weekend-detail {
    gap: 2px !important;
  }

  .detail-label {
    font-size: 6px !important;
    letter-spacing: 0.19em !important;
  }

  .detail-value,
  .weekend-card-main .detail-value {
    font-size: 9.5px !important;
    line-height: 1.10 !important;
  }

  .events-note {
    margin: 2px auto 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
}


/* Gel's current short desktop viewport at 100% zoom */
@media (min-width: 1101px) and (max-height: 760px) {

  /* Short menu = 44px */
  body.events-page.site-shell main,
  body.events-page.site-shell .events-main {
    height: calc(100vh - 44px) !important;
    min-height: calc(100vh - 44px) !important;
  }

  .events-main {
    padding-top: 7px !important;
    padding-bottom: 2px !important;
  }

  .events-heading h1 {
    font-size: clamp(36px, 3.35vw, 50px) !important;
  }

  .events-heading-copy {
    font-size: 12.5px !important;
  }

  /*
    292px × 1.15 = 335.8px
  */
  .events-carousel {
    min-height: 336px !important;
  }

  .weekend-card-side,
  .weekend-card-main {
    min-height: 292px !important;
    height: 292px !important;
    max-height: 292px !important;
  }

  .weekend-card-inner,
  .weekend-card-main .weekend-card-inner {
    min-height: 292px !important;
    height: 292px !important;
    max-height: 292px !important;
    padding: 11px 18px 10px !important;
  }

  .weekend-card-main .weekend-card-inner {
    padding: 12px 20px 11px !important;
  }

  .weekend-card h2,
  .weekend-card-main h2 {
    font-size: clamp(21px, 1.75vw, 28px) !important;
  }

  .weekend-description,
  .weekend-card-side .weekend-description,
  .weekend-card-main .weekend-description {
    margin-top: 7px !important;
    font-size: 9.5px !important;
    line-height: 1.18 !important;
  }

  .weekend-details {
    padding-top: 5px !important;
  }

  .detail-value,
  .weekend-card-main .detail-value {
    font-size: 8.7px !important;
  }

  .events-note {
    font-size: 9px !important;
  }
}



/* =========================================================
   V58 — EVENTS TYPOGRAPHY MATCHES RSVP
   Cinzel = formal/display
   Cormorant Garamond = editorial/body
   Inter = navigation
   Also centres card descriptions in their middle section.
   ========================================================= */

/* ---------------------------------------------------------
   CINZEL — same formal language as RSVP
   --------------------------------------------------------- */

body.events-page .events-eyebrow,
body.events-page .events-heading h1,
body.events-page .weekend-day,
body.events-page .weekend-card h2,
body.events-page .weekend-headline-date,
body.events-page .detail-label {
  font-family: "Cinzel", serif !important;
  font-style: normal !important;
}

/* ---------------------------------------------------------
   CORMORANT GARAMOND — same softer editorial language as RSVP
   --------------------------------------------------------- */

body.events-page .events-heading-copy,
body.events-page .weekend-description,
body.events-page .detail-value,
body.events-page .events-note {
  font-family: "Cormorant Garamond", Georgia, serif !important;
}

/* Intro line beneath THE CELEBRATION */
body.events-page .events-heading-copy {
  font-style: italic !important;
  font-weight: 500 !important;
}

/* Event descriptions */
body.events-page .weekend-description,
body.events-page .weekend-card-side .weekend-description,
body.events-page .weekend-card-main .weekend-description {
  width: 100% !important;
  max-width: 320px !important;

  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;

  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.24 !important;

  /*
    This makes the description occupy and centre itself
    within the open middle zone between heading and details.
  */
  align-self: stretch !important;
}

/* Details use the same elegant serif body language as RSVP */
body.events-page .detail-value {
  font-style: normal !important;
  font-weight: 400 !important;
}

/* Bottom note keeps RSVP-like editorial softness */
body.events-page .events-note {
  font-style: italic !important;
  font-weight: 500 !important;
}


/* ---------------------------------------------------------
   DESKTOP CARD DESCRIPTION SIZING
   --------------------------------------------------------- */

@media (min-width: 1101px) {

  body.events-page .weekend-description,
  body.events-page .weekend-card-side .weekend-description,
  body.events-page .weekend-card-main .weekend-description {
    font-size: 14px !important;
    line-height: 1.18 !important;
    padding: 4px 10px !important;
  }

  body.events-page .detail-value,
  body.events-page .weekend-card-main .detail-value {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  body.events-page .events-heading-copy {
    font-size: 15px !important;
  }

  body.events-page .events-note {
    font-size: 11.5px !important;
  }
}


/* Short desktop viewport */
@media (min-width: 1101px) and (max-height: 760px) {

  body.events-page .weekend-description,
  body.events-page .weekend-card-side .weekend-description,
  body.events-page .weekend-card-main .weekend-description {
    font-size: 12.6px !important;
    line-height: 1.16 !important;
    padding: 3px 8px !important;
  }

  body.events-page .detail-value,
  body.events-page .weekend-card-main .detail-value {
    font-size: 10.8px !important;
  }

  body.events-page .events-heading-copy {
    font-size: 13.5px !important;
  }

  body.events-page .events-note {
    font-size: 10.5px !important;
  }
}



/* =========================================================
   V59 — EVENTS SPACING + TRUE DESCRIPTION CENTRING
   - doubles space between heading and cards
   - centres description vertically in card middle zone
   ========================================================= */

@media (min-width: 1101px) {

  /* More breathing room between heading block and cards */
  body.events-page .events-heading {
    margin-bottom: 18px !important;
  }

  body.events-page .events-carousel {
    margin-top: 0 !important;
  }

  /*
    Make each card a 3-part vertical layout:
      1) heading/title block
      2) flexible description zone
      3) details block
  */
  body.events-page .weekend-card-inner,
  body.events-page .weekend-card-main .weekend-card-inner {
    display: grid !important;
    grid-template-rows:
      auto
      minmax(0, 1fr)
      auto !important;
    align-items: stretch !important;
  }

  /*
    First five children are the heading/title area:
    day, h2, date, divider, description.
    Description gets the flexible middle row by being positioned
    as the fifth child with align-self:center.
  */
  body.events-page .weekend-day,
  body.events-page .weekend-card h2,
  body.events-page .weekend-headline-date,
  body.events-page .weekend-divider {
    grid-column: 1 !important;
  }

  body.events-page .weekend-description {
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: center !important;

    width: 100% !important;
    max-width: 320px !important;

    margin: 0 auto !important;
    padding: 0 10px !important;

    display: block !important;

    text-align: center !important;
  }

  body.events-page .weekend-details {
    grid-column: 1 !important;
    align-self: end !important;
    margin-top: 0 !important;
  }

  /*
    Explicit row placement keeps the title cluster compact and
    reserves the full centre region for the description.
  */
  body.events-page .weekend-day,
  body.events-page .weekend-card h2,
  body.events-page .weekend-headline-date,
  body.events-page .weekend-divider {
    grid-row: 1 !important;
  }

  /*
    The title cluster cannot literally share one CSS grid row without
    overlap, so wrap behaviour is restored by placing the inner card
    in block flow and using flex on the centre section instead.
  */
  body.events-page .weekend-card-inner,
  body.events-page .weekend-card-main .weekend-card-inner {
    display: flex !important;
    flex-direction: column !important;
  }

  body.events-page .weekend-description {
    flex: 1 1 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 0 !important;
  }

  body.events-page .weekend-details {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
  }
}


/* Current shorter desktop viewport */
@media (min-width: 1101px) and (max-height: 760px) {

  body.events-page .events-heading {
    margin-bottom: 14px !important;
  }

  body.events-page .weekend-description {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}



/* =========================================================
   V60 — EVENTS FINAL SPACING + WATERMARK TOP ALIGNMENT
   - more breathing room around intro tagline
   - larger/lower bottom note
   - Waterfall Gardens artwork begins directly below nav
   ========================================================= */

body.events-page.site-shell .events-watermark {
  top: 0 !important;
  bottom: auto !important;

  width: min(1360px, 92vw) !important;
  height: 100% !important;
  aspect-ratio: auto !important;

  background-position: center top !important;
  background-size: 100% auto !important;
}


/* Intro line beneath THE CELEBRATION */
body.events-page .events-heading-copy {
  margin-top: 12px !important;
  margin-bottom: 20px !important;
}


/* Bottom note */
body.events-page .events-note {
  margin-top: 10px !important;
  margin-bottom: 0 !important;

  font-size: 13.5px !important;
  line-height: 1.15 !important;

  transform: translateY(4px) !important;
}


/* Current shorter desktop viewport */
@media (min-width: 1101px) and (max-height: 760px) {

  body.events-page .events-heading-copy {
    margin-top: 10px !important;
    margin-bottom: 16px !important;
  }

  body.events-page .events-note {
    margin-top: 8px !important;
    font-size: 12.5px !important;
    transform: translateY(3px) !important;
  }
}

/* =========================================================
   V61 — EVENTS WATERMARK OPACITY + BOLD NOTE
   ========================================================= */

body.events-page.site-shell .events-watermark {
  opacity: 0.20 !important;
}

body.events-page .events-note {
  font-weight: 700 !important;
}



/* =========================================================
   V62 — EVENTS WATERMARK 10% + SLIGHTLY MORE SOLID CARDS
   ========================================================= */

/* Softer Waterfall Gardens artwork */
body.events-page.site-shell .events-watermark {
  opacity: 0.10 !important;
}

/* Make all three event cards a little less translucent */
body.events-page .weekend-card,
body.events-page .weekend-card-side,
body.events-page .weekend-card-main {
  background: rgba(255, 250, 242, 0.88) !important;
}

/* Inner panel of featured card remains subtly distinct */
body.events-page .weekend-card-main .weekend-card-inner {
  background: rgba(255, 250, 242, 0.82) !important;
}

/* Side cards slightly more solid for readability */
body.events-page .weekend-card-side .weekend-card-inner {
  background: rgba(255, 250, 242, 0.86) !important;
}



/* =========================================================
   V63 — EVENTS FULL BACKGROUND + LARGER NOTE
   ========================================================= */

body.events-page.site-shell .events-watermark {
  opacity: 1 !important;
}

body.events-page .events-note {
  font-size: 16px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

@media (min-width: 1101px) and (max-height: 760px) {
  body.events-page .events-note {
    font-size: 14.5px !important;
  }
}



/* =========================================================
   V64 — EVENTS NOTE IN INTER + CARDS 5% TRANSLUCENT
   ========================================================= */

/* Bottom note matches the menu font */
body.events-page .events-note {
  font-family: Inter, Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.18 !important;
  letter-spacing: 0.02em !important;
}

/* All cards: 95% opaque = 5% translucent */
body.events-page .weekend-card,
body.events-page .weekend-card-side,
body.events-page .weekend-card-main,
body.events-page .weekend-card-inner,
body.events-page .weekend-card-side .weekend-card-inner,
body.events-page .weekend-card-main .weekend-card-inner {
  background: rgba(255, 250, 242, 0.95) !important;
}

@media (min-width: 1101px) and (max-height: 760px) {
  body.events-page .events-note {
    font-size: 14.5px !important;
  }
}



/* =========================================================
   V65 — WIDER EVENTS BACKGROUND + 10% TRANSLUCENT CARDS
   ========================================================= */

/* Stretch Waterfall Gardens artwork farther to both sides */
body.events-page.site-shell .events-watermark {
  left: 50% !important;
  width: 100vw !important;
  max-width: none !important;
  transform: translateX(-50%) !important;

  background-position: center top !important;
  background-size: 100% auto !important;
}

/* All event cards: 90% opaque = 10% translucent */
body.events-page .weekend-card,
body.events-page .weekend-card-side,
body.events-page .weekend-card-main,
body.events-page .weekend-card-inner,
body.events-page .weekend-card-side .weekend-card-inner,
body.events-page .weekend-card-main .weekend-card-inner {
  background: rgba(255, 250, 242, 0.90) !important;
}



/* =========================================================
   V66 — PT EYEBROW BOLD + CINZEL DETAILS + 35% TRANSLUCENT CARDS
   ========================================================= */

/* Portuguese "Fim de Semana do Casamento" */
html[lang="pt-BR"] body.events-page .events-eyebrow {
  font-weight: 700 !important;
}

/* Details below each event description use Cinzel */
body.events-page .weekend-details,
body.events-page .weekend-detail,
body.events-page .detail-label,
body.events-page .detail-value {
  font-family: "Cinzel", serif !important;
  font-style: normal !important;
}

/* All event cards: 65% opaque = 35% translucent */
body.events-page .weekend-card,
body.events-page .weekend-card-side,
body.events-page .weekend-card-main,
body.events-page .weekend-card-inner,
body.events-page .weekend-card-side .weekend-card-inner,
body.events-page .weekend-card-main .weekend-card-inner {
  background: rgba(255, 250, 242, 0.65) !important;
}



/* =========================================================
   V67 — EVENTS META TYPOGRAPHY EMPHASIS
   - DATA / HORÁRIO / LOCAL: +1px
   - DIA 1 / DIA 2 / DIA 3: +2px + bold
   - headline dates: +2px + bold
   EN + PT kept visually consistent
   ========================================================= */

body.events-page .detail-label {
  font-size: 7px !important;
}

/* Day labels */
body.events-page .weekend-day {
  font-size: 9.5px !important;
  font-weight: 700 !important;
}

/* Dates beneath event titles */
body.events-page .weekend-headline-date {
  font-size: 9.5px !important;
  font-weight: 700 !important;
}

/* Preserve emphasis on shorter desktop heights too */
@media (min-width: 1101px) and (max-height: 760px) {
  body.events-page .detail-label {
    font-size: 7px !important;
  }

  body.events-page .weekend-day,
  body.events-page .weekend-headline-date {
    font-size: 9.5px !important;
    font-weight: 700 !important;
  }
}



/* =========================================================
   V68 — PT EVENTS TYPOGRAPHY FINE-TUNING
   ========================================================= */

html[lang="pt-BR"] body.events-page .events-eyebrow {
  font-size: 10.5px !important;
}

html[lang="pt-BR"] body.events-page .events-heading-copy {
  font-size: 17px !important;
}

html[lang="pt-BR"] body.events-page .events-note {
  font-size: 15px !important;
}

/* Short desktop viewport */
@media (min-width: 1101px) and (max-height: 760px) {
  html[lang="pt-BR"] body.events-page .events-eyebrow {
    font-size: 10.5px !important;
  }

  html[lang="pt-BR"] body.events-page .events-heading-copy {
    font-size: 15.5px !important;
  }

  html[lang="pt-BR"] body.events-page .events-note {
    font-size: 13.5px !important;
  }
}



/* =========================================================
   V69 — PT EVENTS TAGLINE +1PX
   ========================================================= */

html[lang="pt-BR"] body.events-page .events-heading-copy {
  font-size: 18px !important;
}

@media (min-width: 1101px) and (max-height: 760px) {
  html[lang="pt-BR"] body.events-page .events-heading-copy {
    font-size: 16.5px !important;
  }
}



/* =========================================================
   V70 — ENGLISH EVENTS MATCH PORTUGUESE FORMATTING
   Keeps wording language-specific, but matches typography
   and sizing exactly across EN and PT.
   ========================================================= */

/* WEDDING WEEKEND / FIM DE SEMANA DO CASAMENTO */
body.events-page .events-eyebrow {
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

/* Three days together in Malta. / Três dias juntos em Malta. */
body.events-page .events-heading-copy {
  font-size: 18px !important;
}

/* More details... / Mais detalhes... */
body.events-page .events-note {
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Short desktop viewport */
@media (min-width: 1101px) and (max-height: 760px) {
  body.events-page .events-eyebrow {
    font-size: 10.5px !important;
    font-weight: 700 !important;
  }

  body.events-page .events-heading-copy {
    font-size: 16.5px !important;
  }

  body.events-page .events-note {
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }
}



/* GEL & NOEL — EDITORIAL STORY PAGES
   Scoped to html.gn-story-page; shared site styles above are preserved. */
html.gn-story-page {
  --olive: #253719;
  --deep-olive: #10210d;
  --gold: #b99545;
  --brass: #a9853a;
  --cream: #f7f6f2;
  --paper: #f7f6f2;
  --ink: #25271f;
  --fine-line: rgba(185, 149, 69, .45);
}
html.gn-story-page * { box-sizing: border-box; }
html.gn-story-page { scroll-behavior: smooth; }
html.gn-story-page body {
  margin: 0;
  color: var(--deep-olive);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
html.gn-story-page a { color: inherit; }
html.gn-story-page img { max-width: 100%; }
html.gn-story-page a:focus-visible { outline: 2px solid var(--olive); outline-offset: 5px; }
html.gn-story-page .gn-story-skip-link { position: absolute; top: -100px; left: 16px; z-index: 10; padding: 12px 18px; background: var(--cream); font: 14px Inter, Arial, sans-serif; }
html.gn-story-page .gn-story-skip-link:focus { top: 8px; }
/* Navigation consolidated from the existing site's current V54 styling. */
html.gn-story-page .gn-story-top-nav { display: grid; grid-template-columns: 160px minmax(0, 1fr) 160px; align-items: center; min-height: 48px; padding: 0 4vw; background: #f7f6f2; border-bottom: 1px solid rgba(185,149,69,.25); }
html.gn-story-page .gn-story-nav-brand { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; }
html.gn-story-page .gn-story-nav-logo { display: block; width: 108px; max-width: 108px; max-height: 44px; height: auto; object-fit: contain; transform: translateX(-2vw) scale(1.8); transform-origin: center; pointer-events: none; }
html.gn-story-page .gn-story-nav-brand::after,
html.gn-story-page .gn-story-nav-contact::before { content: ''; position: absolute; top: 50%; width: 2px; height: 30px; transform: translateY(-50%); background: rgba(185,149,69,.72); }
html.gn-story-page .gn-story-nav-brand::after { right: 0; }
html.gn-story-page .gn-story-nav-contact::before { left: 0; }
html.gn-story-page .gn-story-nav-links { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(17px,2.3vw,40px); font: 500 9.1px/1 Inter,Arial,sans-serif; letter-spacing: .21em; text-transform: uppercase; }
html.gn-story-page .gn-story-nav-links a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; text-decoration: none; color: var(--ink); white-space: nowrap; transition: color 180ms ease,text-shadow 180ms ease; }
html.gn-story-page .gn-story-nav-links a[aria-current='page']::after { content: ''; position: absolute; bottom: 8px; left: 0; right: .21em; height: 1px; background: var(--gold); }
html.gn-story-page .gn-story-nav-links a:hover,
html.gn-story-page .gn-story-nav-contact a:hover { color: #b99545; text-shadow: 0 0 3px rgba(185,149,69,.5),0 0 6px rgba(185,149,69,.3); }
html.gn-story-page .gn-story-flag-link img { display: block; width: 19px; height: 13px; border-radius: 1.5px; box-shadow: 0 0 0 .5px rgba(16,33,13,.16); }
html.gn-story-page .gn-story-nav-contact { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; }
html.gn-story-page .gn-story-nav-contact-inner { display: flex; flex-direction: column; align-items: center; gap: 3px; transform: translateX(2vw); text-align: center; white-space: nowrap; }
html.gn-story-page .gn-story-nav-contact-label { font: 500 6.8px/1 Inter,Arial,sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #9f8140; }
html.gn-story-page .gn-story-nav-contact a { font: 400 7.8px/1 Inter,Arial,sans-serif; letter-spacing: .035em; text-decoration: none; color: #334129; padding: 4px 0; }
/* Editorial typography and layout; original navigation is prepended at build time. */
html.gn-story-page { --display: 'Bodoni Moda', 'Cormorant Garamond', Georgia, serif; --reading: 'Cormorant Garamond', Georgia, serif; --story-nav-height: 48px; }
html.gn-story-page { scroll-padding-top: calc(var(--story-nav-height) + 16px); overflow-x: visible; }
html.gn-story-page body {
  -webkit-font-smoothing: antialiased;
  overflow: visible;
}
html.gn-story-page .gn-story-top-nav { position: sticky; top: 0; z-index: 100; background: var(--paper); }
html.gn-story-page .gn-story-skip-link { z-index: 101; }
html.gn-story-page figure,
html.gn-story-page blockquote { margin: 0; }
html.gn-story-page img { display: block; }
html.gn-story-page ::selection { color: var(--cream); background: var(--olive); }
html.gn-story-page .gn-story-editorial { width: min(920px, 76%); margin-inline: auto; }
html.gn-story-page .gn-story-eyebrow,
html.gn-story-page .gn-story-running-head,
html.gn-story-page .gn-story-folio,
html.gn-story-page figcaption,
html.gn-story-page .gn-story-chapter-links,
html.gn-story-page .gn-story-chapter-meta,
html.gn-story-page .gn-story-footer-links { font-family: Inter, Arial, sans-serif; font-size: 10px; line-height: 1.5; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; }
html.gn-story-page .gn-story-running-head { display: flex; justify-content: space-between; gap: 15px; padding: 20.25px 0 11px; border-bottom: 1px solid var(--brass); }
html.gn-story-page .gn-story-running-head p { margin: 0; }
html.gn-story-page .gn-story-cover { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 5.5%; padding-top: 20.25px; align-items: start; }
html.gn-story-page .gn-story-cover-copy { padding-top: 13.5px; }
html.gn-story-page .gn-story-cover h1 { position: relative; margin: 0 0 16.5px -5px; font: 400 clamp(58.5px, 7.5vw, 108px)/.88 var(--display); letter-spacing: -.072em; }
html.gn-story-page .gn-story-cover h1 span,
html.gn-story-page .gn-story-cover h1 em { display: block; }
html.gn-story-page .gn-story-cover h1 em { font-weight: 400; padding-top: .06em; letter-spacing: -.06em; }
html.gn-story-page .gn-story-cover-deck { margin: 16.5px 0 18px; font: italic 500 clamp(15.75px, 1.3875vw, 19.5px)/1.2 var(--reading); max-width: 210px; }
html.gn-story-page .gn-story-chapter-links { display: flex; flex-wrap: wrap; gap: 25px; letter-spacing: .11em; }
html.gn-story-page .gn-story-chapter-links a { display: inline-flex; align-items: center; min-height: 36px; gap: 15px; text-decoration: none; border-bottom: 1px solid var(--brass); }
html.gn-story-page .gn-story-chapter-links a span { color: #72654b; font-size: 9px; }
html.gn-story-page .gn-story-chapter-links a:hover { color: var(--brass); }
html.gn-story-page .gn-story-cover-inset { margin: 25.5px 0 0 19%; width: 45%; }
html.gn-story-page .gn-story-photo { width: 100%; height: auto; }
html.gn-story-page .gn-story-mono { filter: grayscale(1) contrast(1.035); }
html.gn-story-page .gn-story-cover-inset .gn-story-photo { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 38%; }
html.gn-story-page .gn-story-cover-main { width: 86%; max-width: 350px; margin-left: auto; }
html.gn-story-page .gn-story-cover-main .gn-story-photo { aspect-ratio: 3 / 4; object-fit: cover; object-position: center; }
html.gn-story-page figcaption { margin-top: 12px; color: #5b624f; font-size: 8px; letter-spacing: .12em; line-height: 1.65; }
html.gn-story-page .gn-story-cover-main figcaption { display: flex; justify-content: space-between; gap: 20px; }
html.gn-story-page .gn-story-chapter { margin-top: clamp(36px, 4vw, 54px); scroll-margin-top: 26.25px; }
html.gn-story-page .gn-story-chapter-heading { display: flex; align-items: center; gap: 21px; padding-top: 12px; border-top: 1px solid var(--brass); margin-bottom: 22.5px; }
html.gn-story-page .gn-story-chapter-heading h2 { margin: 0; font: 400 clamp(46.5px, 4.95vw, 69px)/1.02 var(--display); letter-spacing: -.055em; }
html.gn-story-page .gn-story-chapter-meta { padding-top: 12.75px; font-size: 9px; letter-spacing: .16em; }
html.gn-story-page .gn-story-chapter-meta span { display: block; }
html.gn-story-page .gn-story-chapter-meta .gn-story-version { font: 400 12px/1.5 Cinzel, Georgia, serif; letter-spacing: .025em; margin-top: 4px; }
html.gn-story-page .gn-story-chapter-body { display: flow-root; }
/* Let the story occupy the space below its photo group instead of reserving a whole empty column. */
html.gn-story-page .gn-story-chapter-aside { float: left; width: 44.5%; min-width: 0; margin: 0 11% 18px 0; }
html.gn-story-page .gn-story-chapter-copy { min-width: 0; font: 400 18px/1.45 var(--reading); color: var(--olive); }
html.gn-story-page .gn-story-chapter-copy p { margin: 0 0 .7em; text-wrap: pretty; }
html.gn-story-page .gn-story-chapter-copy p:first-child { font-size: 19.5px; line-height: 1.13; color: var(--deep-olive); margin-bottom: .8em; }
html.gn-story-page .gn-story-chapter-copy p:last-child { margin-bottom: 0; }
html.gn-story-page .gn-story-chapter-copy p:first-child::first-letter { font-family: var(--display); font-size: 1.38em; }
html.gn-story-page .gn-story-gel-photo { width: 80%; max-width: 320px; }
html.gn-story-page .gn-story-gel-photo .gn-story-photo { aspect-ratio: 3 / 4; object-fit: cover; }
html.gn-story-page .gn-story-aside-quote { margin: 26.25px 0 0; padding: 0 3% 0 9%; }
html.gn-story-page .gn-story-aside-quote p { margin: 0; font: italic 400 clamp(19.5px, 1.875vw, 26.25px)/1.11 var(--reading); letter-spacing: -.015em; text-wrap: balance; }
html.gn-story-page .gn-story-aside-quote cite { display: block; margin-top: 14.25px; font: normal 400 9px/1.4 Inter, Arial, sans-serif; letter-spacing: .19em; text-transform: uppercase; }
html.gn-story-page .gn-story-chapter-noel .gn-story-chapter-heading { justify-content: flex-end; }
html.gn-story-page .gn-story-chapter-noel .gn-story-chapter-meta { order: -1; text-align: right; }
html.gn-story-page .gn-story-chapter-noel .gn-story-chapter-aside { float: right; margin: 0 0 18px 11%; }
html.gn-story-page .gn-story-noel-photo { width: 72%; max-width: 280px; margin-left: auto; }
html.gn-story-page .gn-story-noel-photo .gn-story-photo { aspect-ratio: 3 / 4; object-fit: cover; }
html.gn-story-page .gn-story-home-photo { float: left; clear: both; width: min(30%, 200px); margin: 28px 32px 18px 0; }
html.gn-story-page .gn-story-home-photo .gn-story-photo { aspect-ratio: 1; object-fit: cover; }
html.gn-story-page .gn-story-photo-essay { width: 82%; max-width: 720px; margin: clamp(32px, 3.5vw, 46px) auto 0; }
html.gn-story-page .gn-story-photo-essay .gn-story-photo { aspect-ratio: 1.6; object-fit: cover; object-position: 50% 62%; }
html.gn-story-page .gn-story-photo-essay figcaption { display: flex; justify-content: space-between; gap: 20px; }
html.gn-story-page .gn-story-shared-ending { margin-top: 52.5px; text-align: center; }
html.gn-story-page .gn-story-ending-kicker { font: 400 11px/1.5 Cinzel, Georgia, serif; letter-spacing: .15em; margin: 0 0 14.25px; }
html.gn-story-page .gn-story-shared-ending h2 { max-width: 675px; margin: 0 auto; font: 400 clamp(33px, 4.425vw, 61.5px)/1.02 var(--display); letter-spacing: -.052em; text-wrap: balance; }
html.gn-story-page .gn-story-shared-ending h2 em { display: block; font-weight: 400; }
html.gn-story-page .gn-story-ending-rule { display: block; width: 49.5px; height: 1px; background: var(--brass); margin: 21px auto; }
html.gn-story-page .gn-story-ending-copy { max-width: 405px; margin: 0 auto; font: 400 19px/1.35 var(--reading); text-wrap: pretty; }
html.gn-story-page .gn-story-ending-copy p { margin: 0 0 12px; }
html.gn-story-page .gn-story-malta-photo { width: min(440px, 62%); margin: 24px auto 0; }
html.gn-story-page .gn-story-malta-photo .gn-story-photo { aspect-ratio: 1.25; object-fit: cover; object-position: 50% 40%; }
html.gn-story-page .gn-story-ending-line { margin: 20.25px auto 0; font: italic 500 18px/1.22 var(--reading); }
html.gn-story-page .gn-story-signoff { margin: 24px 0 37.5px; font: 400 13.5px/1.2 Cinzel, Georgia, serif; letter-spacing: .08em; }
html.gn-story-page .gn-story-editorial-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0 31px; border-top: 1px solid var(--brass); font: 400 9px/1.6 Inter, Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
html.gn-story-page .gn-story-editorial-footer p { margin: 0; }
html.gn-story-page .gn-story-footer-links { display: flex; gap: 26px; font-size: 9px; letter-spacing: .1em; }
html.gn-story-page .gn-story-footer-links a { text-decoration: none; padding-block: 10px; }
html.gn-story-page .gn-story-footer-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 { font-size: clamp(49.5px, 5.475vw, 79.5px); letter-spacing: -.065em; line-height: .98; }
html.gn-story-page[lang='pt-BR'] .gn-story-cover-deck { max-width: 217.5px; }
html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset { margin-top: 24px; }
@media (min-width:1200px) and (max-height:760px) {
html.gn-story-page .gn-story-top-nav { min-height: 44px; grid-template-columns: 145px minmax(0,1fr) 145px; }
html.gn-story-page .gn-story-nav-logo { width: 102px; max-width: 102px; max-height: 41px; }
html.gn-story-page .gn-story-nav-brand::after,
html.gn-story-page .gn-story-nav-contact::before { height: 28px; }
html.gn-story-page .gn-story-nav-links { font-size: 8.7px; letter-spacing: .19em; gap: clamp(15px,2.15vw,36px); }
html.gn-story-page .gn-story-flag-link img { width: 18px; height: 12px; }
html.gn-story-page .gn-story-nav-contact-label { font-size: 6.1px; }
html.gn-story-page .gn-story-nav-contact a { font-size: 7px; }
}
@media (max-width:1199px) {
html.gn-story-page { --story-nav-height: 160px; }
html.gn-story-page .gn-story-editorial { width: min(800px, 76%); }
html.gn-story-page .gn-story-top-nav { grid-template-columns: 1fr; justify-items: center; gap: 8px; padding: 13px 24px 14px; }
html.gn-story-page .gn-story-nav-logo { width: 126px; max-width: 126px; max-height: 58px; transform: none; }
html.gn-story-page .gn-story-nav-brand::after,
html.gn-story-page .gn-story-nav-contact::before { display: none; }
html.gn-story-page .gn-story-nav-links { flex-wrap: wrap; gap: 2px 23px; font-size: 11px; letter-spacing: .12em; }
html.gn-story-page .gn-story-nav-contact-inner { transform: none; flex-direction: row; gap: 10px; flex-wrap: wrap; justify-content: center; white-space: normal; }
html.gn-story-page .gn-story-nav-contact-label,
html.gn-story-page .gn-story-nav-contact a { font-size: 10px; line-height: 1.3; }
html.gn-story-page .gn-story-flag-link img { width: 22px; height: 15px; }
html.gn-story-page .gn-story-cover-copy { padding-top: 12px; }
html.gn-story-page .gn-story-cover-inset { margin-top: 19.5px; width: 45%; }
html.gn-story-page .gn-story-chapter-aside { width: 46.5%; margin-right: 7%; }
html.gn-story-page .gn-story-chapter-noel .gn-story-chapter-aside { margin-left: 7%; margin-right: 0; }
html.gn-story-page .gn-story-chapter-copy { font-size: 18px; }
html.gn-story-page .gn-story-chapter-copy p:first-child { font-size: 19.5px; }
}
@media (min-width:761px) and (max-width:1000px) {
html.gn-story-page .gn-story-cover h1 { font-size: 7.125vw; }
html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 { font-size: 5.475vw; }
html.gn-story-page .gn-story-cover-inset { width: 40%; margin-top: 16.5px; }
html.gn-story-page .gn-story-cover-deck { font-size: 15.75px; margin-block: 14.25px; }
html.gn-story-page .gn-story-chapter-links { font-size: 9px; gap: 18px; }
html.gn-story-page .gn-story-chapter-links a { gap: 10px; }
}
@media (max-width:760px) {
html.gn-story-page { --story-nav-height: 190px; }
html.gn-story-page .gn-story-editorial { width: calc(100% - 40px); max-width: 420px; }
html.gn-story-page .gn-story-running-head { font-size: 8px; letter-spacing: .12em; padding-top: 15.75px; gap: 12px; }
html.gn-story-page .gn-story-running-head p:last-child { text-align: right; }
html.gn-story-page .gn-story-cover { display: block; padding-top: 16.5px; }
html.gn-story-page .gn-story-cover-copy { padding-top: 4px; }
html.gn-story-page .gn-story-cover h1 { font-size: clamp(46.5px, 12.15vw, 75px); line-height: .9; margin-left: -3px; margin-bottom: 11.25px; }
html.gn-story-page .gn-story-cover h1 span,
html.gn-story-page .gn-story-cover h1 em { display: inline; }
html.gn-story-page .gn-story-cover h1 em { padding-top: 0; }
html.gn-story-page .gn-story-cover-deck { margin: 12.75px 0 10px; font-size: 16.5px; max-width: none; }
html.gn-story-page .gn-story-chapter-links { margin-bottom: 23px; gap: 27px; }
html.gn-story-page .gn-story-cover-main { width: 76%; max-width: 230px; margin-left: auto; }
html.gn-story-page .gn-story-cover-main .gn-story-photo { aspect-ratio: 3 / 4; }
html.gn-story-page .gn-story-cover-inset { display: none; }
html.gn-story-page .gn-story-chapter { margin-top: 36px; }
html.gn-story-page .gn-story-chapter-heading { padding-top: 11.25px; gap: 17.25px; margin-bottom: 16.5px; }
html.gn-story-page .gn-story-chapter-heading h2 { font-size: 49.5px; }
html.gn-story-page .gn-story-chapter-meta { padding-top: 10px; }
html.gn-story-page .gn-story-chapter-body { display: flex; flex-direction: column; gap: 19.5px; }
html.gn-story-page .gn-story-chapter-aside { float: none; width: 100%; margin: 0; }
html.gn-story-page .gn-story-chapter-copy { font-size: 18px; line-height: 1.45; }
html.gn-story-page .gn-story-chapter-copy p:first-child { font-size: 19.5px; }
html.gn-story-page .gn-story-gel-photo { width: 66%; max-width: 220px; }
html.gn-story-page .gn-story-aside-quote { margin-top: 16.5px; padding-left: 10%; }
html.gn-story-page .gn-story-aside-quote p { font-size: 21px; }
html.gn-story-page .gn-story-aside-quote cite { margin-top: 13px; }
html.gn-story-page .gn-story-noel-photo { width: 86%; }
html.gn-story-page .gn-story-home-photo { float: none; clear: none; width: 45%; max-width: 170px; margin: 26px auto 22px 0; }
html.gn-story-page .gn-story-chapter-noel .gn-story-chapter-copy { order: 1; }
html.gn-story-page .gn-story-chapter-noel .gn-story-chapter-aside { float: none; width: 44%; margin: 0 0 0 auto; }
html.gn-story-page .gn-story-chapter-noel .gn-story-noel-photo { width: 100%; margin: 0; }
html.gn-story-page .gn-story-photo-essay { width: 78%; margin: 34px auto 0; }
html.gn-story-page .gn-story-photo-essay .gn-story-photo { aspect-ratio: 1.18; object-position: 50% 62%; }
html.gn-story-page .gn-story-photo-essay figcaption,
html.gn-story-page .gn-story-cover-main figcaption { font-size: 7px; gap: 12px; }
html.gn-story-page .gn-story-shared-ending { margin-top: 35.25px; }
html.gn-story-page .gn-story-ending-kicker { font-size: 10px; margin-bottom: 12.75px; }
html.gn-story-page .gn-story-shared-ending h2 { font-size: clamp(30px, 7.35vw, 43.5px); }
html.gn-story-page .gn-story-ending-rule { margin-block: 17.25px; }
html.gn-story-page .gn-story-ending-copy { font-size: 19px; }
html.gn-story-page .gn-story-malta-photo { width: 72%; max-width: 280px; margin: 20px auto 0; }
html.gn-story-page .gn-story-ending-line { max-width: 232.5px; margin-top: 17.25px; font-size: 17.25px; text-wrap: balance; }
html.gn-story-page .gn-story-signoff { margin: 19.5px 0 28.5px; font-size: 12.75px; }
html.gn-story-page .gn-story-editorial-footer { flex-direction: column; gap: 6px; padding-block: 19px 25px; text-align: center; font-size: 8px; }
html.gn-story-page .gn-story-footer-links { font-size: 8px; }
html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 { font-size: clamp(42px, 11.4vw, 67.5px); line-height: .95; }
html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 span,
html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 em { display: block; }
html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 em { padding-top: .07em; }
html.gn-story-page[lang='pt-BR'] .gn-story-cover-deck { max-width: none; }
}
@media (max-width:380px) {
html.gn-story-page .gn-story-editorial { width: calc(100% - 34px); }
html.gn-story-page .gn-story-top-nav { padding-inline: 17px; }
html.gn-story-page .gn-story-nav-links { gap: 0 17px; font-size: 10px; }
html.gn-story-page .gn-story-running-head { font-size: 7px; }
html.gn-story-page .gn-story-cover h1 { font-size: 12vw; }
html.gn-story-page .gn-story-cover-deck { font-size: 15.75px; }
html.gn-story-page .gn-story-chapter-copy { font-size: 18px; }
}
/* One complete opening screen; the next chapter begins after its bottom rule. */
@media screen {
html.gn-story-page .gn-story-opening { --intro-room: max(180px, calc(100svh - var(--story-nav-height) - 144px)); display: flex; flex-direction: column; min-height: calc(100svh - var(--story-nav-height)); box-sizing: border-box; border-bottom: 1px solid var(--brass); }
html.gn-story-page .gn-story-running-head { padding-top: 14px; padding-bottom: 10px; }
html.gn-story-page .gn-story-cover { flex: 1 0 auto; padding: 14px 0; align-content: start; }
html.gn-story-page .gn-story-cover-copy { display: flex; flex-direction: column; align-items: flex-start; padding-top: 0; }
html.gn-story-page .gn-story-cover h1 { font-size: clamp(34px, min(7.5vw, calc(var(--intro-room) * .21)), 108px); margin: 0 0 10px -4px; }
html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 { font-size: clamp(30px, min(5.475vw, calc(var(--intro-room) * .165)), 79.5px); }
html.gn-story-page .gn-story-cover-deck,
html.gn-story-page[lang='pt-BR'] .gn-story-cover-deck { max-width: none; margin: 0; }
html.gn-story-page .gn-story-opening > .gn-story-chapter-links { flex: none; justify-content: center; align-self: stretch; gap: 12px 32px; margin: 0; padding: 8px 0 16px; }
html.gn-story-page .gn-story-cover-inset,
html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset { display: block; width: min(45%, 132px, calc(var(--intro-room) * .26)); margin: 14px 0 0; }
html.gn-story-page .gn-story-cover-main { width: min(86%, 350px, calc((var(--intro-room) - 28px) * .75)); max-width: none; }
html.gn-story-page .gn-story-cover-main figcaption,
html.gn-story-page .gn-story-cover-inset figcaption { margin-top: 8px; }
html.gn-story-page .gn-story-chapter-gel { margin-top: 0; }
html.gn-story-page .gn-story-chapter-gel .gn-story-chapter-heading { border-top: 0; padding-top: 20px; }
}
@media screen and (max-width:760px) {
html.gn-story-page .gn-story-cover { --mobile-type-space: 110px; display: grid; grid-template-columns: minmax(0,.55fr) minmax(0,1fr); gap: 12px 14px; }
html.gn-story-page[lang='pt-BR'] .gn-story-cover { --mobile-type-space: 150px; }
html.gn-story-page .gn-story-cover-copy { display: contents; }
html.gn-story-page .gn-story-cover h1 { grid-column: 1 / -1; grid-row: 1; font-size: clamp(42px, 12vw, 67px); margin: 0 0 0 -3px; }
html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 { font-size: clamp(38px, 11.4vw, 62px); }
html.gn-story-page .gn-story-cover-deck { grid-column: 1 / -1; grid-row: 2; }
html.gn-story-page .gn-story-cover-inset,
html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset { grid-column: 1; grid-row: 3; align-self: end; width: min(100%, 100px, calc(var(--intro-room) * .24)); margin: 0; }
html.gn-story-page .gn-story-cover-main { grid-column: 2; grid-row: 3; align-self: start; width: min(100%, 230px, max(70px, calc((var(--intro-room) - var(--mobile-type-space)) * .75))); margin-left: auto; }
}
@media (prefers-reduced-motion:reduce) {
html.gn-story-page { scroll-behavior: auto; }
html.gn-story-page *,
html.gn-story-page *::before,
html.gn-story-page *::after { transition: none !important; }
}
@media print {
html.gn-story-page .gn-story-top-nav,
html.gn-story-page .gn-story-skip-link,
html.gn-story-page .gn-story-chapter-links,
html.gn-story-page .gn-story-footer-links { display: none; }
html.gn-story-page body {}
html.gn-story-page .gn-story-editorial { width: 100%; }
html.gn-story-page .gn-story-cover h1 { font-size: 82pt; }
html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 { font-size: 61pt; }
html.gn-story-page .gn-story-chapter { margin-top: 35pt; }
html.gn-story-page .gn-story-chapter-copy { font-size: 13pt; }
html.gn-story-page .gn-story-chapter-copy p:first-child { font-size: 18pt; }
html.gn-story-page .gn-story-chapter-heading h2 { font-size: 48pt; }
html.gn-story-page .gn-story-shared-ending h2 { font-size: 42pt; }
html.gn-story-page .gn-story-ending-copy { font-size: 14pt; }
html.gn-story-page .gn-story-shared-ending,
html.gn-story-page .gn-story-photo-essay { margin-top: 36pt; }
html.gn-story-page figure { break-inside: avoid; }
html.gn-story-page p { orphans: 3; widows: 3; }
html.gn-story-page h2 { break-after: avoid; }
}


/* =========================================================
   OUR STORY — GEL & NOEL REFINEMENT
   09 SEP 2026
   - restore original headline/deck scale
   - keep paper texture at native proportions, never stretched
   - enlarge/reposition "The little things" photo block
   - place "Together, in our way" inside Gel's story
   ========================================================= */

/* Background: native-size texture only. No cover/stretching. */
@media screen {
  html.gn-story-page body {}
}

/* Desktop/tablet opening: restore the original editorial scale. */
@media screen and (min-width: 761px) {
  html.gn-story-page .gn-story-cover {
    display: block !important;
    position: relative;
    padding: 20.25px 0 18px !important;
  }

  html.gn-story-page .gn-story-cover-copy {
    display: block !important;
    position: relative;
    min-height: min(560px, max(390px, calc(var(--intro-room) - 12px)));
    padding-top: 13.5px !important;
  }

  html.gn-story-page .gn-story-cover h1 {
    font-size: clamp(58.5px, 7.5vw, 108px) !important;
    line-height: .88 !important;
    margin: 0 0 16.5px -5px !important;
    letter-spacing: -.072em !important;
  }

  html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 {
    font-size: clamp(49.5px, 5.475vw, 79.5px) !important;
    line-height: .98 !important;
    letter-spacing: -.065em !important;
  }

  html.gn-story-page .gn-story-cover-deck,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-deck {
    margin: 16.5px 0 0 !important;
    max-width: none !important;
    font-size: clamp(15.75px, 1.3875vw, 19.5px) !important;
    line-height: 1.2 !important;
  }

  /*
    "The little things" photo + caption.
    Larger, and intentionally right-of-centre rather than flush-right.
  */
  html.gn-story-page .gn-story-cover-inset,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset {
    display: block !important;
    width: min(36vw, 330px) !important;
    margin: 30px 0 0 58% !important;
  }

  html.gn-story-page .gn-story-cover-inset .gn-story-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  html.gn-story-page .gn-story-cover-inset figcaption {
    margin-top: 10px !important;
  }
}

/* The photo now lives inside Gel's written story. */
html.gn-story-page .gn-story-gel-inline-photo {
  width: min(72%, 360px);
  margin: 24px 0 25px auto;
}

html.gn-story-page .gn-story-gel-inline-photo .gn-story-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
}

html.gn-story-page .gn-story-gel-inline-photo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 9px;
}

/* Mobile: keep the hierarchy generous, then stack naturally. */
@media screen and (max-width: 760px) {
  html.gn-story-page .gn-story-cover h1 {
    font-size: clamp(46.5px, 12.15vw, 75px) !important;
    line-height: .90 !important;
  }

  html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 {
    font-size: clamp(42px, 11.4vw, 67.5px) !important;
    line-height: .95 !important;
  }

  html.gn-story-page .gn-story-cover-deck {
    font-size: 16.5px !important;
  }

  html.gn-story-page .gn-story-cover-inset,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset {
    display: block !important;
    width: min(68vw, 250px) !important;
    margin: 18px 4% 0 auto !important;
  }

  html.gn-story-page .gn-story-gel-inline-photo {
    width: min(84%, 300px);
    margin: 20px auto 22px;
  }
}


/* =========================================================
   OUR STORY — ALIGNMENT + TEXT WRAP REFINEMENT
   09 SEP 2026
   ========================================================= */

/* Desktop/tablet:
   Align "The little things" photo block with the top of
   OUR STORY / NOSSA HISTÓRIA while keeping it right-of-centre. */
@media screen and (min-width: 761px) {
  html.gn-story-page .gn-story-cover-copy {
    position: relative !important;
  }

  html.gn-story-page .gn-story-cover-inset,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset {
    position: absolute !important;
    top: 13.5px !important;
    left: 58% !important;

    width: min(36vw, 330px) !important;
    margin: 0 !important;
  }

  /* "Together, in our way" becomes an editorial pull-photo
     inside Gel's prose, allowing the following text to wrap. */
  html.gn-story-page .gn-story-gel-inline-photo {
    float: right !important;
    clear: none !important;

    width: min(30%, 280px) !important;
    margin: 4px 0 18px 30px !important;
  }

  html.gn-story-page .gn-story-gel-inline-photo .gn-story-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html.gn-story-page .gn-story-gel-inline-photo figcaption {
    margin-top: 8px !important;
    font-size: 7.5px !important;
    line-height: 1.45 !important;
  }
}

/* Mobile remains stacked and easy to read. */
@media screen and (max-width: 760px) {
  html.gn-story-page .gn-story-cover-inset,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset {
    position: static !important;
  }

  html.gn-story-page .gn-story-gel-inline-photo {
    float: none !important;
    clear: both !important;
    width: min(78%, 270px) !important;
    margin: 20px auto 22px !important;
  }
}


/* =========================================================
   OUR STORY — FINAL CSS BALANCE PASS
   09 SEP 2026
   CSS ONLY — applies to EN + PT
   ========================================================= */

@media screen and (min-width: 761px) {

  /* Opening composition:
     keep headline large, bring photo slightly closer,
     and stop the opening from becoming taller than necessary. */
  html.gn-story-page .gn-story-cover-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(245px, 31%) !important;
    grid-template-rows: auto auto 1fr !important;
    column-gap: clamp(54px, 6vw, 92px) !important;

    min-height: 410px !important;
    padding-top: 13.5px !important;
    position: relative !important;
  }

  html.gn-story-page .gn-story-cover h1 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  html.gn-story-page .gn-story-cover-deck,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-deck {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;

    margin-top: 14px !important;
  }

  /* "The Little Things" / PT equivalent:
     aligned with headline top, but visually lighter. */
  html.gn-story-page .gn-story-cover-inset,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    align-self: start !important;

    width: 100% !important;
    max-width: 285px !important;
    margin: 0 0 0 auto !important;
  }

  html.gn-story-page .gn-story-cover-inset .gn-story-photo {
    width: 100% !important;
    height: auto !important;

    aspect-ratio: 5 / 6 !important;
    object-fit: cover !important;
    object-position: 50% 38% !important;
  }

  html.gn-story-page .gn-story-cover-inset figcaption {
    margin-top: 8px !important;
    font-size: 7.5px !important;
    letter-spacing: .13em !important;
  }

  /* Give chapter links a calm strip below the opening
     instead of letting them collide with the image caption. */
  html.gn-story-page .gn-story-chapter-links {
    justify-content: center !important;
    margin-top: 8px !important;
    padding-top: 2px !important;
  }

  /* "Together, in our way":
     smaller editorial pull-photo with true text wrap. */
  html.gn-story-page .gn-story-gel-inline-photo {
    float: right !important;
    clear: none !important;

    width: min(27%, 235px) !important;
    margin: 2px 0 16px 24px !important;
  }

  html.gn-story-page .gn-story-gel-inline-photo .gn-story-photo {
    width: 100% !important;
    height: auto !important;

    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html.gn-story-page .gn-story-gel-inline-photo figcaption {
    margin-top: 7px !important;
    gap: 10px !important;

    font-size: 7px !important;
    line-height: 1.4 !important;
    letter-spacing: .11em !important;
  }
}

/* Slightly roomier treatment for very wide displays. */
@media screen and (min-width: 1400px) {
  html.gn-story-page .gn-story-cover-copy {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 30%) !important;
    column-gap: clamp(70px, 6.5vw, 110px) !important;
  }

  html.gn-story-page .gn-story-cover-inset,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset {
    max-width: 300px !important;
  }
}

/* Mobile remains stacked and unchanged in spirit. */
@media screen and (max-width: 760px) {
  html.gn-story-page .gn-story-cover-copy {
    display: block !important;
    min-height: 0 !important;
  }

  html.gn-story-page .gn-story-cover-inset,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset {
    position: static !important;
    width: min(64vw, 235px) !important;
    margin: 18px 4% 0 auto !important;
  }

  html.gn-story-page .gn-story-gel-inline-photo {
    float: none !important;
    clear: both !important;
    width: min(72%, 245px) !important;
    margin: 20px auto 22px !important;
  }
}


/* =========================================================
   OUR STORY — OPENING SCREEN FINAL POSITIONING
   09 SEP 2026
   CSS ONLY — EN + PT
   ========================================================= */

@media screen and (min-width: 761px) {

  /* Treat the first view as a complete editorial cover. */
  html.gn-story-page .gn-story-opening {
    position: relative !important;
    padding-bottom: 48px !important;
  }

  /* Keep 01 GEL / 02 NOEL visible just above the bottom divider. */
  html.gn-story-page .gn-story-opening > .gn-story-chapter-links {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 7px !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;
    gap: 34px !important;

    z-index: 3 !important;
  }

  /* Shift "The Little Things" block left, without changing its size or height. */
  html.gn-story-page .gn-story-cover-inset,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset {
    transform: translateX(clamp(-88px, -4.6vw, -58px)) !important;
  }

  /* Bring the subtitle slightly closer to the headline. */
  html.gn-story-page .gn-story-cover-deck,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-deck {
    margin-top: 9px !important;
  }

  /* Give the image caption a little more presence. */
  html.gn-story-page .gn-story-cover-inset figcaption,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset figcaption {
    font-size: 8.5px !important;
  }
}

/* On shorter desktop screens keep the chapter links safely above the rule. */
@media screen and (min-width: 761px) and (max-height: 760px) {
  html.gn-story-page .gn-story-opening {
    padding-bottom: 44px !important;
  }

  html.gn-story-page .gn-story-opening > .gn-story-chapter-links {
    bottom: 5px !important;
  }
}

/* Mobile keeps its normal stacked flow. */
@media screen and (max-width: 760px) {
  html.gn-story-page .gn-story-opening {
    position: relative !important;
    padding-bottom: 0 !important;
  }

  html.gn-story-page .gn-story-opening > .gn-story-chapter-links {
    position: static !important;
    margin: 0 !important;
    padding: 8px 0 16px !important;
  }

  html.gn-story-page .gn-story-cover-inset,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-inset {
    transform: none !important;
  }
}


/* =========================================================
   OUR STORY — FIRST SCREEN VISIBILITY + TYPE SCALE
   09 SEP 2026
   CSS ONLY — EN + PT
   ========================================================= */

@media screen and (min-width: 761px) {

  /* Make the opening a true first-screen composition.
     This keeps the bottom brass rule and chapter links visible
     without needing the first scroll. */
  html.gn-story-page .gn-story-opening {
    height: calc(100svh - var(--story-nav-height) - 6px) !important;
    min-height: 0 !important;
    max-height: calc(100svh - var(--story-nav-height) - 6px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html.gn-story-page .gn-story-cover {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  html.gn-story-page .gn-story-cover-copy {
    min-height: 0 !important;
  }

  /* Slightly larger editorial headline. */
  html.gn-story-page .gn-story-cover h1 {
    font-size: clamp(64px, 8.1vw, 116px) !important;
    line-height: .87 !important;
  }

  html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 {
    font-size: clamp(54px, 6vw, 86px) !important;
    line-height: .96 !important;
  }

  /* Slightly larger subheadline, still delicate. */
  html.gn-story-page .gn-story-cover-deck,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-deck {
    font-size: clamp(17px, 1.5vw, 21.5px) !important;
    line-height: 1.18 !important;
    margin-top: 8px !important;
  }

  /* Pull chapter links clearly into the visible first screen,
     directly above the bottom divider. */
  html.gn-story-page .gn-story-opening > .gn-story-chapter-links {
    bottom: 26px !important;
    gap: 38px !important;
    font-size: 9.5px !important;
  }

  html.gn-story-page .gn-story-opening > .gn-story-chapter-links a {
    min-height: 28px !important;
  }
}

/* Extra safety on shorter desktop windows. */
@media screen and (min-width: 761px) and (max-height: 760px) {
  html.gn-story-page .gn-story-cover h1 {
    font-size: clamp(58px, 7.5vw, 104px) !important;
  }

  html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 {
    font-size: clamp(50px, 5.6vw, 79px) !important;
  }

  html.gn-story-page .gn-story-cover-deck,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover-deck {
    font-size: 17px !important;
  }

  html.gn-story-page .gn-story-opening > .gn-story-chapter-links {
    bottom: 22px !important;
  }
}

/* Mobile remains naturally scrollable. */
@media screen and (max-width: 760px) {
  html.gn-story-page .gn-story-opening {
    height: auto !important;
    min-height: calc(100svh - var(--story-nav-height)) !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* =========================================================
   OUR STORY — EXACT OLIVE-TREE PAPER TEXTURE + HEADLINE NUDGE
   09 SEP 2026
   EN + PT
   ========================================================= */

/* Use the paper directly sampled from the approved olive-tree artwork.
   No pale overlay, no colour wash, no stretching. */
@media screen {
  html.gn-story-page body {}
}

/* Give the large editorial headline a little extra breathing room
   so the decorative glyphs are never visually clipped. */
@media screen and (min-width: 761px) {
  html.gn-story-page .gn-story-cover h1,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 {
    margin-left: 8px !important;
  }
}


/* =========================================================
   OUR STORY — HOMEPAGE-MATCHED PAPER SCALE
   09 SEP 2026
   Uses a texture-only canvas with the SAME 2048×1160
   dimensions as the approved olive-tree artwork.
   ========================================================= */

@media screen {
  html.gn-story-page body {}
}

/* On mobile, avoid fixed-background rendering quirks while keeping scale. */
@media screen and (max-width: 760px) {
  html.gn-story-page body {}
}


/* =========================================================
   OUR STORY — FINAL HOMEPAGE PAPER TEXTURE MATCH
   09 SEP 2026
   Source of truth: paper_texture_olive_tree.jpg
   Match homepage texture scale and remove all distorted/AI variants.
   ========================================================= */
@media screen {
  html.gn-story-page body {}
}

/* Nudge the headline slightly to the right so it never looks clipped. */
@media screen and (min-width: 761px) {
  html.gn-story-page .gn-story-cover h1,
  html.gn-story-page[lang='pt-BR'] .gn-story-cover h1 {
    margin-left: 10px !important;
  }
}


/* =========================================================
   OUR STORY / NOSSA HISTÓRIA — FINAL PAPER SOURCE OF TRUTH
   Exact homepage asset + exact homepage scale.
   No overlay. No generated texture. No mirrored canvas.
   ========================================================= */
@media screen {
  html.gn-story-page body {}
}


/* =========================================================
   OUR STORY / NOSSA HISTÓRIA — EXACT HOMEPAGE TEXTURE SETTINGS
   Copied directly from the approved homepage behaviour.
   ========================================================= */

@media screen {
  html.gn-story-page body {}
}

/* Same tablet texture scale as HOME. */
@media screen and (min-width: 681px) and (max-width: 980px) {
  html.gn-story-page body {}
}

/* Same phone texture scale as HOME. */
@media screen and (max-width: 680px) {
  html.gn-story-page body {}
}


/* =========================================================
   OUR STORY / NOSSA HISTÓRIA — EXACT FINAL HOME V33 TEXTURE
   Exact native crop and exact final homepage scale.
   Standard filename: paper_texture_olive_tree.jpg
   ========================================================= */

@media screen {
  html.gn-story-page body {
    background-color: #f7f0e4 !important;
    background-image: url("../img/backgrounds/paper_texture_olive_tree.jpg") !important;
    background-repeat: repeat !important;
    background-position: left top !important;

    /* Home V33 final desktop scale:
       47.1724% of calc(100vh - 68px). */
    background-size: auto calc(47.1724vh - 32.077232px) !important;

    background-attachment: scroll !important;
    background-blend-mode: normal !important;
  }
}

@media screen and (min-width: 681px) and (max-width: 980px) {
  html.gn-story-page body {
    background-size: 30.46875% auto !important;
  }
}

@media screen and (max-width: 680px) {
  html.gn-story-page body {
    background-size: 38.671875% auto !important;
  }
}


/* =========================================================
   OUR STORY / NOSSA HISTÓRIA — TOP NAV MATCH HOME
   Exact approved HOME navigation background colour.
   ========================================================= */
html.gn-story-page .gn-story-top-nav {
  background: rgba(255, 250, 242, 0.97) !important;
}


/* =========================================================
   GLOBAL TOP NAV — ACTIVE PAGE UNDERLINE
   Gives HOME / THE CELEBRATION / TRAVEL / RSVP and PT
   the same active-page treatment already used by OUR STORY.
   HTML already supplies aria-current="page".
   ========================================================= */

.nav-links a {
  min-height: 40px !important;
}

.nav-links a[aria-current="page"]:not(.flag-link)::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0.21em;
  height: 1px;
  background: var(--gold);
  pointer-events: none;
}


/* =========================================================
   GLOBAL SCROLLBAR WIDTH STABILITY
   Keeps the navigation from shifting horizontally between
   short pages and long pages such as OUR STORY.
   ========================================================= */
html {
  scrollbar-gutter: stable;
}


/* =========================================================
   THE CELEBRATION / A CELEBRAÇÃO — MATCH OUR STORY PAPER
   Exact same texture file and scaling behavior used by
   OUR STORY / NOSSA HISTÓRIA.
   ========================================================= */

@media screen {
  body.events-page {
    background-color: #f7f0e4 !important;
    background-image: url("../img/backgrounds/paper_texture_olive_tree.jpg") !important;
    background-repeat: repeat !important;
    background-position: left top !important;
    background-size: auto calc(47.1724vh - 32.077232px) !important;
    background-attachment: scroll !important;
    background-blend-mode: normal !important;
  }

  /* Keep the events content transparent so the shared paper shows through. */
  body.events-page .events-main {
    background-color: transparent !important;
    background-image: none !important;
  }
}

/* Exact same tablet texture scale as OUR STORY / NOSSA HISTÓRIA. */
@media screen and (min-width: 681px) and (max-width: 980px) {
  body.events-page {
    background-size: 30.46875% auto !important;
  }
}

/* Exact same phone texture scale as OUR STORY / NOSSA HISTÓRIA. */
@media screen and (max-width: 680px) {
  body.events-page {
    background-size: 38.671875% auto !important;
  }
}


/* =========================================================
   THE CELEBRATION / A CELEBRAÇÃO — FINAL PAPER VISIBILITY FIX
   The old Events cream veil was covering the shared paper texture.
   Keep the Waterfall Gardens artwork, remove only the veil.
   ========================================================= */

@media screen {
  body.events-page {
    background-color: #f7f0e4 !important;
    background-image: url("../img/backgrounds/paper_texture_olive_tree.jpg") !important;
    background-repeat: repeat !important;
    background-position: left top !important;
    background-size: auto calc(47.1724vh - 32.077232px) !important;
    background-attachment: scroll !important;
    background-blend-mode: normal !important;
  }

  body.events-page main.events-main {
    background: transparent !important;
  }

  /* This was the layer hiding/softening the paper texture. */
  body.events-page main.events-main::after {
    background: none !important;
    background-image: none !important;
  }
}

@media screen and (min-width: 681px) and (max-width: 980px) {
  body.events-page {
    background-size: 30.46875% auto !important;
  }
}

@media screen and (max-width: 680px) {
  body.events-page {
    background-size: 38.671875% auto !important;
  }
}


/* =========================================================
   THE CELEBRATION / A CELEBRAÇÃO — TRUE WATERMARK OVER PAPER
   The OUR STORY paper is the real background.
   Waterfall Gardens remains only as a soft watermark layer.
   ========================================================= */

@media screen {
  body.events-page {
    background-color: #f7f0e4 !important;
    background-image: url("../img/backgrounds/paper_texture_olive_tree.jpg") !important;
    background-repeat: repeat !important;
    background-position: left top !important;
    background-size: auto calc(47.1724vh - 32.077232px) !important;
    background-attachment: scroll !important;
    background-blend-mode: normal !important;
  }

  body.events-page main.events-main {
    background: transparent !important;
  }

  body.events-page main.events-main::after {
    background: none !important;
    background-image: none !important;
  }

  /* Waterfall Gardens is now a true watermark, not the page background. */
  body.events-page.site-shell .events-watermark {
    opacity: 0.18 !important;
    background-image: url("../img/background_waterfall_watermark_events.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    pointer-events: none !important;
  }
}

@media screen and (min-width: 681px) and (max-width: 980px) {
  body.events-page {
    background-size: 30.46875% auto !important;
  }
}

@media screen and (max-width: 680px) {
  body.events-page {
    background-size: 38.671875% auto !important;
  }
}


/* =========================================================
   HONEYMOON FUND PAGE
   Integrated into the main Gel & Noel stylesheet.
   Scale and typography follow The Celebration page.
   ========================================================= */

.honeymoon-page {
  min-height: 100vh;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #fbf4e9;
}

/* Match the normal site header behaviour while allowing the extra nav item. */
.honeymoon-page .top-nav {
  position: relative;
  z-index: 50;
}

.honeymoon-page .nav-links {
  gap: clamp(14px, 2.1vw, 34px);
  font-size: 11px;
}

/* Keep the existing honeymoon paper background exactly as designed. */
.honeymoon-main {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 68px);
  background:
    linear-gradient(rgba(251,244,233,.82), rgba(251,244,233,.9)),
    url("../img/backgrounds/paper_texture_olive_tree.jpg") center top / cover fixed;
}

.honeymoon-main::before,
.honeymoon-main::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 620px;
  pointer-events: none;
  opacity: .08;
  background: url("../img/olive-branch.svg") center / contain no-repeat;
  z-index: 0;
}

.honeymoon-main::before {
  left: -225px;
  top: 260px;
  transform: rotate(-34deg) scale(2.2);
}

.honeymoon-main::after {
  right: -250px;
  top: 810px;
  transform: rotate(145deg) scale(2.1);
}

.honeymoon-hero,
.honeymoon-gift-section,
.honeymoon-wall-section {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   Heading scale mirrors The Celebration page
   --------------------------------------------------------- */
.honeymoon-hero {
  padding: 20px 4.5vw 18px;
  text-align: center;
}

.honeymoon-hero-copy {
  width: min(760px, 100%);
  margin: 0 auto;
}

.honeymoon-eyebrow,
.step-kicker,
.success-kicker {
  margin: 0 0 4px;
  font-family: Inter, Arial, sans-serif;
  color: var(--gold);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .31em;
  text-transform: uppercase;
}

.honeymoon-hero h1 {
  margin: 0;
  color: var(--deep-olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(44px, 4.1vw, 62px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.035em;
}

.honeymoon-hero h1 em {
  color: var(--sage);
  font-weight: 400;
}

.honeymoon-divider {
  width: min(270px, 65vw);
  margin: 9px auto 6px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.honeymoon-divider span {
  height: 1px;
  background: rgba(185,149,69,.46);
}

.honeymoon-divider img {
  width: 28px;
  height: 14px;
  object-fit: contain;
}

.honeymoon-intro {
  width: min(650px, 100%);
  margin: 0 auto;
  color: var(--deep-olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  line-height: 1.30;
  font-style: italic;
}

/* ---------------------------------------------------------
   Contribution form
   --------------------------------------------------------- */
.honeymoon-gift-section {
  width: min(720px, calc(100% - 40px));
  margin: 8px auto 64px;
}

.honeymoon-form-card,
.honeymoon-checkout-card,
.honeymoon-success-card {
  position: relative;
  padding: 26px 30px 28px;
  background: rgba(255,250,242,.62);
  border: 1px solid rgba(185,149,69,.30);
  box-shadow:
    0 25px 55px rgba(55,42,23,.10),
    0 8px 20px rgba(55,42,23,.05);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.honeymoon-form-card::before,
.honeymoon-checkout-card::before,
.honeymoon-success-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(185,149,69,.12);
  pointer-events: none;
}

.honeymoon-step-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 22px;
}

.step-number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(185,149,69,.48);
  border-radius: 50%;
  color: var(--brass);
  font-family: Inter, Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .10em;
}

.honeymoon-step-heading h2,
.honeymoon-success-card h2 {
  margin: 0;
  color: var(--deep-olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(27px, 2.2vw, 35px);
  font-weight: 400;
  line-height: .98;
}

.honeymoon-field {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}

.honeymoon-field label,
.honeymoon-field legend {
  display: block;
  margin: 0 0 7px;
  padding: 0;
  color: var(--deep-olive);
  font-family: Inter, Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.optional {
  color: rgba(16,33,13,.42);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: lowercase;
}

.honeymoon-field input[type="text"],
.honeymoon-field input[type="email"],
.honeymoon-field input[type="number"],
.honeymoon-field textarea {
  width: 100%;
  border: 1px solid rgba(185,149,69,.38);
  border-radius: 0;
  background: rgba(255,255,255,.44);
  color: var(--deep-olive);
  outline: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.honeymoon-field input[type="text"],
.honeymoon-field input[type="email"],
.honeymoon-field input[type="number"] {
  height: 48px;
  padding: 0 14px;
}

.honeymoon-field textarea {
  min-height: 104px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.3;
}

.honeymoon-field input:focus,
.honeymoon-field textarea:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.68);
  box-shadow: 0 0 0 2px rgba(185,149,69,.09);
}

.field-hint,
.secure-note {
  margin: 6px 0 0;
  color: rgba(16,33,13,.58);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 13px;
  line-height: 1.3;
  font-style: italic;
}

/* One free-entry amount field. No suggested amount buttons. */
.gift-amount-wrap {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  border: 1px solid rgba(185,149,69,.38);
  background: rgba(255,255,255,.44);
}

.gift-amount-wrap > span {
  text-align: center;
  color: var(--brass);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
}

.gift-amount-wrap input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
}

.two-column-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.character-count {
  margin-top: 4px;
  text-align: right;
  color: rgba(16,33,13,.48);
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .08em;
}

.publish-consent {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 20px;
  color: rgba(16,33,13,.78);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  line-height: 1.25;
  cursor: pointer;
}

.publish-consent input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--deep-olive);
}

.publish-consent small {
  display: block;
  margin-top: 2px;
  color: rgba(16,33,13,.54);
  font-size: 12px;
  font-style: italic;
}

.honeymoon-primary-button,
.honeymoon-secondary-button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--gold);
  background: var(--deep-olive);
  color: var(--cream);
  text-decoration: none;
  font-family: Inter, Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.honeymoon-primary-button:hover,
.honeymoon-secondary-button:hover {
  transform: translateY(-2px);
  background: var(--olive);
  box-shadow: 0 12px 28px rgba(16,33,13,.12);
}

.honeymoon-primary-button:disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}

.secure-note {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 9px;
}

.form-error {
  min-height: 18px;
  margin: 0 0 8px;
  color: #7a332d;
  text-align: center;
  font-size: 13px;
}

.back-button {
  position: relative;
  z-index: 2;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(16,33,13,.70);
  font-family: Inter, Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#checkout {
  position: relative;
  z-index: 1;
  min-height: 300px;
}

.honeymoon-success-card {
  text-align: center;
  padding-top: 42px;
  padding-bottom: 42px;
}

.honeymoon-success-card p:not(.success-kicker) {
  width: min(500px, 100%);
  margin: 12px auto 22px;
  color: rgba(16,33,13,.68);
  font-size: 17px;
  line-height: 1.3;
}

.honeymoon-secondary-button {
  width: min(310px, 100%);
  margin: 0 auto;
}

/* ---------------------------------------------------------
   Honeymoon wall
   --------------------------------------------------------- */
.honeymoon-wall-section {
  padding: 58px 24px 82px;
  border-top: 1px solid rgba(185,149,69,.24);
  background: rgba(247,244,235,.55);
}

.wall-heading {
  width: min(710px, 100%);
  margin: 0 auto 30px;
  text-align: center;
}

.wall-heading h2 {
  margin: 0;
  color: var(--deep-olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(44px, 4.1vw, 62px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.035em;
}

.wall-heading > p:last-child {
  margin: 8px auto 0;
  color: var(--deep-olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  line-height: 1.3;
  font-style: italic;
}

.wall-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.wall-card {
  position: relative;
  min-height: 180px;
  padding: 24px 24px 22px;
  background: rgba(255,250,242,.66);
  border: 1px solid rgba(185,149,69,.28);
  box-shadow: 0 16px 38px rgba(55,42,23,.07);
}

.wall-card::before {
  content: "“";
  position: absolute;
  top: 3px;
  right: 15px;
  color: rgba(185,149,69,.19);
  font-size: 60px;
  line-height: 1;
}

.wall-destination {
  margin: 0 0 10px;
  color: var(--brass);
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
}

.wall-message {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--deep-olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  line-height: 1.30;
  font-style: italic;
}

.wall-name {
  margin: 18px 0 0;
  color: var(--olive);
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.wall-loading {
  grid-column: 1 / -1;
  min-height: 100px;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(16,33,13,.58);
  font-style: italic;
}

.wall-empty {
  text-align: center;
  color: rgba(16,33,13,.60);
  font-size: 16px;
  font-style: italic;
}

.hidden {
  display: none !important;
}

/* Large desktop and the same height range as the Celebration tuning. */
@media (min-width: 1101px) {
  .honeymoon-hero {
    padding-top: 16px;
    padding-bottom: 12px;
  }

  .honeymoon-gift-section {
    margin-top: 6px;
  }
}

@media (max-width: 1050px) {
  .honeymoon-page .nav-links {
    gap: 13px;
    font-size: 9px;
  }

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

@media (max-width: 760px) {
  .honeymoon-page .top-nav {
    position: relative;
  }

  .honeymoon-page .nav-links {
    gap: 12px;
  }

  .honeymoon-hero {
    padding: 28px 18px 18px;
  }

  .honeymoon-hero h1 {
    font-size: clamp(40px, 11vw, 54px);
  }

  .honeymoon-intro {
    font-size: 16px;
  }

  .honeymoon-gift-section {
    width: min(calc(100% - 24px), 720px);
    margin-bottom: 48px;
  }

  .honeymoon-form-card,
  .honeymoon-checkout-card,
  .honeymoon-success-card {
    padding: 24px 20px;
  }

  .honeymoon-step-heading {
    grid-template-columns: 40px 1fr;
    gap: 12px;
  }

  .step-number {
    width: 36px;
    height: 36px;
  }

  .two-column-fields {
    grid-template-columns: 1fr;
  }

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

  .honeymoon-wall-section {
    padding: 44px 12px 60px;
  }

  .wall-heading h2 {
    font-size: clamp(40px, 11vw, 54px);
  }
}


/* =========================================================
   HONEYMOON FUND — V2 PAGE FLOW + CELEBRATION TITLE MATCH
   10 SEP 2026
   - prevents old homepage viewport grid from affecting Honeymoon
   - restores normal vertical scrolling
   - removes the accidental bottom "banner" created by grid row 3
   - matches Honeymoon title to The Celebration: Cinzel + same scale
   ========================================================= */

/* The Honeymoon page is a normal scrolling document, not a one-screen homepage grid. */
body.honeymoon-page.site-shell {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.honeymoon-page.site-shell main.honeymoon-main {
  display: block !important;
  height: auto !important;
  min-height: calc(100vh - 54px) !important;
  grid-template-rows: none !important;
  overflow: visible !important;

  /* Keep the approved Honeymoon paper background. */
  background-color: #f7f0e4 !important;
  background-image:
    linear-gradient(rgba(251,244,233,.82), rgba(251,244,233,.90)),
    url("../img/backgrounds/paper_texture_olive_tree.jpg") !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  background-size: auto !important;
}

/*
  The old homepage stylesheet gives main > * grid/stacking behaviour.
  Honeymoon sections must remain in ordinary document flow.
*/
body.honeymoon-page.site-shell main.honeymoon-main > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Exact display language used by THE CELEBRATION. */
body.honeymoon-page .honeymoon-hero h1,
body.honeymoon-page .honeymoon-hero h1 em {
  font-family: "Cinzel", serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

body.honeymoon-page .honeymoon-hero h1 {
  font-size: clamp(39px, 3.7vw, 56px) !important;
  line-height: .93 !important;
  letter-spacing: 0 !important;
}

/* Keep the second line brass, but not italic. */
body.honeymoon-page .honeymoon-hero h1 em {
  color: var(--brass) !important;
}

/* The actual Celebration page uses a slightly smaller title on short desktop windows. */
@media (min-width: 1101px) and (max-height: 760px) {
  body.honeymoon-page.site-shell main.honeymoon-main {
    min-height: calc(100vh - 50px) !important;
  }

  body.honeymoon-page .honeymoon-hero h1 {
    font-size: clamp(36px, 3.35vw, 50px) !important;
  }
}

/* Tablet/mobile also stays in normal flow and scrolls naturally. */
@media (max-width: 1100px) {
  body.honeymoon-page.site-shell main.honeymoon-main {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* =========================================================
   HONEYMOON FUND — V4 COMPACT / STATIC NAV / TRUE PAPER
   10 SEP 2026
   - static navigation like The Celebration
   - one document scrollbar only
   - exact shared paper texture source/path
   - compact form + compact Honeymoon Wall cards
   - darker helper/instruction text
   - spinner-free free-entry amount field
   ========================================================= */

/* Only the root page scrolls. Navigation behaves like the other pages. */
body.honeymoon-page.site-shell {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  background-color: #f7f0e4 !important;
  background-image: url("../img/backgrounds/paper_texture_olive_tree.jpg") !important;
  background-repeat: repeat !important;
  background-position: left top !important;
  background-size: auto calc(47.1724vh - 32.077232px) !important;
  background-attachment: scroll !important;
  background-blend-mode: normal !important;
}

body.honeymoon-page .top-nav {
  position: relative !important;
  top: auto !important;
  z-index: 20 !important;
}

body.honeymoon-page.site-shell main.honeymoon-main {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: calc(100vh - 68px) !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
}

/* Remove older decorative/veil layers that were hiding the shared paper. */
body.honeymoon-page main.honeymoon-main::before,
body.honeymoon-page main.honeymoon-main::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Keep exactly the same paper scaling behaviour as Our Story / Celebration. */
@media screen and (min-width: 681px) and (max-width: 980px) {
  body.honeymoon-page.site-shell {
    background-size: 30.46875% auto !important;
  }
}

@media screen and (max-width: 680px) {
  body.honeymoon-page.site-shell {
    background-size: 38.671875% auto !important;
  }
}

/* Compact the opening without changing its hierarchy. */
@media (min-width: 1101px) {
  body.honeymoon-page .honeymoon-hero {
    padding: 14px 24px 8px !important;
  }

  body.honeymoon-page .honeymoon-divider {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  body.honeymoon-page .honeymoon-intro {
    max-width: 690px !important;
    font-size: 16px !important;
    line-height: 1.26 !important;
  }
}

/* More compact contribution card. */
body.honeymoon-page .honeymoon-gift-section {
  width: min(680px, calc(100% - 36px)) !important;
  margin: 8px auto 46px !important;
}

body.honeymoon-page .honeymoon-form-card,
body.honeymoon-page .honeymoon-checkout-card,
body.honeymoon-page .honeymoon-success-card {
  padding: 22px 28px 24px !important;
  box-shadow: 0 18px 44px rgba(44,38,24,.09) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

body.honeymoon-page .honeymoon-step-heading {
  grid-template-columns: 40px 1fr !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

body.honeymoon-page .step-number {
  width: 36px !important;
  height: 36px !important;
  font-size: 8px !important;
}

body.honeymoon-page .step-kicker,
body.honeymoon-page .success-kicker {
  margin-bottom: 4px !important;
  font-size: 8px !important;
}

body.honeymoon-page .honeymoon-step-heading h2,
body.honeymoon-page .honeymoon-success-card h2 {
  font-size: clamp(24px, 2vw, 31px) !important;
  line-height: 1 !important;
}

body.honeymoon-page .honeymoon-field {
  margin-bottom: 13px !important;
}

body.honeymoon-page .honeymoon-field label,
body.honeymoon-page .honeymoon-field legend {
  margin-bottom: 5px !important;
  font-size: 8px !important;
  letter-spacing: .17em !important;
}

body.honeymoon-page .honeymoon-field input[type="text"],
body.honeymoon-page .honeymoon-field input[type="email"],
body.honeymoon-page .honeymoon-field textarea,
body.honeymoon-page .gift-amount-wrap input {
  font-size: 16px !important;
}

body.honeymoon-page .honeymoon-field input[type="text"],
body.honeymoon-page .honeymoon-field input[type="email"],
body.honeymoon-page .gift-amount-wrap {
  height: 42px !important;
}

body.honeymoon-page .gift-amount-wrap {
  display: block !important;
  border: 1px solid rgba(185,149,69,.38) !important;
  background: rgba(255,255,255,.44) !important;
}

body.honeymoon-page .gift-amount-wrap > span {
  display: none !important;
}

body.honeymoon-page .gift-amount-wrap input {
  width: 100% !important;
  height: 40px !important;
  padding: 0 13px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--deep-olive) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
}

body.honeymoon-page .honeymoon-field textarea {
  min-height: 76px !important;
  height: 76px !important;
  padding: 10px 13px !important;
}

/* Instructions need to be clearly readable, not ghosted into the paper. */
body.honeymoon-page .field-hint,
body.honeymoon-page .secure-note,
body.honeymoon-page .privacy-note {
  color: rgba(16,33,13,.76) !important;
  font-size: 12.5px !important;
  line-height: 1.28 !important;
}

body.honeymoon-page .optional {
  color: rgba(16,33,13,.62) !important;
}

body.honeymoon-page .character-count {
  color: rgba(16,33,13,.64) !important;
}

body.honeymoon-page .publish-consent {
  margin: 2px 0 14px !important;
  font-size: 13.5px !important;
}

body.honeymoon-page .publish-consent small {
  color: rgba(16,33,13,.70) !important;
  font-size: 11.5px !important;
}

body.honeymoon-page .honeymoon-primary-button,
body.honeymoon-page .honeymoon-secondary-button {
  min-height: 43px !important;
  font-size: 8.5px !important;
}

/* Compact, calm payment/security explanation. */
body.honeymoon-page .payment-info {
  position: relative;
  z-index: 1;
  margin-top: 11px;
  padding: 10px 12px;
  border-top: 1px solid rgba(185,149,69,.25);
  color: rgba(16,33,13,.78);
  font-family: "Inter", Arial, sans-serif;
  font-size: 10.5px;
  line-height: 1.42;
}

body.honeymoon-page .payment-info p {
  margin: 0;
}

body.honeymoon-page .payment-info p + p {
  margin-top: 5px;
}

body.honeymoon-page .payment-info strong {
  color: var(--deep-olive);
  font-weight: 600;
}

/* Smaller wall and note cards. */
body.honeymoon-page .honeymoon-wall-section {
  padding: 42px 24px 60px !important;
  background: rgba(247,244,235,.34) !important;
}

body.honeymoon-page .wall-heading {
  margin-bottom: 22px !important;
}

body.honeymoon-page .wall-heading h2 {
  font-family: "Cinzel", serif !important;
  font-size: clamp(32px, 3vw, 44px) !important;
  letter-spacing: 0 !important;
}

body.honeymoon-page .wall-heading > p:last-child {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

body.honeymoon-page .wall-grid {
  width: min(1050px, 100%) !important;
  gap: 14px !important;
}

body.honeymoon-page .wall-card {
  min-height: 132px !important;
  padding: 17px 18px 16px !important;
}

body.honeymoon-page .wall-card::before {
  font-size: 46px !important;
  right: 12px !important;
}

body.honeymoon-page .wall-destination {
  margin-bottom: 7px !important;
  font-size: 7px !important;
}

body.honeymoon-page .wall-message {
  font-size: 14.5px !important;
  line-height: 1.24 !important;
}

body.honeymoon-page .wall-name {
  margin-top: 12px !important;
  font-size: 7px !important;
}

@media (max-width: 760px) {
  body.honeymoon-page .honeymoon-gift-section {
    width: min(calc(100% - 22px), 680px) !important;
  }

  body.honeymoon-page .honeymoon-form-card,
  body.honeymoon-page .honeymoon-checkout-card,
  body.honeymoon-page .honeymoon-success-card {
    padding: 20px 16px 22px !important;
  }

  body.honeymoon-page .honeymoon-field textarea {
    min-height: 90px !important;
    height: 90px !important;
  }
}


/* =========================================================
   HONEYMOON GIFT FIELD — GBP PREFIX + NUMERIC INPUT
   Restores the original pound symbol and allows numbers only.
   Native number steppers are intentionally retained.
   ========================================================= */
body.honeymoon-page .gift-amount-wrap {
  display: grid !important;
  grid-template-columns: 38px 1fr !important;
  align-items: center !important;
}

body.honeymoon-page .gift-amount-wrap > span {
  display: block !important;
  text-align: center !important;
  color: var(--brass) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

body.honeymoon-page .gift-amount-wrap input[type="number"] {
  width: 100% !important;
  height: 40px !important;
  padding: 0 13px 0 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--deep-olive) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 16px !important;
}


/* =========================================================
   PRIVATE WEDDING ENTRANCE — LANGUAGE + PASSWORD
   Invitation-paper layout with the official G&N artwork.
   ========================================================= */
body.access-language-page {
  min-height: 100vh !important;
  min-height: 100svh !important;
  margin: 0 !important;
  overflow: hidden !important;
  background-color: #f7f0e4 !important;
  background-image: url("../img/backgrounds/paper_texture_olive_tree.jpg") !important;
  background-repeat: repeat !important;
  background-position: left top !important;
  background-size: auto calc(47.1724vh - 32.077232px) !important;
  background-attachment: scroll !important;
  background-blend-mode: normal !important;
  color: var(--deep-olive) !important;
}

body.access-language-page .language-shell {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  margin: 0 !important;
  padding: clamp(22px, 3.5vh, 38px) 20px !important;
  overflow: hidden !important;
  background: transparent !important;
}

body.access-language-page .language-shell::before,
body.access-language-page .language-shell::after {
  content: none !important;
  display: none !important;
}

body.access-language-page .language-venue-drawing {
  display: none !important;
}

body.access-language-page .language-panel {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(620px, calc(100vw - 40px)) !important;
  max-width: 620px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(28px, 4.2vh, 42px) clamp(28px, 4vw, 52px) 34px !important;
  border: 1px solid rgba(185,149,69,.32) !important;
  border-radius: 2px !important;
  background: linear-gradient(145deg, rgba(255,250,242,.88), rgba(251,244,233,.73)) !important;
  box-shadow: 0 28px 70px rgba(55,42,23,.09) !important;
  text-align: center !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.access-language-page .language-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(185,149,69,.12);
  pointer-events: none;
}

body.access-language-page .language-monogram {
  display: block;
  width: clamp(76px, 6vw, 92px) !important;
  height: auto !important;
  margin: 0 auto clamp(14px, 2vh, 21px) !important;
  object-fit: contain;
}

body.access-language-page .language-title {
  margin: 0 !important;
  color: var(--deep-olive) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(43px, 4.1vw, 58px) !important;
  font-weight: 400 !important;
  line-height: .96 !important;
  letter-spacing: -.035em !important;
}

body.access-language-page .language-subtitle {
  margin: 5px 0 0 !important;
  color: var(--brass) !important;
  font-family: "Bodoni Moda", "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(23px, 2.2vw, 30px) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}

body.access-language-page .tiny-divider {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 11px !important;
  width: min(270px, 76%) !important;
  margin: clamp(12px, 2vh, 18px) auto 14px !important;
}

body.access-language-page .tiny-divider > span {
  width: 100% !important;
  height: 1px !important;
  background: rgba(185,149,69,.40) !important;
}

body.access-language-page .tiny-divider img {
  width: 25px !important;
  height: 12px !important;
  object-fit: contain !important;
}

body.access-language-page .guest-access-form {
  position: relative;
  z-index: 1;
  width: min(390px, 100%);
  margin: 0 auto;
}

body.access-language-page .guest-password-label {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 7px;
  color: rgba(16,33,13,.78);
  font-family: Inter, Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .20em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.access-language-page .guest-password-input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 15px;
  border: 1px solid rgba(169,133,58,.60);
  border-radius: 2px;
  outline: 0;
  background: rgba(255,255,255,.46);
  color: var(--deep-olive);
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .14em;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.access-language-page .guest-password-input:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.76);
  box-shadow: 0 0 0 3px rgba(185,149,69,.10);
}

body.access-language-page .guest-password-hint {
  margin: 6px 0 0;
  color: rgba(16,33,13,.56);
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .04em;
  line-height: 1.4;
}

body.access-language-page .guest-access-message {
  min-height: 17px;
  margin: 5px 0 2px;
  color: #7a332d;
  font-family: Inter, Arial, sans-serif;
  font-size: 10.5px;
  line-height: 1.35;
  opacity: 0;
  transition: opacity .16s ease;
}

body.access-language-page .guest-access-message.is-visible {
  opacity: 1;
}

body.access-language-page .language-choice {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.access-language-page .language-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 148px)) !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
}

body.access-language-page .language-button {
  display: grid !important;
  place-items: center !important;
  width: 148px !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(169,133,58,.74) !important;
  border-radius: 3px !important;
  outline: 0 !important;
  background: rgba(255,248,237,.56) !important;
  color: var(--deep-olive) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .055em !important;
  line-height: 1 !important;
  text-transform: none !important;
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease !important;
}

body.access-language-page .language-button:hover,
body.access-language-page .language-button:focus-visible {
  transform: translateY(-2px) !important;
  border-color: var(--deep-olive) !important;
  background: var(--deep-olive) !important;
  color: var(--cream) !important;
  box-shadow: 0 11px 24px rgba(16,33,13,.12) !important;
}

body.access-language-page .language-button.is-preferred {
  box-shadow: inset 0 0 0 1px rgba(185,149,69,.22) !important;
}

body.access-language-page .language-button:disabled {
  cursor: wait !important;
  opacity: .55 !important;
  transform: none !important;
}

body.access-language-page .language-meta {
  position: relative;
  z-index: 1;
  margin: 19px 0 0 !important;
}

body.access-language-page .language-meta .malta {
  margin: 0 0 3px !important;
  color: var(--deep-olive) !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
  line-height: 1.2 !important;
}

body.access-language-page .language-meta .date {
  margin: 0 !important;
  color: var(--brass) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 8px !important;
  font-weight: 500 !important;
  letter-spacing: .20em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

body.access-language-page .language-meta .date::before,
body.access-language-page .language-meta .date::after {
  content: "—";
  display: inline-block;
  margin: 0 9px;
  color: rgba(185,149,69,.62);
}

body.access-language-page .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 560px) {
  body.access-language-page {
    overflow-y: auto !important;
    background-size: 38.671875% auto !important;
  }

  body.access-language-page .language-shell {
    min-height: 100svh !important;
    padding: 18px 14px !important;
  }

  body.access-language-page .language-panel {
    width: min(100%, 470px) !important;
    padding: 26px 20px 28px !important;
  }

  body.access-language-page .language-title {
    font-size: clamp(38px, 12vw, 46px) !important;
  }

  body.access-language-page .language-subtitle {
    font-size: 22px !important;
  }

  body.access-language-page .language-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  body.access-language-page .language-button {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 7px !important;
    font-size: 11.5px !important;
  }
}

@media (min-width: 561px) and (max-width: 980px) {
  body.access-language-page {
    background-size: 30.46875% auto !important;
  }
}

@media (min-width: 700px) and (max-height: 760px) {
  body.access-language-page .language-shell {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  body.access-language-page .language-panel {
    padding-top: 24px !important;
    padding-bottom: 25px !important;
  }

  body.access-language-page .language-monogram {
    width: 68px !important;
    margin-bottom: 10px !important;
  }

  body.access-language-page .language-title {
    font-size: 43px !important;
  }

  body.access-language-page .tiny-divider {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  body.access-language-page .language-meta {
    margin-top: 13px !important;
  }
}

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


/* =========================================================
   FINAL GLOBAL TOUCH-UPS — RESPONSIVE NAV + SHARED DETAILS
   10 SEP 2026
   ========================================================= */

.nav-toggle {
  display: none;
}

/* Contact block: one pixel larger on full desktop, as requested. */
@media (min-width: 1200px) {
  .top-nav .nav-contact-label {
    font-size: 7.8px !important;
  }

  .top-nav .nav-contact a {
    font-size: 8.8px !important;
  }
}

@media (min-width: 1200px) and (max-height: 760px) {
  .top-nav .nav-contact-label {
    font-size: 7.1px !important;
  }

  .top-nav .nav-contact a {
    font-size: 8px !important;
  }
}

/* Gently strengthen the handwritten sign-off without making it heavy. */
body.home-page .ido-script:not(.ido-script-pt) {
  filter:
    drop-shadow(.3px 0 0 #b99545)
    drop-shadow(-.3px 0 0 #b99545)
    drop-shadow(0 .3px 0 #b99545)
    drop-shadow(0 -.3px 0 #b99545) !important;
}

/* Portuguese sign-off: same footprint and visual weight as the English art. */
body.home-page .ido-script.ido-script-pt {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  min-width: 0 !important;
  height: 20px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  background: none !important;
  color: #b99545 !important;
  font-family: "Bodoni Moda", "Cormorant Garamond", Georgia, serif !important;
  font-size: 17.5px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: .18px 0 0 currentColor, 0 .18px 0 currentColor !important;
}

@media (min-width: 1200px) and (max-height: 760px) {
  body.home-page .ido-script.ido-script-pt {
    width: 50px !important;
    height: 18px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 1199px) {
  body.home-page .ido-script.ido-script-pt {
    width: 92px !important;
    height: 34px !important;
    font-size: 25px !important;
  }
}

/* RSVP: the exact shared paper plus Waterfall Gardens as a watermark. */
body.rsvp-host-page {
  background-color: #f7f0e4 !important;
  background-image: url("../img/backgrounds/paper_texture_olive_tree.jpg") !important;
  background-repeat: repeat !important;
  background-position: left top !important;
  background-size: auto calc(47.1724vh - 32.077232px) !important;
  background-attachment: scroll !important;
}

body.rsvp-host-page main.rsvp-host-main {
  position: relative !important;
  isolation: isolate !important;
  padding: clamp(8px, 1.6vh, 16px) clamp(10px, 2.8vw, 42px) !important;
  background: transparent !important;
}

body.rsvp-host-page main.rsvp-host-main::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("../img/background_waterfall_watermark_events.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  opacity: .18;
  pointer-events: none;
}

body.rsvp-host-page .rsvp-frame {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%) !important;
  margin: 0 auto !important;
  border: 1px solid rgba(185,149,69,.22) !important;
  border-radius: 2px !important;
  background: rgba(251,244,233,.78) !important;
  box-shadow: 0 20px 52px rgba(42,48,35,.08) !important;
}

/* One responsive divider beneath the story opening—no duplicate line. */
@media (max-width: 1199px) {
  html.gn-story-page .gn-story-running-head {
    border-bottom: 0 !important;
  }

  html.gn-story-page .gn-story-opening {
    border-bottom: 1px solid var(--brass) !important;
  }
}

/* Mobile/tablet navigation: compact static bar + accessible drawer. */
@media (max-width: 1199px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .top-nav.nav-enhanced {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 58px auto auto !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    gap: 0 !important;
    overflow: visible !important;
    background: rgba(255,250,242,.98) !important;
    border-bottom: 1px solid rgba(185,149,69,.24) !important;
    box-sizing: border-box !important;
  }

  .top-nav.nav-enhanced > a:first-child {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: 58px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .top-nav.nav-enhanced > a:first-child::after,
  .top-nav.nav-enhanced .nav-contact::before {
    display: none !important;
    content: none !important;
  }

  .top-nav.nav-enhanced .nav-logo,
  .top-nav.nav-enhanced > a:first-child .nav-logo {
    display: block !important;
    width: 94px !important;
    max-width: 94px !important;
    height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .top-nav.nav-enhanced .nav-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-width: 82px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid rgba(185,149,69,.54) !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: var(--deep-olive) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
  }

  .top-nav.nav-enhanced .nav-toggle:hover,
  .top-nav.nav-enhanced .nav-toggle:focus-visible {
    border-color: var(--brass) !important;
    background: rgba(185,149,69,.08) !important;
    outline: 2px solid rgba(185,149,69,.22) !important;
    outline-offset: 2px !important;
  }

  .top-nav.nav-enhanced .nav-toggle-icon {
    display: grid !important;
    gap: 3px !important;
    width: 15px !important;
  }

  .top-nav.nav-enhanced .nav-toggle-icon span {
    display: block !important;
    width: 15px !important;
    height: 1px !important;
    background: currentColor !important;
    transform-origin: center !important;
    transition: transform .18s ease, opacity .18s ease !important;
  }

  .top-nav.nav-enhanced.is-menu-open .nav-toggle-icon span:nth-child(1) {
    transform: translateY(4px) rotate(45deg) !important;
  }

  .top-nav.nav-enhanced.is-menu-open .nav-toggle-icon span:nth-child(2) {
    opacity: 0 !important;
  }

  .top-nav.nav-enhanced.is-menu-open .nav-toggle-icon span:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg) !important;
  }

  .top-nav.nav-enhanced .nav-links {
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    gap: 0 !important;
    border-top: 1px solid rgba(185,149,69,.22) !important;
    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .top-nav.nav-enhanced.is-menu-open .nav-links {
    display: flex !important;
  }

  .top-nav.nav-enhanced .nav-links a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    color: var(--deep-olive) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .top-nav.nav-enhanced .nav-links a:hover,
  .top-nav.nav-enhanced .nav-links a:focus-visible {
    background: rgba(185,149,69,.07) !important;
    color: #24351c !important;
    outline: 0 !important;
  }

  .top-nav.nav-enhanced .nav-links a[aria-current="page"]::after {
    left: 50% !important;
    right: auto !important;
    bottom: 5px !important;
    width: 38px !important;
    transform: translateX(-50%) !important;
  }

  .top-nav.nav-enhanced .flag-link {
    gap: 10px !important;
  }

  .top-nav.nav-enhanced .flag-link::after {
    content: attr(data-language-label) !important;
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    transform: none !important;
  }

  .top-nav.nav-enhanced .flag-link img {
    width: 22px !important;
    height: 15px !important;
    object-fit: cover !important;
    transform: none !important;
  }

  .top-nav.nav-enhanced .nav-contact {
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 10px 16px !important;
    border-top: 1px solid rgba(185,149,69,.22) !important;
    box-sizing: border-box !important;
  }

  .top-nav.nav-enhanced.is-menu-open .nav-contact {
    display: flex !important;
  }

  .top-nav.nav-enhanced .nav-contact-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .top-nav.nav-enhanced .nav-contact-label {
    color: #9f8140 !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  .top-nav.nav-enhanced .nav-contact a {
    color: #334129 !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: .035em !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  body.rsvp-host-page {
    height: 100svh !important;
    min-height: 100svh !important;
  }

  body.rsvp-host-page main.rsvp-host-main {
    padding: 8px !important;
  }

  body.rsvp-host-page main.rsvp-host-main::before {
    background-position: center center !important;
    background-size: auto 100% !important;
  }

  body.rsvp-host-page .rsvp-frame {
    width: 100% !important;
  }

  body.rsvp-host-page {
    background-size: 30.46875% auto !important;
  }
}

@media (max-width: 680px) {
  body.rsvp-host-page {
    background-size: 38.671875% auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-nav.nav-enhanced .nav-toggle-icon span {
    transition: none !important;
  }
}

/* =========================================================
   PINNED NAVIGATION — ALL CONTENT PAGES
   Uses a main-content offset instead of body padding so page-specific
   layouts keep their approved geometry.
   ========================================================= */
body.has-pinned-nav {
  --gn-pinned-nav-height: 48px;
}

body.has-pinned-nav > .top-nav.nav-enhanced {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
}

body.has-pinned-nav > main {
  margin-top: var(--gn-pinned-nav-height) !important;
}

@media (min-width: 1200px) and (max-height: 760px) {
  body.has-pinned-nav {
    --gn-pinned-nav-height: 44px;
  }
}

@media (max-width: 1199px) {
  body.has-pinned-nav {
    --gn-pinned-nav-height: 58px;
  }
}

/* RSVP belongs edge-to-edge beneath the navigation. Its form remains
   centred inside Apps Script, while the paper and Waterfall fill the page. */
body.rsvp-host-page main.rsvp-host-main {
  padding: 0 !important;
}

body.rsvp-host-page main.rsvp-host-main::before {
  position: fixed !important;
  inset: var(--gn-pinned-nav-height) 0 0 !important;
  background-position: center center !important;
  background-size: cover !important;
  opacity: .18 !important;
}

body.rsvp-host-page .rsvp-frame {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   HONEYMOON WALL — VISIBLE LOADING STATE
   ========================================================= */
body.honeymoon-page .wall-loading {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  min-height: 132px !important;
  text-align: center !important;
}

body.honeymoon-page .wall-loading::before {
  content: none !important;
  display: none !important;
}

body.honeymoon-page .wall-loading-spinner {
  display: block;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(169,133,58,.20);
  border-top-color: var(--brass);
  border-right-color: rgba(16,33,13,.72);
  border-radius: 50%;
  animation: honeymoon-wall-spin .85s linear infinite;
}

body.honeymoon-page .wall-loading-copy p {
  margin: 0 !important;
}

body.honeymoon-page .wall-loading-title {
  color: var(--deep-olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.2;
}

body.honeymoon-page .wall-loading-detail {
  margin-top: 3px !important;
  color: rgba(16,33,13,.56);
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

@keyframes honeymoon-wall-spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   PRIVATE WEDDING ENTRANCE — PASSWORD GUIDANCE
   ========================================================= */
body.access-language-page .guest-access-instruction {
  position: relative;
  z-index: 1;
  width: min(390px, 100%);
  margin: 0 auto 12px;
  color: rgba(16,33,13,.74);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 14.5px;
  line-height: 1.25;
}

body.access-language-page .guest-access-instruction span {
  display: block;
  margin-top: 2px;
  color: var(--brass);
  font-style: italic;
}

body.honeymoon-page .wall-empty {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

body.honeymoon-page .wall-empty:not(.hidden) {
  display: flex;
}

body.honeymoon-page .wall-retry-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0 0 2px;
  border: 1px solid rgba(169,133,58,.74);
  border-radius: 50%;
  outline: 0;
  background: rgba(255,248,237,.58);
  color: var(--deep-olive);
  box-shadow: 0 8px 20px rgba(55,42,23,.07);
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

body.honeymoon-page .wall-retry-button:hover,
body.honeymoon-page .wall-retry-button:focus-visible {
  transform: translateY(-1px) rotate(-28deg);
  background: var(--deep-olive);
  color: var(--cream);
  box-shadow: 0 11px 24px rgba(16,33,13,.13);
}

@media (max-width: 560px) {
  body.access-language-page .guest-access-instruction {
    margin-bottom: 10px;
    font-size: 13.5px;
  }
}

@media (min-width: 700px) and (max-height: 760px) {
  body.access-language-page .guest-access-instruction {
    margin-bottom: 8px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.honeymoon-page .wall-loading-spinner {
    animation: none;
  }

  body.honeymoon-page .wall-retry-button {
    transition: none;
  }
}

/* =========================================================
   MOOD BOARD — COLOUR NOTE CARD ONLY
   ========================================================= */

body.mood-board-page .mood-colour-note {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px 22px;
  width: min(790px, 100%);
  margin: clamp(28px, 4vw, 42px) auto 0;
  padding: 19px clamp(20px, 3.5vw, 34px);
  text-align: left;
  background: rgba(255, 250, 242, 0.78);
  border: 1px solid rgba(169, 133, 58, 0.38);
  box-shadow: 0 14px 42px rgba(55, 42, 23, 0.06);
  backdrop-filter: blur(3px);
}

body.mood-board-page .mood-colour-note::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 250, 242, 0.9);
  background: var(--deep-olive);
}

body.mood-board-page .mood-colour-note strong {
  grid-column: 2;
  color: var(--deep-olive);
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.20em;
  line-height: 1.35;
  text-transform: uppercase;
}

body.mood-board-page .mood-colour-note span {
  grid-column: 2;
  margin-top: -9px;
  color: rgba(16, 33, 13, 0.76);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  line-height: 1.42;
}

@media (max-width: 560px) {
  body.mood-board-page .mood-colour-note {
    gap: 13px 14px;
    padding: 17px 16px;
  }

  body.mood-board-page .mood-colour-note span {
    font-size: 15px;
  }
}

/* =========================================================
   MOOD BOARD — SCROLL + MOSAIC CONTENT ONLY
   Keeps the approved page background and hero styling intact.
   ========================================================= */

body.mood-board-page.site-shell {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.mood-board-page.site-shell main.mood-main,
body.mood-board-page.site-shell .mood-main {
  display: block !important;
  height: auto !important;
  min-height: calc(100vh - var(--gn-pinned-nav-height, 48px)) !important;
  max-height: none !important;
  overflow: visible !important;
}

body.mood-board-page .mood-gallery-section {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: clamp(38px, 5vw, 66px);
}

body.mood-board-page .mood-gallery {
  width: min(1360px, calc(100% - 34px));
  margin: 0 auto;
  column-count: 5;
  column-gap: clamp(11px, 1.35vw, 19px);
}

body.mood-board-page .mood-tile {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
  margin: 0 0 clamp(11px, 1.35vw, 19px);
  overflow: hidden;
  break-inside: avoid;
  vertical-align: top;
  background: rgba(255, 250, 242, 0.92);
  border: 1px solid rgba(169, 133, 58, 0.22);
  box-shadow:
    0 18px 42px rgba(55, 42, 23, 0.10),
    0 4px 10px rgba(55, 42, 23, 0.05);
  transform: translateZ(0);
}

body.mood-board-page .mood-tile::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 250, 242, 0.38);
  pointer-events: none;
}

body.mood-board-page .mood-tile img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 300ms ease;
}

body.mood-board-page .mood-tile:hover img {
  transform: scale(1.018);
  filter: saturate(1.025) contrast(1.015);
}

body.mood-board-page .mood-gallery.is-masonry-ready {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 8px;
  gap: clamp(11px, 1.35vw, 19px);
  columns: auto;
  align-items: start;
}

body.mood-board-page .mood-gallery.is-masonry-ready .mood-tile {
  display: block;
  width: auto;
  margin: 0;
  break-inside: auto;
  align-self: start;
}

body.mood-board-page .mood-gallery.is-masonry-ready .mood-tile--feature,
body.mood-board-page .mood-gallery.is-masonry-ready .mood-tile--wide {
  grid-column: span 2;
}

body.mood-board-page .mood-guide {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 40px));
  margin: clamp(84px, 9vw, 138px) auto 0;
  padding: 0 0 clamp(72px, 8vw, 120px);
  text-align: center;
}

body.mood-board-page .mood-guide > .events-eyebrow {
  margin: 0 0 11px !important;
  color: var(--brass) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.29em !important;
}

body.mood-board-page .mood-guide > h2 {
  max-width: 780px;
  margin: 0 auto clamp(38px, 5vw, 56px);
  color: var(--deep-olive);
  font-family: "Cinzel", serif;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

body.mood-board-page .mood-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(169, 133, 58, 0.34);
  border-bottom: 1px solid rgba(169, 133, 58, 0.34);
}

body.mood-board-page .mood-principles article {
  min-width: 0;
  padding: 34px clamp(18px, 2.5vw, 30px) 38px;
}

body.mood-board-page .mood-principles article + article {
  border-left: 1px solid rgba(169, 133, 58, 0.28);
}

body.mood-board-page .mood-principles article > span {
  color: var(--brass);
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

body.mood-board-page .mood-principles h3 {
  margin: 14px 0 12px;
  color: var(--deep-olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(24px, 2.3vw, 31px);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}

body.mood-board-page .mood-principles p {
  margin: 0;
  color: rgba(16, 33, 13, 0.74);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15.5px;
  line-height: 1.48;
}

body.mood-board-page .mood-signoff {
  width: min(720px, 100%);
  margin: clamp(40px, 5vw, 58px) auto 0;
  padding: 0;
  color: var(--deep-olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(20px, 2.3vw, 27px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
}

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

@media (max-width: 1100px) {
  body.mood-board-page .mood-gallery {
    column-count: 4;
  }

  body.mood-board-page .mood-gallery.is-masonry-ready {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  body.mood-board-page .mood-gallery {
    column-count: 3;
  }

  body.mood-board-page .mood-gallery.is-masonry-ready {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.mood-board-page .mood-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mood-board-page .mood-principles article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(169, 133, 58, 0.28);
  }

  body.mood-board-page .mood-principles article:nth-child(4) {
    border-top: 1px solid rgba(169, 133, 58, 0.28);
  }
}

@media (max-width: 560px) {
  body.mood-board-page .mood-gallery-section {
    margin-top: 34px;
  }

  body.mood-board-page .mood-gallery {
    width: calc(100% - 18px);
    column-count: 2;
    column-gap: 9px;
  }

  body.mood-board-page .mood-gallery.is-masonry-ready {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 6px;
    gap: 9px;
  }

  body.mood-board-page .mood-tile {
    margin-bottom: 9px;
    box-shadow: 0 10px 24px rgba(55, 42, 23, 0.10);
  }

  body.mood-board-page .mood-tile::after {
    inset: 5px;
  }

  body.mood-board-page .mood-guide {
    width: calc(100% - 28px);
    margin-top: 76px;
  }

  body.mood-board-page .mood-principles {
    grid-template-columns: 1fr;
  }

  body.mood-board-page .mood-principles article,
  body.mood-board-page .mood-principles article + article,
  body.mood-board-page .mood-principles article:nth-child(3),
  body.mood-board-page .mood-principles article:nth-child(4) {
    border-left: 0;
    border-top: 1px solid rgba(169, 133, 58, 0.28);
  }

  body.mood-board-page .mood-principles article:first-child {
    border-top: 0;
  }

  body.mood-board-page .mood-principles article {
    padding: 27px 20px 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mood-board-page .mood-tile img {
    transition: none;
  }

  body.mood-board-page .mood-tile:hover img {
    transform: none;
  }
}


/* =========================================================
   OUR STORY / NOSSA HISTÓRIA — ALIGNED STORY PHOTOGRAPHS
   12 OCT 2026
   Scoped to the story bodies. Existing opening, backgrounds,
   navigation, invitation viewer and shared ending are retained.
   ========================================================= */

html.gn-story-page .gn-story-photo-layout {
  display: block;
  min-width: 0;
}

html.gn-story-page .gn-story-photo-layout .gn-story-layout-row {
  display: grid;
  grid-template-columns: minmax(0, .36fr) minmax(0, .64fr);
  grid-template-areas: "photo text";
  align-items: start;
  gap: clamp(28px, 4vw, 48px);
  margin-block: clamp(30px, 4vw, 44px);
}

html.gn-story-page .gn-story-photo-layout .gn-story-layout-row-reverse {
  grid-template-columns: minmax(0, .64fr) minmax(0, .36fr);
  grid-template-areas: "text photo";
}

html.gn-story-page .gn-story-photo-layout .gn-story-layout-row > .gn-story-layout-photo,
html.gn-story-page .gn-story-photo-layout .gn-story-layout-row > .gn-story-layout-aside {
  grid-area: photo;
  min-width: 0;
}

html.gn-story-page .gn-story-photo-layout .gn-story-layout-row > .gn-story-text-block {
  grid-area: text;
  min-width: 0;
}

/* Each text-and-photo block has a stable column; no floating images. */
html.gn-story-page .gn-story-photo-layout .gn-story-layout-photo {
  display: block;
  float: none;
  clear: none;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  break-inside: avoid;
}

html.gn-story-page .gn-story-photo-layout .gn-story-layout-photo .gn-story-photo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 45%;
}

/* The ring photographs keep their square composition. */
html.gn-story-page .gn-story-photo-layout .gn-story-photo-square .gn-story-photo {
  aspect-ratio: 1;
  object-position: center;
}

html.gn-story-page .gn-story-photo-layout .gn-story-photo-home .gn-story-photo {
  object-position: 55% 50%;
}

html.gn-story-page .gn-story-photo-layout .gn-story-photo-birthday .gn-story-photo {
  object-position: 50% 35%;
}

html.gn-story-page .gn-story-photo-layout .gn-story-photo-lost .gn-story-photo {
  object-position: center top;
}

html.gn-story-page .gn-story-photo-layout .gn-story-photo-together .gn-story-photo {
  object-position: center bottom;
}

html.gn-story-page .gn-story-photo-layout .gn-story-layout-photo figcaption {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
  line-height: 1.6;
  text-wrap: pretty;
}

html.gn-story-page .gn-story-photo-layout .gn-story-layout-photo figcaption span:last-child {
  white-space: nowrap;
}

html.gn-story-page .gn-story-photo-layout .gn-story-layout-aside .gn-story-aside-quote {
  margin: 24px 0 0;
  padding: 0;
}

html.gn-story-page .gn-story-photo-layout .gn-story-text-block:not(.gn-story-opening-copy) p:first-child {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin-bottom: .7em;
}

html.gn-story-page .gn-story-photo-layout .gn-story-text-block:not(.gn-story-opening-copy) p:first-child::first-letter {
  font-family: inherit;
  font-size: inherit;
}

html.gn-story-page .gn-story-photo-layout .gn-story-intro-copy {
  max-width: 760px;
  margin: 0 auto 38px;
}

html.gn-story-page .gn-story-photo-layout .gn-story-full-text {
  margin-block: 30px;
}

/* Equal-width frames share one aspect ratio and aligned caption baselines. */
html.gn-story-page .gn-story-photo-layout .gn-story-photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(20px, 3vw, 28px);
  width: min(100%, 680px);
  margin: 38px auto;
}

html.gn-story-page .gn-story-photo-layout .gn-story-photo-pair figcaption {
  min-height: 2.8em;
}

html.gn-story-page .gn-story-photo-layout .gn-story-closing-photos {
  margin-bottom: 0;
}

@media screen and (max-width: 900px) {
  html.gn-story-page .gn-story-photo-layout .gn-story-layout-row,
  html.gn-story-page .gn-story-photo-layout .gn-story-layout-row-reverse {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "photo" "text";
    gap: 24px;
    margin-block: 30px;
  }

  html.gn-story-page .gn-story-photo-layout .gn-story-layout-row > .gn-story-layout-photo,
  html.gn-story-page .gn-story-photo-layout .gn-story-layout-row > .gn-story-layout-aside {
    width: min(100%, 340px);
    justify-self: center;
  }

  html.gn-story-page .gn-story-photo-layout .gn-story-intro-copy {
    max-width: none;
    margin-bottom: 30px;
  }

  html.gn-story-page .gn-story-photo-layout .gn-story-photo-pair {
    width: 100%;
    margin-block: 30px;
    gap: 20px;
  }

  html.gn-story-page .gn-story-photo-layout .gn-story-closing-photos {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 580px) {
  html.gn-story-page .gn-story-photo-layout .gn-story-photo-pair {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 26px;
  }

  html.gn-story-page .gn-story-photo-layout .gn-story-photo-pair .gn-story-layout-photo {
    width: min(100%, 340px);
  }

  html.gn-story-page .gn-story-photo-layout .gn-story-photo-pair figcaption {
    min-height: 0;
  }
}

/* =========================================================
   INVITATION VIEWER - isolated from existing page styles
   ========================================================= */

html.gn-invitation-open,
html.gn-invitation-open body.home-page {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.gn-invitation-dialog {
  width: min(1120px, calc(100vw - 32px));
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream, #fff8ed);
  box-shadow: none;
  overflow: hidden;
  font-family: Inter, Arial, sans-serif;
}

.gn-invitation-dialog:not([open]) {
  display: none;
}

.gn-invitation-dialog[open] {
  display: flex;
  flex-direction: column;
}

.gn-invitation-dialog::backdrop {
  background: rgba(12, 24, 12, 0.88);
}

.gn-invitation-dialog .gn-invitation-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px 12px;
}

.gn-invitation-dialog .gn-invitation-title {
  margin: 0;
  color: inherit;
  font: 400 clamp(18px, 2.6vw, 24px)/1.2 "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.02em;
}

.gn-invitation-dialog .gn-invitation-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gn-invitation-dialog .gn-invitation-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 248, 237, 0.4);
  border-radius: 3px;
  background: rgba(16, 33, 13, 0.65);
  color: var(--cream, #fff8ed);
  font: 400 12px/1.3 Inter, Arial, sans-serif;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gn-invitation-dialog .gn-invitation-control:hover {
  border-color: var(--brass, #a9853a);
  background: rgba(37, 55, 25, 0.95);
}

.gn-invitation-dialog .gn-invitation-control:focus-visible,
.gn-invitation-dialog .gn-invitation-stage:focus-visible {
  outline: 2px solid var(--cream, #fff8ed);
  outline-offset: 3px;
}

.gn-invitation-dialog .gn-invitation-close {
  width: 44px;
  padding: 0;
  font-size: 28px;
  line-height: 1;
}

.gn-invitation-dialog .gn-invitation-stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 12px 16px 20px;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  scrollbar-color: var(--sage, #778566) transparent;
  -webkit-overflow-scrolling: touch;
}

.gn-invitation-dialog .gn-invitation-canvas {
  display: grid;
  place-items: center;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
}

.gn-invitation-dialog .gn-invitation-image {
  display: block;
  width: var(--gn-invitation-fit-width, 300px);
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  cursor: zoom-in;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3));
}

.gn-invitation-dialog[data-gn-invitation-zoomed="true"] .gn-invitation-image {
  width: var(--gn-invitation-zoom-width, 1068px);
  cursor: zoom-out;
}

@media screen and (max-width: 580px) {
  .gn-invitation-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
  }

  .gn-invitation-dialog .gn-invitation-toolbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 8px 6px 10px;
  }

  .gn-invitation-dialog .gn-invitation-title {
    width: 100%;
    text-align: center;
  }

  .gn-invitation-dialog .gn-invitation-control {
    padding-right: 12px;
    padding-left: 12px;
  }

  .gn-invitation-dialog .gn-invitation-close {
    padding: 0;
  }

  .gn-invitation-dialog .gn-invitation-stage {
    padding: 8px 6px 12px;
  }
}