/* Site-wide refinements (12 Oct 2026). Loaded on every page by BaseLayout, after the page's own CSS.
   Menu ~20% larger to match the scale of the new homepage hero, on all pages for consistency.
   --nav-scale (base styles: 0.89) drives link size, link spacing and the "Talk to Us" padding.
   Mobile and tablet menus (<=1120px) are unchanged. */

@media (min-width: 1121px) {
  .site-nav { --nav-scale: 0.98; }
  .site-header .brand-panel { width: 116px; }
}

@media (min-width: 1280px) {
  .site-nav { --nav-scale: 1.07; }
  .site-header .brand-panel { width: 128px; }
  /* Room for the larger logo (was 80px). */
  .header-inner { min-height: 88px; }
}

/* Dropdowns ("What We Build" mega menu and "OVA Products"): all text 20% larger to match the menu.
   Panel widths stay the same so the mega menu still fits smaller laptops; panels grow in height. */
@media (min-width: 1121px) {
  .site-header .site-nav .mega-kicker { font-size: 0.816rem; }                      /* 10.88 -> 13.06px */
  .site-header .site-nav .mega-intro strong { font-size: 1.296rem; }               /* 17.28 -> 20.74px */
  .site-header .site-nav .mega-intro .mega-intro-support { font-size: 0.9rem; }    /* 12 -> 14.4px */
  .site-header .site-nav .mega-intro > a { font-size: 0.936rem; }                  /* 12.48 -> 14.98px */
  .site-header .site-nav .mega-intro .mega-product-links a { font-size: 0.84rem; } /* 11.2 -> 13.44px */
  .site-header .site-nav .mega-service-card span { font-size: 0.78rem; }           /* 10.4 -> 12.48px */
  .site-header .site-nav .mega-service-card strong { font-size: 1.2rem; }          /* 16 -> 19.2px */
  .site-header .site-nav .mega-service-card small { font-size: 0.792rem; }         /* 10.56 -> 12.67px */
  .site-header .site-nav .product-submenu small { font-size: 0.756rem; }           /* 10.08 -> 12.1px */
  .site-header .site-nav .product-submenu strong { font-size: 1.08rem; }           /* 14.4 -> 17.28px */
  .site-header .site-nav .product-submenu { width: 408px; }                         /* 340 -> 408px */
}

/* Section labels ("Built for growing SMEs", "The story behind OVA", ...): 1.5x the original size on
   every page (12.5px -> 18.7px; the few labels that were 17.3px also become 18.7px, so all match).
   The repeated class only raises specificity above the page-specific label rules. */
.section-kicker.section-kicker.section-kicker {
  font-size: 1.17rem;        /* 1.5 x 0.78rem */
  letter-spacing: 0.14em;
  padding: 6px 10.5px;       /* 1.5 x 4px 7px */
  border-radius: 3px;
}

@media (max-width: 620px) {
  /* Phones: 1.15x, so long labels mostly stay on one line on a narrow screen. */
  .section-kicker.section-kicker.section-kicker {
    font-size: 0.9rem;
    padding: 5px 8px;
  }
}

/* Page width: every page matches the homepage (10% side margins on desktop, capped at 1720px).
   Was a fixed 1160px column on all pages except the homepage. The footer keeps 8% margins so its
   four columns fit on smaller laptops. */
@media (min-width: 1101px) {
  .container {
    width: min(calc(100% - 20vw), 1720px);
  }

  .site-footer .container {
    width: min(calc(100% - 16vw), 1720px);
  }
}

/* Top section of every page fills the first screen on desktop (screen height minus the menu bar), with
   its content centred vertically. The homepage hero already does this. Taller heroes are unaffected. */
@media (min-width: 1101px) {
  :root { --menu-bar-h: 69px; }

  main > :first-child:not(.hero) {
    box-sizing: border-box;
    min-height: calc(100svh - var(--menu-bar-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (min-width: 1280px) {
  :root { --menu-bar-h: 89px; }
}

/* Pages where the menu bar floats over the hero (services pages and contact): the hero starts at the
   top of the screen, so it takes the full screen height. */
@media (min-width: 1101px) {
  body[data-page=services] main > :first-child,
  body[data-page=contact] main > :first-child {
    min-height: 100svh;
  }
}

/* Menu bar: the homepage's look on every page. Transparent at the top of the page; the frosted cream
   bar once scrolled (script.js adds .is-scrolled after 20px). Each page keeps its own sticky/fixed
   positioning. Repeated classes only raise specificity above the page-specific header rules. */
body .site-header.site-header.site-header:not(.is-scrolled) {
  border-bottom-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body .site-header.site-header.site-header.is-scrolled {
  border-bottom-color: rgba(20, 20, 20, 0.08);
  background: rgba(248, 246, 239, 0.88);
  box-shadow: 0 8px 30px rgba(20, 20, 20, 0.05);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* "Talk to Us": the homepage's green on every page. */
body .site-nav .nav-cta.nav-cta {
  border-color: #789b91;
  background: #789b91;
  color: #fff;
  box-shadow: 0 10px 24px rgba(73, 103, 95, 0.16);
}

/* Keep the menu visible while scrolling on every page, like the homepage. The header's own sticky rule
   can't work because its <ova-header> wrapper is only as tall as the header, so the wrapper sticks
   instead. It stays in the page flow, so nothing below moves. */
ova-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* TRIAL (homepage + What We Build): content sections below the hero step in to 75% from 1440px up,
   while the menu and hero stay at 80%. Max 1612px (= 1720 x 75/80). */
@media (min-width: 1440px) {
  body[data-page=home] main > :not(:first-child) .container,
  body[data-page=what-we-build] main > :not(:first-child) .container {
    width: min(calc(100% - 25vw), 1612px);
  }
}

/* Page headlines (the H1 in each page's top section) styled like the homepage H1: Manrope 800 with the
   homepage's extra stroke (20% heavier), open letter spacing, tight leading and the same size.
   Starting point for all pages; individual pages can be tuned later. */
@media (min-width: 1101px) {
  body:not([data-page=home]) main > :first-child h1 {
    max-width: none;
    font-family: Manrope, "DM Sans", sans-serif;
    font-size: calc(clamp(4.2rem, 6.9vw, 8.1rem) * 0.825 * 0.85);
    font-weight: 800;
    line-height: 0.99;
    letter-spacing: 0;
    -webkit-text-stroke: 0.025em currentColor;
  }
}