/* ==========================================================================
   Billboards Limassol — base stylesheet
   Orange + black + white identity: most sections are orange surfaces,
   with a few dark sections used strategically for contrast. Each <section>
   carries a theme class (theme-orange / theme-orange-deep / theme-dark)
   that sets a small set of --t-* custom properties consumed by
   shared components (cards, chips, borders, muted text) so the same markup
   reads correctly regardless of which section it sits in.
   One Google Font (Montserrat). No JS libraries.
   ========================================================================== */

:root {
  --color-orange: #FF8A00;
  --color-orange-bright: #FFA126;
  --color-orange-deep: #FF6B00;
  --color-highlight: #FFD23F;
  --color-black: #201B17;
  --color-black-soft: #322920;
  --color-cream: #FFEFDD;
  --color-cream-soft: #FFE3C4;
  --color-white: #FFFFFF;

  --ink: #201B17;
  --ink-muted: #6E5C4C;
  --ink-border: rgba(32, 27, 23, 0.14);

  --paper: #FFFFFF;
  --paper-muted: rgba(255, 255, 255, 0.82);
  --paper-border: rgba(255, 255, 255, 0.35);

  /* One standard size for every descriptive text / paragraph (hero lead,
     section intros, Flag Billboards copy, FAQ answers, legal text …). */
  --fs-text: 1.0625rem;   /* 17px */
  --lh-text: 1.6;

  --font-base: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --container-width: 1240px;
  --gap: 24px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--ink);
  font-family: var(--font-base);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
}

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

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

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-orange);
  color: var(--ink);
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus { left: 0; }

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.6rem, 3.4vw + 1.6rem, 4.6rem); }
h2 { font-size: clamp(1.9rem, 1.6vw + 1.3rem, 2.9rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }

p { margin: 0 0 16px; font-size: var(--fs-text); line-height: var(--lh-text); color: var(--t-text-muted, var(--ink-muted)); }
a { color: inherit; text-decoration: none; }

.muted { color: var(--t-text-muted, var(--ink-muted)); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--t-eyebrow, var(--color-orange));
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--t-eyebrow, var(--color-orange));
  display: inline-block;
}
.eyebrow--center::before { display: none; }

/* ---- Section themes ----
   Apply one of these alongside .section (or .hero / .page-hero) to set
   the section's background and the text/border/surface tokens its
   children read via var(--t-*).
   Bright orange and warm cream/white are the two workhorse surfaces;
   dark ink text sits on both (it reads far better on a sunny orange than
   white does), so .theme-dark is kept only for sparing, small-scale
   contrast use rather than full sections. */
.theme-orange {
  --t-text-muted: rgba(32, 27, 23, 0.72);
  --t-border: rgba(32, 27, 23, 0.14);
  --t-surface: var(--color-white);
  --t-eyebrow: var(--ink);
  background:
    radial-gradient(ellipse 900px 700px at 6% -12%, rgba(255, 255, 255, 0.24), transparent 60%),
    radial-gradient(ellipse 720px 720px at 106% 18%, rgba(255, 210, 150, 0.30), transparent 55%),
    radial-gradient(ellipse 820px 820px at 88% 112%, rgba(179, 56, 8, 0.20), transparent 55%),
    linear-gradient(155deg, var(--color-orange-bright) 0%, var(--color-orange) 55%, var(--color-orange-deep) 100%);
  color: var(--ink);
}
.theme-orange-deep {
  --t-text-muted: rgba(32, 27, 23, 0.72);
  --t-border: rgba(32, 27, 23, 0.16);
  --t-surface: var(--color-white);
  --t-eyebrow: var(--ink);
  background:
    radial-gradient(ellipse 820px 650px at -6% 108%, rgba(255, 255, 255, 0.16), transparent 55%),
    radial-gradient(ellipse 700px 700px at 102% -8%, rgba(255, 161, 38, 0.32), transparent 55%),
    var(--color-orange-deep);
  color: var(--ink);
}
.theme-light {
  --t-text-muted: var(--ink-muted);
  --t-border: var(--ink-border);
  --t-surface: var(--color-white);
  --t-eyebrow: var(--color-orange);
  background: var(--color-cream);
  color: var(--ink);
}
.theme-dark {
  --t-text-muted: var(--paper-muted);
  --t-border: var(--paper-border);
  --t-surface: var(--color-black-soft);
  --t-eyebrow: var(--color-orange-bright);
  background: var(--color-black);
  color: var(--paper);
}

.section { padding: 120px 0; }
.section--tight { padding: 72px 0; }
.section--cta { padding: 140px 0; }

.section-head {
  max-width: 640px;
  margin: 0 0 56px;
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head--row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  max-width: none;
}
.section-head--row .section-head__link { flex-shrink: 0; padding-bottom: 4px; }
/* Client asked for the Location intro and the Gallery supporting text to
   read slightly smaller than the default body copy. */
.section-head__lead--sm { font-size: 0.95rem; }

/* ---- Buttons ----
   .btn--primary  = solid near-black, for use on orange/light surfaces.
   .btn--accent   = solid orange, for use on dark surfaces (e.g. header).
   .btn--ghost    = outline, uses currentColor so it adapts to any section. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn--primary {
  background: var(--color-black);
  color: var(--paper);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.45);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-white);
  color: var(--ink);
  transform: translateY(-1px);
}

.btn--accent {
  background: var(--color-orange);
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(255, 138, 0, 0.55);
}
.btn--accent:hover,
.btn--accent:focus-visible {
  background: var(--color-white);
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--color-white);
  color: var(--ink);
}

.btn--phone {
  background: transparent;
  color: inherit;
  border-color: transparent;
  padding: 15px 6px;
  display: none;
}

.btn--large { padding: 18px 36px; font-size: 1.05rem; }

.cta-group { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ---- Header / Nav (light, warm — floats over the bright orange hero) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 247, 235, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--ink-border);
  color: var(--ink);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.brand {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand--footer { display: inline-block; margin-bottom: 14px; font-size: 1.15rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1.5px solid var(--ink-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  margin: 0 9px;
  background: var(--ink);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}
.primary-nav a { font-weight: 600; font-size: 0.93rem; color: var(--ink-muted); }
.primary-nav a:hover,
.primary-nav a[aria-current="page"] { color: var(--color-orange); }
/* Same fix as the one-page header below: .btn--accent's own hover colour
   would otherwise lose to this more specific nav-link rule. */
.primary-nav a.btn--accent:hover,
.primary-nav a.btn--accent:focus-visible { color: var(--ink); }

.nav-lang {
  display: flex;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.nav-lang a.is-active { color: var(--color-orange); }

/* ---- Header modifier for the one-page site (English/root) — translucent
   orange bar that blends with whatever section scrolls underneath it,
   bold uppercase nav and a black CTA, echoing the a2billboards.com
   reference. Scoped under .site-header--home so it never touches the
   plain light .site-header still used by the (on-hold) Russian pages. ---- */
.site-header--home {
  /* Client asked the header bar to read as more distinct from the hero
     section scrolling underneath it — deeper/more opaque orange than the
     hero's own bright gradient, plus a visible bottom edge. */
  background: linear-gradient(120deg, rgba(255, 107, 0, 0.82), rgba(179, 56, 8, 0.82));
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(32, 27, 23, 0.22);
  box-shadow: 0 6px 18px -10px rgba(32, 27, 23, 0.45);
  color: var(--paper);
}
.site-header--home .brand { color: var(--paper); font-size: 1.05rem; }
.site-header--home .brand__mark { color: var(--paper); }
.site-header--home .nav-toggle { border-color: rgba(255, 255, 255, 0.4); }
.site-header--home .nav-toggle span { background: var(--paper); }
.site-header--home .primary-nav { gap: 22px; }
.site-header--home .primary-nav ul { gap: 22px; }
.site-header--home .primary-nav a {
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.site-header--home .primary-nav a[aria-current="page"] { color: var(--paper); }
/* Client asked the top menu text to turn a brighter white and scale up
   subtly on hover. Scoped to the main nav-link ul only — :not(.social-icons)
   because that's also a <ul> living inside .primary-nav, and this rule's
   display: inline-block was overriding its display: flex (needed to center
   each icon in its circular button), knocking the icons visibly off-center.
   The lang switch, social icons, phone and CTA buttons already have their
   own hover treatment. transform avoids any layout shift since it doesn't
   reflow. */
.site-header--home .primary-nav > ul:not(.social-icons) a {
  display: inline-block;
  transition: color .2s ease, transform .2s ease;
}
.site-header--home .primary-nav > ul:not(.social-icons) a:hover,
.site-header--home .primary-nav > ul:not(.social-icons) a:focus-visible {
  color: #FFFFFF;
  transform: scale(1.04);
}
/* The "Get a Quote" CTA is a .btn--primary link living inside .primary-nav,
   so the generic nav-link hover rule above (color: var(--paper)) was
   winning on specificity over .btn--primary:hover's own color — leaving
   white text on the white hover background it also sets. Re-assert the
   dark text color here, scoped tightly enough to outrank it. */
.site-header--home .primary-nav a.btn--primary:hover,
.site-header--home .primary-nav a.btn--primary:focus-visible { color: var(--ink); }
.site-header--home .nav-lang { color: var(--paper-muted); }
.site-header--home .nav-lang a.is-active { color: var(--color-highlight); }

/* ---- One-page header, inline (desktop) layout. The row holds logotype +
   5 links + language switch + 3 social icons + CTA in a 1192px container,
   which is tight in English and overflowed in Russian (labels ~30% longer),
   so it uses a slightly denser type/spacing scale in both languages and
   never wraps a label. Below 1301px the burger menu takes over (see the
   1300px media query further down) and needs none of this. ---- */
@media (min-width: 1301px) {
  .site-header--home .site-header__inner { gap: 16px; }
  .site-header--home .brand { flex-shrink: 0; }
  .site-header--home .primary-nav { gap: 16px; }
  .site-header--home .primary-nav ul { gap: 16px; }
  .site-header--home .primary-nav a {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .site-header--home .nav-lang { white-space: nowrap; }
  .site-header--home .social-icons { gap: 6px; }
  .site-header--home .social-icons a { width: 28px; height: 28px; }
  .site-header--home .btn--primary { padding: 12px 22px; font-size: 0.84rem; }

  /* Russian labels are ~30% longer: one more step down */
  html[lang="ru"] .site-header--home .primary-nav { gap: 14px; }
  html[lang="ru"] .site-header--home .primary-nav ul { gap: 14px; }
  html[lang="ru"] .site-header--home .primary-nav a { font-size: 0.78rem; letter-spacing: 0.01em; }
  html[lang="ru"] .site-header--home .btn--primary { padding: 12px 20px; font-size: 0.8rem; }
}

/* ---- Logotype: small bold mark + wordmark, built from text only ---- */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.42em;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__mark {
  font-size: 1.55em;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.brand__divider { opacity: 0.5; font-weight: 400; }
.brand__name {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.86em;
}

/* ---- Hero: orange-dominant surface with an inset image panel ---- */
.hero { padding: 96px 0; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero h1 { margin-bottom: 22px; max-width: 14ch; }
.hero__best {
  background: var(--ink);
  color: var(--paper);
  padding: 0 0.16em;
  border-radius: 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Client asked for the word "BL" in "Billboards by BL" to read white —
   plain color change only, no pill/background like .hero__best. */
.word-white { color: var(--paper); }
.hero__lead { max-width: 46ch; }
/* Client asked for the hero supporting paragraph to sit smaller than the
   default hero lead size, while staying comfortably readable, and to align
   like the "Our Billboards" body copy (.split__content--justify p) — same
   ragged-right fix on narrow phones below. */
.hero__lead--sm { font-size: 0.92rem; line-height: 1.55; max-width: 44ch; text-align: justify; text-justify: inter-word; }
/* In the English hero the title's widest line sits two rows above the
   paragraph, so a loose match reads fine. In Russian, "в Лимассоле" is
   both the title's widest AND its last line — directly above the
   paragraph — so any shortfall there reads as a visible, misaligned gap.
   Widened just for RU until the paragraph's justified edge lines up with
   that last title line (measured against the live h1 width, not guessed). */
.hero__lead--ru { max-width: 52ch; }
.hero__media { box-shadow: 0 30px 60px -20px rgba(32, 27, 23, 0.28); }

/* ---- Hero (centered "glass card") variant for the one-page site ---- */
.hero--centered { padding: 176px 0 88px; }
.hero__center { display: flex; justify-content: center; }
.hero-glass {
  max-width: 880px;
  text-align: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  color: var(--paper);
}
.hero-glass h1 {
  max-width: none;
  color: var(--paper);
  text-shadow: 0 4px 18px rgba(32, 20, 10, 0.35);
}
.hero-glass .accent { color: var(--color-highlight); }
.hero-glass .hero__lead {
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--paper-muted);
}
.hero-glass .cta-group { justify-content: center; margin-top: 28px; }

/* ---- Sub-page header: shorter than the homepage hero, same orange surface ---- */
.page-hero { padding: 168px 0 72px; }
.page-hero h1 { max-width: 22ch; }
.page-hero__banner { margin-top: 56px; box-shadow: 0 30px 60px -20px rgba(32, 27, 23, 0.28); }

/* ---- Legal pages (Privacy Policy, Cookie Policy): long-form text reads
   better narrower and on the light theme than full-width on bright
   orange, so it gets its own prose block. ---- */
/* Legal pages sit on a plain white page: no orange hero band, just a
   readable column under the site header. */
.legal-page { background: var(--color-white); color: var(--ink); padding: 72px 0 112px; }
.legal-content h1 { font-size: clamp(2.2rem, 2vw + 1.6rem, 3.2rem); margin-bottom: 14px; }
.legal-content__lead { margin-bottom: 8px; }
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content h2 { font-size: 1.3rem; margin: 44px 0 14px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.05rem; margin: 28px 0 10px; }
.legal-content p { margin: 0 0 16px; color: var(--t-text-muted, var(--ink-muted)); }
.legal-content ul,
.legal-content ol { margin: 0 0 16px; padding-left: 22px; color: var(--t-text-muted, var(--ink-muted)); }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--color-orange); text-underline-offset: 3px; }
.legal-content a:hover { color: var(--color-orange-deep); }
.legal-content__updated { font-size: 0.85rem; color: var(--t-text-muted, var(--ink-muted)); margin-bottom: 40px; }
@media (max-width: 720px) { .legal-page { padding: 48px 0 80px; } }

/* ---- Placeholder image block: light, warm neutral so it reads as "photo"
   without adding visual weight, on any section color. ---- */
.img-placeholder {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--ink-border);
  background:
    repeating-linear-gradient(135deg, var(--color-cream-soft), var(--color-cream-soft) 10px, #F3E3CB 10px, #F3E3CB 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.8rem;
  padding: 16px;
  overflow: hidden;
}
.img-placeholder span {
  background: rgba(32, 27, 23, 0.85);
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--paper);
}
.img-placeholder--hero { aspect-ratio: 16 / 9; }
.img-placeholder--card { aspect-ratio: 4 / 3; }
.img-placeholder--tall { aspect-ratio: 4 / 5; }
.img-placeholder--wide { aspect-ratio: 21 / 8; border-radius: var(--radius-lg); }
.img-placeholder--square { aspect-ratio: 1 / 1; }

/* Real photo content dropped into an .img-placeholder box (hero, flag
   billboards): shown at full size, own aspect ratio, no cropping — the
   box has no forced aspect-ratio of its own any more, it just grows to
   match the photo. `picture img` (not `> img`) on purpose: the image is
   nested inside a <picture>, not a direct child of this box. */
.img-placeholder picture,
.img-placeholder picture img,
.img-placeholder > video {
  width: 100%;
  height: auto;
  display: block;
}

/* Small corner tag instead of a centered label on large panels, so it
   never collides with headline text sitting nearby. */
.img-placeholder__tag {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(32, 27, 23, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--paper-muted);
  font-size: 0.72rem;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  z-index: 2;
}

/* Muted variant for collaborator logo slots — quiet, theme-aware */
.img-placeholder--muted {
  background: var(--t-surface, var(--color-white));
  border: 1px solid var(--t-border, var(--ink-border));
  color: var(--t-text-muted, var(--ink-muted));
  font-size: 0.78rem;
  font-weight: 600;
  aspect-ratio: 3 / 1.2;
}

/* Collaborator logo cards: real client logos vary wildly in aspect
   ratio and source quality, so they're all fit into the same muted
   card box via object-fit rather than stretched or cropped.
   Taller aspect-ratio + tighter padding than the base muted box, so
   logos render as large as the grid (same column count) allows. */
.collab-logo {
  aspect-ratio: 1.7 / 1;
  padding: 12px 16px;
}
.collab-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---- Grids ---- */
.grid {
  display: grid;
  gap: var(--gap);
}
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--t-surface, var(--color-white));
  border: 1px solid var(--t-border, var(--ink-border));
  border-radius: var(--radius);
  padding: 28px;
}
.card h3 { margin-bottom: 8px; }
.card p { margin-bottom: 0; }

/* Contact card: icon badge + label + value, centered — used on the
   "Let's talk about your campaign" section. */
.card--contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 36px 24px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
a.card--contact:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 22px 40px -22px rgba(32, 27, 23, 0.4);
}
.card--contact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-orange);
  margin-bottom: 6px;
}
.card--contact__label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-muted);
}
.card--contact__value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  word-break: break-word;
}

/* Service card: adds a large, faint corner icon behind the copy */
.card--service { position: relative; overflow: hidden; padding: 32px; }
.card--service .card__icon {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 60px;
  height: 60px;
  color: var(--ink);
  opacity: 0.16;
}
.card--service h3 { position: relative; margin-bottom: 6px; }
.card--service p { position: relative; max-width: 34ch; }

/* Map card: a thick black frame (~3mm) with minimally rounded corners, so
   the whole card — dark title bar + map — reads as one physical object,
   like a billboard, sitting on the light section behind it. */
.map-card {
  /* Top stays the heavier rail (it's where the title bar sits); the sides
     and bottom are a lighter frame, about half as thick. */
  border-color: var(--color-black);
  border-style: solid;
  border-width: 12px 6px 6px;
  border-radius: 12px;
  overflow: hidden;
  /* A soft, even halo all the way around (not just a drop shadow below) —
     echoes the gentle glow around the object in the client's reference. */
  box-shadow: 0 0 50px 8px rgba(255, 161, 38, 0.22), 0 18px 40px -18px rgba(32, 27, 23, 0.28);
}
.map-card__bar {
  background: var(--color-black);
  color: var(--paper);
  padding: 14px 22px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.map-card__frame { width: 100%; height: 540px; border: 0; display: block; }

/* ---- Map section: its own full-width, full-bleed light section — the
   light background itself is the design treatment. ---- */
.map-section {
  position: relative;
  /* Same --t-eyebrow token .theme-orange/.theme-light use on this kind of
     background (dark ink) — without it the eyebrow falls back to
     var(--color-orange), which is nearly invisible against this section's
     own orange background. */
  --t-eyebrow: var(--ink);
  background: #FFAA4D;
  padding: 64px 0;
}
.map-section__inner { width: 100%; }

/* ---- Layout: billboard on its pole, centered and full-size, with the
   location-pill legend stacked directly below it as one cohesive group —
   client asked for the colored boxes to sit beneath the billboard rather
   than beside it. ---- */
.map-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ---- Billboard-on-a-pole composition: the map card reads as the
   illuminated screen; a single tapered pole plus a soft ground shadow
   underneath ground it as one physical sign, per the client's reference —
   elegant/subtle rather than a literal illustration (no crossbar, bolts
   or other cartoonish add-ons). ---- */
.map-billboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: 900px;
}
.map-card { width: 100%; }
.map-billboard__pole {
  width: 26px;
  height: 96px;
  margin-top: -2px;
  background: linear-gradient(90deg, #14100d, #3a332c 45%, #14100d);
  border-radius: 0 0 3px 3px;
}
.map-billboard__base {
  width: 150px;
  height: 16px;
  margin-top: -4px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(32, 27, 23, 0.32), rgba(32, 27, 23, 0) 72%);
}

/* ---- Location pill legend: client asked for all 5 colored boxes to sit
   in a single horizontal row on desktop, below the billboard. A 5-column
   grid (rather than equal-width columns) lets the short, one-line GUABA
   chip run narrower and the long Amathountas Avenue chip run wider, while
   still filling one even row — text inside each chip is free to wrap to
   multiple lines. Widened past the old 900px map-card width to use the
   full .container. Tablet/mobile fall back to wrapping — see the 980px
   and 640px queries below. ---- */
.location-pill-group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.82fr 1.45fr;
  gap: 16px;
  width: 100%;
  max-width: 1180px;
}

/* ---- Location pills: a rounded-rectangle chip, not a full capsule — a
   999px pill border reads awkwardly once the text wraps to multiple
   lines, a moderate radius reads as a proper card. Filled with the map
   pin's own color; the bold area name sits on its own line above the
   smaller, slightly muted detail line (a title/subtitle pairing rather
   than one run-on sentence) — see .location-pill__primary /
   .location-pill__secondary. Yellow and orange are a shade deeper than
   their raw map-pin tones — still unmistakably the same color, but the
   originals measured under 2:1 contrast against white text; a subtle
   text-shadow adds a touch of crispness across all five. ---- */
.location-pill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 20px;
  border-radius: 16px;
  color: var(--paper);
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  box-shadow: 0 12px 24px -16px rgba(32, 27, 23, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.location-pill__primary {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: -0.005em;
}
.location-pill__secondary { font-weight: 400; font-size: 0.93em; color: rgba(255, 255, 255, 0.86); }
/* Client asked for "Columbia Beach area," to stay on one line. Nowrap on this
   one label only: its column is a 1fr track, so the label's min-content width
   makes that track widen just enough instead of overflowing the chip, and the
   other chips keep their normal wrapping. */
.location-pill--blue .location-pill__primary { white-space: nowrap; }
.location-pill--blue   { background: #0288D1; }
.location-pill--green  { background: #558B2F; }
.location-pill--yellow { background: #D6C400; }
.location-pill--red    { background: #A52714; }
.location-pill--orange { background: #E06A00; }
/* A smaller secondary size keeps the long detail line reading as a tidy
   multi-line block in this chip's narrower share of the row. */
.location-pill--orange .location-pill__secondary { font-size: 0.82em; }

/* Tablet: the single-row grid above is a desktop-only ask — below 980px,
   fall back to the chips wrapping onto as many rows as they need. */
@media (max-width: 980px) {
  .location-pill-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1040px;
  }
  .location-pill { flex: 0 1 230px; max-width: 230px; }
  .location-pill--orange { flex: 0 1 476px; max-width: 476px; }
  .map-card__frame { height: 460px; }
  .map-billboard { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .map-section { padding: 40px 0; }
  .map-card { border-width: 8px 4px 4px; border-radius: 10px; }
  .map-card__bar { padding: 12px 16px; font-size: 0.78rem; }
  .map-card__frame { height: 320px; }
  .map-billboard__pole { width: 20px; height: 72px; }
  .map-billboard__base { width: 110px; }
  /* Pills stack naturally full-width on narrow viewports instead of
     wrapping into a ragged multi-column row. */
  .location-pill-group { flex-direction: column; align-items: stretch; }
  .location-pill { flex: 1 1 auto; max-width: none; }
}

/* Media card: image bleeds to the card edge, text sits below it */
.media-card {
  background: var(--t-surface, var(--color-white));
  border: 1px solid var(--t-border, var(--ink-border));
  border-radius: var(--radius);
  overflow: hidden;
}
.media-card .img-placeholder {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--t-border, var(--ink-border));
}
.media-card__body { padding: 26px 28px 30px; }
.media-card__body h3 { margin-bottom: 8px; }
.media-card__body p { margin-bottom: 0; }

/* ---- Feature strip: typography-led, divider-separated, no card boxes ---- */
.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.feature-strip__item {
  padding: 8px 32px 8px 28px;
  border-left: 1px solid var(--t-border, var(--ink-border));
}
.feature-strip__item:first-child { border-left: none; padding-left: 0; }
.feature-strip__index {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: inherit;
  margin-bottom: 14px;
}
.feature-strip__item h3 { margin-bottom: 8px; }
.feature-strip__item p { margin-bottom: 0; }

/* Three-item variant (Outdoor Advertising section) with a rule above it */
.feature-strip--3 {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--t-border, var(--ink-border));
}
/* Client asked for this strip's lettering to read slightly smaller than
   the body copy above it — a subtle reduction, title kept clearly larger
   than the description to preserve hierarchy. */
.feature-strip--3 .feature-strip__item h3 { font-size: 1.1rem; }
/* Further two-step reduction on the description copy only — titles above
   stay untouched so the hierarchy still reads clearly. */
.feature-strip--3 .feature-strip__item p { font-size: 0.875rem; }
.seo-intro { align-items: start; }
.seo-intro h2 { margin-bottom: 0; }
.seo-intro p:last-child { margin-bottom: 0; }

/* ---- FAQ accordion: native <details>, glass cards like the contact cards ---- */
.faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.faq-item {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  transition: background-color .15s ease, border-color .15s ease;
}
.faq-item:hover,
.faq-item[open] {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--radius); }
.faq-item summary h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item p { margin: 0; padding: 0 26px 24px; max-width: 70ch; }

/* ---- Split: two-column image + content composition ---- */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.split--reverse { grid-template-columns: 1.1fr 0.9fr; }
.split > * { min-width: 0; }
.split--reverse .split__media { order: 2; }
.split__media { box-shadow: 0 30px 60px -20px rgba(32, 27, 23, 0.28); }
.split__content .section-head { margin-bottom: 28px; }

/* Larger type for a split section that should read as a feature callout */
.split__content--large h2 { font-size: clamp(2.6rem, 3vw + 1.8rem, 4rem); }
.split__content--large .eyebrow { font-size: 0.9rem; }
/* Client asked for the three "Billboards by BL" body paragraphs to be a
   touch smaller than the default body size (1.0625rem) — a deliberately
   small reduction, not a redesign. One further one-step reduction on top
   of the original 1rem pass. */
.split__content--large p { max-width: 52ch; font-size: 0.9375rem; }

/* Client asked for justified body copy in this section; on narrow phones
   justification tends to create ragged spacing, so it drops back to
   normal left alignment below the 720px breakpoint (see Responsive). */
.split__content--justify p { text-align: justify; text-justify: inter-word; max-width: 58ch; }

/* Client asked for the outdoor-advertising copy to be right-aligned; on
   narrow phones right-aligned paragraphs read poorly, so it drops back to
   left alignment below the 720px breakpoint, same pattern as the justified
   copy above. */
.seo-intro__copy { text-align: right; }
.seo-intro__copy p { margin-left: auto; }

/* ---- Arrow link: a quieter, text-based CTA for use on dark sections where
   a solid button reads as too heavy against a short "learn more" prompt —
   underline sweeps in and the arrow nudges right on hover/focus. ---- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  color: var(--color-orange-bright);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 2px;
  background: currentColor;
  transition: right 0.25s ease;
}
.link-arrow:hover::after,
.link-arrow:focus-visible::after {
  right: 0;
}
.link-arrow__icon { transition: transform 0.2s ease; font-size: 1.05em; line-height: 1; }
.link-arrow:hover .link-arrow__icon,
.link-arrow:focus-visible .link-arrow__icon {
  transform: translateX(5px);
}
.link-arrow:focus-visible { outline: 2px solid var(--color-orange-bright); outline-offset: 6px; border-radius: 2px; }

.check-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 16px;
}
.check-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: inherit;
  font-weight: 600;
}
.check-list__mark {
  color: inherit;
  font-weight: 800;
  flex-shrink: 0;
}

/* ---- Location chips (home coverage summary) — always orange-branded ---- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--t-eyebrow, var(--color-orange));
  color: var(--t-eyebrow, var(--color-orange));
  font-weight: 700;
  font-size: 0.92rem;
}

/* ---- Gallery: asymmetric, image-led ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--gap);
  height: 560px;
}
.gallery-grid .img-placeholder:first-child {
  grid-row: 1 / 3;
  height: 100%;
}
.gallery-grid .img-placeholder { height: 100%; aspect-ratio: auto; }

/* ---- Video showcase: replaces the old photo/video tile gallery on the
   homepage with 4 real client billboard videos playing side by side —
   a premium showcase rather than a browsable gallery. Panels keep their
   9:16 aspect ratio (matching the source clips almost exactly, so
   object-fit: cover crops next to nothing) rather than being stretched to
   a fixed height. ---- */
.video-showcase {
  display: flex;
  justify-content: center;
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
}
.video-showcase__item {
  flex: 1 1 0;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-black);
  --shadow-rest: 0 24px 48px -22px rgba(32, 27, 23, 0.4);
  --shadow-focus-ring: none;
  box-shadow: var(--shadow-rest), var(--shadow-focus-ring);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video-showcase__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Client feedback: a tasteful hover/focus scale on the showcase panels.
   Restrained (1.04) and on the wrapper itself, not the video, so the
   rounded corners/shadow scale together and nothing clips. Skipped on
   touch (hover: hover) so it never sticks after a tap on mobile. */
@media (hover: hover) and (pointer: fine) {
  .video-showcase__item:hover,
  .video-showcase__item:focus-within {
    transform: scale(1.04);
    --shadow-rest: 0 30px 56px -20px rgba(32, 27, 23, 0.48);
  }
}
/* Focus ring as an INSET shadow, not `outline`: an inset shadow is always
   clipped to the item's own border-radius (it never draws outside the box),
   so it can't get hard-cropped into square corners by the mobile carousel's
   overflow-x: auto — which forces overflow-y to clip too, per spec. */
.video-showcase__item:focus-within { --shadow-focus-ring: inset 0 0 0 3px var(--ink); }

/* ---- Collaborators strip (legacy — still used by the on-hold ru/billboards.php
   and ru/contact.php placeholder pages; the one-page site now uses
   .collab-wall below instead). ---- */
.collab-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

/* ---- Partner wall: many small, static logos forming one flat, dense wall
   (client reference: seeblindspot.com's logo strip) — no per-logo card, no
   background box, no ticker/marquee. Three explicit rows (markup splits
   the 13 logos 6/4/3, widest row on top) instead of one flex-wrap pool, so
   the wall tapers into a deliberate pyramid rather than wrapping wherever
   the viewport happens to break the line.

   Logos are plain `grayscale(1)` — desaturated, not flattened to a white
   silhouette — so each logo's own internal light/dark contrast (a badge's
   text against its own plate, a two-tone icon, etc.) still reads, matching
   the client's reference: a family of muted-grey marks, not blank shapes.
   This also means every source file works the same way regardless of
   whether it has a transparent background, so no more per-logo "plate"
   special case. ---- */
.collab-wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.collab-wall__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 32px 48px;
}
/* First (widest, 6-logo) row: a 6-column grid instead of a flex row —
   guarantees it always spans edge-to-edge in exactly one line (a flex row
   can still wrap if the natural logo widths + gap don't quite fit, which
   is what was happening here) and each logo is centered in its own equal
   column, sized down to fit if needed. */
.collab-wall__row--first {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px 32px;
}
.collab-wall__row--first .collab-wall__logo img {
  width: 100%;
  max-width: 100%;
}
.collab-wall__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 44px;
}
.collab-wall__logo img {
  /* height:100% (not height:auto + max-height) on purpose: .collab-wall__logo
     is itself a flex container, so an auto-sized img sitting inside it as a
     flex item has no definite size to resolve its aspect ratio against —
     several of the logo SVGs have no intrinsic width/height (viewBox only),
     and were collapsing to a sliver a few px wide. A definite height fixes
     that; max-width then only steps in for the couple of very wide, thin
     wordmarks (e.g. Range Rover) that would otherwise overflow. */
  height: 100%;
  width: auto;
  max-width: 230px;
  object-fit: contain;
  /* Client feedback: every logo should read as one consistent grey, not
     each one's own natural light/dark range — see the #logoMono SVG
     filter defined in index.php, which desaturates then compresses the
     whole luminance range into one narrow grey band, so an internal
     icon/badge's own contrast still reads without any logo landing much
     darker or lighter than the rest of the wall. brightness(1) is listed
     explicitly (not omitted) so it and the hover state's brightness(0.5)
     are the same filter *function*, which is what lets the browser
     animate smoothly between them instead of snapping. */
  filter: url(#logoMono) brightness(1);
  opacity: 0.92;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.collab-wall__logo:hover img,
.collab-wall__logo:focus-within img {
  opacity: 1;
  /* Hover/focus: darken further toward black rather than lightening —
     consistent with the logo treatment itself favouring dark tones on
     this orange background. */
  filter: url(#logoMono) brightness(0.5);
}
@media (max-width: 720px) {
  .collab-wall { gap: 18px; }
  .collab-wall__row { gap: 18px 26px; }
  .collab-wall__row--first {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .collab-wall__row--first .collab-wall__logo img { width: auto; max-width: 170px; }
  .collab-wall__logo { height: 34px; }
  .collab-wall__logo img { max-width: 170px; }
}

/* ---- CTA banner: the whole section is themed orange; this is just the
   centered text/button block inside it. ---- */
.cta-banner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.cta-banner h2 { margin-bottom: 14px; }
.cta-banner p { max-width: 56ch; margin-left: auto; margin-right: auto; }
.cta-banner .cta-group { justify-content: center; margin-top: 28px; }

/* ---- Lead form: always a white card, regardless of the section it sits
   in — its own text tokens are fixed to the light/ink pairing so it never
   inherits a light text color from an orange or dark section behind it. ---- */
.lead-form-section { padding: 120px 0; }
.lead-form {
  --t-text-muted: var(--ink-muted);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 52px;
  color: var(--ink);
}
.lead-form__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-content: start;
}
.lead-form__fields label { display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; color: var(--ink); }
.lead-form__message { grid-column: 1 / -1; }
.lead-form__fields input,
.lead-form__fields textarea {
  /* A warm, translucent tint instead of a flat white/cream block — lets the
     panel's own orange gradient read through, so fields sit quietly inside
     it instead of standing out as bright white cut-outs. */
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
}
.lead-form__fields input::placeholder,
.lead-form__fields textarea::placeholder { color: rgba(32, 27, 23, 0.45); }
.lead-form__fields input:focus,
.lead-form__fields textarea:focus {
  outline: 2px solid var(--color-orange);
  outline-offset: 1px;
}
.lead-form__fields button { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }

/* ---- Contact panel: one large rounded component (info left, embedded
   lead form right), replacing the previous "three contact cards + separate
   lead-form card" layout — styled after the client's A2 Billboards
   reference (structure only; no copied text/assets). Reuses the same
   frosted-glass surface the rest of the site already uses for cards on
   orange (.card--contact, .faq-item, the old .lead-form), so it stays
   consistent with the existing design language instead of inventing a new
   one. Only used by the homepage; includes/lead-form.php keeps rendering
   its original standalone .lead-form-section on the other (on-hold) ru
   pages — see the "embedded" mode note in that file. ---- */
.contact-panel {
  --t-text-muted: var(--ink-muted);
  display: grid;
  grid-template-columns: 0.62fr 1fr;
  gap: 64px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  color: var(--ink);
  box-shadow: 0 30px 60px -24px rgba(32, 27, 23, 0.35);
}
.contact-panel__info { min-width: 0; }
.contact-panel__info > p { max-width: 42ch; margin-bottom: 36px; color: var(--ink); }
/* Pushed down by the eyebrow's own height + margin so the "Name" label
   lines up with the "Let's Talk About Your Campaign" heading on the left,
   not with the small eyebrow above it (measured, not guessed — see the
   .eyebrow rule this offset corresponds to). */
.contact-panel__form { min-width: 0; margin-top: 42px; }

.contact-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.contact-info-list__item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.contact-info-list__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(32, 27, 23, 0.3);
  color: var(--ink);
}
.contact-info-list__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-info-list__text > span:first-child {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-muted);
}
.contact-info-list__text a,
.contact-info-list__text strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  word-break: break-word;
}
/* Same low-contrast problem as .lead-form__consent a:hover above — an
   orange hover color on this frosted card over the orange theme background
   barely reads. Same dark pill-highlight fix. */
.contact-info-list__text a:hover {
  color: var(--paper);
  background: var(--ink);
  border-radius: 4px;
  padding: 1px 6px;
  margin: -1px -6px;
}
.contact-info-list__item--sub .contact-info-list__icon { width: 40px; height: 40px; }
.contact-info-list__item--sub .contact-info-list__text a,
.contact-info-list__item--sub .contact-info-list__text strong { font-size: 0.92rem; font-weight: 700; }

.lead-form__fields--panel button {
  justify-self: center;
  width: 100%;
  max-width: 380px;
  padding: 16px 40px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}

/* Field labels styled like the client's reference: uppercase, small,
   letter-spaced, in the site's existing muted-brown token. Excludes the
   privacy-consent label, whose <span> holds a full sentence, not a
   short field name. */
.lead-form__fields--panel label:not(.lead-form__consent) > span:first-child {
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

@media (max-width: 980px) {
  .contact-panel { grid-template-columns: 1fr; gap: 44px; padding: 48px 40px; }
  .contact-panel__form { margin-top: 0; }
}
@media (max-width: 640px) {
  .contact-panel { padding: 36px 22px; gap: 36px; }
}

/* Consent checkbox: required for GDPR-compliant data processing —
   deliberately its own row, not folded into the small print below, so
   it can't be missed or auto-checked by mistake. */
.lead-form__consent {
  grid-column: 1 / -1;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--ink);
}
.lead-form__consent input[type="checkbox"] {
  /* Custom box instead of the native control so it can share the same
     translucent tint as the text fields, rather than a plain white/system
     checkbox sitting oddly next to them. padding/box-sizing reset because
     the generic ".lead-form__fields input" rule (13px/16px padding, for
     text inputs) also matches this checkbox and was inflating it to a
     huge, oddly-padded box. Size matches the site's previous plain
     checkbox (16px). */
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 3px 0 0;
  padding: 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}
.lead-form__consent input[type="checkbox"]:checked {
  background: var(--color-orange);
  border-color: var(--color-orange);
}
.lead-form__consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 7px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lead-form__consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}
.lead-form__consent a { text-decoration: underline; color: inherit; }
/* Plain orange on hover nearly disappears here — this link sits on a
   frosted glass card over the orange theme background, so an orange hover
   color reads at almost no contrast against it. Use the same dark
   pill-highlight treatment as .hero__best instead, which stays legible on
   any orange surface. */
.lead-form__consent a:hover {
  color: var(--paper);
  background: var(--ink);
  border-radius: 4px;
  padding: 1px 5px;
  margin: -1px -5px;
  text-decoration: none;
}

.form-alert {
  grid-column: 1 / -1;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.form-alert--success { background: rgba(34, 150, 80, 0.10); border: 1px solid rgba(34,150,80,0.35); color: #1F7A43; }
.form-alert--error { background: rgba(200, 60, 60, 0.08); border: 1px solid rgba(200,60,60,0.35); color: #B23A3A; }

/* ---- Location / format list items (billboards page) ---- */
.location-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--t-border, var(--ink-border));
}
.location-row:last-child { border-bottom: none; }
.location-row h3 { margin: 0 0 4px; }
.location-row p { margin: 0; }

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  counter-reset: step;
}
.process-step {
  border-top: 2px solid var(--t-eyebrow, var(--color-orange));
  padding-top: 18px;
}
.process-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--t-eyebrow, var(--color-orange));
  margin-bottom: 10px;
}

/* ---- Footer (light, warm — a slim orange top edge keeps the brand
   pop without going back to a heavy dark block) ---- */
.site-footer {
  padding-top: 72px;
  background: var(--color-cream);
  color: var(--ink);
  border-top: 3px solid var(--color-orange);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--gap);
  padding-bottom: 40px;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a:hover { color: var(--color-orange); }
.site-footer__bottom {
  border-top: 1px solid var(--ink-border);
  padding-block: 20px; /* not "20px 0": that wiped the container's side gutters */
}
.site-footer__bottom p { margin: 0; font-size: 0.85rem; }

/* ---- Footer modifier for the one-page site (English/root) — rich orange
   band instead of the light footer, to keep the whole page in one warm
   family. Scoped so the plain light .site-footer (Russian) is untouched. ---- */
.site-footer--home {
  padding-top: 48px;
  background: linear-gradient(180deg, var(--color-orange) 0%, var(--color-orange-deep) 100%);
  color: var(--ink);
  border-top: none;
}

/* Contact row: centered, its own row above everything else. */
.footer-contact-row {
  display: flex;
  justify-content: center;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(32, 27, 23, 0.16);
}

/* Second row: one centered column — brand, tagline, nav links, social
   icons — stacked with even rhythm, instead of two blocks pinned to
   opposite edges with a dead gap between them. */
.footer-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding-bottom: 28px;
}
.footer-middle .brand--footer { margin-bottom: 0; }
.footer-middle .footer-nav { justify-content: center; }
.footer-middle .social-icons { margin: 0; }
.footer-top__tagline {
  margin: 0;
  max-width: 46ch;
  color: rgba(32, 27, 23, 0.72);
  font-size: 0.92rem;
}

/* Contact row: three equal-width columns so Phone/Email/Location read as
   a matched set rather than ragged auto-width blocks. */
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 40px;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}
.footer-contact__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.footer-contact__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  color: var(--color-black);
}
.footer-contact__text {
  display: flex;
  flex-direction: column;
  white-space: nowrap; /* the e-mail address must always stay on one line */
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}
.footer-contact__text strong {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(32, 27, 23, 0.6);
}
a.footer-contact__item:hover .footer-contact__icon { background: var(--color-black); color: var(--paper); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav a { font-weight: 700; font-size: 0.9rem; }
.footer-nav a:hover { color: var(--color-black); }

/* ---- Social icon links — small circular buttons, reused in header + footer.
   Uses currentColor so each context just sets a text color + border tint. ---- */
.social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  color: inherit;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.site-header--home .social-icons { margin: 0; gap: 8px; }
.site-header--home .social-icons a { width: 30px; height: 30px; color: rgba(255, 255, 255, 0.65); border-color: rgba(255, 255, 255, 0.35); }
/* Client feedback: menu icons should stand out clearly white on hover. */
.site-header--home .social-icons a:hover,
.site-header--home .social-icons a:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.85);
}
.site-header--home .social-icons a:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.site-footer--home .social-icons a { color: var(--ink); border-color: rgba(32, 27, 23, 0.25); }
.site-footer--home .social-icons a:hover { background: var(--color-black); color: var(--paper); border-color: var(--color-black); }

.site-footer--home .site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid rgba(32, 27, 23, 0.16);
  padding-block: 20px;
}
.site-footer--home .site-footer__bottom p { color: rgba(32, 27, 23, 0.72); }
/* Client asked for the "BL" mark in the footer brand to read white. */
.site-footer--home .brand__mark { color: var(--paper); }
.site-footer__bottom-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.footer-legal-links {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
}
.footer-legal-links a {
  font-size: 0.85rem;
  color: rgba(32, 27, 23, 0.72);
}
.footer-legal-links a:hover { color: var(--color-black); }
.footer-credit {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(32, 27, 23, 0.72);
}
.footer-credit:hover { color: var(--color-black); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* The one-page header (5 links + language switch + social icons + CTA)
   is wider than the shared 720px breakpoint allows for, so it gets its own,
   earlier mobile-nav breakpoint — scoped to .site-header--home only, so the
   Russian header's shared 720px breakpoint is untouched. */
@media (max-width: 1300px) {
  .site-header--home .nav-toggle { display: flex; }
  .site-header--home .primary-nav {
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: linear-gradient(160deg, var(--color-orange), var(--color-orange-deep));
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
    display: none;
  }
  .site-header--home .primary-nav.is-open { display: flex; }
  .site-header--home .primary-nav ul { flex-direction: column; gap: 0; }
  .site-header--home .primary-nav ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
  .site-header--home .primary-nav ul a { display: block; padding: 14px 0; }
  .site-header--home .nav-lang { padding: 14px 0; }
  .site-header--home .social-icons { margin: 6px 0; }
  /* the generic ".primary-nav ul" burger rules above turn this list into a
     column of link rows — keep the social icons as a compact row instead */
  .site-header--home .primary-nav .social-icons { flex-direction: row; gap: 8px; padding: 6px 0; }
  .site-header--home .primary-nav .social-icons li { border-bottom: none; }
  .site-header--home .primary-nav .social-icons a { display: flex; padding: 0; }
  .site-header--home .btn--phone { display: inline-flex; padding: 14px 0; }
  .site-header--home .btn--primary { justify-content: center; }
}

@media (max-width: 980px) {
  .hero { padding: 64px 0; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .page-hero { padding: 140px 0 56px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .collab-grid { grid-template-columns: repeat(3, 1fr); }
  .lead-form { grid-template-columns: 1fr; padding: 36px; }
  .lead-form__fields { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .feature-strip { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .feature-strip__item:nth-child(3) { border-left: none; padding-left: 0; }
  .feature-strip--3 { grid-template-columns: 1fr; margin-top: 40px; }
  .feature-strip--3 .feature-strip__item { border-left: none; padding-left: 0; }
  .split, .split--reverse { grid-template-columns: 1fr; gap: 36px; }
  .split--reverse .split__media { order: 0; }
  .gallery-grid { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px; }
  .gallery-grid .img-placeholder:first-child { grid-row: 1 / 2; grid-column: 1 / 3; height: 260px; }
  /* Tablet: horizontal scroll-snap instead of squeezing 3 panels — each one
     sized to show ~2 at a time with a peek of the next, no slider JS. */
  .video-showcase {
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    /* overflow-x: auto forces overflow-y to clip too (per spec, once one
       axis isn't visible neither is), so the drop shadow/focus ring need
       room inside the scroll box or they get a hard, square-cornered crop.
       The negative margin cancels the padding's effect on page layout. */
    padding: 6px 16px 22px;
    margin-top: -6px;
    margin-bottom: -22px;
  }
  .video-showcase::-webkit-scrollbar { display: none; }
  .video-showcase__item {
    flex: 0 0 46%;
    max-width: none;
    scroll-snap-align: start;
    /* Smaller than the desktop shadow so its full bleed fits inside the
       padding above without being clipped by the scroll container. */
    --shadow-rest: 0 8px 20px -10px rgba(32, 27, 23, 0.38);
  }
  /* 3 contact cards in 2 columns: centre the orphan instead of leaving it on the left */
  .contact-cards > :nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--gap) / 2); }

  .hero--centered { padding: 148px 0 64px; }
  .hero-glass { padding: 44px 28px; }
}

@media (max-width: 720px) {
  .container { padding: 0 18px; }
  .section { padding: 72px 0; }
  .section--cta { padding: 88px 0; }
  .hero { padding: 56px 0; }
  .page-hero { padding-top: 104px; }
  .page-hero__banner { margin-top: 36px; }

  /* Mobile: one large panel at a time, swipeable, with a peek of the next
     one to hint there's more to scroll to. */
  .video-showcase__item { flex-basis: 82%; }

  .nav-toggle { display: flex; }
  .primary-nav {
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--color-cream);
    border-bottom: 1px solid var(--ink-border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
    display: none;
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav ul li { border-bottom: 1px solid var(--ink-border); }
  .primary-nav ul a { display: block; padding: 14px 0; }
  .nav-lang { padding: 14px 0; }
  .btn--phone { display: inline-flex; padding: 14px 0; }
  .btn--primary, .btn--accent { justify-content: center; }

  .site-header--home .primary-nav {
    background: linear-gradient(160deg, var(--color-orange), var(--color-orange-deep));
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .site-header--home .primary-nav ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
  .site-header--home .nav-lang { color: var(--paper-muted); }

  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .split__content--justify p { text-align: left; }
  .hero__lead--sm { text-align: left; }
  .seo-intro__copy { text-align: left; }
  .seo-intro__copy p { margin-left: 0; }
  .lead-form-section { padding: 72px 0; }
  .lead-form { padding: 28px 22px; gap: 28px; }
  .contact-cards > :nth-child(3) { width: auto; justify-self: stretch; }
  .collab-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__inner { grid-template-columns: 1fr; }
  .location-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .process-steps { grid-template-columns: 1fr; }
  .feature-strip { grid-template-columns: 1fr; row-gap: 28px; }
  .feature-strip__item { border-left: none; padding-left: 0; }
  .section-head--row { flex-direction: column; align-items: flex-start; }
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .gallery-grid .img-placeholder:first-child { grid-column: 1; height: 220px; }
  .gallery-grid .img-placeholder { height: 220px; }
  .footer-contact { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; max-width: 320px; }
  .footer-contact__item { justify-content: flex-start; }
  .site-footer--home .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Very small phones: long button labels (esp. Russian) may wrap instead of
   pushing the page wider than the screen, and the logotype shrinks a bit
   so it never collides with the menu button. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
  html[lang="ru"] .btn--large { padding: 16px 24px; }
}
@media (max-width: 360px) {
  .site-header--home .brand { font-size: 0.92rem; }
  .footer-contact__text { font-size: 0.78rem; }
  .footer-contact__item { gap: 10px; }
}

/* ---- Scroll-to-top button ----
   Fixed round button in the bottom-right corner. Hidden until the visitor
   scrolls down (main.js adds .is-visible). Uses the orange accent and turns
   white on hover/focus, like .btn--accent. */
.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-orange);
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(255, 138, 0, 0.55);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background-color .15s ease, color .15s ease;
}
.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top:hover,
.scroll-top:focus-visible {
  background: var(--color-white);
  color: var(--ink);
}
.scroll-top:focus-visible { outline: 3px solid var(--color-highlight); outline-offset: 3px; }
.scroll-top svg { width: 22px; height: 22px; }
@media (max-width: 720px) {
  .scroll-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
  .scroll-top svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-top { transition: none; }
}