:root {
      --accent: #06c167;
      --accent-dark: #049a52;
      --ink: #1a1a1a;
      --muted: #6b6b6b;
      --bg: #ffffff;
      --panel: #f6f6f6;
      --line: #e8e8e8;
    }
    * { box-sizing: border-box; }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #fafafa;
      color: var(--ink);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; }

    /* header/nav styling stays here too — shared across every page via layout_main.ejs */

    /* ---- top bar ---- */
    header {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding: 1rem 6vw;
      border-bottom: 1px solid var(--line);
    }
    .brand-group { display: flex; align-items: center; gap: 0.9rem; margin-right: auto; }
    .logo { height:50px}
    .logo span { color: var(--accent); }

    /* ---- language dropdown ---- */
    .lang-dropdown { position: relative; }
    .lang-trigger {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0.35rem 0.75rem;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: 0.02em;
    }
    .lang-trigger:hover { border-color: var(--ink); }
    .lang-trigger svg { color: var(--muted); transition: transform 0.15s ease; }
    .lang-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
    .lang-menu {
      display: none;
      position: absolute;
      top: calc(100% + 0.5rem);
      left: 0;
      min-width: 140px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 14px 32px -18px rgba(0,0,0,0.35);
      padding: 0.4rem;
      z-index: 30;
    }
    .lang-menu.open { display: block; }
    .lang-menu a {
      display: block;
      padding: 0.5rem 0.6rem;
      border-radius: 8px;
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--ink);
    }
    .lang-menu a:hover { background: var(--panel); }
    .lang-menu a.active { color: var(--accent-dark); font-weight: 700; }

    nav.top-links { display: flex; align-items: center; gap: 1.6rem; font-size: 0.92rem; }
    nav.top-links a.plain { color: var(--ink); font-weight: 500; }
    nav.top-links a.plain:hover { text-decoration: underline; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.6rem 1.2rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.9rem;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .btn-dark { background: var(--ink); color: #fff; }
    .btn-dark:hover { background: #000; }
    .btn-outline { background: #e26b31; border-color: #e26b31; color: #fff; }
    .btn-outline:hover { background: #c95a24; border-color: #c95a24; color: #fff; }

    /* ---- homepage-only floating header ----
       The homepage's hero photo fills the full viewport top, with the
       header floating transparently over it (logo-white.png instead of
       the normal dark logo, light nav text) rather than sitting in its
       own solid bar above the photo. Scoped to .header-overlay, set
       only from VIEW_home's system.transparentHeader flag -- every
       other page keeps the plain `header` rules above as-is.
       Position: absolute takes it out of flow so .hero (the homepage's
       first element) rises to fill the space the header would have
       taken; .hero's own 10rem top padding is what keeps its content
       clear of the floating header sitting on top of it. */
    header.header-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 20;
      background: transparent;
      border-bottom: none;
    }
    header.header-overlay .lang-trigger {
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.45);
      color: #fff;
    }
    header.header-overlay .lang-trigger:hover { border-color: #fff; }
    header.header-overlay .lang-trigger svg { color: #fff; }
    header.header-overlay nav.top-links a.plain { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }
    header.header-overlay .nav-toggle span { background: #fff; }

    /* ---- mobile nav toggle (hamburger) ---- */
    .nav-toggle {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 5px;
      width: 36px;
      height: 36px;
      padding: 0;
      background: none;
      border: none;
      flex-shrink: 0;
    }
    .nav-toggle span {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; }
    .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    @media (max-width: 760px) {
      header { flex-wrap: wrap; padding: 1rem 5vw; }
      .nav-toggle { display: flex; }
      nav.top-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
        order: 3;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--line);
      }
      nav.top-links.open { display: flex; }
      nav.top-links a.plain { padding: 0.6rem 0.2rem; }
      nav.top-links .btn { width: 100%; }
      /* Full-height, not just the header's own box -- otherwise the
         hero content below shows through right where the header's
         natural height ends, mid-menu. */
      header.header-overlay:has(nav.top-links.open) {
        background: rgba(10, 12, 10, 0.92);
        min-height: 100vh;
        /* Multi-line flex (brand row + stacked nav row) would otherwise
           center both lines inside that full-height box -- pin them to
           the top like a normal dropdown instead. */
        align-content: flex-start;
      }
      header.header-overlay nav.top-links { border-top-color: rgba(255, 255, 255, 0.25); }
      header.header-overlay nav.top-links a.plain { text-shadow: none; }
    }

    /* ---- narrow phones (320-480px): the logo wordmark at a fixed
       50px height is wide enough (roughly 190px) that, together with
       the language chip and the hamburger button, it no longer fits
       on one row below ~480px -- header's own flex-wrap (set above)
       then wraps the hamburger button down onto its own line instead
       of sitting beside the logo like it does everywhere wider. Only
       the logo's height needs to shrink; everything else already
       flexes/wraps correctly once there's room for it. ---- */
    @media (max-width: 480px) {
      header { gap: 0.75rem; padding: 0.85rem 4vw; }
      .brand-group { gap: 0.5rem; }
      .logo { height: 32px; }
      .lang-trigger { padding: 0.3rem 0.55rem; font-size: 0.75rem; gap: 0.3rem; }
    }

    /* ---- footer (shared by every page via layout_main.ejs) ---- */
    footer {
      padding: 3rem 6vw 2rem;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.85rem;
    }
    .footer-top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 2.5rem;
      padding-bottom: 2.5rem;
    }
    .footer-logo { height: 36px; }
    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 2.5rem 3.5rem;
    }
    .footer-col { display: flex; flex-direction: column; gap: 0.65rem; min-width: 140px; }
    .footer-col h4 {
      margin: 0 0 0.15rem;
      color: var(--ink);
      font-size: 0.85rem;
      letter-spacing: 0.02em;
    }
    .footer-col a { color: var(--muted); font-size: 0.88rem; }
    .footer-col a:hover { color: var(--ink); }
    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: space-between;
      align-items: center;
      padding-top: 1.75rem;
      border-top: 1px solid var(--line);
    }
    .footer-row { display: flex; flex-wrap: wrap; gap: 1rem; }

    /* ---- footer's country-switcher dropdown -- same pattern as the
       header's language dropdown above, just anchored to the right/bottom
       instead of the top ---- */
    .country-dropdown { position: relative; }
    .country-trigger {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0.35rem 0.75rem;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: 0.02em;
    }
    .country-trigger:hover { border-color: var(--ink); }
    .country-trigger svg { color: var(--muted); transition: transform 0.15s ease; }
    .country-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
    .country-menu {
      display: none;
      position: absolute;
      bottom: calc(100% + 0.5rem);
      right: 0;
      min-width: 160px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 14px 32px -18px rgba(0,0,0,0.35);
      padding: 0.4rem;
      z-index: 30;
    }
    .country-menu.open { display: block; }
    .country-menu a {
      display: block;
      padding: 0.5rem 0.6rem;
      border-radius: 8px;
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--ink);
      white-space: nowrap;
    }
    .country-menu a:hover { background: var(--panel); }
    .country-menu a.active { color: var(--accent-dark); font-weight: 700; }

    @media (max-width: 760px) {
      footer { padding: 2rem 5vw 1.5rem; }
      .footer-top { gap: 2rem; padding-bottom: 2rem; }
      .footer-links { gap: 1.75rem 2.5rem; }
      .footer-bottom { justify-content: flex-start; }
      .country-menu { right: auto; left: 0; }
    }