/* Asset version: 2026.09.17-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;
  --accentmore:#5d7dae; --accentmoreHover:#6490d1;
  --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:180px; --heroH-md:124px; --heroH-sm:148px;
  /* 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);
  transition: max-height .25s ease;
}
.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}
  #hero-1 .hero-inner{align-items:flex-start; padding-top:50px;}
  #hero-1 .hero-content{text-align:center; margin:0 auto;}
  #hero-1 .btn.btn-primary{display:block; width:max-content; margin:16px auto 0;}
}

/* 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}
@media (min-width: 1069px){
  .hero-content{max-width:860px;}
  #hero-1 .hero-inner{transform:translateX(-12.5%);}
  .brand-logo{max-height: calc(var(--nav-h) * 0.65);}
}
.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(227, 230, 234);
  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)}
.btn-more{background:var(--accentmore); color:#fff}
.btn-more:hover{background:var(--accentmoreHover)}
.btn-more, .box-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:85%; transform:translateY(-50%);
  width:clamp(800px, 80vw, 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:80vw;top:95%;}
}

/* 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: end;                   /* stick to 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;

  .tile2{
  align-content: center;
  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;
}

/* Fixed height for the contact tiles (keep width/flow unchanged) */
#telefoon, #email, #location-panel {
  aspect-ratio: auto !important;
  overflow: hidden;
}
#telefoon, #email {
  min-height: clamp(152px, 17vw, 184px);
  padding: clamp(16px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(5px, 0.8vw, 9px);
}
#telefoon h2:first-of-type,
#email h2 {
  margin: 0;
  font-size: clamp(20px, 1.75vw, 23px);
  line-height: 1.1;
}
#telefoon a,
#email a {
  width: fit-content;
  max-width: 100%;
}
#telefoon a h2,
#email a h1 {
  margin: 0;
  color: #fff;
  line-height: 1.08;
  font-weight: 650;
}
#telefoon a h2 {
  font-size: clamp(28px, 2.95vw, 38px);
}
#email a h1 {
  font-size: clamp(24px, 2.45vw, 33px);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.contact-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  margin-top: 0px;
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  color: #f2f4ff;
  font-size: clamp(14px, 1.15vw, 15px);
  font-weight: 650;
  line-height: 1;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
}
.contact-chip:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.contact-chip svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.contact-chip.whatsapp {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  color: #fff;
}
.contact-chip.whatsapp:hover {
  background: var(--accentHover);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
#telefoon .contact-chip.whatsapp {
  position: relative;
  top: -1px;
}
#location-panel {
  position: relative;
  min-height: clamp(220px, 28vw, 280px);
  padding: 0;
  background:
    linear-gradient(105deg, rgba(133, 159, 199, 0.08) 0%, rgba(14, 57, 102, 0.96) 36%, rgba(14, 48, 86, 1) 100%);
}
.location-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  min-height: inherit;
  color: #fff;
  text-decoration: none;
  background: var(--tileBg);
}
.location-map {
  position: relative;
  min-height: clamp(220px, 28vw, 280px);
  overflow: hidden;
  background: var(--tileBg);
}
.location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  filter: saturate(.9) brightness(.82) contrast(1.02);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 74%, rgba(0,0,0,.96) 82%, rgba(0,0,0,.45) calc(100% - 6px), transparent calc(100% - 5px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 74%, rgba(0,0,0,.96) 82%, rgba(0,0,0,.45) calc(100% - 6px), transparent calc(100% - 5px), transparent 100%);
}
.location-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 57, 102, 0) 70%, rgba(14, 57, 102, 0.08) 84%, rgba(14, 57, 102, 0.12) calc(100% - 7px), rgba(14, 57, 102, 0) calc(100% - 5px), rgba(14, 57, 102, 0) 100%),
    linear-gradient(180deg, rgba(24, 69, 118, 0.12) 0%, rgba(24, 69, 118, 0.05) 30%, rgba(24, 69, 118, 0.16) 100%);
  pointer-events: none;
}
.location-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 26% 52%, rgba(220,232,251,0.2) 0 0.38rem, transparent 0.45rem),
    radial-gradient(circle at 26% 52%, rgba(220,232,251,0.09) 0 3rem, transparent 3.1rem),
    radial-gradient(circle at 26% 52%, rgba(220,232,251,0.05) 0 5.2rem, transparent 5.3rem);
  opacity: .95;
  pointer-events: none;
}
.location-pin {
  position: absolute;
  left: 26%;
  top: 52%;
  width: clamp(30px, 4vw, 42px);
  height: clamp(30px, 4vw, 42px);
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.25));
  z-index: 1;
}
.location-pin svg {
  display: block;
  width: 100%;
  height: 100%;
}
.location-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  padding: clamp(28px, 4vw, 42px);
  text-align: right;
  background: transparent;
}
.location-copy .label {
  margin: 0;
  font-size: clamp(14px, 1.3vw, 15px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #859fc7;
}
.location-copy address {
  margin: 0;
  font-style: normal;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.3;
  font-weight: 550;
  text-wrap: balance;
}
.location-copy .route-note {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.35;
  color: rgba(255,255,255,0.78);
}
.location-card:hover .location-copy address,
.location-card:focus-visible .location-copy address {
  color: #dce8fb;
}
.location-card:hover .location-map::before,
.location-card:focus-visible .location-map::before {
  opacity: 1;
}
@media (max-width: 900px) {
  .location-card {
    grid-template-columns: 1fr;
  }
  .location-map {
    min-height: clamp(180px, 42vw, 240px);
  }
  .location-map::after {
    background:
      linear-gradient(90deg, rgba(14, 57, 102, 0) 72%, rgba(14, 57, 102, 0.08) 88%, rgba(14, 57, 102, 0.12) calc(100% - 7px), rgba(14, 57, 102, 0) calc(100% - 5px), rgba(14, 57, 102, 0) 100%),
      linear-gradient(180deg, rgba(24, 69, 118, 0.08) 0%, rgba(24, 69, 118, 0.16) 100%);
  }
  .location-copy {
    align-items: flex-end;
    text-align: right;
    padding: clamp(22px, 5vw, 28px);
  }
  .location-copy address,
  .location-copy .route-note {
    text-wrap: pretty;
  }
}
.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}
.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)}
.site-footer .cols > div{min-width:0}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
@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; }
.contact-link.whatsapp {
  background: rgba(37, 211, 102, 0.12);
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.28), 0 6px 14px rgba(0,0,0,.06);
}
.contact-link.whatsapp .label { color: #0b5c32; }
.contact-link.whatsapp .value {
  color: #063d20;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* 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;
  }
}