/* ============================================================
   FIBRONIC - Shared stylesheet  (v47, consolidated)
   ------------------------------------------------------------
   Single file. Everything is scoped under .fib-azure except the
   contact modal, floating actions, cookie banner and the
   calculator sticky bar, which are top-level overlays.

   Icon colours are NOT set here. partials/icons.php writes fill
   attributes onto the shapes, so an icon cannot lose its colour
   to a stale cache or a missing stylesheet section.

   TABLE OF CONTENTS
     1.  Design tokens (:root)
     2.  Base & layout
     3.  Buttons & link colours
     4.  Header & navigation (+ Azure dropdown)
     5.  Breadcrumb
     6.  Hero
     7.  Section heading helper (+ eyebrow)
     8.  Showcase (glossy isometric render)
     9.  Trust strip
     10. Problem cards
     11. 3 V's / expertise (threev)
     12. Services grid
     13. Maatwerk callout
     14. Well-Architected pillars (wa)
     15. How it works (steps)
     16. Feature grid (spokes)
     17. Split + checklist (spokes)
     18. Pricing (+ pricing-cta, related-note)
     19. Certifications (clickable & verifiable)
     20. Specialist (E-E-A-T)
     21. Social proof / quote cards
     22. Why Fibronic
     23. Offer (nulmeting)
     24. CTA band
     25. FAQ accordion
     26. Footer
     27. Contact modal + form
     28. Related ("Vaak gecombineerd met")
     29. Floating actions (WhatsApp + scroll-to-top)
     30. Cookie banner
     31. Testimonials carousel (removed)
     32. Responsive
     33. Price calculator (/azure-beheer-kosten/)
     34. Calculator sticky price bar (mobile)
     35. Azure thank-you page
     36. Practice cases (/klantcases/)
     37. Page-specific blocks
     38. Responsive patterns (definition rows, swipe row, stat band, bento)
     39. Homepage router
     40. Legal pages (/privacyverklaring/)
     41. Plan comparison (websitebeheer)
     42. Hero, intro and section variants
     43. Photos (hero photo, photo cards, split photo, tick list)
     44. Person callout (web developer on websitebeheer and SEO)
     45. Error pages (/fout/)

   CHANGELOG
   v47  Section 57: "Download als pdf" on /algemene-voorwaarden/ and a print
        stylesheet (no header, footer, overlays; logo head, page numbers).
   v46  Section 56: "Wat zit erin" on /azure-beheer/ (theme cards with
        marks, legend sticky on mobile, dark "Bovenop" band) and the
        per-component table on /wat-valt-onder-azure-beheer/.
   v45  Links in the .showcase intro get the body-link colour and hover
        (e.g. "serviceniveau" on /azure-beheer/).
   v44  Section 55: calculator on /azure-beheer-kosten/ without accordions
        (switch in the row header, body only while on), detailed result
        list with remove buttons, "Niet in dit bedrag" list, share link,
        selection chips in the mobile sticky bar. Old .calc-acc removed.
        Dead CSS for the former WordPress contact section (Elementor form)
        removed; comments no longer refer to WordPress as current.
   v43  Section 54: request route as a vertical timeline on mobile, with a
        'closed without solution' step; service choice cards on
        /verantwoordelijkheden/.
   v42  Section 53: request route (servicedesk vs Fibronic) inside the
        lead bento cell on /azure/.
   v41  Section 52: desktop dropdown without hover gap (caret flip with
        scaleY instead of a 180-degree spin), buttons inside pricing
        cards, hover colour for FAQ links.
   v40  Section 51: split-card rows site-wide in the Home style (icon
        tiles, green check badges), three-card review links, filter-based
        intro on /klantcases/. Nav caret: hover only on real pointers.
   v39  Section 50: Home Microsoft 365 section (lifecycle panel) and dark
        websites section; image cards in the merged /klantcases/ archive.
   v38  Section 49: people carousel (Home), review block with rating card
        and two distinct link cards.
   v37  Section 48: mobile step timeline (number left, text indented, so
        the connecting line no longer runs through the text), icon rows
        in the nulmeting split-card, light link in dark bento cell,
        spacing for a button row under the steps.
   v36  Error pages, section 45: large status code, requested path,
        centred hero. Used by /fout/*.php and the plain-HTML 500/503.
   v35  Person callout, section 44: a callout with a round photo above
        the heading and two buttons side by side. Used by
        partials/webdev-profile.php. The full profile reuses section 20.
   v34  Photos for /zzp-website-laten-maken/, section 43: hero photo,
        photo cards with an icon fallback, a photo in a split section
        and a tick list for split-text. Rendered by fib_photo().
   v33  Dark bands: duotone icons keep two colours (white shape, cyan
        accent), note-box keeps its coloured left border and a white
        lead-in, and a note-box after a card grid gets 24px breathing room.
   v32  wa-grid columns follow the card count. Hero variants (dark,
        reverse, center), intro variants for reference pages (tint,
        dark, left) and grid variants (list, lead, timeline, dark band,
        connected steps), section 42. All modifiers on existing markup.
   v31  Plan cards with a feature list (.tier-list) and a comparison table
        for /wat-valt-onder-websitebeheer/ (.tier-table), section 41.
   v30  Numbered lists in long-form pages (.legal ol), used by the
        NIS2 article.
   v29  Calculator: steppers 40x44 px with a number field of at least
        48 px, one field per row below 560 px. Mobile submenus open for
        every dropdown, not only Azure (the Websites menu on the homepage
        could not be opened). Legend contrast on /tarieven/.
   v28  Contrast: small text in green, ochre and light grey uses the
        darker --green-text, --amber-text and --grey-text (section 1).
        Calculator steppers 44x44 px. Footer titles are h2 (heading
        order). Metric-matched Inter fallback moved into section 1.
   v27  Cookie banner shown via html.fib-consent-needed instead of a
        slide-in (it is server-rendered now). Added .sr-only and underlined
        links in running text (section 2).
   v26  Inter self-hosted: @font-face for /assets/fonts/ at the top of
        section 1. Google Fonts is no longer loaded on any page; the
        WordPress pages use the same files via the fibronic-data plugin.
   v25  Cookie banner (section 30) rebuilt for per-category consent:
        accept and reject on the first layer, a second layer with one
        row per category, the calculator switch reused for the toggles.
        The old mobile rules for the banner in section 32 are gone.
   v24  Legal pages (section 40) for /privacyverklaring/: body copy
        capped at a readable line length, list bullets restored after
        the section 2 reset, a two-column table of contents, and a
        provider line under each name in the cookie register.
   v23  Diagrams: full content width on desktop, a portrait variant below
        760px (see <picture> on /azure/ and /azure-migratie/), and
        .figure-block as an alias for the WordPress homepage. Added
        .related-grid--3, the "Cookie-instellingen" footer button and the
        contact-section fix: .fib-azure * resets padding, which stripped
        the side padding from the Elementor container on mobile.
   v22  Image logo in the header (section 4). Reviews on /azure/ switched
        from the carousel to the swipe row (38.2); carousel CSS and JS
        removed.
   v21  Consolidated. The sections added one at a time between
        23-09 and 28-09 were merged into the component they belong
        to, and the file was renumbered once:
          - footer details (was 38)      -> 26
          - link colours (was 39)        -> 3
          - dark-band button (was 41)    -> 3
          - homepage odds and ends (42)  -> 2, 13, 17, 21, 38
          - router + actions (43, 44)    -> 39
        Restored .rr-scroll / .cmp-scroll / .pr-scroll /
        .role-scroll / .lvl-scroll, removed during the 27-09 cleanup
        while still present in the markup on five pages.
        Added .review-role and .nulmeting-offer, used in markup but
        never defined. Removed dead .why-pillars, .pillar and
        .cases-carousel. Deduplicated .quote-card figcaption strong,
        which was defined twice with different values.
   v20  Secondary button on the dark CTA band.
   v19  .btn font-family, .eyebrow base rule, dead table CSS removed.
   v18  Responsive patterns for the mobile review of /azure/.
   v17  Link colour fallback, scoped by context.
   v16  Inline <style> blocks from the shared partials folded in.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
/* Text colours for small text on white and pale chips. The brand green
   #1CA97C and ochre #9B6E14 stay for icons, borders and large text; as
   small text they are below the 4.5:1 contrast WCAG asks for. */
:root{--green-text:#127A58;--amber-text:#7A560F;--grey-text:#5B6B7B;}
/* Inter, self-hosted (SIL Open Font License 1.1). One variable file per
   style covers every weight from 100 to 900. The family is named "Inter"
   so the existing font stacks pick it up without changes. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/InterVariable.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/InterVariable-Italic.woff2') format('woff2');}
/* Metric-matched fallback for Inter. Same box size as Inter, so the swap
   from fallback to Inter does not resize text blocks and does not create
   a second, later Largest Contentful Paint. Values: Inter vs Arial. */
@font-face{font-family:'Inter Fallback';
  src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Helvetica');
  size-adjust:107.4%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;}
.fib-azure,.fib-azure .btn,.fib-azure button,.fib-azure input,.fib-azure select,.fib-azure textarea{
  font-family:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
html{scroll-behavior:smooth;}
body{margin:0;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

.fib-azure{
  --blue:#0B5CAD; --navy:#0A2540; --cyan:#18B4E9; --ink:#1F2933;
  --mist:#F5F8FB; --border:#E2E8F0; --cardborder:#E8EEF4; --green:#1CA97C; --grey:#5B6B7B;
  --fib-accent:#18B4E9; /* kept for reference; icons.php now sets its own accent */
  --wrap:1140px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); line-height:1.7; font-size:17px; -webkit-font-smoothing:antialiased;
}


/* ============================================================
   2. BASE & LAYOUT
   ============================================================ */
/* Text for screen readers only, e.g. inside the header's <label> toggles,
   which may not carry aria-label. !important beats the .fib-azure * reset. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
/* Links inside running text are underlined, so they do not rely on colour
   alone (WCAG 1.4.1, flagged by PageSpeed). Buttons and cards are unaffected. */
.fib-azure main p a:not(.btn),.fib-azure main td a:not(.btn),.fib-azure .legal li a{text-decoration:underline;text-underline-offset:2px;}
.fib-azure *{margin:0;padding:0;box-sizing:border-box;}
.fib-azure .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.fib-azure section{padding:90px 0;position:relative;}
.fib-azure section[id]{scroll-margin-top:88px;} /* offset for sticky header on anchor jumps */
.fib-azure h1,.fib-azure h2,.fib-azure h3{line-height:1.15;color:var(--navy);}
.fib-azure h2{font-size:36px;font-weight:800;letter-spacing:-.5px;}
.fib-azure h3{font-size:20px;font-weight:700;}
.fib-azure p{font-size:17px;}
.fib-azure a{text-decoration:none;}
.fib-azure img{max-width:100%;height:auto;} /* safe default for all images */
.fib-azure .ico-svg{width:100%;height:100%;display:block;} /* inline SVG icons fill their .ico box */

/* Lists without bullets or indent by default; components add their own
   markers. Scoped so nothing outside .fib-azure is touched. */
.fib-azure ul{list-style:none;margin:0;padding:0;}


/* ============================================================
   3. BUTTONS & LINK COLOURS

   Section 2 strips the underline from links but sets no colour, so a
   link outside a styled component falls back to the browser default:
   blue, and purple once visited. The rule below scopes by context
   rather than by element - a bare `.fib-azure a` rule would beat the
   `color:inherit` on cards and turn whole cards blue.
   ============================================================ */
.fib-azure .btn{display:inline-block;font-family:inherit;font-weight:600;font-size:16px;
  padding:16px 32px;border-radius:10px;transition:.25s;cursor:pointer;border:none;}
.fib-azure .btn-primary{background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#fff;box-shadow:0 10px 24px rgba(11,92,173,.28);}
.fib-azure .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,92,173,.36);}
.fib-azure .btn-ghost{background:#fff;color:var(--blue);border:1px solid #CFE0EE;}
.fib-azure .btn-ghost:hover{background:var(--blue);color:#fff;}
.fib-azure .btn-white{background:#fff;color:var(--blue);}
.fib-azure .btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.18);}
.fib-azure .btn-sm{padding:11px 22px;font-size:15px;}
/* Inline link-styled button (e.g. "Stel je vraag" inside a sentence).
   No underline by default: next to a .lead-link in the same sentence the
   underline read as two different link styles. Hover underlines instead. */
.fib-azure .linklike{display:inline;background:none;border:none;padding:0;margin:0;cursor:pointer;
  color:var(--blue);font-weight:600;font-size:inherit;font-family:inherit;line-height:inherit;
  text-align:inherit;white-space:normal;text-decoration:none;}
.fib-azure .linklike:hover{color:var(--cyan);text-decoration:underline;}

/* Secondary button on the dark CTA band. .btn-ghost inverts to solid
   blue on hover, which on navy makes it blend into its own background. */
.fib-azure .cta .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);}
.fib-azure .cta .btn-ghost:hover{background:#fff;color:var(--blue);border-color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.18);}

/* Inline links in body copy: paragraphs, list items and table cells
   inside content sections. Cards and navigation are absent from this
   list on purpose - they carry their own colour. */
/* Body copy: paragraphs, list items and table cells inside content
   sections. Cards and navigation are excluded because they are not
   part of this selector list to begin with. */
.fib-azure .note-box a,
.fib-azure .dl-row a,
.fib-azure .calc-ctable a,
.fib-azure .rv-table a,
.fib-azure .scope2-col a,
.fib-azure .vs-col a,
.fib-azure .ko-col a,
.fib-azure .iac-box a,
.fib-azure .who-col a,
.fib-azure .sc-row a,
.fib-azure .sc-refer-item a,
.fib-azure .sp-part a,
.fib-azure .dr-c a,
.fib-azure .ko-s a,
.fib-azure .nm-step a,
.fib-azure .nm-deliver-item a,
.fib-azure .case-block a,
.fib-azure .case-list a,
.fib-azure .case-transparency a,
.fib-azure .calc-basenote a,
.fib-azure .calc-excl a,
.fib-azure .calc-disclaimer a,
.fib-azure .calc-notice a,
.fib-azure .pr-line__label a,
.fib-azure .pr-group__sub a,
.fib-azure .split-text p a,
.fib-azure .showcase p a,
.fib-azure .sec-head p a,
.fib-azure .why-inner p a,
.fib-azure .callout p a,
.fib-azure .wa-source a,
.fib-azure .cert-note a,
.fib-azure .pricing-note a,
.fib-azure .related-note a,
.fib-azure .pricing-cta__note a,
.fib-azure .swipe-hint a{color:var(--blue);font-weight:600;}

.fib-azure .note-box a:hover,
.fib-azure .dl-row a:hover,
.fib-azure .calc-ctable a:hover,
.fib-azure .rv-table a:hover,
.fib-azure .scope2-col a:hover,
.fib-azure .vs-col a:hover,
.fib-azure .ko-col a:hover,
.fib-azure .iac-box a:hover,
.fib-azure .who-col a:hover,
.fib-azure .sc-row a:hover,
.fib-azure .sc-refer-item a:hover,
.fib-azure .sp-part a:hover,
.fib-azure .dr-c a:hover,
.fib-azure .ko-s a:hover,
.fib-azure .nm-step a:hover,
.fib-azure .nm-deliver-item a:hover,
.fib-azure .case-block a:hover,
.fib-azure .case-list a:hover,
.fib-azure .case-transparency a:hover,
.fib-azure .calc-basenote a:hover,
.fib-azure .calc-excl a:hover,
.fib-azure .calc-disclaimer a:hover,
.fib-azure .calc-notice a:hover,
.fib-azure .pr-line__label a:hover,
.fib-azure .pr-group__sub a:hover,
.fib-azure .split-text p a:hover,
.fib-azure .showcase p a:hover,
.fib-azure .sec-head p a:hover,
.fib-azure .why-inner p a:hover,
.fib-azure .callout p a:hover,
.fib-azure .wa-source a:hover,
.fib-azure .cert-note a:hover,
.fib-azure .pricing-note a:hover,
.fib-azure .related-note a:hover,
.fib-azure .pricing-cta__note a:hover,
.fib-azure .swipe-hint a:hover{color:var(--cyan);text-decoration:underline;}

/* FAQ answers already underline their links (section 25); only the
   visited colour needed correcting there. */
.fib-azure .acc .body a:visited{color:var(--blue);}


/* ============================================================
   4. HEADER & NAVIGATION
   ============================================================ */
.fib-azure .site-header{position:sticky;top:0;z-index:999;background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.fib-azure .nav{display:flex;align-items:center;justify-content:space-between;height:72px;}
.fib-azure .logo{display:block;line-height:0;}
.fib-azure .logo img{display:block;height:40px;width:auto;}
@media(max-width:640px){.fib-azure .logo img{height:32px;}}
.fib-azure .nav-links{display:flex;align-items:center;gap:28px;}
.fib-azure .nav-links > a,.fib-azure .nav-azure{color:var(--navy);font-size:15px;font-weight:500;transition:.2s;}
.fib-azure .nav-links > a:hover,.fib-azure .nav-azure:hover{color:var(--blue);}
.fib-azure .nav-cta{display:flex;align-items:center;gap:16px;}
.fib-azure .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px;}
.fib-azure .burger span:not(.sr-only){width:24px;height:2px;background:var(--navy);border-radius:2px;transition:.2s;}
.fib-azure #nav-toggle{display:none;}
.fib-azure .sub-toggle{display:none;}

/* Azure dropdown (desktop = hover) */
.fib-azure .nav-item.has-dropdown{position:relative;}
.fib-azure .nav-azure-wrap{display:inline-flex;align-items:center;gap:2px;}
.fib-azure .caret-btn{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:6px;cursor:pointer;color:var(--grey);transition:color .2s;}
.fib-azure .caret-btn svg{display:block;transition:transform .2s ease;transform-origin:50% 50%;}
/* Hover and keyboard focus rotate the caret only on devices with a real
   pointer and above the mobile breakpoint. On touch screens :hover sticks
   after a tap, which kept the caret turned after closing the submenu. */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .fib-azure .has-dropdown:hover .caret-btn,
  .fib-azure .has-dropdown:focus-within .caret-btn{color:var(--blue);}
  .fib-azure .has-dropdown:hover .caret-btn svg,
  .fib-azure .has-dropdown:focus-within .caret-btn svg{transform:scaleY(-1);}
}
.fib-azure .dropdown{position:absolute;top:calc(100% + 10px);left:0;
  background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 44px rgba(10,37,64,.14);
  min-width:236px;padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:.2s;}
.fib-azure .dropdown::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px;} /* hover bridge */
.fib-azure .has-dropdown:hover .dropdown,
.fib-azure .has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.fib-azure .dropdown a{padding:11px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--navy);white-space:nowrap;}
.fib-azure .dropdown a:hover{background:var(--mist);color:var(--blue);}


/* ============================================================
   5. BREADCRUMB
   ============================================================ */
.fib-azure .crumb{background:var(--mist);border-bottom:1px solid var(--border);}
.fib-azure .crumb .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding-top:15px;padding-bottom:15px;font-size:14px;color:var(--grey);line-height:1;}
.fib-azure .crumb a{color:var(--blue);display:inline-flex;align-items:center;}
.fib-azure .crumb a:hover{color:var(--cyan);}
.fib-azure .crumb .sep{color:#9AA7B4;display:inline-flex;align-items:center;}
.fib-azure .crumb .current{color:var(--grey);font-weight:600;display:inline-flex;align-items:center;}


/* ============================================================
   6. HERO
   ============================================================ */
.fib-azure .hero{background:
    radial-gradient(60% 55% at 88% 0%, rgba(24,180,233,.14), transparent 60%),
    radial-gradient(120% 120% at 80% 0%,#EAF4FB 0%,#F8FBFE 45%,#fff 100%);
  padding:100px 0;}
.fib-azure .hero-grid{display:flex;gap:48px;align-items:center;flex-wrap:wrap;position:relative;z-index:1;}
.fib-azure .hero-left{flex:1 1 55%;min-width:320px;}
.fib-azure .hero-right{flex:1 1 38%;min-width:280px;}
.fib-azure .pill{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid #DBE7F2;box-shadow:0 6px 18px rgba(11,92,173,.08);
  border-radius:100px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--blue);
  margin-bottom:22px;line-height:1.3;}
.fib-azure .pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;}
.fib-azure .hero h1{font-size:52px;font-weight:800;letter-spacing:-1px;}
.fib-azure .hero .sub{font-size:18px;color:#4A5A6B;margin-top:18px;max-width:540px;}
.fib-azure .hero-btns{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;}
.fib-azure .hero-trust{margin-top:20px;font-size:13px;color:#7B8A9A;}
.fib-azure .glass{background:rgba(255,255,255,.85);border:1px solid #E3EDF6;
  backdrop-filter:blur(10px);border-radius:22px;padding:28px;box-shadow:0 20px 50px rgba(10,37,64,.10);}
.fib-azure .glass .row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #EEF3F8;}
.fib-azure .glass .row:last-child{border-bottom:none;}
.fib-azure .glass .chk{width:30px;height:30px;border-radius:50%;background:#E8F7F1;color:var(--green);
  display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.fib-azure .glass .row b{font-size:15px;color:var(--navy);}


/* ============================================================
   7. SECTION HEADING HELPER
   ============================================================ */
.fib-azure .sec-head{text-align:center;max-width:680px;margin:0 auto 50px;}
/* Base rule. .eyebrow used to exist only inside .sec-head and .showcase, so an
   eyebrow placed anywhere else - the split-text column on /azure-nulmeting/,
   for instance - fell back to plain body text. The two scoped rules below stay
   and simply refine spacing where they apply. */
.fib-azure .eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);margin-bottom:8px;}
.fib-azure .sec-head .eyebrow{display:block;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:8px;}
.fib-azure .sec-head p{color:var(--grey);margin-top:10px;}
.fib-azure .lead-link{color:var(--blue);font-weight:600;}
.fib-azure .lead-link:hover{color:var(--cyan);}


/* ============================================================
   8. SHOWCASE (GLOSSY ISOMETRIC RENDER)
   ============================================================ */
.fib-azure .showcase{background:linear-gradient(180deg,#fff 0%,var(--mist) 100%);padding:70px 0;}
.fib-azure .showcase .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;}
.fib-azure .showcase .eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);}
.fib-azure .showcase h2{max-width:640px;}
.fib-azure .showcase p{color:var(--grey);max-width:560px;margin-top:2px;}
.fib-azure .showcase .render{margin-top:26px;width:100%;max-width:900px;}
.fib-azure .showcase .render img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 30px 50px rgba(10,37,64,.10));}


/* ============================================================
   9. TRUST STRIP
   ============================================================ */
.fib-azure .strip{background:#fff;padding:56px 0;}
.fib-azure .strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.fib-azure .strip-item{text-align:center;}
.fib-azure .strip-item .ico{width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,#EAF4FB,#D5EBFA);display:flex;align-items:center;
  justify-content:center;margin:0 auto 14px;color:var(--blue);padding:12px;}
.fib-azure .strip-item h3{font-size:16px;}
.fib-azure .strip-item p{font-size:14px;color:var(--grey);margin-top:6px;}
.fib-azure .strip-item p a{color:var(--blue);font-weight:600;}


/* ============================================================
   10. PROBLEM CARDS
   ============================================================ */
.fib-azure .prob{background:#fff;}
.fib-azure .prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fib-azure .prob-card{background:#fff;border:1px solid var(--cardborder);border-radius:18px;padding:30px;}
/* v11: brand light-blue tile (was red) so the duotone icon looks clean */
.fib-azure .prob-card .ico{width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,#EAF4FB,#D5EBFA);display:flex;align-items:center;
  justify-content:center;margin-bottom:16px;color:var(--blue);padding:11px;}
.fib-azure .prob-card p{font-size:15px;color:var(--grey);margin-top:6px;}
.fib-azure .prob-card a{color:var(--blue);font-weight:600;font-size:14px;}


/* ============================================================
   11. 3 V'S / EXPERTISE (THREEV)
   ============================================================ */
.fib-azure .threev{background-color:var(--mist);
  background-image:radial-gradient(rgba(11,92,173,.10) 1px, transparent 1px);
  background-size:22px 22px;}
.fib-azure .threev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fib-azure .threev-card{background:#fff;border:1px solid var(--cardborder);border-radius:18px;padding:32px;text-align:center;
  box-shadow:0 4px 14px rgba(10,37,64,.04);}
.fib-azure .threev-card .v{font-size:34px;font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;margin-bottom:8px;}
.fib-azure .threev-card p{font-size:15px;color:var(--grey);margin-top:8px;}
.fib-azure .threev-card a{color:var(--blue);font-weight:600;font-size:14px;}


/* ============================================================
   12. SERVICES GRID
   ============================================================ */
.fib-azure .serv{background:#fff;}
.fib-azure .serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fib-azure .card{background:#fff;border:1px solid var(--cardborder);border-radius:18px;padding:30px;
  transition:.25s;box-shadow:0 4px 14px rgba(10,37,64,.04);display:flex;flex-direction:column;}
.fib-azure .card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(11,92,173,.12);}
.fib-azure .card .ico{width:50px;height:50px;border-radius:14px;
  background:linear-gradient(135deg,#EAF4FB,#D5EBFA);display:flex;align-items:center;
  justify-content:center;color:var(--blue);margin-bottom:16px;padding:12px;}
.fib-azure .card p{font-size:15px;color:var(--grey);margin-top:8px;flex-grow:1;}
.fib-azure .card .tags{font-size:12.5px;color:var(--grey-text);margin-top:12px;line-height:1.5;}
.fib-azure .card a.more{margin-top:16px;color:var(--blue);font-weight:600;font-size:15px;align-self:flex-start;}
.fib-azure .card a.more:hover{color:var(--cyan);}


/* ============================================================
   13. MAATWERK CALLOUT
   ============================================================ */
.fib-azure .maatwerk{background:var(--mist);}
.fib-azure .callout{border-radius:22px;padding:44px 40px;text-align:center;max-width:860px;margin:0 auto;
  box-shadow:0 12px 34px rgba(10,37,64,.06);border:1px solid #E3EDF6;
  background:linear-gradient(135deg,#EAF4FB,#F8FBFE);}
.fib-azure .callout h2{margin-bottom:14px;}
.fib-azure .callout p{color:#3F5164;max-width:640px;margin:0 auto 22px;}
.fib-azure .callout .eyebrow{margin-bottom:10px;}


/* ============================================================
   14. WELL-ARCHITECTED PILLARS (WA)
   ============================================================ */
.fib-azure .wa{background:#fff;}
.fib-azure .wa-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
/* Column count follows the number of cards, so three or four cards fill
   the row instead of leaving empty tracks (serviceniveaus, 5-10-2026). */
.fib-azure .wa-grid:has(> :nth-child(3):last-child),
.fib-azure .wa-grid:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr);}
.fib-azure .wa-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr);}
.fib-azure .wa-card{background:var(--mist);border:1px solid var(--cardborder);border-radius:16px;padding:24px 20px;}
.fib-azure .wa-card .n{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:14px;}
.fib-azure .wa-card h3{font-size:16px;}
.fib-azure .wa-card p{font-size:13.5px;color:var(--grey);margin-top:6px;}
.fib-azure .wa-source{text-align:center;margin-top:28px;font-size:14px;color:var(--grey);}
.fib-azure .wa-source a{color:var(--blue);font-weight:600;}


/* ============================================================
   15. HOW IT WORKS (STEPS)
   ============================================================ */
.fib-azure .how{background:var(--mist);}
.fib-azure .how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;}
.fib-azure .step .num{width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:18px;}
.fib-azure .step h3{font-size:18px;}
.fib-azure .step p{font-size:14px;color:var(--grey);margin-top:6px;}


/* ============================================================
   16. FEATURE GRID (SPOKES)
   ============================================================ */
.fib-azure .feat{background:#fff;}
.fib-azure .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fib-azure .feat-card{background:#fff;border:1px solid var(--cardborder);border-radius:18px;padding:28px;
  transition:.25s;box-shadow:0 4px 14px rgba(10,37,64,.04);}
.fib-azure .feat-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(11,92,173,.10);}
.fib-azure .feat-card .ico{width:50px;height:50px;border-radius:14px;
  background:linear-gradient(135deg,#EAF4FB,#D5EBFA);display:flex;align-items:center;
  justify-content:center;color:var(--blue);margin-bottom:16px;padding:12px;}
.fib-azure .feat-card p{font-size:15px;color:var(--grey);margin-top:8px;}
.fib-azure .feat-card a{color:var(--blue);font-weight:600;}


/* ============================================================
   17. SPLIT + CHECKLIST (SPOKES)
   ============================================================ */
.fib-azure .split{background:var(--mist);}
.fib-azure .split-grid{display:flex;gap:56px;align-items:center;flex-wrap:wrap;}
.fib-azure .split-text{flex:1 1 50%;min-width:300px;}
.fib-azure .split-text p{color:#3F5164;margin-top:14px;}
.fib-azure .split-card{flex:1 1 40%;min-width:280px;background:#fff;border:1px solid #E3EDF6;
  border-radius:22px;padding:32px;box-shadow:0 20px 50px rgba(10,37,64,.08);}
.fib-azure .split-card .row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid #EEF3F8;}
.fib-azure .split-card .row:last-child{border-bottom:none;}
.fib-azure .split-card .chk{color:var(--green);font-weight:700;flex-shrink:0;}
.fib-azure .split-card .row span{font-size:15px;color:var(--navy);}
/* Rows that use an SVG icon (chk-ico) instead of a text checkmark */
.fib-azure .split-card .chk-ico{width:22px;height:22px;color:var(--blue);flex-shrink:0;display:inline-flex;}
.fib-azure .split-card .chk-ico .ico-svg{width:22px;height:22px;}

/* Rows carrying a bold label with a description below it, rather than
   a single sentence. */
.fib-azure .split-card .row span{line-height:1.5;}
.fib-azure .split-card .row span b{display:block;margin-bottom:2px;}


/* ============================================================
   18. PRICING
   ============================================================ */
.fib-azure .pricing{background:#fff;}
.fib-azure .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fib-azure .pricing-card{background:#fff;border:1px solid var(--cardborder);border-radius:18px;padding:32px;
  display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(10,37,64,.04);}
.fib-azure .pricing-card.featured{border-color:var(--blue);box-shadow:0 18px 40px rgba(11,92,173,.12);}
.fib-azure .pricing-card .kicker{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);}
.fib-azure .pricing-card h3{font-size:20px;margin-top:6px;}
.fib-azure .pricing-card .amount{font-size:30px;font-weight:800;color:var(--navy);margin:12px 0 2px;}
.fib-azure .pricing-card .amount small{font-size:15px;font-weight:600;color:var(--grey);}
.fib-azure .pricing-card p{font-size:14px;color:var(--grey);margin-top:8px;flex-grow:1;}
/* .related-note shares this styling: same role (a centred note under a block
   of cards), and it had no rule of its own, which left it unstyled and
   left-aligned against the wrap edge. */
.fib-azure .pricing-note,
.fib-azure .related-note{text-align:center;color:var(--grey);font-size:14px;margin-top:24px;}
.fib-azure .pricing-note .linklike,
.fib-azure .related-note .linklike{font-size:inherit;}
/* Prominent calculator CTA under the pricing grid */
.fib-azure .pricing-cta{text-align:center;margin-top:34px;}
.fib-azure .pricing-cta .btn{margin-bottom:12px;}
.fib-azure .pricing-cta__note{display:block;max-width:560px;margin:0 auto;font-size:14px;color:var(--grey);line-height:1.5;}
.fib-azure .pricing-cta__note .linklike{font-size:inherit;}


/* ============================================================
   19. CERTIFICATIONS (CLICKABLE & VERIFIABLE)
   ============================================================ */
.fib-azure .certs{background:var(--mist);}
.fib-azure .cert-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.fib-azure .cert{background:#fff;border:1px solid var(--cardborder);border-radius:18px;
  padding:26px 18px;text-align:center;transition:.25s;box-shadow:0 4px 14px rgba(10,37,64,.04);
  display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;}
.fib-azure .cert:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(11,92,173,.14);}
.fib-azure .cert .badge{width:88px;height:88px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;}
.fib-azure .cert .badge img{max-width:100%;max-height:100%;}
.fib-azure .cert .badge .fallback{width:80px;height:88px;border-radius:12px;
  background:linear-gradient(160deg,#0B5CAD,#18B4E9);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:30px;box-shadow:0 8px 20px rgba(11,92,173,.28);}
.fib-azure .cert h3{font-size:15px;font-weight:700;line-height:1.3;}
.fib-azure .cert .verify{margin-top:10px;font-size:13px;font-weight:600;color:var(--blue);}
.fib-azure .cert:hover .verify{color:var(--cyan);}
.fib-azure .cert-note{text-align:center;margin-top:28px;font-size:14px;color:var(--grey);}


/* ============================================================
   20. SPECIALIST (E-E-A-T)
   ============================================================ */
.fib-azure .specialist{background:#fff;}
.fib-azure .specialist-card{max-width:860px;margin:0 auto;display:flex;gap:36px;align-items:center;
  flex-wrap:wrap;background:var(--mist);border:1px solid var(--cardborder);border-radius:22px;
  padding:36px 40px;box-shadow:0 12px 34px rgba(10,37,64,.05);}
.fib-azure .specialist-photo{flex:0 0 auto;}
.fib-azure .specialist-photo img{width:160px;height:160px;border-radius:20px;object-fit:cover;
  box-shadow:0 12px 30px rgba(11,92,173,.18);}
.fib-azure .specialist-body{flex:1 1 320px;}
.fib-azure .specialist-body h3{font-size:22px;}
.fib-azure .specialist-body .role{color:var(--blue);font-weight:600;font-size:14px;margin:2px 0 12px;}
.fib-azure .specialist-body p{color:#3F5164;font-size:15px;}
.fib-azure .specialist-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}


/* ============================================================
   21. SOCIAL PROOF / QUOTE CARDS
   ============================================================ */
.fib-azure .proof{background:var(--mist);}
.fib-azure .quote-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--cardborder);
  border-radius:22px;padding:40px 44px;box-shadow:0 12px 34px rgba(10,37,64,.06);text-align:center;}
.fib-azure .quote-card blockquote{font-size:21px;line-height:1.5;color:var(--navy);font-weight:600;}
.fib-azure .quote-card figcaption{margin-top:18px;font-size:15px;color:var(--grey);}
.fib-azure .quote-card figcaption strong{color:var(--navy);}

/* Caption: name on its own line, then the source. The role span is
   emitted empty when no role is known, so it is hidden in that case. */
.fib-azure .quote-card figcaption strong{display:block;font-size:15px;
  margin-bottom:4px;color:var(--navy);}
.fib-azure .quote-card .review-role{display:block;font-size:13.5px;color:var(--grey);}
.fib-azure .quote-card .review-role:empty{display:none;}
.fib-azure .quote-card .review-source{display:block;font-size:13px;color:var(--grey);}


/* ============================================================
   22. WHY FIBRONIC
   ============================================================ */
.fib-azure .why{background:#fff;}
.fib-azure .why-inner{max-width:820px;margin:0 auto;text-align:center;}
.fib-azure .why-inner h2{margin-bottom:18px;}
.fib-azure .why-inner .lead{font-size:19px;color:#3F5164;}


/* ============================================================
   23. OFFER (NULMETING)
   ============================================================ */
.fib-azure .offer{background-color:var(--mist);
  background-image:radial-gradient(rgba(11,92,173,.10) 1px, transparent 1px);
  background-size:22px 22px;}
.fib-azure .offer .wrap{position:relative;z-index:1;}
.fib-azure .offer-actions{text-align:center;margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:14px;}
/* Not scoped to .offer-actions: /azure/ uses p.sec inside a split-text column,
   where the old selector silently did not apply and the links fell back to the
   browser default colour. */
.fib-azure .sec{font-size:14px;color:var(--grey);}
.fib-azure .sec a,.fib-azure .sec .linklike{color:var(--blue);font-weight:600;}

/* The nulmeting block carries more copy than the other split sections. */
.fib-azure .nulmeting-offer .split-text p{margin-top:12px;}


/* ============================================================
   24. CTA BAND
   ============================================================ */
.fib-azure .cta{background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);
  color:#fff;text-align:center;}
.fib-azure .cta .wrap{position:relative;z-index:1;}
.fib-azure .cta h2{color:#fff;}
.fib-azure .cta p{color:#CBD5E1;max-width:560px;margin:16px auto 28px;}


/* ============================================================
   25. FAQ ACCORDION
   ============================================================ */
.fib-azure .faq{background:#fff;}
.fib-azure .acc{max-width:820px;margin:0 auto;}
.fib-azure .acc details{background:#fff;border:1px solid var(--cardborder);border-radius:12px;
  margin-bottom:14px;overflow:hidden;transition:.2s;}
.fib-azure .acc details[open]{box-shadow:0 8px 24px rgba(10,37,64,.08);}
.fib-azure .acc summary{padding:20px 24px;font-weight:700;font-size:17px;color:var(--navy);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.fib-azure .acc summary::-webkit-details-marker{display:none;}
.fib-azure .acc summary::after{content:"+";color:var(--blue);font-size:26px;font-weight:400;line-height:1;flex-shrink:0;}
.fib-azure .acc details[open] summary::after{content:"\2013";}
.fib-azure .acc .body{padding:0 24px 22px;color:var(--grey);font-size:15px;}
.fib-azure .acc .body a{color:var(--blue);font-weight:600;text-decoration:underline;}
.fib-azure .acc .body .btn{display:inline-block;margin-top:14px;text-decoration:none;}
.fib-azure .acc .body .btn-primary{color:#fff;}


/* ============================================================
   26. FOOTER

   .foot-cta stays a plain link. As a button it collided with the link
   styling it inherits from .fib-azure .foot a, which rendered a blue
   block with an underline over the e-mail address below it.
   ============================================================ */
.fib-azure .foot{background:var(--navy);color:#C7D3E0;padding:64px 0 40px;}
/* Four columns: brand, services, approach, contact. The old three-column rule
   predated the contact column and pushed it onto a second row. */
.fib-azure .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 0.9fr;gap:36px 40px;}
@media(max-width:1100px){.fib-azure .foot-grid{grid-template-columns:1fr 1fr;gap:32px;}}
.fib-azure .foot h2{color:#fff;font-size:16px;font-weight:700;letter-spacing:0;line-height:1.3;margin-bottom:16px;}
.fib-azure .foot .brand{font-size:26px;font-weight:800;color:#fff;}
.fib-azure .foot a{color:#C7D3E0;display:block;padding:6px 0;font-size:15px;}
.fib-azure .foot a:hover{color:var(--cyan);}
.fib-azure .foot .small{font-size:13px;color:#8296AD;margin-top:8px;}
.fib-azure .foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:24px;
  font-size:13px;color:#8296AD;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
/* Footer CTA stays a plain link. As a button it collided with the link styling
   it inherits from .fib-azure .foot a, which rendered a blue block with an
   underline overlapping the e-mail address below it. */
.fib-azure .foot-cta{background:none;border:none;padding:6px 0;margin:0;cursor:pointer;
  color:#C7D3E0;font-size:15px;font-family:inherit;text-align:left;display:block;font-weight:600;}
.fib-azure .foot-cta:hover{color:var(--cyan);}
.fib-azure .foot-email{display:block;padding:6px 0;font-size:15px;}
.fib-azure .foot-email a{padding:0;display:inline;}
/* Phone is revealed by fibronic.js and needs the same treatment as the e-mail;
   without this it had no styling at all. */
.fib-azure .foot-phone{display:block;padding:6px 0;font-size:15px;}
.fib-azure .foot-phone a{padding:0;display:inline;}

/* Brand column: keep the intro readable instead of full-width. */
.fib-azure .foot-brand .brand{margin-bottom:12px;}
.fib-azure .foot-brand .small{margin:0 0 10px;line-height:1.6;max-width:42ch;}
.fib-azure .foot-brand .small:last-child{margin-bottom:0;}

/* Bottom bar: legal details in two groups, not one long line. */
.fib-azure .foot-bottom-left,
.fib-azure .foot-bottom-right{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;}
.fib-azure .foot-bottom a{display:inline;padding:0;}
/* "Cookie-instellingen" is a button (it opens the banner, it goes nowhere)
   but must read as one of the links around it. */
.fib-azure .foot-bottom .foot-cookie{color:#C7D3E0;font-weight:400;font-size:inherit;}
.fib-azure .foot-bottom .foot-cookie:hover{color:var(--cyan);text-decoration:none;}
.fib-azure .foot-sep{opacity:.4;}

@media(max-width:600px){.fib-azure .foot-bottom{justify-content:flex-start;}}


/* ============================================================
   27. CONTACT MODAL + FORM
   ============================================================ */
/* Top-level overlay (not scoped under .fib-azure). Flex column so the
   header stays put and the form scrolls if needed on small screens. */
.fib-modal{position:fixed;inset:0;z-index:1000;display:none;}
.fib-modal.is-open{display:block;}
.fib-modal__overlay{position:absolute;inset:0;background:rgba(10,37,64,.55);backdrop-filter:blur(2px);}
.fib-modal__dialog{position:relative;z-index:1;max-width:560px;margin:6vh auto;background:#fff;
  border-radius:20px;padding:34px 36px 30px;box-shadow:0 30px 70px rgba(10,37,64,.35);
  max-height:88vh;display:flex;flex-direction:column;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#1F2933;}
.fib-modal__head{flex:0 0 auto;}
/* Reserve room for the close button so the title never overlaps it,
   and allow the title to wrap onto a second line. */
.fib-modal__dialog h2{font-size:24px;font-weight:800;color:#0A2540;line-height:1.25;
  padding-right:40px;overflow-wrap:break-word;}
.fib-modal__intro{font-size:15px;color:#5B6B7B;margin-top:8px;margin-bottom:20px;padding-right:40px;}
.fib-modal__close{position:absolute;top:16px;right:16px;width:32px;height:32px;background:none;border:none;
  font-size:28px;line-height:1;color:#9AA7B4;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.fib-modal__close:hover{color:#0A2540;}

.fib-modal .fib-form{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.fib-form .fib-field{margin-bottom:14px;}
.fib-form .fib-row{display:flex;gap:14px;flex-wrap:wrap;}
.fib-form .fib-row .fib-field{flex:1 1 180px;}
.fib-form label{display:block;font-size:14px;font-weight:600;color:#0A2540;margin-bottom:6px;}
.fib-form .req{color:#0B5CAD;}
.fib-form input,.fib-form textarea{width:100%;border:1px solid #DBE7F2;border-radius:10px;
  padding:11px 13px;font-size:15px;font-family:inherit;color:#1F2933;background:#fff;transition:border-color .15s;}
.fib-form input:focus,.fib-form textarea:focus{outline:none;border-color:#0B5CAD;box-shadow:0 0 0 3px rgba(11,92,173,.12);}
.fib-form textarea{resize:vertical;}
.fib-form .fib-consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:13px;color:#5B6B7B;margin:6px 0 18px;}
.fib-form .fib-consent input{width:auto;margin-top:2px;flex-shrink:0;}
.fib-form .fib-consent a{color:#0B5CAD;font-weight:600;}
.fib-form__submit{width:100%;}
.fib-form__status{margin-top:12px;font-size:14px;text-align:center;min-height:1em;}
.fib-form__status.is-ok{color:var(--green-text);}
.fib-form__status.is-error{color:#C0392B;}
/* Error text sits directly under its own field. The original -8px top margin
   assumed the error element followed the .fib-field wrapper; it now lives
   inside that wrapper, so the negative margin pulled the text up onto the
   input border and clipped it. A small positive margin is correct here. */
.fib-form .fib-field__error{display:none;margin:6px 0 0;font-size:13px;line-height:1.4;color:#C0392B;}
.fib-form .fib-field__error.is-visible{display:block;}
.fib-form .fib-consent__error{margin:6px 0 0;}
.fib-form .is-invalid{border-color:#C0392B;}
.fib-form input.is-invalid:focus,.fib-form textarea.is-invalid:focus{box-shadow:0 0 0 3px rgba(192,57,43,.12);}
/* Drop the inline-block baseline gap under the textarea, so its error text
   keeps the same distance as the other fields. */
.fib-form textarea{display:block;}
.fib-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} /* honeypot */


/* ============================================================
   28. RELATED ("VAAK GECOMBINEERD MET")
   ============================================================ */
.fib-azure .related{background:var(--mist);}
.fib-azure .related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:840px;margin:0 auto;}
.fib-azure .related-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--cardborder);
  border-radius:18px;padding:28px 30px;text-decoration:none;color:inherit;
  transition:.25s;box-shadow:0 4px 14px rgba(10,37,64,.04);}
.fib-azure .related-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(11,92,173,.12);}
.fib-azure .related-card h3{font-size:18px;color:var(--navy);}
.fib-azure .related-card p{font-size:15px;color:var(--grey);margin-top:8px;flex-grow:1;}
.fib-azure .related-card .related-more{margin-top:16px;color:var(--blue);font-weight:600;font-size:15px;}
.fib-azure .related-card:hover .related-more{color:var(--cyan);}


/* ============================================================
   29. FLOATING ACTIONS (WHATSAPP + SCROLL-TO-TOP)
   ============================================================ */
/* Top-level (not scoped under .fib-azure) so it floats above all content. */
.fib-fab{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;flex-direction:column;gap:12px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
.fib-fab__btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;box-shadow:0 8px 22px rgba(10,37,64,.22);transition:transform .2s,box-shadow .2s;}
.fib-fab__btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(10,37,64,.28);}
.fib-fab__wa{background:#25D366;color:#fff;}
.fib-fab__wa:hover{background:#1FB457;}
.fib-fab__top{background:#fff;color:var(--navy);border:1px solid var(--border);
  opacity:0;visibility:hidden;transform:translateY(8px);}
.fib-fab__top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.fib-fab__top:hover{color:var(--blue);}


/* ============================================================
   30. COOKIE BANNER
   ============================================================ */
/* Rendered by the server (partials/cookiebanner-markup.php), so it
   paints with the page instead of after a script: a banner that pops
   in late is often the Largest Contentful Paint on mobile. Shown when
   the inline consent script marks <html> with .fib-consent-needed, or
   when reopened (.is-visible). No slide-in: an element moving into the
   viewport is painted late again. The root carries .fib-azure, so the
   shared buttons and the calculator switch (33) apply. */
.fib-cookie{display:none;position:fixed;left:0;right:0;bottom:0;z-index:1100;
  background:#fff;border-top:1px solid #E2E8F0;box-shadow:0 -8px 30px rgba(10,37,64,.12);
  max-height:90vh;overflow-y:auto;font-size:15px;line-height:1.55;}
html.fib-consent-needed .fib-cookie,.fib-cookie.is-visible{display:block;}
.fib-cookie .fib-cookie__inner{max-width:1140px;margin:0 auto;padding:18px 24px;
  display:grid;grid-template-columns:1fr auto;gap:12px 32px;align-items:center;}
.fib-cookie .fib-cookie__title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:4px;}
.fib-cookie .fib-cookie__text{font-size:14px;color:var(--grey);max-width:68ch;}
.fib-cookie .fib-cookie__text a{color:var(--blue);font-weight:600;text-decoration:underline;}
.fib-cookie .fib-cookie__actions{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:flex-end;gap:10px 14px;}
.fib-cookie .fib-cookie__toggle{font-size:14px;}

/* Second layer: one row per category, opened by "Zelf kiezen". */
.fib-cookie .fib-cookie__prefs{grid-column:1 / -1;border-top:1px solid #EEF3F8;padding-top:4px;}
.fib-cookie .fib-cookie__prefs[hidden]{display:none;}
.fib-cookie .fib-cookie__row{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:12px 0;border-bottom:1px solid #EEF3F8;}
.fib-cookie .fib-cookie__row-text b{display:block;font-size:14.5px;color:var(--navy);}
.fib-cookie .fib-cookie__row-text span{display:block;font-size:13.5px;color:var(--grey);margin-top:2px;}
/* A category Fibronic does not use: a statement, not a switch. */
.fib-cookie .fib-cookie__badge{flex-shrink:0;font-size:12px;font-weight:700;padding:4px 11px;
  border-radius:100px;background:#F0F3F7;color:var(--grey);white-space:nowrap;}
.fib-cookie .fib-cookie__save{display:flex;justify-content:flex-end;padding-top:14px;}
/* The switch input is visually hidden; show focus on the track. */
.fib-cookie .calc-switch input:focus-visible + .calc-slider{outline:2px solid var(--blue);outline-offset:2px;}

@media(max-width:640px){
  .fib-cookie .fib-cookie__inner{grid-template-columns:1fr;padding:14px 18px;}
  .fib-cookie .fib-cookie__actions{justify-content:stretch;}
  .fib-cookie .fib-cookie__actions .btn{flex:1 1 40%;text-align:center;}
  .fib-cookie .fib-cookie__toggle{flex-basis:100%;text-align:center;}
  .fib-cookie .fib-cookie__save .btn{width:100%;}
}


/* ============================================================
   31. TESTIMONIALS CAROUSEL (removed in v22)

   Replaced by the swipe row in 38.2. The number is kept so the table
   of contents and older references stay valid.
   ============================================================ */


/* ============================================================
   32. RESPONSIVE
   ============================================================ */
/* Tablets */
@media(max-width:980px){
  .fib-azure .wa-grid{grid-template-columns:repeat(2,1fr);}
}

/* Mobile menu breakpoint */
@media(max-width:900px){
  /* Collapsed mobile menu: absolutely positioned, but NO visual footprint
     until opened (no padding/border/shadow) so it never overlaps the breadcrumb. */
  .fib-azure .nav-links{position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;
    align-items:flex-start;gap:0;padding:0 24px;border-bottom:0;box-shadow:none;
    max-height:0;overflow:hidden;transition:max-height .3s;}
  .fib-azure .nav-links > a,.fib-azure .nav-item{width:100%;padding:14px 0;border-bottom:1px solid var(--mist);}
  .fib-azure #nav-toggle:checked ~ .nav-links{max-height:720px;overflow:auto;
    padding:8px 24px;border-bottom:1px solid var(--border);box-shadow:0 12px 24px rgba(10,37,64,.08);}
  .fib-azure .burger{display:flex;}
  .fib-azure .nav-cta .btn{display:none;}

  /* Dropdown items on mobile: header row (link + caret), submenu collapsed by default */
  .fib-azure .nav-item.has-dropdown{padding:0;border-bottom:1px solid var(--mist);}
  .fib-azure .nav-azure-wrap{display:flex;width:100%;align-items:center;justify-content:space-between;padding:14px 0;}
  .fib-azure .nav-azure{flex:1;}
  .fib-azure .caret-btn{width:44px;height:44px;color:var(--navy);}
  .fib-azure .caret-btn svg{width:18px;height:18px;}
  .fib-azure .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
    background:transparent;min-width:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .fib-azure .dropdown::before{display:none;}
  .fib-azure .dropdown a{padding:11px 0 11px 16px;}
  .fib-azure .sub-toggle:checked ~ .dropdown{max-height:420px;padding-bottom:8px;}
  .fib-azure .sub-toggle:checked ~ .nav-azure-wrap .caret-btn svg{transform:scaleY(-1);}

  /* Single-column grids */
  .fib-azure .strip-grid{grid-template-columns:repeat(2,1fr);}
  .fib-azure .prob-grid,.fib-azure .serv-grid,.fib-azure .how-grid,.fib-azure .threev-grid,
  .fib-azure .feat-grid,.fib-azure .pricing-grid,.fib-azure .foot-grid{grid-template-columns:1fr;}
  .fib-azure .wa-grid{grid-template-columns:1fr;}
  .fib-azure .cert-grid{grid-template-columns:repeat(2,1fr);}
}

/* Phones */
@media(max-width:640px){
  .fib-azure section{padding:60px 0;}
  .fib-azure .hero{padding:56px 0;}
  .fib-azure .hero h1{font-size:36px;}
  .fib-azure h2{font-size:28px;}
  .fib-azure .pill{font-size:13px;padding:7px 14px;}
  .fib-azure .callout{padding:32px 22px;}
  .fib-azure .showcase{padding:50px 0;}

  /* Hero buttons stack full-width so long labels stay on one line */
  .fib-azure .hero-btns{flex-direction:column;align-items:stretch;}
  .fib-azure .hero-btns .btn{width:100%;text-align:center;}

  /* Specialist card centers on phones */
  .fib-azure .specialist-card{padding:28px 22px;gap:22px;text-align:center;justify-content:center;}
  .fib-azure .specialist-links{justify-content:center;}

  /* Related single column */
  .fib-azure .related-grid{grid-template-columns:1fr;}

  /* Floating actions a touch smaller */
  .fib-fab{right:14px;bottom:14px;gap:10px;}
  .fib-fab__btn{width:48px;height:48px;}


  /* Modal full-screen (dynamic viewport so browser chrome never clips it);
     compact spacing so a short form needs no scrolling. */
  .fib-modal__dialog{margin:0;height:100dvh;max-height:100dvh;border-radius:0;padding:20px 20px 16px;}
  .fib-modal__dialog h2{font-size:20px;padding-right:44px;}
  .fib-modal__intro{margin-bottom:14px;font-size:14px;padding-right:44px;}
  .fib-modal__close{top:12px;right:12px;}
  .fib-form .fib-field{margin-bottom:10px;}
  .fib-form .fib-row{gap:10px;}
  .fib-form input,.fib-form textarea{padding:10px 12px;}
  .fib-form .fib-consent{margin:4px 0 12px;}
}

/* Extra-short phones: trim a little more so nothing clips */
@media(max-width:640px) and (max-height:720px){
  .fib-modal__dialog{padding-top:16px;}
  .fib-modal__intro{margin-bottom:10px;}
  .fib-form .fib-field{margin-bottom:8px;}
}


/* ============================================================
   33. PRICE CALCULATOR
   ============================================================ */
.fib-azure .calc-intro{background:#fff;padding:70px 0 10px;}
.fib-azure .calc-intro .sec-head{margin-bottom:0;}
.fib-azure .calc-intro h1{font-size:40px;font-weight:800;color:var(--navy);letter-spacing:-1px;}
@media(max-width:600px){ .fib-azure .calc-intro h1{font-size:30px;} }
.fib-azure .calc-section{background:#fff;padding:24px 0 80px;}
.fib-azure .calc-notices{max-width:920px;margin:0 auto 22px;}
.fib-azure .calc-notice{display:flex;gap:12px;align-items:flex-start;background:#FFF8E6;border:1px solid #F3E2A9;
  border-radius:12px;padding:13px 16px;font-size:14px;color:#6B5B14;margin-bottom:10px;}
.fib-azure .calc-notice.blue{background:#EAF4FB;border-color:#CFE0EE;color:#274c74;}
.fib-azure .calc-notice .ico-svg{width:22px;height:22px;flex-shrink:0;color:#B8951F;}
.fib-azure .calc-notice.blue .ico-svg{color:var(--blue);}
.fib-azure .calc-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:22px;align-items:start;}
.fib-azure .calc-panel{background:#fff;border:1px solid var(--cardborder);border-radius:18px;
  padding:26px 26px 22px;box-shadow:0 8px 24px rgba(10,37,64,.05);}
.fib-azure .calc-panel h2{font-size:18px;color:var(--navy);margin-bottom:4px;}
.fib-azure .calc-hint{font-size:13px;color:var(--grey);margin-bottom:14px;}
.fib-azure .calc-subhead{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--blue);margin:18px 0 10px;}
.fib-azure .calc-group{border:1px solid #EDF2F7;border-radius:14px;padding:4px 16px;margin-bottom:14px;}
.fib-azure .calc-group.base{background:#FAFCFE;}
.fib-azure .calc-svc{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;}
.fib-azure .calc-svc-label{font-size:15px;font-weight:700;color:var(--navy);}
.fib-azure .calc-svc-label small{display:block;font-weight:400;font-size:12.5px;color:var(--grey);margin-top:2px;}
.fib-azure .calc-switch{position:relative;width:46px;height:26px;flex-shrink:0;}
.fib-azure .calc-switch input{opacity:0;width:0;height:0;}
.fib-azure .calc-slider{position:absolute;inset:0;background:#CBD7E4;border-radius:26px;transition:.2s;cursor:pointer;}
.fib-azure .calc-slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;
  border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.fib-azure .calc-switch input:checked + .calc-slider{background:var(--blue);}
.fib-azure .calc-switch input:checked + .calc-slider::before{transform:translateX(20px);}
.fib-azure .calc-switch input:disabled + .calc-slider{opacity:.6;cursor:not-allowed;}
.fib-azure .calc-fields{display:none;grid-template-columns:1fr 1fr;gap:12px;padding:2px 0 16px;}
.fib-azure .calc-fields.on{display:grid;}
.fib-azure .calc-fields.single{grid-template-columns:1fr;}
.fib-azure .calc-field{display:flex;flex-direction:column;}
.fib-azure .calc-field label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:5px;}
/* Push every stepper to the bottom of its own grid cell so the plus and
   minus buttons line up across columns, even when one label wraps onto
   more lines than its neighbour. */
.fib-azure .calc-field .calc-stepper{margin-top:auto;}
.fib-azure .calc-field .sub{font-weight:400;color:var(--grey);font-size:12px;}
.fib-azure .calc-stepper{display:flex;align-items:center;border:1px solid #DBE7F2;border-radius:10px;overflow:hidden;}
.fib-azure .calc-stepper button{width:40px;height:44px;flex-shrink:0;border:none;background:#F3F8FD;color:var(--blue);font-size:20px;cursor:pointer;font-weight:700;}
.fib-azure .calc-stepper button:hover{background:#E4F0FB;}
.fib-azure .calc-stepper input{flex:1 1 auto;width:auto;min-width:48px;border:none;text-align:center;font-size:15px;
  font-family:inherit;color:var(--ink);-moz-appearance:textfield;height:44px;}
/* Narrow screens: one field per row. Two steppers side by side left the
   number field only a few pixels wide (PageSpeed target-size, 4-10-2026). */
@media(max-width:560px){.fib-azure .calc-fields{grid-template-columns:1fr;}}
.fib-azure .calc-stepper input::-webkit-outer-spin-button,
.fib-azure .calc-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.fib-azure .calc-basenote{font-size:12px;color:var(--grey-text);padding:0 0 12px;line-height:1.5;}
.fib-azure .calc-result{position:sticky;top:88px;}
.fib-azure .calc-amount{font-size:15px;color:var(--grey);}
.fib-azure .calc-range{font-size:38px;font-weight:800;color:var(--navy);letter-spacing:-1px;line-height:1.1;margin:6px 0 2px;}
.fib-azure .calc-permaand{font-size:15px;color:var(--grey);font-weight:600;}
.fib-azure .calc-excl{font-size:12.5px;color:var(--grey-text);margin-top:10px;line-height:1.5;}
.fib-azure .calc-included{margin-top:18px;border-top:1px solid #EEF3F8;padding-top:14px;}
.fib-azure .calc-inc-t{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);margin-bottom:8px;}
.fib-azure .calc-inc-item{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--navy);padding:4px 0;}
.fib-azure .calc-inc-dot{width:18px;height:18px;border-radius:50%;background:#E8F7F1;color:var(--green);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.fib-azure .calc-disclaimer{font-size:12px;color:var(--grey-text);margin-top:14px;line-height:1.5;}
/* Comparison table */
.fib-azure .calc-compare{max-width:820px;margin:0 auto;}
.fib-azure .calc-ctable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--cardborder);
  border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(10,37,64,.05);}
.fib-azure .calc-ctable th,.fib-azure .calc-ctable td{padding:14px 16px;text-align:left;border-bottom:1px solid #EEF3F8;font-size:14.5px;}
.fib-azure .calc-ctable tbody tr:last-child td,.fib-azure .calc-ctable tbody tr:last-child th{border-bottom:none;}
.fib-azure .calc-ctable thead th{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--grey);background:#FAFCFE;}
.fib-azure .calc-ctable thead th:nth-child(3){color:var(--blue);}
.fib-azure .calc-ctable td:nth-child(2),.fib-azure .calc-ctable td:nth-child(3),
.fib-azure .calc-ctable th:nth-child(2),.fib-azure .calc-ctable th:nth-child(3){text-align:center;width:170px;}
.fib-azure .calc-ctable td:first-child,.fib-azure .calc-ctable tbody th{color:var(--navy);font-weight:500;}
.fib-azure .calc-ctable td.fib{background:#F3F9FE;}
.fib-azure .calc-mk{display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;font-weight:700;}
.fib-azure .calc-mk.yes{background:#E8F7F1;color:var(--green);}
.fib-azure .calc-mk.no{background:#FDECEC;color:#C0392B;}
.fib-azure .calc-mk.mid{background:#F0F3F7;color:#9AA7B4;}

@media(max-width:820px){
  .fib-azure .calc-grid{grid-template-columns:1fr;}
  .fib-azure .calc-result{position:static;}
  .fib-azure .calc-ctable td:nth-child(2),.fib-azure .calc-ctable td:nth-child(3),
  .fib-azure .calc-ctable th:nth-child(2),.fib-azure .calc-ctable th:nth-child(3){width:70px;}
  .fib-azure .calc-ctable th,.fib-azure .calc-ctable td{padding:12px 8px;font-size:13px;}
}


/* ============================================================
   34. CALCULATOR STICKY PRICE BAR (MOBILE)
   ============================================================ */
/* 34. CALCULATOR STICKY PRICE BAR (mobile) ------------------
   Top-level bar injected by fibronic.js on the calculator page.
   Body gets class .calc-page so the FAB and footer make room for it.
   Hidden on desktop; shown under 820px so the live price stays visible
   while the visitor scrolls through the configuration. */
.calc-stickybar{display:none;}
@media(max-width:820px){
  .calc-page .calc-stickybar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:950;background:#fff;
    border-top:1px solid #E2E8F0;box-shadow:0 -6px 24px rgba(10,37,64,.12);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
  .calc-stickybar__price{display:flex;flex-direction:column;min-width:0;}
  .calc-stickybar__label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#5B6B7B;}
  .calc-stickybar__range{font-size:20px;font-weight:800;color:#0A2540;line-height:1.15;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .calc-stickybar__range small{font-size:13px;font-weight:600;color:#5B6B7B;}
  .calc-stickybar .btn{flex-shrink:0;}
  /* Lift the WhatsApp + scroll-to-top buttons above the sticky bar,
     and give the footer breathing room so nothing sits behind it. */
  .calc-page .fib-fab{bottom:88px;}
  .calc-page .foot{padding-bottom:84px;}
}


/* ============================================================
   35. AZURE THANK-YOU PAGE
   ============================================================ */
.fib-azure .thanks{background:linear-gradient(180deg,#F3F9FE 0%,#fff 100%);min-height:62vh;}
.fib-azure .thanks-card{max-width:820px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--cardborder);
  border-radius:24px;padding:48px 42px;box-shadow:0 20px 54px rgba(10,37,64,.09);}
.fib-azure .thanks-check{width:74px;height:74px;margin:0 auto 22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:#E8F7F1;color:var(--green);font-size:38px;font-weight:800;}
.fib-azure .thanks-card h1{font-size:42px;font-weight:800;letter-spacing:-.7px;}
.fib-azure .thanks-lead{max-width:620px;margin:16px auto 0;color:var(--grey);font-size:18px;}
.fib-azure .thanks-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:38px 0 32px;text-align:left;}
.fib-azure .thanks-step{background:var(--mist);border:1px solid var(--cardborder);border-radius:16px;padding:22px;}
.fib-azure .thanks-step strong{display:block;color:var(--navy);margin-bottom:6px;}
.fib-azure .thanks-step span{font-size:14px;color:var(--grey);}
.fib-azure .thanks-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.fib-azure .thanks-help{margin-top:24px;font-size:14px;color:var(--grey);}
.fib-azure .thanks-help a{color:var(--blue);font-weight:600;}
@media(max-width:700px){
  .fib-azure .thanks-card{padding:34px 22px;}
  .fib-azure .thanks-card h1{font-size:32px;}
  .fib-azure .thanks-steps{grid-template-columns:1fr;text-align:center;}
  .fib-azure .thanks-actions{flex-direction:column;}
  .fib-azure .thanks-actions .btn{width:100%;text-align:center;}
}


/* ============================================================
   36. PRACTICE CASES
   ============================================================ */
/* shared chips/tags */
.fib-azure .case-chip{display:inline-block;font-size:12.5px;font-weight:600;color:var(--blue);
  background:#EAF4FB;border:1px solid #D5E7F6;border-radius:100px;padding:5px 12px;}
.fib-azure .case-chip.sm{font-size:12px;padding:4px 10px;}
.fib-azure .case-branche{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--grey);}

/* ---- Archive intro ---- */
.fib-azure .cases-intro{background:
    radial-gradient(60% 55% at 88% 0%, rgba(24,180,233,.14), transparent 60%),
    radial-gradient(120% 120% at 80% 0%,#EAF4FB 0%,#F8FBFE 45%,#fff 100%);
  padding:80px 0 10px;}
.fib-azure .cases-intro h1{font-size:44px;font-weight:800;color:var(--navy);letter-spacing:-1px;}
@media(max-width:600px){ .fib-azure .cases-intro h1{font-size:32px;} }

/* ---- Archive grid + filter ---- */
.fib-azure .cases-list{background:#fff;padding:40px 0 90px;}
.fib-azure .cases-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px;}
.fib-azure .cases-filter-btn{font-family:inherit;font-size:14px;font-weight:600;color:var(--grey);
  background:#fff;border:1px solid var(--border);border-radius:100px;padding:9px 18px;cursor:pointer;transition:.2s;}
.fib-azure .cases-filter-btn:hover{color:var(--blue);border-color:#CFE0EE;}
.fib-azure .cases-filter-btn.is-active{background:var(--blue);border-color:var(--blue);color:#fff;}

.fib-azure .cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fib-azure .case-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--cardborder);
  border-radius:18px;padding:26px 26px 24px;text-decoration:none;color:inherit;
  box-shadow:0 4px 14px rgba(10,37,64,.04);transition:.25s;}
.fib-azure .case-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(11,92,173,.12);}
.fib-azure .case-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.fib-azure .case-client{font-size:15px;font-weight:800;color:var(--blue);}
.fib-azure .case-card-title{font-size:18px;line-height:1.3;color:var(--navy);}
.fib-azure .case-card-sum{font-size:14.5px;color:var(--grey);margin-top:10px;flex-grow:1;}
.fib-azure .case-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;}
.fib-azure .case-card-more{margin-top:16px;color:var(--blue);font-weight:600;font-size:15px;}
.fib-azure .case-card:hover .case-card-more{color:var(--cyan);}

@media(max-width:900px){ .fib-azure .cases-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .fib-azure .cases-grid{grid-template-columns:1fr;} }

/* ---- Detail: hero ---- */
.fib-azure .case-hero{background:
    radial-gradient(60% 55% at 90% 0%, rgba(24,180,233,.12), transparent 60%),
    linear-gradient(180deg,#F8FBFE 0%,#fff 100%);
  padding:64px 0 44px;}
.fib-azure .case-hero .wrap{max-width:820px;}
.fib-azure .case-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;}
.fib-azure .case-tag{font-size:12.5px;font-weight:600;color:var(--blue);background:#EAF4FB;
  border:1px solid #D5E7F6;border-radius:100px;padding:5px 12px;}
.fib-azure .case-tag:hover{background:var(--blue);color:#fff;}
.fib-azure .case-hero h1{font-size:38px;font-weight:800;color:var(--navy);letter-spacing:-.5px;line-height:1.15;}
.fib-azure .case-lead{font-size:19px;color:#3F5164;margin-top:16px;}
.fib-azure .case-transparency{font-size:13px;color:var(--grey-text);margin-top:18px;border-left:3px solid #D5E7F6;
  padding-left:14px;line-height:1.5;}
@media(max-width:600px){ .fib-azure .case-hero h1{font-size:28px;} }

/* ---- Detail: metrics ---- */
.fib-azure .case-metrics{background:#fff;padding:0 0 10px;}
.fib-azure .case-metrics .wrap{max-width:820px;}
.fib-azure .case-metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:-24px;}
.fib-azure .case-metric{background:#fff;border:1px solid var(--cardborder);border-radius:16px;padding:22px 20px;
  text-align:center;box-shadow:0 8px 24px rgba(10,37,64,.06);}
.fib-azure .case-metric .big{font-size:22px;font-weight:800;color:var(--blue);line-height:1.15;}
.fib-azure .case-metric .lbl{font-size:13px;color:var(--grey);margin-top:6px;}
@media(max-width:640px){ .fib-azure .case-metric-grid{grid-template-columns:1fr;margin-top:16px;} }

/* ---- Detail: body ---- */
.fib-azure .case-body{background:#fff;padding:50px 0 80px;}
.fib-azure .case-body .wrap{max-width:820px;}
.fib-azure .case-block{margin-bottom:36px;}
.fib-azure .case-block h2{font-size:24px;margin-bottom:14px;}
.fib-azure .case-block p{color:#3F5164;}
.fib-azure .case-list{list-style:none;margin:0;padding:0;}
.fib-azure .case-list li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid #EEF3F8;}
.fib-azure .case-list li:last-child{border-bottom:none;}
.fib-azure .case-list li span:last-child{font-size:15.5px;color:var(--navy);}
.fib-azure .case-check{width:24px;height:24px;flex-shrink:0;color:var(--green);display:inline-flex;}
.fib-azure .case-check .ico-svg{width:24px;height:24px;}
.fib-azure .case-stack{margin-top:10px;border-top:1px solid #EEF3F8;padding-top:24px;}
.fib-azure .case-stack-label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--grey);margin-bottom:12px;}
.fib-azure .case-stack-tags{display:flex;flex-wrap:wrap;gap:8px;}


/* ============================================================
   37. PAGE-SPECIFIC BLOCKS

   These used to live in a <style> block inside each page, which meant
   they were re-downloaded on every page view.
   ============================================================ */
/* ---- azure-backup-herstel-testen/index.php ---- */
/* Spoke page styling, self-contained */
.sp-parts{display:grid;gap:16px;margin:0 0 10px;}
.sp-part{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start;background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:20px 22px;}
.sp-part .ico{width:48px;height:48px;border-radius:12px;background:#EAF4FB;display:flex;align-items:center;justify-content:center;}
.sp-part .ico svg{width:24px;height:24px;stroke:var(--blue,#0B5CAD);}
.sp-part h3{margin:0 0 6px;font-size:17px;color:var(--navy,#0A2540);}
.sp-part p{margin:0;font-size:15px;line-height:1.6;color:var(--grey,#5B6B7B);}

.note-box{background:#EAF4FB;border-left:4px solid var(--blue,#0B5CAD);border-radius:10px;padding:16px 20px;margin:0 0 20px;font-size:15px;line-height:1.6;}
.note-box strong{color:var(--navy,#0A2540);}
.note-box.is-red{background:#FDF7F7;border-left-color:#B5453F;}
.note-box.is-green{background:#F4FBF8;border-left-color:var(--green,#1CA97C);}


/* ---- azure-beheer-kosten/index.php ---- */
/* Calculator - Fase D-toevoegingen (self-contained) */
#calc-grid,.calc-grid{scroll-margin-top:90px;}
.calc-anchors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 auto 28px;max-width:920px;}
.calc-anchor{text-align:left;background:#fff;border:1px solid var(--cardborder,#E8EEF4);border-radius:14px;padding:16px 18px;cursor:pointer;transition:.2s;font-family:inherit;box-shadow:0 4px 14px rgba(10,37,64,.04);}
.calc-anchor:hover{border-color:#CFE0EE;box-shadow:0 12px 28px rgba(11,92,173,.12);transform:translateY(-3px);}
.calc-anchor .a-title{display:block;font-weight:700;margin:0 0 4px;font-size:17px;color:var(--navy,#0A2540);}
.calc-anchor p{margin:0;font-size:13px;color:var(--grey,#5B6B7B);line-height:1.5;}
.calc-anchor .a-amt{display:block;margin-top:10px;font-weight:800;color:var(--blue,#0B5CAD);font-size:15px;}
.calc-anchors-head{text-align:center;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue,#0B5CAD);margin:0 0 12px;}
.calc-select{width:100%;border:1px solid #DBE7F2;border-radius:10px;padding:11px 12px;font-family:inherit;font-size:15px;color:var(--ink,#1F2933);background:#fff;}
.calc-disabled{opacity:.4;pointer-events:none;}
.calc-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--grey,#5B6B7B);margin-top:12px;line-height:1.5;}
.calc-check input{margin-top:2px;flex-shrink:0;}

/* Mobile sticky price bar: button style (the bar sits outside .fib-azure, so it needs its own) */
.calc-stickybar .btn{display:inline-block;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:700;font-size:14px;line-height:1;padding:12px 20px;border-radius:10px;border:none;cursor:pointer;background:#0B5CAD;color:#fff;text-decoration:none;white-space:nowrap;box-shadow:0 4px 12px rgba(11,92,173,.28);}
.calc-stickybar .btn:hover{background:#0A4F96;}
.calc-stickybar .btn:active{transform:translateY(1px);}

@media(max-width:640px){.calc-anchors{grid-template-columns:1fr;}}

/* ---- azure-compliance-meten/index.php ---- */
/* Spoke page styling, self-contained */
.fw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 10px;}
.fw{background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:20px 22px;}
.fw h3{margin:0 0 2px;font-size:18px;color:var(--navy,#0A2540);}
.fw .fw-sub{display:block;font-size:13px;font-weight:700;color:var(--blue,#0B5CAD);margin-bottom:10px;}
.fw p{margin:0;font-size:14.5px;line-height:1.6;color:var(--grey,#5B6B7B);}

.scope2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 10px;}
.scope2-col{background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:20px 22px;}
.scope2-col h3{margin:0 0 12px;font-size:16px;display:flex;align-items:center;gap:9px;}
.scope2-col ul{margin:0;padding-left:20px;}
.scope2-col li{margin-bottom:9px;font-size:14.5px;line-height:1.55;color:var(--grey,#5B6B7B);}
.scope2-col.is-yes{border-color:#CFE7DC;} .scope2-col.is-yes h3{color:var(--green-text);}
.scope2-col.is-no{border-color:#F3CFCF;} .scope2-col.is-no h3{color:#B5453F;}
.s2-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:800;flex-shrink:0;}
.scope2-col.is-yes .s2-mark{background:#E8F7F1;color:var(--green-text);}
.scope2-col.is-no .s2-mark{background:#FDECEC;color:#B5453F;}


.note-box.is-amber{background:#FFFCF4;border-left-color:#9B6E14;}

@media(max-width:720px){.fw-grid{grid-template-columns:1fr;}.scope2{grid-template-columns:1fr;}}

/* ---- azure-disaster-recovery-voorwaarden/index.php ---- */
/* Spoke page styling, self-contained */
.dr-cond{display:grid;gap:16px;margin:0 0 10px;}
.dr-c{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:20px 22px;}
.dr-c .dr-n{width:40px;height:40px;border-radius:50%;background:var(--blue,#0B5CAD);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;}
.dr-c h3{margin:0 0 6px;font-size:17px;color:var(--navy,#0A2540);}
.dr-c p{margin:0;font-size:15px;line-height:1.6;color:var(--grey,#5B6B7B);}

.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 10px;}
.vs-col{background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:20px 22px;}
.vs-col h3{margin:0 0 4px;font-size:17px;color:var(--navy,#0A2540);}
.vs-col .vs-sub{display:block;font-size:13px;font-weight:700;margin-bottom:12px;}
.vs-col ul{margin:0;padding-left:20px;}
.vs-col li{margin-bottom:8px;font-size:14.5px;line-height:1.55;color:var(--grey,#5B6B7B);}
.vs-col.is-bu{border-color:#CFE7DC;} .vs-col.is-bu .vs-sub{color:var(--green-text);}
.vs-col.is-dr{border-color:#CFE0EE;} .vs-col.is-dr .vs-sub{color:var(--blue,#0B5CAD);}


@media(max-width:720px){.vs{grid-template-columns:1fr;}}

/* ---- azure-infrastructure-as-code/index.php ---- */
/* Page-specific additions */
.iac-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 14px;}
.iac-step{background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:22px;}
.iac-step .n{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--blue,#0B5CAD);color:#fff;font-weight:800;margin-bottom:12px;}
.iac-step h3{margin:0 0 7px;font-size:17px;color:var(--navy,#0A2540);}
.iac-step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--grey,#5B6B7B);}
.iac-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 14px;}
.iac-box{background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:20px 22px;}
.iac-box h3{margin:0 0 4px;color:var(--navy,#0A2540);font-size:17px;}
.iac-box .sub{display:block;margin-bottom:12px;font-size:13px;font-weight:700;color:var(--blue,#0B5CAD);}
.iac-box ul{margin:0;padding-left:20px;}.iac-box li{margin-bottom:8px;font-size:14.5px;line-height:1.55;color:var(--grey,#5B6B7B);}
.iac-box.is-green{border-color:#CFE7DC;}.iac-box.is-green .sub{color:var(--green-text);}
@media(max-width:820px){.iac-flow,.iac-two{grid-template-columns:1fr;}}

/* ---- azure-kostenoptimalisatie-aanpak/index.php ---- */
/* Spoke page styling, self-contained */
.ko-steps{display:grid;gap:16px;margin:0 0 10px;}
.ko-s{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:20px 22px;}
.ko-s .ko-n{width:40px;height:40px;border-radius:50%;background:var(--blue,#0B5CAD);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;}
.ko-s h3{margin:0 0 6px;font-size:17px;color:var(--navy,#0A2540);}
.ko-s p{margin:0;font-size:15px;line-height:1.6;color:var(--grey,#5B6B7B);}

.ko-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 10px;}
.ko-col{background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:20px 22px;}
.ko-col h3{margin:0 0 4px;font-size:17px;color:var(--navy,#0A2540);}
.ko-col .ko-sub{display:block;font-size:13px;font-weight:700;margin-bottom:12px;}
.ko-col ul{margin:0;padding-left:20px;}
.ko-col li{margin-bottom:8px;font-size:14.5px;line-height:1.55;color:var(--grey,#5B6B7B);}
.ko-col.is-once{border-color:#CFE0EE;} .ko-col.is-once .ko-sub{color:var(--blue,#0B5CAD);}
.ko-col.is-cont{border-color:#CFE7DC;} .ko-col.is-cont .ko-sub{color:var(--green-text);}

@media(max-width:720px){.ko-two{grid-template-columns:1fr;}}

/* ---- azure-nulmeting/index.php ---- */
/* Azure-nulmeting - self-contained styling */
.nm-steps{counter-reset:nmstep;display:grid;gap:14px;margin:0 0 8px;}
.nm-step{position:relative;background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:18px 20px 18px 62px;}
.nm-step::before{counter-increment:nmstep;content:counter(nmstep);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:50%;background:var(--blue,#0B5CAD);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;}
.nm-step h3{margin:0 0 6px;font-size:16px;color:var(--navy,#0A2540);}
.nm-step p{margin:0;font-size:15px;line-height:1.6;color:var(--grey,#5B6B7B);}
.nm-step .nm-when{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:var(--blue,#0B5CAD);background:#EAF4FB;padding:3px 10px;border-radius:100px;}

.nm-deliver{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 10px;}
.nm-deliver-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #E8EEF4;border-radius:12px;padding:16px 18px;}
.nm-deliver-item .nm-chk{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:#E8F7F1;color:var(--green,#1CA97C);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;}
.nm-deliver-item b{display:block;color:var(--navy,#0A2540);font-size:15px;margin-bottom:3px;}
.nm-deliver-item span{font-size:14px;color:var(--grey,#5B6B7B);line-height:1.55;}

.nm-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 0;}
.nm-fact{background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:18px;text-align:center;}
.nm-fact .nm-big{display:block;font-size:24px;font-weight:800;color:var(--blue,#0B5CAD);margin-bottom:4px;}
.nm-fact span.nm-lbl{font-size:14px;color:var(--grey,#5B6B7B);line-height:1.5;}

/* Rollen-tabel */

@media(max-width:720px){.nm-deliver{grid-template-columns:1fr;}.nm-facts{grid-template-columns:1fr;}}

/* ---- serviceniveaus/index.php ---- */
/* Serviceniveaus - self-contained table styling (layer 3 pages) */

.yesno{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 8px;}
.yesno-col{background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:18px 20px;}
.yesno-col h3{margin:0 0 12px;font-size:16px;display:flex;align-items:center;gap:9px;}
.yesno-col ul{margin:0;padding-left:20px;}
.yesno-col li{margin-bottom:9px;line-height:1.55;font-size:15px;}
.yesno-col.is-yes{border-color:#F3CFCF;}
.yesno-col.is-yes h3{color:#B5453F;}
.yesno-col.is-no{border-color:#CFE7DC;}
.yesno-col.is-no h3{color:var(--green-text);}
.yn-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:800;flex-shrink:0;}
.yesno-col.is-yes .yn-mark{background:#FDECEC;color:#B5453F;}
.yesno-col.is-no .yn-mark{background:#E8F7F1;color:var(--green-text);}

@media(max-width:720px){.yesno{grid-template-columns:1fr;}}

/* ---- verantwoordelijkheden/index.php ---- */
/* Verantwoordelijkheden - self-contained styling (layer 3) */
.rv-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 10px;}
.rv-level{background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:18px;}
.rv-level .rv-dot{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-weight:800;font-size:14px;margin-bottom:10px;}
.rv-level h3{margin:0 0 6px;font-size:16px;color:var(--navy,#0A2540);}
.rv-level p{margin:0;font-size:14px;line-height:1.55;color:var(--grey,#5B6B7B);}
.rv-level.l1 .rv-dot{background:#E8F7F1;color:#1CA97C;}
.rv-level.l2 .rv-dot{background:#EAF4FB;color:#0B5CAD;}
.rv-level.l3 .rv-dot{background:#FFF8E6;color:#9B6E14;}
.rv-level.l4 .rv-dot{background:#EDEBFF;color:#5B4FBF;}

.rv-table{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 18px;font-size:15px;background:#fff;border:1px solid #E8EEF4;border-radius:14px;overflow:hidden;}
.rv-table th,.rv-table td{padding:12px 14px;border-bottom:1px solid #EDF2F7;}
.rv-table thead th{background:var(--navy,#0A2540);color:#fff;font-weight:700;font-size:13px;text-align:center;}
.rv-table thead th:first-child{text-align:left;}
.rv-table tbody tr:last-child td{border-bottom:none;}
.rv-table td.rv-what{font-weight:600;color:var(--navy,#0A2540);font-size:14.5px;}
.rv-table td.rv-mark{text-align:center;width:88px;font-weight:800;font-size:15px;}
.rv-yes-1{color:#1CA97C;} .rv-yes-2{color:#0B5CAD;} .rv-yes-3{color:#9B6E14;} .rv-yes-4{color:#5B4FBF;}
.rv-no{color:#CBD5DF;}
.rv-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

.who{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 10px;}
.who-col{background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:20px;}
.who-col h3{margin:0 0 4px;font-size:17px;color:var(--navy,#0A2540);}
.who-col .who-sub{display:block;font-size:13px;color:var(--blue,#0B5CAD);font-weight:700;margin-bottom:12px;}
.who-col ul{margin:0;padding-left:20px;}
.who-col li{margin-bottom:8px;font-size:14.5px;line-height:1.55;}

@media(max-width:900px){.rv-levels{grid-template-columns:repeat(2,1fr);}.who{grid-template-columns:1fr;}}
@media(max-width:560px){.rv-levels{grid-template-columns:1fr;}}

/* ---- wat-valt-onder-azure-beheer/index.php ---- */
/* Wat valt onder Azure-beheer - self-contained styling (layer 3) */
.sc-layer{background:#fff;border:1px solid #E8EEF4;border-radius:14px;padding:0;margin:0 0 18px;overflow:hidden;}
.sc-layer-head{padding:18px 22px;border-bottom:1px solid #EDF2F7;}
.sc-layer-head h3{margin:0 0 4px;font-size:18px;color:var(--navy,#0A2540);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sc-layer-head p{margin:0;font-size:14.5px;color:var(--grey,#5B6B7B);}
.sc-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;padding:4px 12px;border-radius:100px;}
.sc-layer.is-in .sc-layer-head{background:#F4FBF8;}
.sc-layer.is-in .sc-badge{background:#E8F7F1;color:var(--green-text);}
.sc-layer.is-edge .sc-layer-head{background:#FFFCF4;}
.sc-layer.is-edge .sc-badge{background:#FFF8E6;color:var(--amber-text);}
.sc-layer.is-out .sc-layer-head{background:#FDF7F7;}
.sc-layer.is-out .sc-badge{background:#FDECEC;color:#B5453F;}
.sc-row{display:grid;grid-template-columns:230px 1fr;gap:16px;padding:13px 22px;border-bottom:1px solid #F3F6F9;font-size:14.5px;line-height:1.55;}
.sc-row:last-child{border-bottom:none;}
.sc-row b{color:var(--navy,#0A2540);font-weight:650;}
.sc-row span{color:var(--grey,#5B6B7B);}

.sc-refer{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 10px;}
.sc-refer-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #E8EEF4;border-radius:12px;padding:16px 18px;}
.sc-refer-item .sc-arrow{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:#EAF4FB;color:var(--blue,#0B5CAD);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;}
.sc-refer-item b{display:block;color:var(--navy,#0A2540);font-size:15px;margin-bottom:3px;}
.sc-refer-item span{font-size:14px;color:var(--grey,#5B6B7B);line-height:1.55;}

@media(max-width:720px){.sc-row{grid-template-columns:1fr;gap:4px;}.sc-refer{grid-template-columns:1fr;}}

/* Scroll wrappers. Removed during the 27-09 dead-CSS cleanup because
   the tables they wrapped had been converted to definition rows, but
   the wrappers themselves are still in the markup on five pages. One
   shared rule instead of five identical ones. */
.fib-azure .rr-scroll,
.fib-azure .cmp-scroll,
.fib-azure .pr-scroll,
.fib-azure .role-scroll,
.fib-azure .lvl-scroll,
.fib-azure .rv-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}


/* ============================================================
   38. RESPONSIVE PATTERNS

   38.1 Definition rows  - replace multi-column tables on mobile
   38.2 Swipe row        - horizontal card row under 760px
   38.3 Stat band        - dark numbers band between white sections
   38.4 Accent grid      - one large cell, several small ones
   ============================================================ */
/* ---- 38.1 DEFINITION ROWS -------------------------------------
   A three-column table needs roughly 560px to stay readable. On a
   phone that means swiping per row, losing the first column exactly
   when you reach the third. These rows look like a table on desktop
   and stack with the column label above each value below 720px.

   Not a <table> with data-label: a flipped table still announces
   itself as a table to a screen reader, with a header row that is
   visually gone. A grid of rows has no such mismatch.

   Real <table> is kept where columns are compared against each other
   (calc-ctable) - there the comparison IS the message. */
.fib-azure .dl-set{border:1px solid var(--cardborder);border-radius:14px;
  overflow:hidden;background:#fff;margin:0 0 18px;}
.fib-azure .dl-set__head{display:grid;background:var(--navy);color:#fff;
  font-size:13.5px;font-weight:700;padding:12px 18px;gap:16px;}
.fib-azure .dl-row{display:grid;gap:16px;padding:14px 18px;
  border-top:1px solid #EDF2F7;font-size:15px;line-height:1.55;}
.fib-azure .dl-row:first-of-type{border-top:none;}
.fib-azure .dl-row--highlight{background:#F4FBF8;}
.fib-azure .dl-row__term{font-weight:700;color:var(--navy);}
.fib-azure .dl-row__term--mono{font-family:Consolas,Monaco,monospace;font-size:14px;}
.fib-azure .dl-row__val{color:var(--navy);}
.fib-azure .dl-row__note{color:var(--grey);}
.fib-azure .dl-row__amt{font-weight:700;color:var(--blue);white-space:nowrap;}
/* Hidden on desktop; carries the column heading on mobile. */
.fib-azure .dl-row__label{display:none;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--grey);margin-bottom:2px;}

.fib-azure .dl-set--3col .dl-set__head,
.fib-azure .dl-set--3col .dl-row{grid-template-columns:180px 1fr 1.3fr;}
.fib-azure .dl-set--3even .dl-set__head,
.fib-azure .dl-set--3even .dl-row{grid-template-columns:1fr 1fr 1fr;}
.fib-azure .dl-set--3amt .dl-set__head,
.fib-azure .dl-set--3amt .dl-row{grid-template-columns:190px 1fr 200px;}
.fib-azure .dl-set--4col .dl-set__head,
.fib-azure .dl-set--4col .dl-row{grid-template-columns:150px 1.4fr 1.4fr 130px;}
.fib-azure .dl-set--2col .dl-set__head,
.fib-azure .dl-set--2col .dl-row{grid-template-columns:220px 1fr;}

@media(max-width:720px){
  .fib-azure .dl-set__head{display:none;}
  .fib-azure .dl-set--3col .dl-row,
  .fib-azure .dl-set--3even .dl-row,
  .fib-azure .dl-set--3amt .dl-row,
  .fib-azure .dl-set--4col .dl-row,
  .fib-azure .dl-set--2col .dl-row{grid-template-columns:1fr;gap:10px;padding:18px;}
  .fib-azure .dl-row__label{display:block;}
  .fib-azure .dl-row__term{font-size:16.5px;}
}

/* Responsibility matrix: four columns of dots do not survive stacking,
   so on mobile the dots are replaced by named chips listing only the
   levels that apply. Desktop keeps the scannable grid. */
.fib-azure .rv-chips{display:none;flex-wrap:wrap;gap:6px;}
.fib-azure .rv-chip{display:inline-block;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:100px;}
.fib-azure .rv-chip--1{background:#E8F7F1;color:var(--green-text);}
.fib-azure .rv-chip--2{background:#EAF4FB;color:#0B5CAD;}
.fib-azure .rv-chip--3{background:#FFF8E6;color:var(--amber-text);}
.fib-azure .rv-chip--4{background:#EDEBFF;color:#5B4FBF;}
.fib-azure .rv-chip--none{background:#F0F3F7;color:var(--grey-text);}
@media(max-width:720px){
  .fib-azure th.rv-marks,
  .fib-azure td.rv-marks{display:none;}
  .fib-azure .rv-chips{display:flex;}
}

/* ---- 38.2 SWIPE ROW -------------------------------------------
   Same cards, different axis. Nothing is hidden: every card stays in
   the DOM and remains readable to search engines and screen readers,
   only the reading direction changes.

   Card width is 78% on purpose: the next card stays partly visible,
   which is what tells the visitor there is more to the right. A
   full-width card would look like the end of the list. */
.fib-azure .swipe-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fib-azure .swipe-row--4{grid-template-columns:repeat(4,1fr);}
.fib-azure .swipe-row--5{grid-template-columns:repeat(5,1fr);gap:20px;}
.fib-azure .swipe-hint{display:none;}

@media(max-width:760px){
  .fib-azure .swipe-row,
  .fib-azure .swipe-row--4,
  .fib-azure .swipe-row--5{display:flex;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* Keep cards and scrollbar inside the content padding. */
    padding:4px 0 16px;margin:0;scrollbar-width:thin;
    scrollbar-color:#CFE0EE transparent;}
  .fib-azure .swipe-row > *,
  .fib-azure .swipe-row--4 > *,
  .fib-azure .swipe-row--5 > *{flex:0 0 78%;scroll-snap-align:center;}

  /* A visible scrollbar is the clearest affordance there is, so it is
     styled rather than hidden. WebKit hides it by default on touch,
     so it is forced back on. */
  .fib-azure .swipe-row::-webkit-scrollbar,
  .fib-azure .swipe-row--4::-webkit-scrollbar,
  .fib-azure .swipe-row--5::-webkit-scrollbar{height:5px;-webkit-appearance:none;}
  .fib-azure .swipe-row::-webkit-scrollbar-track,
  .fib-azure .swipe-row--4::-webkit-scrollbar-track,
  .fib-azure .swipe-row--5::-webkit-scrollbar-track{background:#EDF2F7;border-radius:3px;}
  .fib-azure .swipe-row::-webkit-scrollbar-thumb,
  .fib-azure .swipe-row--4::-webkit-scrollbar-thumb,
  .fib-azure .swipe-row--5::-webkit-scrollbar-thumb{background:#CFE0EE;border-radius:3px;}

  /* Secondary cue for anyone who misses the scrollbar. */
  .fib-azure .swipe-hint{display:flex;align-items:center;gap:7px;
    font-size:13px;color:var(--grey);margin:0 0 10px;}
  .fib-azure .swipe-hint::after{content:"";width:15px;height:15px;flex-shrink:0;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    animation:fib-nudge 1.6s ease-in-out infinite;}
}
@keyframes fib-nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}
@media(prefers-reduced-motion:reduce){.fib-azure .swipe-hint::after{animation:none;}}

/* ---- 38.3 STAT BAND ------------------------------------------- */
.fib-azure .statband{background:var(--navy);border-radius:20px;padding:36px 32px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.fib-azure .statband--3{grid-template-columns:repeat(3,1fr);}
.fib-azure .statband__i{text-align:center;}
.fib-azure .statband__n{font-size:38px;font-weight:800;color:var(--cyan);
  letter-spacing:-1.2px;line-height:1;}
.fib-azure .statband__l{font-size:14px;color:#C7D3E0;margin-top:8px;line-height:1.45;}
@media(max-width:760px){
  .fib-azure .statband,
  .fib-azure .statband--3{grid-template-columns:1fr 1fr;gap:26px 16px;padding:28px 20px;}
  .fib-azure .statband__n{font-size:32px;}
}

/* ---- 38.4 ACCENT GRID ----------------------------------------- */
.fib-azure .bento{display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(150px,auto);gap:18px;}
.fib-azure .bento__cell{background:#fff;border:1px solid var(--cardborder);
  border-radius:18px;padding:26px;box-shadow:0 4px 14px rgba(10,37,64,.04);
  display:flex;flex-direction:column;justify-content:flex-end;}
.fib-azure .bento__cell h3{font-size:17px;}
.fib-azure .bento__cell p{font-size:14.5px;color:var(--grey);margin-top:8px;}
.fib-azure .bento__cell .ico{width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,#EAF4FB,#D5EBFA);display:flex;align-items:center;
  justify-content:center;color:var(--blue);padding:11px;margin-bottom:14px;}
.fib-azure .bento__cell.is-lead{grid-column:span 2;grid-row:span 2;
  background:linear-gradient(135deg,#EAF4FB,#F8FBFE);border-color:#D9E8F5;
  justify-content:center;}
.fib-azure .bento__cell.is-lead h3{font-size:26px;letter-spacing:-.4px;}
.fib-azure .bento__cell.is-lead p{font-size:16px;max-width:42ch;}
.fib-azure .bento__cell.is-dark{background:var(--navy);border-color:var(--navy);}
.fib-azure .bento__cell.is-dark h3{color:#fff;}
.fib-azure .bento__cell.is-dark p{color:#C7D3E0;}
.fib-azure .bento__cell.is-dark .ico{background:rgba(255,255,255,.1);color:#fff;}
.fib-azure .bento__big{font-size:34px;font-weight:800;color:var(--blue);
  letter-spacing:-1px;line-height:1;}
.fib-azure .bento__cell.is-dark .bento__big{color:var(--cyan);}
@media(max-width:820px){
  .fib-azure .bento{grid-template-columns:1fr 1fr;}
  .fib-azure .bento__cell.is-lead{grid-column:span 2;grid-row:span 1;}
}
@media(max-width:560px){
  .fib-azure .bento{grid-template-columns:1fr;}
  .fib-azure .bento__cell.is-lead{grid-column:span 1;}
}

/* ---- 38.5 DIAGRAM FIGURE --------------------------------------
   Full content width on desktop, so the diagram text reads at body
   size. Below 760px a <picture> source swaps in a portrait version;
   it is capped at 460px, otherwise a tablet in portrait would stretch
   it to twice a screen height. .figure-block is the same thing on the
   homepage. */
.fib-azure .diagram,
.fib-azure .figure-block{margin:0 auto 10px;max-width:none;width:100%;}
.fib-azure .diagram picture,
.fib-azure .figure-block picture{display:block;}
.fib-azure .diagram img,
.fib-azure .figure-block img{display:block;width:100%;height:auto;border-radius:14px;}
.fib-azure .diagram figcaption,
.fib-azure .figure-block figcaption{margin-top:12px;font-size:14px;color:var(--grey);
  text-align:center;line-height:1.6;}
@media(max-width:760px){
  .fib-azure .diagram,
  .fib-azure .figure-block{max-width:460px;}
}

/* ---- 38.6 TARIFF GROUPS (/tarieven/) ---------------------------
   Grouped per service instead of one flat table. The service name
   above the group gives every line its context, and a small group
   leaves room for a label per amount: standard, indicative, or only
   after intake. Not a table, so the mobile scroll problem from 38.1
   does not arise here at all. */
.fib-azure .pr-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.fib-azure .pr-group{background:#fff;border:1px solid var(--cardborder);border-radius:16px;
  padding:24px 24px 18px;box-shadow:0 4px 14px rgba(10,37,64,.04);
  display:flex;flex-direction:column;}
.fib-azure .pr-group__top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:4px;}
.fib-azure .pr-group h3{font-size:18px;}
.fib-azure .pr-group__from{font-size:13px;font-weight:700;color:var(--blue);
  white-space:nowrap;padding-top:3px;}
.fib-azure .pr-group__sub{font-size:13.5px;color:var(--grey);margin-bottom:16px;line-height:1.5;}
.fib-azure .pr-line{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:11px 0;border-top:1px solid #F1F5F9;}
.fib-azure .pr-line:first-of-type{border-top:none;}
.fib-azure .pr-line__label{font-size:14.5px;color:var(--navy);font-weight:500;}
.fib-azure .pr-line__label small{display:block;font-weight:400;font-size:12.5px;
  color:var(--grey);margin-top:2px;line-height:1.45;}
.fib-azure .pr-line__amt{font-size:15.5px;font-weight:800;color:var(--navy);
  white-space:nowrap;text-align:right;}
.fib-azure .pr-line__amt small{display:block;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;margin-top:3px;}
.fib-azure .amt-fixed small{color:var(--green-text);}
.fib-azure .amt-ind small{color:var(--amber-text);}
.fib-azure .amt-free small{color:var(--blue);}
.fib-azure .pr-group__foot{margin-top:auto;padding-top:14px;font-size:13.5px;}
.fib-azure .pr-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;
  font-size:13.5px;color:var(--grey);}
.fib-azure .pr-legend b{font-size:11px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;margin-right:6px;}
.fib-azure .pr-legend .k-f b{color:var(--green-text);}
.fib-azure .pr-legend .k-i b{color:var(--amber-text);}
.fib-azure .pr-legend .k-g b{color:var(--blue);}
@media(max-width:820px){.fib-azure .pr-groups{grid-template-columns:1fr;}}

/* Link paragraph at the bottom of a bento cell. */
.fib-azure .bento__cell p:last-child{margin-top:auto;padding-top:10px;}


/* ============================================================
   39. HOMEPAGE ROUTER

   The homepage serves three audiences at once. This block gives all
   three a route inside the first screen without levelling the
   hierarchy: the Azure card is wider, comes first, and is the only
   one with a filled background.
   ============================================================ */
.fib-azure .router{background:#fff;padding-top:64px;padding-bottom:64px;}
.fib-azure .router .sec-head{margin-bottom:34px;}

.fib-azure .router-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:20px;}

.fib-azure .router-card{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--cardborder);border-radius:18px;padding:28px;
  text-decoration:none;color:inherit;transition:.25s;
  box-shadow:0 4px 14px rgba(10,37,64,.04);}
.fib-azure .router-card:hover{transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(11,92,173,.12);text-decoration:none;}

/* The primary card carries the accent fill. Nothing says it is more
   important; it simply looks it. */
.fib-azure .router-card.is-primary{background:linear-gradient(135deg,#EAF4FB,#F8FBFE);
  border-color:#D9E8F5;}
.fib-azure .router-card.is-primary h3{font-size:24px;letter-spacing:-.3px;}

.fib-azure .router-card__kicker{font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue);margin-bottom:8px;}
.fib-azure .router-card h3{font-size:20px;color:var(--navy);}
.fib-azure .router-card p{font-size:14.5px;color:var(--grey);margin-top:8px;flex-grow:1;}
.fib-azure .router-card__more{margin-top:16px;color:var(--blue);font-weight:600;font-size:15px;}
.fib-azure .router-card:hover .router-card__more{color:var(--cyan);}

/* Trust signals as one quiet line instead of a four-column strip.
   Says the same in a fraction of the height. */
.fib-azure .router-note{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:8px;margin-top:28px;font-size:13.5px;color:var(--grey);
  text-align:center;line-height:1.6;}
.fib-azure .router-note__ico{width:20px;height:20px;flex-shrink:0;color:var(--navy);}

@media(max-width:900px){
  .fib-azure .router-grid{grid-template-columns:1fr;}
  .fib-azure .router-card.is-primary h3{font-size:21px;}
}

/* The primary card holds two actions, so it is a <div> rather than an
   <a>; the hover lift has to be driven by the card itself. */
.fib-azure .router-card__actions{display:flex;flex-wrap:wrap;align-items:center;
  gap:14px;margin-top:18px;}
.fib-azure .router-card__actions .router-card__more{margin-top:0;}

/* The card is no longer a link, so the hover lift has to be driven
   by the card itself rather than by the anchor. */
.fib-azure .router-card.is-primary:hover{transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(11,92,173,.12);}

@media(max-width:480px){
  .fib-azure .router-card__actions{flex-direction:column;align-items:stretch;}
  .fib-azure .router-card__actions .btn{text-align:center;}
}

/* Three related cards (homepage). The default grid is two columns
   capped at 840px, which suits the spoke pages. */
.fib-azure .related-grid--3{grid-template-columns:repeat(3,1fr);max-width:none;}
@media(max-width:860px){.fib-azure .related-grid--3{grid-template-columns:1fr;}}


/* ============================================================
   40. LEGAL PAGES (/privacyverklaring/)

   Running text, so lists get their bullets back: section 2 resets
   them for the card layouts.
   ============================================================ */
.fib-azure .legal-page{padding-top:20px;}
.fib-azure .legal{max-width:780px;}
.fib-azure .legal h2{font-size:26px;margin:44px 0 12px;scroll-margin-top:96px;}
.fib-azure .legal h3{font-size:18px;margin:26px 0 8px;}
.fib-azure .legal p{margin:0 0 14px;font-size:16.5px;color:#3F5164;}
.fib-azure .legal ul{list-style:disc;padding-left:22px;margin:0 0 16px;color:#3F5164;}
.fib-azure .legal li{margin-bottom:6px;font-size:16.5px;}
.fib-azure .legal ol{list-style:decimal;padding-left:22px;margin:0 0 16px;color:#3F5164;}
.fib-azure .legal a{color:var(--blue);font-weight:600;}
.fib-azure .legal a:hover{color:var(--cyan);text-decoration:underline;}
.fib-azure .legal .dl-set{margin:14px 0 22px;}
.fib-azure .legal .dl-provider{display:block;font-size:13px;font-weight:400;color:var(--grey);margin-top:2px;}
.fib-azure .legal-toc{background:var(--mist);border:1px solid var(--cardborder);
  border-radius:14px;padding:20px 24px 14px;}
.fib-azure .legal-toc ol{list-style:decimal;padding-left:20px;columns:2;column-gap:32px;}
.fib-azure .legal-toc li{margin-bottom:6px;font-size:15px;}
.fib-azure .legal-meta{font-size:14px;color:var(--grey);}
@media(max-width:640px){
  .fib-azure .legal-toc ol{columns:1;}
  .fib-azure .legal h2{font-size:22px;}
}

/* ============================================================
   41. PLAN COMPARISON (websitebeheer)
   Plan cards on /websitebeheer/ get a short feature list; the full
   comparison on /wat-valt-onder-websitebeheer/ is a real table, because
   there the side-by-side reading IS the message (see section 38). Cells are
   kept to about three words so the four columns fit a phone without
   horizontal scrolling; explanations sit under the row title.
   ============================================================ */
.fib-azure .pricing-card.has-tiers p{flex-grow:0;}
.fib-azure .tier-list{list-style:none;margin:16px 0 0;padding:0;flex-grow:1;}
.fib-azure .tier-list li{position:relative;padding-left:24px;margin-bottom:9px;font-size:14.5px;line-height:1.45;color:var(--ink);}
.fib-azure .tier-list li::before{content:"\2713";position:absolute;left:0;top:0;font-weight:700;color:var(--green-text);}
.fib-azure .tier-list li.plus::before{content:"+";color:var(--blue);font-size:17px;line-height:1.2;}

.fib-azure .tier-wrap{background:#fff;border:1px solid var(--cardborder);border-radius:14px;overflow-x:auto;}
.fib-azure .tier-table{width:100%;border-collapse:collapse;}
.fib-azure .tier-table th,.fib-azure .tier-table td{padding:14px 16px;border-bottom:1px solid #EEF3F8;
  text-align:left;vertical-align:top;font-size:14.5px;}
.fib-azure .tier-table thead th{background:var(--navy);color:#fff;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;text-align:center;vertical-align:bottom;}
.fib-azure .tier-table thead th:first-child{text-align:left;}
.fib-azure .tier-table thead th small{display:block;margin-top:3px;font-size:13px;font-weight:600;
  text-transform:none;letter-spacing:0;color:#BFD3E6;}
.fib-azure .tier-table thead th.is-featured{background:var(--blue);}
.fib-azure .tier-table thead th.is-featured small{color:#DCEBFA;}
.fib-azure .tier-table tbody th{font-weight:600;color:var(--navy);}
.fib-azure .tier-table tbody th span{display:block;margin-top:4px;font-weight:400;font-size:13.5px;
  line-height:1.5;color:var(--grey-text);}
.fib-azure .tier-table td{width:140px;text-align:center;font-weight:600;font-size:13.5px;color:var(--navy);}
.fib-azure .tier-table td.is-featured{background:#F7FBFF;}
.fib-azure .tier-table .tier-cat th{padding:10px 16px;background:#F3F8FD;color:var(--blue);font-size:12.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.fib-azure .tier-table tbody tr:last-child th,.fib-azure .tier-table tbody tr:last-child td{border-bottom:none;}
.fib-azure .tier-yes{color:var(--green-text);font-size:18px;line-height:1;}
.fib-azure .tier-no{color:#9AA7B4;font-weight:400;}
.fib-azure .tier-short{display:none;}
@media(max-width:720px){
  .fib-azure .tier-table{table-layout:fixed;}
  .fib-azure .tier-table th,.fib-azure .tier-table td{padding:10px 5px;font-size:13px;}
  .fib-azure .tier-table thead th:first-child,.fib-azure .tier-table tbody th{width:40%;padding-left:12px;}
  .fib-azure .tier-table thead th{font-size:11px;text-transform:none;letter-spacing:0;}
  .fib-azure .tier-table thead th small{font-size:11px;}
  .fib-azure .tier-table td{width:auto;font-size:11.5px;line-height:1.35;overflow-wrap:anywhere;}
  .fib-azure .tier-table tbody th span{font-size:12px;}
  .fib-azure .tier-full{display:none;}
  .fib-azure .tier-short{display:inline;}
}

/* ============================================================
   42. HERO, INTRO AND SECTION VARIANTS
   Modifier classes on the existing markup, so a page changes look by
   adding one class and nothing else. Rule of use: pages that link to
   each other get different variants, so moving between them is visible.
   ============================================================ */

/* ---- 42.1 Hero ------------------------------------------------ */
.fib-azure .hero--dark{background:
    radial-gradient(55% 70% at 88% 0%,rgba(24,180,233,.24),transparent 60%),
    linear-gradient(160deg,#0A2540 0%,#0E3460 100%);}
.fib-azure .hero--dark h1{color:#fff;}
.fib-azure .hero--dark .sub{color:#C7D3E0;}
.fib-azure .hero--dark .hero-trust{color:#9FB3C8;}
.fib-azure .hero--dark .hero-trust a{color:#fff;}
.fib-azure .hero--dark .pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);
  color:#fff;box-shadow:none;}
.fib-azure .hero--dark .glass{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
  box-shadow:none;}
.fib-azure .hero--dark .glass .row{border-color:rgba(255,255,255,.10);}
.fib-azure .hero--dark .glass .row b{color:#fff;}
.fib-azure .hero--dark .glass .chk{background:rgba(28,169,124,.20);color:#6EDDB3;}
.fib-azure .hero--dark .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}
.fib-azure .hero--dark .btn-ghost:hover{background:#fff;color:var(--navy);}

.fib-azure .hero--reverse .hero-grid{flex-direction:row-reverse;}

.fib-azure .hero--center .hero-grid{flex-direction:column;align-items:center;text-align:center;gap:34px;}
.fib-azure .hero--center .hero-left{flex:none;max-width:820px;min-width:0;}
.fib-azure .hero--center .sub{margin-left:auto;margin-right:auto;max-width:640px;}
.fib-azure .hero--center .hero-btns{justify-content:center;}
.fib-azure .hero--center .hero-right{flex:none;width:100%;max-width:1000px;min-width:0;}
.fib-azure .hero--center .glass{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  padding:0;background:none;border:none;box-shadow:none;backdrop-filter:none;}
.fib-azure .hero--center .glass .row{border:1px solid #DBE7F2;background:#fff;border-radius:100px;
  padding:8px 18px 8px 8px;box-shadow:0 6px 18px rgba(11,92,173,.06);}
.fib-azure .hero--center .glass .row:last-child{border-bottom:1px solid #DBE7F2;}
.fib-azure .hero--center.hero--dark .glass .row{background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);box-shadow:none;}

@media(max-width:900px){
  .fib-azure .hero--reverse .hero-grid{flex-direction:column;align-items:stretch;}
  .fib-azure .hero--center .glass{justify-content:flex-start;}
  .fib-azure .hero--center .glass .row{width:100%;}
}

/* ---- 42.2 Intro of reference pages ------------------------------
   The reference pages (serviceniveaus, wie doet wat, scope pages)
   start with a short intro instead of a full hero: the reader comes
   from a service page with a question and wants the answer, not a
   second sales pitch. These variants give that intro its own look. */
.fib-azure .calc-intro.intro--tint{padding:80px 0 60px;background:
    radial-gradient(60% 90% at 90% 0%,rgba(24,180,233,.14),transparent 60%),
    linear-gradient(180deg,#EAF4FB 0%,#FFFFFF 100%);}
.fib-azure .calc-intro.intro--dark{padding:80px 0 64px;background:
    radial-gradient(50% 80% at 90% 0%,rgba(24,180,233,.22),transparent 60%),
    linear-gradient(160deg,#0A2540 0%,#0E3460 100%);}
.fib-azure .calc-intro.intro--dark h1{color:#fff;}
.fib-azure .calc-intro.intro--dark .eyebrow{color:var(--cyan);}
.fib-azure .calc-intro.intro--dark p,
.fib-azure .calc-intro.intro--dark .legal-meta{color:#C7D3E0;}
.fib-azure .calc-intro.intro--dark a{color:#fff;}
.fib-azure .calc-intro.intro--left .sec-head{text-align:left;margin-left:0;max-width:780px;
  border-left:4px solid var(--blue);padding-left:26px;}
.fib-azure .calc-intro.intro--dark.intro--left .sec-head{border-left-color:var(--cyan);}
.fib-azure .calc-intro.intro--dark + section,
.fib-azure .calc-intro.intro--tint + section{padding-top:70px;}

/* ---- 42.3 Grid variants ------------------------------------------ */
/* Rows with the icon on the left: reads as a list, not as tiles. */
.fib-azure .prob-grid.is-list,
.fib-azure .feat-grid.is-list{grid-template-columns:repeat(2,1fr);gap:16px;}
.fib-azure .prob-grid.is-list > .prob-card,
.fib-azure .feat-grid.is-list > .feat-card{display:grid;grid-template-columns:50px 1fr;
  column-gap:20px;align-content:start;padding:24px 26px;}
.fib-azure .prob-grid.is-list > .prob-card > .ico,
.fib-azure .feat-grid.is-list > .feat-card > .ico{grid-row:1 / span 6;margin:0;}
.fib-azure .prob-grid.is-list > .prob-card > :not(.ico),
.fib-azure .feat-grid.is-list > .feat-card > :not(.ico){grid-column:2;}
.fib-azure .prob-grid.is-list > :nth-child(odd):last-child,
.fib-azure .feat-grid.is-list > :nth-child(odd):last-child{grid-column:1 / -1;}

/* First card large, the rest around it. Use with three or six cards. */
.fib-azure .feat-grid.is-lead > :first-child{grid-column:span 2;grid-row:span 2;
  background:linear-gradient(135deg,#EAF4FB,#F8FBFE);border-color:#D9E8F5;
  display:flex;flex-direction:column;justify-content:center;padding:38px;}
.fib-azure .feat-grid.is-lead > :first-child h3{font-size:24px;letter-spacing:-.3px;}
.fib-azure .feat-grid.is-lead > :first-child p{font-size:16px;max-width:46ch;}

/* Numbered cards as a vertical timeline. */
.fib-azure .wa-grid.is-timeline{display:block;max-width:820px;margin:0 auto;}
.fib-azure .wa-grid.is-timeline > .wa-card{display:grid;grid-template-columns:38px 1fr;
  column-gap:22px;background:none;border:none;border-radius:0;padding:0 0 30px;position:relative;}
.fib-azure .wa-grid.is-timeline > .wa-card > .n{grid-row:1 / span 4;margin:0;position:relative;z-index:1;}
.fib-azure .wa-grid.is-timeline > .wa-card > :not(.n){grid-column:2;}
.fib-azure .wa-grid.is-timeline > .wa-card::before{content:"";position:absolute;left:18px;top:40px;
  bottom:2px;width:2px;background:#D5E5F3;}
.fib-azure .wa-grid.is-timeline > .wa-card:last-child{padding-bottom:0;}
.fib-azure .wa-grid.is-timeline > .wa-card:last-child::before{display:none;}
.fib-azure .wa-grid.is-timeline > .wa-card h3{font-size:18px;padding-top:7px;}
.fib-azure .wa-grid.is-timeline > .wa-card p{font-size:15px;}

/* Problem section as a dark band. */
.fib-azure .prob.is-dark{background:linear-gradient(160deg,#0A2540 0%,#0E3460 100%);}
.fib-azure .prob.is-dark .sec-head h2{color:#fff;}
.fib-azure .prob.is-dark .sec-head p{color:#C7D3E0;}
.fib-azure .prob.is-dark .eyebrow{color:var(--cyan);}
.fib-azure .prob.is-dark .prob-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);}
.fib-azure .prob.is-dark .prob-card h3{color:#fff;}
.fib-azure .prob.is-dark .prob-card p{color:#C7D3E0;}
.fib-azure .prob.is-dark .prob-card a{color:#fff;}
.fib-azure .prob.is-dark .prob-card .ico{background:rgba(255,255,255,.10);color:#fff;}
/* v33: keep the coloured left accent on dark (was overwritten by border-color). */
.fib-azure .prob.is-dark .note-box{background:rgba(255,255,255,.06);border-left-color:var(--cyan);color:#C7D3E0;}
.fib-azure .prob.is-dark .note-box.is-red{border-left-color:#F0857F;}
.fib-azure .prob.is-dark .note-box.is-green{border-left-color:#4FD1A5;}
.fib-azure .prob.is-dark .note-box.is-amber{border-left-color:#E8B65A;}
.fib-azure .prob.is-dark .note-box strong{color:#fff;}
/* v33: a note-box straight after a card grid no longer touches the cards. */
.fib-azure .prob-grid + .note-box,
.fib-azure .feat-grid + .note-box,
.fib-azure .wa-grid + .note-box,
.fib-azure .pricing-grid + .note-box{margin-top:24px;}

/* Steps joined by a line. */
.fib-azure .how-grid.is-line > .step{position:relative;}
.fib-azure .how-grid.is-line > .step:not(:last-child)::after{content:"";position:absolute;
  top:21px;left:58px;right:-10px;height:2px;
  background:linear-gradient(90deg,var(--blue),rgba(24,180,233,.25));}

/* Diagram under a callout (Microsoft 365, Entra ID). */
.fib-azure .callout + .diagram{margin-top:44px;}
/* Diagram directly under a section heading. */
.fib-azure .diagram.is-spaced{margin-bottom:40px;}

@media(max-width:980px){
  .fib-azure .wa-grid:has(> :nth-child(3):last-child),
  .fib-azure .wa-grid:has(> :nth-child(4):last-child),
  .fib-azure .wa-grid:has(> :nth-child(6):last-child){grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .fib-azure .wa-grid:has(> :nth-child(3):last-child),
  .fib-azure .wa-grid:has(> :nth-child(4):last-child),
  .fib-azure .wa-grid:has(> :nth-child(6):last-child){grid-template-columns:1fr;}
}
@media(max-width:900px){
  .fib-azure .prob-grid.is-list,
  .fib-azure .feat-grid.is-list{grid-template-columns:1fr;}
  .fib-azure .feat-grid.is-lead > :first-child{grid-column:auto;grid-row:auto;padding:28px;}
  .fib-azure .feat-grid.is-lead > :first-child h3{font-size:20px;}
  /* On the stacked mobile layout, keep the sequence visible as a vertical line. */
  .fib-azure .how-grid.is-line > .step:not(:last-child)::after{
    display:block;top:52px;left:21px;right:auto;bottom:-22px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--blue),rgba(24,180,233,.25));
  }
}
@media(max-width:640px){
  .fib-azure .calc-intro.intro--tint,
  .fib-azure .calc-intro.intro--dark{padding:56px 0 44px;}
  .fib-azure .calc-intro.intro--left .sec-head{padding-left:18px;}
}
@media(max-width:560px){
  .fib-azure .prob-grid.is-list > .prob-card,
  .fib-azure .feat-grid.is-list > .feat-card{grid-template-columns:44px 1fr;column-gap:14px;padding:20px;}
}


/* ============================================================
   43. PHOTOS (hero photo, photo cards, split photo, tick list)
   ------------------------------------------------------------
   Markup comes from fib_photo() in partials/helpers.php. Every
   slot has a fixed aspect ratio and crops with object-fit, so a
   photo of any size fits without a layout shift. A card without
   its photo shows the icon on a pale background instead.
   ============================================================ */
.fib-azure .hero-photo{border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:var(--mist);
  box-shadow:0 24px 60px rgba(10,37,64,.16);}
.fib-azure .hero-photo img,
.fib-azure .photo-card .photo img,
.fib-azure .split-media img{display:block;width:100%;height:100%;object-fit:cover;}

.fib-azure .photo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.fib-azure .photo-card{background:#fff;border:1px solid var(--cardborder);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;}
.fib-azure .photo-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(11,92,173,.10);}
.fib-azure .photo-card .photo{aspect-ratio:3/2;background:var(--mist);overflow:hidden;}
.fib-azure .photo-card .photo.is-empty{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#EAF4FB 0%,var(--mist) 100%);}
.fib-azure .photo-card .photo.is-empty .ico{width:64px;height:64px;}
.fib-azure .photo-card .photo.is-empty .ico .ico-svg{width:64px;height:64px;}
.fib-azure .photo-card .body{padding:24px 26px 28px;}
.fib-azure .photo-card h3{font-size:18px;}
.fib-azure .photo-card p{font-size:15px;color:var(--grey);margin-top:8px;}

.fib-azure .split-media{flex:1 1 40%;min-width:280px;border-radius:22px;overflow:hidden;aspect-ratio:4/3;
  background:#fff;box-shadow:0 20px 50px rgba(10,37,64,.10);}

.fib-azure .tick-list{list-style:none;margin:18px 0 0;padding:0;}
.fib-azure .tick-list li{position:relative;padding:0 0 0 32px;margin:0 0 12px;color:#3F5164;line-height:1.55;}
.fib-azure .tick-list li::before{content:"\2713";position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:50%;background:#E8F7F1;color:var(--green-text);font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;}
.fib-azure .tick-list li b{color:var(--navy);}

@media(max-width:900px){.fib-azure .photo-cards{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.fib-azure .photo-cards{grid-template-columns:1fr;}}


/* ============================================================
   44. PERSON CALLOUT (web developer on websitebeheer and SEO)
   ------------------------------------------------------------
   Extends .callout (section 13). The full profile card on
   /website-laten-maken/#webontwikkelaar uses .specialist (20).
   ============================================================ */
.fib-azure .callout--person .callout-person{display:flex;justify-content:center;margin:0 0 16px;}
.fib-azure .callout--person .callout-person img{width:88px;height:88px;border-radius:50%;object-fit:cover;
  border:3px solid #fff;box-shadow:0 10px 26px rgba(11,92,173,.18);}
.fib-azure .callout--person .callout-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
@media(max-width:640px){
  .fib-azure .callout--person .callout-actions{flex-direction:column;align-items:stretch;}
  .fib-azure .callout--person .callout-actions .btn{width:100%;text-align:center;}
}


/* ============================================================
   45. ERROR PAGES (/fout/)
   ------------------------------------------------------------
   Built on .hero--center (42) and .related (28). The plain-HTML
   500 and 503 pages use only this file, no PHP.
   ============================================================ */
.fib-azure .error-hero{text-align:center;}
.fib-azure .error-hero .wrap{display:flex;flex-direction:column;align-items:center;}
.fib-azure .error-hero .sub{margin-left:auto;margin-right:auto;}
.fib-azure .error-hero .hero-btns{justify-content:center;}
.fib-azure .error-code{font-size:96px;line-height:1;font-weight:800;letter-spacing:-2px;margin:0 0 12px;
  background:linear-gradient(135deg,var(--cyan) 0%,var(--blue) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.fib-azure .error-path{margin-top:14px;font-size:14px;color:var(--grey-text);word-break:break-all;}
.fib-azure .error-path code{background:var(--mist);border:1px solid var(--border);border-radius:6px;padding:2px 6px;}
@media(max-width:640px){.fib-azure .error-code{font-size:72px;}}


/* === 46. Plain-PHP websiteportfolio (2026-10-15) === */
.fib-azure .portfolio-intro .sec-head{max-width:820px}.fib-azure .portfolio-intro .hero-btns{margin-top:24px}.fib-azure .portfolio-list{padding-top:28px}.fib-azure .portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.fib-azure .portfolio-card{overflow:hidden;border:1px solid var(--fib-border,#dfe7f0);border-radius:20px;background:#fff;box-shadow:0 14px 42px rgba(16,42,67,.08);transition:transform .2s ease,box-shadow .2s ease}.fib-azure .portfolio-card:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(16,42,67,.13)}.fib-azure .portfolio-card[hidden]{display:none}.fib-azure .portfolio-card-media{display:block;aspect-ratio:1024/561;overflow:hidden;background:#eef4f9}.fib-azure .portfolio-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}.fib-azure .portfolio-card:hover .portfolio-card-media img{transform:scale(1.02)}.fib-azure .portfolio-card-body{padding:26px}.fib-azure .portfolio-card-body h2{margin:16px 0 10px;font-size:1.5rem}.fib-azure .portfolio-card-body h2 a{color:inherit;text-decoration:none}.fib-azure .portfolio-card-body>p{margin:0;color:var(--fib-muted,#526273)}.fib-azure .portfolio-card-tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.fib-azure .case-tag.is-static{cursor:default}.fib-azure .webcase-hero{padding-bottom:48px}.fib-azure .webcase-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);align-items:center;gap:56px}.fib-azure .webcase-hero-image{margin:0}.fib-azure .webcase-hero-image img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 24px 60px rgba(10,42,72,.18)}.fib-azure .webcase-hero-image figcaption,.fib-azure .webcase-fullpage figcaption{margin-top:10px;color:var(--fib-muted,#526273);font-size:.88rem;text-align:center}.fib-azure .webcase-facts{padding:0 0 56px}.fib-azure .webcase-fact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;border:1px solid var(--fib-border,#dfe7f0);border-radius:18px;background:#fff;box-shadow:0 12px 35px rgba(16,42,67,.06)}.fib-azure .webcase-fact-grid>div{padding:22px 24px;border-right:1px solid var(--fib-border,#dfe7f0)}.fib-azure .webcase-fact-grid>div:last-child{border-right:0}.fib-azure .webcase-fact-grid dt{margin-bottom:6px;color:var(--fib-muted,#526273);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.fib-azure .webcase-fact-grid dd{margin:0;font-weight:750}.fib-azure .webcase-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.fib-azure .webcase-two-col .case-block{margin:0}.fib-azure .webcase-section-head{margin-top:70px}.fib-azure .webcase-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.fib-azure .webcase-work-card{overflow:hidden;border:1px solid var(--fib-border,#dfe7f0);border-radius:18px;background:#fff}.fib-azure .webcase-work-card figure{margin:0;aspect-ratio:768/374;overflow:hidden;background:#eef4f9}.fib-azure .webcase-work-card img{display:block;width:100%;height:100%;object-fit:cover}.fib-azure .webcase-work-copy{padding:24px}.fib-azure .webcase-work-copy h3{margin:0 0 10px}.fib-azure .webcase-work-copy p{margin:0}.fib-azure .webcase-showcase{padding:84px 0;background:linear-gradient(180deg,#f6f9fc 0,#fff 100%)}.fib-azure .webcase-fullpage{max-width:980px;margin:34px auto 0;padding:16px;border:1px solid var(--fib-border,#dfe7f0);border-radius:20px;background:#fff;box-shadow:0 22px 60px rgba(16,42,67,.10)}.fib-azure .webcase-fullpage img{display:block;width:100%;height:auto;border-radius:12px}.fib-azure .webcase-extra{max-width:768px;margin:30px auto 0}.fib-azure .webcase-extra img{display:block;width:100%;height:auto;border-radius:16px}.fib-azure .webcase-results{padding:84px 0}.fib-azure .webcase-results-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.82fr);gap:52px;align-items:start}.fib-azure .webcase-quote{margin:0}.fib-azure .webcase-quote-image{margin-top:20px}.fib-azure .webcase-quote-image img{display:block;width:100%;height:auto;max-height:430px;object-fit:contain;border-radius:12px}.fib-azure .webcase-note{padding:28px;border:1px solid var(--fib-border,#dfe7f0);border-radius:18px;background:#f6f9fc}.fib-azure .webcase-note h3{margin-top:0}.fib-azure .home-final-cta{margin-top:0}
@media(max-width:900px){.fib-azure .portfolio-grid,.fib-azure .webcase-work-grid{grid-template-columns:1fr}.fib-azure .webcase-hero-grid,.fib-azure .webcase-results-grid{grid-template-columns:1fr}.fib-azure .webcase-hero-image{max-width:720px}.fib-azure .webcase-fact-grid{grid-template-columns:repeat(2,1fr)}.fib-azure .webcase-fact-grid>div:nth-child(2){border-right:0}.fib-azure .webcase-fact-grid>div:nth-child(-n+2){border-bottom:1px solid var(--fib-border,#dfe7f0)}}
@media(max-width:620px){.fib-azure .webcase-two-col{grid-template-columns:1fr}.fib-azure .webcase-fact-grid{grid-template-columns:1fr}.fib-azure .webcase-fact-grid>div{border-right:0;border-bottom:1px solid var(--fib-border,#dfe7f0)}.fib-azure .webcase-fact-grid>div:last-child{border-bottom:0}.fib-azure .portfolio-card-body{padding:22px}.fib-azure .webcase-showcase,.fib-azure .webcase-results{padding:62px 0}.fib-azure .webcase-fullpage{padding:8px}}
/* === 47. Note after offer buttons (2026-10-18) ===
   A note-box inside the offer section, below the buttons, instead of its
   own section (which doubled the section padding). */
.fib-azure .offer-actions + .note-box{margin-top:40px;}

/* === 48. Home review fixes (2026-10-18) === */
/* Mobile step timeline: the line used to run through the heading and text,
   because both started at the left edge. Number left, text indented. */
@media(max-width:900px){
  .fib-azure .how-grid.is-line > .step{padding-left:62px;min-height:44px;}
  .fib-azure .how-grid.is-line > .step .num{position:absolute;left:0;top:0;margin:0;}
  .fib-azure .how-grid.is-line > .step:not(:last-child)::after{top:52px;left:21px;bottom:-14px;}
  .fib-azure .how-grid.is-line > .step h3{padding-top:10px;}
}
/* Nulmeting split-card with icons instead of check marks. */
.fib-azure .split-card--icons .row{align-items:center;gap:14px;}
.fib-azure .split-card--icons .ico{width:40px;height:40px;flex-shrink:0;border-radius:12px;padding:9px;
  background:linear-gradient(135deg,#EAF4FB,#D5EBFA);color:var(--blue);display:flex;align-items:center;justify-content:center;}
/* Link inside the dark bento cell. */
.fib-azure .bento__cell.is-dark .lead-link{color:#fff;}
.fib-azure .bento__cell.is-dark .lead-link:hover{color:var(--cyan);}
/* Button row directly under the steps. */
.fib-azure .how-grid + .offer-actions{margin-top:36px;}
.fib-azure .how .offer-actions + .pricing-note{margin-top:18px;}

/* === 49. People carousel and reviews (Home, 2026-10-18) === */
.fib-azure .people .sec-head{margin-bottom:26px;}
.fib-azure .people-nav{display:flex;justify-content:flex-end;gap:10px;margin:0 0 14px;}
.fib-azure .people-btn{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(11,92,173,.25);transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;}
.fib-azure .people-btn:hover:not(:disabled){transform:translateY(-2px) scale(1.06);box-shadow:0 12px 26px rgba(11,92,173,.35);}
.fib-azure .people-btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
.fib-azure .people-btn:disabled{opacity:.35;cursor:default;box-shadow:none;}
.fib-azure .people-row{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 18px;
  scrollbar-width:thin;scrollbar-color:#CFE0EE transparent;}
.fib-azure .people-row::-webkit-scrollbar{height:5px;}
.fib-azure .people-row::-webkit-scrollbar-thumb{background:#CFE0EE;border-radius:3px;}
.fib-azure .people-row > .specialist-card{flex:0 0 82%;max-width:none;margin:0;scroll-snap-align:start;background:#fff;}
.fib-azure .people-row > .specialist-card.is-lead{background:linear-gradient(135deg,#F2F8FD,#E6F1FB);border-color:#CFE3F5;}
@media(max-width:760px){
  .fib-azure .people-nav{display:none;}
  .fib-azure .people-row > .specialist-card{flex-basis:88%;padding:26px 22px;}
}
/* Reviews: rating card next to the quotes. */
.fib-azure .proof-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:stretch;}
.fib-azure .rating-card{background:var(--navy);color:#fff;border-radius:20px;padding:30px 28px;display:flex;flex-direction:column;gap:10px;}
.fib-azure .rating-card p{color:#C7D3E0;font-size:15px;}
.fib-azure .rating-card .btn{margin-top:auto;align-self:flex-start;}
.fib-azure .rating-big{font-size:56px;font-weight:800;line-height:1;}
.fib-azure .rating-stars{display:flex;gap:2px;}
.fib-azure .proof-quotes{min-width:0;}
.fib-azure .review-card{margin:0;background:#fff;border:1px solid var(--cardborder);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px;}
.fib-azure .review-card blockquote{margin:0;font-size:15px;line-height:1.6;color:var(--ink);}
.fib-azure .review-card figcaption{display:flex;align-items:center;gap:10px;margin-top:auto;}
.fib-azure .review-card figcaption strong{display:block;color:var(--navy);}
.fib-azure .review-card figcaption small{display:block;color:var(--grey);font-size:13px;}
.fib-azure .review-ini{width:38px;height:38px;border-radius:50%;background:#E6F1FB;color:var(--blue);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* Two link cards, each with its own colour. */
.fib-azure .proof-links{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;}
.fib-azure .proof-link{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:16px;text-decoration:none;color:var(--navy);
  border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease;}
.fib-azure .proof-link:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,37,64,.12);}
.fib-azure .proof-link:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
.fib-azure .proof-link.is-cases{background:linear-gradient(135deg,#E6F1FB,#D3E8F9);border-color:#BFDCF4;}
.fib-azure .proof-link.is-web{background:linear-gradient(135deg,#E7F7F1,#D2F0E4);border-color:#B6E4D2;}
.fib-azure .proof-link__ico{width:46px;height:46px;flex-shrink:0;border-radius:12px;padding:10px;background:#fff;}
.fib-azure .proof-link.is-cases .proof-link__ico{color:var(--blue);}
.fib-azure .proof-link.is-web .proof-link__ico{color:var(--green-text);}
.fib-azure .proof-link__txt b{display:block;font-size:17px;}
.fib-azure .proof-link__txt span{display:block;font-size:14px;color:#3F5164;}
.fib-azure .proof-link__arrow{margin-left:auto;font-size:20px;font-weight:700;transition:transform .2s ease;}
.fib-azure .proof-link:hover .proof-link__arrow{transform:translateX(4px);}
@media(max-width:900px){
  .fib-azure .proof-grid,.fib-azure .proof-links{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .fib-azure .people-btn,.fib-azure .proof-link,.fib-azure .proof-link__arrow{transition:none;}
}

/* === 50. Home: Microsoft 365 and websites, merged case archive (2026-10-18) === */
.fib-azure .m365-home{background:#fff;}
.fib-azure .m365-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;}
.fib-azure .m365-list{list-style:none;padding:0;margin:24px 0 28px;display:grid;gap:16px;}
.fib-azure .m365-list li{display:flex;gap:14px;align-items:flex-start;}
.fib-azure .m365-list .ico{width:44px;height:44px;flex-shrink:0;border-radius:12px;padding:10px;
  background:linear-gradient(135deg,#EAF4FB,#D5EBFA);color:var(--blue);}
.fib-azure .m365-list b{display:block;color:var(--navy);font-size:16px;}
.fib-azure .m365-list span{font-size:14.5px;color:#3F5164;}
.fib-azure .lifecycle{background:linear-gradient(160deg,#F2F8FD,#E3EFFA);border:1px solid #CFE3F5;border-radius:24px;
  padding:30px 28px;box-shadow:0 18px 44px rgba(11,92,173,.10);}
.fib-azure .lifecycle h3{font-size:18px;margin-bottom:4px;}
.fib-azure .lifecycle > p{font-size:14px;color:var(--grey);margin-bottom:20px;}
.fib-azure .lc-step{position:relative;display:flex;gap:16px;padding-bottom:22px;}
.fib-azure .lc-step:last-of-type{padding-bottom:0;}
.fib-azure .lc-step:not(:last-of-type)::after{content:"";position:absolute;left:21px;top:46px;bottom:4px;width:2px;
  background:linear-gradient(180deg,var(--blue),rgba(24,180,233,.25));}
.fib-azure .lc-dot{width:44px;height:44px;flex-shrink:0;border-radius:12px;padding:10px;background:#fff;border:2px solid #BFDCF4;color:var(--blue);}
.fib-azure .lc-step b{display:block;color:var(--navy);}
.fib-azure .lc-step span{font-size:14px;color:#3F5164;}
.fib-azure .lc-foot{margin-top:22px;padding-top:16px;border-top:1px solid #CFE3F5;font-size:13.5px;color:#3F5164;}
.fib-azure .web-dark{background:var(--navy);color:#fff;}
.fib-azure .web-dark h2,.fib-azure .web-dark h3{color:#fff;}
.fib-azure .web-dark .eyebrow{color:var(--cyan);}
.fib-azure .web-dark p{color:#C7D3E0;}
.fib-azure .web-split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center;}
.fib-azure .web-shots{position:relative;padding:0 30px 60px 0;}
.fib-azure .web-shots img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35);}
.fib-azure .web-shots img + img{position:absolute;width:62%;right:0;bottom:0;border:4px solid var(--navy);}
.fib-azure .web-rows{margin:24px 0 28px;display:grid;gap:12px;}
.fib-azure .web-row{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);text-decoration:none;transition:transform .2s ease,background .2s ease;}
.fib-azure .web-row:hover{transform:translateX(4px);background:rgba(255,255,255,.10);}
.fib-azure .web-row:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
.fib-azure .web-row .ico{width:42px;height:42px;flex-shrink:0;border-radius:11px;padding:9px;background:rgba(255,255,255,.10);color:#fff;}
.fib-azure .web-row b{display:block;color:#fff;font-size:16px;}
.fib-azure .web-row span{font-size:14px;color:#C7D3E0;}
.fib-azure .web-row .price{margin-left:auto;font-size:13px;font-weight:700;color:var(--cyan);white-space:nowrap;}
.fib-azure .web-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);background:transparent;}
.fib-azure .web-dark .btn-ghost:hover{border-color:#fff;}
@media(max-width:900px){
  .fib-azure .m365-split,.fib-azure .web-split{grid-template-columns:1fr;gap:36px;}
  .fib-azure .web-shots{order:2;}
}
@media(max-width:640px){
  .fib-azure .web-row .price{display:none;}
  .fib-azure .web-shots{padding:0 16px 40px 0;}
}
@media(prefers-reduced-motion:reduce){.fib-azure .web-row{transition:none;}}
/* Merged /klantcases/ archive: website cards carry an image. */
.fib-azure .case-card.has-media{padding-top:0;overflow:hidden;}
.fib-azure .case-card-media{display:block;margin:0 -26px 18px;aspect-ratio:1024/561;overflow:hidden;background:#EEF4F9;}
.fib-azure .case-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease;}
.fib-azure .case-card:hover .case-card-media img{transform:scale(1.03);}

/* === 51. Consistency pass (2026-10-19) === */
/* Split-cards everywhere in the Home style: icon rows get a tile, plain
   check rows a green badge instead of a bare dark check mark. */
.fib-azure .split-card .row{align-items:center;gap:14px;}
.fib-azure .split-card .chk-ico{width:40px;height:40px;flex-shrink:0;border-radius:12px;padding:9px;
  background:linear-gradient(135deg,#EAF4FB,#D5EBFA);color:var(--blue);display:flex;align-items:center;justify-content:center;}
.fib-azure .split-card .chk-ico .ico-svg{width:22px;height:22px;}
.fib-azure .split-card .chk:not(.chk-ico){width:26px;height:26px;flex-shrink:0;border-radius:50%;
  background:#E8F7F1;color:var(--green-text);font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;}
/* Review links: one, two or three cards. */
.fib-azure .proof-links--1{grid-template-columns:1fr;}
.fib-azure .proof-links--3{grid-template-columns:repeat(3,1fr);}
.fib-azure .proof-link.is-m365{background:linear-gradient(135deg,#EFEAFB,#E2D9F7);border-color:#D3C6F0;}
.fib-azure .proof-link.is-m365 .proof-link__ico{color:#5B3FB0;}
@media(max-width:900px){.fib-azure .proof-links--3{grid-template-columns:1fr;}}
/* /klantcases/: intro line that follows the filter. */
.fib-azure .cases-lead[hidden]{display:none;}

/* === 52. Nav dropdown, pricing buttons, FAQ links (2026-10-19) === */
/* Desktop dropdown: the menu item itself reaches down to the dropdown, so
   the pointer never crosses a gap between the two. The old 16px "bridge"
   plus the 6px slide meant the hover could switch on and off at the edge,
   which made the caret flip back and forth. No slide on the hit box either. */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .fib-azure .nav-item.has-dropdown{padding-bottom:10px;margin-bottom:-10px;}
  .fib-azure .dropdown{top:100%;transform:none;
    transition:opacity .18s ease,visibility 0s linear .18s;}
  .fib-azure .has-dropdown:hover .dropdown,
  .fib-azure .has-dropdown:focus-within .dropdown{transition:opacity .18s ease,visibility 0s;}
  .fib-azure .dropdown::before{display:none;}
}
@media(prefers-reduced-motion:reduce){.fib-azure .caret-btn svg{transition:none;}}
/* Buttons inside pricing cards, aligned at the bottom. */
.fib-azure .pricing-card > .btn{margin-top:20px;align-self:flex-start;}
/* FAQ links: same hover as other text links. */
.fib-azure .acc .body a:hover,
.fib-azure .acc .body a:visited:hover{color:var(--cyan);}

/* === 53. Request route in the lead bento cell (2026-10-19) === */
.fib-azure .bento__cell.is-lead{display:flex;flex-direction:column;}
.fib-azure .route{margin-top:auto;padding-top:22px;display:grid;gap:14px;}
.fib-azure .route__row{background:rgba(255,255,255,.7);border:1px solid #DCE8F3;border-radius:14px;padding:14px 16px;}
.fib-azure .route__row.is-us{background:#fff;border-color:#BFDCF4;box-shadow:0 8px 22px rgba(11,92,173,.08);}
.fib-azure .route__label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:10px;}
.fib-azure .route__row.is-us .route__label{color:var(--blue);}
.fib-azure .route__steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;}
.fib-azure .route__steps li{font-size:13.5px;font-weight:600;color:var(--navy);background:#F1F5F9;border-radius:999px;padding:6px 12px;}
.fib-azure .route__steps li + li{position:relative;margin-left:24px;}
.fib-azure .route__steps li + li::before{content:"\2192";position:absolute;left:-18px;top:50%;transform:translateY(-50%);color:#9AA9B8;font-weight:700;}
.fib-azure .route__steps li.is-end{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;}
.fib-azure .route__row:not(.is-us) .route__steps li.is-end{background:#DCE8F3;color:var(--navy);}
@media(max-width:640px){.fib-azure .route__steps li{font-size:12.5px;padding:5px 10px;}}

/* === 54. Route timeline on mobile, responsibility choice cards (2026-10-19) === */
.fib-azure .route__label small{font-weight:600;letter-spacing:0;text-transform:none;color:#9AA9B8;margin-left:6px;}
.fib-azure .route__steps li.is-bad{background:#FDECEC;color:#B42318;}
@media(max-width:640px){
  /* Vertical timeline: one step per line, a connecting line on the left. */
  .fib-azure .route__steps{display:block;}
  .fib-azure .route__steps li,
  .fib-azure .route__steps li + li{display:flex;align-items:center;margin:0;padding:0 0 0 26px;background:none;border-radius:0;
    font-size:13.5px;min-height:30px;position:relative;}
  .fib-azure .route__steps li::before,
  .fib-azure .route__steps li + li::before{content:"";position:absolute;left:5px;top:50%;width:10px;height:10px;margin-top:-5px;
    border-radius:50%;background:#CBD5DF;transform:none;}
  .fib-azure .route__steps li:not(:last-child)::after{content:"";position:absolute;left:9px;top:calc(50% + 5px);height:30px;width:2px;background:#E2E8F0;}
  .fib-azure .route__steps li.is-bad{background:none;color:#B42318;}
  .fib-azure .route__steps li.is-bad::before{background:#F04438;}
  .fib-azure .route__steps li.is-end,
  .fib-azure .route__row:not(.is-us) .route__steps li.is-end{background:none;color:var(--navy);font-weight:800;}
  .fib-azure .route__row.is-us .route__steps li.is-end{color:var(--blue);}
  .fib-azure .route__steps li.is-end::before{background:linear-gradient(135deg,var(--blue),var(--cyan));width:12px;height:12px;margin-top:-6px;left:4px;}
}
/* /verantwoordelijkheden/: one card per service. */
.fib-azure .rv-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.fib-azure .rv-pick__card{display:flex;flex-direction:column;gap:8px;padding:24px;background:#fff;border:1px solid var(--cardborder);
  border-radius:18px;text-decoration:none;color:var(--navy);transition:transform .2s ease,box-shadow .2s ease;}
.fib-azure .rv-pick__card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,37,64,.12);}
.fib-azure .rv-pick__card:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
.fib-azure .rv-pick__card .ico{width:46px;height:46px;border-radius:12px;padding:10px;background:linear-gradient(135deg,#EAF4FB,#D5EBFA);color:var(--blue);}
.fib-azure .rv-pick__card b{font-size:18px;}
.fib-azure .rv-pick__card span:not(.ico){font-size:14.5px;color:#3F5164;}
.fib-azure .rv-pick__card em{font-style:normal;font-weight:700;color:var(--blue);margin-top:auto;padding-top:8px;}
@media(max-width:900px){.fib-azure .rv-pick{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.fib-azure .rv-pick__card{transition:none;}}

/* === 55. Calculator rows, result list and sticky chips (2026-10-19) === */
/* Keyboard focus on the visually hidden switch input. */
.fib-azure .calc-switch input:focus-visible + .calc-slider{outline:2px solid var(--blue);outline-offset:2px;}
.fib-azure label.calc-svc{cursor:pointer;}
/* The identity checkbox spans both columns instead of sitting in one. */
.fib-azure .calc-fields .calc-check{grid-column:1/-1;margin-top:0;}
/* Extension rows: the switch sits in the header; the body (stepper, note)
   only shows while the extension is on. */
.fib-azure .calc-ext{border:1px solid #EDF2F7;border-radius:14px;margin-bottom:10px;background:#fff;transition:border-color .15s,background .15s;}
.fib-azure .calc-ext.is-on{border-color:#CFE3F5;background:#FAFCFE;}
.fib-azure .calc-ext__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;cursor:pointer;}
.fib-azure .calc-ext__t{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--navy);cursor:pointer;}
.fib-azure .calc-ext__t small{display:block;font-weight:400;font-size:12.5px;color:var(--grey);margin-top:2px;line-height:1.45;}
.fib-azure .calc-ext__select{width:auto;max-width:250px;flex-shrink:0;padding:9px 10px;font-size:14px;}
.fib-azure .calc-ext__body{display:none;padding:0 16px 14px;}
.fib-azure .calc-ext.is-on .calc-ext__body{display:block;}
.fib-azure .calc-ext__body .calc-field{max-width:280px;}
.fib-azure .calc-ext__body .calc-basenote{padding:8px 0 0;}
.fib-azure .calc-ext.is-disabled{opacity:.5;}
.fib-azure .calc-ext.is-disabled .calc-ext__head,
.fib-azure .calc-ext.is-disabled .calc-ext__t{cursor:not-allowed;}
@media(max-width:560px){
  .fib-azure .calc-ext__head:has(.calc-ext__select){flex-direction:column;align-items:stretch;gap:10px;}
  .fib-azure .calc-ext__select{max-width:none;width:100%;}
}
/* Result: what is in the price, with a remove button per part. */
.fib-azure .calc-inc-item{align-items:flex-start;}
.fib-azure .calc-inc-dot{margin-top:2px;}
.fib-azure .calc-inc-txt{flex:1;min-width:0;line-height:1.35;}
.fib-azure .calc-inc-txt b{display:block;font-weight:600;font-size:14px;}
.fib-azure .calc-inc-txt small{display:block;font-size:12.5px;color:var(--grey-text);}
.fib-azure .calc-inc-off{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid #E2E8F0;background:#fff;color:#7A8896;
  font-size:16px;line-height:1;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.fib-azure .calc-inc-off:hover{background:#FDECEC;border-color:#F5C2C2;color:#B42318;}
.fib-azure .calc-inc-off:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.fib-azure .calc-inc-none{font-size:13px;color:var(--grey-text);}
.fib-azure .calc-excluded{margin-top:14px;border-top:1px solid #EEF3F8;padding-top:12px;}
.fib-azure .calc-excluded ul{display:grid;gap:6px;}
.fib-azure .calc-excluded li{font-size:12.5px;color:var(--grey-text);line-height:1.45;padding-left:14px;position:relative;}
.fib-azure .calc-excluded li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#CBD5DF;}
.fib-azure .calc-excluded strong{color:var(--navy);font-weight:600;}
.fib-azure .calc-share{display:block;width:100%;margin-top:12px;background:none;border:0;padding:4px;font:inherit;font-size:14px;
  font-weight:600;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.fib-azure .calc-share:hover{color:var(--cyan);}
.fib-azure .calc-share__status{font-size:12.5px;color:var(--green-text);text-align:center;min-height:0;}
.fib-azure .calc-share__status:empty{display:none;}
/* Sticky bar (mobile): the selection as chips; a tap switches that part off. */
.calc-stickybar__chips{display:none;}
@media(max-width:820px){
  .calc-page .calc-stickybar{flex-wrap:wrap;row-gap:8px;}
  .calc-stickybar__chips{display:flex;gap:6px;width:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
  .calc-stickybar__chips::-webkit-scrollbar{display:none;}
  .calc-stickybar__chips:empty{display:none;}
  .calc-stickybar__chips .calc-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;border:1px solid #CFE3F5;background:#F2F8FD;
    color:#0A2540;border-radius:999px;padding:5px 10px;font:600 12.5px/1.2 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer;}
  .calc-stickybar__chips .calc-chip span{color:#7A8896;font-size:14px;line-height:1;}
  .calc-page .fib-fab{bottom:124px;}
  .calc-page .foot{padding-bottom:120px;}
}
/* Desktop: keep the sticky result panel within the screen on low laptops. */
@media(min-width:821px){.fib-azure .calc-result{max-height:calc(100vh - 104px);overflow-y:auto;}}

/* === 56. "Wat zit erin" (azure-beheer) and per-component table (2026-10-20) === */
.fib-azure .inc-b{background:var(--mist);padding:80px 0;}
.fib-azure .th-legend{display:flex;gap:10px 18px;flex-wrap:wrap;justify-content:center;margin:26px 0 22px;font-size:14px;color:#3F5164;}
.fib-azure .th-legend span{display:flex;align-items:center;gap:8px;}
.fib-azure .th-legend i{font-style:normal;}
.fib-azure .th-legend b{font-weight:400;}
.fib-azure .th-legend .lg-s{display:none;}
.fib-azure .th-mark{width:24px;height:24px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;}
.fib-azure .th-mark--core{background:#E8F7F1;color:var(--green-text);}
.fib-azure .th-mark--opt{background:#FFF8E6;color:var(--amber-text);}
.fib-azure .th-mark--ext{background:#EAF4FB;color:var(--blue);}
.fib-azure .th-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.fib-azure .th-card{background:#fff;border:1px solid var(--cardborder);border-radius:20px;overflow:hidden;box-shadow:0 8px 24px rgba(10,37,64,.04);}
.fib-azure .th-head{display:flex;gap:14px;align-items:center;padding:20px 22px;border-bottom:1px solid #EEF3F8;background:linear-gradient(135deg,#F7FBFE,#fff);}
.fib-azure .th-head .ico{width:48px;height:48px;padding:11px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;}
.fib-azure .th-head h3{font-size:19px;color:var(--navy);}
.fib-azure .th-head p{font-size:14px;color:var(--grey);margin-top:2px;}
.fib-azure .th-row{display:flex;align-items:flex-start;gap:12px;padding:13px 22px;border-bottom:1px solid #F1F5F9;color:var(--navy);transition:background .15s;}
.fib-azure .th-row:last-child{border-bottom:0;}
.fib-azure .th-row:hover{background:#F7FBFE;}
.fib-azure .th-row:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px;}
.fib-azure .th-txt{flex:1;min-width:0;}
.fib-azure .th-txt b{display:block;font-size:15px;}
.fib-azure .th-txt > span:not(.sr-only){display:block;font-size:13.5px;color:#3F5164;margin-top:2px;line-height:1.5;}
.fib-azure .th-go{color:#9AA9B8;font-weight:700;align-self:center;transition:transform .15s,color .15s;}
.fib-azure .th-row:hover .th-go{color:var(--blue);transform:translateX(3px);}
.fib-azure .ab{margin-top:28px;border-radius:22px;padding:28px;background:var(--navy);}
.fib-azure .ab-head .eyebrow{color:var(--cyan);}
.fib-azure .ab-head h3{color:#fff;font-size:20px;margin-top:4px;}
.fib-azure .ab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;}
.fib-azure .ab-card{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:10px;align-items:start;padding:18px 18px 18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:background .18s,transform .18s;}
.fib-azure .ab-card:hover{background:rgba(255,255,255,.11);transform:translateY(-2px);}
.fib-azure .ab-card:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}
.fib-azure .ab-card .ico{width:42px;height:42px;padding:9px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.10);color:#fff;}
.fib-azure .ab-txt b{display:block;color:#fff;font-size:16px;}
.fib-azure .ab-txt span{display:block;color:#C7D3E0;font-size:14px;margin-top:3px;line-height:1.5;}
.fib-azure .ab-price{grid-column:2;font-size:13px;font-weight:700;color:var(--cyan);padding-right:22px;}
.fib-azure .ab-arrow{position:absolute;right:16px;bottom:16px;color:#fff;font-weight:700;transition:transform .18s;}
.fib-azure .ab-card:hover .ab-arrow{transform:translateX(3px);}
.fib-azure .th-more{text-align:center;margin-top:24px;}
@media(max-width:900px){
  .fib-azure .th-grid,.fib-azure .ab-grid{grid-template-columns:1fr;}
  /* Legend stays in view while the stacked cards scroll past, below the
     72px sticky header. Sticky only within this section. */
  .fib-azure .th-legend{position:sticky;top:72px;z-index:5;margin:18px -24px 16px;padding:10px 24px;
    background:rgba(244,248,252,.94);backdrop-filter:blur(8px);border-bottom:1px solid #E3EBF3;font-size:13px;gap:6px 14px;}
  .fib-azure .th-legend .th-mark{width:20px;height:20px;font-size:11.5px;}
  .fib-azure .th-legend{flex-wrap:nowrap;justify-content:space-between;}
  .fib-azure .th-legend .lg-l{display:none;}
  .fib-azure .th-legend .lg-s{display:inline;}
}
@media(max-width:640px){
  .fib-azure .inc-b{padding:56px 0;}
  .fib-azure .th-head{padding:16px 18px;}
  .fib-azure .th-row{padding:12px 18px;}
  .fib-azure .ab{padding:20px;}
}
/* Per-component table: anchors land below the sticky header. */
.fib-azure .po-set .dl-row{scroll-margin-top:90px;}
.fib-azure .po-set .dl-row:target{background:#F2F8FD;box-shadow:inset 3px 0 0 var(--blue);}
.fib-azure .po-tag{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--grey);}
.fib-azure .po-tag i{font-style:normal;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;}
.fib-azure .po-tag--core i{background:#E8F7F1;color:var(--green-text);}
.fib-azure .po-tag--opt i{background:#FFF8E6;color:var(--amber-text);}
.fib-azure .po-tag--ext i{background:#EAF4FB;color:var(--blue);}
.fib-azure .po-set .dl-row__term{display:block;}
@media(prefers-reduced-motion:reduce){.fib-azure .th-row,.fib-azure .ab-card,.fib-azure .th-go,.fib-azure .ab-arrow{transition:none;}}


/* === 57. Terms: download as PDF and print stylesheet (2026-10-20) === */
.fib-azure .legal-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;margin-top:18px;}
.fib-azure .legal-actions .btn{display:inline-flex;align-items:center;gap:8px;}
.fib-azure .legal-actions__hint{font-size:13px;color:var(--grey);}
.fib-azure .legal-print-head,.fib-azure .legal-print-foot{display:none;}

@page{size:A4;margin:18mm 16mm 20mm;
  @bottom-right{content:"Pagina " counter(page) " van " counter(pages);font:9pt Arial,sans-serif;color:#5B6B7B;}
  @bottom-left{font:9pt Arial,sans-serif;color:#5B6B7B;}}

@media print{
  /* Site chrome and overlays off. */
  .fib-azure .site-header,.fib-azure .crumb,.fib-azure .foot,.fib-fab,.fib-cookie,.fib-modal,
  .calc-stickybar,.fib-azure .legal-actions,.fib-azure .legal-toc,.fib-azure .calc-intro{display:none !important;}
  html,body{background:#fff !important;}
  .fib-azure{color:#000;}
  .fib-azure .wrap{max-width:none;padding:0;}
  .fib-azure .legal-page{padding:0;}
  .fib-azure .legal{max-width:none;}
  /* Print header on page 1. */
  .fib-azure .legal-print-head{display:flex;align-items:center;gap:18px;padding-bottom:12px;margin-bottom:8px;border-bottom:2px solid #0B5CAD;}
  .fib-azure .legal-print-head img{width:150px;height:auto;}
  .fib-azure .legal-print-head b{display:block;font-size:20pt;color:#0A2540;}
  .fib-azure .legal-print-head span{display:block;font-size:9pt;color:#3F5164;}
  .fib-azure .legal-print-foot{display:block;margin-top:24px;padding-top:10px;border-top:1px solid #CBD5DF;font-size:9pt;color:#5B6B7B;}
  /* Readable body text, sensible page breaks. */
  .fib-azure .legal h2{font-size:15pt;margin:20px 0 8px;color:#0A2540;break-after:avoid;page-break-after:avoid;}
  .fib-azure .legal h3{font-size:12pt;margin:14px 0 6px;color:#0A2540;break-after:avoid;page-break-after:avoid;}
  .fib-azure .legal p,.fib-azure .legal li{font-size:10.5pt;line-height:1.45;color:#1F2D3D;orphans:3;widows:3;}
  .fib-azure .legal p{margin:0 0 8px;}
  .fib-azure .legal li{break-inside:avoid;page-break-inside:avoid;}
  .fib-azure .legal a{color:#1F2D3D !important;font-weight:400;text-decoration:none !important;}
}