/*
Theme Name: IntercomDirect
Description: Hand-coded theme for new.intercomdirect.nl (replaces Astra + Elementor for content-managed pages while keeping the "project" CPT mu-plugin and existing menus/media library intact).
Author: IntercomDirect B.V.
Version: 3.8.2
*/

/* Self-hosted fonts (3.7.0): Open Sans + Rubik, latin, variable weight (OFL). Replaces the Google Fonts call,
   whose old v1 URL only ever loaded Open Sans, so Rubik headings/buttons fell back to Helvetica. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/open-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/rubik-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --blue:#0077FF;
  --blue-dark:#005FCC;
  --orange:#F36B12;
  --navy:#0A1B33;
  --ink:#111826;
  --muted:#5B6472;
  --bg-alt:#F5F7FA;
  --white:#ffffff;
  --border:#E4E8EE;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 12px 32px rgba(10,27,51,0.10);
  --container:1200px;
  /* Matches intercomdirect.nl (the live production site) exactly, not a new custom typeface:
     Open Sans for body copy/hero headline, Rubik for section headings/buttons. */
  --font-body:'Open Sans', Arial, sans-serif;
  --font-heading:Rubik, Helvetica, Arial, Lucida, sans-serif;

  /* ===== Design tokens (3.7.0). Use ONLY these for type, spacing and buttons; no one-off sizes. ===== */
  /* Type scale: small / body / lead + H1-H6. Headings grow fluidly between 360px and 1440px. */
  --fs-small:0.875rem;                                   /* 14px  meta, labels, chips, footer */
  --fs-body:1rem;                                        /* 16px  all running text */
  --fs-lead:clamp(1rem, 0.95rem + 0.3vw, 1.125rem);     /* 16 -> 18px  hero intro */
  --fs-h6:1rem;                                          /* 16px  small card titles */
  --fs-h5:1.125rem;                                      /* 18px  card titles, FAQ questions */
  --fs-h4:1.25rem;                                       /* 20px  large card titles */
  --fs-h3:clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);        /* 20 -> 24px */
  --fs-h2:clamp(1.625rem, 1.3rem + 1.35vw, 2.25rem);     /* 26 -> 36px  section headings */
  --fs-h1:clamp(2rem, 1.6rem + 1.6vw, 2.75rem);          /* 32 -> 44px  one per page */
  --lh-body:1.65;
  --lh-heading:1.2;
  --measure:66ch;                                        /* ~60-75 characters per line */
  /* Spacing scale */
  --space-1:0.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-section:clamp(3rem, 2.4rem + 2.6vw, 5rem);     /* 48 -> 80px  vertical padding of every section */
  --space-hero:clamp(2rem, 1.5rem + 2.4vw, 4rem);        /* 32 -> 64px  top padding of heroes */
  --space-head:clamp(2rem, 1.6rem + 1.6vw, 3rem);        /* 32 -> 48px  gap under a section heading */
  --gap:clamp(1rem, 0.7rem + 1.2vw, 1.75rem);            /* 16 -> 28px  every card grid */
  --gap-split:clamp(1.5rem, 0.8rem + 3vw, 3.5rem);       /* 24 -> 56px  image/text splits */
  /* Buttons: one size; primary = orange, secondary = blue outline */
  --btn-h:44px;
  --btn-h-sm:40px;
  --btn-px:1.375rem;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Elementor's global kit sets its OWN font-family/size/weight directly on `.elementor-kit-4`
   (a class WordPress leaves on <body> from the old page-builder setup) — a class selector beats
   a plain `body{...}` type selector on specificity, so without !important every element that
   doesn't explicitly set its own font (paragraphs, nav links, anything relying on inheritance)
   was silently inheriting Elementor's cached "Bricolage Grotesque" instead of ours. */
body{
  margin:0;
  font-family:var(--font-body) !important;
  font-size:var(--fs-body) !important;
  font-weight:400 !important;
  color:var(--ink);
  background:var(--white);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
/* Elementor's still-active global kit CSS ships its OWN `.elementor-kit-4 h1{font-family,
   font-size, font-weight, line-height, letter-spacing, color, ...}` rule (and h2-h6 equivalents),
   at the exact same specificity (one class + one element) as a plain `h1{...}` or `.hero h1{...}`
   rule here, loaded LATER in the page (post-4.css). On a specificity tie the later stylesheet
   wins, so every one of these properties needs !important below or Elementor's cached
   "Bricolage Grotesque / 48px / weight 500" values silently win instead — confirmed by pulling
   the actual kit CSS file, not assumed.
   Section headings (h2) use Rubik/700, matching production's "Projecten"/"Overige diensten"
   headings; h1 and h3 are overridden back to Open Sans since production keeps the hero headline
   and card titles in the body font, not the heading font. */
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;line-height:var(--lh-heading) !important;font-weight:700 !important;font-family:var(--font-heading) !important;letter-spacing:normal !important;text-transform:none !important;}
h1{font-family:var(--font-body) !important;}
h3{font-family:var(--font-body) !important;font-weight:600 !important;}
h1{font-size:var(--fs-h1);} h2{font-size:var(--fs-h2);} h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);} h5{font-size:var(--fs-h5);} h6{font-size:var(--fs-h6);}
p{margin:0 0 1em;color:var(--muted);line-height:var(--lh-body);}

/* Elementor's still-active global kit CSS (.elementor-kit-4 h1..h6{color:accent-1}) force-colors every
   heading blue site-wide. Override deliberately: section headings read as ink/black (matching
   intercomdirect.nl's real hierarchy), only card-level h3 titles and the hero h1 stay blue. */
body h1, body h2, body h4, body h5, body h6{color:var(--ink) !important;}
body h3{color:var(--blue) !important;}
/* Hero heading reads as ink with just the key product/brand phrase picked out in blue (the
   ".accent" span each hero h1 wraps around it), rather than the whole line being flat blue —
   closer to how camerainstallatie.nl and elektricien-louwmans.nl highlight one phrase per headline. */
body .hero h1{color:var(--navy) !important;}
body .hero h1 .accent{color:var(--blue) !important;}
/* Headings on a solid-color band must stay white, overriding the ink default above */
body .band-blue h2, body .closing-cta h2, body .section-dark h2,
body .band-blue h1, body .closing-cta h1{color:#fff !important;}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}

/* ---------- Buttons (3.7.0): ONE size, two styles ----------
   .btn-accent  = primary (orange): the one main action per screen.
   .btn-outline / .btn-primary = secondary (blue outline). .btn-outline-white = secondary on a blue band.
   .btn-link    = tertiary text link with arrow, for cards. Height 44px = comfortable tap target, not oversized. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:var(--btn-h);padding:0 var(--btn-px);border-radius:999px;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-body);line-height:1.2;
  border:2px solid transparent;cursor:pointer;transition:background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;text-decoration:none;
}
.btn-accent{background:var(--orange) !important;color:#fff !important;}
.btn-accent:hover{background:#d95e0c !important;}
.btn-primary,.btn-outline{background:transparent !important;color:var(--blue) !important;border-color:var(--blue) !important;box-shadow:none;}
.btn-primary:hover,.btn-outline:hover{background:var(--blue) !important;color:#fff !important;}
.btn-outline-white{background:transparent !important;color:#fff !important;border-color:rgba(255,255,255,.7) !important;}
.btn-outline-white:hover{background:#fff !important;color:var(--blue) !important;}
.btn:focus-visible{outline:3px solid rgba(0,119,255,.35);outline-offset:2px;}
.btn-link{display:inline-flex;align-items:center;gap:6px;min-height:var(--btn-h);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-body);color:var(--blue) !important;background:none !important;border:0;padding:0;box-shadow:none;}
.btn-link svg{transition:transform .2s ease;}
.btn-link:hover svg{transform:translateX(4px);}
.btn-group{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;}

/* ---------- Utility bar ---------- */
.utility-bar{background:var(--blue);color:#eaf2ff;font-size:var(--fs-small);}
.utility-bar .container{display:flex;justify-content:space-between;align-items:center;height:40px;}
.utility-bar a{color:#fff;font-weight:600;}
.utility-bar .u-left{display:flex;gap:22px;align-items:center;}
.utility-bar .u-right{font-weight:600;color:#eaf2ff;}
.utility-bar .u-left svg{vertical-align:-3px;margin-right:6px;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:999;background:#fff;box-shadow:0 2px 16px rgba(10,27,51,.08);transition:box-shadow .2s ease;}
.site-header.is-scrolled{box-shadow:0 8px 24px rgba(10,27,51,.14);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:84px;gap:32px;}
/* Logo trimmed down from its native 52px and nav links bumped up in weight/size so the two hold
   an even visual balance instead of the logo dominating a row of thin, small nav text. */
.site-logo img{height:42px;width:auto;}
.main-nav{display:flex;align-items:center;gap:30px;}
.main-nav ul{display:flex;gap:26px;align-items:center;}
.main-nav > ul > li{position:relative;}
.main-nav a{font-weight:600;font-size:var(--fs-small);letter-spacing:normal;color:var(--ink);padding:8px 2px;}
.main-nav > ul > li > a:hover{color:var(--blue);}
.main-nav .sub-menu{
  display:none;position:absolute;top:100%;left:0;background:#fff;min-width:240px;
  border-radius:12px;box-shadow:var(--shadow);padding:10px;border:1px solid var(--border);
}
.main-nav li:hover > .sub-menu{display:block;}
.main-nav .sub-menu li a{display:block;padding:10px 12px;border-radius:8px;font-weight:500;}
.main-nav .sub-menu li a:hover{background:var(--bg-alt);color:var(--blue);}
.header-actions{display:flex;align-items:center;gap:18px;}
.header-phone{font-weight:700;color:var(--navy);font-size:var(--fs-body);}
/* Elementor's still-active global kit CSS (.elementor-kit-4 button{...}) outranks a single
   class selector on specificity, so the button background below is set with !important. */

/* Last two Hoofdmenu items are the phone number + CTA button (added as plain menu items) */
.main-nav > ul > li:nth-last-child(2){margin-left:8px;}
.main-nav > ul > li:nth-last-child(2) > a{font-weight:800;color:var(--navy);}
.main-nav > ul > li:last-child > a{
  display:inline-flex;align-items:center;min-height:var(--btn-h-sm);
  background:var(--orange);color:#fff;padding:0 var(--btn-px);border-radius:999px;font-family:var(--font-heading);
}
.main-nav > ul > li:last-child > a:hover{background:#d95e0c;}

/* ---------- Mobile nav toggle: real SVG-style animated hamburger, sized to match the logo ---------- */
.nav-toggle{
  display:none;width:48px;height:48px;flex:none;background:#fff !important;border:2px solid var(--border);
  border-radius:10px;cursor:pointer;position:relative;z-index:1002;
  align-items:center;justify-content:center;padding:0;
}
.hamburger-box{position:relative;width:22px;height:16px;display:inline-block;}
.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{
  position:absolute;left:0;width:22px;height:2.5px;border-radius:2px;background:var(--navy);
  transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.hamburger-inner{top:7px;}
.hamburger-inner::before{content:"";top:-7px;}
.hamburger-inner::after{content:"";top:7px;}
.nav-toggle.is-open .hamburger-inner{background:transparent;}
.nav-toggle.is-open .hamburger-inner::before{top:0;transform:rotate(45deg);background:var(--navy);}
.nav-toggle.is-open .hamburger-inner::after{top:0;transform:rotate(-45deg);background:var(--navy);}

.nav-close{
  display:none;position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border);background:#fff !important;font-size:var(--fs-h4);line-height:1;color:var(--navy) !important;cursor:pointer;
}

.nav-overlay{display:none;position:fixed;inset:0;background:rgba(10,27,51,.45);z-index:999;opacity:0;transition:opacity .25s ease;}
.nav-overlay.is-open{display:block;opacity:1;}
body.nav-locked{overflow:hidden;}

@media (max-width:1024px){
  .nav-toggle{display:inline-flex;}
  .header-phone{display:none;}
  .utility-bar .u-right{display:none;}

  .main-nav{
    display:block;position:fixed;top:0;right:0;height:100vh;width:min(320px,86vw);
    background:#fff;box-shadow:-12px 0 32px rgba(10,27,51,.18);
    transform:translateX(100%);transition:transform .25s ease;z-index:1000;
    overflow-y:auto;padding:90px 24px 24px;
  }
  .main-nav.nav-open{transform:translateX(0);}
  .nav-close{display:block;}
  .main-nav > ul{display:flex;flex-direction:column;gap:4px;align-items:stretch;}
  .main-nav > ul > li{width:100%;}
  .main-nav > ul > li > a{display:block;padding:14px 4px;border-bottom:1px solid var(--border);}
  .main-nav .sub-menu{position:static;display:block;box-shadow:none;border:none;padding:0 0 0 14px;margin-top:4px;}
  .main-nav li:hover > .sub-menu{display:none;}
  .main-nav li.menu-item-has-children > .sub-menu{display:none;}
  .main-nav li.submenu-open > .sub-menu{display:block;}
  .main-nav > ul > li:nth-last-child(2){margin-left:0;}
  .main-nav > ul > li:last-child{margin-top:12px;}
  .main-nav > ul > li:last-child > a{display:inline-block;}
}
@media (min-width:1025px){
  .main-nav{display:flex;}
}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,#F7FAFF 0%, #FFFFFF 60%);padding:var(--space-hero) 0 var(--space-section);position:relative;overflow:hidden;}
.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:var(--gap-split);align-items:center;}
/* Faint drifting field of intercom/camera/shield/wifi line-icons behind the hero copy — an ambient
   texture (not a literal photo) that reads as "security tech" without competing with the heading. */
.hero::before{
  content:"";position:absolute;inset:-15% -15%;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%230A1B33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='18' y='22' width='34' height='50' rx='6'/><circle cx='35' cy='38' r='7'/><line x1='27' y1='56' x2='43' y2='56'/><line x1='27' y1='63' x2='43' y2='63'/><rect x='150' y='38' width='40' height='26' rx='6'/><circle cx='170' cy='51' r='8'/><path d='M190 46 l14 -8 v26 l-14 -8z'/><path d='M60 148 l24 -10 24 10 v26c0 18 -12 30 -24 34 -12 -4 -24 -16 -24 -34z'/><path d='M74 166 l8 8 16 -18'/><path d='M150 190a34 34 0 0 1 60 0'/><path d='M162 202a18 18 0 0 1 36 0'/><circle cx='180' cy='214' r='3.2' fill='%230A1B33'/></g></svg>");
  background-repeat:repeat;background-size:240px 240px;opacity:.05;
  animation:heroDrift 60s linear infinite;
}
@keyframes heroDrift{from{transform:translate(0,0);}to{transform:translate(-240px,-240px);}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none;}}
/* Exact match to intercomdirect.nl's real hero headline: Open Sans/700/34px/line-height:1 */
.hero h1{font-size:var(--fs-h1) !important;font-weight:700 !important;letter-spacing:normal !important;line-height:var(--lh-heading) !important;}
.hero .lead{color:var(--muted);font-size:var(--fs-lead);line-height:var(--lh-body);max-width:var(--measure);}
.trust-checks{display:flex;flex-direction:column;gap:10px;margin:22px 0 28px;}
.trust-checks li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:var(--fs-body);}
.trust-checks .tick{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);flex:none;}
.hero-ctas{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3);}
.trust-badge{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 18px;max-width:420px;box-shadow:var(--shadow);}
.trust-badge .score{font-size:var(--fs-h3);font-weight:800;color:var(--blue);}
.trust-badge .stars{color:var(--orange);letter-spacing:2px;font-size:var(--fs-small);}
.trust-badge .tb-text{font-size:var(--fs-small);color:var(--muted);line-height:1.3;}
.trust-badge .tb-text strong{display:block;color:var(--ink);font-size:var(--fs-small);}

.hero-media{position:relative;}
.hero-media img,.hero-media video{border-radius:var(--radius);width:100%;aspect-ratio:5/4;object-fit:cover;box-shadow:var(--shadow);}
.hero-media .hero-video-mobile{display:none;}
@media (max-width:640px){
  .hero-media .hero-video-desktop{display:none;}
  .hero-media .hero-video-mobile{display:block;aspect-ratio:3/4;}
}
.hero-float{
  position:absolute;left:-24px;bottom:-24px;background:#fff;color:var(--ink);border-radius:14px;
  padding:16px 20px;box-shadow:var(--shadow);min-width:190px;border:1px solid var(--border);
}
.hero-float .big{font-size:var(--fs-h3);font-weight:800;color:var(--orange);}
.hero-float .small{font-size:var(--fs-small);color:var(--muted);}

@media (max-width:1024px){
  .hero .container{grid-template-columns:minmax(0,1fr);}
  .hero-media img,.hero-media video{aspect-ratio:4/3;}
}

/* ---------- Generic section scaffolding ---------- */
.section{padding:var(--space-section) 0;}
.section-tight{padding-bottom:0 !important;}
.band-overlap{padding-bottom:calc(var(--space-section) + 40px) !important;}
.section-alt{background:var(--bg-alt);}
.section-dark{background:var(--navy);color:#fff;}
.section-head{max-width:calc(var(--measure) + 4rem);margin:0 auto var(--space-head);text-align:center;}
.section-head h2{font-size:var(--fs-h2) !important;}
.section-head p{color:var(--muted);font-size:var(--fs-small);}
.section-dark .section-head p{color:#b9c6db;}
.eyebrow{display:inline-block;color:var(--blue);font-weight:700;font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;}

/* Bold solid-blue band, matching intercomdirect.nl's high-contrast rhythm (not muted navy) */
.band-blue{background:var(--blue);color:#fff;text-align:center;}
.band-blue .eyebrow{color:#cfe3ff;}
.band-blue h2{color:#fff;}
.band-blue p{color:#dbe9ff;max-width:var(--measure);margin:0 auto var(--space-3);}
/* This specific heading is long enough that it wraps awkwardly (only the last word onto its
   own line) at the 40px Elementor-kit default it was otherwise inheriting — sized down and
   locked to one line on desktop, where the container is wide enough to fit it comfortably. */
.nowrap-heading{font-size:var(--fs-h2) !important;}
@media (min-width:1025px){.nowrap-heading{white-space:nowrap;}}

/* White card that overlaps the bottom edge of a .band-blue section above it */
.floating-wrap{margin-top:-64px;position:relative;z-index:2;}
.floating-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:36px;}

/* ---------- single-project.php hero — reuses the site's standard light .hero pattern (same
   drifting-icon background, hero-copy/hero-media grid) instead of a bespoke solid-blue band, so
   a case-study page feels like part of the same site rather than a one-off template. ---------- */
.project-hero .back-link{
  display:inline-flex;align-items:center;gap:8px;color:var(--blue) !important;font-weight:700;
  font-size:var(--fs-small);margin-bottom:18px;
}
.fact-chips{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 8px;}
.fact-chip{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);
  border-radius:999px;padding:9px 16px 9px 14px;font-weight:700;font-size:var(--fs-small);color:var(--ink);
  box-shadow:var(--shadow);
}
.fact-chip svg{color:var(--blue);flex:none;}
.hero-media .phf-badge{
  position:absolute;left:24px;bottom:-24px;background:#fff;color:var(--ink);border-radius:14px;
  padding:16px 22px;box-shadow:var(--shadow);display:flex;gap:24px;z-index:1;
}
.phf-badge strong{display:block;font-size:var(--fs-h3);font-weight:800;color:var(--blue);line-height:1.1;}
.phf-badge span{font-size:var(--fs-small);color:var(--muted);font-weight:600;}

/* ---------- single-project.php content: narrative + sticky facts sidebar ---------- */
.project-content-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--gap-split);align-items:start;}
.project-narrative h3{font-size:var(--fs-h3);margin-top:1.5em;}
.project-narrative h3:first-child{margin-top:0;}
.project-narrative p{font-size:var(--fs-body);}
.project-highlights{margin:28px 0;display:flex;flex-direction:column;gap:12px;}
.project-highlights li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:var(--fs-body);color:var(--ink);}
.project-highlights svg{flex:none;color:var(--blue);background:rgba(0,119,255,.1);border-radius:50%;padding:3px;width:22px;height:22px;box-sizing:border-box;}
.project-sidebar{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px;}
.project-specs{background:var(--bg-alt);border-radius:var(--radius);padding:24px 26px;}
.project-specs h4{font-size:var(--fs-small);margin-bottom:16px !important;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.project-specs dl{margin:0;display:flex;flex-direction:column;gap:14px;}
.project-specs dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--border);padding-bottom:12px;}
.project-specs dl > div:last-child{border-bottom:none;padding-bottom:0;}
.project-specs dt{font-size:var(--fs-small);color:var(--muted);font-weight:600;}
.project-specs dd{margin:0;font-weight:800;font-size:var(--fs-body);color:var(--ink);text-align:right;}
.project-specs-cta{background:var(--navy);color:#fff;}
.project-specs-cta h4{color:#9db3d1;}
.project-specs-cta p{color:#c7d4e8;font-size:var(--fs-small);margin-bottom:16px;}
@media (max-width:900px){
  .project-content-grid{grid-template-columns:minmax(0,1fr);}
  .project-sidebar{position:static;flex-direction:row;flex-wrap:wrap;}
  .project-sidebar > div{flex:1 1 260px;}
}
@media (max-width:640px){.project-sidebar{flex-direction:column;}}

/* Branded gradient fallback for a related-project card with no photo yet — never a fake photo */
.pc-photo-empty{aspect-ratio:4/3;background:linear-gradient(135deg,var(--blue),var(--blue-dark));position:relative;border-radius:var(--radius) var(--radius) 0 0;}
@media (max-width:640px){.floating-wrap{margin-top:-40px;}.floating-card{padding:24px;}}

/* Intro split */
.intro-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-split);align-items:stretch;}
.intro-split > img{border-radius:var(--radius);width:100%;height:100%;min-height:320px;max-height:560px;aspect-ratio:auto;object-fit:cover;}
.intro-split > div{align-self:center;max-width:var(--measure);}
@media (max-width:1024px){.intro-split{grid-template-columns:minmax(0,1fr);}.intro-split > img{height:auto;min-height:0;aspect-ratio:4/3;}}

/* System cards (3) */
.card-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.system-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.system-card img{height:180px;object-fit:cover;}
.system-card .sc-inner{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1;}
.sci-icon{
  width:54px;height:54px;border-radius:15px;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex:none;
}
.sci-icon svg{width:27px;height:27px;}
.sci-icon-alt{background:var(--orange);}
.system-card h3{font-size:var(--fs-h4) !important;}
.system-card ul{margin:16px 0 20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.system-card ul li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);color:var(--muted);}
.system-card ul li::before{content:"✓";color:var(--blue);font-weight:800;}
.system-card .btn{align-self:flex-start;}
@media (max-width:900px){.card-grid-3{grid-template-columns:minmax(0,1fr);}}

/* ---------- Icon quick-links strip (under the hero) ---------- */
.quick-links-strip{background:#fff;border-bottom:1px solid var(--border);}
/* Full-bleed on purpose — unlike the rest of the page's sections, this strip is not capped by
   `.container`'s 1200px max-width, so it reads as a distinct utility band spanning the whole
   viewport (matching the icon-shortcut band pattern on elektricien-louwmans.nl). */
.qls-wrap{width:100%;padding:0 32px;}
.qls-row{display:flex;flex-wrap:wrap;}
.qls-item{
  flex:1 1 0;min-width:150px;display:flex;align-items:center;gap:12px;padding:22px 16px;
  border-left:1px solid var(--border);transition:background .15s ease;
}
.qls-item:first-child{border-left:none;}
.qls-item:hover{background:var(--bg-alt);}
.qls-icon{
  flex:none;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.qls-icon svg{width:22px;height:22px;}
.qls-icon-alt{background:var(--orange);}
/* Labels stay on a single line — the row is now full-width so every item has enough room for
   its whole label; min-width:0 lets the flex item shrink instead of forcing the row wider than
   the viewport on the rare narrow-desktop width where it's still tight. */
.qls-text{flex:1;min-width:0;white-space:nowrap;font-weight:700;font-size:var(--fs-body);color:var(--ink);line-height:1.3;}
.qls-arrow{flex:none;color:var(--muted);transition:transform .2s ease, color .2s ease;}
.qls-item:hover .qls-arrow{color:var(--blue);transform:translateX(3px);}
@media (max-width:900px){
  .qls-item{flex:1 1 50%;border-left:none;border-top:1px solid var(--border);}
  .qls-item:nth-child(odd){border-right:1px solid var(--border);}
  .qls-text{font-size:var(--fs-small);}
}
@media (max-width:480px){
  .qls-item{flex:1 1 100% !important;border-right:none !important;}
  .qls-text{white-space:normal;}
}

/* Project filters + wider grid (Projecten landing page) */
.project-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px;}
.pf-btn{
  background:#fff !important;border:1.5px solid var(--border);color:var(--ink) !important;font-weight:600;font-size:var(--fs-small);
  padding:9px 18px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.pf-btn:hover{border-color:var(--blue);}
.pf-btn.is-active{background:var(--blue) !important;border-color:var(--blue);color:#fff !important;}
.project-grid-wide{grid-template-columns:repeat(4,minmax(0,1fr));}
.project-grid-wide .project-card[hidden]{display:none;}
@media (max-width:1024px){.project-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.project-grid-wide{grid-template-columns:minmax(0,1fr);}}

/* Contact page: form + info cards */
.form-notice{border-radius:12px;padding:16px 20px;margin-bottom:28px;font-weight:600;font-size:var(--fs-body);}
.form-notice-success{background:#e6f4ea;color:#1e7a34;border:1px solid #b7e0c3;}
.form-notice-error{background:#fdecec;color:#b3261e;border:1px solid #f5c2c0;}

.contact-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gap-split);align-items:start;}
.contact-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;}
.contact-form .form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
.contact-form label{display:block;font-size:var(--fs-small);font-weight:700;color:var(--ink);margin-bottom:16px;}
.contact-form input,.contact-form textarea{
  display:block;width:100%;margin-top:6px;padding:12px 14px;border:1.5px solid var(--border);
  border-radius:10px;font:inherit;font-weight:400;color:var(--ink);background:#fff;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--blue);}
.contact-form textarea{resize:vertical;}

.contact-info-cards{display:flex;flex-direction:column;gap:18px;}
.info-card{background:var(--bg-alt);border-radius:var(--radius);padding:22px 24px;}
.info-card-main{display:block;font-size:var(--fs-h4);font-weight:800;color:var(--blue);margin:6px 0 8px;}
.info-card p{margin:0;font-size:var(--fs-small);}
@media (max-width:900px){.contact-layout{grid-template-columns:minmax(0,1fr);}.contact-form .form-row{grid-template-columns:minmax(0,1fr);}}

/* Team grid (Over Ons) — clean initial-badge avatars since no real staff photos exist in the media library yet */
.team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);}
.team-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px 16px;text-align:center;box-shadow:var(--shadow);}
.team-avatar{
  width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:var(--fs-lead);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}
.team-card h4{font-size:var(--fs-h6) !important;margin-bottom:4px;}
.team-card p{font-size:var(--fs-small);margin:0;}
@media (max-width:1024px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:640px){.team-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}

/* Services cross-nav grid (used on Over Ons + bottom of every service page) — same interactive
   treatment as the project cards: photo zoom on hover, card lift, animated CTA arrow. */
.services-nav-card{
  display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:visible;
  box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.services-nav-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(10,27,51,.16);border-color:var(--blue);}
.services-nav-card .snc-photo{overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;}
.services-nav-card .snc-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s ease;}
.services-nav-card:hover .snc-photo img{transform:scale(1.1);}
.snc-body h4{font-size:var(--fs-h6) !important;margin:0 0 6px;color:var(--ink);}
.snc-cta{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:700;color:var(--blue);}
.snc-cta svg{transition:transform .2s ease;}
.services-nav-card:hover .snc-cta svg{transform:translateX(4px);}

/* Pricing/bundle card (service pages) */
.pricing-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px;text-align:center;}
.pricing-card h3{font-size:var(--fs-h3) !important;margin-top:4px;}
.pricing-amount{font-size:var(--fs-h4);color:var(--ink);margin:10px 0 22px;}
.pricing-amount strong{color:var(--blue);font-size:var(--fs-h3);font-weight:800;}
.pricing-amount span{color:var(--muted);font-size:var(--fs-small);}
.pricing-items{display:inline-flex;flex-direction:column;gap:10px;text-align:left;margin:0 auto 26px;}
.pricing-items li{display:flex;gap:8px;font-size:var(--fs-body);color:var(--ink);}
.pricing-items li::before{content:"✓";color:var(--blue);font-weight:800;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:start;}
.pricing-grid .pricing-card{padding:32px 26px;}
.pricing-grid .pricing-card .btn{width:100%;}
@media (max-width:900px){.pricing-grid{grid-template-columns:minmax(0,1fr);max-width:420px;margin:0 auto;}}

/* template-landing.php block renderer — a bordered highlight card for a single important note
   (e.g. the AVG/privacy caveat on the camera-security landing page), distinct from prose. */
.info-callout{background:var(--bg-alt);border-left:3px solid var(--blue);border-radius:var(--radius-sm);padding:22px 26px;}
.info-callout strong{display:block;font-family:var(--font-heading);font-size:var(--fs-h5);margin-bottom:8px;color:var(--ink);}
.info-callout p{margin:0;color:var(--muted);font-size:var(--fs-body);}
/* The 'steps'/'compare' block renderers set an inline grid-template-columns (column count varies
   per block, e.g. 2, 3 or 4 items) — inline style beats .steps/.card-grid-3's own responsive rules
   regardless of media query, so those need re-asserting here with !important at the same breakpoints. */
@media (max-width:1024px){.steps[style]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;}}
@media (max-width:900px){.card-grid-3[style]{grid-template-columns:minmax(0,1fr) !important;}}
@media (max-width:600px){.steps[style]{grid-template-columns:minmax(0,1fr) !important;}}

/* Checklist band */
.checklist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 32px;}
.checklist-grid li{display:flex;gap:8px;font-size:var(--fs-body);color:var(--ink);padding:8px 0;border-bottom:1px dashed var(--border);}
.checklist-grid li::before{content:"✓";color:var(--blue);font-weight:800;}
@media (max-width:900px){.checklist-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:600px){.checklist-grid{grid-template-columns:minmax(0,1fr);}}

/* Projects — portfolio-style interactive cards: photo zoom on hover, card lift, location badge
   overlapping the photo (same proven pattern as the daily-services cards), chip-style stats,
   and a real CTA button with an animated arrow, so the whole card reads as clickable. */
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.project-card{
  display:block;border-radius:var(--radius);overflow:visible;box-shadow:var(--shadow);background:#fff;border:1px solid var(--border);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.project-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(10,27,51,.18);border-color:var(--blue);}
/* .pc-photo itself stays overflow:visible so the .pc-tag location badge (offset -16px below
   the photo) never gets sliced off; the zoom-on-hover clipping happens one level down, on
   .pc-photo-clip, which wraps only the <img> — same fix pattern already used for .sc-badge. */
.project-card .pc-photo{position:relative;overflow:visible;}
.project-card .pc-photo-clip{overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;}
.project-card .pc-photo-clip img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s ease;}
.project-card:hover .pc-photo-clip img{transform:scale(1.09);}
.project-card .pc-tag{
  position:absolute;left:16px;bottom:-16px;background:var(--blue);color:#fff;font-weight:700;font-size:var(--fs-small);
  padding:8px 16px;border-radius:999px;box-shadow:0 8px 18px rgba(0,119,255,.35);white-space:nowrap;z-index:2;
}
.project-card .pc-tags{position:absolute;left:16px;top:16px;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 32px);}
.project-card .pc-tags span{background:rgba(10,27,51,.72);color:#fff;font-size:var(--fs-small);font-weight:700;padding:5px 10px;border-radius:999px;backdrop-filter:blur(2px);}
.project-card .pc-body{padding:28px 22px 22px;}
.pc-kicker{display:block;font-size:var(--fs-small);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.project-card h3{font-size:var(--fs-h4) !important;margin-bottom:14px;}
.project-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;}
.project-meta span{
  display:inline-flex;align-items:center;gap:5px;background:var(--bg-alt);border-radius:999px;
  padding:6px 12px;font-size:var(--fs-small);font-weight:600;color:var(--ink);
}
.pc-cta{display:inline-flex;align-items:center;gap:8px;}
.pc-cta svg{transition:transform .2s ease;}
.project-card:hover .pc-cta svg{transform:translateX(4px);}
.section-foot-link{text-align:center;margin-top:36px;}
@media (max-width:900px){.project-grid{grid-template-columns:minmax(0,1fr);}}

/* City band */
.city-band{text-align:center;}
.city-band .lead{max-width:560px;margin:0 auto 24px;color:#b9c6db;}
.city-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:920px;margin:32px auto 0;}
.city-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:9px 18px;font-size:var(--fs-small);font-weight:600;color:#e7edf6;}
.city-chip::before{content:"📍";margin-right:6px;font-size:var(--fs-small);}

/* Plain city list inside a floating white card, matching intercomdirect.nl (no pill chips there) */
.city-grid-plain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 24px;text-align:left;}
.city-grid-plain span{display:block;padding:6px 0;font-size:var(--fs-body);font-weight:600;color:var(--ink);}
.city-grid-plain span::before{content:"📍";color:var(--blue);margin-right:8px;font-size:var(--fs-small);}
@media (max-width:900px){.city-grid-plain{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.city-grid-plain{grid-template-columns:minmax(0,1fr);}}

/* Daily services grid (9) — real photo + solid-blue label badge overlapping the photo, matching intercomdirect.nl.
   The image itself is rounded (not a clipping parent), so the badge — positioned relative to .sc-photo — can
   overlap below the photo edge without being clipped, no matter how many lines its text wraps to. */
.card-grid-9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--gap) + 12px) var(--gap);}
.service-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:visible;box-shadow:var(--shadow);}
.service-card .sc-photo{position:relative;}
.service-card .sc-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--radius) var(--radius) 0 0;}
.service-card .sc-badge{
  position:absolute;left:16px;bottom:-18px;background:var(--blue);color:#fff;font-weight:700;
  font-size:var(--fs-body);line-height:1.3;padding:10px 16px;border-radius:10px;box-shadow:0 8px 18px rgba(0,119,255,.35);
  max-width:calc(100% - 32px);
}
.service-card .sc-body{padding:34px 22px 22px;}
.service-card h4{font-size:var(--fs-h5) !important;margin-bottom:8px;display:none;}
.service-card p{font-size:var(--fs-small);color:var(--muted);margin:0;}
@media (max-width:900px){.card-grid-9{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:600px){.card-grid-9{grid-template-columns:minmax(0,1fr);}}

/* Partners */
.partners-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-split);align-items:center;}
.logo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:center;}
.logo-grid img,.brand-grid img{height:52px;max-height:52px;width:100%;object-fit:contain;display:block;margin:0 auto;filter:grayscale(1);opacity:.75;transition:opacity .15s, filter .15s;}
.logo-grid img:hover,.brand-grid img:hover{filter:none;opacity:1;}
/* Text wordmark fallback for the 2 brands (Comelit, Ericsson) with no logo file in the media library —
   kept visually consistent with the real logo images rather than leaving a broken <img>. */
.brand-text-badge{display:flex;align-items:center;justify-content:center;height:52px;margin:0;font-family:var(--font-heading);font-weight:700 !important;font-size:var(--fs-h6);color:var(--muted);opacity:.75;text-align:center;transition:opacity .15s,color .15s;}
.brand-text-badge:hover{opacity:1;color:var(--ink);}

/* template-brand.php hero logo card — deliberately its own class, NOT .hero-media, because most
   real logo files are wide/short banners (e.g. a 1024x147 Aiphone PNG) and `.hero-media img`'s
   sitewide aspect-ratio:5/4 + object-fit:cover rule would crop them down to a few letters. */
.brand-hero-logo img{max-width:70%;max-height:120px;width:auto;height:auto;object-fit:contain;}
.callout-box{background:var(--bg-alt);border-radius:var(--radius);padding:24px;margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
@media (max-width:900px){.partners-split{grid-template-columns:minmax(0,1fr);}}

/* Werkwijze steps — each step draws its own connecting segment to the NEXT step's circle
   (rather than one long line across the whole row guessed via percentages, which didn't
   actually line up with the circles: they sit at the left edge of each grid column, not its
   center, so a percentage-based inset was always going to drift off-target at some widths).
   A segment starts at exactly this circle's right edge (44px = its own diameter) and runs
   calc(100% - 2px) — column width, plus the fixed 20px gap and next circle's 22px radius,
   minus this circle's own 44px width, nets out to "-2px" — landing exactly on the next
   circle's center regardless of how wide each responsive column actually renders. */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);}
.step{text-align:left;position:relative;}
.step .num{
  position:relative;z-index:2;width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-lead);margin-bottom:14px;
}
.step h4{font-size:var(--fs-h5) !important;}
.step p{font-size:var(--fs-small);color:var(--muted);}
@media (min-width:1025px){
  .step:not(:last-child)::before,
  .step:not(:last-child)::after{
    content:"";position:absolute;top:22px;left:44px;width:calc(100% - 2px);height:2px;z-index:1;
  }
  .step:not(:last-child)::before{background:var(--border);}
  .step:not(:last-child)::after{
    background:var(--blue);transform:scaleX(0);transform-origin:left center;
    transition:transform .6s cubic-bezier(.4,0,.2,1);
  }
  .steps.in-view .step:not(:last-child)::after{transform:scaleX(1);}
  .steps .reveal-item:nth-child(1){transition-delay:0s;}
  .steps .reveal-item:nth-child(1)::after{transition-delay:.1s;}
  .steps .reveal-item:nth-child(2){transition-delay:.15s;}
  .steps .reveal-item:nth-child(2)::after{transition-delay:.25s;}
  .steps .reveal-item:nth-child(3){transition-delay:.3s;}
  .steps .reveal-item:nth-child(3)::after{transition-delay:.4s;}
  .steps .reveal-item:nth-child(4){transition-delay:.45s;}
  .steps .reveal-item:nth-child(4)::after{transition-delay:.55s;}
  .steps .reveal-item:nth-child(5){transition-delay:.6s;}
}
@media (max-width:1024px){.steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:600px){.steps{grid-template-columns:minmax(0,1fr);}}

/* Brand logos */
.brand-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
@media (max-width:900px){.brand-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* Testimonials */
.testi-head{display:flex;align-items:center;gap:16px;justify-content:center;margin-bottom:40px;}
.testi-head .g-badge{font-size:var(--fs-h3);font-weight:800;color:var(--blue);}
.testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.testi-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);}
.testi-card .stars{color:var(--orange);letter-spacing:2px;margin-bottom:10px;display:block;}
.testi-card p{font-size:var(--fs-body);color:var(--ink);}
.testi-card .who{font-weight:700;font-size:var(--fs-small);color:var(--muted);margin-top:14px;}
@media (max-width:900px){.testi-grid{grid-template-columns:minmax(0,1fr);}}

/* FAQ */
.faq-list{max-width:800px;margin:0 auto;}
.faq-list details{border-bottom:1px solid var(--border);padding:18px 0;}
.faq-list summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-h5);}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+";font-size:var(--fs-h4);color:var(--blue);}
.faq-list details[open] summary::after{content:"–";}
.faq-list p{margin-top:12px;color:var(--muted);font-size:var(--fs-body);}

/* Closing CTA */
.closing-cta{background:var(--blue);border-radius:var(--radius);padding:clamp(2rem,1.2rem + 3vw,3.5rem);text-align:center;color:#fff;}
.closing-cta h2{font-size:var(--fs-h2) !important;}
.closing-cta p{color:#dbe9ff;max-width:var(--measure);margin:0 auto var(--space-3);}
.closing-ctas{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap;}

/* Blog teasers */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.blog-card h4{font-size:var(--fs-h5) !important;}
.blog-card p{font-size:var(--fs-small);color:var(--muted);}
.blog-card a{color:var(--blue);font-weight:700;font-size:var(--fs-small);}
@media (max-width:900px){.blog-grid{grid-template-columns:minmax(0,1fr);}}

/* ---------- Footer: white, matching intercomdirect.nl exactly (blue trust-line above, blue bottom bar below) ---------- */
.site-footer{background:#fff;color:var(--ink);}
.footer-trustline{background:var(--blue);color:#fff;font-weight:700;font-size:var(--fs-small);text-align:center;padding:14px 24px;}
.footer-trustline span{margin:0 10px;}
.footer-main{padding-top:var(--space-4);padding-bottom:var(--space-4);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:32px;border-bottom:1px solid var(--border);}
.footer-main h5{color:var(--blue);font-size:var(--fs-h6);margin-bottom:18px;}
.footer-main ul{display:flex;flex-direction:column;gap:12px;}
.footer-main a{font-size:var(--fs-small);color:var(--ink);}
.footer-main a:hover{color:var(--blue);}
.footer-logo img{height:40px;margin-bottom:16px;}
.footer-main p{color:var(--muted);font-size:var(--fs-small);}
.footer-socials{display:flex;gap:10px;margin-top:18px;}
.footer-socials a{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--blue);color:var(--blue) !important;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;
}
.footer-socials a:hover{background:var(--blue);color:#fff !important;}
.footer-bottom{background:var(--blue);}
.footer-bottom-inner{padding:18px 24px;font-size:var(--fs-small);color:#eaf2ff;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
@media (max-width:900px){.footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:600px){.footer-main{grid-template-columns:minmax(0,1fr);}}

@media (max-width:640px){
  .steps{grid-template-columns:minmax(0,1fr);}
  .hero-float{position:static;margin-top:16px;}
}

/* ---------- Scroll-reveal + back-to-top (progressive enhancement, see custom.js) ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-stagger.in-view .reveal-item{opacity:1;transform:translateY(0);}
.reveal-item{opacity:0;transform:translateY(24px);transition:opacity .5s ease, transform .5s ease;}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-item{opacity:1 !important;transform:none !important;transition:none !important;}
}

.back-to-top{
  position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;
  background:var(--blue) !important;color:#fff !important;border:none;box-shadow:0 10px 24px rgba(0,119,255,.35);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:900;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--blue-dark) !important;}

/* ---------- Mobile sticky call/quote bar (lead-conversion aid, phones only) ---------- */
.mobile-cta-bar{display:none;}
@media (max-width:767px){
  .mobile-cta-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:950;gap:var(--space-1);
    background:#fff;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(10,27,51,.12);border-top:1px solid var(--border);
  }
  .mcb-call{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:var(--btn-h);padding:0 16px;border-radius:999px;border:2px solid var(--blue);color:var(--blue) !important;font-weight:600;font-size:var(--fs-body);font-family:var(--font-heading);
  }
  .mcb-quote{flex:1;margin:0;min-height:var(--btn-h);}
  body{padding-bottom:64px;}
  .back-to-top{bottom:76px;}
}

/* ---------- Generic page/post content (page.php, single.php, single-project.php) ---------- */
.page-content h2,.page-content h3{margin-top:1.2em;}
.page-content p,.page-content li{color:var(--muted);max-width:var(--measure);}
.container-text{max-width:calc(var(--measure) + 48px);}
.page-content ul,.page-content ol{margin:0 0 1em;padding-left:1.4em;list-style:revert;color:var(--muted);}
.page-content img{border-radius:var(--radius-sm);}
.page-content a{color:var(--blue);text-decoration:underline;}
/* 3.6.2 one grid rule: every fr track is minmax(0,Xfr), so long words or images can never push a column
   wider than the container (cause of the 360px overflow in .services-nav-grid and others). */
.services-nav-card,.project-card,.blog-card{min-width:0;}
h1,h2,h3,h4{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;} /* long Dutch compounds (intercomsystemen) on 360px */
.snc-body h4,.pc-body h3,.blog-card h4{overflow-wrap:break-word;hyphens:auto;}

/* Migrated content (3.6.1): blog posts and former Divi pages are plain HTML in the editor.
   .id-cols is the one content grid: columns side by side from 768px, stacked below, tops aligned. */
.page-content img{max-width:100%;height:auto;}
.page-content table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:var(--fs-body);display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.page-content th,.page-content td{border:1px solid var(--border);padding:8px 12px;text-align:left;vertical-align:top;}
.page-content th{background:var(--bg-alt);color:var(--ink);}
.page-content .id-section{margin:0 0 8px;}
.page-content .id-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;margin:0 0 16px;}
@media (min-width:768px){.page-content .id-cols{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);}}
.page-content .id-col{min-width:0;}
.page-content .id-col > :first-child{margin-top:0;}
.page-content .id-figure{margin:0 0 16px;}
.page-content .id-figure img{width:100%;display:block;}
.page-content .id-button{margin:8px 0 16px;}
.page-content .id-button .btn{text-decoration:none;color:#fff;white-space:normal;max-width:100%;text-align:center;}
.page-content .id-toggle{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;margin:0 0 10px;background:#fff;}
.page-content .id-toggle summary{cursor:pointer;font-weight:700;color:var(--ink);}
.page-content .id-toggle[open] summary{margin-bottom:8px;}
.page-content .id-video{position:relative;aspect-ratio:16/9;margin:0 0 16px;}
.page-content .id-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--radius-sm);}

/* ---------- 3.7.0 customer journey: hero actions, task choices, next-step bar ---------- */
.text-small{font-size:var(--fs-small);}
.text-muted{color:var(--muted);}
.hero-actions{margin:var(--space-3) 0 var(--space-2);}
.hero-actions.is-center{text-align:center;}
.hero-actions.is-center .btn-group,.hero-actions.is-center .hero-choices{justify-content:center;}
.hero-choices-label{font-size:var(--fs-small);color:var(--muted);margin:var(--space-3) 0 var(--space-1);}
.hero-choices{display:flex;flex-wrap:wrap;gap:var(--space-1);}
.hero-choices a{
  display:inline-flex;align-items:center;gap:6px;min-height:var(--btn-h-sm);padding:0 14px;
  background:#fff;border:1px solid var(--border);border-radius:999px;font-size:var(--fs-small);font-weight:600;color:var(--ink);
  transition:border-color .15s ease,color .15s ease;
}
.hero-choices a svg{color:var(--blue);flex:none;}
.hero-choices a:hover{border-color:var(--blue);color:var(--blue);}
@media (max-width:767px){
  .hero-actions .btn-group .btn{flex:1 1 100%;}
  .hero-choices a{min-height:var(--btn-h);}
}
/* Compact "next step" bar for articles, archives and contact (template-parts/next-step.php) */
.next-step{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin:var(--space-2) 0 var(--space-3);}
.next-step p{margin:0;color:var(--ink);font-weight:600;max-width:42ch;}
.next-step .btn-group{gap:var(--space-1);}
@media (max-width:767px){.next-step .btn{flex:1 1 100%;}}
.page-header{padding:var(--space-hero) 0 0;}
.page-header h1{margin-bottom:var(--space-1);}
.post-meta{display:block;font-size:var(--fs-small);color:var(--muted);margin-bottom:var(--space-1);}
/* Blog archive cards + article image (3.7.0): same card pattern as projects, 16:9 photos, tops aligned */
.post-hero-image img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);margin:0 0 var(--space-3);}
.blog-grid{align-items:stretch;}
a.blog-card{display:flex;flex-direction:column;padding:0;overflow:hidden;color:inherit;transition:border-color .2s ease, box-shadow .2s ease;}
a.blog-card:hover{border-color:var(--blue);box-shadow:var(--shadow);}
.blog-card-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.blog-card-body{display:flex;flex-direction:column;flex:1;padding:var(--space-3);}
.blog-card-body p{font-size:var(--fs-small);flex:1;}
.blog-card-title{font-size:var(--fs-h5) !important;font-family:var(--font-body) !important;color:var(--ink) !important;margin-bottom:var(--space-1);}
.archive-intro{color:var(--muted);max-width:var(--measure);margin-bottom:var(--space-2);}
.pagination{margin-top:var(--space-4);}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--space-1);justify-content:center;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:var(--btn-h);min-height:var(--btn-h);padding:0 12px;border:1px solid var(--border);border-radius:999px;font-weight:600;font-size:var(--fs-small);}
.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff;}
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.container-page{max-width:calc(960px + 48px);}
/* 3.7.0 balance: text never wider than the measure; on desktop the hero photo/logo card is as tall as the text
   column (no small image next to a tall text block). */
.container > p,.section-head p,.faq-list{max-width:var(--measure);}
.faq-list{margin-left:auto;margin-right:auto;}
.brand-hero-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:clamp(1.5rem,1rem + 3vw,3.75rem);aspect-ratio:4/3;}
.brand-hero-card.is-text{background:var(--blue);}
.brand-hero-wordmark{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h2);color:#fff;}
@media (min-width:1025px){
  .hero .container{align-items:stretch;}
  .hero .hero-copy{align-self:center;}
  .hero-media{display:flex;flex-direction:column;}
  .hero-media > img,.hero-media > video{flex:1;height:100%;min-height:380px;aspect-ratio:auto;}
  .hero-media > .brand-hero-card{flex:1;height:100%;aspect-ratio:auto;min-height:380px;}
}

/* 3.7.0 mobile: the sticky call/quote bar only slides in once the page's own hero actions are scrolled away,
   so the first screen never shows the same two buttons twice. Without JS the bar is always visible. */
@media (max-width:767px){
  body.mcb-auto .mobile-cta-bar{transform:translateY(110%);transition:transform .25s ease;}
  body.mcb-auto.mcb-show .mobile-cta-bar{transform:none;}
}
.hero-actions + .trust-checks{margin-top:var(--space-3);}

/* ---------- 3.8.0 ---------- */
/* Service cards: one row on the container width, centred, any count (cols-N set by the template).
   Equal heights per row, titles reserve 2 lines, the link is pinned to the bottom. */
.services-nav-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);}
.services-nav-grid > .services-nav-card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;}
.services-nav-grid.cols-5 > .services-nav-card{max-width:calc((100% - 4 * var(--gap)) / 5);}
.services-nav-grid.cols-4 > .services-nav-card{max-width:calc((100% - 3 * var(--gap)) / 4);}
.snc-body{display:flex;flex-direction:column;flex:1;padding:var(--space-2) var(--space-2) var(--space-3);}
.snc-body h4{min-height:calc(2em * 1.2);margin:0 0 var(--space-1);}
.snc-body p{font-size:var(--fs-small);color:var(--muted);margin:0 0 var(--space-2);}
.snc-cta{margin-top:auto;min-height:var(--btn-h-sm);}
@media (max-width:1024px){
  .services-nav-grid > .services-nav-card{flex:1 1 calc((100% - 2 * var(--gap)) / 3);max-width:calc((100% - 2 * var(--gap)) / 3) !important;}
  .services-nav-grid.cols-4 > .services-nav-card{flex-basis:calc((100% - var(--gap)) / 2);max-width:calc((100% - var(--gap)) / 2) !important;}
}
@media (max-width:640px){
  .services-nav-grid > .services-nav-card{flex-basis:calc((100% - var(--gap)) / 2);max-width:calc((100% - var(--gap)) / 2) !important;}
}
/* Same pattern for the other card grids: equal heights, link at the bottom. */
.project-card{display:flex;flex-direction:column;}
.project-card .pc-body{display:flex;flex-direction:column;flex:1;}
.project-card h3{min-height:calc(2em * 1.2);}
.project-card .pc-cta{margin-top:auto;}
.system-card .btn-link{margin-top:auto;}

/* City links: real links, clear hover/focus, whole row is the tap target, pins aligned */
.city-grid-plain{list-style:none;margin:0;padding:0;}
.city-grid-plain li{margin:0;}
.city-grid-plain a,.city-grid-plain span{display:flex;align-items:center;gap:8px;min-height:var(--btn-h);padding:0 8px;margin:0 -8px;border-radius:var(--radius-sm);font-size:var(--fs-body);font-weight:600;color:var(--ink);}
.city-grid-plain span::before,.city-grid-plain a::before{content:"";flex:none;width:16px;height:16px;margin:0;background:var(--blue);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center/contain no-repeat;}
.city-grid-plain a{transition:background .15s ease,color .15s ease;}
.city-grid-plain a:hover{background:var(--bg-alt);color:var(--blue);}
.city-grid-plain a:focus-visible{outline:3px solid rgba(0,119,255,.35);outline-offset:0;color:var(--blue);}
.city-grid-plain a::after{content:"\203A";margin-left:auto;color:var(--muted);font-size:var(--fs-h5);line-height:1;}
.city-grid-plain a:hover::after{color:var(--blue);}
.floating-wrap{margin-bottom:var(--space-head);}

/* Compact repair banner (template-parts/repair-banner.php) */
.section-compact{padding:var(--space-4) 0;}
.repair-banner{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-left:4px solid var(--orange);border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow);}
.section-alt .repair-banner{background:#fff;}
.rb-icon{flex:none;width:52px;height:52px;border-radius:50%;background:rgba(243,107,18,.12);color:var(--orange);display:flex;align-items:center;justify-content:center;}
.rb-text{flex:1 1 320px;min-width:0;}
.rb-title{font-size:var(--fs-h4) !important;margin:0 0 4px;}
.rb-text p{margin:0;}
@media (max-width:767px){.repair-banner .btn-group{width:100%;}.repair-banner .btn{flex:1 1 100%;}}

/* Reviews (template-parts/testimonials.php) */
.reviews-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gap-split);align-items:center;margin-bottom:var(--space-head);}
.reviews-intro p{max-width:var(--measure);}
.reviews-score{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-3);text-align:center;}
.rs-brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-small);color:var(--ink);}
.rs-row{display:flex;align-items:baseline;justify-content:center;gap:2px;margin:var(--space-1) 0 4px;font-family:var(--font-heading);color:var(--ink);}
.rs-num{font-size:calc(var(--fs-h1) * 1.25);font-weight:700;line-height:1;}
.rs-of{font-size:var(--fs-h4);color:var(--muted);font-weight:600;}
.rs-count{font-size:var(--fs-small);margin:var(--space-1) 0 var(--space-1);}
.stars-meter{position:relative;display:inline-block;line-height:0;vertical-align:middle;}
.stars-meter svg{width:var(--star,18px);height:var(--star,18px);margin-right:2px;}
.stars-meter .stars-bg svg{fill:#d9dee6;}
.stars-meter .stars-fg{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;}
.stars-meter .stars-fg svg{fill:#fbbc04;}
.stars-meter.is-large{--star:30px;}
.stars-meter.is-small{--star:16px;}
.reviews-body.has-featured{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gap);align-items:start;}
.reviews-masonry{columns:2 260px;column-gap:var(--gap);}
.reviews-body:not(.has-featured) .reviews-masonry{columns:3 260px;}
.review-card{break-inside:avoid;margin:0 0 var(--gap);background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow);}
.review-card.is-featured{margin:0;border-top:4px solid var(--blue);}
.review-card.is-featured blockquote{font-size:var(--fs-lead);color:var(--ink);}
.review-top{display:flex;align-items:center;gap:12px;margin-bottom:var(--space-1);}
.review-top figcaption{flex:1;min-width:0;line-height:1.3;}
.review-top strong{display:block;color:var(--ink);font-size:var(--fs-body);}
.review-date{font-size:var(--fs-small);color:var(--muted);}
.review-avatar{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--font-heading);}
.review-avatar.is-blue{background:var(--blue);}
.review-avatar.is-orange{background:var(--orange);}
.review-avatar.is-navy{background:var(--navy);}
.review-card blockquote{margin:var(--space-1) 0 0;color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);}
@media (max-width:900px){.reviews-head,.reviews-body.has-featured{grid-template-columns:minmax(0,1fr);}}
/* Phones: the highlighted review + 2 more; the rest is one tap away on Google */
@media (max-width:767px){.reviews-masonry .review-card:nth-child(n+3){display:none;}.reviews-featured{margin-bottom:var(--gap);}}
/* Titles that can wrap to 3 lines: reserve 3 lines so the text below starts on one line in every row */
@media (max-width:640px){.snc-body h4{font-size:var(--fs-small) !important;-webkit-hyphens:manual;hyphens:manual;min-height:calc(2em * 1.2);}}
.blog-card h4,.blog-card-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(3em * 1.2);}
@media (max-width:400px){.snc-body h4{min-height:calc(3em * 1.2);}}

/* ---------- 3.8.1 footer: clearly styled navy footer between the blue trust line and blue bottom bar ----------
   (production's footer is a solid brand colour too). Side gutters come from .container (the old
   `padding:56px 0 40px` on the same element removed them, so on phones the footer text touched x=0). */
.site-footer .footer-main{background:var(--navy);max-width:none;border-bottom:0;
  padding-left:max(24px, calc((100% - var(--container)) / 2 + 24px));padding-right:max(24px, calc((100% - var(--container)) / 2 + 24px));
  padding-top:var(--space-section);padding-bottom:var(--space-4);}
.site-footer .footer-main h5{color:#fff !important;font-size:var(--fs-h6);margin-bottom:var(--space-1);}
.site-footer .footer-main p{color:#b9c6db;}
.site-footer .footer-main a{color:#e7edf6;font-size:var(--fs-small);display:inline-flex;align-items:center;min-height:var(--btn-h-sm);}
.site-footer .footer-main a:hover,.site-footer .footer-main a:focus-visible{color:#fff;text-decoration:underline;}
.site-footer .footer-main li{color:#b9c6db;font-size:var(--fs-small);}
.site-footer .footer-main ul{gap:0;}
.site-footer .footer-logo img{background:#fff;border-radius:8px;padding:6px 8px;height:44px;}
.site-footer .footer-socials a{border-color:rgba(255,255,255,.6);color:#fff !important;width:44px;height:44px;}
.site-footer .footer-socials a:hover{background:#fff;color:var(--navy) !important;}
.site-footer .fc-btn{gap:8px;}
.site-footer .footer-bottom{background:var(--blue);}
@media (max-width:767px){
  .site-footer .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3) var(--space-2);
    grid-template-areas:"contact contact" "services company" "about about";padding-top:var(--space-4);}
  .site-footer .footer-contact{grid-area:contact;}
  .site-footer .footer-services{grid-area:services;}
  .site-footer .footer-company{grid-area:company;}
  .site-footer .footer-about{grid-area:about;}
  .site-footer .footer-main .footer-logo{display:none;}   /* the header logo is already on screen */
  .site-footer .footer-contact ul{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-1);}
  .site-footer .footer-contact .fc-btn{width:100%;min-height:var(--btn-h);justify-content:center;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;font-size:var(--fs-body);font-weight:600;color:#fff;}
  .site-footer .footer-contact li:last-child{text-align:center;}
  .site-footer .footer-main a{min-height:var(--btn-h);}
  /* trust line: compact ticks instead of a long "|"-separated sentence */
  .footer-trustline{font-size:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:12px 16px;}
  .footer-trustline span{font-size:var(--fs-small);margin:0;}
  .footer-trustline span::before{content:"\2713\00a0";}
  /* the sticky call/quote bar must never cover the last footer lines (incl. iOS safe area) */
  body{padding-bottom:0 !important;}
  .footer-bottom-inner{padding-bottom:calc(18px + 64px + env(safe-area-inset-bottom)) !important;flex-direction:column;}
}
/* Off-canvas menu: no shadow (and not focusable) while closed. Its -12px shadow used to bleed in as a grey
   strip down the right edge of every phone/tablet screen. */
@media (max-width:1024px){
  .main-nav{box-shadow:none;visibility:hidden;transition:transform .25s ease, visibility 0s linear .25s;}
  .main-nav.nav-open{box-shadow:-12px 0 32px rgba(10,27,51,.18);visibility:visible;transition:transform .25s ease, visibility 0s;}
}
/* Touch screens (phones and iPads): every footer link is a full 44px target */
@media (pointer:coarse){.site-footer .footer-main a{min-height:var(--btn-h);}}

/* ---------- 3.8.2 device QA fixes (real iPhone/iPad/Android profiles) ---------- */
/* Touch screens: no endless background drift in the hero (battery + it starved scroll/reveal work in Safari) */
@media (pointer:coarse), (max-width:1024px){.hero::before{animation:none;}}
/* Tap targets >= 44px on touch screens */
@media (pointer:coarse){
  .utility-bar .container{height:44px;}
  .utility-bar a{display:inline-flex;align-items:center;min-height:44px;}
  .project-hero .back-link{min-height:44px;}
  .info-card-main{display:inline-flex !important;align-items:center;min-height:44px;}
  .pf-btn{min-height:44px;}
  .elementor-button{min-height:44px;display:inline-flex !important;align-items:center;}
}
.site-logo{display:inline-flex;align-items:center;min-height:44px;}
@media (max-width:1024px){.main-nav > ul > li:last-child > a{min-height:var(--btn-h);}}
/* iOS zooms into inputs under 16px: all form fields use the body size */
.contact-form input,.contact-form textarea,.contact-form select{font-size:var(--fs-body);}