/* ==========================================================================
   Home page — visual redesign (index.html only)
   Scoped under .home-page on <main>
   ========================================================================== */

.home-page {
  --home-gold: #C8A872;
  /* One continuous sand surface behind every light section on the homepage —
     each light section below is transparent so this single tile shows
     through with no seam at section boundaries (see #services etc.). */
  background-color: #F7F4EE;
  background-image: url('assets/bg-sand.webp');
  background-repeat: repeat;
  background-size: 512px 768px;
  background-attachment: scroll;
}

/* --- Hero: typographic layout + background photo --- */
.home-page .hero {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow-x: clip;
  background-color: var(--navy);
  padding: calc(var(--header-height) + 24px) clamp(24px, 4vw, 40px) 0;
}

/* Ken Burns: hero background zoom-out on load, plays once. The image lives on
   its own layer (not directly on .hero) so scaling it never affects the
   hero's text content/layout. Layered above the photo, bottom to top:
   a vertical navy wash for overall readability, a soft radial darkening
   centred behind the text block (eyebrow → subtitle), and a top shade
   behind the transparent header. */
.home-page .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to bottom, rgba(var(--navy-rgb), 0.6), rgba(var(--navy-rgb), 0)),
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(var(--navy-rgb), 0.55), rgba(var(--navy-rgb), 0) 75%),
    linear-gradient(to bottom, rgba(var(--navy-rgb), 0.55), rgba(var(--navy-rgb), 0.78)),
    url('assets/hero-sea.webp');
  background-size:
    100% 160px,
    100% 100%,
    100% 100%,
    cover;
  background-position:
    center top,
    center center,
    center center,
    center top;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  /* Entrance (see "Hero entrance" below): fades in from the hero's navy
     over 1.2s while zooming 1.06 -> 1 over 3s, both from 0s */
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

@media (max-width: 768px) {
  .home-page .hero::before {
    background-image:
      linear-gradient(to bottom, rgba(var(--navy-rgb), 0.6), rgba(var(--navy-rgb), 0)),
      radial-gradient(ellipse 60% 55% at 50% 42%, rgba(var(--navy-rgb), 0.55), rgba(var(--navy-rgb), 0) 75%),
      linear-gradient(to bottom, rgba(var(--navy-rgb), 0.55), rgba(var(--navy-rgb), 0.78)),
      url('assets/hero-sea-mobile.webp');
    /* Taller header shade (220px vs desktop's 160px): the mobile hero is
       much shorter now that it's auto-height, so the logo/lang-switcher/
       menu icon need more of the top darkened to stay readable. */
    background-size:
      100% 220px,
      100% 100%,
      100% 100%,
      cover;
    background-position:
      center top,
      center center,
      center center,
      center top;
  }
}

.home-page .hero.is-entered::before {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero::before {
    opacity: 1;
    transform: scale(1);
    transition: none;
  }
}

.home-page .hero__intro {
  position: relative;
  width: 100%;
  overflow: visible;
}

.home-page .hero__content {
  position: relative;
  z-index: 2;
  order: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: min(45rem, 100%);
  align-items: center;
  text-align: center;
  padding: clamp(32px, 6vw, 64px) 0 clamp(16px, 3vw, 28px);
  animation: none;
  overflow: visible;
}

.home-page .hero__tagline,
.home-page .hero__intro,
.home-page .hero__cta {
  position: relative;
  z-index: 1;
}

.home-page .hero__headline,
.home-page .hero__divider,
.home-page .hero__subheadline {
  position: relative;
  z-index: 1;
}

.home-page .hero__tagline,
.home-page .hero__intro {
  width: 100%;
}

/* Hero typography */
.home-page .hero__tagline {
  font-family: var(--font-display);
  color: #C8A872;
}

.home-page .hero__headline--duo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  line-height: 1.22;
  gap: 0.14em;
  text-wrap: balance;
}

.home-page .hero__headline-main {
  color: #fff;
}

.home-page .hero__headline-accent {
  color: #C8A872;
}

.home-page .hero__subheadline {
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.7;
  color: #FFFFFF;
  font-size: 1rem;
}

.home-page .hero__headline-line {
  display: block;
  white-space: nowrap;
}

.home-page .hero__cta {
  width: auto;
  max-width: none;
  align-self: center;
  flex-shrink: 0;
}

/* Homepage hero primary CTA is filled by default; needs to beat the
   homepage-wide .hero__cta:hover (transparent) below on specificity. */
.home-page .hero__cta.btn-primary:hover,
.home-page .hero__cta.btn-primary:focus-visible {
  background-color: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--navy);
}

.home-page .hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.home-page .hero__divider {
  margin-inline: auto;
}

.home-page .hero__subheadline {
  margin-inline: auto;
  max-width: 600px;
  text-wrap: balance;
}

.home-page .hero__bottom {
  order: 2;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  padding: clamp(6px, 1.5vw, 12px) 0 clamp(16px, 3vw, 24px);
}

.home-page .hero-trust-band {
  width: 100%;
  max-width: min(1000px, 100%);
  margin-inline: auto;
  min-height: 0;
}

.home-page .hero-trust-band__content {
  width: 100%;
  flex: none;
}

/* Subtler, narrower divider above the strip (overrides the shared
   .hero__trust-line so other pages using that class are unaffected). */
.home-page .hero__trust-line {
  max-width: 960px;
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.12);
}

/* Hero entrance: one sequence, started by .is-entered (index.html adds it
   once the hero photo has loaded, or after 800ms at the latest). Shared
   easing; text fades in and slides up 14px over 0.7s. */
.home-page .hero {
  --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page .home-hero__enter {
  opacity: 0;
  transform: translateY(14px);
}

.home-page .hero__content.is-entered .home-hero__enter {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s var(--hero-ease), transform 0.7s var(--hero-ease);
}

.home-page .hero__content.is-entered .hero__tagline.home-hero__enter { transition-delay: 0.2s; }
.home-page .hero__content.is-entered .hero__headline-main.home-hero__enter { transition-delay: 0.32s; }
.home-page .hero__content.is-entered .hero__headline-accent.home-hero__enter { transition-delay: 0.44s; }
.home-page .hero__content.is-entered .hero__subheadline.home-hero__enter { transition-delay: 0.68s; }
.home-page .hero__content.is-entered .hero__cta-group.home-hero__enter { transition-delay: 0.8s; }

/* Divider: grows from the centre outward while fading in */
.home-page .hero__divider.home-hero__enter {
  transform: scaleX(0);
  transform-origin: center;
}

.home-page .hero__content.is-entered .hero__divider.home-hero__enter {
  transform: scaleX(1);
  transition-delay: 0.56s;
}

/* Ticker: fade only */
.home-page .hero__bottom .home-hero__enter {
  transform: none;
}

.home-page .hero__content.is-entered + .hero__bottom .home-hero__enter {
  opacity: 1;
  transition: opacity 0.7s var(--hero-ease) 0.95s;
}

/* Reduced motion: no movement, everything visible at once (selectors match
   the specificity of the entrance rules above) */
@media (prefers-reduced-motion: reduce) {
  .home-page .home-hero__enter,
  .home-page .hero__divider.home-hero__enter,
  .home-page .hero__content.is-entered .home-hero__enter,
  .home-page .hero__content.is-entered .hero__divider.home-hero__enter,
  .home-page .hero__content.is-entered + .hero__bottom .home-hero__enter {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Unified CTA hover-fill --- */

.home-page .hero__cta:hover {
  background-color: transparent;
  color: var(--gold);
}

/* --- Sound familiar: quiet 2×2 grid on the sand background. Normal-case
   Cinzel title (same style as the "Working with us" title), gold hairlines,
   small gold numerals 01–04 above each item. --- */
.home-page #familiar.home-familiar {
  position: relative;
  /* Shadows the sitewide --gold-dark (#a8894f, used by .btn-primary hover)
     within this section only, so the button system stays untouched. */
  --gold-dark: #9A7843;
  /* Transparent — shows the single sand tile on .home-page behind it. */
  background: none;
  color: var(--navy);
  padding: clamp(32px, 4.5vw, 36px) 0;
}

.home-page #familiar.home-familiar .container {
  position: relative;
  z-index: 1;
  max-width: var(--shell-default);
}

.home-page #familiar.home-familiar .familiar__eyebrow {
  margin: 0;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 0.6875rem; /* ~11px */
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold-text);
}

/* Same as .working-with-us__title: normal case, 0.04em, same size. */
.home-page #familiar.home-familiar .familiar__heading {
  max-width: 40rem;
  margin: 12px auto clamp(28px, 4vw, 40px);
  font-family: var(--font-display); /* Cinzel */
  font-size: clamp(1.43rem, 2.75vw, 1.92rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: none;
  text-align: center;
  color: var(--navy);
  text-wrap: balance;
}

.home-page #familiar .home-familiar__board {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* Gold hairlines only: above the grid, below it, and between the rows. */
.home-page #familiar .home-familiar__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 96px;
  row-gap: 0;
  border-top: 1px solid rgba(200, 168, 114, 0.5);
  border-bottom: 1px solid rgba(200, 168, 114, 0.5);
}

.home-page #familiar .home-familiar__item {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  min-width: 0;
  padding: 28px 0;
  text-align: left;
}

.home-page #familiar .home-familiar__item:nth-child(1),
.home-page #familiar .home-familiar__item:nth-child(2) {
  border-bottom: 1px solid rgba(200, 168, 114, 0.5);
}

.home-page #familiar .home-familiar__num {
  display: block;
  margin: 0 0 12px;
  font-family: var(--font-display); /* Cinzel */
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--gold-text);
}

.home-page #familiar .home-familiar__lead {
  margin: 0;
  max-width: none;
  font-family: var(--font-display); /* Cinzel */
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
  color: var(--navy);
  text-wrap: balance;
}

.home-page #familiar .home-familiar__body {
  margin: 6px 0 0;
  max-width: none;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: #5a6474;
  text-wrap: pretty;
}

.home-page #familiar .familiar__closing {
  margin: 36px 0 0;
  font-family: var(--font-display); /* Cinzel */
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--gold-text);
  text-wrap: balance;
}

/* "Sound familiar?" mobile: one column, a gold hairline between every item
   (the grid's own top/bottom lines stay). Own breakpoint (760px). */
@media (max-width: 760px) {
  .home-page #familiar .home-familiar__grid {
    grid-template-columns: 1fr;
  }

  .home-page #familiar .home-familiar__item:nth-child(1),
  .home-page #familiar .home-familiar__item:nth-child(2) {
    border-bottom: none;
  }

  .home-page #familiar .home-familiar__item:not(:last-child) {
    border-bottom: 1px solid rgba(200, 168, 114, 0.5);
  }

  .home-page #familiar .home-familiar__item {
    padding: 24px 0;
  }
}

/* Cream band wrapper: no background of its own — the single sand tile lives
   on .home-page and shows through. Kept only for the shared --gold-dark
   token the section dividers between sections need (they can't inherit a
   section-scoped value from a sibling <section>). */
.home-page .home-cream-band {
  position: relative;
  --gold-dark: #9A7843;
  --gold-dark-rgb: 154, 120, 67;
  background: none;
}

/* Divider between two consecutive cream sections — same motif as .hero__divider
   (line + centered diamond), recoloured for the cream background. To toggle a
   given boundary on/off, add or remove its .home-cream-divider element in
   index.html between the two <section>s; nothing else needs to change. */
.home-page .home-cream-divider {
  width: 120px;
  height: 1px;
  margin: 0 auto;
  background: rgba(var(--gold-dark-rgb), 0.3);
  position: relative;
}

.home-page .home-cream-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background: var(--gold-dark);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* --- Services: light band + cards --- */
.home-page #services.services {
  position: relative;
  /* Shadows the sitewide --gold-dark within this section only (same pattern as #familiar) */
  --gold-dark: #9A7843;
  /* Transparent — shows the single sand tile on .home-page behind it (was its
     own learnedBG layer; overrides the shared .services rule in styles.css,
     background: navy url(thirdPartBG.webp) ...). */
  background: none;
  color: var(--navy);
  /* Vertical rhythm scaled down for tablet/mobile in the 769px+ and max-768px blocks below. */
  padding: clamp(32px, 4.5vw, 36px) 0;
}

.home-page #services.services::before {
  content: none;
}

.home-page #services .container {
  position: relative;
  z-index: 1;
}

.home-page #services .services__heading {
  margin: 0 auto clamp(16px, 3vw, 20px);
  max-width: 40rem;
  font-family: var(--font-display); /* Cinzel */
  font-size: clamp(1.43rem, 2.75vw, 1.92rem);
  font-weight: 400;
  color: var(--navy);
  text-align: center;
  text-wrap: balance;
}

.home-page #services .services__subtitle {
  margin: 0 auto clamp(20px, 4vw, 28px);
  max-width: 40rem;
  font-family: var(--font-display); /* Cinzel */
  font-size: clamp(0.875rem, 1.4vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--gold-text);
  text-align: center;
  text-wrap: balance;
}

.home-page #services .services__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--shell-default);
  margin: 0 auto;
  align-items: stretch;
}

/* --- Service cards: light, no photo --- */
.home-page #services .service-card {
  position: relative;
  display: flex;
  background: var(--card);
  border: 1px solid rgba(200, 168, 114, 0.45);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(17, 34, 58, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.home-page #services .service-card:hover,
.home-page #services .service-card:focus-within {
  transform: translateY(-2px);
  border-color: #C8A872;
  box-shadow: 0 10px 24px rgba(17, 34, 58, 0.1);
}

.home-page #services .service-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 32px;
  text-align: left;
  background: none;
}

.home-page #services .service-card__label {
  margin: 0 0 10px;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  text-wrap: balance;
}

.home-page #services .service-card__title {
  margin: 0 0 12px;
  font-family: var(--font-display); /* Cinzel */
  font-size: clamp(1.1875rem, 1.85vw, 1.4375rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--navy);
  text-align: left;
  text-wrap: balance;
}

.home-page #services .service-card__desc {
  margin: 0 0 24px;
  color: var(--navy);
  font-size: clamp(0.8125rem, 1.15vw, 0.875rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.home-page #services .service-card__link {
  margin-top: auto;
}

/* Small "Coming soon" tag (Brand Design card), above the link. */
.home-page #services .service-card__soon {
  display: inline-block;
  margin: 0 0 18px;
  padding: 4px 10px;
  border: 1px solid rgba(200, 168, 114, 0.6);
  border-radius: 999px;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* Tablet widths: four cards would be too narrow, so 2x2. */
@media (min-width: 769px) and (max-width: 1023px) {
  .home-page #services .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-page #services .service-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.home-page #services .service-card__link:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Ad Management: one wide navy panel inside the content width. Two
   columns on desktop (intro left, "A good fit if you" right), one column on
   mobile. Background: solid #162640 with /assets/navy-plaster-wide.webp
   (1456x816) anchored to the bottom, no overlay. The image's top edge fades
   into that same navy (so no seam); its relief wave starts ~440px down on the
   left quarter, ~510-640px elsewhere, i.e. it rises at most ~46% of the
   image height from the bottom. --- */
.home-page #ad-management.ad-mgmt {
  position: relative;
  background: none;
  padding: clamp(32px, 4.5vw, 36px) 0;
  color: var(--cream);
  text-align: left;
}

/* Neutralises the shared .ad-mgmt::before (styles.css, compass overlay). */
.home-page #ad-management.ad-mgmt::before {
  content: none;
}

.home-page #ad-management .ad-mgmt__inner {
  position: relative;
  z-index: 1;
  max-width: var(--shell-default);
  text-align: left;
}

.home-page #ad-management .ad-mgmt__panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(48px, 7vw, 110px);
  /* Space below the last text line (~half the former 248px); the wave
     starts right there (see ::after) */
  --ad-wave-gap: 124px;
  padding: clamp(48px, 5vw, 72px) clamp(40px, 5vw, 72px) var(--ad-wave-gap);
  background-color: #162640;
}

/* Desktop wave: navy-plaster-wide.webp at full panel width. Its relief
   starts 64% down the image, so the layer is placed with its top edge at
   the start of the bottom space and shifted up by 64% of its own height:
   the relief then begins right below the text, and the lower part of the
   image runs past the panel edge (clipped by overflow: hidden). The image's
   plain top half is the same navy as the panel. */
.home-page #ad-management .ad-mgmt__panel::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: calc(100% - var(--ad-wave-gap));
  aspect-ratio: 1456 / 816;
  background: url('/assets/navy-plaster-wide.webp') center top / 100% 100% no-repeat;
  transform: translateY(-64%);
  pointer-events: none;
}

.home-page #ad-management .ad-mgmt__col {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.home-page #ad-management .ad-mgmt__eyebrow {
  margin: 0;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 0.6875rem; /* ~11px */
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.home-page #ad-management .ad-mgmt__title {
  margin: 14px 0 0;
  padding: 0;
  max-width: 100%;
  font-family: var(--font-display); /* Cinzel */
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
  text-transform: none;
  text-wrap: balance;
  color: #FFFFFF;
}

.home-page #ad-management .ad-mgmt__subtitle {
  margin: 12px 0 0;
  font-family: var(--font-display); /* Cinzel */
  font-size: clamp(0.875rem, 1.35vw, 1rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-align: left;
  text-wrap: balance;
  color: var(--gold);
}

.home-page #ad-management .ad-mgmt__rule {
  width: 48px;
  height: 1px;
  margin: 24px 0 0;
  background: var(--gold);
}

.home-page #ad-management .ad-mgmt__intro {
  display: block;
  max-width: 60ch;
  margin: 24px 0 0;
  padding: 0;
}

.home-page #ad-management .ad-mgmt__intro p {
  margin: 0;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
  text-wrap: pretty;
}

.home-page #ad-management .ad-mgmt__list-heading {
  margin: 0;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 0.6875rem; /* ~11px */
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: left;
}

/* Thin gold lines between the items. */
.home-page #ad-management .ad-mgmt__list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.home-page #ad-management .ad-mgmt__list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
  text-wrap: pretty;
}

.home-page #ad-management .ad-mgmt__list-item + .ad-mgmt__list-item {
  border-top: 1px solid rgba(200, 168, 114, 0.35);
}

.home-page #ad-management .ad-mgmt__list-bullet {
  display: inline-block;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 9px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Button first, text link below (both languages, all widths). */
.home-page #ad-management .ad-mgmt__cta-row {
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.home-page #ad-management .ad-mgmt__closing {
  margin: 16px 0 0;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 0.8125rem; /* ~13px */
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
  text-wrap: pretty;
}

/* Mobile: full-bleed panel (edge to edge, no side margins, square corners),
   one column in the same order, with one background image for the whole
   panel: /assets/navy-plaster-mobile.webp (1080x3600, fine plaster
   throughout, relief wave at the bottom), cover, anchored to the bottom.
   The relief rises ~540/1080 = 50% of the panel width from the bottom
   (~187px on a 375px phone), so the bottom padding (at least 300px, more on
   wider screens) keeps it below the button, the link and the note. */
@media (max-width: 768px) {
  .home-page #ad-management.ad-mgmt {
    padding: clamp(24px, 7vw, 28px) 0;
  }

  .home-page #ad-management .ad-mgmt__inner {
    padding-left: 0;
    padding-right: 0;
  }

  /* 40px of plain navy below the last text line, then a 120px wave band
     (40 + 120 = bottom padding). Same technique as desktop: the wave layer
     (navy-plaster-mobile.webp, 1080x3600, full panel width) has its top edge
     at the start of the band and is shifted up by 86% of its own height —
     where the relief starts in the image — so the band shows the ridge
     itself; the rest of the image runs past the panel edge (clipped). */
  .home-page #ad-management .ad-mgmt__panel {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 36px;
    padding: 40px 24px 160px;
    border-radius: 0;
    background-color: #162640;
  }

  .home-page #ad-management .ad-mgmt__panel::after {
    top: calc(100% - 120px);
    aspect-ratio: 1080 / 3600;
    background-image: url('/assets/navy-plaster-mobile.webp');
    transform: translateY(-86%);
  }

  .home-page #ad-management .ad-mgmt__intro {
    max-width: none;
  }

  .home-page #ad-management .ad-mgmt__intro p,
  .home-page #ad-management .ad-mgmt__list-item {
    font-size: 0.875rem;
  }
}

@media (min-width: 1024px) {
  .home-page #ad-management.ad-mgmt {
    padding: clamp(40px, 3.5vw, 50px) 0;
  }
}

/* Final CTA styles live in styles.css (.content-block--fit-cta) — shared with About. */

/* --- Experience (#team): two columns inside the content width. Left: the
   two-line title (navy / gold) with a short gold line, sticky just below
   the fixed header while the right column scrolls. Right: paragraph,
   "Industries we know" label, industries in two columns, the region block
   below a gold hairline, and the "More about Darlana" link. New class names
   (.home-exp__*) so the old shared .team-section rules in styles.css don't
   apply to the inner markup. --- */
.home-page #team.team-section {
  position: relative;
  /* clip, not hidden: hidden would turn the section into a scroll
     container and stop the sticky title from sticking. */
  overflow-x: clip;
  overflow-y: visible;
  --gold-dark: #9A7843;
  background: none;
  color: var(--navy);
  padding: clamp(32px, 4.5vw, 36px) 0;
  text-align: left;
}

.home-page #team.team-section::before {
  content: none;
}

.home-page #team .home-exp {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  column-gap: clamp(48px, 7vw, 100px);
  max-width: var(--shell-default);
}

/* Fixed header is 72px tall; 40px of air below it. */
.home-page #team .home-exp__head {
  position: sticky;
  top: 112px;
}

.home-page #team .home-exp__title {
  margin: 0;
  font-family: var(--font-display); /* Cinzel */
  /* Same size as the other homepage section titles (.working-with-us__title,
     .familiar__heading, .services__heading). */
  font-size: clamp(1.43rem, 2.75vw, 1.92rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-align: left;
}

.home-page #team .home-exp__title-line {
  display: block;
}

.home-page #team .home-exp__title-line--accent {
  color: var(--gold-text);
}

.home-page #team .home-exp__rule {
  width: 48px;
  height: 1px;
  margin: 28px 0 0;
  background: #C8A872;
}

.home-page #team .home-exp__text {
  margin: 0;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--navy);
  text-wrap: pretty;
}

.home-page #team .home-exp__label {
  margin: 36px 0 0;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 0.6875rem; /* ~11px */
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* Business types on one line, wrapping naturally. Each diamond sits inside
   the preceding item's nowrap span, so a line can only break after a
   diamond: never inside an item, never starting with a diamond. */
.home-page #team .home-exp__types {
  margin: 16px 0 0;
  font-family: var(--font-display); /* Cinzel */
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--navy);
}

.home-page #team .home-exp__type {
  white-space: nowrap;
}

/* Same small gold diamond as elsewhere on the site. */
.home-page #team .home-exp__diamond {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 0.3em 0 0.55em;
  vertical-align: 0.2em;
  background: var(--gold);
  transform: rotate(45deg);
}

.home-page #team .home-exp__examples {
  margin: 12px 0 0;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  color: #5a6474;
  text-wrap: pretty;
}

.home-page #team .home-exp__examples .home-exp__em {
  color: var(--navy);
}

.home-page #team .home-exp__region {
  margin: 40px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid rgba(200, 168, 114, 0.5);
}

.home-page #team .home-exp__region-title {
  margin: 0;
  font-family: var(--font-display); /* Cinzel */
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--navy);
  text-wrap: balance;
}

.home-page #team .home-exp__region-text {
  margin: 10px 0 0;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--navy);
  text-wrap: pretty;
}

.home-page #team .home-exp__link {
  margin-top: 32px;
}

@media (min-width: 1024px) {
  .home-page #team.team-section {
    padding: clamp(40px, 3.5vw, 50px) 0;
  }
}

/* Mobile: one column, same order, title not sticky; the types line wraps. */
@media (max-width: 768px) {
  .home-page #team.team-section {
    padding: clamp(24px, 7vw, 28px) 0;
  }

  .home-page #team .home-exp {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .home-page #team .home-exp__head {
    position: static;
  }

  .home-page #team .home-exp__rule {
    margin-top: 22px;
  }

  .home-page #team .home-exp__link {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* Business types as outlined tags: same values as the PPC Mentoring topic
     tags on mobile (.svc-page .svc-tags__tag / __list in styles.css, scoped
     to .svc-page, so copied here), left-aligned, no diamonds. */
  .home-page #team .home-exp__types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }

  .home-page #team .home-exp__type {
    padding: 7px 13px;
    border: 1px solid #9A7843;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-text);
  }

  .home-page #team .home-exp__diamond {
    display: none;
  }

  .home-page #team .home-exp__examples {
    margin-top: 14px;
  }

  /* Region block as a side note: same values as the PPC Mentoring mobile
     side note (.svc-page .svc-split__title / __text): small gold Cinzel
     label led by a short gold line, then the text. No line above. */
  .home-page #team .home-exp__region {
    padding-top: 0;
    border-top: 0;
  }

  .home-page #team .home-exp__region-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.18em;
    color: var(--gold-text);
  }

  .home-page #team .home-exp__region-title::before {
    content: '';
    flex: 0 0 32px;
    height: 1px;
    background: #C8A872;
  }

  .home-page #team .home-exp__region-text {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--navy);
  }
}

/* --- Working with us: cream section, 2x2 grid --- */
.home-page #working-with-us.working-with-us {
  position: relative;
  overflow: hidden;
  /* Shadows the sitewide --gold-dark within this section only (same pattern as #familiar/#services) */
  --gold-dark: #9A7843;
  --gold-dark-rgb: 154, 120, 67;
  /* Transparent — shows the single sand tile on .home-page behind it. */
  background: none;
  color: var(--navy);
  padding: clamp(32px, 4.5vw, 36px) 0;
  text-align: center;
}

/* Decorative mother-of-pearl edge, same as the Google Ads Mentoring shell
   section (.svc-media--shell .svc-media__wave): flush with the left edge of
   the viewport, inside the section 24px from its top and bottom (vertically
   centred on the content), natural aspect ratio. The content's left margin
   below keeps the text clear of it; hidden on phones. */
.home-page #working-with-us .working-with-us__edge {
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: min(26vw, 400px);
  pointer-events: none;
  z-index: 0;
}

.home-page #working-with-us .working-with-us__edge img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

.home-page #working-with-us .working-with-us__inner {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 820px;
  margin-left: max(calc(min(30vw, 440px) + 40px), calc(50% - 410px));
  margin-right: auto;
  padding-left: 0;
  padding-right: 40px;
}

.home-page #working-with-us .working-with-us__title {
  margin: 0 0 clamp(16px, 3vw, 20px);
  max-width: 40rem;
  font-family: var(--font-display); /* Cinzel */
  font-size: clamp(1.43rem, 2.75vw, 1.92rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-align: left;
  text-wrap: balance;
}

.home-page #working-with-us .working-with-us__subtitle {
  margin: 0 0 clamp(20px, 4vw, 28px);
  max-width: 40rem;
  font-family: var(--font-display); /* Cinzel */
  font-size: clamp(0.875rem, 1.4vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--gold-text);
  text-align: left;
  text-wrap: balance;
}

.home-page #working-with-us .working-with-us__grid {
  position: relative;
}

.home-page #working-with-us .working-with-us__cell {
  display: grid;
  grid-template-columns: 84px minmax(180px, 1fr) 1.5fr;
  column-gap: 28px;
  padding: 30px 0;
  border-top: 1px solid rgba(var(--gold-rgb), 0.5);
  align-items: baseline;
  text-align: left;
}

.home-page #working-with-us .working-with-us__cell:last-child {
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.5);
}

.home-page #working-with-us .working-with-us__cell-num {
  font-family: var(--font-display); /* Cinzel */
  font-size: 2.125rem; /* ~34px */
  line-height: 1;
  color: var(--gold-text);
}

.home-page #working-with-us .working-with-us__cell-title {
  margin: 0;
  font-family: var(--font-display); /* Cinzel */
  font-size: 1.25rem; /* ~20px */
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--navy);
  text-align: left;
  text-wrap: balance;
}

.home-page #working-with-us .working-with-us__cell-desc {
  margin: 0;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 0.90625rem; /* ~14.5px */
  font-weight: 400;
  line-height: 1.75;
  max-width: 48ch;
  color: var(--navy);
  text-align: left;
  text-wrap: pretty;
}

/* 900px: number column narrows, text drops under the title */
@media (max-width: 900px) {
  .home-page #working-with-us .working-with-us__cell {
    grid-template-columns: 64px 1fr;
  }

  .home-page #working-with-us .working-with-us__cell-desc {
    grid-column: 2;
    margin-top: 10px;
  }
}

/* --- Closing CTA (stays centered; only the closing CTA and hero keep a divider,
   and the hero's is the only one left after this section's is removed below) --- */
/* This section's shared .content-block--fit-cta ::before pseudo (styles.css) stays
   disabled below. Transparent — shows the single sand tile on .home-page behind it. */
.home-page #get-in-touch.content-block--fit-cta {
  background: none;
  padding: clamp(32px, 4.5vw, 36px) 0;
}

.home-page #get-in-touch.content-block--fit-cta::before {
  content: none;
}

/* --- Closing CTA: invitation envelope. Ported from
   _reference/darlana-meghivo-scroll.html (its build()/render(t) geometry,
   faithfully) — replaces the earlier static .fit-card. The scene is centred
   in the section (flex column, align-items: center, inherited from the
   shared .content-block--fit-cta .content-block__inner rule in styles.css —
   only its max-width is widened here to give the ~620px-wide envelope room);
   the "or send a message" link is positioned by JS (render(t), in index.html)
   centred below it, inside the scene.
   The card is positioned once in build() and never moves; every other layer
   (back/pocket/clip/flap/seal) has its position/transform/opacity/z-index
   set every animation frame by render(t) in index.html, not by CSS
   transitions — the envelope slides down off the stationary card. Only
   .envelope__alt still uses a plain CSS transition (its opacity is a single
   JS-driven on/off flip at the end of the timeline, not a per-frame value). */
.home-page #get-in-touch.content-block--fit-cta .content-block__inner {
  max-width: var(--shell-default);
}

.home-page #get-in-touch {
  /* Matches the --gold-dark shade already shadowed by every other homepage
     section (services/promises/team/working-with-us), and the reference's
     own --gold-dark (site root --gold-dark is a slightly different shade,
     used site-wide outside the homepage). */
  --gold-dark: #9A7843;
}

.home-page #get-in-touch .envelope {
  position: relative;
  margin: 0 auto;
  perspective: 1800px;
}

.home-page #get-in-touch .envelope__layer {
  position: absolute;
}

.home-page #get-in-touch .envelope__layer img {
  display: block;
  width: 100%;
  height: 100%;
}

.home-page #get-in-touch .envelope__back {
  z-index: 1;
  filter: drop-shadow(0 30px 30px rgba(17, 34, 58, .35)) drop-shadow(0 3px 4px rgba(17, 34, 58, .25));
}

.home-page #get-in-touch .envelope__clip {
  z-index: 3;
  overflow: hidden;
}

.home-page #get-in-touch .envelope__card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FAF7F1;
  text-align: center;
  box-shadow: 0 1px 2px rgba(17, 34, 58, .15), 0 14px 26px -12px rgba(17, 34, 58, .35);
}

/* Inner gold frame line */
.home-page #get-in-touch .envelope__card::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(200, 168, 114, .55);
  pointer-events: none;
}

/* Mark only: a 60px box, so the drawn mark (about 90% of the SVG) is ~54px
   tall; fixed size, centred. "img." outranks the .envelope__layer img rule. */
.home-page #get-in-touch img.envelope__logo {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto;
}

.home-page #get-in-touch .envelope__label {
  display: block;
  margin: 12px 0 0;
  font-family: var(--font-sans); /* Montserrat */
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--gold-text);
  font-weight: 500;
  /* Reference's own label text is hardcoded upper case ("AN INVITATION");
     ours comes from fit.label ("An invitation"), so this reproduces the
     same rendered look from mixed-case source text. */
  text-transform: uppercase;
}

.home-page #get-in-touch .envelope__title {
  font-family: var(--font-display); /* Cinzel */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--navy);
  margin: 14px 0 8px;
}

.home-page #get-in-touch .envelope__subtitle {
  font-family: var(--font-display); /* Cinzel */
  color: var(--gold-text);
  max-width: 34ch;
  margin: 0 auto;
  line-height: 1.45;
}

.home-page #get-in-touch .envelope__orn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px auto;
}

.home-page #get-in-touch .envelope__orn i {
  display: block;
  width: 44px;
  height: 1px;
  background: var(--gold);
  opacity: .7;
}

.home-page #get-in-touch .envelope__orn b {
  display: block;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

.home-page #get-in-touch .envelope__text {
  font-family: var(--font-sans); /* Montserrat */
  line-height: 1.6;
  margin: 0 auto;
  max-width: 40ch;
  color: var(--navy);
}

/* The button follows the text directly (the meta line is gone). */
.home-page #get-in-touch .envelope__cta {
  align-self: center;
  margin-top: 20px;
}

.home-page #get-in-touch .envelope__pocket {
  z-index: 4;
  pointer-events: none;
}

.home-page #get-in-touch .envelope__flap {
  z-index: 5;
  transform-origin: 50% 0;
  pointer-events: none;
}

/* Default/base shadow; render(t) removes it once the flap has rotated past
   vertical (ang > 90deg) and is leaning back behind the pocket/card. */
.home-page #get-in-touch .envelope__flap img {
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35));
}

.home-page #get-in-touch .envelope__seal {
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
}

.home-page #get-in-touch .envelope__alt {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity .6s ease;
  /* The reference's own .alt is plain text (text-align: center is enough);
     ours is the shared .link-arrow (display: inline-flex, for the icon),
     so it needs justify-content to actually centre within the full-width
     absolutely positioned box that render(t) sizes it to. */
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .home-page #get-in-touch .envelope__alt {
    transition: none !important;
  }
}

/* --- Scroll-triggered fade-up --- */
.home-page .home-reveal__item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.home-page .home-animate-section.is-visible .home-reveal__item {
  opacity: 1;
  transform: translateY(0);
}

.home-page .home-animate-section.is-visible .home-reveal__item:nth-child(1) { transition-delay: 0ms; }
.home-page .home-animate-section.is-visible .home-reveal__item:nth-child(2) { transition-delay: 100ms; }
.home-page .home-animate-section.is-visible .home-reveal__item:nth-child(3) { transition-delay: 200ms; }
.home-page .home-animate-section.is-visible .home-reveal__item:nth-child(4) { transition-delay: 300ms; }
.home-page .home-animate-section.is-visible .home-reveal__item:nth-child(5) { transition-delay: 400ms; }
.home-page .home-animate-section.is-visible .home-reveal__item:nth-child(6) { transition-delay: 500ms; }
.home-page .home-animate-section.is-visible .home-reveal__item:nth-child(7) { transition-delay: 600ms; }
.home-page .home-animate-section.is-visible .home-reveal__item:nth-child(8) { transition-delay: 700ms; }

.home-page #familiar .home-familiar__grid .home-reveal__item:nth-child(1) { transition-delay: 80ms; }
.home-page #familiar .home-familiar__grid .home-reveal__item:nth-child(2) { transition-delay: 160ms; }
.home-page #familiar .home-familiar__grid .home-reveal__item:nth-child(3) { transition-delay: 240ms; }
.home-page #familiar .home-familiar__grid .home-reveal__item:nth-child(4) { transition-delay: 320ms; }

.home-page .services__grid .home-reveal__item:nth-child(1) { transition-delay: 80ms; }
.home-page .services__grid .home-reveal__item:nth-child(2) { transition-delay: 180ms; }
.home-page .services__grid .home-reveal__item:nth-child(3) { transition-delay: 280ms; }
.home-page .services__grid .home-reveal__item:nth-child(4) { transition-delay: 380ms; }

.home-page #ad-management .ad-mgmt__eyebrow { transition-delay: 80ms; }
.home-page #ad-management .ad-mgmt__title { transition-delay: 140ms; }
.home-page #ad-management .ad-mgmt__subtitle { transition-delay: 200ms; }
.home-page #ad-management .ad-mgmt__intro .home-reveal__item { transition-delay: 260ms; }
.home-page #ad-management .ad-mgmt__list-heading { transition-delay: 320ms; }
.home-page #ad-management .ad-mgmt__list { transition-delay: 380ms; }
.home-page #ad-management .ad-mgmt__cta-row { transition-delay: 440ms; }
.home-page #ad-management .ad-mgmt__closing { transition-delay: 500ms; }

@media (min-width: 1024px) {

  /* Re-widen the vertical rhythm to the full desktop target */
  .home-page #services.services {
    padding: clamp(40px, 3.5vw, 50px) 0;
  }

  .home-page #working-with-us.working-with-us {
    padding: clamp(40px, 3.5vw, 50px) 0;
  }

  .home-page #working-with-us .working-with-us__subtitle {
    margin-bottom: 40px;
  }

  .home-page #familiar.home-familiar,
  .home-page #get-in-touch.content-block--fit-cta {
    padding: clamp(40px, 3.5vw, 50px) 0;
  }

}

/* --- Mobile --- */
@media (max-width: 768px) {
  .home-page {
    overflow-x: clip;
  }

  .home-page .hero {
    /* Auto height: content flows top-to-bottom instead of being forced to
       fill 100dvh (which left a large empty gap between the button and the
       trust strip on short pages). Falls back to styles.css's own
       .hero { height: auto; overflow: visible } for the properties not
       restated here. */
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding:
      calc(var(--header-height) + 24px)
      clamp(20px, 6vw, 32px)
      16px;
  }

  .home-page .hero__content {
    --hero-mobile-scale: 0.875;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
      calc(clamp(16px, 4vw, 28px) * var(--hero-mobile-scale))
      clamp(16px, 5vw, 28px)
      calc(20px * var(--hero-mobile-scale));
  }

  .home-page .hero__tagline {
    width: 100%;
    text-align: center;
    align-self: center;
    font-size: calc(0.6875rem * var(--hero-mobile-scale));
    margin-bottom: calc(24px * var(--hero-mobile-scale));
  }

  .home-page .hero__intro {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: visible;
    margin-bottom: calc(36px * var(--hero-mobile-scale));
  }

  .home-page .hero__headline--duo,
  .home-page .hero__headline {
    align-items: center;
    text-align: center;
    align-self: center;
    width: 100%;
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.25;
  }

  /* Each authored line (span) must be free to wrap onto two lines — the
     base rule forces white-space: nowrap for desktop, which is what let
     the longer HU first line overflow the viewport on both sides. */
  .home-page .hero__headline-line {
    white-space: normal;
    text-wrap: balance;
  }

  .home-page .hero__cta {
    align-self: center;
    width: auto;
    max-width: max-content;
    font-size: calc(0.625rem * var(--hero-mobile-scale));
    padding:
      calc(11px * var(--hero-mobile-scale))
      calc(20px * var(--hero-mobile-scale));
    min-height: calc(40px * var(--hero-mobile-scale));
    gap: calc(8px * var(--hero-mobile-scale));
  }

  .home-page .hero__cta-arrow {
    width: calc(14px * var(--hero-mobile-scale));
    height: calc(14px * var(--hero-mobile-scale));
  }

  .home-page .hero__divider {
    margin-inline: auto;
    width: min(100%, calc(300px * var(--hero-mobile-scale)));
    margin-block: calc(28px * var(--hero-mobile-scale));
  }

  .home-page .hero__divider::after {
    width: calc(7px * var(--hero-mobile-scale));
    height: calc(7px * var(--hero-mobile-scale));
  }

  .home-page .hero__subheadline {
    margin-inline: auto;
    text-align: center;
    max-width: 32ch;
    font-size: 15px;
    line-height: 1.65;
  }

  .home-page .hero__trust-line {
    margin-bottom: clamp(28px, 7vw, 40px);
  }

  /* Trust countries carousel — mobile only */
  .home-page .hero__bottom {
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    flex: 0 0 auto;
    padding: 48px 0 0;
  }

  .home-page .hero-trust-band {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .home-page .hero-trust-band__content {
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .home-page #services .services__heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.25rem, 5vw, 1.65rem);
  }

  .home-page #services .services__heading {
    margin-bottom: 16px;
  }

  .home-page #services .services__subtitle {
    margin-bottom: clamp(2rem, 6vw, 2.5rem);
  }

  /* Fit CTA mobile — restore pre-refactor overrides.
     Shared .content-block--fit-cta alone loses to:
     (1) .home-page .hero__cta mobile scale in this file (same specificity, later),
     (2) later .content-block { padding: 64px 0 } in styles.css.
     Scoped to #get-in-touch so About .about-closing-cta is untouched. */
  .home-page #get-in-touch.content-block--fit-cta {
    overflow-x: clip;
    padding: clamp(24px, 7vw, 28px) 0;
  }

  /* Invitation envelope, mobile: sizing/layout is entirely computed by
     build() (index.html) from the measured available width — no fixed
     breakpoint overrides needed here, unlike the old static card. */
  .home-page #get-in-touch .envelope__cta {
    min-height: 44px;
    touch-action: manipulation;
  }

  .home-page #get-in-touch .envelope__alt {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* build() sizes the envelope to ~90% of the screen width on mobile; no
     side padding on its wrapper, so it centres (auto margins) instead of
     starting at the padding edge. */
  .home-page #get-in-touch.content-block--fit-cta .content-block__inner {
    padding-left: 0;
    padding-right: 0;
  }

  .home-page #familiar.home-familiar {
    padding: clamp(24px, 7vw, 28px) 0;
    overflow-x: clip;
  }

  .home-page #familiar.home-familiar .container {
    max-width: var(--shell-default);
  }

  /* Services — mobile only */
  .home-page #services.services {
    overflow-x: clip;
    padding: clamp(24px, 7vw, 28px) 0;
    background-attachment: scroll;
  }

  /* Single column, stacked — no carousel */
  .home-page #services .services__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .home-page #services .service-card__body {
    padding: 24px;
  }

  .home-page #working-with-us.working-with-us {
    padding: clamp(24px, 7vw, 28px) 0;
  }

}

/* "Working with us", mobile: a vertical row of gold-outlined medallions joined by
   one thin gold line. No sea image, no horizontal lines. Each row has a 58px gutter holding the 37px circle; the
   title sits next to it, the text below the title. The line is drawn per row
   (every row but the last), from its circle's centre to the next circle's
   centre, so together they run from the first centre to the last and never
   below it. Placed after the 900px rule so it overrides it on phones;
   desktop is unchanged. */
@media (max-width: 768px) {
  .home-page #working-with-us .working-with-us__edge {
    display: none;
  }

  .home-page #working-with-us .working-with-us__inner {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  .home-page #working-with-us .working-with-us__subtitle {
    margin-bottom: 34px;
  }

  .home-page #working-with-us .working-with-us__cell {
    --wwu-circle: 37px;
    position: relative;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
    padding: 0 0 30px;
    border: 0;
  }

  .home-page #working-with-us .working-with-us__cell:last-child {
    padding-bottom: 0;
    border: 0;
  }

  /* Gold line segment: from this circle's bottom edge to the next circle's
     top edge (the circles are transparent, so the line stops at them). */
  .home-page #working-with-us .working-with-us__cell:not(:last-child)::before {
    content: '';
    position: absolute;
    left: calc(var(--wwu-circle) / 2 - 0.5px);
    top: var(--wwu-circle);
    height: calc(100% - var(--wwu-circle));
    width: 1px;
    background: rgba(200, 168, 114, 0.6);
    pointer-events: none;
  }

  .home-page #working-with-us .working-with-us__cell-num {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wwu-circle);
    height: var(--wwu-circle);
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #C8A872;
    border-radius: 50%;
    background: transparent;
    font-family: var(--font-display); /* Cinzel */
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--gold-text);
  }

  /* First line centred on the circle: (37px - 19px * 1.35) / 2 ≈ 6px. */
  .home-page #working-with-us .working-with-us__cell-title {
    grid-column: 2;
    grid-row: 1;
    margin-top: 6px;
    font-size: 19px;
    line-height: 1.35;
  }

  .home-page #working-with-us .working-with-us__cell-desc {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    margin-top: 8px;
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-hero__enter,
  .home-page .home-reveal__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Wide screens — homepage hero content scale (100vh band; fill the screen) */
@media (min-width: 1600px) {
  /* Eyebrow — base is fixed 0.6875rem via main .hero__tagline; +25% */
  .home-page .hero__tagline {
    font-size: 0.859375rem;
  }

  /* Headline — raise clamp MAX only (+40%) */
  .home-page .hero__headline,
  .home-page .hero__headline--duo {
    font-size: clamp(1.55rem, 3vw, 3.5rem);
  }

  /* Subheadline — raise clamp MAX only (~1px less than before) */
  .home-page .hero__subheadline {
    font-size: clamp(0.9rem, 1.45vw, 1.25rem);
  }

  /* CTA — font +20% only. Padding boost omitted: it overflows 1600×900. */
  .home-page .hero__cta {
    font-size: 0.825rem;
  }

  /* Short ultrawide: trim content pad so the stack clears 900px-tall windows */
  .home-page .hero__content {
    padding-top: clamp(1.5rem, 4vw, 3rem);
  }
}

/* Vertical rhythm + CTA padding — only on tall viewports.
   At 1400–1440px tall (with root scaling to 22–24px) the +20% spacing
   overflows the 100vh hero, so it is gated above the verify heights. */
@media (min-width: 1600px) and (min-height: 1600px) {
  .home-page .hero {
    padding: calc(var(--header-height) + 3.6rem) clamp(24px, 4vw, 40px) 0;
  }

  .home-page .hero__content {
    padding: clamp(2rem, 6vw, 4.8rem) 0 clamp(1.5rem, 4vw, 3rem);
  }

  .home-page .hero__tagline {
    margin-bottom: 1.8rem;
  }

  .home-page .hero__divider {
    margin-block: 2.1rem;
  }

  .home-page .hero__intro {
    margin-bottom: 2.7rem;
  }

  .home-page .hero__cta {
    padding: 1.05rem 2.1rem;
    gap: 0.9rem;
  }

  .home-page .hero__bottom {
    padding: clamp(0.9rem, 2.5vw, 1.5rem) 0 clamp(1.2rem, 3vw, 1.8rem);
    padding-top: 2.1rem;
  }

  .home-page .hero__trust-line {
    margin-bottom: 1.8rem;
  }
}

/* --- Homepage mobile rhythm: the cream sections' top/bottom padding doubled
   (clamp(24px, 7vw, 28px) -> clamp(48px, 14vw, 56px)), so every gap between
   sections is twice as large. The hero, the Ad Management navy panel itself
   and the closing invitation keep their own padding. Kept last so it wins
   over the earlier mobile padding rules. --- */
@media (max-width: 768px) {
  .home-page #familiar.home-familiar,
  .home-page #ad-management.ad-mgmt,
  .home-page #services.services,
  .home-page #team.team-section,
  .home-page #working-with-us.working-with-us {
    padding-top: clamp(48px, 14vw, 56px);
    padding-bottom: clamp(48px, 14vw, 56px);
  }

  /* 72px from the bottom of the Ad Management panel to the next title */
  .home-page #ad-management.ad-mgmt {
    padding-bottom: 0;
  }

  .home-page #services.services {
    padding-top: 72px;
  }
}

/* Closing invitation, desktop: the envelope is 75% of its former size
   (build() in index.html), so the section's bottom spacing is 75% too. */
@media (min-width: 769px) {
  .home-page #get-in-touch.content-block--fit-cta {
    padding-bottom: clamp(24px, 2.6vw, 38px);
  }
}

/* --- Mobile hero: one full screen tall. The fixed navbar sits on top of
   this hero, so it is included (100svh, 100vh fallback). min-height, so
   taller content makes it grow. Text in the upper part with a top space
   that follows the screen height, the ticker pinned to the bottom, the
   free space in between stretching. The sea photo is anchored to the
   bottom. Shorter screens (< 700px tall): smaller heading, tighter
   spacing. Desktop unchanged. --- */
@media (max-width: 768px) {
  .home-page .hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  .home-page .hero::before {
    background-position:
      center top,
      center center,
      center center,
      center bottom;
  }

  .home-page .hero__content {
    justify-content: flex-start;
    padding-top: clamp(8px, 4vh, 48px);
    padding-top: clamp(8px, 4svh, 48px);
  }

  .home-page .hero__bottom {
    margin-top: auto;
  }
}

@media (max-width: 768px) and (max-height: 700px) {
  .home-page .hero__content {
    --hero-mobile-scale: 0.78;
  }

  .home-page .hero__headline--duo,
  .home-page .hero__headline {
    font-size: clamp(21.6px, 6.3vw, 27px);
  }

  .home-page .hero__bottom {
    padding-top: 32px;
  }
}

/* Mobile hero button: readable text and a comfortable 44px tap height */
@media (max-width: 768px) {
  .home-page .hero__cta {
    min-height: 44px;
    padding: 12px 24px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
}

/* --- Full-screen hero (every width): exactly one screen tall (100svh,
   100vh fallback), starting behind the fixed navbar, whose height is the
   hero's top padding. The content is centred between the navbar and the
   ticker; on short screens the spacing and headline follow the screen
   height instead of the hero growing. Kept last so it wins over the
   earlier per-breakpoint hero rules. --- */
.home-page .hero {
  box-sizing: border-box;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  justify-content: flex-start;
  padding-top: var(--header-height);
  padding-bottom: 0;
}

.home-page .hero__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  padding-top: clamp(8px, 3vh, 40px);
  padding-bottom: clamp(8px, 3vh, 40px);
}

.home-page .hero__bottom {
  flex: 0 0 auto;
  margin-top: 0;
}

/* Hero eyebrow: larger, bolder, tighter, with a soft shadow for legibility
   over the photo (no overlay) */
.home-page .hero__tagline {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-shadow: 0 1px 10px rgba(17, 34, 58, 0.6);
}

@media (max-width: 768px) {
  .home-page .hero__tagline {
    font-size: 13px;
  }
}

/* Mobile: the ticker sits inside the first screen with room below it
   (the former 16px, or the phone's safe-area inset if larger) */
@media (max-width: 768px) {
  .home-page .hero {
    padding-bottom: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* Mobile: the ticker block starts with 48px of space (32px on short
   screens) above the ticker line; the same extra space at the top of the
   content keeps the text centred between the navbar and the ticker. */
@media (max-width: 768px) {
  .home-page .hero__content {
    padding-top: calc(clamp(8px, 3vh, 40px) + 48px);
  }
}

@media (max-width: 768px) and (max-height: 700px) {
  .home-page .hero__content {
    padding-top: calc(clamp(8px, 3vh, 40px) + 32px);
  }
}

/* --- Hero text block on portrait tablets (e.g. iPad Pro 13 at 1032px):
   everything ~1.2-1.4x larger, gaps scaled with it. Mobile and desktop are
   unchanged; the hero stays one screen (100svh) with the ticker at the
   bottom, the block centred between the navbar and the ticker. --- */
@media (min-width: 700px) and (max-width: 1199px) and (orientation: portrait) {
  /* Room for the larger, non-wrapping heading lines */
  .home-page .hero__content {
    max-width: min(60rem, 100%);
  }

  .home-page .hero__tagline {
    font-size: clamp(0.85rem, 1.5vw, 1.05rem);
    letter-spacing: 0.2em; /* proportional to the font size */
    margin-bottom: 34px;
  }

  .home-page .hero__headline,
  .home-page .hero__headline--duo,
  .home-page .hero__headline-line {
    font-size: clamp(2.8rem, 5.8vw, 3.9rem);
  }

  /* At this size the longer HU first line is wider than the screen, so the
     lines may wrap here (balanced); the EN lines still fit on one line */
  .home-page .hero__headline-line {
    white-space: normal;
    text-wrap: balance;
  }

  /* Divider ~1.4x: longer line, larger diamond, more space around it */
  .home-page .hero__divider {
    width: min(100%, 420px);
    margin-block: 38px;
  }

  .home-page .hero__divider::after {
    width: 10px;
    height: 10px;
  }

  .home-page .hero__intro {
    margin-bottom: 48px;
  }

  .home-page .hero__subheadline {
    font-size: clamp(1.15rem, 2.1vw, 1.4rem);
    max-width: 34em;
  }

  /* Button ~1.2x */
  .home-page .hero__cta {
    font-size: 13.2px;
    padding: 17px 34px;
  }
}