/* =============================================
   Darlana Marketing — Luxury Brand Website
   Inspired by Bang & Olufsen aesthetic
   ============================================= */

:root {
  --navy: #11223A;
  --navy-light: #162d4a;
  --navy-mid: #1a3558;
  --navy-dark: #0c1828;
  --gold: #C8A872;
  --gold-light: #d9bc8f;
  --gold-dark: #a8894f;
  --gold-text: #8C6D3F; /* gold for text on cream / light backgrounds */
  --card: #FFFDF8; /* warm off-white for cards on cream backgrounds */
  --cream: #F7F5F2;
  --cream-dim: rgba(247, 245, 242, 0.72);
  --cream-muted: rgba(247, 245, 242, 0.45);
  --gold-rgb: 200, 168, 114;
  --navy-rgb: 17, 34, 58;
  --cream-rgb: 247, 245, 242;

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Cinzel', Georgia, serif;

  --header-height: 4.5rem;
  --content-readable: 42rem;
  --content-readable-wide: 52rem;
  --content-shell: var(--shell-default);

  /* Unified section content-width scale (rem; scales with html font-size) */
  --shell-wide: 87.5rem;   /* was 1400px */
  --shell-default: 75rem;  /* was 1200px */
  --shell-content: 67.5rem; /* was 1080px */
  --shell-reading: 50rem;  /* was 800px */

  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream);
  background: var(--navy);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul[role="list"] {
  list-style: none;
}

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

/* ---- Header ---- */
/* Two states only:
   - rest: transparent over a navy hero (homepage), or the navy textured bar
     (::before) on the other navy-hero pages — cream text;
   - cream: after scrolling (.site-header--scrolled, set in script.js) or from the
     start on pages whose top section isn't navy (.site-header--light) — navy text.
   Colours for the current state are passed down as custom properties. */
.site-header {
  --nav-text: #FBF8F2;
  /* language switcher: inactive / active language */
  --nav-muted: rgba(251, 248, 242, 0.65);
  --nav-accent: #C8A872;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 40px;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(rgba(0, 9, 22, 0.75), rgba(0, 9, 22, 0.75)), url('assets/thirdPartBG.webp');
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.site-header--scrolled,
.site-header--light {
  --nav-text: #11223A;
  --nav-muted: rgba(17, 34, 58, 0.55);
  --nav-accent: #9C7B45;
  border-bottom-color: rgba(200, 168, 114, 0.55);
  box-shadow: 0 6px 18px -14px rgba(17, 34, 58, 0.35);
}

/* Cream bar surface (blurred) on its own layer rather than on the header:
   a backdrop-filter on the header would make it the backdrop root for the
   Services dropdown, and the dropdown's glass could no longer blur the page
   behind the bar. */
.site-header::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: rgba(251, 248, 242, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background-color 0.2s ease;
}

.site-header--scrolled::after,
.site-header--light::after {
  opacity: 1;
}

/* Desktop navbar surfaces. Placed after the base ::before/::after rules so
   these values win.
   - At rest over the hero (all pages): fully transparent, only a 1px blur;
     the navy texture layer is mobile-only.
   - Scrolled / light-hero pages: frosted cream with a gold hairline. */
@media (min-width: 769px) {
  .site-header::before {
    background-image: none;
    background-color: transparent;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
  }

  .site-header:not(.site-header--scrolled):not(.site-header--light)::before {
    opacity: 1;
    bottom: -1px;
  }

  .site-header::after {
    background-color: rgba(251, 248, 242, 0.49);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  /* Denser while a navy section is behind the bar (script.js sets
     .site-header--over-dark), so the glass never turns grey */
  .site-header--over-dark::after {
    background-color: rgba(251, 248, 242, 0.88);
  }

  .site-header--scrolled,
  .site-header--light {
    border-bottom-color: #C8A872;
  }
}

/* Lock page scroll while the mobile nav panel is open (scrollY restored in script.js) */
html.body--nav-menu-open,
body.body--nav-menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.body--nav-menu-open {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

/* Logo: mark | divider | wordmark. Each part holds both colour versions
   stacked in one cell; the navy-hero version shows at rest, the cream-bar
   version when the bar turns cream (scrolled / light-hero pages / open
   mobile menu), cross-fading with the bar's 0.3s transition. */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 17px;
  flex-shrink: 0;
  /* The bar is 72px incl. a 1px bottom border (71px to centre in); this
     half-pixel nudge keeps the logo images on whole pixels, so edges stay crisp */
  margin-bottom: 1px;
}

.site-header__logo-part {
  display: grid;
}

.site-header__logo-img {
  grid-area: 1 / 1;
  display: block;
  width: auto;
  max-width: none;
  transition: opacity 0.3s ease;
}

.site-header__logo-part--mark .site-header__logo-img {
  height: 58px;
}

/* whole-pixel box (the SVG keeps its proportions inside it) */
.site-header__logo-part--word .site-header__logo-img {
  width: 199px;
  height: 40px;
}

.site-header__logo-divider {
  flex-shrink: 0;
  width: 1px;
  height: 38px;
  background: #C8A872;
  transition: background-color 0.3s ease;
}

.site-header__logo-img--on-cream {
  opacity: 0;
}

.site-header--scrolled .site-header__logo-img--on-navy,
.site-header--light .site-header__logo-img--on-navy,
.site-header--menu-open .site-header__logo-img--on-navy {
  opacity: 0;
}

.site-header--scrolled .site-header__logo-img--on-cream,
.site-header--light .site-header__logo-img--on-cream,
.site-header--menu-open .site-header__logo-img--on-cream {
  opacity: 1;
}

.site-header--scrolled .site-header__logo-divider,
.site-header--light .site-header__logo-divider {
  background: #9C7B45;
}

/* Narrow desktops/tablets: not enough room for mark + wordmark + menu */
@media (max-width: 999px) {
  .site-header__logo-divider,
  .site-header__logo-part--word {
    display: none;
  }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.admin-badge {
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
}

.site-header__menu-toggle {
  display: none;
}

/* ---- Header navigation (shared) ---- */
.header-nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
}

.header-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nav-text);
  cursor: pointer;
  transition: color 0.3s ease;
}

.header-nav__num {
  display: none;
}

.header-nav__item--dropdown {
  position: relative;
}

.header-nav__chevron {
  width: 10px;
  height: auto;
  transition: transform 0.25s ease;
}

.header-nav__trigger[aria-expanded="true"] .header-nav__chevron {
  transform: rotate(180deg);
}

/* Mobile-only items */
.header-nav__item--home,
.header-nav__item--mail {
  display: none;
}

[data-admin-nav] .header-nav__link {
  color: var(--gold);
}

/* Language switcher: "EN · HU" in Cinzel (markup comes from i18n.js; its "|"
   separator is swapped for a middle dot here) */
.site-header .lang-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-header .lang-btn {
  padding: 4px 2px;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--nav-muted);
  cursor: pointer;
  transition: color 0.3s ease;
}

.site-header .lang-btn:hover:not(.is-active) {
  color: var(--nav-text);
}

.site-header .lang-btn.is-active {
  font-weight: 400;
  color: var(--nav-accent);
}

.site-header .lang-switcher__sep {
  font-size: 0;
  color: var(--nav-muted);
}

.site-header .lang-switcher__sep::before {
  content: '\00B7';
  font-family: var(--font-display);
  font-size: 12px;
}

/* ---- Desktop navbar ---- */
@media (min-width: 769px) {
  /* Menu links: gold underline growing from the centre on hover / current page */
  .header-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 1px;
    background: #C8A872;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
  }

  .header-nav__link:hover::after,
  .header-nav__link:focus-visible::after,
  .header-nav__link[aria-current="page"]::after,
  .header-nav__trigger.is-current::after,
  .header-nav__trigger[aria-expanded="true"]::after {
    transform: scaleX(1);
  }

  /* Contact: subtle outlined button (same type as the other links).
     Transparent bar: cream text, gold hover fill. Cream bar: navy text,
     navy hover fill. */
  .header-nav__link.header-nav__cta {
    padding: 10px 18px;
    border: 1px solid #C8A872;
    border-radius: 4px;
    color: #FBF8F2;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }

  .header-nav__link.header-nav__cta::after {
    display: none;
  }

  .header-nav__link.header-nav__cta:hover,
  .header-nav__link.header-nav__cta:focus-visible {
    background-color: #C8A872;
    color: #11223A;
  }

  .site-header--scrolled .header-nav__link.header-nav__cta,
  .site-header--light .header-nav__link.header-nav__cta {
    color: #11223A;
  }

  .site-header--scrolled .header-nav__link.header-nav__cta:hover,
  .site-header--scrolled .header-nav__link.header-nav__cta:focus-visible,
  .site-header--light .header-nav__link.header-nav__cta:hover,
  .site-header--light .header-nav__link.header-nav__cta:focus-visible {
    background-color: #11223A;
    border-color: #11223A;
    color: #FBF8F2;
  }

  /* Services dropdown: frosted cream glass in both navbar states, solid
     cream without backdrop-filter support */
  .header-nav__dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: -28px;
    width: 290px;
    padding: 12px 0 14px;
    background-color: #FBF8F2;
    border: 1px solid rgba(17, 34, 58, 0.08);
    border-top-color: rgba(255, 255, 255, 0.85);
    border-left-color: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 22px 44px -20px rgba(17, 34, 58, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 120;
  }

  /* Frosted cream glass, navy text. Dense enough (92%) to stay readable over
     the dark sections and the footer once the bar is cream. */
  @supports ((-webkit-backdrop-filter: blur(13px)) or (backdrop-filter: blur(13px))) {
    .header-nav__dropdown {
      background-color: rgba(251, 248, 242, 0.92);
      -webkit-backdrop-filter: blur(13px);
      backdrop-filter: blur(13px);
    }
  }

  /* Gold hairline along the top, fading out at both ends */
  .header-nav__dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #C8A872, transparent);
  }

  /* Invisible bridge over the 14px gap above the card, so moving the mouse
     from Services down into the dropdown never leaves the hover area */
  .header-nav__dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 16px;
  }

  .header-nav__dropdown.is-open {
    opacity: 1;
    visibility: visible;
  }

  .header-nav__dropdown-link {
    display: block;
    padding: 9px 28px;
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #11223A;
    white-space: nowrap;
    transition: color 0.3s ease, background-color 0.3s ease, text-shadow 0.3s ease;
  }

  .header-nav__dropdown-link:hover,
  .header-nav__dropdown-link:focus-visible,
  .header-nav__dropdown-link[aria-current="page"] {
    color: #8F7440;
    background-color: rgba(200, 168, 114, 0.1);
  }
}

/* Group label (non-clickable), desktop dropdown and mobile accordion */
.header-nav__dropdown li.header-nav__dropdown-label {
  position: relative;
  padding: 10px 28px 6px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8F7440;
  white-space: nowrap;
  cursor: default;
}

/* The only divider: between the two groups, inset like the labels */
.header-nav__dropdown li + li.header-nav__dropdown-label {
  margin-top: 10px;
  padding-top: 18px;
}

.header-nav__dropdown li + li.header-nav__dropdown-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: rgba(200, 168, 114, 0.35);
  transition: background-color 0.3s ease;
}

.header-nav__dropdown li.header-nav__dropdown-label {
  transition: color 0.3s ease;
}

/* Desktop dropdown: Brand Design is a single link under the divider (no
   group heading), with a small "Coming soon" tag. The heading stays in the
   markup for the mobile accordion. */
@media (min-width: 769px) {
  .header-nav__dropdown li.header-nav__dropdown-label--brand {
    display: none;
  }

  .header-nav__dropdown li.header-nav__dropdown-item--brand {
    position: relative;
    margin-top: 10px;
    padding-top: 10px;
  }

  .header-nav__dropdown li.header-nav__dropdown-item--brand::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28px;
    right: 28px;
    height: 1px;
    background: rgba(200, 168, 114, 0.35);
  }

  .header-nav__dropdown-tag {
    margin-left: 8px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-text);
    text-shadow: none;
    vertical-align: 1px;
  }

  /* Navbar at rest over the dark hero: the dropdown turns navy glass with
     cream links and gold accents. Once the bar goes cream (scrolled /
     light-hero pages) it falls back to the cream glass above. */
  .site-header:not(.site-header--scrolled):not(.site-header--light) .header-nav__dropdown {
    background-color: rgba(17, 34, 58, 0.45);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-color: rgba(200, 168, 114, 0.18);
    box-shadow: 0 22px 44px -20px rgba(4, 10, 20, 0.45);
  }

  .site-header:not(.site-header--scrolled):not(.site-header--light) .header-nav__dropdown-link {
    color: #FBF8F2;
  }

  .site-header:not(.site-header--scrolled):not(.site-header--light) .header-nav__dropdown-link:hover,
  .site-header:not(.site-header--scrolled):not(.site-header--light) .header-nav__dropdown-link:focus-visible,
  .site-header:not(.site-header--scrolled):not(.site-header--light) .header-nav__dropdown-link[aria-current="page"],
  .site-header:not(.site-header--scrolled):not(.site-header--light) .header-nav__dropdown li.header-nav__dropdown-label,
  .site-header:not(.site-header--scrolled):not(.site-header--light) .header-nav__dropdown-tag {
    color: #C8A872;
  }

  .site-header:not(.site-header--scrolled):not(.site-header--light) .header-nav__dropdown-link:hover,
  .site-header:not(.site-header--scrolled):not(.site-header--light) .header-nav__dropdown-link:focus-visible,
  .site-header:not(.site-header--scrolled):not(.site-header--light) .header-nav__dropdown-link[aria-current="page"] {
    background-color: rgba(200, 168, 114, 0.08);
  }

  .site-header:not(.site-header--scrolled):not(.site-header--light) .header-nav__dropdown li + li.header-nav__dropdown-label::before,
  .site-header:not(.site-header--scrolled):not(.site-header--light) .header-nav__dropdown li.header-nav__dropdown-item--brand::before {
    background: rgba(200, 168, 114, 0.28);
  }
}

@media (max-width: 768px) {
  .header-nav__dropdown-tag {
    display: none;
  }
}

/* ---- Mobile header + full-screen menu ---- */
@media (max-width: 768px) {
  .site-header {
    padding: 0 24px;
  }

  /* Mobile header: the mark only */
  .site-header__logo-divider,
  .site-header__logo-part--word {
    display: none;
  }

  .site-header__logo-part--mark .site-header__logo-img {
    height: 44px;
  }

  .site-header__actions {
    gap: 14px;
  }

  /* Closed: logo + hamburger only (the language switcher lives in the menu) */
  .site-header__menu-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #C8A872;
    cursor: pointer;
  }

  .site-header--scrolled .site-header__menu-toggle,
  .site-header--light .site-header__menu-toggle {
    color: #11223A;
  }

  .site-header__menu-toggle-line {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .header-nav {
    display: none;
  }

  /* Open: cream full-screen panel under a cream top row (logo + close) */
  .site-header.site-header--menu-open {
    --nav-text: #11223A;
    --nav-muted: rgba(17, 34, 58, 0.55);
    --nav-accent: #9C7B45;
    background-color: #FBF8F2;
    /* backdrop-filter would make the fixed panel below relative to the bar */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: rgba(200, 168, 114, 0.45);
    box-shadow: none;
    transition: none;
  }

  .site-header--menu-open::before,
  .site-header--menu-open::after {
    opacity: 0;
    transition: none;
  }

  /* Open menu (cream): the navy mark, 40px */
  .site-header--menu-open .site-header__logo-part--mark .site-header__logo-img {
    height: 40px;
  }

  .site-header--menu-open .site-header__logo-img {
    transition: none;
  }

  .site-header--menu-open .site-header__menu-toggle {
    color: #11223A;
  }

  .site-header--menu-open .site-header__menu-toggle-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .site-header--menu-open .site-header__menu-toggle-line:nth-child(2) {
    opacity: 0;
  }

  .site-header--menu-open .site-header__menu-toggle-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .site-header--menu-open .header-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 8px 24px 32px;
    background: #FBF8F2;
    overflow-y: auto;
  }

  .site-header--menu-open .header-nav__list {
    flex: 1 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-header--menu-open .header-nav__item {
    display: block;
    width: 100%;
    border-bottom: 1px solid rgba(200, 168, 114, 0.3);
  }

  .site-header--menu-open .header-nav__item[hidden] {
    display: none;
  }

  /* Order in the menu: Home, Services, About Us, then Contact, e-mail, language */
  .site-header--menu-open .header-nav__item--home { order: 1; }
  .site-header--menu-open .header-nav__item--dropdown { order: 2; }
  .site-header--menu-open .header-nav__item--about { order: 3; }
  .site-header--menu-open .header-nav__item--contact { order: 4; }
  .site-header--menu-open .header-nav__item--mail { order: 5; }
  .site-header--menu-open .header-nav__item--lang { order: 6; }

  .site-header--menu-open .header-nav__link {
    display: flex;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    padding: 20px 0;
    font-size: 19px;
    letter-spacing: 0.06em;
    text-transform: none;
    text-align: left;
    color: #11223A;
  }

  .site-header--menu-open .header-nav__num {
    display: inline-block;
    min-width: 1.7em;
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: #8F7440;
  }

  /* Services accordion: thin +/− on the right (vertical stroke hides when open) */
  .site-header--menu-open .header-nav__chevron {
    display: none;
  }

  .site-header--menu-open .header-nav__trigger {
    padding-right: 32px;
  }

  .site-header--menu-open .header-nav__trigger::before,
  .site-header--menu-open .header-nav__trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 4px;
    background: #11223A;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .site-header--menu-open .header-nav__trigger::before {
    width: 13px;
    height: 1px;
    margin-top: -0.5px;
  }

  .site-header--menu-open .header-nav__trigger::after {
    width: 1px;
    height: 13px;
    margin-top: -6.5px;
    right: 10px;
  }

  .site-header--menu-open .header-nav__trigger[aria-expanded="true"]::after {
    transform: scaleY(0);
    opacity: 0;
  }

  .site-header--menu-open .header-nav__dropdown {
    position: static;
    width: auto;
    margin: 0;
    padding: 0 0 18px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }

  .site-header--menu-open .header-nav__dropdown li.header-nav__dropdown-label {
    padding: 10px 0 6px 31px;
    white-space: normal;
  }

  .site-header--menu-open .header-nav__dropdown li + li.header-nav__dropdown-label {
    margin-top: 8px;
    padding-top: 16px;
  }

  .site-header--menu-open .header-nav__dropdown li + li.header-nav__dropdown-label::before {
    left: 31px;
    right: 0;
  }

  .site-header--menu-open .header-nav__dropdown-link {
    display: block;
    padding: 7px 0 7px 31px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #11223A;
  }

  .site-header--menu-open .header-nav__dropdown-link:hover,
  .site-header--menu-open .header-nav__dropdown-link[aria-current="page"] {
    color: #8F7440;
  }

  /* Bottom: navy Contact pill, e-mail, language switcher */
  .site-header--menu-open .header-nav__item--contact {
    margin-top: auto;
    padding-top: 36px;
    border-bottom: 0;
  }

  .site-header--menu-open .header-nav__link.header-nav__cta {
    justify-content: center;
    padding: 15px 20px;
    border: 1px solid #11223A;
    border-radius: 999px;
    background: #11223A;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: #FBF8F2;
  }

  .site-header--menu-open .header-nav__cta .header-nav__num {
    display: none;
  }

  .site-header--menu-open .header-nav__item--mail {
    display: block;
    padding-top: 16px;
    border-bottom: 0;
    text-align: center;
  }

  .header-nav__mail {
    font-family: var(--font-sans);
    font-size: 13px;
    color: rgba(17, 34, 58, 0.6);
  }

  .site-header--menu-open .header-nav__item--lang {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    border-bottom: 0;
  }

  .site-header--menu-open .lang-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---- Service pages (PPC Training, etc.) ---- */
.service-page {
  width: 100%;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 0.5px solid rgba(var(--navy-rgb), 0.15);
  background: #fff;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(var(--navy-rgb), 0.4);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: rgba(var(--gold-rgb), 0.6);
}

/* ---- Account Audit & PPC Training pages — matches main page patterns ---- */
.service-page--audit {
  --audit-text-max: var(--shell-content);
  background: var(--cream);
}

/* PPC Consultancy — FAQ body text (matches PPC Mentoring sizes) */

body:has(.service-page--consultancy) :is(.nav-panel__title, .contact-panel__next-title) {
  font-family: var(--font-display);
}

.service-page--standalone {
  padding-top: var(--header-height);
}

.contact-page {
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.service-page--audit {
  --audit-fs-hero-title: clamp(1.625rem, 3.4vw, 2.5rem);
  --audit-fs-section-title: clamp(1.625rem, 4vw, 2.65rem);
  --audit-fs-intro-heading: clamp(1.5rem, 2.9vw, 2rem);
  --audit-fs-body: clamp(0.875rem, 1.25vw, 0.9375rem);
  --audit-fs-body-lg: clamp(0.875rem, 1.3vw, 0.9375rem);
  --audit-fs-lead: clamp(0.9rem, 1.45vw, 1rem);
  --audit-fs-eyebrow: 0.875rem;
  --audit-fs-small: 0.6875rem;
  --audit-fs-feature: 0.875rem;
  --audit-fs-note: 0.625rem;
}

/* PPC Mentoring — Pricing */

.service-page--audit .audit-intro__highlight {
  font-weight: 600;
  color: var(--gold);
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  overflow: hidden;
  background: var(--navy);
  padding: var(--header-height) 40px 0;
  box-sizing: border-box;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  order: 1;
  width: max-content;
  max-width: 38.75rem;
  padding: 48px 0 24px;
}

.hero__tagline {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}

.hero__intro {
  margin-bottom: 36px;
  width: 100%;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12em;
}

.hero__headline-main {
  color: var(--cream);
}

.hero__headline-accent {
  color: var(--gold);
}

.hero__divider {
  width: min(100%, 300px);
  height: 1px;
  margin: 28px 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--gold-rgb), 0.35) 8%,
    var(--gold) 50%,
    rgba(var(--gold-rgb), 0.35) 92%,
    transparent
  );
  position: relative;
}

.hero__divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

.hero__subheadline {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--cream-dim);
  max-width: 34ch;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hero__cta:hover {
  background-color: var(--navy);
  color: var(--gold);
  border-color: var(--gold);
}

.hero__cta-arrow {
  flex-shrink: 0;
}

.hero__cta.is-calendly-loading {
  cursor: wait;
  opacity: 0.85;
}

.hero__cta.is-calendly-loading .hero__cta-arrow {
  visibility: hidden;
  width: 0;
  margin: 0;
}

.hero__cta-spinner {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1.5px solid rgba(var(--gold-rgb), 0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: hero-cta-spin 0.7s linear infinite;
}

@keyframes hero-cta-spin {
  to { transform: rotate(360deg); }
}

/* ---- Reusable buttons/links (site-wide) ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--navy);
}

/* Alias of the existing outlined .hero__cta look, kept independent so it
   can be reused without touching .hero__cta itself. */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--gold-light);
  text-decoration: underline;
}

.link-arrow__arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.link-arrow:hover .link-arrow__arrow,
.link-arrow:focus-visible .link-arrow__arrow {
  transform: translateX(3px);
}

/* Modifier for light backgrounds — resolves to whichever --gold-dark
   is in scope (root #a8894f, or a section-local override). */
.link-arrow--dark-gold {
  color: var(--gold-text);
}

.link-arrow--dark-gold:hover,
.link-arrow--dark-gold:focus-visible {
  color: var(--navy);
}

.hero__bottom {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 0 0 100%;
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 40px 0;
}

.hero-trust-band {
  width: 100%;
  max-width: 620px;
  display: block;
}

.hero-trust-band__content {
  display: block;
  width: 100%;
}

.hero__trust-line {
  width: 100%;
  height: 1px;
  background: rgba(var(--cream-rgb), 0.35);
  margin-bottom: 24px;
}

@media (min-width: 769px) {
  .hero-trust-band {
    max-width: min(calc(100vw - 80px), 900px);
  }

  .hero__bottom {
    padding-top: 28px;
  }

  .hero__trust-line {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    position: static;
    left: auto;
    transform: none;
  }
}

/* ---- Sections ---- */
.section {
  padding: 7.5rem 0;
  text-align: center;
}

.section__heading {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 64px;
  text-align: center;
}

/* ---- Sound familiar ---- */
.familiar {
  background: var(--navy);
  padding-top: 48px;
}

.familiar__heading {
  font-family: var(--font-display);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 48px;
}

.familiar__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 57.5rem;
  margin: 0 auto;
}

#familiar .familiar__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
  max-width: var(--shell-content);
}

/* ---- Services Grid ---- */
.services {
  background: var(--navy) url('assets/thirdPartBG.webp') center / cover no-repeat;
  color: var(--navy);
}

.services__heading {
  font-family: var(--font-display);
  color: var(--gold);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--shell-default);
  margin: 0 auto;
}

/* Homepage: match section typography below Services */
#ad-management .ad-mgmt__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: 0.02em;
}

#ad-management .ad-mgmt__intro p {
  font-size: clamp(0.9375rem, 1.4vw, 1rem);
  line-height: 1.65;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100%;
  padding: 0;
  text-align: center;
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: 8px;
  background: var(--navy);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition-fast);
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--gold-rgb), 0.4);
}

.service-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding: 28px 28px 36px;
}

.service-card__desc {
  font-size: clamp(0.9375rem, 1.4vw, 1rem);
  color: var(--cream-dim);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 21.25rem;
}

/* ---- Promises ---- */
.promises {
  position: relative;
  overflow: hidden;
  background-color: var(--cream);
  color: var(--navy);
  padding: 6.25rem 0;
}

.promises::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: min(520px, 50vw);
  height: min(520px, 50vw);
  pointer-events: none;
  transform: translate(0, -50%) scale(1);
  transform-origin: left center;
}

.promises > .container {
  position: relative;
  z-index: 1;
}

.promises__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
  max-width: var(--shell-default);
  margin: 0 auto 48px;
  list-style: none;
}

/* ---- Ad Management ---- */
.ad-mgmt {
  position: relative;
  padding: 6.25rem 0 5rem;
  background-color: var(--navy);
  color: var(--cream);
  text-align: center;
}

.ad-mgmt::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/lookingForBG.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  opacity: 0.5;
  pointer-events: none;
}

.ad-mgmt__inner {
  position: relative;
  z-index: 1;
  max-width: var(--shell-content);
  margin: 0 auto;
}

.ad-mgmt__title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin-bottom: 32px;
  color: var(--cream);
}

.ad-mgmt__intro {
  max-width: 40rem;
  margin: 0 auto 64px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ad-mgmt__intro p {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.7;
  color: var(--cream-dim);
}

/* ---- Team section ---- */
.team-section {
  padding: 6.25rem 0;
  background: var(--navy);
  color: var(--cream);
  text-align: center;
}

#team.team-section {
  position: relative;
  background-color: var(--cream);
  color: var(--navy);
}

#team.team-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/whiteBG2.webp');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
  pointer-events: none;
}

.team-section__inner {
  max-width: var(--shell-reading);
  margin: 0 auto;
}

#team .team-section__inner {
  position: relative;
  z-index: 1;
}

/* ---- Content blocks ---- */
.content-block {
  padding: 6.25rem 0;
  text-align: center;
}

/* Closing Fit CTA — shared by home #get-in-touch and About (cream + learnedBG).
   Lifted from home-page.css so pages that don't load home-page.css match.
   ID-qualified selectors beat legacy #get-in-touch size rules in this file. */
.content-block--fit-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--cream);
  background-image: none;
  color: var(--navy);
  text-align: center;
}

.content-block--fit-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('assets/whiteBG2.webp');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
  opacity: 1;
}

.content-block--fit-cta .content-block__inner {
  position: relative;
  z-index: 1;
  max-width: 45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px) {
  .content-block--fit-cta {
    overflow-x: clip;
    padding: clamp(64px, 14vw, 80px) 0;
  }
}

.content-block__inner {
  max-width: 720px;
  margin: 0 auto;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 40px;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  text-align: center;
}

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .promises__list {
    grid-template-columns: repeat(2, 1fr);
    max-width: 960px;
  }

  .services__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .content-block {
    padding: 80px 0;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 24px;
  }

  .services__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .content-block {
    padding: 64px 0;
  }

  .team-section {
    padding: 72px 0;
  }

  .ad-mgmt {
    padding: 72px 0 56px;
  }

  .promises {
    padding: 72px 0;
  }

  .promises__list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .familiar {
    padding-top: 32px;
  }

  #familiar .familiar__list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero__content {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .hero__bottom {
    padding: 0;
  }

  .hero-trust-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-height: clamp(200px, 52vw, 260px);
  }

  .hero__trust-line {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
  }

  .hero-trust-band__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .service-card__body {
    padding: 24px 20px 32px;
  }

  .hero__headline {
    font-size: clamp(1.2rem, 5.6vw, 1.75rem);
  }
}

/* Homepage: slightly smaller typography (scoped to main, service/About panels unaffected) */
main .hero__tagline,
main .hero__cta {
  font-size: 0.6875rem;
}

main .hero__subheadline {
  font-size: clamp(0.9rem, 1.45vw, 1.05rem);
}

main .section__heading {
  font-size: clamp(1.5rem, 3.5vw, 2.15rem);
}

main .service-card__desc {
  font-size: clamp(0.875rem, 1.25vw, 0.9375rem);
}

main #ad-management .ad-mgmt__title {
  font-size: clamp(1.5rem, 3.5vw, 2.15rem);
}

main #ad-management .ad-mgmt__intro p {
  font-size: clamp(0.875rem, 1.25vw, 0.9375rem);
}

/* Account Audit page: slightly smaller typography */

.service-page--audit .hero__tagline {
  font-size: var(--audit-fs-small);
}

.service-page--audit .hero__subheadline {
  font-size: var(--audit-fs-lead);
}

.service-page--audit .hero__cta {
  font-size: var(--audit-fs-small);
}

.service-page--audit .ad-mgmt__title {
  font-size: var(--audit-fs-section-title);
}

.service-page--audit .ad-mgmt__intro p {
  font-size: var(--audit-fs-body-lg);
}

/* Slightly smaller section titles across the audit page */
.service-page--audit .ad-mgmt__title {
  font-size: clamp(1.375rem, 3.2vw, 2.15rem);
}

/* Homepage hero: mobile-specific readability + tap targets */
@media (max-width: 768px) {
  main .hero__content {
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    text-align: left;
    padding: 0;
  }

  main .hero__headline {
    line-height: 1.2;
  }

  main .hero__subheadline {
    font-size: clamp(0.95rem, 2.8vw, 1.125rem);
    max-width: 40ch;
  }

  main .hero__cta {
    /* Keep it clearly tappable on touch devices */
    font-size: 0.75rem;
    padding: 16px 28px;
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* Homepage: Sound familiar section mobile tweaks */
@media (max-width: 768px) {
  #familiar .familiar__heading {
    margin-bottom: 32px;
    line-height: 1.15;
    font-size: clamp(1.35rem, 6.5vw, 1.8rem);
  }

  /* Collapse 2-column grid into 1 column */
  #familiar .familiar__list {
    grid-template-columns: 1fr;
    gap: 20px 0;
    max-width: 680px;
  }

  /* If the section ever includes a button, ensure it remains tappable */
  #familiar .btn,
  #familiar button {
    min-height: 44px;
    padding: 14px 28px;
    touch-action: manipulation;
  }
}

/* Homepage: Where do you need help? section mobile tweaks */
@media (max-width: 768px) {
  #services .services__grid {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: none;
    width: 100%;
  }

  #services .service-card {
    width: 100%;
  }

  #services .service-card__body {
    align-items: center;
    text-align: center;
    padding: 24px 20px 28px;
  }

  #services .service-card__desc {
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    font-size: clamp(0.9375rem, 3.6vw, 1rem);
    line-height: 1.7;
  }
}

/* Homepage: Ad management section mobile tweaks */
@media (max-width: 768px) {
  #ad-management .ad-mgmt__title {
    /* Prevent the heading from feeling oversized on narrow screens */
    font-size: clamp(1.45rem, 5.2vw, 2.05rem);
    line-height: 1.2;
    padding: 0 16px;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
  }

  #ad-management .ad-mgmt__intro {
    max-width: 56ch;
    margin: 0 auto 48px;
    padding: 0 16px;
  }

  #ad-management .ad-mgmt__intro p {
    font-size: clamp(0.95rem, 3.2vw, 1.05rem);
    line-height: 1.75;
  }

  /* Fix background image cover/focus on mobile */
  #ad-management::before {
    background-size: cover !important;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

/* Homepage: What we've learned section mobile tweaks */
@media (max-width: 768px) {
  #team.team-section {
    /* Give the background a bit more breathing room */
    padding: 80px 0;
    min-height: auto;
  }

  #team.team-section::before {
    background-size: auto !important;
    background-position: top left;
    background-repeat: repeat;
    background-attachment: scroll;
  }

  #team .team-section__inner {
    max-width: 680px;
    padding: 0 16px;
  }
}

/* Hero: mobile — text only, illustration hidden */
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-height: auto;
    overflow: visible;
    padding: calc(var(--header-height) + 32px) 24px 40px;
  }

  .hero__content {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    text-align: left;
    padding: 0;
    margin-bottom: 0;
  }

  .hero__bottom {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    order: 2;
    padding: 40px 0 0;
  }

  .hero-trust-band {
    max-width: 100%;
  }
}

/* Hero: very narrow phones */
@media (max-width: 400px) {
  .hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero__headline,
  main .hero__headline {
    font-size: clamp(1.05rem, 4.8vw, 1.45rem);
    overflow-wrap: break-word;
  }

  .hero__cta {
    max-width: 100%;
  }
}

/* ==========================================================================
   PPC Mentoring page — enhancements (icons, motion, micro-interactions)
   Scoped to .service-page--training only
   ========================================================================== */

/* ==========================================================================
   PPC Consultancy page — enhancements (icons, motion, micro-interactions)
   Scoped to .service-page--consultancy only
   ========================================================================== */

/* ==========================================================================
   Ad Management page — enhancements (icons, motion, micro-interactions)
   Scoped to .service-page--ad-mgmt only
   ========================================================================== */

/* ==========================================================================
   PPC Consultancy (.service-page--consultancy) — late-win overrides
   ========================================================================== */

/* ==========================================================================
   Contact page (.contact-page) — mobile-only (max-width: 768px)
   contact.html / kapcsolat. Desktop >=769px untouched.

   1) Inputs/textarea/select used clamp(0.6875rem, 0.8vw, 0.75rem), which
      resolves to 11px on mobile — below the 16px iOS Safari needs to
      avoid auto-zooming a field on focus. Bumping to 16px also pushes
      the auto height comfortably past the 44px tap-target minimum
      (measured 42.5px at 11px), so no separate height rule is needed.

   Selectors repeat `.contact-page` to out-specificity contact-page.css's
   equal-specificity rules (loaded after styles.css) — same late-win
   pattern as the #familiar.home-familiar block above.
   ========================================================================== */
@media (max-width: 768px) {
  .contact-page.contact-page {
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
  }
}

/* ==========================================================================
   Wide screens (1600px+) — hero columns, section rhythm
   (shell tokens now rem-based in :root; grow via html font-size)
   ========================================================================== */
@media (min-width: 1600px) {
  /* Hero content columns (~15% wider; rem so they scale with root) */
  .hero__content {
    max-width: 44.7rem;
  }

  /* home-page.css loads after styles.css — raise specificity so this wins */
  html .home-page .hero__content {
    max-width: min(72rem, 90%);
  }
}

/* Proportional root font-size scaling on wide screens */
@media (min-width: 1600px) { html { font-size: 18px; } }
@media (min-width: 2000px) { html { font-size: 20px; } }
@media (min-width: 2600px) { html { font-size: 22px; } }
@media (min-width: 3200px) { html { font-size: 24px; } }

/* ==========================================================================
   Service page redesign — reusable section components (.svc-*)
   Scoped under .svc-page. Built for Account Audit; intended for reuse on
   PPC Mentoring, PPC Consultancy and Ad Management once they're redesigned.
   Kept in this file (not a separate stylesheet) because only styles.css,
   home-page.css and a few named CSS files are on server.js's static-file
   allow-list.
   ========================================================================== */

.svc-page {
  /* Shadows the sitewide --gold-dark (#a8894f) within this page only, same
     pattern home-page.css uses per homepage section — this page's light
     backgrounds want the slightly deeper #9A7843. */
  --gold-dark: #9A7843;
  --gold-dark-rgb: 154, 120, 67;
  position: relative;
  /* One continuous sand surface behind every light section — light
     sections below are transparent so this single tile shows through with
     no seam at section boundaries (same technique as .home-page). */
  background-color: #F7F4EE;
  background-image: url('/assets/bg-sand.webp');
  background-repeat: repeat;
  background-size: 512px 768px;
  background-attachment: scroll;
}

/* Generous vertical rhythm, shared by every section except the hero (which
   sizes itself via min-height) and the FAQ (slightly less top padding since
   it follows directly after the CTA band). */
.svc-page .svc-section {
  padding: clamp(44px, 4.75vw, 65px) 0;
}

@media (max-width: 767px) {
  .svc-page .svc-section {
    padding: 32px 0;
  }

  /* Mentoring: more vertical breathing room on mobile for every section
     below the hero (and with it, around the dividers): the shared values
     +25%, then +20px each: 32→60, 40→70, 52→85, 56→90. */
  .svc-page.svc-page--mentoring > .svc-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .svc-page.svc-page--mentoring > .svc-statement {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .svc-page.svc-page--mentoring > .svc-split:not(.svc-split--intro) {
    padding-bottom: 85px;
  }

  .svc-page.svc-page--mentoring > .svc-faq {
    padding-top: 90px;
  }
}

/* Gold divider-with-diamond between two consecutive light sections — same
   motif as .home-cream-divider (home-page.css), recreated here so this file
   has no dependency on home-page.css. */
.svc-page .svc-divider {
  width: 120px;
  height: 1px;
  margin: 0 auto;
  background: rgba(var(--gold-dark-rgb), 0.3);
  position: relative;
}

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

/* Keyboard focus for links, buttons and FAQ items inside any .svc-*
   component: thin dark-gold outline, keyboard only (:focus-visible). */
.svc-page :is([class^='svc-'], [class*=' svc-']) :is(a, button, [tabindex]):focus-visible,
.svc-page :is(a, button)[class*='svc-']:focus-visible {
  outline: 1px solid #9A7843;
  outline-offset: 3px;
}

/* ==========================================================================
   1. Hero (.svc-hero)
   ========================================================================== */
.svc-page .svc-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  overflow: hidden;
  background-color: #11223A;
  color: #FFFFFF;
  text-align: center;
  padding: 24px clamp(24px, 4vw, 40px) 0;
}

/* Photo + navy overlay, same layered technique as .home-page .hero::before
   but a diagonal gradient (darkest behind the centred text, lighter toward
   the upper right where the magnifying glass sits) instead of a vertical wash. */
.svc-page .svc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(45deg, rgba(var(--navy-rgb), 0.85) 15%, rgba(var(--navy-rgb), 0.55) 45%, rgba(var(--navy-rgb), 0.1) 80%),
    url('/assets/audit-hero-desktop.webp');
  background-size: 100% 100%, cover;
  background-position: center, right top;
  background-repeat: no-repeat, no-repeat;
  pointer-events: none;
}

.svc-page .svc-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--shell-default);
  padding-top: clamp(32px, 6vw, 56px);
  padding-bottom: clamp(24px, 4vw, 40px);
}

.svc-page .svc-hero__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Capped + balanced so both EN and HU break into two even lines. */
.svc-page .svc-hero__title {
  max-width: 760px;
  margin: 16px auto 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-wrap: balance;
}

.svc-page .svc-hero__divider {
  margin: 22px auto 0;
}

.svc-page .svc-hero__subtitle {
  margin: 22px 0 0;
  max-width: 600px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: #FFFFFF;
}

.svc-page .svc-hero__cta {
  margin-top: 36px;
}

.svc-page .svc-hero__bottom {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: clamp(40px, 6vw, 64px);
}

/* ==========================================================================
   Hero ticker (shared component): the slow-drifting marquee strip at the
   bottom of the homepage hero and the Account Audit hero. Centred band up
   to 1000px wide with a thin divider line (up to 960px) above it. The track
   holds the item list twice; translateX 0 -> -50% loops seamlessly since
   both copies are pixel-identical, including the trailing separator's
   margin standing in for the track's own (zero) gap. The second copy is
   aria-hidden, the strip pauses on hover, and with reduced motion it becomes
   a static, centred, wrapping row. Used by the homepage hero and every
   service-page hero that has a ticker.
   ========================================================================== */
.hero-ticker {
  width: 100%;
  max-width: min(1000px, 100%);
  margin-inline: auto;
}

/* Divider line above the strip (the homepage keeps its own .hero__trust-line
   with the same values) */
.hero-ticker__line {
  max-width: 960px;
  height: 1px;
  margin: 0 auto 24px;
  background: rgba(255, 255, 255, 0.12);
}

.hero-ticker .hero-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.hero-ticker .hero-marquee__track {
  display: flex;
  width: max-content;
  animation: hero-marquee-scroll 74s linear infinite;
}

.hero-ticker .hero-marquee:hover .hero-marquee__track {
  animation-play-state: paused;
}

.hero-ticker .hero-marquee .hero-marquee__list {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 232, 218, 0.72);
  text-align: center;
  white-space: normal;
}

.hero-ticker .hero-marquee .hero-marquee__list > li:last-child {
  margin-right: 16px;
}

.hero-ticker .hero-strip__item {
  white-space: nowrap;
}

.hero-ticker .hero-strip__sep {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #C8A872;
  transform: rotate(45deg);
  font-size: 0;
  line-height: 0;
  flex-shrink: 0;
}

@keyframes hero-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .hero-ticker .hero-marquee__track {
    animation-duration: 57s;
  }

  /* The track's intrinsic width (width: max-content, holding the list
     twice) is thousands of px wide even though the visible column is
     narrow. Mobile WebKit/Blink's automatic text-size-adjust "boosts"
     small text sized against that wide intrinsic box — this disables that
     boost so the mobile size matches desktop exactly. */
  .hero-ticker .hero-marquee .hero-marquee__list {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* Reduced motion: no scroll — all items as a static, centred, wrapping row. */
@media (prefers-reduced-motion: reduce) {
  .hero-ticker .hero-marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .hero-ticker .hero-marquee__track {
    animation: none;
    transform: none;
    width: 100%;
    justify-content: center;
  }

  .hero-ticker .hero-marquee .hero-marquee__list[aria-hidden='true'] {
    display: none;
  }

  .hero-ticker .hero-marquee .hero-marquee__list:not([aria-hidden]) {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
  }

  /* no trailing diamond at the end of the static row */
  .hero-ticker .hero-marquee .hero-marquee__list:not([aria-hidden]) > li:last-child {
    margin-right: 0;
  }

  .hero-ticker .hero-marquee .hero-marquee__list:not([aria-hidden]) > li.hero-strip__sep:last-child {
    display: none;
  }
}

/* Service-page heroes: their own vertical rhythm around the ticker */
.svc-page .svc-hero__bottom .hero-ticker {
  padding-bottom: clamp(20px, 3vw, 28px);
}

.svc-page .svc-hero__bottom .hero-ticker__line {
  margin-bottom: clamp(20px, 3vw, 28px);
}

@media (max-width: 768px) {
  /* +40px of height (not padding: the hero sits at its min-height with free
     space, so padding would only lift the USP strip) — the bottom-anchored
     magnifying glass moves 40px further away from the button. */
  .svc-page .svc-hero {
    min-height: 660px;
    justify-content: space-between;
    padding: 20px 20px 0;
  }

  /* ?v= busts the cache for the replaced mobile image. */
  .svc-page .svc-hero::before {
    background-image:
      linear-gradient(to bottom, rgba(var(--navy-rgb), 0.85), rgba(var(--navy-rgb), 0.5) 40%, rgba(var(--navy-rgb), 0.15) 70%),
      url('/assets/audit-hero-mobile.webp?v=3');
    background-size: 100% 100%, cover;
    background-position: center, right bottom;
  }

  .svc-page .svc-hero__inner {
    max-width: 100%;
  }

  .svc-page .svc-hero__title {
    font-size: clamp(22px, 7vw, 26px);
  }

  .svc-page .svc-hero__subtitle {
    font-size: 14px;
  }
}

/* Mentoring hero: one photo (navy desk, notebook bottom right) for both
   languages and all widths, no overlay — the photo is dark enough behind
   the centred text. Anchored bottom right so the notebook stays in view as
   the hero narrows. Preloaded in ppc-mentoring.html. */
.svc-page .svc-hero--mentoring::before {
  background-image: url('/assets/mentoring-hero-notebook.webp');
  background-size: cover;
  background-position: right bottom;
}

/* Narrower desktop windows (769-1099px): with cover the photo would put
   the notebook behind the end of the subtitle, so it runs full width
   instead (natural height, bottom right), on the photo's own top-edge
   navy. From 1100px, cover keeps it clear of the text. */
@media (min-width: 769px) and (max-width: 1099px) {
  .svc-page .svc-hero--mentoring {
    background-color: #04111d;
  }

  .svc-page .svc-hero--mentoring::before {
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
}

/* Narrower H1 on this page so both languages break into two balanced lines. */
.svc-page .svc-hero--mentoring .svc-hero__title {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

@media (max-width: 768px) {
  /* Same setup as the Account Audit mobile hero (the extra mobile height,
     min-height: 660px, comes from the shared .svc-hero mobile rule). */
  /* Mobile: a portrait version of the photo (notebook bottom right), cover,
     anchored to the bottom so the notebook sits below the text. */
  .svc-page .svc-hero--mentoring::before {
    background-image: url('/assets/mentoring-hero-notebook-mobile.webp');
    background-size: cover;
    background-position: center bottom;
  }

  /* Mobile fine-tuning for this page only. */
  /* Fixed ~190px of empty space between the button and the marquee line,
     so the bottom-right notebooks always sit below the button, whatever the
     text length: height follows content (no min-height free space). */
  .svc-page .svc-hero--mentoring {
    min-height: 0;
  }

  /* 150px + the fixed 40px above the marquee line = ~190px below the button. */
  .svc-page .svc-hero--mentoring .svc-hero__inner {
    padding-bottom: 150px;
  }

  .svc-page .svc-hero--mentoring .svc-hero__eyebrow {
    margin-top: 16px;
  }

  .svc-page .svc-hero--mentoring .svc-hero__title {
    font-size: clamp(19.36px, 6.16vw, 22.88px); /* shared mobile size −12% */
    text-wrap: balance;
  }

  .svc-page .svc-hero--mentoring .svc-hero__subtitle {
    font-size: 15px;
  }

  .svc-page .svc-hero--mentoring .svc-hero__cta {
    margin-top: 25px; /* 36px −30% */
    padding-left: 22px;
    padding-right: 22px;
    font-size: 11px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}

/* ==========================================================================
   2. Image + content (.svc-media)
   ========================================================================== */
.svc-page .svc-media {
  position: relative;
  overflow: hidden;
}

/* Static (not relative) so the absolutely positioned wave anchors to the
   full-bleed section, not to the centred container. */
.svc-page .svc-media__inner {
  display: flex;
  align-items: stretch;
  gap: clamp(32px, 5vw, 64px);
  max-width: var(--shell-default);
  margin: 0 auto;
  padding: 0 40px;
}

/* Same technique as .working-with-us__wave (home-page.css): anchored to the
   left edge of the viewport, natural aspect ratio, no mask. Redeclared here
   (not reused via .home-page scoping) so the homepage wave is never touched. */
.svc-page .svc-media__wave {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(26vw, 400px);
  pointer-events: none;
  z-index: 0;
}

.svc-page .svc-media__wave img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

.svc-page .svc-media__spacer {
  flex: 0 0 min(26vw, 400px);
}

.svc-page .svc-media__content {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  max-width: 560px;
  padding: clamp(24px, 4vw, 40px) 0;
  align-self: center;
}

.svc-page .svc-media__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.svc-page .svc-media__text {
  margin: 20px 0 0;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--navy);
}

.svc-page .svc-media__subheading {
  margin: 36px 0 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--gold-text);
}

.svc-page .svc-media__statements {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.svc-page .svc-media__statement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid rgba(var(--gold-rgb), 0.35);
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--navy);
}

.svc-page .svc-media__statements li:last-child {
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.35);
}

.svc-page .svc-media__diamond {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.svc-page .svc-media__muted {
  margin: 28px 0 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(var(--navy-rgb), 0.55);
}

@media (max-width: 767px) {
  .svc-page .svc-media__inner {
    flex-direction: column;
    padding: 0 20px;
    gap: 0;
  }

  /* Mobile: the side wave becomes a full-width sea band at the very top of
     the section (foam edge facing down), edge to edge past the inner's
     20px padding; the heading follows with the normal 32px section spacing. */
  .svc-page .svc-media {
    padding-top: 0;
  }

  .svc-page .svc-media__wave {
    position: static;
    width: auto;
    height: auto;
    margin: 0 -20px;
    aspect-ratio: 1376 / 600;
    background: url('/assets/wave-edge-mobile-a-soft.webp') center / 100% 100% no-repeat;
  }

  .svc-page .svc-media__wave img {
    display: none;
  }

  .svc-page .svc-media__spacer {
    display: none;
  }

  .svc-page .svc-media__content {
    max-width: none;
    padding: 32px 0 0;
  }
}

/* Account Audit: intro and "when an audit makes sense" side by side in a
   centred ~1060px container (no decorative left column). Desktop only; on
   mobile the columns are plain blocks, so the section stays single-column
   exactly as before and the short gold line is hidden. */
.svc-page .svc-media__line {
  display: none;
}

@media (min-width: 768px) {
  .svc-page .svc-media--split .svc-media__inner {
    display: block;
    max-width: calc(1060px + 80px); /* + the 40px side padding */
  }

  .svc-page .svc-media--split .svc-media__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(48px, 7vw, 90px);
    align-items: start;
    max-width: none;
  }

  .svc-page .svc-media--split .svc-media__line {
    display: block;
    width: 48px;
    height: 1px;
    margin-top: 22px;
    background: #C8A872;
  }

  .svc-page .svc-media--split .svc-media__line + .svc-media__text {
    margin-top: 22px;
  }

  /* Top of the subheading level with the top of the heading */
  .svc-page .svc-media--split .svc-media__subheading {
    margin-top: 0;
  }

  /* The closing note sits below both columns, centred */
  .svc-page .svc-media--split .svc-media__muted {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 760px;
    margin-top: 48px;
    text-align: center;
  }
}

/* Inline links in the muted line — same look as the .svc-split__text links. */
.svc-page .svc-media__muted a {
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.svc-page .svc-media__muted a:hover,
.svc-page .svc-media__muted a:focus-visible {
  color: var(--navy);
}

/* Shell variant (Mentoring): same edge-image technique as the Account Audit
   sea section (shared .svc-media__wave: left edge, full section height,
   natural ratio; mobile band at the top), with the mother-of-pearl images.
   Only the content column differs: it sits on the .svc-split columns
   (30% | up to 640px, same gap), aligned with the split intro paragraphs. */
.svc-page .svc-media--shell .svc-media__title + .svc-media__statements {
  margin-top: 24px;
}

@media (min-width: 768px) {
  .svc-page .svc-media--shell .svc-media__inner {
    align-items: flex-start;
    gap: clamp(24px, 4vw, 48px); /* = .svc-split__inner gap */
  }

  .svc-page .svc-media--shell .svc-media__spacer {
    flex: 0 0 30%;
  }

  /* Tapered shell: fully inside the section, a little in from its top and
     bottom (equal insets keep it vertically centred), still flush left. */
  .svc-page .svc-media--shell .svc-media__wave {
    top: 24px;
    bottom: 24px;
  }

  /* Sits on the .svc-split columns, then shifted 80px towards the shell
     (left, not margin, so its width stays exactly the same). */
  .svc-page .svc-media--shell .svc-media__content {
    flex: 1 1 50%;
    max-width: 640px;
    padding: 0;
    align-self: flex-start;
    left: -80px;
  }
}

/* Mobile: no mother-of-pearl decoration at all. Normal section spacing
   (the divider above stays visible) and the same 24px side margin as the
   other mobile sections on the page. */
@media (max-width: 767px) {
  .svc-page .svc-media--shell {
    padding-top: 32px;
  }

  .svc-page .svc-media--shell .svc-media__wave {
    display: none;
  }

  .svc-page .svc-media--shell .svc-media__inner {
    padding: 0 24px;
  }

  .svc-page .svc-media--shell .svc-media__content {
    padding: 0;
  }
}

/* ==========================================================================
   Tags (.svc-tags) — on the shared sand, centred title + intro, decorative pills
   ========================================================================== */
/* Transparent, like the other light sections: the continuous sand tile on
   .svc-page shows through, so there is no seam above or below. */
.svc-page .svc-tags {
  background: none;
  text-align: center;
}

.svc-page .svc-tags > .container {
  max-width: var(--shell-default);
}

/* Same as the other centred section titles (.svc-steps__title). */
.svc-page .svc-tags__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 28px);
  font-weight: 400;
  text-align: center;
  color: var(--navy);
}

.svc-page .svc-tags__intro {
  max-width: 60ch;
  margin: 16px auto 0;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--navy);
}

.svc-page .svc-tags__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 860px;
  margin: clamp(32px, 4vw, 40px) auto 0;
  padding: 0;
  list-style: none;
}

.svc-page .svc-tags__tag {
  padding: 8px 16px;
  border: 1px solid #9A7843;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}

@media (max-width: 768px) {
  /* Compact tag cloud: gaps −25% (16 → 12px, 32 → 24px). */
  .svc-page .svc-tags__intro {
    margin-top: 12px;
    font-size: 15px;
  }

  .svc-page .svc-tags__list {
    gap: 8px;
    margin-top: 24px;
  }

  .svc-page .svc-tags__tag {
    padding: 7px 13px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
}

/* ==========================================================================
   3. Steps (.svc-steps)
   ========================================================================== */
.svc-page .svc-steps__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 28px);
  font-weight: 400;
  text-align: center;
  color: var(--navy);
}

/* .svc-steps/.svc-panels/.svc-faq wrap a plain .container (site-wide class,
   left untouched) — scoped down to the shared shell-default standard here
   instead of duplicating max-width/padding on the inner grid too. */
.svc-page .svc-steps > .container,
.svc-page .svc-panels > .container,
.svc-page .svc-faq > .container {
  max-width: var(--shell-default);
}

/* Horizontal timeline: one CSS line behind the three steps, level with the
   dots (num 40px + dot margin 14px + half dot), fading out at both ends. */
.svc-page .svc-steps__grid {
  --svc-steps-dot: 7px;
  --svc-steps-line-y: calc(40px + 14px + var(--svc-steps-dot) / 2);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 56px);
  margin: clamp(48px, 6vw, 72px) auto 0;
}

.svc-page .svc-steps__grid::before {
  content: "";
  position: absolute;
  top: calc(var(--svc-steps-line-y) - 0.5px);
  left: -40px;
  right: -40px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 40px, var(--gold) calc(100% - 40px), transparent);
  pointer-events: none;
}

.svc-page .svc-steps__item {
  position: relative;
  text-align: center;
}

.svc-page .svc-steps__num {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-text);
}

.svc-page .svc-steps__dot {
  position: relative;
  display: block;
  width: var(--svc-steps-dot);
  height: var(--svc-steps-dot);
  margin: 14px auto 0;
  border-radius: 50%;
  background: var(--gold);
}

.svc-page .svc-steps__time {
  display: block;
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--gold-text);
}

.svc-page .svc-steps__title-sm {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--navy);
}

.svc-page .svc-steps__text {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--navy);
}

/* Mobile: compact vertical timeline — line down the left, dot level with
   each 30px number, time label on the number's line, content stacked below. */
@media (max-width: 767px) {
  .svc-page .svc-steps__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .svc-page .svc-steps__grid::before {
    top: -24px;
    bottom: -24px;
    left: calc(var(--svc-steps-dot) / 2 - 0.5px);
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom, transparent, var(--gold) 40px, var(--gold) calc(100% - 40px), transparent);
  }

  /* Number + time label share the first row; title and text wrap below. */
  .svc-page .svc-steps__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 28px;
    text-align: left;
  }

  .svc-page .svc-steps__num {
    font-size: 30px;
  }

  .svc-page .svc-steps__title-sm,
  .svc-page .svc-steps__text {
    flex: 0 0 100%;
  }

  .svc-page .svc-steps__title-sm {
    margin-top: 12px;
  }

  .svc-page .svc-steps__text {
    max-width: 36ch;
  }

  .svc-page .svc-steps__dot {
    position: absolute;
    top: calc(15px - var(--svc-steps-dot) / 2);
    left: 0;
    margin: 0;
  }

  .svc-page .svc-steps__time {
    margin: 0 0 0 10px;
  }

  .svc-page .svc-steps__time::before {
    content: '\00B7';
    margin-right: 10px;
    color: var(--gold);
    font-weight: 500;
  }
}

/* ==========================================================================
   4. Rows with navy panel (.svc-rows)
   ========================================================================== */
.svc-page .svc-rows__inner {
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 4vw, 48px);
  max-width: var(--shell-default);
  margin: 0 auto;
  padding: 0 40px;
}

.svc-page .svc-rows__panel {
  position: relative;
  flex: 0 0 30%;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background-color: #11223A;
  /* Textured strokes sit at the bottom; calm area stays behind the text. */
  background-image: url('/assets/navy-plaster-panel.webp');
  background-size: cover;
  background-position: center bottom;
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 36px);
  /* Heading cap line level with the first row title's: row padding + 1px
     border, +2px for Cinzel 24px vs 17px half-leading/ascent difference. */
  padding-top: calc(clamp(20px, 3vw, 28px) + 3px);
  color: #FFFFFF;
}

.svc-page .svc-rows__panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--cream);
}

.svc-page .svc-rows__panel-rule {
  width: 48px;
  height: 1px;
  margin: 18px 0 0;
  background: var(--gold);
}

.svc-page .svc-rows__panel-intro {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.svc-page .svc-rows__list {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}

.svc-page .svc-rows__row {
  padding: clamp(20px, 3vw, 28px) 0;
  border-top: 1px solid rgba(var(--gold-rgb), 0.35);
}

.svc-page .svc-rows__list .svc-rows__row:last-child {
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.35);
}

.svc-page .svc-rows__row-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--gold-text);
}

.svc-page .svc-rows__row-text {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--navy);
}

@media (max-width: 767px) {
  .svc-page .svc-rows__inner {
    flex-direction: column;
    padding: 0 24px;
  }

  /* Portrait 4:5: text on the calm top of the image, strokes below. */
  .svc-page .svc-rows__panel {
    flex-basis: auto;
    min-width: 0;
    aspect-ratio: 4 / 5;
    background-position: center top;
    padding-top: clamp(32px, 4vw, 48px);
  }
}

/* Mentoring, desktop: the title + intro here are taller than on the audit
   page, so the image is anchored top-left at a fixed width instead of
   cover/bottom. At 480px wide (scale ≈0.52) only image columns 0–650 show,
   which keeps the high right-hand crest (y≈440) out of view; the strokes then
   start ≥ ~250px from the panel top (intro ends ≈203px), and the image still
   covers the 336×441 panel. No overlay or filter. */
@media (min-width: 768px) {
  .svc-page--mentoring .svc-rows__panel {
    background-size: 480px auto;
    background-position: left top;
  }
}

/* ==========================================================================
   5. Statement (.svc-statement)
   ========================================================================== */
.svc-page .svc-statement {
  position: relative;
  overflow: hidden;
  background-color: #11223A;
  background-image: url('/assets/navy-panel.webp');
  background-size: cover;
  background-position: center;
  text-align: center;
}

.svc-page .svc-statement__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.svc-page .svc-statement__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--cream);
  text-wrap: balance;
}

.svc-page .svc-statement__small {
  margin: 24px 0 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
}

/* Mobile: slimmer band — smaller heading, 40px outer padding (larger than
   the gaps around the rule), short gold rule between heading and text with
   even 16px gaps. */
@media (max-width: 767px) {
  .svc-page .svc-statement {
    padding: 40px 0;
  }

  /* Heading and text share the inner's 24px side padding; balance keeps
     both from running edge to edge. */
  .svc-page .svc-statement__text,
  .svc-page .svc-statement__small {
    margin-left: 0;
    margin-right: 0;
    text-wrap: balance;
  }

  .svc-page .svc-statement__text {
    font-size: 16px;
  }

  /* ~8% smaller heading on the narrowest phones. */
  @media (max-width: 379px) {
    .svc-page .svc-statement__text {
      font-size: 14.75px;
    }
  }

  .svc-page .svc-statement__text::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    margin: 16px auto 0;
    background: var(--gold);
  }

  .svc-page .svc-statement__small {
    margin-top: 16px;
    font-size: 14px;
    color: #F7F4EE;
  }

  /* Heading-only band: no text below, so no gold rule either. */
  .svc-page .svc-statement--solo .svc-statement__text::after {
    content: none;
  }
}

/* ==========================================================================
   6. Two panels (.svc-panels)
   ========================================================================== */
.svc-page .svc-panels__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 28px);
  font-weight: 400;
  text-align: center;
  color: var(--navy);
}

.svc-page .svc-panels__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin: clamp(48px, 6vw, 72px) auto 0;
}

/* Same look as the homepage service cards (#services .service-card /
   .service-card__body in home-page.css) — background, border, radius,
   shadow and padding copied as-is; both panels share this now. */
.svc-page .svc-panels__panel {
  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);
  padding: 32px;
}

.svc-page .svc-panels__panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--navy);
}

/* Same short gold rule as .svc-rows__panel-rule (navy panel, section 4). */
.svc-page .svc-panels__panel-rule {
  width: 48px;
  height: 1px;
  margin: 18px 0 0;
  background: var(--gold);
}

.svc-page .svc-panels__list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* Dividers match .svc-rows__row; lines only between items. */
.svc-page .svc-panels__item {
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--navy);
}

.svc-page .svc-panels__item + .svc-panels__item {
  border-top: 1px solid rgba(var(--gold-rgb), 0.35);
}

.svc-page .svc-panels__item:first-child {
  padding-top: 0;
}

.svc-page .svc-panels__item:last-child {
  padding-bottom: 0;
}

/* Secondary ("What we need", left, ~40%) starts 60px lower; stretch keeps
   both bottoms on one line. Primary ("What you get", right, ~60%). */
.svc-page .svc-panels__grid {
  position: relative;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: stretch;
}

.svc-page .svc-panels__panel--secondary {
  margin-top: 60px;
}

.svc-page .svc-panels__panel--primary .svc-panels__panel-title {
  font-size: 24px;
  line-height: 1.3;
}

.svc-page .svc-panels__panel--primary .svc-panels__item {
  font-size: 17px;
}

.svc-page .svc-panels__panel--secondary .svc-panels__item {
  font-size: 14px;
}

/* Magnifier (decorative). script.js centres the lens on the key phrase at
   the end of the first "What you get" item and fills .svc-panels__lens with
   a 1.08x clone of the card clipped to the lens circle; the other items wrap
   before the lens and handle. Hidden when the phrase can't sit cleanly. Stack: card < lens clone < image. Hidden until placed.
   The handle runs off the right edge of the screen: clip (not hidden, which
   would also create a vertical scroll box) cuts it without side scrolling. */
.svc-page .svc-panels {
  overflow-x: clip;
}

.svc-page .svc-panels__magnifier {
  --svc-mag-w: min(426px, 36vw);
  --svc-mag-r: calc(var(--svc-mag-w) * 0.24);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: var(--svc-mag-w);
  height: auto;
  max-width: none;
  pointer-events: none;
  visibility: hidden;
  /* The glass in the image carries a faint tint/reflection; cut it out so the
     magnified text keeps exactly the card's colour. Rim and handle stay. */
  -webkit-mask-image: radial-gradient(circle at 32% 35.3%, transparent var(--svc-mag-r), #000 calc(var(--svc-mag-r) + 1px));
  mask-image: radial-gradient(circle at 32% 35.3%, transparent var(--svc-mag-r), #000 calc(var(--svc-mag-r) + 1px));
}

.svc-page .svc-panels__lens {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
}

.svc-page .svc-panels__lens > .svc-panels__panel {
  position: absolute;
  margin: 0;
  box-sizing: border-box;
}

.svc-page .svc-panels__grid.is-magnified .svc-panels__magnifier {
  visibility: visible;
}

/* Key phrase under the lens (wrapped by script.js; the text is unchanged):
   it stays at the end of the one-line first item. */
.svc-page .svc-panels__item--keyed-inline {
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* "What you get" first, "What we need" second, 24px apart. */
  .svc-page .svc-panels__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .svc-page .svc-panels__panel--primary {
    order: -1;
  }

  .svc-page .svc-panels__panel--secondary {
    margin-top: 0;
  }

  .svc-page .svc-panels__panel--primary .svc-panels__panel-title {
    font-size: 22px;
  }

  .svc-page .svc-panels__panel--primary .svc-panels__item,
  .svc-page .svc-panels__panel--secondary .svc-panels__item {
    font-size: 15px;
  }

  /* Phones: the lens can't sit precisely over the key phrase, so no magnifier */
  .svc-page .svc-panels__magnifier,
  .svc-page .svc-panels__lens {
    display: none;
  }
}

/* ==========================================================================
   7. Split text (.svc-split)
   ========================================================================== */
.svc-page .svc-split__inner {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  max-width: var(--shell-default);
  margin: 0 auto;
  padding: 0 40px;
}

.svc-page .svc-split__title {
  flex: 0 0 30%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.svc-page .svc-split__text {
  flex: 1 1 50%;
  max-width: 640px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--navy);
}

.svc-page .svc-split__text a {
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.svc-page .svc-split__text a:hover,
.svc-page .svc-split__text a:focus-visible {
  color: var(--navy);
}

/* Several paragraphs: .svc-split__text as a wrapper div around <p>s. */
.svc-page .svc-split__text > p {
  margin: 0;
}

.svc-page .svc-split__text > p + p {
  margin-top: 1em;
}

/* Mobile: a quiet side note — small Cinzel label led by a short gold rule,
   softer 14px text, 14px between them, +20px below the component. */
@media (max-width: 767px) {
  .svc-page .svc-split {
    padding-bottom: 52px;
  }

  .svc-page .svc-split__inner {
    flex-direction: column;
    gap: 14px;
    padding: 0 24px;
  }

  .svc-page .svc-split__title {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.18em;
    color: var(--gold-text);
  }

  .svc-page .svc-split__title::before {
    content: '';
    flex: 0 0 32px;
    height: 1px;
    background: #C8A872;
  }

  .svc-page .svc-split__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--navy);
  }

  /* Intro variant (Mentoring "Learning on your own account"): not a side
     note — a normal left-aligned section title (same as the other mobile
     section titles, e.g. .svc-media__title) followed by the paragraphs. */
  .svc-page .svc-split--intro {
    padding-bottom: 32px;
  }

  .svc-page .svc-split--intro .svc-split__inner {
    gap: 20px;
  }

  .svc-page .svc-split--intro .svc-split__title {
    display: block;
    font-size: clamp(24px, 2.1vw, 28px);
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--navy);
    text-align: left;
  }

  .svc-page .svc-split--intro .svc-split__title::before {
    content: none;
  }

  .svc-page .svc-split--intro .svc-split__text {
    font-size: 15px;
    line-height: 1.75;
  }
}

/* ==========================================================================
   8. Closing CTA (.svc-cta)
   ========================================================================== */
.svc-page .svc-cta {
  position: relative;
  overflow: hidden;
  background-color: #11223A;
  background-image: url('/assets/navy-panel.webp');
  background-size: cover;
  background-position: center;
  text-align: center;
}

.svc-page .svc-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}

.svc-page .svc-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--cream);
}

.svc-page .svc-cta__subtitle {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--gold);
}

.svc-page .svc-cta__text {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.svc-page .svc-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
}

/* Uses the base .link-arrow (var(--gold)) rather than the --dark-gold
   modifier — this section is navy, same reasoning as the homepage hero. */
.svc-page .svc-cta__link {
  margin-top: 18px;
}

/* Mobile: clearer hierarchy, more compact block — heading -10%, gold rule
   (14px either side) before a one-line 13px subheading, regular-weight
   text, ~10% smaller button, gaps below the subheading ~20% tighter. */
@media (max-width: 767px) {
  .svc-page .svc-cta__title {
    font-size: 21.6px;
  }

  .svc-page .svc-cta__title::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    margin: 14px auto 0;
    background: #C8A872;
  }

  .svc-page .svc-cta__subtitle {
    margin-top: 14px;
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  .svc-page .svc-cta__text {
    margin-top: 14.4px;
    font-size: 15px;
    font-weight: 400;
  }

  .svc-page .svc-cta__actions {
    margin-top: 25.6px;
  }

  .svc-page .svc-cta__button {
    padding: 12.6px 25.2px;
    font-size: 12px;
  }

  .svc-page .svc-cta__link {
    margin-top: 14.4px;
  }

  /* Mentoring CTA: lighter on mobile — no gold subtitle (the gold rule under
     the heading stays), one-line button styled like the Mentoring hero button. */
  .svc-page .svc-cta--mentoring .svc-cta__subtitle {
    display: none;
  }

  .svc-page .svc-cta--mentoring .svc-cta__button {
    padding-left: 22px;
    padding-right: 22px;
    font-size: 11px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}

/* ==========================================================================
   9. FAQ accordion (.svc-faq)
   ========================================================================== */
.svc-page .svc-faq__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 400;
  text-align: center;
  color: var(--navy);
}

.svc-page .svc-faq__list {
  max-width: 760px;
  margin: clamp(40px, 5vw, 56px) auto 0;
}

.svc-page .svc-faq__item {
  border-top: 1px solid rgba(var(--gold-rgb), 0.35);
}

.svc-page .svc-faq__item:last-child {
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.35);
}

.svc-page .svc-faq__question {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
  text-align: center;
}

/* Icon pinned to the row's right edge: the question text fills the space
   between it and an empty spacer of the same width on the left, so the text
   stays optically centred and the + sits in the same place on every row. */
.svc-page .svc-faq__question::before {
  content: '';
  flex: 0 0 16px;
}

.svc-page .svc-faq__question > span:not(.svc-faq__icon) {
  flex: 1 1 auto;
  min-width: 0;
}

/* Thin CSS plus: two 1px gold lines, 11px. On open the vertical line
   rotates flat onto the horizontal one, turning the plus into a minus. */
.svc-page .svc-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.svc-page .svc-faq__icon::before,
.svc-page .svc-faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1px;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.svc-page .svc-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.svc-page .svc-faq__question[aria-expanded="true"] .svc-faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.svc-page .svc-faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.svc-page .svc-faq__answer.is-open {
  max-height: 600px;
}

/* The Swedish/Danish FAQ item is EN-only — hidden on the HU route via the
   server-rewritten <html lang="hu">, no i18n-core changes needed. */
html[lang="hu"] .svc-page .svc-faq__item--en-only {
  display: none;
}

.svc-page .svc-faq__answer p {
  margin: 0 auto;
  max-width: 60ch;
  padding: 0 0 24px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--navy);
  text-align: center;
}

/* Mobile: centred like desktop (icon right after the question), slightly
   smaller heading, ~25% tighter rows / heading gap, and +24px top padding
   (32px → 56px) to separate the FAQ from the navy CTA above it. */
@media (max-width: 767px) {
  .svc-page .svc-faq {
    padding-top: 56px;
  }

  .svc-page .svc-faq__title {
    font-size: 18px;
  }

  .svc-page .svc-faq__list {
    margin-top: 30px;
  }

  .svc-page .svc-faq__question {
    padding: 15px 0;
    font-size: 14px;
  }

  .svc-page .svc-faq__answer p {
    font-size: 14px;
  }
}

/* ==========================================================================
   PPC Consultancy page (.svc-page--consultancy) — page modifiers only.
   Built from the Account Audit / Mentoring .svc-* components; everything
   below either mirrors a Mentoring page rule for this page or adds a
   modifier where the Consultancy layout differs.
   ========================================================================== */

/* Mobile section spacing: same increased values as the Mentoring page. */
@media (max-width: 767px) {
  .svc-page.svc-page--consultancy > .svc-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .svc-page.svc-page--consultancy > .svc-statement {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .svc-page.svc-page--consultancy > .svc-faq {
    padding-top: 90px;
  }
}

/* --- Hero: same as the Mentoring hero, with this page's photos (the same
   English images on EN and HU). Matching media-matched preloads are in
   ppc-consultancy.html. --- */
.svc-page .svc-hero--consultancy {
  --svc-hero-image: url('/assets/consultancy-hero-desktop-en.webp');
  --svc-hero-image-mobile: url('/assets/consultancy-hero-mobile-en.webp?v=3');
}

.svc-page .svc-hero--consultancy::before {
  background-image:
    linear-gradient(45deg, rgba(var(--navy-rgb), 0.85) 15%, rgba(var(--navy-rgb), 0.55) 45%, rgba(var(--navy-rgb), 0.1) 80%),
    var(--svc-hero-image);
  background-size: 100% 100%, cover;
  background-position: center, right center;
}

/* Capped + balanced so the EN heading breaks into three even lines. */
.svc-page .svc-hero--consultancy .svc-hero__title {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

@media (max-width: 768px) {
  .svc-page .svc-hero--consultancy::before {
    background-image:
      linear-gradient(to bottom, rgba(var(--navy-rgb), 0.85), rgba(var(--navy-rgb), 0.5) 40%, rgba(var(--navy-rgb), 0.15) 70%),
      var(--svc-hero-image-mobile);
    background-size: 100% 100%, cover;
    background-position: center, right bottom;
  }

  /* Same mobile fine-tuning as the Mentoring hero. */
  .svc-page .svc-hero--consultancy {
    min-height: 0;
  }

  /* Room for the phone in the mobile image (top at ~62% of the hero
     height): ~24px of fabric between the button and the phone on EN at
     360–375px wide, a little more on wider phones and on HU. */
  .svc-page .svc-hero--consultancy .svc-hero__inner {
    padding-bottom: 240px;
  }

  .svc-page .svc-hero--consultancy .svc-hero__eyebrow {
    margin-top: 16px;
  }

  .svc-page .svc-hero--consultancy .svc-hero__title {
    font-size: clamp(19.36px, 6.16vw, 22.88px);
    text-wrap: balance;
  }

  .svc-page .svc-hero--consultancy .svc-hero__subtitle {
    font-size: 15px;
  }

  .svc-page .svc-hero--consultancy .svc-hero__cta {
    margin-top: 25px;
    padding-left: 22px;
    padding-right: 22px;
    font-size: 11px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}

/* --- Steps + panels: one centred muted line below, same style as
   .svc-media__muted. --- */
.svc-page--consultancy .svc-steps__muted,
.svc-page--consultancy .svc-panels__muted {
  max-width: 60ch;
  margin: clamp(40px, 5vw, 56px) auto 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.65;
  text-align: center;
  color: rgba(var(--navy-rgb), 0.55);
}

.svc-page--consultancy .svc-panels__muted {
  margin-top: clamp(32px, 4vw, 40px);
}

/* --- Two panels, compare variant: two equal cards, no magnifier. Card
   radius, padding, heading and gold rule come from .svc-panels__panel
   (heading at the "What you get" size). --- */
.svc-page .svc-panels--compare .svc-panels__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 920px;
}

.svc-page .svc-panels--compare .svc-panels__panel {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  border: 1px solid #C8A872;
}

.svc-page .svc-panels--compare .svc-panels__panel-title {
  font-size: 24px;
  line-height: 1.3;
}

/* margin-bottom keeps ≥ 20px above the label/link, which sit at the bottom. */
.svc-page .svc-panels--compare .svc-panels__panel-text {
  margin: 18px 0 24px;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
}

.svc-page .svc-panels--compare .svc-panels__panel-label,
.svc-page .svc-panels--compare .svc-panels__panel-link {
  margin-top: auto;
}

.svc-page .svc-panels--compare .svc-panels__panel-link {
  align-self: flex-start;
}

.svc-page .svc-panels--compare .svc-panels__panel--navy {
  background: #11223A;
}

.svc-page .svc-panels--compare .svc-panels__panel--navy .svc-panels__panel-title,
.svc-page .svc-panels--compare .svc-panels__panel--navy .svc-panels__panel-text {
  color: #FFFFFF;
}

.svc-page .svc-panels--compare .svc-panels__panel-label {
  margin-bottom: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.svc-page .svc-panels--compare .svc-panels__panel--light {
  background: #FBF8F2;
}

.svc-page .svc-panels--compare .svc-panels__panel--light .svc-panels__panel-text {
  color: var(--navy);
}

@media (max-width: 767px) {
  /* Stacked, Consultancy first (source order), same gap as the audit cards. */
  .svc-page .svc-panels--compare .svc-panels__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .svc-page .svc-panels--compare .svc-panels__panel-title {
    font-size: 22px;
  }

  .svc-page .svc-panels--compare .svc-panels__panel-text {
    font-size: 15px;
  }
}

/* --- Closing CTA: same mobile tweaks as the Mentoring CTA. --- */
@media (max-width: 767px) {
  .svc-page .svc-cta--consultancy .svc-cta__subtitle {
    display: none;
  }

  .svc-page .svc-cta--consultancy .svc-cta__button {
    padding-left: 22px;
    padding-right: 22px;
    font-size: 11px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}

/* --- Intro + "When consultancy makes sense": one section on the Account
   Audit two-column component (.svc-media--split, desktop layout shared).
   Mobile (.svc-media--consult): stacked exactly like the former separate
   split intro + list sections — 24px side padding and 15px text for the
   intro, a navy 24px heading for the list, 64px between them. --- */
@media (max-width: 767px) {
  .svc-page.svc-page--consultancy > .svc-media--consult {
    padding-top: 60px;
  }

  .svc-page .svc-media--consult .svc-media__content {
    padding-top: 0;
  }

  .svc-page .svc-media--consult .svc-media__col--intro {
    padding: 0 4px; /* + the inner's 20px = the former intro's 24px */
  }

  .svc-page .svc-media--consult .svc-media__col--intro .svc-media__text {
    font-size: 15px;
  }

  .svc-page .svc-media--consult .svc-media__col--list {
    margin-top: 64px;
  }

  .svc-page .svc-media--consult .svc-media__subheading {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--navy);
  }
}

/* --- Final fixes --- */
/* "Consultancy or mentoring?" navy card: same surface as the navy statement
   and CTA bands, heading/body type as in the CTA (.svc-cta__title /
   .svc-cta__text). */
.svc-page .svc-panels--compare .svc-panels__panel--navy {
  background-color: #11223A;
  background-image: url('/assets/navy-panel.webp');
  background-size: cover;
  background-position: center;
}

.svc-page .svc-panels--compare .svc-panels__panel--navy .svc-panels__panel-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--cream);
}

.svc-page .svc-panels--compare .svc-panels__panel--navy .svc-panels__panel-text {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

/* Mentoring card: same title and text sizes as the Consultancy card above
   (colours stay its own) */
.svc-page .svc-panels--compare .svc-panels__panel--light .svc-panels__panel-title {
  font-size: clamp(24px, 2.1vw, 28px);
  font-weight: 400;
  line-height: 1.3;
}

.svc-page .svc-panels--compare .svc-panels__panel--light .svc-panels__panel-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
}

@media (max-width: 767px) {
  /* Mobile CTA sizes (see below). */
  .svc-page .svc-panels--compare .svc-panels__panel--navy .svc-panels__panel-title {
    font-size: 21.6px;
  }

  .svc-page .svc-panels--compare .svc-panels__panel--navy .svc-panels__panel-text {
    font-size: 14px;
    font-weight: 400;
  }

  .svc-page .svc-panels--compare .svc-panels__panel--light .svc-panels__panel-title {
    font-size: 21.6px;
  }

  .svc-page .svc-panels--compare .svc-panels__panel--light .svc-panels__panel-text {
    font-size: 14px;
    font-weight: 400;
  }

  /* Statement band: lines fill the standard 24px-padded column instead of
     being balanced into short lines. Font size unchanged. */
  .svc-page.svc-page--consultancy > .svc-statement .svc-statement__text,
  .svc-page.svc-page--consultancy > .svc-statement .svc-statement__small {
    text-wrap: wrap;
  }

  /* Closing CTA: airier — more padding and gaps, lighter body text. */
  .svc-page.svc-page--consultancy > .svc-cta {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .svc-page .svc-cta--consultancy .svc-cta__title::after {
    margin-top: 20px;
  }

  .svc-page .svc-cta--consultancy .svc-cta__text {
    margin-top: 24px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
  }

  .svc-page .svc-cta--consultancy .svc-cta__actions {
    margin-top: 36px;
  }

  .svc-page .svc-cta--consultancy .svc-cta__link {
    margin-top: 22px;
  }
}

/* ==========================================================================
   Ad Management (.svc-page--ad-mgmt) — page-scoped variants only; the base
   .svc-* components above are unchanged.
   ========================================================================== */

/* Hero: same setup as the Consultancy hero. Desktop photo (laptop bottom
   right, same image on EN and HU), anchored right bottom so narrower widths
   crop the empty left side, not the laptop; media-matched preloads in
   ad-management.html. The mobile image is set inside the mobile media
   query below. */
.svc-page .svc-hero--ad-mgmt {
  --svc-hero-image: url('/assets/ad-management-hero-desktop-en.webp?v=2');
  --svc-hero-image-mobile: none;
}

/* Desktop: the image in its own colours, no navy overlay (the mobile rule
   below keeps its own gradient). */
.svc-page .svc-hero--ad-mgmt::before {
  background-image: var(--svc-hero-image);
  background-size: cover;
  background-position: right bottom;
}

/* Narrower desktop windows (769-1279px): cover would put the laptop's screen
   behind the end of the subtitle, so the photo slides right (the laptop is
   cropped a little at the right edge instead) — 0 at 1280px, growing as the
   window narrows. */
@media (min-width: 769px) and (max-width: 1279px) {
  .svc-page .svc-hero--ad-mgmt::before {
    background-position: right calc((100vw - 1280px) * 0.47) bottom;
  }
}

/* Mobile: same image variable as the Consultancy hero (same English image
   on EN and HU), in its own colours like the desktop hero, no navy overlay;
   anchored right bottom so the laptop side is never cropped. */
@media (max-width: 768px) {
  .svc-page .svc-hero--ad-mgmt {
    --svc-hero-image-mobile: url('/assets/ad-management-hero-mobile-en.webp?v=2');
  }

  .svc-page .svc-hero--ad-mgmt::before {
    background-image: var(--svc-hero-image-mobile);
    background-size: cover;
    background-position: right bottom;
  }

  /* Same spacing approach as the Consultancy mobile hero: height follows
     the content, with room below the button for the laptop (~62–88% of the
     image height), so it sits between the button and the marquee line. */
  .svc-page .svc-hero--ad-mgmt {
    min-height: 0;
  }

  .svc-page .svc-hero--ad-mgmt .svc-hero__inner {
    padding-bottom: 240px;
  }
}

/* --- Media, edge variant (.svc-media--edge): same image and placement as the PPC
   Mentoring shell section (.svc-media--shell), duplicated here so the two
   pages stay independent. Shared .svc-media__wave: flush with the left page
   edge, natural ratio; content on the 30% | up to 640px columns, shifted
   80px towards the shell. Mobile: no image at all. --- */
.svc-page--ad-mgmt .svc-media--edge .svc-media__text + .svc-media__text {
  margin-top: 16px;
}

/* Thin gold line between the paragraphs and the muted line. */
.svc-page--ad-mgmt .svc-media--edge .svc-media__rule {
  width: 48px;
  height: 1px;
  margin: 32px 0 0;
  background: var(--gold);
}

.svc-page--ad-mgmt .svc-media--edge .svc-media__rule + .svc-media__muted {
  margin-top: 20px;
}

@media (min-width: 768px) {
  .svc-page--ad-mgmt .svc-media--edge .svc-media__inner {
    align-items: flex-start;
    gap: clamp(24px, 4vw, 48px);
  }

  .svc-page--ad-mgmt .svc-media--edge .svc-media__spacer {
    flex: 0 0 30%;
  }

  /* Fully inside the section, a little in from its top and bottom (equal
     insets keep it vertically centred), still flush left. */
  .svc-page--ad-mgmt .svc-media--edge .svc-media__wave {
    top: 24px;
    bottom: 24px;
  }

  .svc-page--ad-mgmt .svc-media--edge .svc-media__content {
    flex: 1 1 50%;
    max-width: 640px;
    padding: 0;
    align-self: flex-start;
    left: -80px;
  }
}

@media (max-width: 767px) {
  .svc-page--ad-mgmt .svc-media--edge {
    padding-top: 32px;
  }

  .svc-page--ad-mgmt .svc-media--edge .svc-media__wave {
    display: none;
  }

  .svc-page--ad-mgmt .svc-media--edge .svc-media__inner {
    padding: 0 24px;
  }

  .svc-page--ad-mgmt .svc-media--edge .svc-media__content {
    padding: 0;
  }
}

/* --- Channels (.svc-channels): two-column "ranking". Left: title, subtitle,
   short gold line and the two paragraphs. Right: three rows (label column +
   content), separated by thin gold lines, with a line above the first row and
   below the last. Same content width as .svc-rows__inner. --- */
.svc-page--ad-mgmt .svc-channels__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: 110px;
  max-width: var(--shell-default);
  margin: 0 auto;
  padding: 0 40px;
}

.svc-page--ad-mgmt .svc-channels__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--navy);
  text-wrap: balance;
}

.svc-page--ad-mgmt .svc-channels__subtitle {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gold-text);
}

.svc-page--ad-mgmt .svc-channels__rule {
  width: 48px;
  height: 1px;
  margin: 24px 0 0;
  background: #C8A872;
}

/* Same size as the other body texts on the page (.svc-rows__row-text,
   .svc-steps__text). */
.svc-page--ad-mgmt .svc-channels__text {
  margin: 24px 0 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--navy);
}

.svc-page--ad-mgmt .svc-channels__text + .svc-channels__text {
  margin-top: 16px;
}

.svc-page--ad-mgmt .svc-channels__ranking {
  border-bottom: 1px solid rgba(200, 168, 114, 0.55);
}

/* Label baseline level with the first line of the content. */
.svc-page--ad-mgmt .svc-channels__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 24px;
  padding: 28px 0;
  border-top: 1px solid rgba(200, 168, 114, 0.55);
}

.svc-page--ad-mgmt .svc-channels__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.svc-page--ad-mgmt .svc-channels__lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.svc-page--ad-mgmt .svc-channels__lead--primary {
  font-size: 34px;
  line-height: 1.15;
}

.svc-page--ad-mgmt .svc-channels__lead--list {
  font-size: 16px;
  line-height: 1.6;
}

.svc-page--ad-mgmt .svc-channels__lead--muted {
  font-size: 18px;
  color: #7D8A9C;
}

/* One name (plus the diamond after it) never breaks. */
.svc-page--ad-mgmt .svc-channels__name {
  white-space: nowrap;
}

/* Same diamond as .svc-media__diamond / .svc-divider::after. */
.svc-page--ad-mgmt .svc-channels__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);
}

.svc-page--ad-mgmt .svc-channels__row-text {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(var(--navy-rgb), 0.7);
}

/* Mobile: one column; intro first, then the rows full width, each with its
   label above the content. */
@media (max-width: 768px) {
  .svc-page--ad-mgmt .svc-channels__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    padding: 0 24px;
  }

  .svc-page--ad-mgmt .svc-channels__title {
    font-size: clamp(24px, 7vw, 28px);
  }

  .svc-page--ad-mgmt .svc-channels__subtitle {
    font-size: 16px;
  }

  .svc-page--ad-mgmt .svc-channels__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    padding: 24px 0;
  }

  .svc-page--ad-mgmt .svc-channels__lead--primary {
    font-size: 28px;
  }
}

/* --- Rows: same panel background as PPC Mentoring's "How a session works"
   panel: the shared /assets/navy-plaster-panel.webp (928x1232, no overlay),
   anchored top-left like the Mentoring panel, but sized to this panel's
   shorter text. In the image the plaster is smooth down to y~440 (right
   third), ~480 (middle), ~620 (left third), with the relief wave below it. The
   sizes below keep the title, gold line and intro (ending ~150px down, ~203px
   on the narrowest desktop panel) on the smooth part, with the relief starting
   just below the text and filling the bottom of the panel. --- */
@media (min-width: 768px) {
  /* 372px = scale 0.40: relief from ~176px, image 493px tall (panel 415-470px).
     Never narrower than the panel, so it never tiles on wide screens. */
  .svc-page--ad-mgmt .svc-rows__panel {
    background-size: max(372px, 100%) auto;
    background-position: left top;
  }
}

/* Narrowest desktop panels (220-260px wide) wrap the intro onto three lines. */
@media (min-width: 768px) and (max-width: 900px) {
  .svc-page--ad-mgmt .svc-rows__panel {
    background-size: 418px auto;
  }
}

/* Mobile (4:5 panel): 110% of the panel width (right 10% cropped), never
   below 362px (scale 0.39: relief from ~172px), because the intro still ends
   ~150px down on the narrowest phones. */
@media (max-width: 767px) {
  .svc-page--ad-mgmt .svc-rows__panel {
    background-size: max(362px, 110%) auto;
    background-position: left top;
  }
}

/* --- Mobile section rhythm: the cream sections' top/bottom padding doubled
   (shared mobile 32px -> 64px; FAQ top 56px -> 112px), so the gaps between
   sections, and before/after the navy bands, are twice as large. The navy
   bands (statement, closing CTA) and the hero keep their own padding.
   Page-scoped, same pattern as the Mentoring mobile overrides. --- */
@media (max-width: 767px) {
  .svc-page.svc-page--ad-mgmt > .svc-media,
  .svc-page.svc-page--ad-mgmt > .svc-channels,
  .svc-page.svc-page--ad-mgmt > .svc-rows,
  .svc-page.svc-page--ad-mgmt > .svc-steps {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .svc-page.svc-page--ad-mgmt > .svc-faq {
    padding-top: 112px;
    padding-bottom: 64px;
  }
}

/* ==========================================================================
   About (.svc-page--about) — quieter than the service pages: cream hero with
   the Darlana mark, no button or marquee; the founder quote is the only navy
   band; the closing CTA stays on cream. Page-scoped variants of the shared
   .svc-* components, plus the new .svc-grid and .svc-facts.
   ========================================================================== */

/* --- 7. Closing CTA, cream variant: no navy band, navy type, dark-gold
   text link (.link-arrow--dark-gold in the markup). --- */
.svc-page .svc-cta--cream {
  background: none;
  padding-top: clamp(56px, 6vw, 88px);
  padding-bottom: clamp(64px, 7vw, 100px);
}

/* Wider than the shared 640px so the title stays on one line on desktop;
   the paragraph keeps the narrower measure. */
.svc-page .svc-cta--cream .svc-cta__inner {
  max-width: 800px;
}

.svc-page .svc-cta--cream .svc-cta__title {
  color: var(--navy);
  text-wrap: balance;
}

.svc-page .svc-cta--cream .svc-cta__text {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
  color: rgba(var(--navy-rgb), 0.8);
}

@media (max-width: 767px) {
  .svc-page .svc-cta--cream {
    padding-top: 48px;
    padding-bottom: 64px;
  }
}

/* ==========================================================================
   Ornament divider (reusable): gold diamond with fading lines either side.
   <div class="ornament-divider" aria-hidden="true"><span class="ornament-divider__diamond"></span></div>
   ========================================================================== */
.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 56px 0;
}

.ornament-divider::before,
.ornament-divider::after {
  content: '';
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C8A872);
}

.ornament-divider::after {
  background: linear-gradient(270deg, transparent, #C8A872);
}

.ornament-divider__diamond {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  background: #C8A872;
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  .ornament-divider {
    padding: 36px 0;
  }

  .ornament-divider::before,
  .ornament-divider::after {
    width: 48px;
  }
}

/* ==========================================================================
   Signature block (reusable, inside any .svc-page): D mark | deep gold line |
   name, title and contact lines. Used on the Contact page and the thank-you /
   booking-confirmed pages. --cdirect-mark sets the visible mark height.
   ========================================================================== */
.svc-page .cdirect__sig {
  --cdirect-mark: 56px;
  display: flex;
  align-items: center;
}

/* The SVG's mark fills ~80% of its square box (73% of its width, offset
   8% / 9%), so the box is cropped to the visible mark: the 16px gap to the
   line is then real, not padding inside the image. */
.svc-page .cdirect__mark {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  width: calc(var(--cdirect-mark) * 0.9125);
  height: var(--cdirect-mark);
  margin-right: 16px;
}

.svc-page .cdirect__mark img {
  position: absolute;
  left: calc(var(--cdirect-mark) * -0.1);
  top: calc(var(--cdirect-mark) * -0.1125);
  width: calc(var(--cdirect-mark) * 1.25);
  height: calc(var(--cdirect-mark) * 1.25);
  max-width: none;
}

.svc-page .cdirect__text {
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid #9C7B45;
}

.svc-page .cdirect__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: #11223A;
}

.svc-page .cdirect__role {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #9C7B45;
}

.svc-page .cdirect__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-style: normal;
  line-height: 1.55;
  color: #11223A;
}

.svc-page .cdirect__contact a {
  color: #11223A;
  text-decoration: none;
}

.svc-page .cdirect__contact a:hover,
.svc-page .cdirect__contact a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.svc-page .cdirect__city {
  color: rgba(17, 34, 58, 0.6);
}

/* ==========================================================================
   Brand Design — coming-soon page (.svc-page--brand, .bd-*)
   Page-scoped: every rule sits under .svc-page--brand, so no other page
   changes. Sand surface + --gold-dark (#9A7843) come from .svc-page.
   ========================================================================== */
.svc-page--brand .bd-shell {
  max-width: var(--shell-default);
  margin: 0 auto;
  padding: 0 40px;
}

.svc-page--brand .bd-eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* "Coming soon": deep-gold outline (#9C7B45) and the text in a deeper shade
   of it, 5.5:1 on the sand surface (#9C7B45 itself is 3.6:1 there; small
   text needs 4.5:1) */
.svc-page--brand .bd-tag {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #9C7B45;
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7A5E36;
}

/* Section titles: same Cinzel 26px as .svc-split__title */
.svc-page--brand .bd-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  color: #11223A;
}

/* Short gold rule, same as .svc-rows__panel-rule */
.svc-page--brand .bd-rule {
  width: 48px;
  height: 1px;
  margin: 18px 0 0;
  background: #C8A872;
}

.svc-page--brand .bd-text {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: #11223A;
}

/* --- 1. Hero --- */
.svc-page--brand .bd-hero {
  padding: 100px 0;
  /* the photo bleeds past the shell to the viewport edge; 100vw includes
     the scrollbar, so clip the few px that would cause a horizontal scroll */
  overflow: clip;
}

.svc-page--brand .bd-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 90px;
  align-items: center;
}

.svc-page--brand .bd-hero__cta {
  margin-top: 34px;
}

.svc-page--brand .bd-hero__note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #11223A;
}

.svc-page--brand .bd-hero__note .svc-media__diamond {
  margin-top: 0;
}

/* Hero CTA target: land below the fixed header (smooth scroll is site-wide) */
.svc-page--brand #founding {
  scroll-margin-top: calc(var(--header-height) + 48px);
}

.svc-page--brand .bd-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.svc-page--brand .bd-hero__title {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.2;
  color: #11223A;
  text-wrap: balance;
}

.svc-page--brand .bd-hero__lead {
  max-width: 470px;
  margin: 24px 0 0;
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.75;
  color: #11223A;
}

.svc-page--brand .bd-hero__media,
.svc-page--brand .bd-founding__media {
  display: block;
  width: 100%;
}

/* The 4:5 column box keeps the hero height as before; the photo fills it and
   extends past it: up/down through the hero padding (100px) and right through
   the shell gutter to the viewport edge. */
.svc-page--brand .bd-hero__media {
  --bd-hero-bleed: calc(max(0px, (100vw - var(--shell-default)) / 2) + 40px);
  position: relative;
  aspect-ratio: 1200 / 1500;
}

.svc-page--brand .bd-hero__media img {
  position: absolute;
  top: -100px;
  left: 0;
  display: block;
  width: calc(100% + var(--bd-hero-bleed));
  max-width: none;
  height: calc(100% + 200px);
  object-fit: cover;
  object-position: center;
}

/* Desktop: the hero fills the visible screen below the fixed header, so the
   whole card and the whole text column show without scrolling. The photo
   stretches to the hero's full height instead of the 4:5 column box. */
@media (min-width: 769px) {
  .svc-page--brand .bd-hero {
    display: flex;
    height: calc(100vh - var(--header-height));
    min-height: 560px;
    padding: 0;
  }

  .svc-page--brand .bd-hero__inner {
    width: 100%;
    height: 100%;
    grid-template-rows: 100%;
  }

  .svc-page--brand .bd-hero__media {
    align-self: stretch;
    aspect-ratio: auto;
  }

  .svc-page--brand .bd-hero__media img {
    top: 0;
    height: 100%;
  }
}

/* --- 2. Packages --- */
.svc-page--brand .bd-packages {
  padding: 96px 0 112px;
}

.svc-page--brand .bd-packages__intro {
  max-width: 620px;
  margin: 0 auto 88px;
  text-align: center;
}

.svc-page--brand .bd-packages__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: #11223A;
}

/* Gold line fading out at both ends */
.svc-page--brand .bd-packages__line {
  display: block;
  width: 56px;
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, #C8A872, transparent);
}

.svc-page--brand .bd-packages__text {
  margin: 22px 0 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  color: #11223A;
}

.svc-page--brand .bd-packages__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-page--brand .bd-packages__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 44px;
  text-align: center;
}

/* Vertical gold divider between columns, fading at top and bottom */
.svc-page--brand .bd-packages__item + .bd-packages__item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, #C8A872 20%, #C8A872 80%, transparent);
}

/* Same diamond as elsewhere on the page, at 7px here */
.svc-page--brand .bd-packages__item .svc-media__diamond {
  width: 7px;
  height: 7px;
  margin: 0 0 22px;
}

.svc-page--brand .bd-packages__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: #11223A;
}

.svc-page--brand .bd-packages__lead {
  max-width: 16em;
  margin: 14px 0 0;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.7;
  color: #11223A;
}

.svc-page--brand .bd-packages__rule {
  display: block;
  width: 28px;
  height: 1px;
  margin: 26px auto;
  background: #C8A872;
}

.svc-page--brand .bd-packages__includes {
  max-width: 21em;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.9;
  color: #5B6576;
}

.svc-page--brand .bd-packages__footer {
  margin: 80px 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
  color: #5B6576;
}

/* Section spacing next to an .ornament-divider comes from the divider itself */
.svc-page--brand .ornament-divider + .bd-packages {
  padding-top: 0;
}

.svc-page--brand .bd-packages:has(+ .ornament-divider) {
  padding-bottom: 0;
}

/* --- 3. Founding projects --- */
.svc-page--brand .bd-founding {
  padding: 0 0 110px;
}

.svc-page--brand .bd-founding__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

.svc-page--brand .bd-founding__text .bd-title {
  margin-top: 16px;
}

.svc-page--brand .bd-founding__cta {
  margin-top: 32px;
}

/* Colour story in the founding section: mood image + colour strip + name */
.svc-page--brand .bd-story {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.svc-page--brand .bd-story__label {
  margin: 0; /* 14px to the first row = .bd-story gap */
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.svc-page--brand .bd-story__row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 128px;
}

.svc-page--brand .bd-story__img {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  object-fit: cover;
}

.svc-page--brand .bd-story__strip {
  display: block;
  flex: 0 0 48px;
}

.svc-page--brand .bd-story__strip--navy {
  background: #11223A;
}

.svc-page--brand .bd-story__strip--gold {
  background: #C8A872;
}

.svc-page--brand .bd-story__strip--cream {
  background: #FBF8F2;
  box-shadow: inset 0 0 0 1px rgba(17, 34, 58, 0.10);
}

.svc-page--brand .bd-story__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 110px;
}

.svc-page--brand .bd-story__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: #11223A;
}

.svc-page--brand .bd-story__code {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #4d5868;
}

.svc-page--brand .bd-founding__note {
  margin: 16px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: #6B7A8C;
}

@media (max-width: 1024px) and (min-width: 769px) {
  .svc-page--brand .bd-hero__inner,
  .svc-page--brand .bd-founding__inner {
    gap: 56px;
  }

  .svc-page--brand .bd-packages__item {
    padding: 0 24px;
  }
}

@media (max-width: 768px) {
  .svc-page--brand .bd-shell {
    padding: 0 20px;
  }

  .svc-page--brand .bd-hero {
    padding: 0 0 64px;
  }

  /* Square photo first, edge to edge, directly under the header */
  .svc-page--brand .bd-hero__media {
    order: -1;
    width: auto;
    margin: 0 -20px;
    aspect-ratio: 1 / 1;
  }

  .svc-page--brand .bd-hero__media img {
    position: static;
    width: 100%;
    height: 100%;
  }

  .svc-page--brand .bd-hero__inner,
  .svc-page--brand .bd-founding__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .svc-page--brand .bd-hero__title {
    margin-top: 18px;
    font-size: 30px;
  }

  .svc-page--brand .bd-story__row {
    height: 96px;
  }

  .svc-page--brand .bd-story__strip {
    flex-basis: 40px;
  }

  .svc-page--brand .bd-story__info {
    flex-basis: 96px;
  }

  .svc-page--brand .bd-hero__lead {
    max-width: none;
    margin-top: 18px;
    font-size: 15.5px;
  }

  .svc-page--brand .bd-packages {
    padding: 56px 0 72px;
  }

  .svc-page--brand .bd-hero:has(+ .ornament-divider) {
    padding-bottom: 0;
  }

  .svc-page--brand .ornament-divider + .bd-packages {
    padding-top: 0;
  }

  .svc-page--brand .bd-packages:has(+ .ornament-divider) {
    padding-bottom: 0;
  }

  .svc-page--brand .bd-packages__intro {
    margin-bottom: 48px;
  }

  .svc-page--brand .bd-packages__title {
    font-size: 26px;
  }

  .svc-page--brand .bd-packages__list {
    grid-template-columns: 1fr;
  }

  .svc-page--brand .bd-packages__item {
    padding: 36px 0;
  }

  /* Short horizontal gold line between stacked packages */
  .svc-page--brand .bd-packages__item + .bd-packages__item::before {
    top: 0;
    bottom: auto;
    left: 30%;
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #C8A872, transparent);
  }

  .svc-page--brand .bd-packages__footer {
    margin-top: 40px;
  }

  .svc-page--brand .bd-title {
    font-size: 24px;
  }

  .svc-page--brand .bd-founding {
    padding-bottom: 80px;
  }
}

/* ==========================================================================
   Cormorant Garamond: the large statements / quote in the full-width navy
   bands. Same selectors as the original rules (declared later, so they
   win); colours unchanged.
   ========================================================================== */
.svc-page .svc-statement__text {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.2vw, 38px);
  font-style: italic;
  font-weight: 400;
  font-variant-caps: normal;
  letter-spacing: normal;
  line-height: 1.35;
  text-transform: none;
}

@media (max-width: 767px) {
  .svc-page .svc-statement__text {
    font-size: clamp(26px, 3.2vw, 38px);
  }
}

@media (max-width: 379px) {
  .svc-page .svc-statement__text {
    font-size: clamp(26px, 3.2vw, 38px);
  }
}

/* ==========================================================================
   Site footer
   Brand (stacked logo + description) | Services | Contact, then the gold
   diamond divider and the bottom row (company line; legal links, cookie
   settings, EN · HU). Same navy texture as the site's other dark sections.
   No gold text: gold only on the diamond divider and its hairline.
   ========================================================================== */
.site-footer {
  --footer-text: #DCD2C1;
  --footer-size: 13px;
  --footer-leading: 1.7;
  background-color: #11223A;
  background-image: url('/assets/navy-panel.webp');
  background-size: cover;
  background-position: center;
  font-family: var(--font-sans);
  font-size: var(--footer-size);
  line-height: var(--footer-leading);
  color: var(--footer-text);
}

.site-footer__inner {
  max-width: var(--shell-default);
  margin: 0 auto;
  padding: 44px 40px 20px;
}

/* Same container and edges as the bottom bar; the logo row and the two
   headings start on the same line */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: start;
  gap: 48px;
}

.site-footer a {
  color: #EFE8DC;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: rgba(251, 248, 242, 0.45);
  text-underline-offset: 3px;
}

/* Stacked cream logo. Its artwork starts 1.9% into the image box, so it is
   pulled left by that much to line up with the description and the © line. */
.site-footer__logo {
  --fl-w: 150px;
  display: inline-block;
  margin-left: calc(var(--fl-w) * -0.019);
  line-height: 0;
}

.site-footer__logo:hover,
.site-footer__logo:focus-visible {
  text-decoration: none;
}

.site-footer__logo img {
  display: block;
  width: var(--fl-w);
  height: auto;
}

/* One size and line height for the text and links of all three columns */
.site-footer__text {
  max-width: 27em;
  margin: 20px 0 0;
  font-size: var(--footer-size);
  line-height: var(--footer-leading);
  color: var(--footer-text);
}

.site-footer__text--short {
  display: none;
}

/* Column headings: cream at ~55%, the same size and spacing as before;
   level with the top of the logo */
.site-footer__heading {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.55);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a,
.site-footer__address a,
.site-footer__line {
  font-size: var(--footer-size);
  font-weight: 400;
  line-height: var(--footer-leading);
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* "Soon": cream outline */
.site-footer__pill {
  display: inline-block;
  padding: 0 7px;
  border: 1px solid rgba(251, 248, 242, 0.45);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.85);
}

.site-footer__address {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-style: normal;
}

/* Phone and city: stacked on desktop, one line on phones */
.site-footer__contact-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-footer__contact-sep {
  display: none;
}

/* Legal links: full labels on desktop, short ones on phones */
.site-footer__label-short {
  display: none;
}

.site-footer__line {
  color: var(--footer-text);
}

/* "In-person meetings…": smaller and quieter, set apart from the details */
.site-footer__note {
  margin-top: 6px;
  max-width: 22em;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(220, 210, 193, 0.68);
}

/* Gold divider: hairline fading out at both ends, small diamond in the middle */
.site-footer__divider {
  position: relative;
  height: 1px;
  margin: 32px 0 16px;
  background: linear-gradient(90deg, transparent, rgba(200, 168, 114, 0.55) 20%, rgba(200, 168, 114, 0.55) 80%, transparent);
}

.site-footer__divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  background: #C8A872;
  transform: translate(-50%, -50%) rotate(45deg);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 32px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(251, 248, 242, 0.55);
}

.site-footer__company {
  margin: 0;
}

.site-footer__prefs {
  display: flex;
  align-items: center;
  gap: 10px 18px;
}

.site-footer__bottom-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.site-footer__legal a {
  color: rgba(251, 248, 242, 0.55);
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: #FBF8F2;
}

.site-footer__legal .site-footer__sep {
  color: rgba(251, 248, 242, 0.35);
}

/* Cookie settings icon (styled by consent-banner.js): cream, no gold hover */
.site-footer .consent-footer-icon-btn {
  margin-left: 0;
  color: rgba(251, 248, 242, 0.55);
}

.site-footer .consent-footer-icon-btn:hover,
.site-footer .consent-footer-icon-btn:focus-visible {
  color: #FBF8F2;
}

.site-footer__sep {
  color: rgba(251, 248, 242, 0.3);
}

.site-footer__cookie {
  line-height: 0;
}

.site-footer__lang {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* EN · HU on the dark footer: active full cream, inactive cream ~55% */
.site-footer__lang-btn {
  padding: 2px;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(251, 248, 242, 0.55);
  cursor: pointer;
  transition: color 0.2s ease;
}

.site-footer__lang-btn:hover {
  color: #FBF8F2;
}

.site-footer__lang-btn.is-active {
  color: #FBF8F2;
  cursor: default;
}

.site-footer :focus-visible {
  outline: 1px solid rgba(251, 248, 242, 0.7);
  outline-offset: 3px;
}

/* Tablets: still three columns, closer together */
@media (max-width: 1024px) {
  .site-footer__grid {
    gap: 32px;
  }
}

/* Phones: one left-aligned column with one left edge: small stacked logo,
   short description, services one per line, contact details one per
   line, ~26px between blocks; below the divider the short legal links,
   the company line on two lines, then cookie settings + EN · HU, all in
   the same small muted cream, evenly spaced */
@media (max-width: 768px) {
  .site-footer__inner {
    padding: 32px 20px 22px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .site-footer__logo {
    --fl-w: 104px;
  }

  .site-footer__text {
    margin-top: 16px;
  }

  .site-footer__text--full {
    display: none;
  }

  .site-footer__text--short {
    display: block;
  }

  .site-footer__heading {
    margin: 0 0 6px;
  }

  .site-footer__links {
    gap: 0;
  }

  .site-footer__links a,
  .site-footer__address a,
  .site-footer__line {
    line-height: 2;
  }

  .site-footer__address,
  .site-footer__contact-row {
    gap: 0;
  }

  .site-footer__note {
    display: none;
  }

  .site-footer__divider {
    margin: 26px 0 20px;
  }

  /* below the divider: legal links, company line, cookie + language */
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    font-size: 12px;
  }

  .site-footer__bottom-end {
    display: contents;
  }

  .site-footer__legal {
    order: 1;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .site-footer__company {
    order: 2;
  }

  .site-footer__prefs {
    order: 3;
  }

  /* the 15px icon sits centred in a 26px button: pulled onto the left edge */
  .site-footer__prefs .consent-footer-icon-btn {
    margin-left: -5.5px;
  }

  .site-footer__label-full,
  .site-footer__company-sep {
    display: none;
  }

  .site-footer__label-short,
  .site-footer__company span:not(.site-footer__company-sep) {
    display: block;
  }

  .site-footer__label-short {
    display: inline;
  }
}

/* ==========================================================================
   About page (.svc-page--about) — sections 1–8 (.ab-*): hero with navy
   portrait panel, statement, founder band, expectations, steps, fit boxes,
   numbers and values. The founder quote, fact strip and CTA keep their
   .svc-* styles above. Everything stacks into one column on mobile.
   ========================================================================== */
.svc-page--about {
  --ab-gold-deep: #9C7B45;
  --ab-body: rgba(var(--navy-rgb), 0.82);
}

.svc-page--about .ab-section {
  padding: 90px 0;
}

.svc-page--about .ab-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
}

.svc-page--about .ab-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ab-gold-deep);
}

/* --- 1. Hero --- */
.svc-page--about .ab-hero {
  padding-top: 72px;
  padding-bottom: 45px;
}

.svc-page--about .ab-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.svc-page--about .ab-hero__title {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--navy);
}

.svc-page--about .ab-hero__title span {
  display: block;
}

.svc-page--about .ab-hero__title-accent {
  color: var(--ab-gold-deep);
}

.svc-page--about .ab-hero__text {
  max-width: 540px;
  margin: 28px 0 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--ab-body);
}

.svc-page--about .ab-hero__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  justify-self: end;
  aspect-ratio: 4 / 5;
  background-color: #11223A;
  background-image: url('/assets/about-panel-navy-texture.webp');
  background-size: cover;
  background-position: center;
}

/* --- 2. Statement --- */
.svc-page--about .ab-statement {
  padding: 45px 0;
}

.svc-page--about .ab-statement__text {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--navy);
  text-wrap: balance;
}

/* --- 3. Essay: chapters with a sticky margin label, drop cap, bold lead
   sentences and an ornament before the last chapter. --- */
.svc-page--about .ab-essay {
  --ab-margin: 180px;
  --ab-gap: 48px;
  padding: 0;
}

.svc-page--about .ab-essay__inner {
  max-width: calc(var(--ab-margin) + var(--ab-gap) + 640px);
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: content-box;
}

.svc-page--about .ab-chapter {
  position: relative;
  display: grid;
  grid-template-columns: var(--ab-margin) minmax(0, 640px);
  gap: var(--ab-gap);
  padding: 40px 0;
}

.svc-page--about .ab-chapter__label {
  position: sticky;
  top: calc(var(--header-height) + 32px);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(200, 168, 114, 0.45);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ab-gold-deep);
}

.svc-page--about .ab-chapter__body {
  position: relative;
}

.svc-page--about .ab-chapter__title {
  position: relative;
  z-index: 1;
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--navy);
}

.svc-page--about .ab-chapter__p {
  position: relative;
  z-index: 1;
  margin: 0 0 1.1em;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.95;
  color: var(--ab-body);
}

.svc-page--about .ab-chapter__p:last-child {
  margin-bottom: 0;
}

.svc-page--about .ab-chapter__p--dropcap::first-letter {
  float: left;
  margin: 0.06em 12px 0 0;
  font-family: var(--font-display);
  font-size: 68px;
  line-height: 0.82;
  color: var(--ab-gold-deep);
}

/* The ornament lines up with the text column */
.svc-page--about .ab-essay__offset {
  max-width: 640px;
  margin-left: calc(var(--ab-margin) + var(--ab-gap));
}

.svc-page--about .ab-orn {
  display: flex;
  gap: 14px;
  padding: 24px 0 8px;
}

.svc-page--about .ab-orn span {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* "How we work": each paragraph opens with a bold lead sentence */
.svc-page--about .ab-chapter--how .ab-chapter__p {
  margin-bottom: 24px;
}

.svc-page--about .ab-chapter--how .ab-chapter__p:last-child {
  margin-bottom: 0;
}

.svc-page--about .ab-lead {
  font-weight: 600;
  color: var(--navy);
}

/* --- 4. Closing CTA: the shared cream CTA on the page's paper, framed by
   a thin gold border, with the mark on top. --- */
.svc-page--about .svc-cta--framed {
  padding-top: 40px; /* + the last chapter's 40px = ~80px above the frame */
  padding-bottom: 90px;
}

.svc-page--about .svc-cta--framed .svc-cta__inner {
  box-sizing: border-box;
  max-width: 720px;
  padding: 56px 48px;
  border: 1px solid rgba(200, 168, 114, 0.6);
  border-radius: 0;
}

.svc-page--about .svc-cta__mark {
  display: block;
  width: auto;
  height: 48px;
  margin: 0 auto 20px;
}

/* --- Mobile: one column everywhere --- */
@media (max-width: 768px) {
  .svc-page--about .ab-section {
    padding: 56px 0;
  }

  .svc-page--about .ab-hero {
    padding-top: 40px;
    padding-bottom: 28px;
  }

  .svc-page--about .ab-statement {
    padding: 28px 0 20px;
  }

  .svc-page--about .ab-wrap {
    padding: 0 24px;
  }

  .svc-page--about .ab-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* a smaller portrait, so the stacked hero stays compact */
  .svc-page--about .ab-hero__panel {
    max-width: 280px;
    justify-self: center;
  }

  .svc-page--about .ab-hero__title {
    font-size: clamp(30px, 8.6vw, 34px);
  }

  .svc-page--about .ab-hero__text {
    margin-top: 20px;
    line-height: 1.8;
  }

  .svc-page--about .ab-statement__text {
    font-size: 21px;
  }

  .svc-page--about .ab-essay {
    padding: 0 0 56px;
  }

  .svc-page--about .ab-essay__inner {
    padding: 0 24px;
  }

  .svc-page--about .ab-chapter {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 32px 0;
  }

  .svc-page--about .ab-chapter__label {
    position: static;
    display: inline-block;
    font-size: 12.5px;
  }

  .svc-page--about .ab-chapter__title {
    font-size: 24px;
    margin-bottom: 18px;
  }

  .svc-page--about .ab-chapter__p {
    font-size: 16px;
    line-height: 1.85;
  }

  .svc-page--about .ab-chapter__p--dropcap::first-letter {
    margin-right: 10px;
    font-size: 56px;
    line-height: 0.86;
  }

  .svc-page--about .ab-essay__offset {
    margin-left: 0;
  }

  .svc-page--about .ab-essay {
    padding-bottom: 0;
  }
}

/* About CTA on phones: separate block so it switches with the shared
   .svc-* section components (phones up to 767px). */
@media (max-width: 767px) {
  .svc-page--about .svc-cta--framed {
    padding-top: 24px;
    padding-bottom: 64px;
  }

  .svc-page--about .svc-cta--framed .svc-cta__inner {
    width: calc(100% - 40px);
    padding: 40px 24px;
  }
}

/* ==========================================================================
   Mobile heroes: one full screen tall (service pages, About, Brand Design;
   the homepage has its own block in home-page.css). The fixed navbar sits
   above these heroes, so they fill the screen minus its height. min-height,
   not height: taller content (small phones) makes the hero grow. 100vh is
   the fallback for browsers without svh. Text in the upper part with a top
   space that follows the screen height; the ticker (where there is one)
   pinned to the bottom; the free space in between stretches or shrinks.
   Shorter screens (< 700px tall) get a slightly smaller heading and tighter
   spacing. Desktop is unchanged.
   ========================================================================== */
@media (max-width: 768px) {
  /* Service pages (Audit, Consultancy, Mentoring, Ad Management) */
  .svc-page > .svc-hero {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    justify-content: flex-start;
  }

  .svc-page > .svc-hero .svc-hero__inner {
    padding-top: clamp(24px, 6vh, 72px);
    padding-top: clamp(24px, 6svh, 72px);
  }

  .svc-page > .svc-hero .svc-hero__bottom {
    margin-top: auto;
    padding-top: 40px; /* the former fixed gap above the ticker, now a minimum */
  }

  /* About: copy at the top, the portrait panel at the bottom */
  .svc-page--about .ab-hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    padding-top: clamp(24px, 5vh, 64px);
    padding-top: clamp(24px, 5svh, 64px);
  }

  .svc-page--about .ab-hero > .ab-hero__grid {
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
    align-content: space-between;
  }

  /* Brand Design: photo on top, text below it */
  .svc-page--brand .bd-hero {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
  }
}

@media (max-width: 768px) and (max-height: 700px) {
  .svc-page .svc-hero__title {
    margin-top: 12px;
    font-size: clamp(20px, 6.3vw, 23.4px);
  }

  .svc-page .svc-hero--mentoring .svc-hero__title,
  .svc-page .svc-hero--consultancy .svc-hero__title {
    font-size: clamp(17.4px, 5.54vw, 20.6px);
  }

  .svc-page .svc-hero__divider,
  .svc-page .svc-hero__subtitle {
    margin-top: 16px;
  }

  .svc-page .svc-hero__cta,
  .svc-page .svc-hero--mentoring .svc-hero__cta {
    margin-top: 22px;
  }

  .svc-page > .svc-hero .svc-hero__bottom {
    padding-top: 28px;
  }

  .svc-page--about .ab-hero__title {
    font-size: clamp(27px, 7.7vw, 30.6px);
  }

  .svc-page--about .ab-hero__text {
    margin-top: 14px;
  }

  .svc-page--about .ab-hero__grid {
    gap: 28px;
  }

  .svc-page--about .ab-hero__panel {
    max-width: 240px;
  }

  .svc-page--brand .bd-hero__inner {
    gap: 28px;
  }

  .svc-page--brand .bd-hero__title {
    font-size: 27px;
  }
}

/* ==========================================================================
   Mobile readability and tap targets (all pages, phones only). Hit areas
   grow through padding balanced by an equal negative margin, so nothing
   moves; headings balance their lines so none ends on a lone short word.
   ========================================================================== */
@media (max-width: 768px) {
  main :is(h1, h2, h3) {
    text-wrap: balance;
  }

  /* "Learn more" / "or send us a message" style arrow links: ~43px tall */
  .link-arrow {
    padding-block: 11px;
    margin-block: -11px;
  }

  /* Footer */
  .site-footer__legal {
    gap: 4px 10px;
  }

  .site-footer__legal a {
    display: inline-block;
    padding: 6px 4px;
    margin: -6px -4px;
  }

  .site-footer__lang-btn {
    padding: 10px 6px;
    margin: -10px -6px;
  }

  /* Mobile menu e-mail link */
  .header-nav__mail {
    display: inline-block;
    padding: 12px 8px;
    margin: -12px -8px;
  }
}

/* ==========================================================================
   Full-screen heroes (service pages, Brand Design, About) — every width.
   Each hero is exactly one screen tall (100svh, 100vh fallback) and starts
   at the very top, behind the fixed navbar; the navbar's height is the
   hero's top padding. The content is centred in the space between the
   navbar and the ticker (or the hero's bottom edge). Kept last so it wins
   over the earlier per-page min-height / padding rules.
   ========================================================================== */
.svc-page.service-page--standalone:has(> .svc-hero, > .bd-hero, > .ab-hero) {
  padding-top: 0;
}

/* --- Service pages (Audit, Consultancy, Mentoring, Ad Management) ---
   Desktop: exactly one screen, content centred above the ticker. */
@media (min-width: 769px) {
  .svc-page > .svc-hero {
    box-sizing: border-box;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    justify-content: flex-start;
    padding-top: var(--header-height);
    padding-bottom: 0;
  }

  .svc-page > .svc-hero > .svc-hero__inner {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
    padding-top: clamp(8px, 3vh, 40px);
    padding-bottom: clamp(8px, 3vh, 40px);
  }

  .svc-page > .svc-hero > .svc-hero__bottom {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 0;
  }

  /* Short screens: spacing and heading follow the screen height */
  .svc-page > .svc-hero .svc-hero__title {
    margin-top: clamp(10px, 2vh, 16px);
  }

  .svc-page > .svc-hero .svc-hero__divider,
  .svc-page > .svc-hero .svc-hero__subtitle {
    margin-top: clamp(12px, 2.6vh, 22px);
  }

  .svc-page > .svc-hero .svc-hero__cta {
    margin-top: clamp(18px, 4vh, 36px);
  }
}

/* Mobile: the earlier layout (text in the upper part, the photo's phone /
   laptop / notebook below it, ticker at the bottom), now starting behind
   the navbar — so the navbar height is added to the former 20px top
   padding. At least one screen tall; taller content makes it grow. */
@media (max-width: 768px) {
  .svc-page > .svc-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--header-height) + 20px);
  }
}

/* --- About: copy + portrait panel, centred as one block --- */
.svc-page--about .ab-hero {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding-top: var(--header-height);
  padding-bottom: 0;
}

.svc-page--about .ab-hero > .ab-hero__grid {
  flex: 0 1 auto;
  width: 100%;
  box-sizing: border-box;
}

/* The 4:5 panel is sized from the screen height too, so it never pushes
   the hero past one screen */
.svc-page--about .ab-hero__panel {
  width: min(100%, 480px, calc((100vh - var(--header-height) - 64px) * 0.8));
  width: min(100%, 480px, calc((100svh - var(--header-height) - 64px) * 0.8));
  max-width: none;
}

/* --- Brand Design (desktop): text column + full-height photo --- */
@media (min-width: 769px) {
  .svc-page--brand .bd-hero {
    box-sizing: border-box;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding-top: var(--header-height);
  }
}

@media (max-width: 768px) {
  .svc-page--about .ab-hero > .ab-hero__grid {
    align-content: center;
    gap: clamp(20px, 4vh, 40px);
  }

  .svc-page--about .ab-hero__panel {
    width: min(280px, calc(34vh * 0.8));
    width: min(280px, calc(34svh * 0.8));
    justify-self: center;
  }

  .svc-page--about .ab-hero__title {
    font-size: clamp(26px, 4.8vh, 34px);
  }

  .svc-page--about .ab-hero__text {
    margin-top: clamp(12px, 2.4vh, 20px);
  }

  /* Brand Design (mobile): the photo takes whatever height the text
     leaves, so photo + text fill exactly one screen */
  .svc-page--brand .bd-hero,
  .svc-page--brand .bd-hero:has(+ .ornament-divider) {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding: var(--header-height) 0 clamp(20px, 4vh, 40px);
  }

  .svc-page--brand .bd-hero > .bd-hero__inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: clamp(20px, 3.5vh, 40px);
  }

  .svc-page--brand .bd-hero__media {
    flex: 1 1 0;
    min-height: 96px;
    aspect-ratio: auto;
  }

  .svc-page--brand .bd-hero__media img {
    object-fit: cover;
  }

  .svc-page--brand .bd-hero__text {
    flex: 0 0 auto;
  }

  .svc-page--brand .bd-hero__title {
    margin-top: clamp(10px, 2vh, 18px);
    font-size: clamp(24px, 4.2vh, 30px);
  }

  .svc-page--brand .bd-hero__lead {
    margin-top: clamp(10px, 2vh, 18px);
  }

  .svc-page--brand .bd-hero__cta {
    margin-top: clamp(16px, 3.4vh, 34px);
  }

  .svc-page--brand .bd-hero__note {
    margin-top: clamp(12px, 2.4vh, 22px);
  }
}

/* ==========================================================================
   Ad Management hero, desktop: the laptop photo. The photo (2560x1435) is
   drawn as a box placed by the laptop inside it: the laptop starts 22% down
   the photo, so the box sits 22% of its height above "24px below the
   navbar"; it is right-aligned (the laptop keeps its bleed off the right
   edge) and may run past the ticker line and the hero's bottom edge
   (clipped there), in front of the ticker. Its size, --am-h (the photo's
   height), is set by script.js from the real text on the page: as large as
   1.5x the band-fitted size while the laptop stays at least 32px from the
   hero text and button. Without JS the fallback below is a conservative
   fit of the same rule. The photo's left and top edges fade into the hero
   background, which matches the photo's own navy.
   ========================================================================== */
@media (min-width: 769px) {
  .svc-page .svc-hero--ad-mgmt {
    --am-band-top: calc(var(--header-height) + 24px);
    --am-h: max(calc(79vw - 569px), calc(158vw - 76vh - 993px));
    background-color: #0b182a;
    /* darkens towards the bottom like the photo's shadow under the laptop */
    background-image: linear-gradient(to bottom, #0b182a 45%, #080f1a 100%);
  }

  /* Full photo, behind the ticker and the text */
  .svc-page .svc-hero--ad-mgmt::before,
  .svc-page .svc-hero--ad-mgmt::after {
    inset: auto;
    right: 0;
    top: calc(var(--am-band-top) - 0.22 * var(--am-h));
    width: calc(var(--am-h) * 2560 / 1435);
    height: var(--am-h);
    background-size: 100% 100%;
    background-position: right top;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 35%),
      linear-gradient(to bottom, transparent 0%, #000 16%, #000 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 35%),
      linear-gradient(to bottom, transparent 0%, #000 16%, #000 94%, transparent 100%);
    mask-composite: intersect;
  }
}

/* The laptop in front of the ticker: a second copy of the photo, same size
   and place, clipped to the laptop's outline (its left edge per 2% slice,
   the same profile script.js uses), so the ticker line and text pass behind
   the laptop but stay visible over the empty navy. The hero text sits above
   both layers (the laptop never reaches it). */
@media (min-width: 769px) {
  .svc-page .svc-hero--ad-mgmt::after {
    content: '';
    position: absolute;
    z-index: 2;
    background-image: var(--svc-hero-image);
    background-repeat: no-repeat;
    pointer-events: none;
    clip-path: polygon(
      100% 22%, 75.8% 22%, 75.8% 24%, 76.8% 24%, 76.8% 26%, 76.6% 26%,
      76.6% 28%, 76.5% 28%, 76.5% 30%, 76.3% 30%, 76.3% 32%, 76.2% 32%,
      76.2% 34%, 76.0% 34%, 76.0% 36%, 75.8% 36%, 75.8% 38%, 75.7% 38%,
      75.7% 40%, 75.5% 40%, 75.5% 42%, 75.4% 42%, 75.4% 44%, 75.2% 44%,
      75.2% 46%, 75.1% 46%, 75.1% 48%, 74.9% 48%, 74.9% 50%, 74.7% 50%,
      74.7% 52%, 74.6% 52%, 74.6% 54%, 74.4% 54%, 74.4% 56%, 74.4% 56%,
      74.4% 58%, 74.4% 58%, 74.4% 60%, 72.3% 60%, 72.3% 62%, 71.5% 62%,
      71.5% 64%, 70.8% 64%, 70.8% 66%, 70.0% 66%, 70.0% 68%, 69.2% 68%,
      69.2% 70%, 68.3% 70%, 68.3% 72%, 67.6% 72%, 67.6% 74%, 66.8% 74%,
      66.8% 76%, 66.0% 76%, 66.0% 78%, 65.3% 78%, 65.3% 80%, 64.4% 80%,
      64.4% 82%, 63.7% 82%, 63.7% 84%, 62.9% 84%, 62.9% 86%, 62.4% 86%,
      62.4% 88%, 62.5% 88%, 62.5% 90%, 65.1% 90%, 65.1% 92%, 68.7% 92%,
      68.7% 94%, 72.0% 94%, 72.0% 96%, 75.3% 96%, 75.3% 98%, 79.4% 98%,
      79.4% 100%, 100% 100%
    );
  }

  .svc-page .svc-hero--ad-mgmt > .svc-hero__inner {
    z-index: 3;
  }
}

/* ==========================================================================
   About hero: one business card the visitor can turn over (HTML/CSS; the
   turning is driven by script.js). It lies directly on the page's cream
   surface, centred in the right column, with a hint below it.
   - At rest the card is a plain 2D element (rotate(-2deg)) showing only the
     current side, so the logo, text and QR render as crisp vectors. The 3D
     setup (preserve-3d, will-change, both faces) exists only while turning
     (.is-turning) or during the entrance (.is-pre / .is-entering).
   - .ab-flip__card is a size container: everything on the card is in cqw
     (1% of the card's width; the card is 64.7cqw tall at 85:55).
   - The D-mark SVGs keep their artwork inside ~80% of their square box
     (offset ~8% left / 9% top), so the image boxes are 1.25x the visible
     mark with object-fit: contain — the full mark, never cropped.
   ========================================================================== */
.svc-page--about .ab-hero__panel {
  display: block;
  width: 100%;
  max-width: 440px;
  aspect-ratio: auto;
  justify-self: center;
  overflow: visible;
  background: none;
}

.svc-page--about .ab-flip {
  perspective: 1100px;
}

.svc-page--about .ab-flip__card {
  --ab-ease-turn: cubic-bezier(0.45, 0.05, 0.25, 1);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 85 / 55;
  container-type: inline-size;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transform: rotate(-2deg);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}

/* keyboard focus only (script.js adds .is-pointer on mouse / touch, which
   some browsers otherwise treat as focus-visible on a tabindex element) */
.svc-page--about .ab-flip__card:focus:not(:focus-visible),
.svc-page--about .ab-flip__card.is-pointer:focus {
  outline: none;
}

.svc-page--about .ab-flip__card:focus-visible:not(.is-pointer) {
  outline: 2px solid #9C7B45;
  outline-offset: 6px;
}

/* Resting shadow (light from top-left), on its own layer so it can shrink
   while the card turns instead of rotating with the faces */
.svc-page--about .ab-flip__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(17, 34, 58, 0.25),
    0 6px 12px -4px rgba(17, 34, 58, 0.25),
    0 18px 30px -10px rgba(17, 34, 58, 0.3),
    0 40px 60px -24px rgba(17, 34, 58, 0.35);
  pointer-events: none;
}

.svc-page--about .ab-flip__card.is-turning::before {
  animation: ab-flip-shadow 0.85s var(--ab-ease-turn);
}

@keyframes ab-flip-shadow {
  0%, 100% { opacity: 1; transform: none; filter: none; }
  50% { opacity: 0.45; transform: scale(0.82, 0.96); filter: blur(4px); }
}

/* Entrance: starts slightly tilted (.is-pre), settles over 1.1s
   (.is-entering only while it moves) */
.svc-page--about .ab-flip__card.is-pre {
  transform: translateY(-6px) rotateX(6deg) rotateY(-14deg) rotate(-2deg);
}

.svc-page--about .ab-flip__card.is-pre,
.svc-page--about .ab-flip__card.is-entering {
  will-change: transform;
}

.svc-page--about .ab-flip__inner {
  position: absolute;
  inset: 0;
}

.svc-page--about .ab-flip__face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 8px;
  /* smooths the rotated card edges */
  outline: 1px solid transparent;
}

/* At rest: only the current side, flat */
.svc-page--about .ab-flip__card:not(.is-turning) .ab-flip__face--back,
.svc-page--about .ab-flip__card.is-flipped:not(.is-turning) .ab-flip__face--front {
  visibility: hidden;
}

.svc-page--about .ab-flip__card.is-flipped:not(.is-turning) .ab-flip__face--back {
  visibility: visible;
}

/* While turning: real 3D, both faces, backfaces hidden */
.svc-page--about .ab-flip__card.is-turning {
  transform-style: preserve-3d;
  will-change: transform;
}

.svc-page--about .ab-flip__card.is-turning .ab-flip__inner {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.85s var(--ab-ease-turn);
}

.svc-page--about .ab-flip__card.is-turning.is-flipped .ab-flip__inner {
  transform: rotateY(180deg);
}

/* .no-anim sets a turn's starting angle without animating to it */
.svc-page--about .ab-flip__card.no-anim .ab-flip__inner {
  transition: none;
}

.svc-page--about .ab-flip__card.is-turning .ab-flip__face,
.svc-page--about .ab-flip__card.is-turning .ab-flip__face * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* The front face gets its own 3D plane too (as the back has with its
   rotateY), so both are culled the same way */
.svc-page--about .ab-flip__card.is-turning .ab-flip__face--front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* Backface culling alone can miss the faces' positioned content (the D
   mark, text and QR sit above the texture with z-index, which some
   browsers draw on their own layer), so the side that faces away is also
   hidden outright: the arriving side until the card is edge-on, the
   leaving side after it (script.js: .to-back / .to-front, .past-half) */
.svc-page--about .ab-flip__card.is-turning.to-back:not(.past-half) .ab-flip__face--back,
.svc-page--about .ab-flip__card.is-turning.to-back.past-half .ab-flip__face--front,
.svc-page--about .ab-flip__card.is-turning.to-front:not(.past-half) .ab-flip__face--front,
.svc-page--about .ab-flip__card.is-turning.to-front.past-half .ab-flip__face--back {
  visibility: hidden;
}

.svc-page--about .ab-flip__card.is-turning .ab-flip__face--back {
  transform: rotateY(180deg);
}

/* Content above the grain / texture */
.svc-page--about .ab-flip__face > * {
  position: relative;
  z-index: 1;
}

/* Front: textured navy card stock, logo only. Edge highlight on top, a
   2px darker paper edge along the bottom and right. */
.svc-page--about .ab-flip__face--front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #13253F;
  background-image: url('/assets/about-panel-navy-texture.webp');
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    inset -1px -1.5px 1px #0B1728;
}

/* Mark only: visible ~40% of the card height (25.9cqw). The artwork sits
   ~5% left of and ~1% above its box centre, so the box is nudged to put
   the visible mark at the card's centre. */
.svc-page--about .ab-flip__front-mark {
  display: block;
  width: 32.3cqw;
  height: 32.3cqw;
  max-width: none;
  object-fit: contain;
  /* offset with left/top (it is position: relative), not a transform,
     so the mark doesn't get a layer of its own during the 3D turn */
  left: 1.65cqw;
  top: 0.3cqw;
}

/* Back: warm paper with a fine grain under the content */
.svc-page--about .ab-flip__face--back {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7cqw;
  background-color: #FBF7EE;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    inset -1px -1.5px 1px #DDD3BE;
}

.svc-page--about .ab-flip__face--back::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  /* a third calmer than before (0.5) */
  opacity: 0.33;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.svc-page--about .ab-flip__top,
.svc-page--about .ab-flip__bottom {
  display: flex;
  justify-content: space-between;
  gap: 4cqw;
}

.svc-page--about .ab-flip__top {
  align-items: flex-start;
}

.svc-page--about .ab-flip__bottom {
  align-items: flex-end;
}

.svc-page--about .ab-flip__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 5.1cqw;
  font-weight: 400;
  line-height: 1.2;
  color: #11223A;
  white-space: nowrap;
}

.svc-page--about .ab-flip__role {
  margin: 1.05cqw 0 0;
  font-family: var(--font-sans);
  font-size: 2.9cqw;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #9C7B45;
}

/* Mark: visible ~15% of the card height; pulled up and right by its empty
   margin so the artwork's top aligns with the name and its right edge with
   the card padding */
.svc-page--about .ab-flip__mark {
  flex: 0 0 auto;
  display: block;
  width: 12.1cqw;
  height: 12.1cqw;
  max-width: none;
  object-fit: contain;
  margin: -0.5cqw -2.2cqw 0 0;
}

.svc-page--about .ab-flip__contact {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 2.75cqw;
  font-weight: 500;
  line-height: 1.55;
  color: #11223A;
}

.svc-page--about .ab-flip__city {
  color: rgba(17, 34, 58, 0.55);
}

/* QR: 22% of the card width, square */
.svc-page--about .ab-flip__qr {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22cqw;
}

.svc-page--about .ab-flip__qr img {
  display: block;
  width: 22cqw;
  height: 22cqw;
  max-width: none;
  object-fit: contain;
}

.svc-page--about .ab-flip__qr-label {
  margin-top: 1.3cqw;
  font-family: var(--font-sans);
  font-size: 1.8cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: #9C7B45;
}

/* Hint below the card */
.svc-page--about .ab-flip__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: #9C7B45;
}

.svc-page--about .ab-flip__hint-icon {
  flex: 0 0 auto;
  display: block;
}

/* Reduced motion: no entrance tilt and no turning animation (script.js
   switches sides instantly, without .is-turning) */
@media (prefers-reduced-motion: reduce) {
  .svc-page--about .ab-flip__card {
    transition: none;
  }

  .svc-page--about .ab-flip__card.is-pre {
    transform: rotate(-2deg);
  }
}

/* Mobile: below the text, full width of the page (its 24px side margins),
   with ~48px above the card and ~48px from the hint to the quote below:
   - above: the grid gap, plus the few px the -2deg rotation lifts the
     card's top corner (~1.75% of its width);
   - below: 20px hero padding + the statement's own 28px top padding.
   The hero's height follows its content here. */
@media (max-width: 768px) {
  .svc-page--about .ab-hero__panel {
    max-width: none;
    justify-self: stretch;
  }

  .svc-page--about .ab-hero {
    height: auto;
    min-height: 0;
    padding-bottom: 20px;
  }

  .svc-page--about .ab-hero > .ab-hero__grid {
    gap: calc(47px + 1.75vw);
  }
}

/* ==========================================================================
   Brand Design hero photo: the printed booklet on plain cream - one image
   for desktop and mobile (brand-design-hero.webp, 1200x1500, 4:5).
   - desktop: fills the right half (straight left edge, no fade), cover,
     centred;
   - mobile: the edge-to-edge photo on top in a 4:5 box (the photo's own
     ratio), cover; the hero grows past one screen where photo + text need
     it.
   ========================================================================== */
@media (min-width: 769px) {
  .svc-page--brand .bd-hero__media img {
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 768px) {
  .svc-page--brand .bd-hero,
  .svc-page--brand .bd-hero:has(+ .ornament-divider) {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  .svc-page--brand .bd-hero__media {
    flex: 0 0 auto;
    align-self: stretch;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .svc-page--brand .bd-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* Brand Design hero, portrait tablets (769-1199px wide, portrait; 700-768px
   already use the phone rules): the phone layout instead of the two-column
   desktop one, whose tall narrow photo box would zoom deep into the
   landscape desktop photo. The 4:5 photo (brand-design-hero.webp, served by
   the <picture> fallback on these screens) sits edge to edge in a
   full-width 4:5 box above the text, so the whole booklet shows. Same
   values as the phone rules. */
@media (min-width: 769px) and (max-width: 1199px) and (orientation: portrait) {
  .svc-page--brand .bd-hero,
  .svc-page--brand .bd-hero:has(+ .ornament-divider) {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--header-height) 0 clamp(20px, 4vh, 40px);
  }

  .svc-page--brand .bd-hero > .bd-hero__inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 20px;
    gap: clamp(20px, 3.5vh, 40px);
  }

  .svc-page--brand .bd-hero__media {
    order: -1;
    flex: 0 0 auto;
    align-self: stretch;
    width: auto;
    min-height: 0;
    margin: 0 -20px;
    aspect-ratio: 4 / 5;
  }

  .svc-page--brand .bd-hero__media img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .svc-page--brand .bd-hero__text {
    flex: 0 0 auto;
  }

  .svc-page--brand .bd-hero__title {
    margin-top: clamp(10px, 2vh, 18px);
    font-size: clamp(24px, 4.2vh, 30px);
  }

  .svc-page--brand .bd-hero__lead {
    max-width: none;
    margin-top: clamp(10px, 2vh, 18px);
    font-size: 15.5px;
  }

  .svc-page--brand .bd-hero__cta {
    margin-top: clamp(16px, 3.4vh, 34px);
  }

  .svc-page--brand .bd-hero__note {
    margin-top: clamp(12px, 2.4vh, 22px);
  }
}

/* Landscape tablets (769-1024px): the desktop layout's photo box is narrow
   (~0.66:1), so a centred cover would cut the booklet's left edge by ~2%;
   shifting the photo slightly keeps the whole booklet in view. */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .svc-page--brand .bd-hero__media img {
    object-position: 42% 50%;
  }
}

/* Landscape tablets with a touch screen (up to 1380px: iPad Pro 13" is
   1376px wide): the two-column layout with the 4:5 photo
   (brand-design-hero.webp, the <picture> fallback on these screens). Its
   booklet spans 22-74% of the width and 16-78% of the height, so cover
   keeps all of it (logo, title, version line) in boxes from about 0.42:1
   to 1.29:1; the photo column here is about 0.6-0.75:1, so only satin is
   cropped. The photo runs past the column to the screen edge, so it is
   aligned towards its right end (75%) to keep the booklet near the
   column's centre. */
@media (min-width: 769px) and (max-width: 1380px) and (min-height: 600px) and (orientation: landscape) and (pointer: coarse) {
  .svc-page--brand .bd-hero__media img {
    object-fit: cover;
    object-position: 75% 47%;
  }
}

/* ==========================================================================
   Google Ads Audit page (.service-page--audit) — page-scoped tweaks.
   ========================================================================== */

/* Portrait tablets (700-1199px, portrait): the hero arrangement the page
   shows at iPad Mini width (text in the upper part, the magnifier at the
   bottom right, cropped by the edge) instead of the desktop one, where the
   text overlapped the magnifier. 700-767px already use it; from 768px the
   desktop rules are overridden here. The hero text is scaled like the
   homepage hero on portrait tablets (home-page.css). */
@media (min-width: 700px) and (max-width: 1199px) and (orientation: portrait) {
  .svc-page.service-page--audit > .svc-hero {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    justify-content: flex-start;
    padding: calc(var(--header-height) + 20px) 20px 0;
  }

  .svc-page.service-page--audit > .svc-hero::before {
    background-image:
      linear-gradient(to bottom, rgba(var(--navy-rgb), 0.85), rgba(var(--navy-rgb), 0.5) 40%, rgba(var(--navy-rgb), 0.15) 70%),
      url('/assets/audit-hero-mobile.webp?v=3');
    background-size: 100% 100%, cover;
    background-position: center, right bottom;
  }

  .svc-page.service-page--audit > .svc-hero > .svc-hero__inner {
    flex: 0 0 auto;
    justify-content: flex-start;
    max-width: 100%;
    padding-top: clamp(24px, 6vh, 72px);
    padding-top: clamp(24px, 6svh, 72px);
    padding-bottom: 40px;
  }

  .svc-page.service-page--audit > .svc-hero > .svc-hero__bottom {
    margin-top: auto;
    padding-top: 40px;
  }

  /* Text scale (same values as the homepage hero on portrait tablets) */
  .svc-page.service-page--audit .svc-hero__eyebrow {
    font-size: clamp(0.668rem, 1.18vw, 0.825rem); /* the homepage tablet scale x 11/14 */
  }

  .svc-page.service-page--audit > .svc-hero .svc-hero__title {
    margin-top: 22px;
    font-size: clamp(2.8rem, 5.8vw, 3.9rem);
  }

  .svc-page.service-page--audit > .svc-hero .svc-hero__divider {
    width: min(100%, 420px);
    margin-top: 31px;
  }

  .svc-page.service-page--audit > .svc-hero .svc-hero__divider::after {
    width: 10px;
    height: 10px;
  }

  .svc-page.service-page--audit > .svc-hero .svc-hero__subtitle {
    margin-top: 31px;
    max-width: 34em;
    font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  }

  .svc-page.service-page--audit > .svc-hero .svc-hero__cta {
    margin-top: 50px;
    font-size: 13.2px;
    padding: 17px 34px;
  }
}

/* Phones: the hero photo without the navy gradient on top (same image and
   position) */
@media (max-width: 699px) {
  .svc-page.service-page--audit .svc-hero::before {
    background-image: url('/assets/audit-hero-mobile.webp?v=3');
    background-size: cover;
    background-position: right bottom;
  }
}

/* Phones (the sections' phone layout, up to 767px): twice the vertical space
   between sections. Only the light sections' outer padding doubles; the
   navy statement and CTA bands keep their inner padding, so spacing inside
   sections is unchanged. */
@media (max-width: 767px) {
  .svc-page.service-page--audit > .svc-steps,
  .svc-page.service-page--audit > .svc-rows,
  .svc-page.service-page--audit > .svc-panels {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* First section after the hero: the same 64px top spacing as the others */
  .svc-page.service-page--audit > .svc-media--split {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* "After the audit" note: half the gap above it (the cards section's
     64px bottom padding only); the space below it is unchanged */
  .svc-page.service-page--audit > .svc-split {
    padding-top: 0;
    padding-bottom: 104px;
  }

  .svc-page.service-page--audit > .svc-faq {
    padding-top: 112px;
    padding-bottom: 64px;
  }
}

/* ==========================================================================
   Paid Ads Consultancy hero: the phone photo is placed by script.js
   (.cs-placed + --cs-*), so that at every size the hero is one screen
   (100svh) with the ticker visible, and the phone never covers the text
   block or the CTA (it may touch the CTA). The photo is drawn as a box at
   the hero's right edge; its edges fade into the hero background, which
   matches the photos' near-black fabric. A separate overlay layer (::after)
   carries the navy gradient where there is one. Without JS the CSS above
   (cover) still applies.
   - phones (up to 768px) and portrait tablets (700-1199px, portrait): the
     mobile photo, the phone just above the ticker, below the CTA;
   - landscape tablets and desktop: the desktop photo at its current size
     (smaller where needed), the phone starting below the navbar.
   ========================================================================== */
.svc-page .svc-hero--consultancy.cs-placed {
  background-color: #070A10;
}

.svc-page .svc-hero--consultancy.cs-placed::before {
  inset: auto;
  right: var(--cs-right, 0px);
  top: var(--cs-top);
  width: var(--cs-w);
  height: var(--cs-h);
  background-image: var(--cs-img);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 14%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 14%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

.svc-page .svc-hero--consultancy.cs-placed::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--cs-overlay, none);
  pointer-events: none;
}

/* Desktop / landscape: the same diagonal navy gradient as before */
@media (min-width: 769px) {
  .svc-page .svc-hero--consultancy.cs-placed {
    --cs-overlay: linear-gradient(45deg, rgba(var(--navy-rgb), 0.85) 15%, rgba(var(--navy-rgb), 0.55) 45%, rgba(var(--navy-rgb), 0.1) 80%);
  }
}

/* Phones: no gradient over the photo; exactly one screen tall with the
   ticker at the bottom; the room below the CTA is for the phone, so the
   fixed 240px bottom padding goes */
@media (max-width: 768px) {
  .svc-page > .svc-hero--consultancy.cs-placed {
    height: 100vh;
    height: 100svh;
    min-height: 0;
  }

  .svc-page .svc-hero--consultancy.cs-placed .svc-hero__inner {
    padding-bottom: 0;
  }
}

@media (max-width: 699px) {
  .svc-page .svc-hero--consultancy::before {
    background-image: var(--svc-hero-image-mobile);
    background-size: cover;
    background-position: right bottom;
  }

  .svc-page .svc-hero--consultancy.cs-placed::before {
    background-image: var(--cs-img);
    background-size: 100% 100%;
    background-position: 0 0;
  }
}

/* Short phones (iPhone SE): the text block moves up to leave the phone
   more room above the ticker */
@media (max-width: 768px) and (max-height: 700px) {
  .svc-page > .svc-hero--consultancy.cs-placed {
    padding-top: calc(var(--header-height) + 8px);
  }

  .svc-page .svc-hero--consultancy.cs-placed .svc-hero__inner {
    padding-top: 12px;
  }

  .svc-page .svc-hero--consultancy.cs-placed .svc-hero__eyebrow {
    margin-top: 0;
  }
}

/* Portrait tablets: the Audit page's tablet arrangement (text above, phone
   at the bottom right, homepage tablet text scale), with the vertical navy
   gradient of that arrangement; the text block sits in the upper part,
   leaving the phone its room between the button and the ticker */
@media (min-width: 700px) and (max-width: 1199px) and (orientation: portrait) {
  .svc-page > .svc-hero--consultancy {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    justify-content: flex-start;
    padding: var(--header-height) 20px 0;
  }

  .svc-page .svc-hero--consultancy::before {
    background-image:
      linear-gradient(to bottom, rgba(var(--navy-rgb), 0.85), rgba(var(--navy-rgb), 0.5) 40%, rgba(var(--navy-rgb), 0.15) 70%),
      var(--svc-hero-image-mobile);
    background-size: 100% 100%, cover;
    background-position: center, right bottom;
  }

  .svc-page .svc-hero--consultancy.cs-placed {
    --cs-overlay: linear-gradient(to bottom, rgba(var(--navy-rgb), 0.85), rgba(var(--navy-rgb), 0.5) 40%, rgba(var(--navy-rgb), 0) 70%);
  }

  .svc-page .svc-hero--consultancy.cs-placed::before {
    background-image: var(--cs-img);
    background-size: 100% 100%;
    background-position: 0 0;
  }

  .svc-page > .svc-hero--consultancy > .svc-hero__inner {
    flex: 0 0 auto;
    justify-content: flex-start;
    max-width: 100%;
    margin-top: clamp(16px, 7vh, 120px);
    margin-top: clamp(16px, 7svh, 120px);
    padding-top: 0;
    padding-bottom: 0;
  }

  .svc-page > .svc-hero--consultancy > .svc-hero__bottom {
    margin-top: auto;
    padding-top: 40px;
  }

  .svc-page .svc-hero--consultancy .svc-hero__eyebrow {
    margin-top: 0;
    font-size: clamp(0.668rem, 1.18vw, 0.825rem); /* the homepage tablet scale x 11/14 */
  }

  .svc-page > .svc-hero--consultancy .svc-hero__title {
    max-width: 18em;
    margin-top: 22px;
    font-size: clamp(2.8rem, 5.8vw, 3.9rem);
  }

  .svc-page > .svc-hero--consultancy .svc-hero__divider {
    width: min(100%, 420px);
    margin-top: 31px;
  }

  .svc-page > .svc-hero--consultancy .svc-hero__divider::after {
    width: 10px;
    height: 10px;
  }

  .svc-page > .svc-hero--consultancy .svc-hero__subtitle {
    margin-top: 31px;
    max-width: 34em;
    font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  }

  .svc-page > .svc-hero--consultancy .svc-hero__cta {
    margin-top: 50px;
    padding: 17px 34px;
    font-size: 13.2px;
    letter-spacing: 0.14em;
  }
}

/* Landscape tablets (touch): the phone photo is a small box in the
   bottom-right corner (script.js, .cs-corner), so the hero behind it gets
   the fabric from the top of the mobile photo (no phone in that part), and
   the box's edges fade into it all round */
@media (orientation: landscape) and (max-width: 1380px) and (pointer: coarse) and (min-height: 600px) {
  .svc-page .svc-hero--consultancy.cs-placed.cs-corner {
    background-image: var(--svc-hero-image-mobile);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .svc-page .svc-hero--consultancy.cs-placed.cs-corner::before {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 45%, #000 99%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 7%, #000 72%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, #000 45%, #000 99%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 7%, #000 72%, transparent 100%);
  }
}

/* ==========================================================================
   Google Ads Mentoring page: tablets and the phone side note
   ========================================================================== */

/* Portrait tablets: the iPad Mini arrangement at every size: the portrait
   photo (notebook bottom right, as in the photo), one screen tall with the
   ticker at the bottom, the homepage / Consultancy tablet text scale. The
   photo sits a little lower (6svh) so the notebook's lower part runs behind
   the ticker. The text block is centred in the room above the notebook:
   the inner's bottom padding is the notebook's height above the ticker
   (its top is 50.75vw - 6svh above the hero's bottom: 20.3% of the
   photo's height, the photo being 2.5x the hero's width) plus a 40px gap,
   which puts it a little above the vertical middle. */
@media (min-width: 700px) and (max-width: 1199px) and (orientation: portrait) {
  .svc-page > .svc-hero--mentoring {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    justify-content: flex-start;
    padding: var(--header-height) 20px 0;
    background-color: #06111b;
  }

  .svc-page .svc-hero--mentoring::before {
    background-image: url('/assets/mentoring-hero-notebook-mobile.webp');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: right 0 bottom -6svh;
  }

  .svc-page > .svc-hero--mentoring > .svc-hero__inner {
    flex: 0 0 auto;
    justify-content: flex-start;
    max-width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 0;
    padding-bottom: calc(50.75vw - 6svh - 28px);
  }

  .svc-page > .svc-hero--mentoring > .svc-hero__bottom {
    margin-top: 0;
    padding-top: 0;
  }

  .svc-page .svc-hero--mentoring .svc-hero__eyebrow {
    margin-top: 0;
    font-size: clamp(0.668rem, 1.18vw, 0.825rem); /* the homepage tablet scale x 11/14 */
  }

  .svc-page > .svc-hero--mentoring .svc-hero__title {
    max-width: 18em;
    margin-top: 22px;
    font-size: clamp(2.8rem, 5.8vw, 3.9rem);
  }

  .svc-page > .svc-hero--mentoring .svc-hero__divider {
    width: min(100%, 420px);
    margin-top: 31px;
  }

  .svc-page > .svc-hero--mentoring .svc-hero__divider::after {
    width: 10px;
    height: 10px;
  }

  .svc-page > .svc-hero--mentoring .svc-hero__subtitle {
    margin-top: 31px;
    max-width: 34em;
    font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  }

  .svc-page > .svc-hero--mentoring .svc-hero__cta {
    margin-top: 50px;
    padding: 17px 34px;
    font-size: 13.2px;
    letter-spacing: 0.14em;
  }
}

/* Landscape tablets up to 1099px wide (iPad Mini, 1024x768): the photo as
   tall as the hero (as at 1180px and wider, where cover does this), moved
   down 16.8svh so the notebook's top sits below the lead paragraph and its
   left edge right of the button; its lower part runs behind the ticker.
   The photo's top edge fades into the hero's navy. Laptops (no touch) keep
   the desktop rule above. */
@media (min-width: 769px) and (max-width: 1099px) and (orientation: landscape) and (pointer: coarse) {
  .svc-page .svc-hero--mentoring {
    background-color: #06121b;
  }

  .svc-page .svc-hero--mentoring::before {
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right 0 top 16.8svh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 16.8svh, #000 32svh);
    mask-image: linear-gradient(to bottom, transparent 16.8svh, #000 32svh);
  }
}

/* Phones: "After your last session" note: half the gap above it (the rows
   section's bottom padding only), as on the Audit page; the space below it
   is unchanged */
@media (max-width: 767px) {
  .svc-page--mentoring > .svc-rows + .svc-split {
    padding-top: 0;
  }
}

/* ==========================================================================
   Ad Management hero, tablets
   ========================================================================== */

/* Portrait tablets: the iPad Mini arrangement at every size: the mobile
   photo (laptop bottom right, its right end cut by the photo's edge), cover
   and width-bound, so the laptop scales with the screen; moved down 3svh
   (its base runs behind the ticker, the bottom of its screen stays above
   the ticker line). No desktop photo box and no laptop copy over the
   ticker (the ticker stays on top). The homepage / Consultancy tablet text
   scale; the text block ends 40px above the laptop's lid, whose top is
   37.8% of the photo's height (1.6x the hero's width) minus the 3svh above
   the hero's bottom. */
@media (min-width: 700px) and (max-width: 1199px) and (orientation: portrait) {
  .svc-page > .svc-hero--ad-mgmt {
    --svc-hero-image-mobile: url('/assets/ad-management-hero-mobile-en.webp?v=2');
    height: 100vh;
    height: 100svh;
    min-height: 0;
    justify-content: flex-start;
    padding: var(--header-height) 20px 0;
    background-color: #060817;
    background-image: none;
  }

  .svc-page .svc-hero--ad-mgmt::before {
    inset: 0;
    width: auto;
    height: auto;
    background-image: var(--svc-hero-image-mobile);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right 0 bottom -3svh;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .svc-page .svc-hero--ad-mgmt::after {
    content: none;
  }

  .svc-page > .svc-hero--ad-mgmt > .svc-hero__inner {
    flex: 0 0 auto;
    justify-content: flex-start;
    max-width: 100%;
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: calc(60.5vw - 3svh - 28px);
  }

  .svc-page > .svc-hero--ad-mgmt > .svc-hero__bottom {
    margin-top: 0;
    padding-top: 0;
  }

  .svc-page .svc-hero--ad-mgmt .svc-hero__eyebrow {
    margin-top: 0;
    font-size: clamp(0.668rem, 1.18vw, 0.825rem); /* the homepage tablet scale x 11/14 */
  }

  .svc-page > .svc-hero--ad-mgmt .svc-hero__title {
    max-width: 18em;
    margin-top: 22px;
    font-size: clamp(2.8rem, 5.8vw, 3.9rem);
  }

  .svc-page > .svc-hero--ad-mgmt .svc-hero__divider {
    width: min(100%, 420px);
    margin-top: 31px;
  }

  .svc-page > .svc-hero--ad-mgmt .svc-hero__divider::after {
    width: 10px;
    height: 10px;
  }

  .svc-page > .svc-hero--ad-mgmt .svc-hero__subtitle {
    margin-top: 31px;
    max-width: 34em;
    font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  }

  .svc-page > .svc-hero--ad-mgmt .svc-hero__cta {
    margin-top: 50px;
    padding: 17px 34px;
    font-size: 13.2px;
    letter-spacing: 0.14em;
  }
}

/* Landscape tablets (touch): the laptop in the bottom-right corner, right
   of the button and below the lead paragraph. script.js (.am-corner) sizes
   the mobile photo as a box at the hero's right edge (--amc-h, --amc-top);
   the hero behind it shows the plain top of the same photo, and the box's
   left and top edges fade into it. No laptop copy over the ticker. */
@media (orientation: landscape) and (max-width: 1380px) and (pointer: coarse) and (min-height: 600px) {
  .svc-page .svc-hero--ad-mgmt.am-corner {
    background-color: #060817;
    background-image: url('/assets/ad-management-hero-mobile-en.webp?v=2');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .svc-page .svc-hero--ad-mgmt.am-corner::before {
    top: var(--amc-top);
    right: 0;
    width: calc(var(--amc-h) * 1080 / 1728);
    height: var(--amc-h);
    background-image: url('/assets/ad-management-hero-mobile-en.webp?v=2');
    background-size: 100% 100%;
    background-position: 0 0;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 35%),
      linear-gradient(to bottom, transparent 0%, #000 40%);
    mask-image:
      linear-gradient(to right, transparent 0%, #000 35%),
      linear-gradient(to bottom, transparent 0%, #000 40%);
  }

  .svc-page .svc-hero--ad-mgmt.am-corner::after {
    content: none;
  }
}

/* ==========================================================================
   Accessibility helpers (all pages)
   ========================================================================== */

/* Visually hidden, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content": the first stop for the Tab key, hidden until it has
   focus, then shown above the header (navy pill, gold ring) */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: #FBF8F2;
  background: #11223A;
  border-radius: 999px;
  text-decoration: none;
}

.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  outline: 2px solid #C8A872;
  outline-offset: 2px;
}

/* The skip target takes focus from the link only, never from the mouse;
   no ring around the whole page */
#main-content:focus {
  outline: none;
}

/* Cookie banner: visible keyboard focus on the buttons and the toggles
   (the checkbox itself is invisible, so its label, the switch, gets the
   ring). Gold on the navy card. */
.consent-banner__btn:focus-visible {
  outline: 2px solid #C8A872;
  outline-offset: 3px;
}

.consent-banner__toggle input:focus-visible + label {
  outline: 2px solid #C8A872;
  outline-offset: 3px;
}

/* Site-wide scrollbar: thin, light track, soft navy thumb. Without this the
   default scrollbar follows the page canvas, which takes the body's navy
   background (html has none), and shows as a dark band at the right edge. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 34, 58, 0.35) #F2EEE6;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #F2EEE6;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: rgba(17, 34, 58, 0.35);
  border-radius: 4px;
}