/* ============================================================================
   Mindrops 2026 — Monochrome Design System
   Loaded LAST in <head> (via manager.php) so it re-skins the whole site.
   Source of truth: mindrops-mega-menu-demo.html (locked design).
   - New components are prefixed .mr-  (pixel-accurate, used on rebuilt pages)
   - Global element/legacy overrides re-theme existing Bootstrap-based pages
   Respects prefers-reduced-motion. GPU-composited, CSS-light.
   ========================================================================== */

/* Design tokens live in css/mindrops-tokens.css (loaded before this file). */

/* ---------- GLOBAL RESET / RE-THEME ---------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg)!important;color:var(--text)!important;
  font-family:var(--body)!important;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0;
  padding-top:var(--nav-h)!important;   /* offset for fixed header */
}
img{max-width:100%;height:auto}
a{color:var(--text);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--ac-2)}
h1,h2,h3,h4,h5,h6{font-family:var(--display)!important;color:var(--text);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em}
/* Narrow-screen safety: long translated words / German-Dutch compounds wrap instead of
   overflowing or being clipped on mobile (BUG-19, 20, 21, 24, 44, 50, 62, 68, 69, 82). */
h1,h2,h3,h4,h5,h6,p,li,.mr-lead,.mr-chip,.mr-stat,.mr-card,.mr-nav-link{overflow-wrap:break-word}
.mr-grid>*,.mr-stats>*,.mr-card,.mr-col{min-width:0}
@media(max-width:520px){.mr-pagehead h1,h1{hyphens:auto;-webkit-hyphens:auto}}
/* …and long compounds in section headings / stat captions ("Lieferantenökosystem", "Extractienauwkeurigheid")
   hyphenate properly instead of breaking at an arbitrary letter; short English words are left whole */
@media(max-width:520px){h2,.mr-stat span{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}}
h1{font-weight:800}
/* Editorial accent (spec 3.1): serif italic for emphasised words in headlines */
h1 em,h2 em,h3 em{font-family:var(--font-editorial)!important;font-style:italic;font-weight:400;letter-spacing:-.01em}
p{color:var(--text-2)}
hr{border-color:var(--border)}
::selection{background:color-mix(in srgb,var(--text-primary) 18%,transparent)}
:focus-visible{outline:2px solid var(--ac-border);outline-offset:3px}

/* page atmosphere — silvery glow so black isn't flat */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58vw 58vw at 8% -8%,color-mix(in srgb,var(--text-primary) 10%,transparent),transparent 60%),
    radial-gradient(52vw 52vw at 100% 0%,color-mix(in srgb,var(--text-secondary) 7%,transparent),transparent 60%);
}
/* faint film grain — site-wide texture so surfaces don't feel flat */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:var(--grain-opacity);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
/* keep legacy content above the glow */
.section,main,footer,.mr-section,.mr-footer{position:relative;z-index:1}

/* containers (coexist w/ Bootstrap) */
.container{max-width:var(--maxw)!important;margin:0 auto;padding-left:20px;padding-right:20px;width:100%}
@media (min-width:1536px){.container{max-width:1280px!important}}

/* re-theme common legacy surfaces */
.section,section{background:transparent!important}

.card{background:var(--surface)!important;border:0!important;border-radius:var(--r)!important;color:var(--text)!important;box-shadow:none}
table,td,th{border-color:var(--border)!important;color:var(--text-2)}

/* legacy buttons → spec button shape (radius-btn; pills are for badges and nav) */
input[type=submit],.h-primary,.h-outline{
  font-size:var(--fs-btn);line-height:1.25;
  font-family:var(--body);font-weight:var(--fw-btn);border-radius:var(--radius-btn)!important;
  border:0;cursor:pointer;transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),background var(--dur-base),color var(--dur-base);
}
.h-primary,input[type=submit],input[type=button],button[type=submit]{
  background:var(--grad)!important;color:var(--on-primary)!important;box-shadow:var(--shadow-cta);padding:11px 22px}
.h-primary:hover,input[type=submit]:hover{transform:translateY(-2px);box-shadow:var(--shadow-cta-hover);background:var(--primary-cobalt-hover)!important;color:var(--on-primary)!important}
/* Secondary buttons: a thin line mixed from the local text colour (--btn-line in mindrops-tokens.css), brighter
   with a faint fill on hover/focus — the same on dark and light sections, site pages and /lp/. */
.h-outline{background:transparent!important;border:var(--btn-border) solid color-mix(in srgb,var(--text) var(--btn-line),transparent)!important;color:var(--text)!important;padding:11px 22px;transition:border-color var(--dur-base) var(--ease),background-color var(--dur-base) var(--ease)}
.h-outline:is(:hover,:focus-visible){background:color-mix(in srgb,var(--text) var(--btn-fill-hover),transparent)!important;border-color:color-mix(in srgb,var(--text) var(--btn-line-hover),transparent)!important;color:var(--text)!important}
/* legacy section headings & office blocks → dark-theme palette (were legacy blue #0071bc / inline black icons) */

   /* beats legacy .office-location h3{color:#0071bc!important} */

/* legacy forms → dark fields */
input,select,textarea,.form-control{
  background:var(--surface-2)!important;border:1px solid var(--border)!important;color:var(--text)!important;
  border-radius:var(--radius-btn)!important;font-family:var(--body)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
/* Phone field shows an intl-tel example number as its placeholder; dim it well below
   the typed-text colour so it doesn't read as an already-entered number. */
.phone-intl-input::placeholder{color:var(--text-4);opacity:1}
input:focus,select:focus,textarea:focus,.form-control:focus{border-color:var(--ac-border)!important;box-shadow:var(--shadow-focus-ring)!important;outline:0}
label{color:var(--text-2)}

/* ----- shared contact / quote form (used by contact.php + get-a-quote.php) ----- */
.mr-form-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:clamp(22px,3vw,38px);box-shadow:0 24px 60px color-mix(in srgb,var(--black) 35%,transparent)}
.mr-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-6)}
.mr-form-group,.mr-form-card .form-group{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:18px}
.mr-form-group.mr-col-2{grid-column:1 / -1}
.mr-form-group label,.mr-form-card .form-group label{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.mr-form-group input,.mr-form-group textarea,.mr-form-group select{padding:13px 15px;font-size:var(--fs-base);width:100%}
.mr-form-card .iti{width:100%}.mr-form-card .form-control{padding:13px 15px;font-size:var(--fs-base)}
.mr-form-group textarea{resize:vertical;min-height:130px}
.mr-captcha-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.mr-captcha-row img{height:46px;border-radius:var(--radius-sm);background:var(--text);padding:3px;flex-shrink:0}
.mr-captcha-row .cap-refresh{display:inline-grid;place-items:center;width:44px;height:46px;padding:0;border:0;background:transparent;cursor:pointer;color:var(--text-2);flex-shrink:0;transition:color var(--dur-fast) var(--ease),transform .45s var(--ease)}
.mr-captcha-row .cap-refresh:hover{color:var(--text);transform:rotate(-180deg)}
.mr-captcha-row input{flex:1 1 220px;min-width:120px;padding:13px 15px;font-size:var(--fs-base)}
.mr-form-foot .mr-captcha-row{flex:1 1 auto;min-width:260px}
@media(max-width:380px){.mr-form-foot .mr-captcha-row{min-width:0}}  /* 320px screens: the card is narrower than 260px */
.mr-form-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:var(--space-2)}
.mr-form-foot .h-primary{flex-shrink:0}
@media(max-width:640px){.mr-form-grid{grid-template-columns:1fr}}
/* shared lead-form status messages + consent checkbox (mr-lead-form partial) */
.form-data-success-message{color:var(--success);font-size:var(--fs-md);margin-top:var(--space-2)}
.form-data-error-message{color:var(--danger);font-size:var(--fs-md);margin-top:var(--space-2)}



.mr-form-note{font-size:var(--fs-sm);color:var(--text-2);line-height:1.6;margin:16px 0 0}
.mr-form-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ============================================================================
   HEADER + FROSTED MEGA-MENU  (new markup in header.php uses .mr-* below)
   ========================================================================== */
.mr-header{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;display:flex;align-items:center;
  padding:0 28px;transition:background var(--dur-slow) var(--ease),backdrop-filter var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease);border-bottom:1px solid transparent}
.mr-header.scrolled,body.mr-menu-open .mr-header{background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--border-soft)}
body.mr-menu-open .mr-header{background:var(--bg)}  /* solid while a menu is open, to sit flush with the opaque panel */
.mr-logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:var(--fs-3xl);letter-spacing:-.02em;color:var(--text);z-index:2}
.mr-logo svg{width:30px;height:30px;filter:drop-shadow(0 0 10px var(--ac-glow))}
.mr-logo img{height:34px;width:auto}
/* Items stretch to the full header height so the pointer never crosses a dead strip between a
   menu label and its panel (which used to trigger the close timer on a slow move) */
.mr-nav{display:flex;align-items:stretch;align-self:stretch;gap:var(--space-1);margin-left:38px}
.mr-nav-item{position:relative;display:flex;align-items:center}
.mr-nav-link{display:flex;align-items:center;gap:6px;font-size:var(--fs-base);color:var(--text-2);padding:10px 14px;border-radius:var(--r-pill);
  cursor:pointer;transition:color .25s var(--ease);background:none;border:0;font-family:var(--body);font-weight:500;text-decoration:none;white-space:nowrap}
.mr-nav-link:hover,.mr-nav-item.active .mr-nav-link,.mr-nav-link.is-current{color:var(--text)}
.mr-nav-link.is-current{position:relative}
.mr-nav-link.is-current::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:var(--radius-xs);background:var(--grad-brand)}
.mr-nav-link .chev{width:11px;height:11px;transition:transform var(--dur-base) var(--ease);opacity:.7}
.mr-nav-item.active .mr-nav-link .chev{transform:rotate(180deg)}
.mr-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-3);z-index:2}
.mr-cta{font-family:var(--body);font-weight:700;font-size:var(--fs-btn-sm);padding:11px 22px;border-radius:var(--radius-btn);
  background:var(--grad);color:var(--on-primary)!important;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2);
  box-shadow:0 4px 16px var(--ac-glow);transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);text-decoration:none}
.mr-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-cta-hover);background:var(--primary-cobalt-hover)!important;color:var(--on-primary)!important}
.mr-lang{display:flex;align-items:center;gap:2px;font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase}
.mr-lang a{color:var(--text-3);padding:var(--space-1) 6px;border-radius:var(--radius-sm)}
.mr-lang a:hover,.mr-lang a.is-active{color:var(--text);background:var(--ac-soft)}

/* scrim */
.mr-scrim{position:fixed;inset:var(--nav-h) 0 0 0;z-index:990;background:color-mix(in srgb,var(--black) 24%,transparent);
  opacity:0;visibility:hidden;transition:opacity var(--dur-slow) var(--ease),visibility var(--dur-slow) var(--ease);pointer-events:none}
/* While a menu is open the scrim takes the pointer, so hovering or clicking the page closes it */
body.mr-menu-open .mr-scrim{opacity:1;visibility:visible;pointer-events:auto}

/* mega panel */
.mr-mega{position:fixed;top:var(--nav-h);left:0;right:0;z-index:995;max-height:calc(100vh - var(--nav-h));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  background:var(--bg);border-top:1px solid var(--stroke-subtle);border-bottom:1px solid var(--stroke-subtle);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-14px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s var(--ease)}
.mr-mega.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mr-mega-inner{max-width:var(--maxw);margin:0 auto;padding:34px 28px 40px;display:grid;gap:30px}
/* services mega: category rail | service list | project CTA */
.mr-mega-inner.mr-svc{grid-template-columns:304px minmax(0,1fr) 288px;gap:0;padding-top:0;padding-bottom:0}
/* rail: icon tile + category + one-line summary; the active category gets the accent tile */
.mr-svc-rail{display:flex;flex-direction:column;gap:4px;padding:22px 18px 22px 0;border-right:1px solid var(--stroke-subtle)}
.mr-svc-tab{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;row-gap:1px;align-items:center;width:100%;text-align:left;background:none;border:0;border-radius:var(--radius-md);padding:10px 12px;cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.mr-svc-tab .i{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border-soft);color:var(--text-2);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.mr-svc-tab .t{font-size:var(--fs-md);font-weight:600;line-height:1.3;color:var(--text-2);transition:color var(--dur-fast) var(--ease)}
.mr-svc-tab .d{font-size:var(--fs-xs);line-height:1.35;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-svc-tab:hover,.mr-svc-tab:focus-visible{background:color-mix(in srgb,var(--text) 5%,transparent)}
.mr-svc-tab:hover .t,.mr-svc-tab:focus-visible .t{color:var(--text)}
.mr-svc-tab.is-active{background:var(--surface)}
.mr-svc-tab.is-active .i{background:var(--primary-cobalt);border-color:var(--primary-cobalt);color:#fff}
.mr-svc-tab.is-active .t{color:var(--text)}
/* panes: heading with an overview link, then services as two columns of quiet rows */
.mr-svc-panes{padding:26px 36px 30px}
.mr-svc-pane[hidden]{display:none}
.mr-svc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);padding:6px 0 18px;margin-bottom:10px;border-bottom:1px solid var(--stroke-subtle)}
.mr-svc-title{margin:0;font-size:var(--fs-2xl);font-weight:700;color:var(--text);letter-spacing:-.015em}
.mr-svc-desc{margin:6px 0 0;font-size:var(--fs-sm);color:var(--text-3)}
.mr-svc-more{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border-soft);border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:600;color:var(--text);white-space:nowrap;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.mr-svc-more:hover{border-color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent)}
/* Hover arrow sits right after the label (not at the far edge, where it read as belonging to the
   next column); the 28px gap keeps the two columns' hover highlights (14px bleed each) apart. */
.mr-svc-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:2px}
.mr-svc-links a{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-2);padding:11px 14px;margin:0 -14px;border-radius:var(--radius-md);font-size:var(--fs-md);font-weight:500;color:var(--text-2);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.mr-svc-links a::after{content:"→";color:var(--primary-cobalt);opacity:0;transform:translateX(-6px);transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.mr-svc-links a:hover,.mr-svc-links a:focus-visible{color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent)}
.mr-svc-links a:hover::after,.mr-svc-links a:focus-visible::after{opacity:1;transform:none}
/* project card */
.mr-svc-cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);margin:22px 0 22px 4px;padding:26px 24px;border:1px solid color-mix(in srgb,var(--primary-cobalt) 45%,var(--border-soft));border-radius:var(--radius-card);background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--primary-cobalt) 26%,transparent),transparent 62%),var(--surface)}
.mr-svc-eyebrow{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.mr-svc-cta-title{margin:0;font-size:var(--fs-2xl);font-weight:700;line-height:1.25;color:var(--text)}
.mr-svc-cta-text{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--text-2)}
.mr-svc-cta-btn{margin-top:var(--space-1)}
.mr-svc-proof{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;gap:8px}
.mr-svc-proof li{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--text-2)}
.mr-svc-proof li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--primary-cobalt) 22%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat}
.mr-svc-cta-links{display:flex;flex-wrap:wrap;gap:var(--space-2) 18px;margin-top:auto;padding-top:var(--space-4)}
.mr-svc-cta-links a{font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.mr-svc-cta-links a:hover{color:var(--text)}
@media(max-width:1440px){.mr-mega-inner.mr-svc{grid-template-columns:276px minmax(0,1fr) 256px}.mr-svc-panes{padding-left:26px;padding-right:26px}}
/* plain mega columns: invisible heading spacer and a closing "all" link */
.mr-col-sp{font-family:var(--mono);font-size:var(--fs-xs);line-height:1.12;margin:0 0 14px}
.mr-col a.mr-col-all{margin-top:6px;font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.mr-col a.mr-col-all:hover{color:var(--text)}
.mr-mega-2{grid-template-columns:repeat(3,1fr) 1.1fr}




.mr-col h4{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin:0 0 14px}
.mr-col a{display:block;color:var(--text-primary);font-weight:500;font-size:var(--fs-md);padding:7px 0;transition:color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.mr-col a span{font-size:var(--fs-xs);color:var(--text-3);display:block;margin-top:1px;font-weight:400}
.mr-col a:hover{color:var(--text);transform:translateX(5px)}
.mr-col a:hover span{color:var(--ac-2)}
.mr-feature{border-radius:var(--r-lg);overflow:hidden;background:color-mix(in srgb,var(--text-primary) 4.5%,transparent);transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease);align-self:start}
.mr-feature:hover{transform:translateY(-4px);box-shadow:0 16px 40px color-mix(in srgb,var(--black) 40%,transparent)}
.mr-feature .thumb{height:104px;background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--text-primary) 30%,transparent),transparent 60%),radial-gradient(circle at 78% 72%,color-mix(in srgb,var(--text-secondary) 22%,transparent),transparent 58%),linear-gradient(120deg,var(--surface-2),var(--bg))}
/* photographic thumbnail — generated on-brand art fills the box, cover-cropped */
.mr-feature .thumb--photo{padding:0;background:var(--bg)}
.mr-feature .thumb--photo img{width:100%;height:100%;object-fit:cover;display:block}
/* product/brand logos sit on a light plate so dark-on-transparent marks stay legible */


/* generated, on-brand case thumbnails: a category icon over a branded mesh + faint blueprint grid */




/* product logo strip (Products hub) — logos are dark-on-transparent, so each sits on a white plate */




/* Product pages (includes/partials/mr-product-page.php) */
.mr-prod-logo{display:inline-grid;place-items:center;align-self:flex-start;background:#fff;border:1px solid var(--border);padding:10px 16px;height:56px;margin:0 0 18px}
.mr-prod-logo img{max-height:32px;max-width:150px;width:auto;height:auto;object-fit:contain}
.mr-prod-steps{list-style:none;margin-left:0;margin-right:0;padding:0}
.mr-prod-steps h3{margin-top:8px}
.mr-figure.mr-figure--wide{max-width:min(1000px,calc(100% - 56px))}
.mr-figure.mr-figure--wide img{max-width:100%}
@media(max-width:760px){.mr-skin .mr-pagehead>.mr-ph-photo--diagram.mr-ph-photo--product{aspect-ratio:977/622}}
.mr-feature .body{padding:14px var(--space-4)}
.mr-feature .tag{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.mr-feature h5,.mr-feature h3{font-family:var(--body);font-weight:700;font-size:var(--fs-base);margin:6px 0 var(--space-1);color:var(--text)}
.mr-feature p{font-size:var(--fs-xs);color:var(--text-2);line-height:1.5;margin:0}
.mr-feature .more{font-size:var(--fs-xs);color:var(--text);margin-top:10px;display:inline-flex;gap:6px;font-weight:600}

/* mobile menu */
.mr-burger{display:none;background:none;border:0;color:var(--text);cursor:pointer;padding:var(--space-2);z-index:2}
.mr-mobile{display:none}
@media (max-width:1280px){
  .mr-nav,.mr-actions .mr-lang{display:none}   /* nav + language + social move into the menu (raised to 1280px: longer NL/DE/FR labels crowd out the logo otherwise) */
  .mr-mega{display:none}   /* the mega menus open only from the desktop nav; hidden, their lazy thumbnails are never fetched on phones */
  .mr-actions .mr-cta svg{display:none}        /* keep the "Get a Quote" label visible, drop the arrow */
  .mr-actions .mr-cta{padding:9px var(--space-4);font-size:var(--fs-btn-sm)}
  .mr-burger{display:inline-flex}
  .mr-mobile{display:block;position:fixed;inset:var(--nav-h) 0 0 0;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(20px);z-index:995;
    transform:translateX(100%);transition:transform .35s var(--ease);overflow-y:auto;padding:20px 22px 60px}
  body.mr-mobile-open .mr-mobile{transform:none}
  .mr-mobile details{border-bottom:1px solid var(--border-soft)}
  .mr-mobile summary{list-style:none;padding:var(--space-4) 0;font-size:var(--fs-xl);font-weight:600;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:space-between}
  .mr-mobile summary::-webkit-details-marker{display:none}
  .mr-mobile summary::after{content:"";width:8px;height:8px;flex:none;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg);transition:transform .25s var(--ease)}
  .mr-mobile details[open] summary::after{transform:rotate(-135deg)}
  .mr-mobile a{display:block;padding:9px 0 9px var(--space-3);color:var(--text-2);font-size:var(--fs-base)}
  /* top-level direct links read as peers of the collapsible headers, not sub-items */
  .mr-mobile>a:not(.mr-cta){padding:var(--space-4) 0;font-size:var(--fs-xl);font-weight:600;color:var(--text);border-bottom:1px solid var(--border-soft)}
  .mr-mobile .mr-lang-m{display:flex;gap:var(--space-2);margin-top:22px}
  .mr-mobile .mr-lang-m a{display:inline-flex;padding:var(--space-2) 13px;border:1px solid var(--border-soft);border-radius:var(--radius-sm);font-size:var(--fs-sm)}
}
/* phones keep a compact Contact button in the closed header, next to the menu button */
@media(max-width:600px){.mr-actions{gap:var(--space-2)}.mr-actions .mr-cta{padding:8px 12px}}

/* ============================================================================
   SECTIONS / PAGE COMPONENTS (.mr-*)
   ========================================================================== */
main,.mr-main{padding-top:0}
.mr-section{max-width:var(--maxw);margin:0 auto;padding:var(--space-20) 28px}
/* Contextual copy belongs to its section, with the same measure as body text. */
.mr-section-intro{margin:18px 0 32px;max-width:76ch}
/* Open-source FAQ aligns with its container column. */
.os-section ~ .mr-section--tight{padding-left:28px;padding-right:28px}
/* Tight variant: same centered container as .mr-section, just less vertical padding.
   max-width/margin are repeated here so it stays contained even when used standalone
   (i.e. class="mr-section--tight" without "mr-section"). Pages that want a full-bleed
   tight band still opt out with an inline style="max-width:none". */
.mr-section--tight{max-width:var(--maxw);margin:0 auto;padding:var(--space-12) 28px}
/* Light sections (tokens: .mr-light in mindrops-tokens.css). The section keeps its centred
   container; a filled border-image with a 100vmax side outset paints the white edge to edge
   without wrapper markup, horizontal scroll or seams between stacked light sections.
   !important beats the legacy "section{background:transparent!important}" reset. */
.mr-light,.mr-skin .mr-main:not(:has(.mr-light))>section:is(.mr-section,.mr-section--tight):nth-of-type(even),.mr-skin main>section.os-section:nth-of-type(even){background:var(--bg)!important;color:var(--text);border-image:conic-gradient(var(--bg) 0 0) fill 0/0/0 100vmax}
/* Art thumbnails are drawn light-on-dark; on a light band they become a flat tile with a black glyph */


/* Illustration art and generated hero/menu imagery follow --art-saturation (0 = greyscale) */
.mr-aurora,.mr-hero-visual,.mr-feature .thumb--photo img{filter:saturate(var(--art-saturation))}
.mr-kicker{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--text-2);display:inline-flex;align-items:center;gap:var(--space-3);margin-bottom:20px}
.mr-kicker::before{content:"";width:28px;height:2px;border-radius:var(--radius-xs);background:var(--grad-brand)}
.mr-h2{font-size:var(--fs-h1);letter-spacing:-.025em;margin:0 0 var(--space-4)}
.mr-lead{font-size:var(--fs-xl);color:var(--text-2);max-width:620px}
.mr-eyebrow{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--text-2)}
/* section-label eyebrows (directly before a heading) get the kicker's gradient dash;
   inline uses (trust strip, partner band) keep their subtler look via later overrides */
.mr-eyebrow:has(+ h2),.mr-eyebrow:has(+ .mr-h2){display:inline-flex;align-items:center;gap:var(--space-3)}
.mr-eyebrow:has(+ h2)::before,.mr-eyebrow:has(+ .mr-h2)::before{content:"";width:28px;height:2px;border-radius:var(--radius-xs);background:var(--grad-brand)}
/* …and the kicker's 20px gap to that heading: mr_faq() + product-page section labels sat flush (0px)
   against their h2 while every .mr-kicker section has 20px. Headings with their own inline margin-top are left alone. */
.mr-eyebrow:has(+ .mr-h2:not([style])){margin-bottom:20px}

/* hero */
/* ===================== HERO — "Liquid Drop in an Aurora Field" ============== */
.mr-hero{position:relative;isolation:isolate;overflow:hidden;max-width:none;margin:0;
  padding:44px max(28px,calc((100% - var(--maxw))/2));
  min-height:calc(100vh - var(--nav-h));
  display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
/* orb hero (2-col with decorative orb) is homepage-only; interior heroes are single-column */

.mr-hero-copy{position:relative;z-index:2;max-width:600px}
.mr-hero h1{font-size:var(--fs-display);line-height:1.03;letter-spacing:-.03em;color:var(--text);margin:0}
.mr-hero h1 .g{color:inherit}  /* headline highlight words stay in the headline colour: no colour or gradient on text */
.mr-hero p{font-size:var(--fs-xl);color:var(--text-2);max-width:500px;margin:var(--space-6) 0 var(--space-8)}
.mr-hero .mr-kicker{color:var(--text-2)}
.mr-hero .mr-kicker::before{background:var(--grad-brand)}
.mr-hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.mr-hero .h-primary{background:var(--grad)!important;color:var(--on-primary)!important;font-weight:700;
  box-shadow:0 8px 26px color-mix(in srgb,var(--m) 34%,transparent)}
.mr-hero .h-primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px color-mix(in srgb,var(--m) 46%,transparent)}
.mr-hero-visual{position:relative;z-index:2;background:none;border-radius:0;overflow:visible;display:none;place-items:center}

/* full-bleed image hero (per-service hero_img): image spans the whole hero, copy sits
   over it on the left with a gradient scrim for legibility */

/* aurora field (behind everything) */
.mr-aurora{position:absolute;inset:-12% -6%;z-index:0;pointer-events:none}
.mr-aurora .b{position:absolute;border-radius:50%;filter:blur(95px);mix-blend-mode:screen;opacity:.55;will-change:transform}
.mr-aurora .b1{width:46vw;max-width:640px;aspect-ratio:1;left:-6%;top:-14%;background:radial-gradient(circle,var(--i),transparent 68%);animation:mr-drift-a 28s var(--ease) infinite}
.mr-aurora .b2{width:42vw;max-width:580px;aspect-ratio:1;right:-8%;top:-9%;background:radial-gradient(circle,var(--m),transparent 68%);animation:mr-drift-b 32s var(--ease) infinite}
.mr-aurora .b3{width:40vw;max-width:540px;aspect-ratio:1;left:18%;bottom:-26%;background:radial-gradient(circle,var(--a),transparent 70%);animation:mr-drift-c 34s var(--ease) infinite}
.mr-aurora .b4{width:34vw;max-width:480px;aspect-ratio:1;right:8%;bottom:-20%;background:radial-gradient(circle,var(--violet),transparent 70%);animation:mr-drift-d 24s var(--ease) infinite}
.mr-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--bg) 60%,transparent) 0%,color-mix(in srgb,var(--bg) 20%,transparent) 32%,transparent 52%),
    radial-gradient(125% 95% at 50% 32%,transparent 40%,color-mix(in srgb,var(--bg) 50%,transparent) 74%,var(--bg) 100%)}

/* the orb (luminous liquid drop) */
.mr-orb-stage{position:relative;width:min(420px,84%);aspect-ratio:1;display:grid;place-items:center;perspective:900px}
.mr-orb-halo{position:absolute;inset:-16%;border-radius:50%;z-index:0;filter:blur(48px);opacity:.78;
  background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--m) 50%,transparent),color-mix(in srgb,var(--i) 34%,transparent) 42%,transparent 72%)}
.mr-orbit{position:absolute;z-index:1;width:132%;aspect-ratio:1;border-radius:50%;
  border:1px solid var(--stroke-highlight);transform:rotateX(73deg);animation:mr-orbit 18s linear infinite}
.mr-orbit-dot{position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--a);box-shadow:0 0 14px 2px color-mix(in srgb,var(--a) 85%,transparent)}
.mr-orb{position:relative;z-index:2;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:
    radial-gradient(34% 30% at 30% 24%,color-mix(in srgb,var(--text-primary) 97%,transparent),color-mix(in srgb,var(--text-primary) 0%,transparent) 60%),
    radial-gradient(52% 46% at 78% 22%,color-mix(in srgb,var(--a) 90%,transparent),color-mix(in srgb,var(--a) 0%,transparent) 60%),
    radial-gradient(66% 62% at 22% 82%,color-mix(in srgb,var(--i) 95%,transparent),color-mix(in srgb,var(--i) 0%,transparent) 62%),
    radial-gradient(92% 88% at 58% 60%,color-mix(in srgb,var(--m) 96%,transparent),color-mix(in srgb,var(--violet) 35%,transparent) 50%,transparent 76%),
    radial-gradient(125% 120% at 46% 38%,var(--surface-2) 0%,var(--surface) 55%,var(--bg) 100%);
  box-shadow:0 44px 96px color-mix(in srgb,var(--m) 28%,transparent),0 12px 50px color-mix(in srgb,var(--i) 22%,transparent),
    inset -22px -28px 64px color-mix(in srgb,var(--black) 72%,transparent),inset 16px 18px 44px color-mix(in srgb,var(--text-primary) 9%,transparent);
  animation:mr-float 9s var(--ease) infinite}
.mr-orb-sheen{position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;opacity:.5;filter:blur(7px);
  background:conic-gradient(from 0deg,transparent 0deg,color-mix(in srgb,var(--text-primary) 50%,transparent) 42deg,transparent 118deg,color-mix(in srgb,var(--a) 34%,transparent) 196deg,transparent 264deg,color-mix(in srgb,var(--i) 42%,transparent) 322deg,transparent 360deg);
  animation:mr-spin 20s linear infinite}

@keyframes mr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes mr-spin{to{transform:rotate(360deg)}}
@keyframes mr-orbit{from{transform:rotateX(73deg) rotateZ(0)}to{transform:rotateX(73deg) rotateZ(360deg)}}
@keyframes mr-drift-a{0%,100%{transform:translate(0,0)}50%{transform:translate(7%,9%)}}
@keyframes mr-drift-b{0%,100%{transform:translate(0,0)}50%{transform:translate(-8%,6%)}}
@keyframes mr-drift-c{0%,100%{transform:translate(0,0)}50%{transform:translate(6%,-8%)}}
@keyframes mr-drift-d{0%,100%{transform:translate(0,0)}50%{transform:translate(-6%,-6%)}}

/* ===== interior service hero — distinct per-category, native CSS (no raster) =====
   Driven by a single --hero-h hue set inline per service. A large brand-gradient glyph
   (the service's own icon) floats over a breathing halo + tilted orbit ring, ringed by
   three small "satellite" icons that say what the page is about — all tinted to the
   category hue, aurora matched. So each service page opens distinct from the homepage
   (and from each other) at zero byte cost. b2 (magenta) and b3 (amber) stay as brand
   anchors so it never drifts off-palette. */





/* breathing radial glow, tinted to the category hue */

/* tilted orbit ring with a single travelling node */


/* the service glyph: a large brand-gradient icon (clipped text), floating + slow shimmer */

/* small domain satellites — say what the page is about, tinted to the hue */









/* ===== generic split hero — 2-col with a decorative visual, reused by interior hub
   pages (ai, custom software, digital marketing, company, technologies, industries…)
   so they open with a hero visual like the homepage instead of a hidden one. ===== */
.mr-hero--split{grid-template-columns:1.06fr .94fr}
.mr-hero--split .mr-hero-visual{display:grid}
/* Photographic service hero: full colour regardless of --art-saturation, edges feathered into the page. */





/* ===== animated, contextual hero visuals (native CSS, no raster) ===== */
/* --- AI chatbot: a live conversation panel (chatbot service hero) --- */




















/* --- Applied AI: a pulsing neural/agent network --- */












/* --- Custom software: an isometric, layered platform stack --- */











/* --- Growth/marketing: an animated bar chart trending up --- */











/* trusted-by strip (client names — not certification badges) */
.mr-hero-trust{max-width:var(--maxw);margin:0 auto;padding:0 28px 56px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.mr-hero-trust-row{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%}
.mr-hero-trust .mr-eyebrow{white-space:nowrap}
.mr-hero-trust-logos{display:flex;gap:34px 56px;flex-wrap:wrap;align-items:center;justify-content:center;width:100%}
.mr-hero-trust-logos img{height:32px;width:auto;max-width:150px;object-fit:contain;opacity:.9;transition:opacity var(--dur-base) var(--ease),filter var(--dur-base) var(--ease)}
.mr-hero-trust-logos img:hover{opacity:1;filter:none}
/* certifications page — prominent full-width trusted-by band + partner logo cards */















@media (max-width:840px){
  .mr-hero{grid-template-columns:1fr;min-height:auto;padding:34px var(--space-6) 26px;gap:26px}
  .mr-crumb ~ .mr-hero{padding-top:60px}   /* breadcrumb overlaps the hero by 34px; keep the kicker clear of it */
  .mr-orb-stage{width:min(330px,70%)}
  .mr-hero-trust-logos{gap:18px 30px}
  .mr-hero-trust-logos img{height:26px}
}
@media (prefers-reduced-motion:reduce){
  .mr-aurora .b,.mr-orb,.mr-orb-sheen,.mr-orbit{animation:none!important}
}

/* trust bar */

/* stat counters */
.mr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mr-stat{position:relative;border:1px solid var(--card-border);border-radius:var(--r);padding:26px 22px;text-align:center;background:var(--surface)}
.mr-stat b{display:block;font-family:var(--display);font-weight:800;font-size:var(--fs-h1);color:var(--text);line-height:1}
.mr-stat span{display:block;margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--text-2)}
@media (max-width:760px){.mr-stats{grid-template-columns:1fr 1fr}}
/* Phones: 2-up tiles are ~158px wide — a little less padding + a slightly smaller numeral keeps
   "Node.js" / "Intégré à l'ERP" / "10k+/mnd" from breaking mid-word. */
@media (max-width:520px){.mr-stat{padding:22px 12px}.mr-stat b{font-size:clamp(26px,7.4vw,32px)}}

/* card grid */
.mr-grid{display:grid;gap:18px}
.mr-grid-2{grid-template-columns:repeat(2,1fr)}
.mr-grid-3{grid-template-columns:repeat(3,1fr)}
.mr-grid-4{grid-template-columns:repeat(4,1fr)}
/* Desktop: a 3-up grid whose last row holds only 2 cards (2, 5, 8, 11 cards) would leave an empty third
   slot — switch to a 6-track grid so those two orphans split the row instead. */
@media (min-width:901px){
  .mr-grid-3:has(>:nth-child(3n/**/+2):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .mr-grid-3:has(>:nth-child(3n/**/+2):last-child)>*{grid-column:span 2}
  .mr-grid-3:has(>:nth-child(3n/**/+2):last-child)>:nth-last-child(-n/**/+2){grid-column:span 3}
}
@media (max-width:900px){.mr-grid-3,.mr-grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.mr-grid-2,.mr-grid-3,.mr-grid-4{grid-template-columns:1fr}}
.mr-card{position:relative;isolation:isolate;border:1px solid var(--card-border);border-radius:var(--r);padding:26px;display:block;color:var(--text);background:var(--surface);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.mr-card>*{position:relative;z-index:1}
.mr-card::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),var(--card-spotlight),transparent 64%)}
.mr-card:hover{transform:translateY(-4px);border-color:var(--card-border-hover);box-shadow:var(--shadow-md);color:var(--text)}
.mr-card:hover::before{opacity:1}
.mr-card .ic{width:42px;height:42px;border-radius:var(--radius-md);background:var(--surface-2);display:grid;place-items:center;margin-bottom:var(--space-4);color:var(--text);transition:background .35s var(--ease)}
.mr-card:hover .ic{background:var(--text);color:var(--bg)}
.mr-card h3{font-size:var(--fs-xl);margin:0 0 var(--space-2)}
.mr-card p{font-size:var(--fs-md);color:var(--text-2);margin:0}
.mr-card .more{display:inline-flex;gap:6px;margin-top:14px;font-weight:600;font-size:var(--fs-sm);color:var(--text)}
/* Grid cards with a trailing "Read more →" link: pin it to the card foot so the links line up across a row */
.mr-grid>.mr-card:has(>.more){display:flex;flex-direction:column}
.mr-grid>.mr-card>.more{margin-top:auto;padding-top:14px;align-self:flex-start}

/* comparison / spec table (case studies) */
.mr-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mr-table{width:100%;border-collapse:collapse;font-size:var(--fs-md);min-width:520px}
.mr-table th,.mr-table td{border:1px solid var(--border);padding:var(--space-3) var(--space-4);text-align:left;vertical-align:top;color:var(--text-2);line-height:1.6}
.mr-table thead th{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text);background:var(--surface-2);font-weight:600}
.mr-table tbody td:first-child{font-weight:600;color:var(--text)}
/* Phones: tables of up to 3 columns fit the viewport (no clipped "Nachher"/"Was es den Betrieb kostete"
   column hidden behind an invisible side-scroll); wider tables keep the scroll wrapper. */
@media (max-width:620px){
  .mr-table:not(:has(th:nth-child(4))){min-width:0}
  .mr-table th,.mr-table td{padding:var(--space-2) var(--space-3);font-size:var(--fs-sm)}
  .mr-table thead th{letter-spacing:0}
  /* NL/DE/FR compounds: hyphenate where the browser can, and never let a long word push a column out of view */
  :is(html[lang="de"],html[lang="nl"],html[lang="fr"]) .mr-table :is(th,td){-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
  :is(html[lang="de"],html[lang="nl"],html[lang="fr"]) .mr-table thead th{text-transform:none;font-size:12px}
}
.mr-fineprint{font-size:var(--fs-xs);line-height:1.6;color:var(--text-3)}

/* logo marquee */
/* Edge fade via gradient overlays rather than -webkit-mask-image: iOS Safari
   blanks a masked element that has an animated child (the scrolling track), so
   the logo marquee rendered empty on iPhone/iPad. Overlays match the page bg
   (--bg) and avoid the mask-compositing bug entirely. */












/* FAQ */
.mr-faq details{background:var(--surface);border-radius:var(--r);margin-bottom:var(--space-3);overflow:hidden}
.mr-faq summary{list-style:none;cursor:pointer;padding:20px var(--space-6);font-family:var(--display);font-weight:600;font-size:var(--fs-lg);display:flex;justify-content:space-between;gap:var(--space-4);align-items:center}
.mr-faq summary::-webkit-details-marker{display:none}
.mr-faq summary::after{content:"+";font-size:var(--fs-3xl);color:var(--text-2);transition:transform var(--dur-base)}
.mr-faq details[open] summary::after{transform:rotate(45deg)}
.mr-faq .a{padding:0 var(--space-6) 22px;color:var(--text-2);font-size:var(--fs-md);line-height:1.7}
/* Phone tap targets (page-level inline styles leave these ~24-35px tall): contact "Prefer to talk?" links, sector filter pills */
@media (max-width:620px){
  aside .mr-talk{gap:2px}
  .mr-talk a{padding:10px 0}
  .mr-filters .mr-filter{padding:11px 16px}
}


/* CTA band */
.mr-cta-band{max-width:var(--maxw);margin:40px auto;padding:0 28px}
.mr-cta-band .in{background:linear-gradient(120deg,var(--surface-2),var(--bg-2));border-radius:var(--r-lg);padding:54px 44px;text-align:center;position:relative;overflow:hidden}
.mr-cta-band .in::before{content:"";position:absolute;left:50%;top:-32%;width:72%;height:96%;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--m) 20%,transparent),color-mix(in srgb,var(--i) 12%,transparent) 55%,transparent 75%);filter:blur(36px)}
.mr-cta-band .in>*{position:relative;z-index:1}
.mr-cta-band h2{font-size:var(--fs-h1);margin:0 0 var(--space-3)}
@media (max-width:520px){.mr-cta-band h2{font-size:clamp(24px,7.2vw,32px)}}  /* "d'étranglement", "documentproces" fit the 246px band */
.mr-cta-band p{color:var(--text-2);max-width:560px;margin:0 auto 26px}
/* Recurring brand motif: the homepage hero's signature orbit, reused as a
   luminous dot circling the CTA band's right side. Pure CSS (no markup change
   across the ~150 CTA bands), clipped by .in{overflow:hidden}, and auto-stops
   under prefers-reduced-motion via the global rule below. */
.mr-cta-band .in::after{content:"";position:absolute;left:82%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--text);box-shadow:0 0 12px 2px color-mix(in srgb,var(--m) 85%,transparent),0 0 26px 7px color-mix(in srgb,var(--i) 45%,transparent);transform-origin:0 0;animation:mr-cta-orbit 18s linear infinite;pointer-events:none;z-index:0}
@keyframes mr-cta-orbit{from{transform:rotate(0) translateX(70px) rotate(0)}to{transform:rotate(360deg) translateX(70px) rotate(-360deg)}}
@media (max-width:680px){.mr-cta-band .in::after{left:88%}}

/* breadcrumb — sits on the following hero/pagehead aurora (overlaps it) so it reads
   as part of the page header rather than a separate band on the black canvas */
.mr-crumb{position:relative;z-index:3;margin:0 0 -34px;padding:22px max(28px,calc((100% - var(--maxw))/2)) 0;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-2);letter-spacing:.04em}
.mr-crumb a{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--border-highlight);text-underline-offset:3px;transition:color var(--dur-fast) var(--ease),text-decoration-color var(--dur-fast) var(--ease)}.mr-crumb a:hover{color:var(--text);text-decoration-color:currentColor}
.mr-crumb .sep{margin:0 var(--space-1);opacity:.45}

/* page hero (inner pages) */
/* sitewide aurora page-head — default brand tint; override --ta/--tb inline per page/service */
.mr-pagehead{position:relative;isolation:isolate;overflow:hidden;padding:80px max(28px,calc((100% - var(--maxw))/2)) 44px}
.mr-pagehead>*{position:relative;z-index:1}
.mr-pagehead h1{font-size:var(--fs-display);letter-spacing:-.025em;margin:0 0 14px}
.mr-pagehead p{font-size:var(--fs-xl);color:var(--text-2);max-width:680px}
.mr-pagehead::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;mix-blend-mode:screen;background:radial-gradient(50vw 38vw at 4% -30%,var(--ta,var(--i)),transparent 60%),radial-gradient(44vw 34vw at 99% -42%,var(--tb,var(--m)),transparent 62%);animation:mr-drift-a 30s var(--ease) infinite}
.mr-pagehead::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 130% at 28% -12%,transparent 46%,color-mix(in srgb,var(--bg) 50%,transparent) 78%,var(--bg) 100%)}
.mr-ph-aurora{display:none}
@media (prefers-reduced-motion:reduce){.mr-pagehead::before{animation:none!important}}

/* pill chips / tags */
.mr-chip{display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);background:var(--surface-2);padding:6px var(--space-3);border-radius:var(--r-pill);margin:0 6px 6px 0}

/* Certifications: technology partners as hairline rows (logo · what we build on it · related service),
   and the client-review row with the live Clutch badge. */
.mr-partner-rows{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--border)}
.mr-partner-row{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:14px 40px;align-items:center;padding:24px 0;border-bottom:1px solid var(--border)}
.mr-partner-mark{display:flex;align-items:center;height:48px}
.mr-skin .mr-partner-mark img{height:var(--h,40px);width:auto;max-width:170px;object-fit:contain;object-position:left center}
.mr-partner-row h3{margin:0 0 4px;font-size:20px;font-weight:500;letter-spacing:-.02em}
.mr-partner-row p{margin:0;color:var(--text-2);font-size:15px;line-height:1.6}
.mr-partner-row .mr-office-links{padding-top:0}
.mr-verify{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px 64px;align-items:end}
.mr-verify .mr-h2{margin-top:6px}
.mr-verify-badge{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding-bottom:6px}
.mr-verify-badge .mr-office-links{padding-top:0}
@media(max-width:860px){.mr-partner-row{grid-template-columns:1fr;gap:10px}.mr-verify{grid-template-columns:1fr;align-items:start}}

/* Careers: one quiet line pointing to the independent employee-review platforms */
.mr-team-reviews{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px;margin:44px 0 0;padding-top:24px;border-top:1px solid var(--border);font-size:15px;line-height:1.6;color:var(--text-2)}
.mr-skin .mr-team-reviews .mr-eyebrow{display:inline;margin:0}
.mr-team-reviews a{color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--text) 35%,transparent)}
.mr-team-reviews a:hover{text-decoration-color:var(--text)}

/* Official Clutch widget (mr_clutch_widget()): the profile link shows until Clutch draws its iframe,
   and stays as the only content when a blocker stops the widget. */
.mr-clutch{max-width:100%}
.mr-clutch .clutch-widget iframe{display:block;max-width:100%}
.mr-clutch--t2{width:240px}
.mr-clutch-wall{margin-top:32px}
.mr-clutch-fallback{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-decoration:none}
.mr-clutch:has(iframe) .mr-clutch-fallback{display:none}

/* Google rating badge */







.mr-reviews{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:34px}
.mr-review{display:inline-flex;align-items:center;gap:var(--space-2);padding:11px 18px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font-weight:600;font-size:var(--fs-base);line-height:1;transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.mr-review:hover{border-color:var(--ac-border);background:var(--surface-2);color:var(--text);transform:translateY(-2px)}
.mr-review-score{font-weight:400;color:var(--text-2)}
.mr-card-score{margin:0 0 8px;font-size:var(--fs-btn-sm)}
.mr-review .go{opacity:.5;font-size:var(--fs-sm)}

/* ============================================================================
   FOOTER (new markup .mr-footer)
   ========================================================================== */
.mr-footer{position:relative;background:linear-gradient(180deg,var(--bg-2),var(--bg));border-top:1px solid var(--border-soft);margin-top:var(--space-16);overflow:hidden}
.mr-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--i) 55%,transparent),color-mix(in srgb,var(--m) 45%,transparent),transparent)}
.mr-footer::after{content:"";position:absolute;top:-34%;left:50%;width:760px;max-width:90%;height:60%;transform:translateX(-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--i) 10%,transparent),transparent 72%);pointer-events:none}
/* The footer content spans the page content width (--maxw); the side padding sits outside it. */
.mr-footer .in{position:relative;z-index:1;max-width:calc(var(--maxw) + 56px);margin:0 auto;padding:48px 28px 16px}
.mr-foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px 40px}
.mr-foot-brand .mr-logo{margin-bottom:14px}
.mr-foot-brand>p{font-size:var(--fs-base);line-height:1.65;color:var(--text-2);max-width:360px;margin:0}
.mr-foot-contact{margin-top:20px}
.mr-foot-label{display:block;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);margin-bottom:4px}
/* Offices: company name and address of each office, in one row above the legal line */
.mr-foot-offices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;margin-top:40px;padding-top:28px;border-top:1px solid var(--border-soft)}
.mr-foot-office{font-style:normal;font-size:var(--fs-sm);line-height:1.6;color:var(--text-2)}
.mr-foot-office strong{color:var(--text);font-weight:500}
.mr-foot-dir{display:inline-flex;align-items:center;gap:6px;min-height:40px;color:var(--text);text-decoration:none}
@media (max-width:700px){.mr-foot-offices{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:32px}}
.mr-foot-col h4,.mr-foot-col h3{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin:0 0 10px}
.mr-foot-col a{display:block;color:var(--text-2);font-size:var(--fs-base);line-height:1.4;padding:4px 0;transition:color var(--dur-fast) var(--ease)}
.mr-foot-col a:hover{color:var(--text)}
.mr-foot-col .mr-foot-sub{margin:14px 0 2px;padding-top:12px;border-top:1px solid var(--border-soft)}
.mr-foot-col .mr-foot-sub a{display:inline-flex;align-items:center;min-height:32px;padding:0;font-size:inherit;color:inherit}
.mr-foot-col .mr-foot-sub a:hover{text-decoration:underline;text-underline-offset:4px}
.mr-offices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);border-top:1px solid var(--border-soft);margin-top:52px;padding-top:38px}
/* Two offices on a page body (e.g. /contact: EU + UK; New Delhi has its own block) fill the row instead of leaving a third empty */
@media (min-width:561px){.mr-section .mr-offices:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
.mr-office h5,.mr-office h4{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin:0 0 var(--space-2)}
.mr-office p{font-size:var(--fs-xs);color:var(--text-3);line-height:1.7;margin:0}
/* Contact page: single-office "visit us" block (address card + map) */
/* Careers: open-role cards + application checklist */
.mr-roles{display:grid;gap:22px;margin-top:30px}
.mr-role{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:26px 34px}
.mr-role h3{margin:0 0 10px}
.mr-role-badge{display:inline-block;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:10px}
.mr-role-intro .mr-hero-cta{margin-top:var(--space-6)}  /* "Include these in your application": buttons were touching the paragraph */
.mr-role-meta{list-style:none;margin:14px 0 20px;padding:0;color:var(--text-3);font-size:var(--fs-sm);line-height:1.9}
.mr-role-meta i{width:18px;color:var(--text-2)}
.mr-role-skills h4{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin:0 0 10px}
.mr-role-skills ul{margin:0;padding-left:18px;color:var(--text-2);font-size:var(--fs-md);line-height:1.7}
.mr-role-skills li+li{margin-top:6px}
.mr-checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:center;color:var(--text-2)}
.mr-checklist i{color:var(--text);margin-right:10px}
@media (max-width:900px){.mr-role{grid-template-columns:1fr}}
.mr-foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;border-top:1px solid var(--border-soft);margin-top:32px;padding:12px 0 64px;font-size:var(--fs-md);color:var(--text-2)}
.mr-foot-bottom p{margin:0}
.mr-foot-legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.mr-foot-legal a{display:inline-flex;align-items:center;min-height:40px;color:var(--text-2)}
.mr-foot-legal a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}

/* partners + accreditations band — full-width row at the top of the footer (prominent partner logos) */
.mr-partnerband{display:flex;flex-direction:column;align-items:center;text-align:center;gap:30px;padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid var(--border-soft)}
.mr-partnerband .mr-eyebrow{white-space:nowrap;margin:0 0 var(--space-4)}
.mr-pb-group{min-width:0;width:100%}
.mr-pb-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-4) 18px;width:100%}
.mr-pb-logos img{height:52px;width:auto;object-fit:contain;transition:transform .25s var(--ease)}
/* No tile: logos sit directly on the black footer; the dark-variant files reverse their wordmarks to white. */
.mr-pb-logos{background:none;padding:12px 20px}
.mr-pb-logos img:hover{transform:translateY(-3px)}
/* the Google Cloud asset carries extra internal padding — compensate */
.mr-pb-logos img[src*="google-cloud"]{height:64px}

/* Footer social: one size, one monochrome colour, no brand tints. */
.mr-foot-brand-social{display:flex;gap:2px;margin:10px 0 0 -10px}
.mr-foot-brand-social a{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-btn);color:var(--text);transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.mr-foot-brand-social a:hover{background:var(--surface-2)}
/* Brand colours (X has no colour of its own, so it stays white on the dark footer). */
.mr-foot-brand-social .fa-linkedin{color:var(--brand-linkedin)}.mr-foot-brand-social .fa-facebook{color:var(--brand-facebook)}.mr-foot-brand-social .fa-instagram{color:var(--brand-instagram)}
.mr-foot-brand-social :is(.mr-ico,.mr-x-icon){display:grid;place-items:center;width:18px;height:18px}
.mr-foot-brand-social a svg{display:block;width:18px;height:18px}
.mr-foot-brand-social a .mr-x-icon svg{width:16px;height:16px}
.mr-x-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:var(--text)}.mr-x-icon svg{display:block;width:1em;height:1em}
i.mr-ico{display:inline-flex;align-items:center;justify-content:center;line-height:0;font-style:normal}i.mr-ico svg{display:block;width:1em;height:1em}i.mr-ico::before{content:none}
@media(max-width:820px){.mr-partnerband{gap:var(--space-6)}}
/* Phones: three equal cells per row, last row centred (3 over 2). The dark files share one padded
   200x100 canvas, so one box size gives even weight; this also cancels the Google Cloud upsize.
   The icon-only Shopify mark has no built-in padding, so it is drawn shorter to match. */
@media(max-width:680px){
.mr-pb-logos{gap:var(--space-4) 8px;padding:12px 0}
.mr-pb-logos img,.mr-pb-logos img[src*="google-cloud"]{flex:0 0 calc(33.33% - 6px);height:48px}
.mr-pb-logos img[src*="shopify"]{height:30px}
}
/* Social icons in their original brand colours — subtle pops of colour against the monochrome UI.
   Icon colours win over the inherited neutral, and circles still lighten on hover for feedback. */
.mr-team-social .fa-linkedin{color:var(--brand-linkedin)}

.mr-team-social .fa-envelope{color:var(--i)}
.mr-team-social a:hover i{filter:brightness(1.18)}
/* header social — subtle muted icons that pop to brand colour on hover (premium, uncluttered) */





/* keep the primary CTA on one line; drop header social a touch earlier so the bar never crowds
   (social still shows in the footer, and in the mobile drawer below 1080) */
.mr-cta{white-space:nowrap}

/* Desktop nav between 1281–1499px: the longer NL/DE/FR labels squashed the logo (FR at 1366
   rendered it ~28px wide) and butted "Ressources" against the social icons. Never shrink the
   logo, tighten the nav a little, and drop the header social icons (still in footer + drawer) ≤1400. */
.mr-logo{flex-shrink:0}
@media (min-width:1281px) and (max-width:1499px){
  html:not([lang="en"]) .mr-nav{margin-left:var(--space-6)}
  html:not([lang="en"]) .mr-nav-link{padding:10px 11px}
  html:not([lang="en"]) .mr-nav-link.is-current::after{left:11px;right:11px}
  
}

/* language dropdown — compact toggle that frees header space */
.mr-langdd{position:relative}
.mr-langdd-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;color:var(--text-2);padding:5px 9px;border-radius:var(--radius-sm)}
.mr-langdd-btn:hover,.mr-langdd.open .mr-langdd-btn{color:var(--text);background:var(--ac-soft)}
.mr-langdd-btn .chev{width:12px;height:12px;transition:transform var(--dur-fast)}
.mr-langdd:hover .mr-langdd-btn .chev,.mr-langdd.open .mr-langdd-btn .chev{transform:rotate(180deg)}
.mr-langdd-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:58px;display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid var(--border-soft);border-radius:var(--radius-md);background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);box-shadow:0 16px 38px color-mix(in srgb,var(--black) 50%,transparent);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:996}
.mr-langdd:hover .mr-langdd-menu,.mr-langdd:focus-within .mr-langdd-menu,.mr-langdd.open .mr-langdd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.mr-langdd-menu a{font-family:var(--mono);font-size:var(--fs-xs);text-transform:uppercase;color:var(--text-3);padding:7px 11px;border-radius:var(--radius-sm);text-align:center}
.mr-langdd-menu a:hover,.mr-langdd-menu a.is-active{color:var(--text);background:var(--ac-soft)}
/* social icons inside the mobile drawer */
/* phone and email under the menu sections: tap to call or write */
.mr-mobile-contact{list-style:none;margin:18px 0 0;padding:0}
.mr-mobile .mr-mobile-contact a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0;color:var(--text);font-size:var(--fs-base)}
.mr-mobile-contact svg{flex:none;width:18px;height:18px;color:var(--text-2)}
.mr-mobile-social{display:flex;gap:var(--space-3);margin-top:26px}
.mr-mobile .mr-mobile-social a{width:44px;height:44px;padding:0;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--text-2);font-size:var(--fs-2xl)}
.mr-mobile-social .fa-linkedin{color:var(--brand-linkedin)}.mr-mobile-social .fa-facebook{color:var(--brand-facebook)}
.mr-mobile-social .fa-instagram{color:var(--brand-instagram)}
.mr-mobile .mr-mobile-social a:hover{background:var(--ac-soft)}
/* reviews page — Google (Elfsight) + Sortlist badge row */





@media (max-width:900px){.mr-foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}.mr-foot-brand{grid-column:1/-1}.mr-offices{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mr-offices{grid-template-columns:1fr}
  .mr-foot-grid{grid-template-columns:1fr 1fr;gap:36px 20px}
  .mr-foot-grid>.mr-foot-col:first-of-type{grid-row:span 2}
  .mr-foot-bottom{flex-direction:column;align-items:flex-start;gap:4px}
  /* comfortable touch targets for footer links on phones */
  .mr-foot-col a{padding:8px 0}
  .mr-foot-col h4 a,.mr-foot-col h3 a{display:inline-block;padding:6px 0}}

/* consent banner (monochrome) */
.default-banner{position:fixed;left:18px;bottom:18px;z-index:1200;max-width:460px;background:var(--surface);border-radius:var(--r);padding:18px 20px;box-shadow:0 18px 50px color-mix(in srgb,var(--black) 60%,transparent);display:flex}
/* The banner paints with the page (no late JS reveal that would become the LCP); a returning visitor who
   already chose is flagged on <html> by an inline head script in mr_head(), so it never flashes. */
.mr-consented .default-banner{display:none}
.default-banner p{font-size:var(--fs-sm);color:var(--text-2);margin:0 0 var(--space-3);line-height:1.6}
.banner-buttons{display:flex;gap:10px;flex-wrap:wrap}
.accept-banner-btn{background:var(--grad);color:var(--on-primary);border:0;font-size:var(--fs-btn-sm);font-weight:var(--fw-btn);padding:9px 18px;border-radius:var(--radius-btn);cursor:pointer;font-family:var(--body)}
.settings-btn{background:transparent;border:var(--btn-border) solid color-mix(in srgb,var(--text) var(--btn-line),transparent);color:var(--text);font-size:var(--fs-btn-sm);font-weight:500;padding:9px 18px;border-radius:var(--radius-btn);cursor:pointer;font-family:var(--body);transition:border-color var(--dur-base) var(--ease),background-color var(--dur-base) var(--ease)}
.settings-btn:is(:hover,:focus-visible){background:color-mix(in srgb,var(--text) var(--btn-fill-hover),transparent);border-color:color-mix(in srgb,var(--text) var(--btn-line-hover),transparent)}
.cookies-btn{position:fixed;left:18px;bottom:18px;z-index:1190;background:var(--surface);color:var(--text-2);border:0;border-radius:var(--r-pill);padding:9px var(--space-4);font-size:var(--fs-xs);cursor:pointer;box-shadow:0 8px 24px color-mix(in srgb,var(--black) 40%,transparent)}
.cookies-btn:hover{color:var(--text)}
/* region-aware order (flag set in mr_head from the time zone): matching items first in [data-rg-sort] lists; order only,
   nothing hidden. Applies from first paint; the head script then moves the nodes so focus order matches. */
html[data-rg=eu] [data-rg-sort]>[data-rg~=eu],html[data-rg=in] [data-rg-sort]>[data-rg~=gov]{order:-2}
html[data-rg=eu] [data-rg-sort]>[data-rg~=intl]:not([data-rg~=eu]),html[data-rg=in] [data-rg-sort]>[data-rg~=in]:not([data-rg~=gov]){order:-1}
/* language suggestion (js/lang-suggest.js): fixed overlay under the header, clear of the cookie banner (bottom-left)
   and chat (bottom-right); appears after load and takes no layout space, so no shift */
.mr-langsuggest{position:fixed;top:calc(var(--nav-h) + 12px);right:18px;z-index:990;max-width:380px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 12px;background:var(--surface);border-radius:var(--r);padding:14px 14px 14px 18px;box-shadow:0 18px 50px color-mix(in srgb,var(--black) 60%,transparent);opacity:0;transform:translateY(-8px);transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.mr-langsuggest.is-in{opacity:1;transform:none}
.mr-langsuggest p{grid-column:1;margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--text-2)}
.mr-langsuggest-x{grid-column:2;grid-row:1;align-self:start;width:32px;height:32px;margin:-6px -4px 0 0;border:0;border-radius:50%;background:transparent;color:var(--text-2);font-size:22px;line-height:1;cursor:pointer}
.mr-langsuggest-x:is(:hover,:focus-visible){color:var(--text);background:color-mix(in srgb,var(--text) var(--btn-fill-hover),transparent)}
.mr-langsuggest-go{grid-column:1/-1;justify-self:start;background:var(--grad);color:var(--on-primary);font-weight:700;font-size:var(--fs-sm);padding:9px 18px;border-radius:var(--radius-btn);text-decoration:none}
body.mr-menu-open .mr-langsuggest{display:none}   /* under the header, mega and mobile menus (z 995+) */
@media (max-width:520px){.mr-langsuggest{left:12px;right:12px;max-width:none}}
@media (prefers-reduced-motion:reduce){.mr-langsuggest{transition:none;transform:none}}
.cookies-popup{position:fixed;inset:0;z-index:1300;background:color-mix(in srgb,var(--black) 60%,transparent);display:none;align-items:center;justify-content:center;padding:20px}
.cookies-content{background:var(--surface);border-radius:var(--r-lg);max-width:520px;width:100%;padding:30px;box-shadow:0 30px 80px color-mix(in srgb,var(--black) 70%,transparent)}
.cookies-header h2{font-size:var(--fs-3xl);margin:0 0 6px}
.cookies-header .subtitle,.cookies-main p,.option-desc{color:var(--text-2);font-size:var(--fs-sm);line-height:1.6}
.cookies-buttons{display:flex;gap:10px;margin-top:var(--space-4);flex-wrap:wrap}
.accept-btn,.save-btn{background:var(--grad);color:var(--on-primary);border:0;font-weight:700;padding:10px 20px;border-radius:var(--radius-btn);cursor:pointer;font-family:var(--body)}
.manage-btn{background:transparent;border:1px solid var(--ac-border);color:var(--text);padding:10px 20px;border-radius:var(--radius-btn);cursor:pointer;font-family:var(--body)}
.cookie-option{padding:14px 0;border-top:1px solid var(--border-soft)}
.cookie-option label{color:var(--text);font-weight:600;font-size:var(--fs-md)}
.save-btn{margin-top:14px}
.cookies-footer{margin-top:var(--space-4);font-size:var(--fs-xs);color:var(--text-3)}
.cookies-footer a{color:var(--text-2);text-decoration:underline}
/* WhatsApp FAB */
.mr-chat{position:fixed;right:18px;bottom:18px;z-index:900}
.mr-chat-wa{width:54px;height:54px;border-radius:50%;background:var(--brand-whatsapp);display:grid;place-items:center;box-shadow:0 10px 30px color-mix(in srgb,var(--black) 40%,transparent);transition:transform var(--dur-base)}
.mr-chat-wa:hover{transform:scale(1.08)}
.mr-chat-wa svg{width:58%;height:58%;fill:var(--text)}
@media (max-width:768px){.mr-chat{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}.default-banner{left:10px;right:10px;max-width:none}}

/* ---------- scroll-reveal + motion ---------------------------------------- */
/* Page content is immediately readable; scrolling never gates its visibility. */
[data-reveal]{opacity:1;transform:none}
/* Above the fold (hero and page head) animates in from first paint with CSS alone, so the
   LCP headline is not held at opacity 0 until the deferred JS observer runs. */
.mr-hero [data-reveal],.mr-hero-trust[data-reveal],.mr-pagehead[data-reveal]{opacity:1;transform:none;transition:none;animation:mr-rise .7s var(--ease) both}
.mr-hero-visual[data-reveal]{animation-delay:.08s}
@keyframes mr-rise{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}

/* utilities */


.mr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- Illustration media panel: seats light topic illustrations on the dark 2026 theme --- */
.mr-figure{position:relative;margin:0 auto;max-width:min(780px,calc(100% - 56px));display:grid;justify-items:center;gap:14px;background:linear-gradient(168deg,var(--text),var(--paper-2));border:1px solid color-mix(in srgb,var(--bg) 10%,transparent);border-radius:var(--r-lg);padding:30px 30px 22px;overflow:hidden;box-shadow:0 30px 80px -30px color-mix(in srgb,var(--black) 70%,transparent)}
.mr-figure::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--i),var(--m),var(--a))}
.mr-figure img{width:100%;height:auto;max-width:560px;display:block}
.mr-figure figcaption{font-size:var(--fs-sm);color:var(--text-4);text-align:center;max-width:560px;line-height:1.55;margin:0}

/* a11y: in-content links distinguishable without relying on colour */
.mr-main p a,.mr-faq .a a{text-decoration:underline;text-underline-offset:2px}

/* Legal/definition tables — keep within viewport and wrap long strings (mobile + desktop) */
.mr-legal{max-width:880px}   /* readable measure for long-form legal copy (was ~160 chars/line at 1440) */
.mr-legal table{table-layout:fixed!important}
.mr-legal table td,.mr-legal table th{word-break:break-word;overflow-wrap:anywhere}
.mr-legal table td:first-child{white-space:normal!important}
@media (max-width:600px){.mr-legal table td:first-child{width:36%!important}}

/* Long NL/DE/FR compounds ("Beschwerdemanagement", "documentverwerking") on phones: hyphenate
   properly instead of breaking mid-word without a hyphen (overflow-wrap fallback). */
@media (max-width:720px){
  :is(html[lang="de"],html[lang="nl"],html[lang="fr"]) :is(h1,h2,h3,.mr-stat b,.mr-stat span,.mr-cta-band h2){-webkit-hyphens:auto;hyphens:auto}
}

   Page components (moved here from per-page <style> blocks that were
   duplicated in every language copy). Scoped by their own classes.
   ====================================================================== */
/* legal pages: privacy, terms, cookie policy */
.mr-legal{max-width:860px}
.mr-legal h2{font-size:17px;font-weight:600;margin:32px 0 10px;color:var(--text)}
.mr-legal h4{font-size:15px;font-weight:600;margin:28px 0 8px;color:var(--text)}
.mr-legal p,.mr-legal li{font-size:15px;line-height:1.75;color:var(--text-2);margin-bottom:10px}
.mr-legal ol,.mr-legal ul{padding-left:22px;margin-bottom:10px}
.mr-legal table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.mr-legal th,.mr-legal td{border:1px solid var(--border);padding:10px 14px;text-align:left;vertical-align:top;color:var(--text-2);line-height:1.6}
.mr-legal th,.mr-legal td:first-child{color:var(--text);font-weight:600}
.mr-legal td:first-child{width:28%}
/* office cards inside page content (contact, quote, offices) — the footer keeps its own compact style */
.mr-main .mr-offices{gap:24px;margin-top:30px}
.mr-main .mr-office h3{font-size:16px;font-weight:600;margin-bottom:8px}
.mr-main .mr-office p{font-size:14px;line-height:1.7;color:var(--text-2)}
.mr-main .mr-office a{color:var(--text-2)}
.mr-main .mr-office a:hover{color:var(--text)}
.mr-main .mr-office .mr-office-meta{margin-top:12px}
.mr-main .mr-office .mr-office-meta a:has(> .mr-tl){display:inline-flex;align-items:center;gap:6px}
.mr-office-icon img{height:52px;width:auto;margin-bottom:10px;filter:brightness(0) invert(1)}
@media(max-width:700px){.mr-main .mr-offices{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.mr-main .mr-offices{grid-template-columns:1fr}}
/* contact page: reassurance rail + form */
/* two-column message section: trust/reassurance rail + form (conversion layout) */
.mr-contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:start}
.mr-contact-aside .mr-lead{margin-bottom:22px}
.mr-assure{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:12px}
.mr-assure li{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--text-2)}
.mr-assure i{color:var(--i);margin-top:3px;flex-shrink:0}
.mr-talk{display:flex;flex-direction:column;gap:11px;padding:20px 22px;margin-bottom:22px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.mr-talk-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.mr-talk a{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:600;font-size:15px;text-decoration:none}
.mr-talk a i{width:18px;text-align:center;color:var(--i)}
.mr-talk a:hover{color:var(--text)}
.mr-contact-form-col .mr-form-card{max-width:none;margin-top:0}
.mr-contact-aside h1{font-size:clamp(28px,3.2vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
.mr-main:has(.mr-contact-grid) .mr-crumb{margin-bottom:8px}
@media(max-width:860px){.mr-contact-grid{grid-template-columns:1fr;gap:30px}}
/* simple forms (data-deletion request, newsletter) */
.mr-captcha-row svg{cursor:pointer;color:var(--text-2);flex-shrink:0}

label.error{color:var(--danger);font-size:13px}
/* long translated words (NL/DE compounds) stay inside stat tiles and cards at 360-390px */
.mr-main .mr-stats,.mr-main .mr-stat,.mr-main .mr-grid>.mr-card{min-width:0}
.mr-main .mr-stat,.mr-main .mr-stat span,.mr-main .mr-card h3,.mr-main .mr-card p{overflow-wrap:break-word;hyphens:auto}
@media (max-width:430px){.mr-main .mr-stats{gap:12px}.mr-main .mr-stat{padding:20px 12px}.mr-main .mr-stat b{font-size:clamp(26px,9vw,40px)}.mr-main .mr-stat span{font-size:12px}}
/* case-study filters */
.mr-filters{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 2px}
.mr-filter{font-family:var(--mono);font-size:var(--fs-md);letter-spacing:.04em;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--border);background:transparent;color:var(--text-2);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.mr-filter:hover{color:var(--text);border-color:var(--ac-border)}
.mr-filter[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:transparent;font-weight:600}
.mr-card.is-hidden{display:none}
/* ---- Offices (company/offices) ---- */
.mr-office-list,.mr-cert-list{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border);border-left:1px solid var(--border)}
.mr-office-card,.mr-cert-card{display:flex;flex-direction:column;padding:30px 28px 26px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.mr-office-top,.mr-cert-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mr-office-list .mr-office-card .mr-office-icon img{height:44px;width:44px;margin:0}
.mr-office-card h3,.mr-cert-card h3{margin:22px 0 10px;font-size:clamp(21px,1.8vw,24px);font-weight:500;letter-spacing:-.02em}
.mr-office-card address{font-style:normal;color:var(--text-2);font-size:15px;line-height:1.7}
.mr-office-facts{margin:18px 0 0;display:grid;gap:12px}
.mr-office-facts dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.mr-office-facts dd{margin:4px 0 0;color:var(--text);font-size:15px;line-height:1.5}
.mr-office-links{display:flex;flex-wrap:wrap;gap:4px 22px;margin:auto 0 0;padding-top:22px}
.mr-office-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--text);font-size:14px;font-weight:500;text-decoration:none}
/* Arrow text links (the site pattern, as .mh-text-link / .mw-text-link): only the label (.mr-tl) underlines,
   on hover; the arrow (.mr-tl-arrow) never does and nudges instead. */
.mr-tl-arrow{display:inline-flex;transition:transform var(--dur-fast)}
.mr-main p a:has(> .mr-tl){text-decoration:none} /* body-copy links underline; arrow links in a paragraph don't */
a:is(:hover,:focus-visible) .mr-tl{text-decoration:underline;text-underline-offset:5px}
a:hover .mr-tl-arrow{transform:translateX(3px)}
a[target="_blank"]:hover .mr-tl-arrow{transform:translate(2px,-2px)}
/* Office addresses sit in an href-less <a> so iOS doesn't auto-link them (data detectors skip anchor text);
   the office's own Google links follow. It must look and act like plain text. */
a.mr-addr:not([href]){color:inherit;text-decoration:none;cursor:auto}
/* certifications: a seal per standard (page head strip and cards) */
.mr-cert-seals{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.mr-cert-seal{display:grid;place-items:center;flex:none;width:64px;height:64px;padding:0 7px;border-radius:50%;border:1px solid color-mix(in srgb,var(--text) 34%,transparent);outline:1px solid color-mix(in srgb,var(--text) 14%,transparent);outline-offset:-6px;font-family:var(--mono);font-size:10.5px;line-height:1.15;letter-spacing:.04em;text-align:center;color:var(--text)}
.mr-cert-seals .mr-cert-seal{width:76px;height:76px;font-size:12px}
.mr-cert-top .mr-person-role{text-align:right}
.mr-cert-card .mr-office-facts{margin-top:8px}
.mr-office-how{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--border)}
.mr-office-how li{padding:26px 24px 8px 0}
.mr-office-how li+li{padding-left:24px;border-left:1px solid var(--border)}
.mr-office-n{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.16em;color:var(--text-3)}
.mr-office-how h3{margin:14px 0 8px;font-size:19px;font-weight:500;letter-spacing:-.01em}
.mr-office-how p{margin:0;color:var(--text-2);font-size:15px;line-height:1.6}
@media (max-width:1000px){.mr-office-list{grid-template-columns:minmax(0,1fr)}.mr-cert-list{grid-template-columns:repeat(2,minmax(0,1fr))}.mr-office-how{grid-template-columns:repeat(2,minmax(0,1fr))}.mr-office-how li:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:640px){.mr-office-card,.mr-cert-card{padding:26px 20px}.mr-cert-list{grid-template-columns:minmax(0,1fr)}.mr-cert-seals{gap:6px}.mr-cert-seals .mr-cert-seal{width:48px;height:48px;font-size:9px;padding:0 4px;outline-offset:-4px}.mr-office-how{grid-template-columns:minmax(0,1fr)}.mr-office-how li,.mr-office-how li+li{padding:22px 0 6px;border-left:0}.mr-office-how li+li{border-top:1px solid var(--border)}}

/* ---- Leadership & team (company/team): profile cards on a hairline grid ---- */
.mr-people{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border);border-left:1px solid var(--border)}
.mr-person{position:relative;display:flex;flex-direction:column;gap:22px;padding:32px 28px 28px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);scroll-margin-top:calc(var(--nav-h) + 24px);transition:background-color var(--dur-base) var(--ease)}
.mr-person:hover{background:var(--surface)}
.mr-person-photo{width:112px;height:112px;border-radius:50%;object-fit:cover;border:1px solid var(--border);background:var(--surface-2)}
.mr-person-body{display:flex;flex-direction:column;flex:1}
.mr-person-role{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);line-height:1.5}
.mr-person-name{margin:8px 0 0;font-size:clamp(21px,1.8vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.mr-person-summary{margin:14px 0 0;color:var(--text-2);font-size:15px;line-height:1.65}
.mr-person-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:22px}
.mr-person-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.mr-person-more span{transition:transform var(--dur-fast) var(--ease)}
.mr-person-more:hover{text-decoration:underline;text-underline-offset:5px}
.mr-person-more:hover span{transform:translateX(3px)}
.mr-person-bio{display:none}
.mr-team-social{display:flex;gap:6px}
.mr-team-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-btn);color:var(--text-2);font-size:18px;transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.mr-team-social a:hover{color:var(--text);background:var(--surface-2)}
/* page head: the whole team at a glance */
.mr-team-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:30px}
.mr-team-faces{display:flex;flex-wrap:wrap;gap:6px}
.mr-team-faces img{width:48px;height:48px;object-fit:cover;background:var(--surface-2)}
/* Team hero: on wide screens the nine real portraits fill the right of the hero as a 3×3 grid
   and replace the small row of faces; phones keep the row. */
.mr-team-mosaic{display:none}
@media (min-width:1041px){
 .mr-team-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:72px}
 .mr-team-mosaic{display:grid;grid-template-columns:repeat(3,112px);gap:10px}
 .mr-team-mosaic img{display:block;width:112px;height:112px;object-fit:cover;background:var(--surface-2)}
 .mr-team-head .mr-team-faces{display:none}
}
@media (max-width:1000px){.mr-people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mr-people{grid-template-columns:minmax(0,1fr)}.mr-person{gap:16px;padding:26px 20px}.mr-person-photo{width:88px;height:88px}.mr-team-faces{gap:4px}.mr-team-faces img{width:32px;height:32px}}

  /* ---- Bio modal ---- */
  .mr-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px}
  .mr-modal[hidden]{display:none}
  .mr-modal-backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .mr-modal-card{position:relative;z-index:1;width:100%;max-width:660px;max-height:86vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:34px;box-shadow:0 30px 80px color-mix(in srgb,var(--black) 60%,transparent);animation:mr-modal-in .3s var(--ease)}
  @keyframes mr-modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .mr-modal-close{position:absolute;top:12px;right:16px;background:none;border:0;color:var(--text-2);font-size:30px;line-height:1;cursor:pointer;transition:color .2s var(--ease)}
  .mr-modal-close:hover{color:var(--text)}
  .mr-modal-head{display:flex;gap:20px;align-items:center;margin-bottom:18px;padding-right:28px}
  .mr-modal-photo{width:92px;height:92px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid var(--border-soft)}
  .mr-modal-name{margin:0 0 3px;font-size:22px}
  .mr-modal .mr-eyebrow{color:var(--text-2)}
  .mr-modal-bio p{color:var(--text-2);font-size:15px;line-height:1.75;margin:0 0 14px}
  .mr-modal-bio p:last-child{margin-bottom:0}
  .mr-modal-social{margin-top:12px}
  body.mr-modal-open{overflow:hidden}
  @media (max-width:560px){.mr-modal-head{flex-direction:column;text-align:center;padding-right:0}.mr-modal-card{padding:28px 20px}}
/* HTML sitemap */
.mr-sitemap{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 28px;margin-top:8px}
.mr-sitemap .col h2{font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--text);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.mr-sitemap ul{list-style:none;padding:0;margin:0}
.mr-sitemap li{margin:0 0 9px;line-height:1.4}
.mr-sitemap a{font-size:14px;color:var(--text-2);text-decoration:none;transition:color .2s var(--ease)}
.mr-sitemap a:hover{color:var(--text)}
@media(max-width:980px){.mr-sitemap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.mr-sitemap{grid-template-columns:1fr}.mr-sitemap li{margin:0 0 2px}.mr-sitemap a{display:inline-block;padding:6px 0}}
/* Original colour client artwork stays legible on dark proof strips. */
.mr-hero-trust-logos img:is([src*="/client/official/"],[src$="/pacific-malls.webp"]){background:var(--white);padding:6px 10px;filter:none;opacity:1;height:44px}

/* Accessible navigation and consent disclosures. */
.mr-skip{position:fixed;top:12px;left:20px;z-index:1400;background:var(--white);color:var(--black);padding:12px 20px;border-radius:var(--radius-btn);transform:translateY(-200%)}
.mr-skip:focus{transform:none;color:var(--black)}
.mr-burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
body.mr-mobile-open{overflow:hidden}
.cookies-content{position:relative;max-height:calc(100dvh - 40px);overflow:auto}
.cookies-close{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;background:transparent;color:var(--text);border:0;font-size:28px;cursor:pointer}
.cookies-header{padding-right:22px}
.banner-buttons button,.cookies-buttons button,.save-btn{min-height:44px}
@media(max-width:1280px){.mr-mobile{visibility:hidden;transition:transform .25s var(--ease),visibility .25s var(--ease)}body.mr-mobile-open .mr-mobile{visibility:visible}}
@media(max-width:520px){.default-banner{left:12px;right:12px;bottom:12px;max-width:none;padding:18px}.cookies-content{padding:24px 20px}.cookies-header h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mr-mobile{transition:none}}

.mr-chat-label{display:none}

.mr-foot-email{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(20px,2vw,24px);font-weight:500;letter-spacing:-.01em;color:var(--text);text-decoration:underline;text-decoration-color:var(--border-highlight);text-decoration-thickness:1px;text-underline-offset:6px;transition:text-decoration-color var(--dur-fast) var(--ease)}
.mr-foot-email:hover{text-decoration-color:currentColor}
.mr-foot-phone{display:flex;align-items:center;width:max-content;min-height:44px;font-size:var(--fs-md);color:var(--text-2);text-decoration:underline;text-decoration-color:var(--border-highlight);text-underline-offset:4px}
.mr-foot-phone:hover{color:var(--text);text-decoration-color:currentColor}
.mr-office .map-link{display:inline-block;color:var(--text-2)}
.mr-office .map-link:hover{text-decoration:underline;text-underline-offset:4px}

.default-banner{flex-direction:column;align-items:stretch}
@media(max-width:520px){.banner-buttons{display:grid;grid-template-columns:1fr}}   /* stacked: long NL/DE/FR labels stay on one line */

/* ---- Service pages (registry engine: includes/partials/mr-service-sections.php) ---- */











/* ===============================================================.mr-svc-links a.is-parent{color:var(--text);font-weight:600}

/* =====================================================================
   HOMEPAGE DESIGN SYSTEM FOR ALL OTHER PAGES (body.mr-skin, set by mr_head on every page
   that has no page-specific body class: company, case studies, products, industries,
   resources, legal, contact, blog and the /services catalogue). Same type scale, mono
   eyebrows, hairlines, square corners, flat cobalt actions and white/black bands as the
   homepage and service pages; no aurora, orb or glow effects.
   ===================================================================== */
.mr-skin{--maxw:1280px}
/* Light bands re-declare the token aliases (including --maxw); keep one page width, and align
   every section's content edge with the page head (80px gutter at 1440px, as on the homepage). */
.mr-skin .mr-main>*{--maxw:1280px!important}
.mr-skin :is(.mr-section,.mr-section--tight,.mr-cta-band,.mr-hero-trust){max-width:calc(var(--maxw) + 56px)}
.mr-skin .mr-main{background:var(--bg)}
.mr-skin main :is(h1,h2,h3){font-weight:500}
.mr-skin .mr-main h3{letter-spacing:-.02em}
/* Page heads and heroes: large calm type, no decorative field */
.mr-skin :is(.mr-pagehead,.mr-hero){padding-top:72px;padding-bottom:64px;min-height:0}
.mr-skin .mr-pagehead::before,.mr-skin .mr-pagehead::after,.mr-skin :is(.mr-aurora,.mr-vignette,.mr-ph-aurora,.mr-hero-visual){display:none!important}
.mr-skin .mr-hero{grid-template-columns:1fr!important;align-items:start}
.mr-skin :is(.mr-pagehead,.mr-hero) h1{font-size:clamp(46px,5.6vw,84px);line-height:1.03;letter-spacing:-.05em;max-width:980px;margin:0 0 28px}
.mr-skin :is(.mr-pagehead,.mr-hero) p{font-size:19px;line-height:1.65;color:var(--text-2);max-width:620px}
.mr-skin :is(.mr-pagehead,.mr-hero) .mr-hero-copy{max-width:980px}
/* Eyebrows and headings */
.mr-skin :is(.mr-kicker,.mr-eyebrow){font:400 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.mr-skin .mr-kicker{display:block;margin-bottom:20px}
.mr-skin .mr-kicker::before{display:none}
.mr-skin .mr-h2,.mr-skin .mr-cta-band h2{font-size:clamp(32px,3.6vw,52px);line-height:1.12;letter-spacing:-.035em;max-width:780px}
.mr-skin .mr-lead{font-size:16px;line-height:1.65;color:var(--text-2);max-width:620px}
.mr-skin :is(.mr-section,.mr-section--tight){padding-top:72px;padding-bottom:72px}
/* Cards become hairline items, as on the homepage */
.mr-skin .mr-grid{gap:0 40px}
.mr-skin :is(.mr-card,.mr-feature,.mr-stat){border:0;border-top:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none!important;transform:none!important}
.mr-skin .mr-card{padding:26px 0 30px}
.mr-skin .mr-card::before,.mr-skin .mr-card::after{display:none}
.mr-skin .mr-card .ic{display:none}
.mr-skin .mr-card h3{font-size:21px;line-height:1.3;margin-bottom:10px}
.mr-skin .mr-card p{font-size:15px;line-height:1.65}
.mr-skin .mr-card .more{font-weight:500;font-size:14px;margin-top:16px}
.mr-skin .mr-grid>.mr-card>.more{margin-top:auto;padding-top:16px}
.mr-skin a.mr-card:is(:hover,:focus-visible) h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.mr-skin .mr-feature{overflow:visible}
.mr-skin .mr-feature .thumb{display:none}
.mr-skin .mr-feature .body{padding:26px 0 30px}
.mr-skin a.mr-feature:is(:hover,:focus-visible) h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.mr-skin .mr-stats{gap:0 40px}
.mr-skin .mr-stat{padding:26px 0 8px;text-align:left}
.mr-skin .mr-stat b{font-weight:500;letter-spacing:-.03em}
.mr-skin .mr-chip{border-radius:0;background:transparent;border:1px solid var(--border);color:var(--text-2)}
.mr-skin .mr-filter{border-radius:0}
.mr-skin .mr-table th,.mr-skin .mr-table td{border-width:0 0 1px;border-color:var(--border)}
.mr-skin .mr-table thead th{background:transparent;border-bottom-color:var(--text-3)}
/* FAQ: homepage accordion */
.mr-skin .mr-faq{border-top:1px solid var(--border)}
.mr-skin .mr-faq details{background:transparent;border-radius:0;margin:0;border-bottom:1px solid var(--border)}
.mr-skin .mr-faq summary{padding:22px 0;min-height:76px;font-family:inherit;font-weight:500;font-size:18px;line-height:1.4;letter-spacing:-.01em}
.mr-skin .mr-faq summary::after{content:"";flex:0 0 14px;height:14px;color:var(--text-3);transform:none!important;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat}
.mr-skin .mr-faq details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat}
.mr-skin .mr-faq summary:hover::after{color:var(--text)}
.mr-skin .mr-faq .a{padding:0 48px 26px 0;font-size:15px;max-width:760px}
/* Closing call to action: the homepage's left-aligned contact band */
.mr-skin .mr-cta-band{margin:0 auto;padding:72px 28px}
.mr-skin .mr-cta-band .in{background:none;border-radius:0;padding:56px 0 0;text-align:left;border-top:1px solid var(--border);overflow:visible}
.mr-skin .mr-cta-band .in::before,.mr-skin .mr-cta-band .in::after{display:none}
.mr-skin .mr-cta-band h2{font-size:clamp(40px,4.8vw,68px);line-height:1.05;margin:0 0 20px}
.mr-skin .mr-cta-band p{margin:0 0 30px;font-size:18px;max-width:600px}

/* Actions: flat cobalt primary, quiet secondary */
.mr-skin :is(.h-primary,button[type=submit],input[type=submit]){background:var(--primary-cobalt)!important;box-shadow:none!important;transform:none!important;border-radius:var(--radius-btn);font-size:var(--fs-btn);font-weight:var(--fw-btn);min-height:50px;padding:13px 22px}
.mr-skin :is(.h-primary,button[type=submit],input[type=submit]):hover{background:var(--primary-cobalt-hover)!important}
.mr-skin .mr-main .h-outline{font-weight:var(--fw-btn);min-height:50px;padding:13px 22px}
@media(max-width:760px){
 .mr-skin :is(.mr-pagehead,.mr-hero){padding-top:40px;padding-bottom:40px}
 .mr-skin :is(.mr-pagehead,.mr-hero) h1{font-size:clamp(38px,10.5vw,52px)}
 .mr-skin :is(.mr-pagehead,.mr-hero) p{font-size:17px}
 .mr-skin :is(.mr-section,.mr-section--tight),.mr-skin .mr-cta-band{padding-top:48px;padding-bottom:48px}
 .mr-skin .mr-faq summary{min-height:64px;padding:18px 0;font-size:16px}
 .mr-skin .mr-faq .a{padding-right:0}
 .mr-skin .mr-cta-band .in{padding-top:40px}
}
.mr-skin .mr-form-card{border-radius:0;box-shadow:none;border-color:var(--border)}
.mr-skin .mr-form-card :is(input,textarea,select,.form-control){border-radius:0}
/* Legacy pages centre their CTA buttons inline; the homepage system keeps them under the left-aligned copy. */
.mr-skin .mr-cta-band .mr-hero-cta{justify-content:flex-start!important}
.mr-skin .mr-eyebrow::before{display:none!important}
.mr-skin .mr-eyebrow{display:block;margin-bottom:16px}
/* ---- Launch review fixes (homepage-style pages) ---- */
/* The breadcrumb takes its own space instead of overlapping the page head, so a wrapped
   breadcrumb never collides with the section label. */
.mr-skin .mr-crumb{margin-bottom:0}
.mr-skin .mr-crumb ~ :is(.mr-pagehead,.mr-hero){padding-top:36px}
/* Photographic page head (case studies): the image fills the head on the right and fades
   into the page behind the copy; on phones it sits below the copy at 16:9. */
.mr-skin .mr-pagehead:has(>.mr-ph-photo){min-height:min(620px,74vh);display:flex;flex-direction:column;justify-content:center}
.mr-skin .mr-pagehead:has(>.mr-ph-photo)>:not(.mr-ph-photo,h1){max-width:620px}
.mr-skin .mr-pagehead:has(>.mr-ph-photo) h1{max-width:820px;font-size:clamp(44px,4.8vw,72px)}
.mr-skin .mr-pagehead>.mr-ph-photo{position:absolute;inset:0;z-index:0;display:block;margin:0;pointer-events:none}
.mr-skin .mr-ph-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
.mr-skin .mr-ph-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0,var(--bg) max(28px,calc((100% - var(--maxw))/2)),color-mix(in srgb,var(--bg) 86%,transparent) calc(max(28px,calc((100% - var(--maxw))/2)) + 560px),transparent 84%),linear-gradient(0deg,var(--bg) 0,transparent 18%),linear-gradient(180deg,var(--bg) 0,transparent 12%)}
@media(max-width:760px){
 .mr-skin .mr-pagehead:has(>.mr-ph-photo){min-height:0;display:block}
 .mr-skin .mr-pagehead:has(>.mr-ph-photo) h1{font-size:clamp(34px,9vw,52px)}
 .mr-skin .mr-pagehead>.mr-ph-photo{position:relative;inset:auto;aspect-ratio:16/9;margin:32px calc(-1 * max(28px,calc((100% - var(--maxw))/2))) -40px}
 .mr-skin .mr-ph-photo::after{background:linear-gradient(0deg,var(--bg) 0,transparent 30%)}
}
/* Case-study index thumbnails */
.mr-skin .mr-card-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0 0 22px;background:#0b0d12}
.mr-skin a.mr-card:has(.mr-card-photo){padding-top:0;border-top:0}
/* Homepage "Selected work" overlay (includes/partials/mr-project-media.php): photo, headline figure, client logo */
.mh-project-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#14161a;color:#fff}
.mh-project-media>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:var(--photo-pos,50% 50%)}
/* Scrim: dark at the top where the figure sits, clear lower down so the photograph still reads */
.mh-project-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.66) 32%,rgba(0,0,0,.22) 62%,rgba(0,0,0,0) 82%),linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,0) 70%)}
/* No photograph yet: a branded panel keeps the card complete */
.mh-project-media.is-panel{background:radial-gradient(120% 90% at 85% 100%,color-mix(in srgb,var(--primary-cobalt) 55%,#14161a) 0%,#14161a 62%)}
.mh-project-media--undp.is-panel{background:radial-gradient(120% 90% at 85% 100%,#1f5fa8 0%,#0b1e36 64%)}
.mh-project-media--cbtl.is-panel{background:radial-gradient(120% 90% at 85% 100%,#7a3e2a 0%,#1d120d 64%)}
.mh-project-stat{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:30px 30px 0;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.mh-project-stat-label{font:500 11.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.mh-project-stat strong{font-size:clamp(48px,4.6vw,72px);line-height:.95;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mh-project-stat-note{font-size:16px;line-height:1.35;font-weight:500;max-width:330px}
.mh-project-stat-2{margin-top:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.4);font-size:14.5px;line-height:1.35;font-weight:500;max-width:330px}
.mh-project-stat-2 b{display:block;font-size:clamp(28px,2.6vw,38px);line-height:1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:2px}
.mh-project-stat-tag{margin-top:8px;padding:4px 9px;border:1px solid rgba(255,255,255,.75);background:rgba(0,0,0,.35);font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-shadow:none}
/* Client logo: original artwork on a white tile, bottom-right of the photograph */
.mh-project-logo{position:absolute;right:20px;bottom:20px;z-index:2;display:block;line-height:0;padding:8px 12px;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.28)}
.mh-project-logo img{display:block;width:auto;height:48px;max-width:150px;object-fit:contain}
/* The same overlay on a /case-studies card: the card's 16:9 photo slot, with the figure and logo scaled to the card */
/* Card body (homepage values): eyebrow, title, text, proof line and one link at the foot. Kept at low
   specificity so the homepage's own phone tweaks (mindrops-home.css, inlined before this file) still apply. */
.mh-project{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--surface);min-width:0}
.mh-project-body{padding:28px;display:flex;flex-direction:column;flex:1;align-items:flex-start}
.mh-project-body .mh-eyebrow{font:400 10px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);margin:0 0 12px}
.mh-project-body h3{font-size:clamp(23px,2vw,28px);line-height:1.2;margin:0 0 16px}
.mh-project-body>p:not(.mh-eyebrow){font-size:14px;color:var(--text-2)}
.mh-project-body .mh-outcome{color:var(--text)}
.mh-project-body .mh-proof-line{font:400 11px/1.6 var(--mono);color:var(--text);margin:20px 0}
.mh-project-foot{width:100%;margin-top:auto}
.mh-project .mh-text-link{display:inline-flex;align-items:center;gap:14px;font-size:var(--fs-btn);font-weight:var(--fw-btn);min-height:44px;color:var(--text);text-decoration:none}
.mr-work-grid .mh-text-link>span[aria-hidden]{display:inline-flex;transition:transform var(--dur-fast)}
.mr-work-grid .mh-text-link:hover>span[aria-hidden]{transform:translateX(3px)}
.mr-work-grid .mh-text-link[target]:hover>span[aria-hidden]{transform:translate(2px,-2px)}
.mh-project .mh-text-link:is(:hover,:focus-visible) .mh-tl{text-decoration:underline;text-underline-offset:5px}
/* Diagrams sit whole on the dark ground; without a figure there is nothing to darken */
.mh-project-media.is-diagram>img{object-fit:contain;background:#0b0d12}
.mh-project-media:not(:has(.mh-project-stat))::before{display:none}
.mh-project-logo img+img{margin-left:12px}
/* Grid of cards (listing, service, industry, web-app pages): 16:9 photo, figure and logo scaled to the card */
.mr-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.mr-work-grid>.is-hidden{display:none}
.mr-work-grid .mh-project-media{aspect-ratio:16/9;container-type:inline-size}
.mr-work-grid .mh-project-stat{padding:18px 20px 0;gap:4px}
.mr-work-grid .mh-project-stat-label{font-size:10.5px}
.mr-work-grid .mh-project-stat strong{font-size:clamp(30px,12cqi,52px)}
.mr-work-grid .mh-project-stat-note{font-size:14px;max-width:70%}
.mr-work-grid .mh-project-stat-2{font-size:13px;max-width:70%}
.mr-work-grid .mh-project-stat-2 b{font-size:clamp(22px,8cqi,32px)}
.mr-work-grid .mh-project-stat-tag{margin-top:6px;font-size:10px}
.mr-work-grid .mh-project-logo{right:14px;bottom:14px;padding:6px 10px}
.mr-work-grid .mh-project-logo img{height:34px;max-width:110px}
.mr-work-grid .mh-project-body h3{font-size:clamp(21px,1.7vw,24px)}
.mr-work-grid .mh-project-body>p:not(.mh-eyebrow){margin:0 0 12px}
@media (max-width:1000px){.mr-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mr-work-grid{grid-template-columns:minmax(0,1fr);gap:20px}.mr-work-grid .mh-project-body{padding:22px 20px}}
/* Industry "Selected projects" carousel (js/mindrops-rail.js, more than three cards): the grid becomes a
   scroll-snap row with the next card peeking and arrows on the image centre. Without JS it stays the grid. */
.mr-work-rail{position:relative;min-width:0;--rail-gap:24px}
.mr-work-rail.is-ready .mr-work-grid{display:flex;gap:var(--rail-gap);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 2px 8px;margin-left:-2px;margin-right:-2px}
.mr-work-rail.is-ready .mr-work-grid::-webkit-scrollbar{display:none}
.mr-work-rail.is-ready [data-rail-item]{flex:0 0 calc((100% - 3 * var(--rail-gap)) / 3.2);scroll-snap-align:start}
.mr-work-rail .mh-rail-controls{position:absolute;left:0;right:0;top:var(--mh-rail-mid,40%);z-index:3;display:flex;justify-content:space-between;align-items:center;padding:0 16px;margin:0;pointer-events:none;transform:translateY(-50%)}
.mr-work-rail .mh-rail-controls[hidden]{display:none}
.mr-work-rail .mh-control{pointer-events:auto;display:inline-grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:#fff;color:#0a0a0a;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 10px 30px rgba(0,0,0,.3);cursor:pointer;transition:transform var(--dur-fast),opacity var(--dur-fast)}
.mr-work-rail .mh-control svg{width:20px;height:20px}
.mr-work-rail .mh-control:hover:not(:disabled){transform:scale(1.06)}
.mr-work-rail .mh-control:disabled{opacity:0;pointer-events:none}
@media (max-width:1000px){.mr-work-rail.is-ready [data-rail-item]{flex-basis:calc((100% - var(--rail-gap)) / 2.2)}}
@media (max-width:640px){.mr-work-rail{--rail-gap:16px}.mr-work-rail.is-ready [data-rail-item]{flex-basis:88%}.mr-work-rail .mh-rail-controls{padding:0 8px}.mr-work-rail .mh-control{width:44px;height:44px}.mr-work-rail .mh-control svg{width:18px;height:18px}}
/* Related insights (service, hire and industry pages, after the FAQ): blog posts about the page as a
   compact row, each a title and a reading link (includes/partials/mr-related-reading.php) */
.mr-insights{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mr-insights a{display:flex;flex-direction:column;justify-content:space-between;gap:16px;height:100%;padding:20px 22px;border:1px solid var(--card-border);border-radius:var(--r);color:var(--text);text-decoration:none;transition:border-color var(--dur-fast)}
.mr-insights a:is(:hover,:focus-visible){border-color:var(--card-border-hover)}
.mr-insights a .mr-insights-title{margin:0;font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.mr-insights-more{font-size:14px;font-weight:600;color:var(--text-2)}
.mr-insights a:is(:hover,:focus-visible) .mr-insights-more{color:var(--text)}
@media (max-width:900px){.mr-insights{grid-template-columns:minmax(0,1fr);gap:12px}}
/* One closing CTA rhythm: less dead space after a dark FAQ band */
.mr-skin .mr-cta-band{padding-top:32px}
/* Headlines break in balanced lines (no orphaned last word) */
.mr-skin :is(.mr-pagehead h1,.mr-hero h1,.mr-h2,.mr-cta-band h2),.mr-webapp h2{text-wrap:balance}
/* Readable measure for running copy in full-width sections */
.mr-skin :is(.mr-section,.mr-section--tight)>p,.mr-skin :is(.mr-section,.mr-section--tight)>div>p,.mr-skin :is(.mr-section,.mr-section--tight)>ul:not([class]) li{max-width:76ch}
/* Footnotes and disclaimers stay legible */
.mr-skin .mr-fineprint,.mr-skin .mr-main p[style*="var(--text-3)"],.mr-skin .mr-main p[style*="font-size:12px"],.mr-skin .mr-main p[style*="font-size:13px"]{color:var(--text-2)!important;font-size:13px!important}
/* Office blocks: one divider, icons dark on white bands and light on black ones */
.mr-skin .mr-offices{border-top:0;padding-top:0;margin-top:32px;gap:0 40px}
.mr-skin .mr-office-icon img{height:40px}
.mr-light .mr-office-icon img,.mr-skin .mr-main:not(:has(.mr-light))>section:is(.mr-section,.mr-section--tight):nth-of-type(even) .mr-office-icon img{filter:brightness(0)}
/* Team cards: social links under the title, aligned left like the rest of the card */
/* Partner and product logos: flat rows on hairlines instead of tiles */



/* Client logo strips in page heads become a white band with the label on the left, as on the homepage */
.mr-skin :is(.mr-hero-trust){text-align:left}
.mr-skin :is(.mr-hero-trust-logos){justify-content:flex-start}
.mr-skin .mr-hero-trust-row{justify-content:flex-start}
/* Review-platform links: square text pills aligned with the copy */
.mr-skin .mr-reviews{justify-content:flex-start}
.mr-skin .mr-review{border-radius:0;background:transparent}
/* Quote/proof blocks with a left rule get breathing room */
.mr-skin .mr-card[style*="border-left"]{padding-left:22px;border-top:0}
/* Figures and product shots: square, no gradient mat */
.mr-skin .mr-figure{border-radius:0;background:#fff}
.mr-skin .mr-figure::before{display:none}
.mr-skin .mr-figure img,.mr-skin .mr-main img{border-radius:0}
/* 404 / utility link list */
.mr-404-links{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--border);max-width:520px}
.mr-404-links li{border-bottom:1px solid var(--border)}
.mr-404-links a{display:flex;justify-content:space-between;padding:16px 0;color:var(--text);text-decoration:none;font-weight:500}
.mr-404-links a:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:760px){
 .mr-skin .mr-crumb ~ :is(.mr-pagehead,.mr-hero){padding-top:24px}
}
/* Phones: big stat values get a full row each, so words like "Government" never split */
@media(max-width:520px){
 .mr-skin .mr-stats{grid-template-columns:1fr!important}
 .mr-skin .mr-stat b{overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual}
}
/* Inline padding trims were written for sections that continued the same background; with
   alternating bands every section is its own band, so keep standard padding at the edges. */
.mr-skin .mr-main>section:is(.mr-section,.mr-section--tight)[style*="padding-top"]{padding-top:56px!important}
.mr-skin .mr-main>section:is(.mr-section,.mr-section--tight)[style*="padding-bottom:0"]{padding-bottom:56px!important}
@media(max-width:760px){
 .mr-skin .mr-main>section:is(.mr-section,.mr-section--tight)[style*="padding-top"]{padding-top:40px!important}
 .mr-skin .mr-main>section:is(.mr-section,.mr-section--tight)[style*="padding-bottom:0"]{padding-bottom:40px!important}
}
.mr-skin .mr-legal h2{font-size:clamp(20px,2vw,24px);font-weight:500;letter-spacing:-.02em;margin:40px 0 12px}
.mr-skin .mr-legal table :is(td,th):first-child{width:30%}
/* Pages that end on a white band: no black strip between it and the footer */
.mr-skin .mr-footer{margin-top:0}
/* Product logos were drawn for light tiles; keep the tile white on every band */

.mr-skin .mr-figure{margin-bottom:56px}
/* Sections with an inline width cap still share the page edge */
.mr-skin .mr-main>section[style*="max-width"]{max-width:calc(var(--maxw) + 56px)!important}
/* Third-party review carousel: a square white panel on the content grid, not a floating card */

/* Team cards: one left edge, social row reserves its height so "Read bio" lines up across cards */
.mr-form-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media(max-width:600px){.mr-form-2col{grid-template-columns:1fr}}
.mr-form-group .iti{width:100%}
.mr-captcha-row + .h-primary,.mr-captcha-row + button{margin-top:16px}
.mr-skin .mr-role-meta{color:var(--text-2);font-size:14px}
/* Phones: role actions after the requirements, not between the description and them */
@media(max-width:900px){.mr-skin .mr-role{display:flex;flex-direction:column;gap:14px}.mr-skin .mr-role-intro{display:contents}.mr-skin .mr-role-intro .mr-hero-cta{order:3;margin-top:8px}.mr-skin .mr-role-skills{order:2}}
@media(max-width:540px){.mr-skin .mr-sitemap{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.mr-skin .mr-sitemap a{font-size:13px}}

/* Flow editorial collection: shared hero composition, original colour and native loading. */
.mr-skin .mr-editorial-hero>.mr-hero-copy{max-width:620px}
.mr-skin .mr-editorial-hero>.mr-ph-photo{overflow:hidden}
.mr-skin .mr-editorial-hero .mr-ph-photo::after{background:linear-gradient(90deg,#000 0,rgba(0,0,0,.96) 20%,rgba(0,0,0,.82) 42%,rgba(0,0,0,.25) 65%,transparent 85%),linear-gradient(0deg,#000 0,rgba(0,0,0,.65) 12%,transparent 35%)}
.mr-skin .mr-editorial-hero .mr-hero-cta{flex-wrap:wrap}
@media(max-width:1000px) and (min-width:761px){
 .mr-skin .mr-editorial-hero:has(>.mr-ph-photo) h1{font-size:clamp(42px,5.4vw,60px);max-width:650px}
 .mr-skin .mr-editorial-hero>.mr-hero-copy,.mr-skin .mr-editorial-hero>p{max-width:560px}
}
@media(max-width:760px){
 .mr-skin .mr-editorial-hero>.mr-hero-copy{max-width:none}
 .mr-skin .mr-editorial-hero>.mr-ph-photo{aspect-ratio:16/10}
 .mr-skin .mr-editorial-hero .mr-ph-photo img{position:absolute;inset:0 0 0 auto;width:145%;max-width:none;height:100%;object-fit:cover;object-position:right center}
 .mr-skin .mr-editorial-hero .mr-ph-photo::after{background:linear-gradient(180deg,#000 0,transparent 18%),linear-gradient(0deg,#000 0,rgba(0,0,0,.8) 12%,transparent 38%)}
}

.mr-industry-trust{background:#fff;color:#111}
.mr-industry-trust-inner{max-width:1336px;margin:0 auto;padding:28px;display:flex;align-items:center;gap:48px}
.mr-skin .mr-industry-trust .mr-eyebrow{color:#555;margin:0;flex:0 0 140px;font-size:10px}
.mr-industry-trust ul{display:flex;align-items:center;gap:36px 56px;flex-wrap:wrap;list-style:none;margin:0;padding:0;min-width:0}
.mr-industry-trust li{display:flex;align-items:center;min-height:48px;max-width:280px;font-size:16px;font-weight:500;line-height:1.45}
.mr-industry-trust img{display:block;width:auto;height:auto;max-height:48px;max-width:150px;object-fit:contain;filter:none}
.mr-industry-trust img[alt="NHRDF"]{max-width:230px}
.mr-industry-work .mr-feature:only-child .body{max-width:760px}

.mr-industry-work .mr-feature p{font-size:16px;line-height:1.7}
.mr-industry-work .mr-feature .more{font-size:14px;margin-top:14px}
@media(max-width:760px){
 .mr-industry-trust-inner{padding:24px 20px;display:block}
 .mr-skin .mr-industry-trust .mr-eyebrow{margin-bottom:18px}
 .mr-industry-trust ul{gap:20px 32px}
 .mr-industry-trust li{font-size:14px;max-width:260px}
 .mr-industry-trust img{max-width:120px;max-height:44px}
}
/* On small screens the privacy shortcut follows the footer instead of covering copy (WhatsApp stays a floating button). */
@media(max-width:760px){
 .mr-skin .cookies-btn{position:static;display:block;max-width:calc(100% - 40px);margin:20px auto 0;min-height:44px;padding:10px 16px;border:1px solid var(--border);border-radius:var(--radius-btn);box-shadow:none}
}
.mr-skin .mr-editorial-hero>img{align-self:flex-start}

/* Card crops focus on the subject rather than the hero's reserved headline space. */
.mr-editorial-thumb{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:#05090e;margin:0 0 22px}
.mr-skin .mr-editorial-thumb>.mr-card-photo{position:absolute;top:0;right:0;width:125%;max-width:none;height:125%;margin:0;aspect-ratio:auto;object-fit:cover;object-position:right top}
/* The footer renders only when it nears the viewport. */
@supports(content-visibility:auto){.mr-footer{content-visibility:auto;contain-intrinsic-size:auto 720px}}

/* Software diagrams keep every workflow node visible instead of cropping like photography. */
.mr-skin .mr-pagehead:has(>.mr-ph-photo--diagram) h1{max-width:52%;font-size:clamp(40px,4vw,64px)}
.mr-skin .mr-pagehead:has(>.mr-ph-photo--diagram)>:is(p,.mr-hero-copy){max-width:48%}
.mr-skin .mr-pagehead>.mr-ph-photo--diagram{left:auto;right:0;width:49%;overflow:visible}
.mr-skin .mr-pagehead .mr-ph-photo--diagram img{width:100%;height:100%;object-fit:contain;position:static;max-width:100%}
.mr-skin .mr-ph-photo--diagram::after{display:none}
.mr-skin .mr-card-photo[src$=".svg"]{object-fit:contain}
@media(max-width:760px){
 .mr-skin .mr-pagehead:has(>.mr-ph-photo--diagram) h1{max-width:none;font-size:clamp(34px,9vw,52px)}
 .mr-skin .mr-pagehead:has(>.mr-ph-photo--diagram)>:is(p,.mr-hero-copy){max-width:none}
 .mr-skin .mr-pagehead>.mr-ph-photo--diagram{width:100%;right:auto;aspect-ratio:1200/896;margin:24px 0 0}
}