/* Asset version: 2026.10.19-2 */

/* Contact page on the landing-page design language (assets/index-page.2026.06.28-1.css
   and landing.2026.09.22-1.css): same tokens, 1200px content edge, rounded tiles,
   one continuous hero gradient behind title and tiles. Tile order and stacking are unchanged:
   Telefoon + Email pair at >=1500px and stack below it; the address panel is
   full width with the map left (desktop) or on top (<=900px). */

:root{
  --bg-full:#0E3056;
  --text:#1d1d1f;
  --tileBg:rgba(8,31,60,.78);
  --tileText:#f2f4ff;
  --accent:#0a6cff;
  --accentHover:#1a7bff;
  --focus:#0a84ff;
  --footerBg:#315680;
  --footerText:#e9e9e9;
  --font-stack:Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadowLg:0 10px 30px rgba(0,0,0,.12);
  --shadowSm:0 4px 12px rgba(0,0,0,.10);
  --radius:14px;
  --maxW:1200px;
  --padX:clamp(20px, 4vw, 48px);
  --gap:clamp(20px, 2.4vw, 32px);
  --nav-h:85px;
  --nav-scrim:rgba(14,48,86,.84);
  --fs-h2:clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --fs-body:clamp(1rem, .95rem + .35vw, 1.2rem);
  --hero-gradient:linear-gradient(110deg, #0d1b31 0%, #0e3a68 52%, #1181b2 100%);
  --line:rgba(207,224,245,.14);
  /* contact surfaces */
  --contact-label:#a8bee0;
  --contact-value-lg:clamp(1.625rem, 1.15rem + 1.7vw, 2.375rem);
  --contact-value-md:clamp(1.375rem, 1rem + 1.45vw, 2.05rem);
  --tile-pad:clamp(22px, 3vw, 36px);
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-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;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,p{margin:0}
:where(a,button,[role="button"],select):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:6px;
}

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

/* Navigation (matches the landing page) */
header.site-nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1900;
  height:var(--nav-h);
  background:var(--nav-scrim);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  header.site-nav{
    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}
.brand{display:flex; align-items:center; height:100%}
.brand-logo{height:auto; width:auto; max-height:calc(var(--nav-h) * .62)}
.nav-items{list-style:none; margin:0 0 0 auto; padding:0; display:flex; gap:clamp(14px,1.6vw,26px); align-items:center}
.nav-items > li{position:relative}
.nav-items a{
  color:#fff;
  opacity:.86;
  font-weight:600;
  font-size:1rem;
  padding:10px 4px;
  border-bottom:2px solid transparent;
  display:inline-block;
  transition:opacity .18s ease, border-color .18s ease;
}
.nav-items a:hover{opacity:1}
.nav-items a[aria-current="page"]{opacity:1; border-color:currentColor}
.nav-items li.has-sub > a::after{content:"\25BE"; margin-left:6px; font-size:.85em; opacity:.9}
.sub-menu{
  position:absolute;
  top:100%;
  left:0;
  z-index:1400;
  list-style:none;
  margin:0;
  min-width:220px;
  background:rgba(14,58,104,.98);
  border-radius:12px;
  box-shadow:var(--shadowLg);
  padding:8px 0;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.sub-menu a{display:block; padding:11px 16px; 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}
.nav-cta{
  display:none;
  margin-left:auto;
  background:transparent;
  border:0;
  cursor:pointer;
  color:#fff;
  width:48px;
  height:48px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
}
.nav-cta svg{display:block; width:24px; height:18px}
.site-nav-placeholder{height:var(--nav-h)}
.nav-curtain{
  position:fixed;
  inset:0;
  background:rgba(28,28,30,.4);
  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 .1s;
}
body.nav-open nav.site-nav-tray{max-height:calc(100dvh - var(--nav-h))}
nav.site-nav-tray ul{list-style:none; margin:0; padding:10px 0}
nav.site-nav-tray ul ul{padding:0 0 6px}
nav.site-nav-tray a{display:block; padding:14px 24px; font-weight:600; color:#fff; opacity:.92; font-size:1.05rem}
nav.site-nav-tray ul ul a{padding-left:44px; opacity:1; font-weight:500; font-size:1rem}
nav.site-nav-tray ul ul a::before{content:"- "; opacity:.7}

@media (max-width:833px){
  .nav-items{display:none}
  .nav-cta{display:inline-flex}
  .nav-rail{justify-content:center}
  .brand{position:absolute; left:50%; transform:translateX(-50%)}
  .nav-cta{position:absolute; right:max(16px, calc(var(--padX) - 12px))}
}

/* One continuous landing-hero gradient: it starts at the top of the page
   (under the fixed navigation), runs behind the title and all three tiles and
   ends at the footer. The heading sits on the same left edge as the contact
   tiles so the eye moves straight into them. */
.site-nav-placeholder{display:none}
main#main-content{
  padding-top:var(--nav-h);
  background:var(--bg-full) var(--hero-gradient);
}
.section-hero{position:relative; isolation:isolate; color:#fff; background:transparent}
.section-hero .hero-maxwrap{max-width:1920px; margin-inline:auto}
.section-hero .hero-inner{padding-block:clamp(20px, 2.8vw, 34px)}
.section-hero .hero-heading{
  font-size:var(--fs-h2);
  line-height:1.15;
  letter-spacing:0;
  font-weight:700;
}

/* Contact section */
.section-dark{
  background:transparent;
  color:#fff;
  padding-block:clamp(20px, 2.8vw, 34px) clamp(28px, 5vw, 56px);
}

.tile{
  background:var(--tileBg);
  color:var(--tileText);
  border-radius:var(--radius);
  box-shadow:var(--shadowSm), inset 0 0 0 1px var(--line);
  min-width:0;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* Tiles fill their grid cell, so the Telefoon + Email pair stays balanced
   when the Email tile (with the form) is the taller one. */
.col-6{display:flex; flex-direction:column}
.col-6 > .tile{flex:1 1 auto}

#telefoon,
#email{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(10px, 1.2vw, 14px);
  padding:var(--tile-pad);
  min-height:clamp(150px, 15vw, 184px);
}

/* "Telefoon", "Email" and "Adres" share one label style */
.contact-label,
.location-copy .label{
  margin:0;
  font-size:clamp(13px, .78rem + .2vw, 15px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--contact-label);
}

#telefoon a{width:fit-content; max-width:100%}
#telefoon a h2{
  margin:0;
  color:#fff;
  font-weight:650;
  line-height:1.1;
  letter-spacing:0;
  transition:color .18s ease;
}
#telefoon a h2{font-size:var(--contact-value-lg)}
#telefoon a:hover h2{color:#dce8fb}

.contact-inline-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px clamp(16px, 2.4vw, 28px);
}

/* WhatsApp: the landing page's primary button, at chip size */
.contact-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 18px;
  border-radius:10px;
  font-size:clamp(15px, .9rem + .15vw, 16px);
  font-weight:700;
  line-height:1;
  transition:background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.contact-chip:active{transform:translateY(1px)}
.contact-chip svg{width:18px; height:18px; flex:0 0 auto}
.contact-chip.whatsapp{
  background:var(--accent);
  color:#fff;
  box-shadow:0 6px 18px rgba(10,108,255,.32);
}
.contact-chip.whatsapp:hover{background:var(--accentHover)}

/* Email tile: the message form (same fields and script as the contact
   overlay), light-on-dark. The shared css/contact-form stylesheet styles these
   class names for the white overlay, so everything is re-scoped to the tile. */
#email{justify-content:flex-start}
@media (min-width:1500px){
  #telefoon{justify-content:flex-start}
}
#email .contact-page-form-wrap{min-width:0}
#email{
  --pf-field-bg:rgba(5,20,41,.62);
  --pf-field-line:rgba(207,224,245,.52);
  --pf-label:#c3d3ea;
  --pf-focus:#8ec0ff;
  --pf-error:#ff9d94;
}
#contact-page-form{
  margin:0;
  padding:0;
  border:0;
}
#contact-page-form .contact-form-fields{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:12px;
}
@media (min-width:600px){
  #contact-page-form .contact-form-fields{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
#contact-page-form .contact-field{position:relative; display:block; min-width:0}
#contact-page-form .contact-field--wide{grid-column:1 / -1}
#contact-page-form .contact-field input,
#contact-page-form .contact-field textarea{
  box-sizing:border-box;
  display:block;
  width:100%;
  margin:0;
  padding:23px 14px 8px;
  border:1px solid var(--pf-field-line);
  border-radius:10px;
  background:var(--pf-field-bg);
  color:#fff;
  caret-color:#fff;
  font:inherit;
  font-size:16px;
  line-height:1.4;
  transition:border-color .15s ease, outline-color .15s ease, background-color .15s ease;
}
#contact-page-form .contact-field textarea{
  height:132px;
  min-height:84px;
  resize:vertical;
}
#contact-page-form .contact-field input:hover,
#contact-page-form .contact-field textarea:hover{border-color:rgba(207,224,245,.75)}
#contact-page-form .contact-field input:focus,
#contact-page-form .contact-field textarea:focus{
  outline:2px solid var(--pf-focus);
  outline-offset:1px;
  border-color:var(--pf-focus);
}
#contact-page-form .contact-field input:-webkit-autofill,
#contact-page-form .contact-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 100px #0a2341 inset;
  box-shadow:0 0 0 100px #0a2341 inset;
  caret-color:#fff;
}
#contact-page-form .contact-field [aria-invalid="true"]{
  border-color:var(--pf-error);
  box-shadow:0 0 0 1px var(--pf-error);
}

/* Floating label, same behaviour as the overlay: it sits inside the empty
   field and moves up once the field has focus or text. */
#contact-page-form .contact-field-label{
  position:absolute;
  left:15px;
  top:17px;
  max-width:calc(100% - 30px);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--pf-label);
  font-size:16px;
  line-height:1.2;
  pointer-events:none;
  transform-origin:left top;
  transition:transform .15s ease, color .15s ease;
}
#contact-page-form .contact-field input:focus + .contact-field-label,
#contact-page-form .contact-field input:not(:placeholder-shown) + .contact-field-label,
#contact-page-form .contact-field textarea:focus + .contact-field-label,
#contact-page-form .contact-field textarea:not(:placeholder-shown) + .contact-field-label{
  transform:translateY(-10px) scale(.75);
}
#contact-page-form .contact-field input:focus + .contact-field-label,
#contact-page-form .contact-field textarea:focus + .contact-field-label{color:var(--pf-focus)}
#contact-page-form .contact-field [aria-invalid="true"] + .contact-field-label{color:var(--pf-error)}

#contact-page-form .contact-form-honeypot{
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Verstuur: the landing page's primary button at WhatsApp-chip size, with the
   privacy notice next to it (wrapping underneath on narrow screens). */
#contact-page-form .contact-form-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:12px clamp(16px, 2.4vw, 24px);
  margin-top:14px;
}
#contact-page-form .contact-form-submit{
  position:relative;
  flex:0 0 auto;
  min-width:0;
  min-height:44px;
  padding:10px 22px;
  border:0;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font:inherit;
  font-size:clamp(15px, .9rem + .15vw, 16px);
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(10,108,255,.32);
  transition:background .18s ease, transform .12s ease, box-shadow .18s ease;
}
#contact-page-form .contact-form-submit:hover{background:var(--accentHover)}
#contact-page-form .contact-form-submit:active{transform:translateY(1px)}
#contact-page-form .contact-form-submit:focus-visible{
  outline:3px solid var(--pf-focus);
  outline-offset:3px;
}
#contact-page-form .contact-form-submit[aria-busy="true"]{color:transparent; pointer-events:none}
#contact-page-form .contact-form-submit[aria-busy="true"]::after{
  content:"";
  position:absolute;
  inset:0;
  width:20px;
  height:20px;
  margin:auto;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:contact-page-spin .7s linear infinite;
}
@keyframes contact-page-spin{to{transform:rotate(360deg)}}
#contact-page-form .privacy-notice{
  flex:1 1 220px;
  min-width:0;
  margin:0;
  max-width:none;
  color:#c9d8ec;
  font-size:13px;
  line-height:1.45;
  text-align:left;
}
@media (max-width:599.98px){
  #contact-page-form .contact-form-submit{flex:1 1 100%}
  #contact-page-form .privacy-notice{flex-basis:100%}
  #contact-page-form .contact-field textarea{height:112px}
  #contact-page-form .contact-field input{padding-top:22px}
}

#contact-page-form .contact-form-status{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.4;
  color:var(--pf-error);
}
#contact-page-form .contact-form-status:empty{display:none}

/* Confirmation replaces the form in place (the script hides the form and
   shows this block). */
#email .contact-form-done{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  padding:4px 0;
  border:0;
  font-size:clamp(1.125rem, 1rem + .6vw, 1.375rem);
  font-weight:700;
  line-height:1.3;
  color:#fff;
  outline:none;
}
#email .contact-form-done[hidden],
#contact-page-form[hidden]{display:none}
#email .contact-form-done:focus-visible{
  outline:2px solid var(--pf-focus);
  outline-offset:6px;
  border-radius:6px;
}
#email .contact-form-done svg{flex:0 0 auto; width:36px; height:36px}

@media (prefers-reduced-motion:reduce){
  #contact-page-form .contact-form-submit[aria-busy="true"]::after{animation-duration:2s !important}
}

/* Address panel: the map is part of the tile surface. It is darkened into the
   brand palette and fades into the address column, so map and copy read as one
   panel. Google's own marker shows the exact location (the iframe is not
   cropped: cropping moved the marker out of view), and the attribution row
   stays fully visible. */
#location-panel{
  padding:0;
  overflow:hidden;
}
.location-card{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(280px, .85fr);
  min-height:clamp(240px, 26vw, 300px);
  color:#fff;
  text-decoration:none;
  border-radius:inherit;
}
.location-card:focus-visible{outline-offset:-3px; border-radius:var(--radius)}
.location-map{
  position:relative;
  min-height:100%;
  overflow:hidden;
  background:transparent;
  /* layer 1 keeps Google's attribution row opaque; layer 2 is the fade */
  --map-fade:linear-gradient(90deg, #000 0%, #000 60%, rgba(0,0,0,.5) 84%, transparent 100%);
  -webkit-mask-image:linear-gradient(#000, #000), var(--map-fade);
  mask-image:linear-gradient(#000, #000), var(--map-fade);
  -webkit-mask-size:100% 22px, 100% 100%;
  mask-size:100% 22px, 100% 100%;
  -webkit-mask-position:left bottom, 0 0;
  mask-position:left bottom, 0 0;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.location-map iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  pointer-events:none;
  filter:invert(.92) hue-rotate(180deg) saturate(.6) brightness(1.05);
  transition:filter .25s ease;
}
/* brand-blue tint over the darkened map */
.location-map::after{
  content:"";
  position:absolute;
  inset:0;
  background:#0E3966;
  mix-blend-mode:color;
  opacity:.55;
  pointer-events:none;
  transition:opacity .25s ease;
}
.location-card:hover .location-map::after,
.location-card:focus-visible .location-map::after{opacity:.3}

.location-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:12px;
  padding:var(--tile-pad);
  text-align:right;
}
.location-copy address{
  margin:0;
  font-style:normal;
  font-size:var(--contact-value-md);
  line-height:1.25;
  font-weight:600;
  text-wrap:balance;
  transition:color .18s ease;
}
.location-copy .route-note{
  margin:0;
  font-size:clamp(14px, .82rem + .2vw, 16px);
  line-height:1.4;
  color:rgba(255,255,255,.78);
}
.location-card:hover .location-copy address,
.location-card:focus-visible .location-copy address{color:#dce8fb}

@media (max-width:900px){
  .location-card{grid-template-columns:1fr}
  .location-map{
    min-height:clamp(190px, 46vw, 260px);
    --map-fade:linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,.55) 100%);
  }
  .location-copy{
    padding:clamp(20px, 5vw, 28px) var(--tile-pad) var(--tile-pad);
    border-top:1px solid var(--line);
  }
  .location-copy address,
  .location-copy .route-note{text-wrap:pretty}
}

/* Footer (matches the landing page) */
footer.site-footer{
  background:var(--footerBg);
  color:var(--footerText);
  padding-block:clamp(32px,5vw,48px);
  padding-bottom:max(96px, env(safe-area-inset-bottom));
  margin-top:0;
}
.site-footer .cols{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
.site-footer h4{margin:0 0 10px; color:#fbfbfb; font-size:1.05rem}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.site-footer a{opacity:.9}
.site-footer a:hover{opacity:1; text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* Contact widget (unchanged from contact-page.2026.09.17-3.css; the shared
   css/contact-form stylesheet styles the form panel on top of this) */
: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;
}
@media (max-width: 480px) {
  .contact-card { max-width: 94vw; }
  .contact-fab { min-width: 140px; }
}
.contact-icon {
  display: inline-block;
  margin-left: clamp(8px, 1.2vmin, 12px);
  flex: 0 0 auto;
  color: #111;
}
.contact-link .value {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
@media (max-width: 480px) {
  .contact-icon { width: 16px; height: 16px; margin-left: 8px; }
}