/* Asset version: 2026.04.16-3 */

    :root{
      /* Full-page bg color 0F3F6D */
      --bg-full:#0E3056;
      /* branding/palette */
      --font-stack: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      --text:#1d1d1f; --muted:#6e6e73; --bg:#ffffff; --tileBg:#0E3966;
      --accent:#0a6cff; --accentHover:#1a7bff; --focus:#0a84ff;
      --footerBg:#315680; --footerText:#e9e9e9;
      --radius:12px;
      --shadowLg:0 10px 30px rgba(0,0,0,0.12);
      --shadowSm:0 4px 12px rgba(0,0,0,0.10);
      /* containers */
      --maxW-lg:980px; --maxW-md:692px; --maxW-sm-pct:87.5%;
      --gap:24px; --padX:24px;
      /* breakpoints */
      --bp-twoUpToOneUp:734px;
      --bp-navMobileMax:833px;
      --bp-navTabletMax:1023px;
      --bp-desktopMin:1024px;
      /* nav */
      --nav-bg-desktop:#0E3056;
      --nav-keyline:rgba(0,0,0,0.12);
      --nav-link: #fff;
      --nav-link-opacity: .86;
      --nav-link-active: 1;
      /* sizes */
      --nav-h:85px; /* slightly increased to fit the 85% scaled logo */
      --curtain: rgba(28,28,30,0.4);
      --curtain-blur:0px;
      /* hero media */
      --heroH-lg:680px; --heroH-md:624px; --heroH-sm:390px;
      /* nav scrim controls (blur-calibrated vs. fallback) */
      --nav-scrim-bg-fallback: rgba(14,48,86, .92); /* used when blur is unsupported */
      --nav-scrim-bg-blur: rgba(14,48,86, .84);     /* used when blur is active */
      --nav-backdrop-filter: none;                   /* overridden when blur is supported */
      /* tile typography controls */
      --tile-text-scale: 1.5; /* controls scaling for all tile text */
      --tile-p-weight: 450;   /* controls paragraph weight in tiles */
    }

    /* Base - 272b36 og-bg */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:var(--font-stack); color:var(--text); background:var(--bg-full);
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }
    p{
      font-size: clamp(16px, 2.2vmin, 22px);
    }
    img{max-width:100%; display:block}
    a{color:inherit; text-decoration:none}
    a:focus-visible, button:focus-visible, [role="button"]:focus-visible, select:focus-visible{
      outline: 3px solid var(--focus);
      outline-offset: 2px;
      border-radius: 6px;
    }

    /* Containers */
    .container{max-width:var(--maxW-lg); margin:0 auto; padding:0 var(--padX)}
    .grid-12{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap)}
    .col-12{grid-column:1 / span 12}
    .col-6{grid-column:span 6}
    @media (max-width: 734px){
      .col-6{grid-column:1 / span 12}
    }

    /* NAVIGATION */
    header.site-nav{
      position:fixed; top:0; left:0; right:0; z-index:1900;
      height:var(--nav-h);
      /* background + blur calibrated via CSS vars */
      background: var(--nav-scrim-bg-fallback);
      backdrop-filter: var(--nav-backdrop-filter);
      -webkit-backdrop-filter: var(--nav-backdrop-filter);
      /* subtle keyline / separation without solid color */
      box-shadow: 0 1px 0 rgba(0,0,0,0.06);
      background-clip: padding-box;
      overflow: visible;               /* allow dropdown menus to overflow header */
    }

    @supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)){
      header.site-nav{
        background: var(--nav-scrim-bg-blur);
        backdrop-filter: saturate(170%) blur(10px);
        -webkit-backdrop-filter: saturate(170%) blur(10px);
      }
    }
    .nav-rail{height:var(--nav-h); display:flex; align-items:center; gap:16px}
    .site-nav-placeholder{ height: var(--nav-h); width:100%; display:block; }
    .brand{display:flex; align-items:center; height:100%}
    .brand-logo{
      height: auto;
      width: auto;
      max-height: calc(var(--nav-h) * 0.99);
    }
    .nav-items{list-style:none; margin:0 0 0 auto; padding:0; display:flex; gap:20px; align-items:center}
    .nav-items a{
      color:var(--nav-link); opacity:var(--nav-link-opacity); font-weight:600;
      padding:10px 6px; border-bottom:2px solid transparent;
    }
    .nav-items a[aria-current="page"]{text-decoration:none; border-color:currentColor; opacity:var(--nav-link-active)}

    .nav-cta{
      display:none;
      margin-left:auto;
      background:transparent;
      border:0;
      padding:8px;
      cursor:pointer;
      box-shadow:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color: #fff;
    }
    .nav-cta svg{ display:block; width:22px; height:14px; }
    /* hide legacy .bars markup if present */
    .nav-cta .bars, .nav-cta .bars span, .nav-cta .bars::before, .nav-cta .bars::after{ display:none !important; }

    /* Mobile/Tablet behaviors */
    @media (max-width: 833px){
      /* hide full nav, show compact toggle */
      .nav-items{display:none !important}
      .nav-cta{display:inline-flex !important; align-items:center; justify-content:center}
      /* Center brand ONLY when we switch to dropdown */
      .nav-rail{justify-content:center}
      .brand{position:absolute; left:50%; transform:translateX(-50%)}
      .nav-cta{position:absolute; right:24px}
    }

    /* Desktop/tablet: ensure toggle is hidden and nav is visible */
    @media (min-width: 834px){
      .nav-items{display:flex !important}
      .nav-cta{display:none !important}
      .nav-rail{justify-content:flex-start}
      .brand{position:static; transform:none}
    }

    /* Tray + Curtain */
    .nav-curtain{
      position:fixed; inset:0; background:var(--curtain);
      backdrop-filter: blur(var(--curtain-blur));
      -webkit-backdrop-filter: blur(var(--curtain-blur));
      opacity:0; pointer-events:none; transition:opacity .28s ease;
      z-index:1200;
    }
    body.nav-open .nav-curtain{opacity:1; pointer-events:auto}
    nav.site-nav-tray{
      position:fixed; left:0; right:0; top:var(--nav-h);
      max-height:0; overflow:hidden; background:#0e3a68; box-shadow:var(--shadowLg); z-index:1250;
      transition:max-height .32s ease .12s;
    }
    body.nav-open nav.site-nav-tray{max-height:calc(100vh - var(--nav-h))}
    nav.site-nav-tray ul{list-style:none; margin:0; padding:12px 0}
    nav.site-nav-tray li{opacity:0; transform:translateY(-4px); transition:opacity .32s ease, transform .32s ease}
    body.nav-open nav.site-nav-tray li{opacity:var(--nav-link-opacity); transform:none}
    nav.site-nav-tray a{display:block; padding:14px 24px; font-weight:600; color:#fff}
    .hero-maxwrap{ max-width:1920px; margin:0 auto; position:relative; }
    /* Tile layout overrides for square tiles */
    .section-dark .grid-12 > .col-6{ display:block; }
    .section-dark .grid-12 > .col-6 .tile{ display:block; height:auto; min-height:unset; }

    /* HERO (row1) — full-bleed wrapper with gradient background */
    .section-hero-2{
      position:relative; isolation:isolate;
      background:var(--bg-full);
      color:#fff;
      min-height:var(--heroH-lg)
    }
    .section-hero{
      position:relative; isolation:isolate;
      background:var(--bg-full);
      color:#fff;
      margin: 0; /* default: no extra margin — grid gap will control spacing */
    }
    /* keep top spacing for the primary top hero only */
    .section-hero.top-content { margin-bottom: var(--gap); }
    .section-hero .hero-inner{position:relative; min-height:var(--heroH-lg); display:flex; align-items:center}
    .hero-box{
      position: relative;
      background: linear-gradient(to right, #0d1b31, #0e3a68, #1181b2);
    }
    /* when a hero sits inside the .section-dark grid, use a small internal vertical padding
       so visual spacing and content breathing matches the tiles */
    .section-dark .col-12.section-hero .hero-box{ padding-top: calc(var(--gap) / 1); padding-bottom: calc(var(--gap) / 1); }
    .hero-2 {padding: 0px 0;}

    .hero-content{max-width:760px; position:relative; z-index:2}
    .hero-heading{font-size: clamp(24px, 4.2vw, 40px); line-height:1.15; margin:0 0 12px}
    .hero-sub{font-size: clamp(23px, 2.4vw, 20px); opacity:.99; margin:0 0 20px}
    /* muted inline text that keeps the same size/weight as surrounding text */
    .hero-muted{
      color: rgb(212, 215, 218);
      opacity: .95;
      font-size: inherit;      /* inherit size from parent (so it stays identical) */
      line-height: inherit;    /* inherit line-height for perfect vertical rhythm */
      font-weight: inherit;    /* inherit weight so it doesn't change boldness */
      vertical-align: baseline;
    }
    .btn{
      display:inline-block;
      font-weight:700;
      font-size: 1.2rem;            /* 2x text size */
      line-height: 1.1;
      padding:15px 25px;          /* 2x padding */
      border-radius:8px;
      border:none;
      cursor:pointer;
    }
    .btn-primary{background:var(--accent); color:#fff}
    .btn-primary:hover{background:var(--accentHover)}
    .reparatie-btn{
      display:inline-block;
      position:relative;
      left:50%;
      transform:translateX(-50%);
    }

    /* Make the services dropdown look like the primary button */
    #service-select{
      appearance:none; -webkit-appearance:none; -moz-appearance:none;
      display:inline-block;
      font-weight:700;
      font-size:1.2rem;          /* match .btn */
      line-height:1.1;
      padding:15px 48px 15px 25px; /* extra right padding for caret */
      border-radius:8px;
      border:none;
      background:var(--accent);
      color:#fff;
      cursor:pointer;
      box-shadow:none;
      /* custom caret */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position: right 16px center;
      background-size: 18px 18px;
    }
    #service-select:hover{ background: var(--accentHover); }
    #service-select:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }

    /* Keep the moved services UI readable inside the hero */
    .hero-diensten .title { margin:0 0 12px; font-size: calc(25px * var(--tile-text-scale)); color: inherit; }
    .hero-diensten .item-name,
    .hero-diensten .item-price{ font-size: calc(18px * var(--tile-text-scale)); color: inherit; }
    .hero-diensten .name-inc,
    .hero-diensten .total-inc{ font-weight:700; font-size: calc(20px * var(--tile-text-scale)); color: inherit; }
    .hero-diensten .expand-toggle{ font-size: calc(.95rem * var(--tile-text-scale)); color: inherit; }

    /* Car image — pinned to right edge, vertically centered, zero margin */
    .hero-media{
      position:absolute; right:0; top:65%; transform:translateY(-50%);
      width:clamp(400px, 35vw, 660px); z-index:1; margin:0; pointer-events:none;
    }
    @media (max-width: 1068px){
      .section-hero .hero-inner{min-height:var(--heroH-md)}
    }
    @media (max-width: 734px){
      .section-hero .hero-inner{min-height:var(--heroH-sm)}
      .hero-media{width:60vw;top:80%;}
    }

    /* HERO 2 media — non-overlapping image that adapts to layout */
    .hero-2 .hero-content{
      display: grid;
      grid-template-columns: 1fr;           /* stack by default (mobile first) */
      gap: 16px 24px;
      align-items: start;
    }

    /* Image defaults: below lists on mobile */
    .hero-2 .hero-media-dienst{
      grid-column: 1;
      grid-row: 2;                          /* ensure it sits under the diensten block */
      justify-self: center;                  /* center under the content */
      width: min(86%, 440px);               /* scale down to avoid overlap on small screens */
      height: auto;
    }

    /* When there’s room, move image to the right column and stick to right edge */
    @media (min-width: 834px){
      .hero-2 .hero-content{
        grid-template-columns: 1fr minmax(260px, clamp(300px, 34vw, 620px));
      }
      .hero-2 .hero-media-dienst{
        grid-column: 2;
        grid-row: 1;                        /* sit alongside the lists */
        justify-self: center;                /* center between the pricelist and the right edge of the container */
        align-self: center;
        width: clamp(300px, 34vw, 620px);   /* similar sizing behavior to .hero-media */
        max-width: 100%;
      }
    }

    /* Extra wide: allow a touch larger if space allows without overlap */
    @media (min-width: 1280px){
      .hero-2 .hero-media-dienst{
        width: clamp(320px, 35vw, 660px);
      }
    }

    /* ROW WRAPPERS */
    .section-dark{background:var(--bg-full); color:#fff; padding: 0 0 48px}
    .section-dark .container{
      max-width:1920px;
      /*padding-left:0;
      padding-right:0;8*/
    }
    .section-blue{background: linear-gradient(to right, #0d1b31, #0e3a68, #1181b2); color:#fff; padding:48px 0}

    /* Tiles (two-up) */
    .tile{
      align-content: center;
      background:var(--tileBg);
      color:#f2f4ff;
      border-radius:0;
      box-shadow:var(--shadowSm);
      padding:24px;
      aspect-ratio: 1 / 1;

      /* guard very tiny widths and rounding edge-cases */
      min-height: 200px;

      /* keep your text scaling etc. as you already have */
      font-size: 1.0rem;
    }
    .tile h2{ margin:0 0 12px; font-size: calc(25px * var(--tile-text-scale)); color: inherit; }
    .tile p{ margin:0 0 12px; color: inherit; font-size: calc(16px * var(--tile-text-scale)); font-weight: var(--tile-p-weight, 400); }

    /* Service + expandable text styles */
    .items-wrapper{position:relative; max-height:none; overflow:visible}

    /* Ensure service panels and their items never overflow their container
       — allow them to scale down on narrow viewports while keeping layout intact */
    .hero-diensten, .hero-diensten *, #service-select, .service-content, .items-wrapper, .items, .items .item, .item .item-name, .item .item-price, .hero-media-dienst {
      box-sizing: border-box;
      max-width: 100%;
    }

    /* Make select responsive inside its container */
    #service-select {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    /* Let the list rows ALWAYS stack vertically — one item per line */
    .items { display:flex; flex-direction:column; gap:8px; }
    .items .item { min-width: 0; flex: 0 0 100%; width:100%; display:flex; justify-content:space-between; gap:8px; align-items:center; }
    .items .item .item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .items .item .item-price { flex: 0 0 auto; margin-left: 12px; white-space: nowrap; }

    /* Responsive text scaling to prevent overflow — prefers container queries with a viewport fallback */
    .items-wrapper { container-type: inline-size; container-name: items; }

    /* Base font sizing for items (kept relative) */
    .items .item .item-name,
    .items .item .item-price {
      font-size: 1rem;
      line-height: 1.1;
      transition: font-size .12s ease;
      font-variant-numeric: tabular-nums;
    }

    /* Container-query driven scaling: reduce font-size when the items container is narrow */
    @container items (max-width: 520px) {
      .items .item .item-name,
      .items .item .item-price { font-size: 0.95rem; }
    }
    @container items (max-width: 420px) {
      .items .item .item-name,
      .items .item .item-price { font-size: 0.9rem; }
    }
    @container items (max-width: 360px) {
      .items .item .item-name,
      .items .item .item-price { font-size: 0.85rem; }
    }
    @container items (max-width: 300px) {
      .items .item .item-name,
      .items .item .item-price { font-size: 0.8rem; }
    }

    /* Fallback for browsers that don't support container queries */
    @media (max-width: 520px){ .items .item .item-name, .items .item .item-price { font-size: 0.95rem; } }
    @media (max-width: 420px){ .items .item .item-name, .items .item .item-price { font-size: 0.9rem; } }
    @media (max-width: 360px){ .items .item .item-name, .items .item .item-price { font-size: 0.85rem; } }
    @media (max-width: 300px){ .items .item .item-name, .items .item .item-price { font-size: 0.8rem; } }
    /* Restore full-width divider lines between items inside the .items block */
    .items hr { width:100%; align-self:stretch; border:none; border-top:1px solid #ccc; margin:10px 0; }

    /* Ensure service panels and hero media respect container width */
    .service-content { width: 100%; max-width: 100%; overflow: hidden; }
    .hero-media-dienst { max-width: 100%; box-sizing: border-box; }
    .text-wrapper{position:relative; overflow:hidden; max-height:170px; transition:max-height .3s ease}
    .text-wrapper:not(.collapsed){max-height:1000px}
    .price-overlay,.text-overlay{
      position:absolute; left:0; bottom:0; width:100%; pointer-events:none; transition:opacity .3s ease; z-index:1
    }
    .price-overlay{height:60px; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%)}
    .text-overlay{height:170px; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%)}
    .items-wrapper:not(.collapsed) .price-overlay{opacity:0}
    .text-wrapper:not(.collapsed) .text-overlay{opacity:0}
    .expand-toggle{
      display:block; text-align:center; margin-top:10px; font-weight:700; color:#001328; cursor:pointer;
      z-index:2; padding:4px 12px; font-size:.95rem; opacity:.6;
    }
    .tile .expand-toggle{ font-size: calc(.95rem * var(--tile-text-scale)); color: inherit; }
    .items .item{display:flex; justify-content:space-between; align-items:center}
    .item.final{margin-bottom:20px}
    .tile .item-name, .tile .item-price{ font-size: calc(18px * var(--tile-text-scale)); color: inherit; }
    .items hr{border:none; border-top:1px solid #ccc; margin:10px 0}
    .total-line{border:none; border-top:2px solid #000; margin:20px 0 10px}
    .total-item{display:flex; justify-content:space-between; margin-bottom:1px}
    .grey{color:#b6b6b6}
    .tile .name-inc, .tile .total-inc{ font-weight:700; font-size: calc(20px * var(--tile-text-scale)); color: inherit; }
    .service-content{display:none; padding:20px 0}
    .service-content.show{display:block}

    /* Footer placeholder */
    footer.site-footer{background:var(--footerBg); color:var(--footerText); padding:40px 0; margin-top:40px}
    .site-footer .cols{display:grid; gap:var(--gap); grid-template-columns:repeat(5, 1fr)}
    @media (max-width:1068px){ .site-footer .cols{grid-template-columns:repeat(3, 1fr)} }
    @media (max-width:734px){ .site-footer .cols{grid-template-columns:1fr} }
    .site-footer h4{margin:0 0 10px; color:#fbfbfb}
    .site-footer a{color:inherit; opacity:.9}
    .site-footer a:hover{opacity:1; text-decoration:underline}

    /* CONTACT WIDGET */
    :root {
      --contact-gap: clamp(16px, 3.5vmin, 28px);
      --contact-radius: clamp(12px, 1.6vmin, 18px);
      --contact-font: clamp(18px, 2vmin, 18px);
      --contact-card-max: min(94vw, 560px);
    }
    .contact-widget {
      position: fixed;
      right: var(--contact-gap);
      bottom: var(--contact-gap);
      z-index: 10000;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px;
    }
    .contact-fab {
      all: unset;
      box-sizing: border-box;
      background: rgba(255,255,255,0.9);
      color: #111;
      font-weight: 700;
      font-size: var(--contact-font);
      padding: clamp(12px, 1.8vmin, 16px) clamp(16px, 2vmin, 20px);
      border-radius: var(--contact-radius);
      cursor: pointer;
      letter-spacing: .2px;
      box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.14), 0 24px 60px rgba(0,0,0,.18);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: clamp(150px, 20vmin, 220px);
      transition: transform .12s ease, box-shadow .18s ease;
    }
    .contact-fab:hover {
      transform: translateY(-4px);
      box-shadow: inset 0 0 0 1px rgba(0,19,40,.08), 0 14px 32px rgba(0,0,0,.12);
    }
    .contact-fab:active { transform: translateY(0); }
    .contact-widget.open .contact-fab { display: none; }
    .contact-card[hidden] { display: none !important; }
    .contact-card {
      display: block;
      width: auto;
      max-width: var(--contact-card-max);
      background: rgba(255,255,255,0.85);
      backdrop-filter: saturate(160%) blur(8px);
      -webkit-backdrop-filter: saturate(160%) blur(8px);
      border-radius: var(--contact-radius);
      box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.14), 0 24px 60px rgba(0,0,0,.18);
      padding: clamp(12px, 1.8vmin, 18px);
      color: #111;
      transform-origin: bottom right;
      transform: scale(.98);
      opacity: 0;
      transition: opacity .18s ease, transform .18s ease;
    }
    .contact-widget.open .contact-card { opacity: 1; transform: scale(1); }
    .card-chrome { position: relative; padding-right: 36px; margin: 0 0 clamp(8px, 1.6vmin, 12px) 0; }
    .card-chrome h3 { margin: 0; line-height: 1.05; font-size: clamp(16px, 2.2vmin, 22px); color: #6b6b6b; }
    .contact-close {
      all: unset;
      position: absolute;
      top: 0;
      right: 0;
      width: 21px;
      height: 21px;
      display: grid;
      place-items: center;
      cursor: pointer;
      color: #111;
    }
    .contact-close svg { display: block; width: 100%; height: 100%; }
    .contact-close svg path { stroke-width: 1.4px; }
    .contact-close:hover { color: #000; }
    .contact-card-main { position: relative; display: flex; flex-direction: column; gap: clamp(10px, 2vmin, 16px); margin: 0; }
    .contact-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    padding: clamp(10px, 1.6vmin, 14px);
    border-radius: calc(var(--contact-radius) - 4px);
    background: rgba(255,255,255,0.95);
    box-shadow: inset 0 0 0 1px rgba(0,19,40,.06), 0 6px 14px rgba(0,0,0,.06);
    color: #001328;
    transition: transform .12s ease, box-shadow .18s ease;
    }
    .contact-link:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(0,19,40,.10), 0 14px 28px rgba(0,0,0,.08); }

    .contact-link .label { font-size: clamp(12px, 1.6vmin, 14px); font-weight: 700; color: #0d1b31; text-transform: uppercase; letter-spacing: .04em; }
    .contact-link .value { font-size: clamp(16px, 2.2vmin, 20px); font-weight: 600; color: #111; }

    /* Small screens: ensure the card remains usable */
    @media (max-width: 480px) {
    .contact-card { max-width: 94vw; }
    .contact-fab { min-width: 140px; }
    }

    /* Contact widget inline icon */
    .contact-icon {
    display: inline-block;
    margin-left: clamp(8px, 1.2vmin, 12px);
    flex: 0 0 auto;
    color: #111; /* inherits from parent, adjust if needed */
    }

    /* ensure the phone value aligns icon to the right of the number, vertically centered */
    .contact-link .value {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    }
    @media (max-width: 1500px){
      /* Stack each tile to full width earlier */
      .section-dark .grid-12 > .col-6{ grid-column: 1 / -1; }
    }
    /* smaller icon on very small screens */
    @media (max-width: 480px) {
    .contact-icon { width: 16px; height: 16px; margin-left: 8px; }
    }
    /* ——— Nav dropdown & nested list (2025 a11y-friendly) ——— */
    .nav-items li { position: relative; }
    .nav-items li.has-sub > a::after { content: "▾"; margin-left: 6px; font-size: .9em; opacity: .9; }
    .sub-menu {
      position: absolute; top: 100%; left: 0; z-index: 1400;
      background: rgba(14,58,104, 0.98); border-radius: 10px; box-shadow: var(--shadowLg);
      padding: 8px 0; min-width: 220px;
      opacity: 0; transform: translateY(-6px); pointer-events: none;
      transition: opacity .16s ease, transform .16s ease;
    }
    .sub-menu li { list-style: none; }
    .sub-menu a { display: block; padding: 10px 14px; color: #fff; opacity: .95; font-weight: 600; }
    .sub-menu a:hover { background: rgba(255,255,255,.08); opacity: 1; }
    .nav-items li.has-sub:hover > .sub-menu,
    .nav-items li.has-sub:focus-within > .sub-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }

    /* Mobile tray: show Z4 children as bullets */
    #site-nav-tray ul ul { list-style: none; padding-left: 0; }
    #site-nav-tray ul ul a { opacity: 1; font-weight: 500; }
    @media (max-width: 833px){
      :root { --mobile-nav-offset: 30%; }
      /* Offset both top-level and submenu items so their text starts at the same x */
      #site-nav-tray > ul > li > a,
      #site-nav-tray ul ul a { padding-left: var(--mobile-nav-offset); text-align: left; }
      /* Remove extra UL indentation so submenu text aligns with main items */
      #site-nav-tray ul ul { list-style: none; padding-left: 0; }
      /* Mobile tray: prepend a dash and space to each Z4 submenu link on mobile */
      #site-nav-tray ul ul a::before {
        content: "- ";
        display: inline-block;
        margin-right: 8px; /* small gap between dash and text */
        color: inherit;    /* match link color */
        opacity: 1;
        font-weight: 500;
      }
    }