:root{--color-navy:#071b25;--color-sand:#fff9f1;--color-coral:#ff6c47;--color-coral-text:#B7432B;--color-gold:#C9A45C;--navy:var(--color-navy);--cream:var(--color-sand);--coral:var(--color-coral);--coral-text:var(--color-coral-text);--site-header-height:80px}
/* Normalize browser click/tap feedback without removing keyboard focus. */
:where(a,button,summary,[role="button"]){-webkit-tap-highlight-color:transparent}
:where(a,button,summary,[role="button"]):focus:not(:focus-visible){outline:none}
:where(a,button,summary,[role="button"]):focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--navy,#071b25)}
html{scroll-padding-top:calc(var(--site-header-height) + 18px)}
body.site-menu-open{overflow:hidden}
.topbar{font-size:.78rem;line-height:1.5;padding:8px 0}
.topbar .site-topbar-wrap,.site-header-wrap{width:min(calc(100% - 36px),1240px);max-width:1240px;margin-inline:auto}
header{position:sticky;top:0;z-index:50;background:rgba(255,249,241,.90);backdrop-filter:blur(16px);border-bottom:1px solid rgba(9,32,42,.07)}
.nav{height:var(--site-header-height);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav .logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}.nav .logo img{display:block;width:150px;height:auto;max-width:none}
.navlinks{display:flex;align-items:center;justify-content:flex-end;gap:26px;margin-left:auto}
.navlinks a,.nav-disclosure-toggle{font:inherit;font-size:15px;font-weight:800;line-height:18px;white-space:nowrap;color:var(--navy,#071b25);text-decoration:none}
.nav-disclosure{position:relative}.nav-disclosure-toggle{min-height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.nav-disclosure-toggle::after{content:"";display:inline-block;width:7px;height:7px;margin:0 0 3px 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease}
.nav-disclosure-toggle[aria-expanded="true"]::after{transform:translateY(4px) rotate(225deg)}
.nav-disclosure-panel{position:absolute;top:calc(100% + 10px);left:-18px;z-index:100;display:none;width:250px;padding:9px;background:#fffaf3;border:1px solid var(--line,rgba(9,32,42,.12));border-radius:16px;box-shadow:0 18px 45px rgba(7,27,37,.16)}
.nav-disclosure.is-open>.nav-disclosure-panel{display:grid}.nav-disclosure-panel a{padding:11px 12px;border-radius:10px}.nav-disclosure-panel a:hover,.nav-disclosure-panel a:focus-visible{background:#fff0e5}
.nav-divider{height:1px;margin:5px 8px;background:var(--line,rgba(9,32,42,.12))}
.nav-current,.nav-context-current>.nav-disclosure-toggle{font-weight:950;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.nav-primary{box-sizing:border-box;width:260px;height:48px;min-height:48px;padding:0 21px;background:var(--coral,#ff6c47);color:#09202a;box-shadow:0 10px 25px rgba(255,108,71,.22);font-size:16px;line-height:24px;font-weight:900;white-space:nowrap}
.nav-actions{display:flex;flex:0 0 auto}.site-menu-toggle,.compact-rule,.compact-only,.compact-actions,.compact-context{display:none}
.site-menu-toggle{min-width:92px;width:92px;height:46px;padding:0 14px;border:1px solid var(--line,rgba(9,32,42,.12));border-radius:999px;background:#fffaf3;color:var(--navy,#071b25);font:inherit;font-weight:850;cursor:pointer;align-items:center;justify-content:center;gap:8px}
.site-menu-icon{width:18px;height:14px;position:relative;border-top:2px solid currentColor;border-bottom:2px solid currentColor}.site-menu-icon::after{content:"";position:absolute;left:0;right:0;top:5px;border-top:2px solid currentColor}
.site-menu-toggle[aria-expanded="true"] .site-menu-icon{border:0}.site-menu-toggle[aria-expanded="true"] .site-menu-icon::before,.site-menu-toggle[aria-expanded="true"] .site-menu-icon::after{content:"";position:absolute;top:6px;left:0;width:19px;border-top:2px solid currentColor;transform:rotate(45deg)}.site-menu-toggle[aria-expanded="true"] .site-menu-icon::after{transform:rotate(-45deg)}
.site-menu-toggle:focus-visible,.navlinks a:focus-visible,.navlinks button:focus-visible,.nav-actions a:focus-visible,.nav-actions button:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--navy,#071b25)}
@media(max-width:1239px){
  :root{--site-header-height:72px}.topbar{display:none}.site-header-wrap{width:min(calc(100% - 36px),1240px)}.nav{position:relative;gap:14px}.nav .logo img{width:142px}.navlinks{position:fixed;top:var(--site-panel-top,72px);right:0;bottom:0;left:0;z-index:99;display:none;align-content:start;gap:0;height:calc(100vh - var(--site-panel-top,72px));height:calc(100dvh - var(--site-panel-top,72px));margin:0;padding:15px max(18px,calc((100vw - 1200px)/2));overflow-y:auto;overscroll-behavior:contain;background:#fffaf3;border-top:1px solid var(--line,rgba(9,32,42,.12));box-shadow:0 22px 42px rgba(7,27,37,.18)}
  .nav.menu-open .navlinks{display:grid}.site-menu-toggle{display:flex;flex:0 0 auto}.nav-actions{margin-left:auto}.nav.menu-open>.nav-actions{display:none}.nav.menu-open>.site-menu-toggle{margin-left:auto}.compact-only,.compact-actions,.compact-context{display:block}
  .compact-home,.navlinks>.nav-top-link,.navlinks>.nav-disclosure>.nav-disclosure-toggle,.compact-context>.nav-disclosure-toggle{display:flex;align-items:center;width:100%;min-height:50px;padding:0 10px;text-align:left}
  .navlinks>.nav-disclosure>.nav-disclosure-toggle,.compact-context>.nav-disclosure-toggle{justify-content:space-between}
  .navlinks>.nav-disclosure{position:static}.nav-disclosure-panel{position:static;width:auto;margin:0 10px 8px;padding:3px 6px;background:rgba(255,255,255,.38);border-color:rgba(9,32,42,.08);border-radius:10px;box-shadow:none}.nav-disclosure-panel a{min-height:44px;display:flex;align-items:center}
  .compact-rule{display:block;height:1px;margin:11px 8px;background:var(--line,rgba(9,32,42,.12))}.compact-actions{padding:2px 8px 12px}.compact-actions .btn{display:flex;width:100%;min-height:50px;margin-top:10px}.compact-actions .nav-whatsapp{background:#fff;color:#09202a;border:1px solid rgba(9,32,42,.24);box-shadow:none}
  .wa-float[aria-hidden="true"]{display:none}
}
@media(max-width:767px){:root{--site-header-height:64px}.site-header-wrap{width:min(calc(100% - 24px),1240px)}.nav{gap:10px}.nav .logo img{width:132px}.nav-actions{display:none}.site-menu-toggle{margin-left:auto;min-width:86px;width:86px;height:44px}.navlinks{top:var(--site-panel-top,64px);height:calc(100vh - var(--site-panel-top,64px));height:calc(100dvh - var(--site-panel-top,64px));padding-inline:12px}}
/* The compact menu is a full-viewport navigation surface, not a compressed desktop dropdown. */
@media(max-width:1239px){
  .site-header-wrap{width:calc(100% - 60px)}
  .site-menu-toggle{display:flex;flex:0 0 44px;width:44px;min-width:44px;height:44px;margin-left:auto;padding:0;border:0;border-radius:8px;background:transparent;box-shadow:none}
  .site-menu-toggle:hover{background:rgba(9,32,42,.045)}
  .site-menu-icon{width:20px;height:16px;border-width:2px}
  .site-menu-icon::after{top:6px;border-width:2px}
  .site-menu-toggle[aria-expanded="true"] .site-menu-icon::before,
  .site-menu-toggle[aria-expanded="true"] .site-menu-icon::after{top:7px;left:0;width:21px}

  .navlinks{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-auto-rows:max-content;
    align-content:start;
    justify-content:stretch;
    width:100%;
    max-width:none;
    padding:18px 30px max(28px,env(safe-area-inset-bottom));
    background:#fffaf3;
    border-top:1px solid rgba(9,32,42,.07);
    box-shadow:none;
    visibility:hidden;
    pointer-events:none;
  }
  .nav.menu-open .navlinks{display:grid;visibility:visible;pointer-events:auto}
  .compact-home,
  .navlinks>.nav-top-link,
  .navlinks>.nav-disclosure>.nav-disclosure-toggle,
  .compact-context>.nav-disclosure-toggle{
    min-height:56px;
    padding:0;
    font-size:16px;
    font-weight:620;
    line-height:24px;
    letter-spacing:-.01em;
  }
  .navlinks>.nav-disclosure>.nav-disclosure-toggle::after,
  .compact-context>.nav-disclosure-toggle::after{width:6px;height:6px;margin:0 3px 4px 12px;border-width:1.5px}
  .navlinks>.nav-disclosure>.nav-disclosure-toggle[aria-expanded="true"]::after,
  .compact-context>.nav-disclosure-toggle[aria-expanded="true"]::after{transform:translateY(3px) rotate(225deg)}
  .nav-disclosure-panel{
    margin:0 0 8px;
    padding:0 0 3px 14px;
    background:transparent;
    border:0;
    border-radius:0;
  }
  .nav-disclosure-panel a{min-height:46px;padding:8px 0;font-size:15px;font-weight:570;line-height:22px;border-radius:0}
  .nav-disclosure-panel a:hover,.nav-disclosure-panel a:focus-visible{background:transparent;color:var(--coral-text,#B7432B)}
  .nav-disclosure-panel .nav-divider{width:28px;height:1px;margin:4px 0;background:rgba(9,32,42,.11)}
  .nav-current,.nav-context-current>.nav-disclosure-toggle{font-weight:690;text-decoration:none;color:var(--coral-text,#B7432B)}
  .compact-rule{height:1px;margin:15px 0;background:rgba(9,32,42,.10)}
  .compact-actions{padding:13px 0 0}
  .compact-actions .btn{width:100%;min-height:52px;margin:0;border-radius:11px;font-size:15px;line-height:20px;transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
  .compact-actions .nav-primary{height:auto;padding:12px 18px;font-weight:710;box-shadow:none}
  .compact-actions .nav-whatsapp{min-height:46px;margin-top:12px;padding:10px;background:transparent;border:0;border-radius:8px;color:var(--navy,#071b25);font-weight:600;box-shadow:none}
}
@media(max-width:767px){
  .site-header-wrap{width:calc(100% - 40px)}
  .site-menu-toggle{width:44px;min-width:44px}
  .navlinks{padding:14px 24px max(24px,env(safe-area-inset-bottom))}
  .compact-home,.navlinks>.nav-top-link,.navlinks>.nav-disclosure>.nav-disclosure-toggle,.compact-context>.nav-disclosure-toggle{min-height:55px}
}
@media(prefers-reduced-motion:reduce) and (max-width:1239px){.navlinks{transition:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important}
}
@media(min-width:1240px){.navlinks>.nav-journey>.nav-disclosure-panel{left:auto;right:-18px}}
/* Language picker, placed by deploy/localise-pages.php twice: in the header row before the menu button below 1240px, and in
   the main navigation after Contact (before the call-to-action button) from 1240px. CSS shows one at a time. It is a <details> element,
   so it opens without JavaScript; assets/site-navigation.js closes it on Escape, an outside click or when the menu opens.
   Flags: one .lang-flag-<flag> rule per language of i18n/pages.json (inline SVG, no extra request). */
.lang-flag{display:inline-block;flex:0 0 auto;width:20px;height:14px;border-radius:3px;background:#d8e1df center/cover no-repeat;box-shadow:0 0 0 1px rgba(9,32,42,.14)}
.lang-flag-gb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='2' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E")}
.lang-flag-nl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%2321468B' d='M0 0h9v6H0z'/%3E%3Cpath fill='%23fff' d='M0 0h9v4H0z'/%3E%3Cpath fill='%23AE1C28' d='M0 0h9v2H0z'/%3E%3C/svg%3E")}
.lang-flag-de{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath d='M0 0h5v3H0z'/%3E%3Cpath fill='%23D00' d='M0 1h5v2H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h5v1H0z'/%3E%3C/svg%3E")}
.lang-picker{position:relative;flex:0 0 auto;margin:0;padding:0;border:0;border-radius:0;background:none}
.lang-picker>summary.lang-picker-toggle{display:flex;align-items:center;justify-content:flex-start;gap:7px;margin:0;padding:0 11px;list-style:none;cursor:pointer;border-radius:999px;font:inherit;font-weight:800;letter-spacing:.04em;line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color .18s ease,border-color .18s ease}
.lang-picker>summary.lang-picker-toggle::-webkit-details-marker{display:none}
.lang-picker>summary.lang-picker-toggle::after{content:none}
.lang-picker-caret{width:7px;height:7px;margin:0 1px 0 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
.lang-picker[open]>summary .lang-picker-caret{transform:translateY(2px) rotate(-135deg)}
.lang-picker-list{position:absolute;top:calc(100% + 8px);right:0;z-index:90;min-width:200px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line,rgba(9,32,42,.12));border-radius:16px;box-shadow:0 18px 44px rgba(7,27,37,.16)}
.lang-picker-list li{margin:0;padding:0}
.lang-picker-list li+li{margin-top:2px}
.lang-picker-list .lang-picker-option{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:10px;color:var(--ink,#09202a);font-size:15px;font-weight:650;line-height:1.3;letter-spacing:0;text-decoration:none}
.lang-picker-list .lang-picker-option .lang-flag{width:22px;height:16px}
.lang-picker-list .lang-picker-option:hover{background:#f8f5f0}
.lang-picker-list .lang-picker-option.is-current{background:var(--paper,#f3f0ea);font-weight:800}
.lang-picker-header{display:none}
.navlinks>.lang-picker-nav{display:none}
/* The same light pill in the header row and in the main navigation. */
.lang-picker-header>summary.lang-picker-toggle,.lang-picker-nav>summary.lang-picker-toggle{height:40px;border:1px solid var(--line,rgba(9,32,42,.12));background:#fffaf3;color:var(--navy,#071b25);font-size:14px}
.lang-picker-header>summary.lang-picker-toggle:hover,.lang-picker-header[open]>summary.lang-picker-toggle,.lang-picker-nav>summary.lang-picker-toggle:hover,.lang-picker-nav[open]>summary.lang-picker-toggle{background:#f3efe8;border-color:rgba(9,32,42,.2)}
/* With the picker in the main navigation the desktop header row needs a little more room: link spacing 20px (was 26px)
   and header spacing 20px (was 24px). 1240-1279px, where the header is 36px narrower, is tighter still and uses a 140px
   logo. Measured on all twenty pages: at least 17px to spare on one row (tests/language-browser-test.js). */
@media(min-width:1240px){
  .nav{gap:20px}
  .navlinks{gap:20px}
  .navlinks>.lang-picker-nav{display:block}
  .navlinks>.lang-picker-nav .lang-picker-list{top:calc(100% + 12px)}
}
@media(min-width:1240px) and (max-width:1279px){
  .nav{gap:18px}
  .navlinks{gap:16px}
  .nav .logo img{width:140px}
  .navlinks>.lang-picker-nav>summary.lang-picker-toggle{padding:0 9px;gap:6px}
}
@media(max-width:1239px){
  /* In the header row: logo, [call to action], picker, menu button. The picker takes the free space on its left. */
  .lang-picker-header{display:block;margin-left:auto}
  .lang-picker-header+.site-menu-toggle,.nav.menu-open>.lang-picker-header+.site-menu-toggle{margin-left:0}
}
@media(max-width:360px){.lang-picker-header>summary.lang-picker-toggle{padding:0 9px;gap:6px}}
@media(prefers-reduced-motion:reduce){.lang-picker-caret,.lang-picker>summary.lang-picker-toggle{transition:none}}
