/* floating dock (appears on scroll up) */
.dock{position:fixed;z-index:30;top:1.6rem;left:0;right:0;margin-inline:auto;width:fit-content;display:none;align-items:center;gap:1.6rem;padding:.9rem .9rem .9rem 1.2rem;border-radius:99px;
  max-width:calc(100vw - 2.4rem);color:var(--fg);
  background:color-mix(in srgb,var(--bg) 72%,transparent);border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 2rem 5rem -2rem rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.dock.on{display:flex}
.dock-logo{display:flex;align-items:center;gap:1rem;padding:0 1rem 0 .4rem;font-weight:700;font-size:1.5rem;white-space:nowrap}
.dock-logo .brand-icon{display:block;width:3.4rem;height:3.4rem;border-radius:50%}
.dock-nav{display:none;align-items:center;gap:.2rem}
@media (min-width:64em){.dock-nav{display:flex}}
.dock-nav a{position:relative;padding:.9rem 1.5rem;border-radius:99px;font-size:1.5rem;transition:background .3s,color .3s}
.dock-nav a:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--c-primary-400)}
.dock-theme{display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:50%;border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);transition:background .3s,transform .5s var(--ease5)}
.dock-theme svg{width:1.9rem;fill:none;stroke:var(--fg);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dock-theme:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);transform:rotate(-20deg)}
.dock-cta{padding:1.1rem 2.2rem;border-radius:99px;font-size:1.5rem;font-weight:600;color:#fff;white-space:nowrap;background:linear-gradient(120deg,#ffb347,#e4572e);
  box-shadow:0 1rem 2.4rem -1rem rgba(228,87,46,.8);transition:transform .5s var(--ease5),box-shadow .4s}
.dock-cta:hover{transform:translateY(-.2rem) scale(1.03)}
@media (max-width:40em){.dock-logo span{display:none}.dock{gap:1rem}}

/* ===== phones: a bottom bar instead of the top pill — menu · consultation · call · logo (left) ===== */
.dock-menu,.dock-tel{display:none}
@media (max-width:49.99em){
  #iland{display:none!important}                                   /* the old floating call/request buttons are gone on phones */
  .dock{top:auto;bottom:0;left:0;right:0;margin:0;width:auto;max-width:none;border-radius:2rem 2rem 0 0;gap:.6rem;justify-content:space-between;
    padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));border-bottom:0;
    box-shadow:0 -1.6rem 4rem -1.6rem rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12)}
  .dock-menu,.dock-tel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-width:5.4rem;padding:.4rem .6rem;border-radius:1.4rem;color:var(--fg);transition:background .3s}
  .dock-menu svg,.dock-tel svg{width:2.4rem;height:2.4rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .dock-menu small,.dock-tel small{font-size:1.1rem;line-height:1.2;color:var(--fg-soft)}
  .dock-menu:active,.dock-tel:active{background:color-mix(in srgb,var(--fg) 8%,transparent)}
  .dock-nav,.dock-theme{display:none}
  .dock-menu{order:1}.dock-cta{order:2;flex:1;text-align:center;padding:1.2rem 1rem;font-size:1.5rem}
  .dock-tel{order:3}.dock-logo{order:4;padding:0 .4rem}
  .dock-logo span{display:none}.dock-logo .brand-icon{width:4.2rem;height:4.2rem}
  body{padding-bottom:0}
}
@media (max-width:49.99em){
  .dock-menu small,.dock-tel small{font-size:1.65rem}
  .dock-menu svg,.dock-tel svg{width:3.4rem;height:3.4rem}
  .dock-menu,.dock-tel{min-width:7.4rem}
  .dock-cta{font-size:1.95rem;padding:1.5rem 1rem}
  .dock-logo .brand-icon{width:5.4rem;height:5.4rem}
}
@media (max-width:49.99em){.dock-cta{margin-inline:25px}}     /* the consultation button is 25px narrower on each side */

/* the side menu and its dimmer must sit above the bottom bar (both used to be z-index 30, and the bar is later in the DOM) */
#overlay{z-index:40}
#offcanvas{z-index:45}