/*
   ===========================================================================
    Mediquity Technologies Pvt. Ltd. — corporate website & CMS

    Designed and developed by OASIS
      Web      https://oasis.ind.in
      Email    info@oasis.ind.in

    OASIS builds and maintains content-managed websites, admin panels and
    web applications end to end — design, front-end, back-end and hosting.
    This codebase, its admin panel and its caching layer are original work by
    OASIS and remain the intellectual property of OASIS, licensed to Mediquity
    Technologies Pvt. Ltd. for use on this website only.

    ---------------------------------------------------------------------
    PROPRIETARY AND CONFIDENTIAL — NOT FOR REUSE

    This file is licensed for use in this project alone. Copying it, or any
    part of it, into another website, product, repository or client project,
    or redistributing, sublicensing or publishing it in any form, is
    PROHIBITED without the prior written consent of OASIS. That applies
    equally to modified or derivative versions.

    For permission, licensing, or to commission similar work, contact OASIS
    at info@oasis.ind.in.
    ---------------------------------------------------------------------

    Please keep this notice intact when editing or moving this file.
    (c) 2026 OASIS. All rights reserved.
   ===========================================================================
*/

:root {
  --acc: #e8493e;
  --acc-deep: #b3251a;
  --ink: #141114;
  --mut: #5f5a5e;
  --line: rgba(20, 17, 20, 0.1);
  --paper: #f6f5f3;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #f6f5f3;
  color: #141114;
  font-family: "Manrope", system-ui, sans-serif;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acc); }
a:hover { color: var(--acc-deep); }
::selection { background: var(--acc-select, rgba(232, 73, 62, 0.25)); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --- Interactive states --- */
.nav-link { transition: color 0.2s; }
.nav-link:hover { color: #ffffff; }

.nav-cta { transition: background 0.25s, border-color 0.25s; }
.nav-cta:hover, .mq-nav-cta:hover, .nav-cta:focus-visible { background: rgba(255, 255, 255, 0.16); border-color: #ffffff; color: #ffffff; }
.mobile-menu a.cta:hover { color: #ffffff; background: rgba(255,255,255,0.14); border-color: #ffffff; }

.btn-hero { transition: background 0.25s, transform 0.25s; }
.btn-hero:hover { background: #f25e50; transform: translateY(-2px); }

.link-light { transition: color 0.2s; }
.link-light:hover { color: #fff3f0; }

.arrow-btn { transition: transform 0.25s; }
.arrow-btn:hover { transform: translate(2px, -2px); }

.btn-outline-dark { transition: border-color 0.25s, background 0.25s; }
.btn-outline-dark:hover { border-color: var(--acc); background: var(--tint, #fdf0ee); }

.cred-card { transition: border-color 0.3s; }
.cred-card:hover { border-color: var(--acc-edge, rgba(232, 73, 62, 0.45)); }

.case-card { transition: transform 0.3s, box-shadow 0.3s; }
.case-card:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(20, 17, 20, 0.1); }

.btn-dark { transition: background 0.25s, transform 0.25s; }
.btn-dark:hover { background: #2a2428; transform: translateY(-2px); }

.btn-white { transition: transform 0.25s, box-shadow 0.25s; }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); }

.foot-link { transition: color 0.2s; }
.foot-link:hover { color: #ffffff; }

.social { transition: background 0.25s, border-color 0.25s; }
.social:hover { background: var(--acc); border-color: var(--acc); }

.oasis { transition: color 0.2s; }
.oasis:hover { color: #ffffff; }

/* --- Responsive nav / hero --- */
.nav-burger { display: none; }
@media (max-width: 900px) {
  .nav-links-desktop, .nav-cta-desktop { display: none !important; }
  .nav-burger { display: inline-flex !important; }
}
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }
@media (min-width: 901px) { .mobile-menu { display: none !important; } }

@media (max-width: 720px) {
  .hero-card { position: static !important; margin: 28px clamp(16px, 4vw, 28px) clamp(16px, 4vw, 28px) !important; max-width: none !important; width: auto !important; }
  .hero-inner { padding-bottom: 8px !important; }
  .hero-card-video, .hero-card-video img { width: 128px !important; height: 92px !important; }
  .hero-card-num { font-size: 30px !important; }
}

/* ===========================================================================
   THEME LAYER — added when the static design became a CMS theme.
   ---------------------------------------------------------------------------
   The design pages carry most of their styling inline, which is fine for a
   one-off page but not for markup that PHP now generates. Everything BELOW is
   the chrome that repeats on every page (nav, dropdown, hero shell, footer)
   lifted into classes, so the theme emits short semantic markup and the look
   is edited in one place.

   Page-body sections keep their inline styles — those are per-section design
   decisions that belong with the block that uses them.
   ========================================================================= */

/* --- Header shell ------------------------------------------------------- */
/* The nav is identical on every page; only the panel behind it changes. That
   split is deliberate: it is what lets the nav be cached ONCE as a shared
   fragment while each page keeps its own brand colour. */
.mq-header            { padding: 14px; position: relative; }
.mq-hero-shell        { position: relative; border-radius: 30px; overflow: hidden;
                        display: flex; flex-direction: column;
                        background: var(--hero-grad); }
.mq-hero-shell::before,
.mq-hero-shell::after  { content: ""; position: absolute; inset: 0; pointer-events: none; }
.mq-hero-shell::before { background:
                          repeating-linear-gradient(112deg, rgba(255,255,255,0.075) 0 3px, transparent 3px 38px, rgba(255,255,255,0.04) 38px 41px, transparent 41px 90px),
                          repeating-linear-gradient(112deg, transparent 0 140px, rgba(0,0,0,0.14) 140px 143px, transparent 143px 260px); }
.mq-hero-shell::after  { background:
                          radial-gradient(900px 600px at 85% 20%, var(--hero-glow), transparent 60%),
                          radial-gradient(700px 520px at 10% 100%, var(--hero-shade), transparent 65%); }

/* Hero height presets — set per page in the admin (wr_page.hero_size). */
.mq-hero--full  { min-height: 92vh; }
.mq-hero--tall  { min-height: 94vh; }
.mq-hero--mid   { min-height: 52vh; }
.mq-hero--short { min-height: 34vh; }

/* Brand palettes. One class per product, so adding a product means adding a
   palette here and picking it in the admin — no PHP and no template edit. */
.mq-brand-mediquity {
  --hero-grad: linear-gradient(118deg, #33080f 0%, #6c1015 26%, #b3251a 55%, #e8493e 78%, #f78a6f 100%);
  --hero-glow: rgba(255,182,150,0.28); --hero-shade: rgba(20,5,8,0.5);
  --footer-page: #f6f5f3; --footer-ground: #0b0709; --footer-shadow: rgba(120,20,15,0.28);
  --footer-glow: rgba(232,73,62,0.22); --footer-icon: #ff8177;
  --footer-veil: linear-gradient(180deg, #050304 0%, rgba(8,4,5,0.96) 25%, rgba(10,4,6,0.9) 58%, rgba(14,4,6,0.86) 100%);
}

.mq-brand-doctor-g {
  --hero-grad: linear-gradient(118deg, #021a15 0%, #04352a 26%, #06483a 55%, #085946 78%, #4fae92 100%);
  --hero-glow: rgba(140,214,190,0.28); --hero-shade: rgba(4,18,15,0.5);
  --footer-page: #f3f7f5; --footer-ground: #061210; --footer-shadow: rgba(6,60,48,0.28);
  --footer-glow: rgba(8,89,70,0.22); --footer-icon: #3f9a80;
  --footer-banner: url('../images/mediquity-banner2-green.png');
  --footer-veil: linear-gradient(180deg, #030807 0%, rgba(4,12,10,0.96) 25%, rgba(4,16,13,0.9) 58%, rgba(5,20,16,0.86) 100%);
}

.mq-brand-med-iq {
  --hero-grad: linear-gradient(118deg, #071a0c 0%, #12401a 26%, #2f8a1e 55%, #5ac737 78%, #ade39b 100%);
  --hero-glow: rgba(150,255,200,0.28); --hero-shade: rgba(5,20,12,0.5);
  --footer-page: #f6f5f3; --footer-ground: #051a10; --footer-shadow: rgba(10,90,50,0.28);
  --footer-glow: rgba(90,199,55,0.28); --footer-icon: #5ac737;
  /* The design tinted the red banner with hue-rotate(110deg). Using the green
     artwork itself is cleaner: no filter cost on every paint, and the green
     is the one the design team actually approved rather than one the browser
     computes. */
  --footer-banner: url('../images/mediquity-banner2-green.png');
  --footer-veil: linear-gradient(180deg, #030603 0%, rgba(4,10,7,0.96) 25%, rgba(5,12,9,0.9) 58%, rgba(6,16,11,0.86) 100%);
}

.mq-brand-lab-iq {
  --hero-grad: linear-gradient(118deg, #04122a 0%, #0d2c5e 26%, #17469a 55%, #1950a0 78%, #7db3ec 100%);
  --hero-glow: rgba(150,200,255,0.28); --hero-shade: rgba(4,12,22,0.5);
  --footer-page: #f6f5f3; --footer-ground: #040f22; --footer-shadow: rgba(10,40,90,0.28);
  --footer-glow: rgba(47,143,224,0.28); --footer-icon: #7db3ec;
  --footer-filter: hue-rotate(200deg) saturate(0.6) brightness(0.8);
  --footer-veil: linear-gradient(180deg, #03060e 0%, rgba(4,10,20,0.96) 25%, rgba(5,12,24,0.9) 58%, rgba(6,16,30,0.86) 100%);
}

.mq-brand-bb-iq {
  --hero-grad: linear-gradient(118deg, #2a0605 0%, #6d1512 26%, #a82320 55%, #b92924 78%, #f0a5a1 100%);
  --hero-glow: rgba(255,190,186,0.28); --hero-shade: rgba(24,4,3,0.55);
  --footer-page: #f6f5f3; --footer-ground: #1a0503; --footer-shadow: rgba(90,15,12,0.28);
  --footer-glow: rgba(224,82,76,0.3); --footer-icon: #e0524c;
  --footer-filter: saturate(1.05) brightness(0.72);
  --footer-veil: linear-gradient(180deg, #0d0201 0%, rgba(18,4,3,0.96) 25%, rgba(24,5,4,0.9) 58%, rgba(30,7,6,0.86) 100%);
}

.mq-brand-connect-iq {
  --hero-grad: linear-gradient(118deg, #170a26 0%, #2f1150 26%, #4d1f86 55%, #7b3fc4 78%, #bfa0ef 100%);
  --hero-glow: rgba(205,175,255,0.28); --hero-shade: rgba(15,6,26,0.5);
  --footer-page: #f6f5f3; --footer-ground: #04181b; --footer-shadow: rgba(10,60,66,0.28);
  --footer-glow: rgba(62,152,161,0.3); --footer-icon: #7fd0d6;
  --footer-filter: hue-rotate(140deg) saturate(0.65) brightness(0.8);
  --footer-veil: linear-gradient(180deg, #030f11 0%, rgba(4,20,22,0.96) 25%, rgba(5,24,27,0.9) 58%, rgba(6,30,34,0.86) 100%);
}

.mq-brand-caaldock {
  /* Navy through to amber, exactly as html/caaldock.html paints it. An earlier
     all-gold gradient lost the navy the rest of the page is built on. */
  --hero-grad: linear-gradient(118deg, #021936 0%, #04255a 28%, #063983 56%, #0a4ea8 74%, #ee8b3d 122%);
  --hero-glow: rgba(238,139,61,0.34); --hero-shade: rgba(2,12,28,0.6);
  --footer-page: #f6f5f3; --footer-ground: #02132b; --footer-shadow: rgba(6,57,131,0.28);
  --footer-glow: rgba(238,139,61,0.28); --footer-icon: #ee8b3d;
  --footer-filter: hue-rotate(190deg) saturate(0.6) brightness(0.8);
  --footer-veil: linear-gradient(180deg, #010a18 0%, rgba(2,12,28,0.96) 25%, rgba(2,15,34,0.9) 58%, rgba(3,20,44,0.86) 100%);
}

/* --- Nav ---------------------------------------------------------------- */
.mq-nav        { position: relative; z-index: 3; display: flex; align-items: center;
                 gap: clamp(14px, 2vw, 28px); padding: 26px clamp(20px, 3.5vw, 56px); flex-wrap: wrap; }
.mq-nav-logo   { display: flex; align-items: center; margin-right: auto; }
.mq-nav-logo img { height: 52px; width: auto; display: block; }
.mq-nav-links  { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px); flex-wrap: wrap; }
.mq-nav-links > a, .nav-dd > a {
                 font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
                 text-decoration: none; color: rgba(255,255,255,0.85); padding: 12px 10px; white-space: nowrap; }
/* Active item. Applied client-side from the URL, because the nav is a shared
   cache fragment and cannot carry a per-page class baked in. */
.mq-nav-links > a.active, .nav-dd.active > a {
                 color: #ffffff; background: #141114; border-radius: 999px; padding: 12px 22px; }

.nav-dd            { position: relative; }
.nav-dd > a        { display: inline-flex; align-items: center; gap: 6px; }
.nav-dd-menu       { position: absolute; top: 100%; left: 0; min-width: 236px; background: #ffffff;
                     border-radius: 16px; box-shadow: 0 22px 54px rgba(20,17,20,0.24); padding: 10px;
                     display: flex; flex-direction: column; gap: 2px; z-index: 60;
                     opacity: 0; visibility: hidden; transform: translateY(8px);
                     transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
                     opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd-menu a     { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600;
                     color: var(--ink); text-decoration: none; padding: 11px 14px; border-radius: 10px;
                     letter-spacing: normal; text-transform: none; white-space: nowrap;
                     transition: background 0.2s, color 0.2s; }
.nav-dd-menu a:hover { background: var(--tint, #fdf0ee); color: var(--acc); }
.nav-dd-menu a .dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); flex: none; }
.nav-dd-chev         { transition: transform 0.2s; }
.nav-dd:hover .nav-dd-chev, .nav-dd:focus-within .nav-dd-chev { transform: rotate(180deg); }

.mq-nav-cta   { font-size: 14px; font-weight: 600; text-decoration: none; color: #ffffff;
                white-space: nowrap; padding: 13px 28px; border-radius: 999px;
                border: 1.5px solid rgba(255,255,255,0.55); }
.mq-burger    { align-items: center; justify-content: center; width: 50px; height: 50px;
                border-radius: 14px; border: 1.5px solid rgba(255,255,255,0.4);
                background: rgba(255,255,255,0.08); color: #ffffff; cursor: pointer; margin-left: auto; }

/* --- Mobile menu -------------------------------------------------------- */
.mobile-menu   { position: relative; z-index: 3; padding: 6px clamp(20px,3.5vw,56px) 20px;
                 flex-direction: column; gap: 6px; }
.mobile-menu a { font-size: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
                 text-decoration: none; color: rgba(255,255,255,0.85); padding: 15px 0;
                 border-bottom: 1px solid rgba(255,255,255,0.14); }
.mobile-menu a.sub { font-size: 14px; letter-spacing: 0.03em; color: rgba(255,255,255,0.78);
                 padding: 11px 0 11px 18px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-menu a.cta { margin-top: 14px; text-align: center; font-size: 15px; letter-spacing: normal;
                 text-transform: none; color: #ffffff; padding: 15px 28px; border-radius: 999px;
                 border: 1.5px solid rgba(255,255,255,0.55); }

/* --- Breadcrumbs -------------------------------------------------------- */
.mq-crumbs      { max-width: 1320px; margin: 0 auto; padding: 22px 24px 0;
                  font-size: 13.5px; color: var(--mut); }
.mq-crumbs a    { color: var(--mut); text-decoration: none; }
.mq-crumbs a:hover { color: var(--acc); }
.mq-crumbs span.sep { opacity: 0.45; padding: 0 7px; }
body:has(.mq-crumbs--blog) { background: #fff; }
.mq-crumbs--blog { padding: 18px 24px 6px; line-height: 1.5; background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); margin-top: -14px; }
@media (max-width: 640px) { .mq-crumbs--blog { padding: 16px 18px 4px; } }

/* --- Content wrapper ---------------------------------------------------- */
/* Page sections are generated by plugins; the wrapper stays neutral so a block
   can be full-bleed or contained as its own design requires. */
.mq-wrapper           { display: block; }
.mq-wrapper .container{ max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.mq-wrapper .row      { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; }
.mq-wrapper [class*="col-md-"] { grid-column: span 12; min-width: 0; }
@media (min-width: 768px) {
  .mq-wrapper .col-md-1  { grid-column: span 1; }  .mq-wrapper .col-md-2  { grid-column: span 2; }
  .mq-wrapper .col-md-3  { grid-column: span 3; }  .mq-wrapper .col-md-4  { grid-column: span 4; }
  .mq-wrapper .col-md-5  { grid-column: span 5; }  .mq-wrapper .col-md-6  { grid-column: span 6; }
  .mq-wrapper .col-md-7  { grid-column: span 7; }  .mq-wrapper .col-md-8  { grid-column: span 8; }
  .mq-wrapper .col-md-9  { grid-column: span 9; }  .mq-wrapper .col-md-10 { grid-column: span 10; }
  .mq-wrapper .col-md-11 { grid-column: span 11; } .mq-wrapper .col-md-12 { grid-column: span 12; }
}

/* --- Footer ------------------------------------------------------------- */
/* The footer is four stacked layers, exactly as the designs build it:
     .mq-footer-bg      the banner photograph, tinted by --footer-filter
     ::before           a near-opaque veil in the product's darkest tone
     ::after            the product's glow, bottom-right
     .mq-footer-body    the content, above all three
   Every layer reads a CSS variable, and the variables come from the brand
   class the theme puts on <body>. That is what lets ONE cached footer
   fragment render red on the homepage and green on MED-IQ. */
.mq-footer        { background: var(--footer-page, #f6f5f3); padding: 0 14px 14px; }
.mq-footer-inner  { position: relative; color: rgba(245,242,242,0.65); overflow: hidden;
                    border-radius: 30px;
                    background-color: var(--footer-ground, #0b0709);
                    box-shadow: 0 30px 70px var(--footer-shadow, rgba(120,20,15,0.28)); }
.mq-footer-bg     { position: absolute; inset: 0; pointer-events: none;
                    /* MUST stay below the veil. ::before counts as the FIRST
                       child of .mq-footer-inner, so without these z-indexes it
                       paints BEFORE this element and the banner covers the veil
                       that makes the text readable. */
                    z-index: 0;
                    /* --footer-banner is published on :root by the theme from
                       Settings; a product's brand class overrides it from
                       <body>, which is nearer in the cascade and therefore
                       wins. The filter re-tints the shared red artwork so most
                       products need no separate image file at all. */
                    background: var(--footer-banner) center bottom / cover no-repeat;
                    filter: var(--footer-filter, none); }
.mq-footer-inner::before,
.mq-footer-inner::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mq-footer-inner::before{ background: var(--footer-veil, linear-gradient(180deg,
                      #050304 0%, rgba(8,4,5,0.96) 25%,
                      rgba(10,4,6,0.9) 58%, rgba(14,4,6,0.86) 100%)); }
.mq-footer-inner::after { background: radial-gradient(680px 420px at 80% 108%, var(--footer-glow, rgba(232,73,62,0.22)), transparent 60%); }
/* Contact icons pick up the product accent. The stroke attribute stays on the
   SVG as a fallback; this rule beats it, because a stylesheet always beats a
   presentation attribute. */
.mq-foot-ico      { stroke: var(--footer-icon, #ff8177); }
.mq-footer-body   { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 88px clamp(28px,4vw,64px) 40px; }
.mq-footer-cols   { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px,100%),1fr));
                    gap: 48px 36px; align-items: start; }
.mq-footer-head   { font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 20px;
                    color: #ffffff; margin-bottom: 22px; }
.mq-footer-list   { display: grid; gap: 16px; }
.mq-footer-list a, .mq-contact-list a, .mq-contact-list span {
                    font-size: 15px; line-height: 1.55; color: rgba(245,242,242,0.75); text-decoration: none; }
.mq-contact-list  { display: grid; gap: 18px; font-size: 15px; line-height: 1.55; }
.mq-contact-list a, .mq-contact-list .with-icon {
                    display: inline-flex; align-items: flex-start; gap: 10px; }
.mq-contact-list svg { flex: none; margin-top: 2px; }
.mq-footer-brand  { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 72px; }
.mq-footer-brand img { height: 52px; width: auto; display: block; }
.mq-social-row    { display: flex; gap: 12px; }
.mq-social-row a  { display: inline-flex; width: 42px; height: 42px; border-radius: 12px;
                    border: 1px solid rgba(245,242,242,0.18); align-items: center; justify-content: center;
                    color: #f5f2f2; }
.mq-footer-rule   { border: 0; height: 1px; background: rgba(245,242,242,0.14); margin: 44px 0 26px; }
.mq-footer-legal  { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
                    font-size: 13.5px; color: rgba(245,242,242,0.55); }
.mq-footer-legal a{ color: rgba(245,242,242,0.55); text-decoration: none; }
.mq-footer-legal .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }

/* ===========================================================================
   SECTION COMPONENTS
   ---------------------------------------------------------------------------
   The design's page bodies were built as one-off inline styles per section.
   Recreating that literally would mean the CMS could only ever reproduce the
   pages that already exist. So the recurring shapes are componentised here —
   the same type scale, colour and spacing as the design, expressed once — and
   each section plugin emits the matching classes.

   Naming: .mq-section is the outer band (owns the background), .mq-container
   the width limit, .mq-block a heading-plus-content unit.
   ========================================================================= */

/* --- Bands and containers ----------------------------------------------- */
.mq-section       { padding: clamp(56px, 6vw, 104px) 0; }
/* Two bands of the same colour read as one, so the second drops its top
   padding. A tone change must NOT collapse: without its own top padding the
   new band's first line sits flush against the edge of its own background,
   which is what made /about look unfinished. */
.mq-tone-paper + .mq-tone-paper,
.mq-tone-white + .mq-tone-white,
.mq-tone-tint  + .mq-tone-tint,
.mq-tone-dark  + .mq-tone-dark { padding-top: 0; }
.mq-container     { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 24px); }

/* Tones. Each sets its own text colours so a dark band never inherits dark
   type from the page — the single most common way these break. */
.mq-tone-paper    { background: var(--paper); color: var(--ink); }
.mq-tone-white    { background: #ffffff;      color: var(--ink); }
.mq-tone-tint     { background: var(--tint, #fdf0ee); color: var(--ink); }
.mq-tone-dark     { background: #161215;      color: #f5f2f2; }
.mq-tone-dark .mq-h2,
.mq-tone-dark .mq-card-title,
.mq-tone-dark .mq-step-title,
.mq-tone-dark .mq-prose-h2      { color: #ffffff; }
.mq-tone-dark .mq-lead,
.mq-tone-dark .mq-card-text,
.mq-tone-dark .mq-step-text,
.mq-tone-dark .mq-prose         { color: rgba(245,242,242,0.72); }
.mq-tone-dark .mq-card          { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.mq-tone-dark .mq-module        { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: #f5f2f2; }
.mq-tone-dark .mq-check-text    { color: rgba(245,242,242,0.7); }
.mq-tone-dark .mq-check-title   { color: #ffffff; }

/* --- Type ---------------------------------------------------------------- */
.mq-eyebrow       { font-size: 14px; font-weight: 600; color: var(--acc);
                    text-transform: uppercase; letter-spacing: 0.14em; }
.mq-eyebrow--light{ color: var(--acc-light, #ff8177); }
.mq-h2            { font-family: "DM Sans", sans-serif; font-weight: 500;
                    font-size: clamp(32px, 3.2vw, 52px); line-height: 1.1;
                    letter-spacing: -0.02em; margin: 18px 0 0; max-width: 22ch; color: var(--ink); }
.mq-lead          { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: var(--mut);
                    max-width: 62ch; margin: 20px 0 0; }
.mq-prose         { font-size: 16px; line-height: 1.75; color: var(--mut); max-width: 70ch; }
.mq-prose > :first-child { margin-top: 0; }
.mq-prose p + p   { margin-top: 16px; }
.mq-h2 + .mq-prose,
.mq-lead + .mq-prose { margin-top: 22px; }
.mq-prose h3      { font-family: "DM Sans", sans-serif; font-size: 22px; color: var(--ink); margin: 28px 0 10px; }
.mq-prose ul,
.mq-prose ol      { padding-left: 20px; }
.mq-prose li      { margin: 8px 0; }
.mq-prose a       { color: var(--acc); }

.mq-block-head    { margin-bottom: clamp(32px, 3.5vw, 56px); }
.mq-align-center  { text-align: center; }
.mq-align-center .mq-h2,
.mq-align-center .mq-lead,
.mq-align-center .mq-prose { margin-left: auto; margin-right: auto; }

/* --- Buttons ------------------------------------------------------------- */
.mq-actions       { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }
.mq-actions--center { justify-content: center; }
.mq-btn           { display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
                    color: #ffffff; background: var(--acc); font-size: 16px; font-weight: 600;
                    padding: 17px 30px; border-radius: 14px; border: 0; cursor: pointer;
                    transition: background 0.25s, transform 0.25s; }
.mq-btn:hover     { background: #f25e50; color: #fff; transform: translateY(-2px); }
.mq-btn--full     { width: 100%; justify-content: center; }
.mq-btn-ghost     { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
                    color: currentColor; font-size: 15px; font-weight: 600; padding: 16px 28px;
                    border-radius: 999px; border: 1.5px solid currentColor; opacity: 0.85;
                    transition: opacity 0.25s, background 0.25s; }
.mq-btn-ghost:hover { opacity: 1; background: rgba(255,255,255,0.1); color: currentColor; }
.mq-btn-white     { display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
                    background: #ffffff; color: var(--ink); font-size: 16px; font-weight: 600;
                    padding: 17px 32px; border-radius: 14px; }

/* --- 1300 Hero (inside the coloured header panel) ------------------------ */
.mq-hero-body     { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column;
                    justify-content: center; }
.mq-hero-inner    { padding: 40px clamp(20px, 3.5vw, 56px) 56px; }
.mq-hero-h1       { font-family: "DM Sans", sans-serif; font-weight: 500;
                    font-size: clamp(42px, 5.6vw, 86px); line-height: 1.06; letter-spacing: -0.02em;
                    color: #ffffff; max-width: 16ch; margin: 18px 0 0;
                    animation: fadeUp 0.8s ease both; }
.mq-hero-lead     { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.7; color: rgba(255,255,255,0.85);
                    max-width: 52ch; margin: 26px 0 0; animation: fadeUp 0.8s 0.15s ease both; }
.mq-hero-actions  { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px;
                    animation: fadeUp 0.8s 0.3s ease both; }
.mq-hero-card     { position: absolute; right: clamp(14px, 2.5vw, 40px); bottom: clamp(14px, 2.5vw, 40px);
                    z-index: 3; display: flex; gap: 22px; align-items: center; background: #ffffff;
                    border-radius: 22px; padding: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.25);
                    max-width: min(480px, calc(100% - 40px)); animation: fadeUp 0.8s 0.45s ease both; }
.mq-hero-card .hero-card-video { position: relative; width: 170px; flex: none; border-radius: 14px; overflow: hidden; }
.mq-hero-card .hero-card-video img { width: 170px; height: 120px; display: block; object-fit: cover; }
.mq-hero-card-body { padding-right: 10px; }
.mq-hero-card .hero-card-num { font-family: "DM Sans", sans-serif; font-weight: 700;
                    font-size: clamp(34px, 3vw, 44px); letter-spacing: -0.02em; white-space: nowrap;
                    background: var(--acc-grad, linear-gradient(120deg, #e8493e, #b3251a));
                    -webkit-background-clip: text; background-clip: text; color: transparent; }
.mq-hero-card-label { font-size: 15px; line-height: 1.45; color: var(--ink); font-weight: 600; margin-top: 4px; }

/* --- 1302 Split ---------------------------------------------------------- */
.mq-split         { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center;
                    grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .mq-split--right { grid-template-columns: 1fr 1fr; }
  .mq-split--left  { grid-template-columns: 1fr 1fr; }
  .mq-split--left .mq-split-body  { order: 2; }
  .mq-split--left .mq-split-media { order: 1; }
}
.mq-split-media img { width: 100%; height: 100%; max-height: 560px; object-fit: cover;
                    display: block; border-radius: 24px; }
/* In a two-column split the copy has half the width, so it needs its own
   measure and a slightly larger body size than a full-width prose block. */
.mq-split-body .mq-h2    { margin-top: 0; max-width: 18ch; }
.mq-split-body .mq-eyebrow + .mq-h2 { margin-top: 18px; }
.mq-split-body .mq-prose { font-size: 16.5px; line-height: 1.8; max-width: 46ch; }
.mq-split-body .mq-lead  { max-width: 46ch; }
.mq-ticks         { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr));
                    gap: 16px 32px; margin-top: 32px; }
.mq-tick          { display: flex; gap: 14px; align-items: center; font-size: 15.5px; font-weight: 700; }
.mq-tick-dot      { flex: none; display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
                    background: var(--acc); align-items: center; justify-content: center; }

/* --- 1303 Cards ---------------------------------------------------------- */
.mq-cards         { display: grid; gap: 20px;
                    grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr)); }
.mq-grid-2        { grid-template-columns: repeat(auto-fit, minmax(min(400px,100%), 1fr)); }
@media (min-width: 900px) {
  .mq-grid-3      { grid-template-columns: repeat(3, 1fr); }
  .mq-grid-4      { grid-template-columns: repeat(4, 1fr); }
}
.mq-card          { background: #ffffff; border: 1px solid var(--line); border-radius: 22px;
                    padding: 28px; display: flex; flex-direction: column; gap: 12px;
                    transition: border-color 0.3s, transform 0.3s; }
.mq-card:hover    { border-color: var(--acc-edge, rgba(232,73,62,0.45)); transform: translateY(-3px); }
.mq-cards--outline .mq-card { background: transparent; }
.mq-card-num      { font-family: "DM Sans", sans-serif; font-size: 34px; font-weight: 700;
                    color: var(--acc); line-height: 1; letter-spacing: -0.02em; }
.mq-card-icon span{ display: block; width: 34px; height: 34px; border-radius: 11px;
                    background: var(--acc-grad, linear-gradient(120deg, #e8493e, #b3251a)); }
.mq-card-meta     { font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em;
                    text-transform: uppercase; color: var(--acc); }
.mq-card-title    { font-family: "DM Sans", sans-serif; font-size: 20px; font-weight: 600;
                    line-height: 1.3; margin: 0; color: var(--ink); }
.mq-card-text     { font-size: 15.5px; line-height: 1.65; color: var(--mut); margin: 0; }

/* --- 1304 Stats ---------------------------------------------------------- */
.mq-stats-block   { }
.mq-stats         { display: grid; gap: clamp(28px, 3vw, 44px);
                    grid-template-columns: repeat(auto-fit, minmax(min(200px,100%), 1fr)); }
/* A hairline over each figure turns four floating numbers into a measured
   row, and keeps them aligned when the labels wrap to different heights. */
.mq-stat          { border-top: 1px solid var(--line); padding-top: 22px; }
.mq-tone-dark .mq-stat { border-top-color: rgba(255,255,255,0.16); }
.mq-stat-num      { font-family: "DM Sans", sans-serif; font-weight: 700;
                    font-size: clamp(44px, 3.6vw, 64px); line-height: 0.95; letter-spacing: -0.025em;
                    font-variant-numeric: tabular-nums; color: #ffffff; }
.mq-tone-paper .mq-stat-num,
.mq-tone-white .mq-stat-num,
.mq-tone-tint  .mq-stat-num  { color: var(--acc); }
.mq-stat-label    { font-size: 15.5px; font-weight: 600; margin-top: 14px; max-width: 22ch;
                    line-height: 1.45; }
.mq-tone-dark .mq-stat-label { color: rgba(245,242,242,0.78); }
.mq-stat-sub      { font-size: 14px; opacity: 0.65; margin-top: 4px; }

/* --- 1305 Modules -------------------------------------------------------- */
.mq-modules       { display: grid; gap: 12px;
                    grid-template-columns: repeat(auto-fill, minmax(min(190px,100%), 1fr)); }
.mq-module        { background: #ffffff; border: 1px solid var(--line); border-radius: 14px;
                    padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
                    font-size: 14.5px; font-weight: 600; transition: border-color 0.25s; }
.mq-module:hover  { border-color: var(--acc-edge, rgba(232,73,62,0.45)); }
.mq-modules--pill .mq-module { border-radius: 999px; flex-direction: row; align-items: center;
                    justify-content: center; text-align: center; padding: 12px 20px; }
.mq-modules--code { grid-template-columns: repeat(auto-fill, minmax(min(132px,100%), 1fr)); }
.mq-modules--code .mq-module { aspect-ratio: 1 / 1; justify-content: center; align-items: flex-start;
                    padding: 14px; }
.mq-module-code   { font-family: "DM Sans", sans-serif; font-size: 26px; font-weight: 700;
                    color: var(--acc); line-height: 1; }
.mq-module-name   { line-height: 1.35; }
.mq-module-meta   { font-size: 12px; font-weight: 600; text-transform: uppercase;
                    letter-spacing: 0.1em; color: var(--mut); opacity: 0.8; }

/* --- 1306 Steps ---------------------------------------------------------- */
.mq-steps         { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.mq-steps--row    { grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr)); }
.mq-step          { display: flex; gap: 18px; align-items: flex-start; }
.mq-steps--row .mq-step { flex-direction: column; gap: 14px; }
.mq-step-num      { flex: none; width: 44px; height: 44px; border-radius: 50%;
                    background: var(--acc); color: #ffffff; display: inline-flex;
                    align-items: center; justify-content: center;
                    font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 18px; }
.mq-step-title    { font-family: "DM Sans", sans-serif; font-size: 19px; font-weight: 600;
                    margin: 0 0 6px; color: var(--ink); }
.mq-step-text     { font-size: 15.5px; line-height: 1.65; color: var(--mut); margin: 0; }

/* --- 1307 Checklist ------------------------------------------------------ */
.mq-checks        { display: grid; gap: clamp(24px, 2.4vw, 34px) clamp(36px, 4vw, 64px); }
.mq-checks--one   { grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .mq-checks--two   { grid-template-columns: repeat(2, 1fr); }
  .mq-checks--three { grid-template-columns: repeat(3, 1fr); }
}
.mq-check         { display: flex; gap: 14px; align-items: flex-start; }
.mq-check-dot     { flex: none; display: inline-flex; width: 30px; height: 30px; border-radius: 50%;
                    background: var(--acc-wash, rgba(232,73,62,0.12)); color: var(--acc);
                    align-items: center; justify-content: center; margin-top: 1px; }
.mq-tone-dark .mq-check-dot { background: rgba(255,255,255,0.12); color: var(--acc-light, #ff8177); }
.mq-check         { padding-right: 8px; }
.mq-check-title   { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.mq-check-text    { font-size: 15.5px; line-height: 1.7; color: var(--mut); margin-top: 8px;
                    max-width: 42ch; }

/* --- 1308 Cases ---------------------------------------------------------- */
.mq-cases         { display: grid; gap: 24px;
                    grid-template-columns: repeat(auto-fit, minmax(min(320px,100%), 1fr)); }
.mq-case          { display: block; text-decoration: none; color: inherit; border-radius: 24px;
                    overflow: hidden; background: #ffffff; border: 1px solid var(--line); }
.mq-case-img      { aspect-ratio: 16 / 10; overflow: hidden; }
.mq-case-img img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-case-body     { padding: 26px; }
.mq-case-tag      { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
                    text-transform: uppercase; color: var(--acc); margin-bottom: 12px; }
.mq-case-title    { font-family: "DM Sans", sans-serif; font-size: 21px; font-weight: 600;
                    margin: 0 0 10px; line-height: 1.3; color: var(--ink); }
.mq-case-text     { font-size: 15.5px; line-height: 1.65; color: var(--mut); margin: 0; }

/* --- 1309 Products ------------------------------------------------------- */
.mq-products      { display: grid; gap: 20px;
                    grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); }
.mq-product       { display: flex; flex-direction: column; gap: 12px; text-decoration: none;
                    color: inherit; background: #ffffff; border: 1px solid var(--line);
                    border-radius: 22px; padding: 30px; transition: border-color 0.3s, transform 0.3s; }
.mq-product:hover { border-color: var(--acc-edge, rgba(232,73,62,0.45)); transform: translateY(-4px); color: inherit; }
.mq-product-logo  { height: 34px; width: auto; max-width: 170px; object-fit: contain;
                    align-self: flex-start; }
.mq-product-title { font-family: "DM Sans", sans-serif; font-size: 21px; font-weight: 600;
                    margin: 0; color: var(--ink); }
.mq-product-text  { font-size: 15.5px; line-height: 1.65; color: var(--mut); margin: 0; flex: 1; }
.mq-product-more  { display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
                    font-weight: 700; color: var(--acc); margin-top: 6px; }

/* --- 1310 CTA ------------------------------------------------------------ */

/* --- 1310 CTA — panel variant -------------------------------------------
   A flat dark band sitting directly on a dark footer gives the eye nothing to
   land on: the page just stops. The panel keeps the band light and puts the
   brand gradient into a card, borrowing the hero's diagonal weave so the top
   and bottom of a page rhyme. Copy left, the details a visitor needs right.
   ------------------------------------------------------------------------ */
.mq-ctapanel      { position: relative; border-radius: clamp(24px, 2.4vw, 34px); overflow: hidden;
                    color: #ffffff; isolation: isolate;
                    background: linear-gradient(122deg, #7d1109 0%, #b3251a 42%, #e8493e 78%, #f4715f 108%);
                    box-shadow: 0 34px 80px rgba(139, 26, 16, 0.28); }
.mq-ctapanel::before,
.mq-ctapanel::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mq-ctapanel::before { background:
                    repeating-linear-gradient(112deg, rgba(255,255,255,0.075) 0 3px, transparent 3px 38px, rgba(255,255,255,0.04) 38px 41px, transparent 41px 90px),
                    repeating-linear-gradient(112deg, transparent 0 140px, rgba(0,0,0,0.14) 140px 143px, transparent 143px 260px); }
.mq-ctapanel::after { background:
                    radial-gradient(760px 520px at 88% 12%, rgba(255,255,255,0.22), transparent 62%),
                    radial-gradient(620px 460px at 4% 104%, rgba(60,4,0,0.5), transparent 66%); }
.mq-ctapanel-grid { position: relative; z-index: 1; display: grid; gap: clamp(32px, 4vw, 64px);
                    align-items: center; padding: clamp(38px, 5vw, 76px) clamp(26px, 4vw, 68px); }
@media (min-width: 940px) {
  .mq-ctapanel-grid { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); }
}
.mq-ctapanel-eyebrow { font-size: 13.5px; font-weight: 700; letter-spacing: 0.16em;
                    text-transform: uppercase; color: rgba(255,255,255,0.72); }
.mq-ctapanel-h2   { font-family: "DM Sans", sans-serif; font-weight: 500;
                    font-size: clamp(34px, 3.6vw, 58px); line-height: 1.06; letter-spacing: -0.025em;
                    color: #ffffff; margin: 16px 0 0; max-width: 15ch; }
.mq-ctapanel-text { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; margin: 20px 0 0;
                    color: rgba(255,255,255,0.86); max-width: 46ch; }
.mq-ctapanel-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.mq-ctapanel-actions .mq-btn-white  { background: #ffffff; color: var(--ink); }
.mq-ctapanel-actions .mq-btn-white:hover { color: var(--ink); transform: translateY(-2px);
                    box-shadow: 0 18px 40px rgba(0,0,0,0.22); }
.mq-ctapanel-actions .mq-btn-ghost  { color: #ffffff; border-color: rgba(255,255,255,0.55); }
.mq-ctapanel-actions .mq-btn-ghost:hover { background: rgba(255,255,255,0.14); color: #ffffff; }

/* The contact rows are a list, not cards: one hairline each, so they read as
   a single block of details rather than four competing boxes. */
.mq-ctapanel-aside { display: grid; gap: 0; }
.mq-ctapanel-row  { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
                    gap: 8px 20px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.22); }
.mq-ctapanel-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.22); }
.mq-ctapanel-k    { font-size: 12.5px; font-weight: 700; letter-spacing: 0.13em;
                    text-transform: uppercase; color: rgba(255,255,255,0.62); }
.mq-ctapanel-v    { font-size: 16.5px; font-weight: 600; color: #ffffff; text-decoration: none;
                    text-align: right; }
a.mq-ctapanel-v   { border-bottom: 1px solid rgba(255,255,255,0.35); transition: border-color 0.25s; }
a.mq-ctapanel-v:hover { color: #ffffff; border-bottom-color: #ffffff; }
@media (max-width: 939px) {
  .mq-ctapanel-row { justify-content: flex-start; }
  .mq-ctapanel-v   { text-align: left; width: 100%; }
}


/* --- 1310 CTA — card variant --------------------------------------------
   The product pages close on a brand-coloured card, not on a flat band: the
   approved design ends each page with a rounded gradient block that carries
   the product's own colour, then lets the footer read as a separate object
   below it. One skin per product, all sharing this structure — the markup
   and the metrics are the ones from html/<product>.html.
   ------------------------------------------------------------------------ */
.mq-s-1310--card  { padding: clamp(28px, 3vw, 48px) 0 clamp(32px, 3.4vw, 52px); }
.mq-tone-paper + .mq-s-1310--card.mq-tone-paper,
.mq-tone-white + .mq-s-1310--card.mq-tone-white { padding-top: clamp(28px, 3vw, 48px); }

/* The unskinned card IS the home page's close, value for value from
   html/index.html — that is what makes it a sane default for any page that
   does not pick a product colour. */
.mq-ctacard       { position: relative; border-radius: 30px; overflow: hidden; isolation: isolate;
                    color: #ffffff; --cta-ink: #141114; --cta-eyebrow: #ffb3a6;
                    --cta-weave: repeating-linear-gradient(112deg, rgba(255,255,255,0.06) 0 3px, transparent 3px 40px);
                    --cta-glow: radial-gradient(680px 380px at 82% 12%, rgba(247,138,111,0.28), transparent 60%);
                    background: linear-gradient(125deg, #1c0507 0%, #521721 40%, #b3251a 85%, #e8493e 110%);
                    box-shadow: 0 34px 80px rgba(120, 20, 15, 0.24); }
.mq-ctacard::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
                    background: var(--cta-weave), var(--cta-glow); }
.mq-ctacard-inner { position: relative; z-index: 1; max-width: var(--cta-width, 820px); margin: 0 auto;
                    padding: clamp(64px, 7vw, 110px) 32px; text-align: center; }
.mq-ctacard-logo  { height: 44px; width: auto; margin: 0 auto 26px; display: block; }
.mq-ctacard-eyebrow { font-size: 14px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: 0.14em; color: var(--cta-eyebrow); }
.mq-ctacard-h2    { font-family: "DM Sans", sans-serif; font-weight: 500;
                    font-size: clamp(36px, 4.4vw, 66px); line-height: 1.06; letter-spacing: -0.025em;
                    color: #ffffff; margin: 20px 0 0; }
.mq-ctacard-text  { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.82);
                    max-width: var(--cta-measure, 52ch); margin: 22px auto 0; }
.mq-ctacard-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.mq-ctacard-actions .mq-btn-white { background: #ffffff; color: var(--cta-ink);
                    font-size: 16px; font-weight: 700; padding: 19px 36px; border-radius: 14px; }
.mq-ctacard-actions .mq-btn-white:hover { color: var(--cta-ink); transform: translateY(-2px);
                    box-shadow: 0 18px 40px rgba(0,0,0,0.25); }
.mq-ctacard-actions .mq-btn-ghost { color: #ffffff; border-color: rgba(255,255,255,0.55); }
.mq-ctacard-actions .mq-btn-ghost:hover { background: rgba(255,255,255,0.14); color: #ffffff; }
.mq-ctacard-contacts { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center;
                    margin-top: 30px; font-size: 14.5px; color: rgba(255,255,255,0.85); font-weight: 600; }
.mq-ctacard-contacts a { color: inherit; text-decoration: none; }
.mq-ctacard-contacts a:hover { color: #ffffff; }

/* Skins. Each one is the gradient, texture and button ink from that product's
   approved page — nothing else changes. */
.mq-ctacard--dg   { --cta-width: 860px; --cta-measure: 56ch; --cta-ink: #06483a; --cta-eyebrow: #8fc9b6;
                    --cta-glow: radial-gradient(680px 380px at 82% 12%, rgba(79,174,146,0.28), transparent 60%);
                    background: linear-gradient(125deg, #04120f 0%, #0a3d31 40%, #06483a 85%, #085946 110%);
                    box-shadow: 0 34px 80px rgba(6, 60, 48, 0.28); }
.mq-ctacard--miq  { --cta-width: 860px; --cta-measure: 56ch; --cta-ink: #1f5e13; --cta-eyebrow: #a6e87e;
                    --cta-glow: radial-gradient(680px 380px at 82% 12%, rgba(150,231,110,0.28), transparent 60%);
                    background: linear-gradient(125deg, #07170a 0%, #123a14 40%, #3f9e26 85%, #5ac737 110%);
                    box-shadow: 0 34px 80px rgba(18, 58, 20, 0.28); }
.mq-ctacard--liq  { --cta-width: 860px; --cta-measure: 56ch; --cta-ink: #0a2148; --cta-eyebrow: #bfe0ff;
                    --cta-glow: radial-gradient(680px 380px at 82% 12%, rgba(125,179,236,0.28), transparent 60%);
                    background: linear-gradient(125deg, #04122a 0%, #0d2c5e 40%, #1950a0 85%, #7db3ec 110%);
                    box-shadow: 0 34px 80px rgba(13, 44, 94, 0.28); }
.mq-ctacard--bb   { --cta-width: 860px; --cta-measure: 56ch; --cta-ink: #4a0f0d; --cta-eyebrow: #ffd7d5;
                    --cta-glow: radial-gradient(680px 380px at 82% 12%, rgba(255,190,186,0.30), transparent 60%);
                    background: linear-gradient(125deg, #2a0605 0%, #6d1512 40%, #b92924 85%, #f0a5a1 110%);
                    box-shadow: 0 34px 80px rgba(109, 21, 18, 0.28); }
.mq-ctacard--ciq  { --cta-width: 860px; --cta-measure: 56ch; --cta-ink: #15484f; --cta-eyebrow: #a8e0e4;
                    --cta-weave: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 50px);
                    --cta-glow: radial-gradient(680px 380px at 84% 10%, rgba(168,224,228,0.30), transparent 60%);
                    background: linear-gradient(125deg, #041d21 0%, #0e444b 38%, #3e98a1 86%, #9fdbe0 112%);
                    box-shadow: 0 34px 80px rgba(14, 68, 75, 0.28); }
.mq-ctacard--cd   { --cta-width: 860px; --cta-measure: 56ch; --cta-ink: #063983; --cta-eyebrow: #f7ad70;
                    --cta-weave: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 46px);
                    --cta-glow: radial-gradient(680px 380px at 82% 12%, rgba(238,139,61,0.32), transparent 60%);
                    background: linear-gradient(125deg, #021936 0%, #063983 42%, #0a4ea8 72%, #ee8b3d 120%);
                    box-shadow: 0 34px 80px rgba(6, 57, 131, 0.28); }

/* --- 1311 Contact form --------------------------------------------------- */
.mq-form-grid     { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .mq-form-grid { grid-template-columns: 0.85fr 1.15fr; } }
.mq-form-details  { display: grid; gap: 20px; margin-top: 32px; }
.mq-form-detail-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em;
                    text-transform: uppercase; color: var(--acc); margin-bottom: 6px; }
.mq-form-detail a { color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 600; }
.mq-form-detail a:hover { color: var(--acc); }
/* "aside" layout: the heading, the copy and the reach-us details share one
   column beside the form, so the column is a block of content rather than a
   short list stranded under a full-width heading. */
.mq-form-block--aside .mq-form-grid { align-items: start; }
@media (min-width: 900px) {
  .mq-form-block--aside .mq-form-grid { grid-template-columns: 0.95fr 1.05fr; }
}
.mq-form-block--aside .mq-form-side .mq-block-head { margin-bottom: 0; }
.mq-form-block--aside .mq-form-side .mq-h2   { font-size: clamp(30px, 2.8vw, 44px); max-width: 17ch; }
.mq-form-block--aside .mq-form-side .mq-lead { max-width: 44ch; }
.mq-form-block--aside .mq-form-side .mq-prose { margin-top: 22px; max-width: 46ch; }

/* Reach-us details as their own cards, so the address and the phone number
   read as things to use rather than as small print. */
.mq-form-block--aside .mq-form-details { gap: 12px; margin-top: 34px; }
.mq-form-block--aside .mq-form-detail  { background: #ffffff; border: 1px solid var(--line);
                    border-radius: 16px; padding: 16px 18px; transition: border-color 0.25s, transform 0.25s; }
.mq-form-block--aside .mq-form-detail:hover { border-color: var(--acc-edge, rgba(232, 73, 62, 0.45)); transform: translateY(-2px); }
.mq-form-block--aside .mq-form-detail a,
.mq-form-block--aside .mq-form-detail > div:last-child { font-size: 16px; font-weight: 600;
                    line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 560px) {
  .mq-form-block--aside .mq-form-details { grid-template-columns: 1fr 1fr; }
  .mq-form-block--aside .mq-form-detail:first-child { grid-column: 1 / -1; }
}

.mq-form-card     { background: #ffffff; border: 1px solid var(--line); border-radius: 26px;
                    padding: clamp(24px, 3vw, 40px); }
.mq-form          { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .mq-form { grid-template-columns: 1fr 1fr; } }
.mq-field--wide   { grid-column: 1 / -1; }
.mq-field label   { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 8px;
                    color: var(--ink); }
.mq-field input,
.mq-field textarea{ width: 100%; font: inherit; font-size: 15px; color: var(--ink);
                    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
                    padding: 14px 16px; }
.mq-field textarea{ resize: vertical; min-height: 130px; }
.mq-field input:focus,
.mq-field textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: transparent; }
/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden fields but not positioned ones. */
.mq-hp            { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mq-form-note     { border-radius: 14px; padding: 16px 18px; margin-bottom: 20px; font-size: 15px; }
.mq-form-note--ok { background: #e8f6ee; color: #14683c; }
.mq-form-note--err{ background: #fdecea; color: #8a1c12; }

/* --- 1312 Prose ---------------------------------------------------------- */
.mq-prose-block--card { background: #ffffff; border: 1px solid var(--line); border-radius: 24px;
                    padding: clamp(26px, 3vw, 44px); }
.mq-prose-block + .mq-prose-block { margin-top: 20px; }
.mq-prose-h2      { font-family: "DM Sans", sans-serif; font-size: clamp(24px, 2vw, 32px);
                    font-weight: 600; margin: 0 0 16px; color: var(--ink); }

/* --- 1313 Logos ---------------------------------------------------------- */
.mq-logos         { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
                    gap: clamp(24px, 4vw, 64px); }
.mq-logo img      { height: clamp(44px, 5vw, 68px); width: auto; object-fit: contain;
                    filter: grayscale(1); opacity: 0.7; transition: filter 0.3s, opacity 0.3s; }
.mq-logo img:hover{ filter: none; opacity: 1; }
.mq-logo span     { font-size: 15px; font-weight: 700; color: var(--mut); }

/* --- 1314 Map ------------------------------------------------------------ */
.mq-map-block     { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
                    gap: clamp(24px, 3vw, 48px); align-items: stretch; }
.mq-map-block--full { grid-template-columns: minmax(0, 1fr); }

/* Full width: the heading and the practical details sit centred above a map
   that runs the whole width of the container. The side panel loses its card
   treatment here — it is a lead-in, not a box. */
.mq-map-block--full .mq-map-side,
.mq-tone-white .mq-map-block--full .mq-map-side,
.mq-tone-tint  .mq-map-block--full .mq-map-side,
.mq-tone-dark  .mq-map-block--full .mq-map-side {
                    text-align: center; background: none; border: 0; padding: 0;
                    box-shadow: none; max-width: 760px; margin: 0 auto; }
.mq-map-block--full .mq-map-side .mq-h2 { max-width: none; margin-left: auto; margin-right: auto;
                    font-size: clamp(30px, 3vw, 46px); text-wrap: balance; }
.mq-map-block--full .mq-map-side .mq-lead,
.mq-map-block--full .mq-map-side .mq-prose { max-width: 62ch; margin-left: auto; margin-right: auto; }

/* Across the top of a full-width map the details read as a row of chips —
   one glanceable fact each — rather than a stacked list. */
.mq-map-block--full .mq-map-details { display: flex; flex-wrap: wrap; justify-content: center;
                    gap: 12px; margin-top: 30px; }
.mq-map-block--full .mq-map-detail  { align-items: center; gap: 10px; text-align: left;
                    background: #ffffff; border: 1px solid var(--line); border-radius: 999px;
                    padding: 9px 18px 9px 10px; }
.mq-tone-white .mq-map-block--full .mq-map-detail { background: var(--paper); }
.mq-tone-dark  .mq-map-block--full .mq-map-detail { background: rgba(255, 255, 255, 0.05);
                    border-color: rgba(255, 255, 255, 0.12); }
.mq-map-block--full .mq-map-detail-icon  { width: 34px; height: 34px; border-radius: 999px; }
.mq-map-block--full .mq-map-detail-icon svg { width: 16px; height: 16px; }
.mq-map-block--full .mq-map-detail-label { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 1px; }
.mq-map-block--full .mq-map-detail-value { font-size: 15px; overflow-wrap: normal; }
.mq-map-block--full .mq-actions { justify-content: center; margin-top: 30px; }
.mq-map-block--full .mq-map-frame { margin-top: clamp(30px, 3.4vw, 48px); }

.mq-map-side      { align-self: center; background: #ffffff; border: 1px solid var(--line);
                    border-radius: 28px; padding: clamp(26px, 2.8vw, 40px);
                    box-shadow: 0 22px 50px rgba(20, 17, 20, 0.06); }
.mq-tone-white .mq-map-side { background: var(--paper); box-shadow: none; }
.mq-tone-tint  .mq-map-side { background: #ffffff; }
.mq-tone-dark  .mq-map-side { background: rgba(255, 255, 255, 0.04);
                    border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
.mq-map-side .mq-h2   { font-size: clamp(28px, 2.6vw, 40px); max-width: 18ch; margin-top: 14px; }
.mq-map-side .mq-lead { max-width: 40ch; margin-top: 16px; }
.mq-map-side .mq-actions { margin-top: 28px; }

.mq-map-details   { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.mq-map-detail    { display: flex; align-items: flex-start; gap: 14px; }
.mq-map-detail-icon { flex: none; width: 40px; height: 40px; border-radius: 12px;
                    display: inline-flex; align-items: center; justify-content: center;
                    background: var(--tint, #fdf0ee); color: var(--acc); }
.mq-tone-dark .mq-map-detail-icon { background: var(--acc-wash, rgba(232, 73, 62, 0.16)); color: var(--acc-light, #ff8177); }
.mq-map-detail-body { display: block; min-width: 0; }
.mq-map-detail-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em;
                    text-transform: uppercase; color: var(--mut); margin-bottom: 4px; }
.mq-tone-dark .mq-map-detail-label { color: rgba(245, 242, 242, 0.6); }
.mq-map-detail-value { display: block; font-size: 16px; font-weight: 600; line-height: 1.5;
                    color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.mq-tone-dark .mq-map-detail-value { color: #ffffff; }
a.mq-map-detail-value:hover { color: var(--acc); }

.mq-map-frame     { position: relative; border-radius: 28px; overflow: hidden;
                    border: 1px solid var(--line); background: var(--paper);
                    box-shadow: 0 30px 70px rgba(20, 17, 20, 0.1);
                    min-height: var(--mq-map-h, 460px); }
.mq-tone-dark .mq-map-frame { border-color: rgba(255, 255, 255, 0.12);
                    background: rgba(255, 255, 255, 0.04); }
.mq-map-frame iframe { display: block; width: 100%; height: 100%; min-height: var(--mq-map-h, 460px);
                    border: 0; filter: saturate(0.92) contrast(1.02); }

@media (max-width: 980px) {
  .mq-map-block   { grid-template-columns: minmax(0, 1fr); }
  .mq-map-frame,
  .mq-map-frame iframe { min-height: 340px; }
}
@media (max-width: 560px) {
  .mq-map-detail-icon { width: 36px; height: 36px; border-radius: 10px; }
  .mq-map-frame,
  .mq-map-frame iframe { min-height: 300px; }
}

/* --- Admin repeater (loaded on the front too, harmless and tiny) --------- */
.mq-items-table td { padding: 4px; }

/* ---------------------------------------------------------------------------
   Hero button.
   In the static design this button's look was written inline on the element
   and .btn-hero carried only the hover transition. Now that the markup comes
   from a plugin, the full appearance has to live here or the button renders as
   a bare underlined link.
   ------------------------------------------------------------------------ */
.btn-hero {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; color: #ffffff; font-size: 16px; font-weight: 600;
  padding: 20px 34px; border-radius: 14px; background: var(--acc);
  box-shadow: 0 14px 34px rgba(0,0,0,0.25);
}
.btn-hero:hover { color: #ffffff; }

/* ---------------------------------------------------------------------------
   Ghost buttons inside the hero.
   .mq-btn-ghost borrows currentColor so it works on any background, but the
   hero panel does not set a text colour on its container — so the button was
   inheriting the page's dark ink and rendering nearly invisible on the
   coloured panel. The hero is always dark, so pin it to white here.
   ------------------------------------------------------------------------ */
.mq-hero-body { color: #ffffff; }
.mq-hero-actions .mq-btn-ghost { color: #ffffff; border-color: rgba(255,255,255,0.55); }
.mq-hero-actions .mq-btn-ghost:hover { background: rgba(255,255,255,0.14); color: #ffffff; }

/* Same on the dark CTA band. */
.mq-tone-dark .mq-btn-ghost { color: #ffffff; border-color: rgba(255,255,255,0.5); }

/* ---------------------------------------------------------------------------
   The design wraps the whole page in <div style="overflow:hidden">. That is
   not decoration: the marquee strip is rotated and scaled past the viewport
   edges, so without it the page gains a horizontal scrollbar and everything
   can be dragged sideways.

   It must be `clip`, not `hidden`. `overflow: hidden` makes this wrapper a
   scroll container, and a scroll container swallows fragment navigation:
   jumping to #apply or #roles scrolls this div — which has no height of its
   own to scroll — instead of the window, so the page appears not to move.
   `clip` does the same clipping without creating that container, and naming
   the axis leaves vertical scrolling to the window where it belongs.
   ------------------------------------------------------------------------ */
.mq-page { overflow-x: clip; }
@supports not (overflow-x: clip) { .mq-page { overflow-x: hidden; } }

/* ===========================================================================
   DOCTOR-G PAGE STYLES
   ---------------------------------------------------------------------------
   Lifted from the <style> block in html/doctor-g.html.

   Everything is scoped under .mq-brand-doctor-g — the class the theme puts on
   <body> for this page. The design file could write `:root { --acc: #085946 }`
   because it was one standalone page; here every page shares one stylesheet,
   so an unscoped override would repaint the whole site green.
   ========================================================================= */

/* The page's accent. Scoped, so only Doctor-G turns green. */
.mq-brand-doctor-g { --acc: #085946; --acc-deep: #06483a;
                     --tint: #eaf4f0; --acc-edge: rgba(8,89,70,0.45); --acc-wash: rgba(8,89,70,0.12);
                     --acc-light: #8fc9b6;
  --acc-grad: linear-gradient(120deg, #0a6e56, #06483a); --acc-select: rgba(8,89,70,0.22); }

/* --- Hover states --------------------------------------------------------- */
.dg-chip      { transition: transform 0.25s, background 0.25s, color 0.25s; }
.dg-chip:hover{ transform: translateY(-3px); }
.dg-feat      { transition: border-color 0.3s, transform 0.3s; }
.dg-feat:hover{ border-color: rgba(8,89,70,0.5); transform: translateY(-4px); }
.dg-frame     { transition: transform 0.4s; }
.dg-frame:hover { transform: translateY(-6px); }
.dg-step      { transition: transform 0.3s, box-shadow 0.3s; }
.dg-step:hover{ transform: translateY(-5px); box-shadow: 0 24px 54px rgba(12,26,23,0.12); }
.dg-badge     { transition: transform 0.25s, border-color 0.25s; }
.dg-badge:hover { transform: translateY(-4px); border-color: rgba(63,154,128,0.6); }
.dg-btn-hero  { transition: background 0.25s, transform 0.25s; }
.dg-btn-hero:hover { background: #0a6e56; transform: translateY(-2px); }

/* --- Handwriting-to-record ledger ---------------------------------------- */
.dg-ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(430px,100%), 1fr));
             gap: 12px; margin-top: 44px; }
.dg-lrow   { display: flex; align-items: center; gap: 16px; background: #ffffff;
             border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px;
             transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.dg-lrow:hover { transform: translateY(-3px); border-color: rgba(8,89,70,0.45);
             box-shadow: 0 18px 40px rgba(12,26,23,0.08); }
/* The handwriting face. Caveat is loaded in the document head — without it the
   left-hand column falls back to a system cursive and the whole "written by
   hand" idea of this section is lost. */
.dg-hand   { font-family: 'Caveat', cursive; font-size: clamp(20px, 1.9vw, 25px); font-weight: 600;
             color: #1c3f94; line-height: 1.15; flex: 1;
             border-bottom: 1.5px dashed rgba(28,63,148,0.3); padding-bottom: 6px; }
.dg-larrow { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #e6f2ee;
             color: var(--acc); display: inline-flex; align-items: center; justify-content: center;
             transition: background 0.25s, color 0.25s; }
.dg-lrow:hover .dg-larrow { background: var(--acc); color: #ffffff; }
.dg-ltag   { flex: none; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em;
             text-transform: uppercase; color: var(--ink); background: #f3f7f5;
             border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; }
@media (max-width: 520px) {
  .dg-lrow { flex-wrap: wrap; }
  .dg-hand { flex-basis: 100%; }
}

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Doctor-G's paler footer ground is set via --footer-page in the brand
   palette above; nothing extra is needed here. */

/* --- Responsive hero ------------------------------------------------------ */
@media (max-width: 720px) {
  .dg-hero-h1 { font-size: 40px !important; }
  .hero-card-video, .hero-card-video img { width: 116px !important; height: 84px !important; }
}
@media (max-width: 480px) {
  .dg-hero-badge { font-size: 10.5px; letter-spacing: 0.06em; line-height: 1.4; padding: 8px 14px; }
  .dg-hero-h1  { font-size: 33px !important; line-height: 1.06 !important; margin-top: 18px !important; }
  .dg-hero-sub { font-size: 15.5px !important; line-height: 1.6 !important; margin-top: 18px !important; }
  .hero-card   { gap: 14px !important; padding: 12px !important; }
  .hero-card-video, .hero-card-video img { width: 96px !important; height: 72px !important; }
  .hero-card-num { font-size: 24px !important; }
}

/* ===========================================================================
   MED-IQ PAGE STYLES
   ---------------------------------------------------------------------------
   Lifted from the <style> block in html/med-iq.html.

   The design file could put `:root { --miq: #5ac737 }` because it was one
   standalone page. Here every page shares one stylesheet, so the palette is
   scoped to .mq-brand-med-iq — the class the theme puts on <body> for this
   page — and only MED-IQ turns green.

   Designed and developed by OASIS — https://oasis.ind.in · info@oasis.ind.in
   PROPRIETARY AND CONFIDENTIAL. Copying this file, or any part of it, into
   another website, product or client project without the prior written
   consent of OASIS is prohibited.  (c) 2026 OASIS. All rights reserved.
   ========================================================================= */

.mq-brand-med-iq {
  --miq:      #5ac737;
  --miq-deep: #3f9e26;
  --miq-dark: #1f5e13;
  --miq-tint: #eef9e7;
  --miq-line: rgba(90,199,55,0.2);
  /* The generic accent too, so any shared component on this page (buttons,
     links, the contact block) picks up the product colour without needing a
     MED-IQ-specific rule of its own. */
  --acc: #3f9e26; --acc-deep: #1f5e13;
  --tint: #eef9e7; --acc-edge: rgba(63,158,38,0.45); --acc-wash: rgba(63,158,38,0.12);
  --acc-light: #a6e87e;
  --acc-grad: linear-gradient(120deg, #5ac737, #3f9e26); --acc-select: rgba(63,158,38,0.22);
}

/* --- Hover states --------------------------------------------------------- */
.miq-chip      { transition: transform 0.25s, background 0.25s, color 0.25s, border-color 0.25s; }
.miq-chip:hover{ transform: translateY(-3px); }
.miq-feat      { transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.miq-feat:hover{ border-color: rgba(90,199,55,0.5); transform: translateY(-4px);
                 box-shadow: 0 24px 54px rgba(10,60,35,0.1); }
.miq-frame     { transition: transform 0.4s; }
.miq-frame:hover { transform: translateY(-6px); }
.miq-step      { transition: transform 0.3s, box-shadow 0.3s; }
.miq-step:hover{ transform: translateY(-5px); box-shadow: 0 24px 54px rgba(6,30,18,0.35); }
.miq-badge     { transition: transform 0.25s, border-color 0.25s; }
.miq-badge:hover { transform: translateY(-4px); border-color: rgba(90,199,55,0.55); }
.miq-btn-hero  { transition: background 0.25s, transform 0.25s; }
.miq-btn-hero:hover { background: #f25e50; transform: translateY(-2px); }
.miq-btn-green { transition: background 0.25s, transform 0.25s, box-shadow 0.25s; }
.miq-btn-green:hover { background: #4fac2a; transform: translateY(-2px);
                 box-shadow: 0 18px 38px rgba(30,90,15,0.35); }

/* --- The MED-IQ building (floor-by-floor modules) ------------------------- */
.miq-floor       { display: grid; grid-template-columns: 180px 1fr;
                   border-top: 1px solid var(--miq-line); transition: background 0.25s; }
.miq-floor:first-of-type { border-top: none; }
.miq-floor:hover { background: #fbfef9; }
.miq-floor-tag   { display: flex; flex-direction: column; justify-content: center; gap: 5px;
                   padding: 22px 20px; background: var(--miq-tint);
                   border-right: 1px solid var(--miq-line); }
.miq-floor-rooms { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 20px 22px; }
.miq-room        { display: inline-flex; align-items: center; gap: 8px; background: #ffffff;
                   border: 1px solid var(--miq-line); border-radius: 10px; padding: 10px 14px;
                   font-size: 13.5px; font-weight: 700; color: var(--ink);
                   transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s; }
.miq-room:hover  { transform: translateY(-2px); background: var(--miq);
                   border-color: var(--miq); color: #ffffff; }
.miq-room:hover .room-dot { background: #ffffff; }
.room-dot        { width: 7px; height: 7px; border-radius: 50%; background: var(--miq);
                   flex: none; transition: background 0.2s; }
@media (max-width: 640px) {
  .miq-floor     { grid-template-columns: 1fr; }
  .miq-floor-tag { flex-direction: row; align-items: center; gap: 12px; padding: 14px 20px;
                   border-right: none; border-bottom: 1px solid var(--miq-line); }
}

/* --- Responsive hero ------------------------------------------------------ */
@media (max-width: 720px) {
  .miq-hero-h1 { font-size: 40px !important; }
}
@media (max-width: 480px) {
  .miq-hero-badge { font-size: 10.5px; letter-spacing: 0.06em; line-height: 1.4; padding: 8px 14px; }
  .miq-hero-h1  { font-size: 32px !important; line-height: 1.08 !important; margin-top: 18px !important; }
  .miq-hero-sub { font-size: 15.5px !important; line-height: 1.6 !important; margin-top: 18px !important; }
}

/* ===========================================================================
   BB-IQ PAGE STYLES
   ---------------------------------------------------------------------------
   Lifted from the <style> block in html/bb-iq.html.

   The palette is scoped to .mq-brand-bb-iq — the class the theme puts on
   <body> for this page — because the design file's `:root` would repaint the
   whole site.

   Designed and developed by OASIS — https://oasis.ind.in · info@oasis.ind.in
   PROPRIETARY AND CONFIDENTIAL. Copying this file, or any part of it, into
   another website, product or client project without the prior written
   consent of OASIS is prohibited.  (c) 2026 OASIS. All rights reserved.
   ========================================================================= */

.mq-brand-bb-iq {
  --bb:       #b92924;
  --bb-light: #e0524c;
  --bb-soft:  #f5a9a5;
  --bb-deep:  #8e1c18;
  --bb-dark:  #4a0f0d;
  --bb-tint:  #fdecec;
  --bb-tint2: #fbdad8;
  --bb-line:  rgba(185,41,36,0.18);
  /* Shared components on this page follow the product colour too. */
  --acc: #b92924; --acc-deep: #8e1c18;
  --tint: #fdecec; --acc-edge: rgba(185,41,36,0.45); --acc-wash: rgba(185,41,36,0.12);
  --acc-light: #ffd7d5;
  --acc-grad: linear-gradient(120deg, #e0524c, #8e1c18); --acc-select: rgba(185,41,36,0.22);
}

/* --- Hover states --------------------------------------------------------- */
.bb-btn-red      { transition: background 0.25s, transform 0.25s, box-shadow 0.25s; }
.bb-btn-red:hover{ background: #d1352f; transform: translateY(-2px);
                   box-shadow: 0 18px 38px rgba(80,12,10,0.35); }
.bb-feat         { transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.bb-feat:hover   { border-color: rgba(185,41,36,0.45); transform: translateY(-4px);
                   box-shadow: 0 24px 54px rgba(60,10,8,0.1); }
.bb-chip         { transition: transform 0.25s, background 0.25s, color 0.25s, border-color 0.25s; }
.bb-chip:hover   { transform: translateY(-3px); background: var(--bb);
                   border-color: var(--bb); color: #ffffff; }
.bb-badge        { transition: transform 0.25s, border-color 0.25s; }
.bb-badge:hover  { transform: translateY(-4px); border-color: rgba(224,82,76,0.55); }

/* --- Vein-to-vein chain (donation lifecycle) ------------------------------ */
.bb-chain   { position: relative; display: grid;
              grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
              gap: 12px; margin-top: 48px; }
@media (min-width: 1080px) { .bb-chain { grid-template-columns: repeat(7, 1fr); } }
/* The dashed line joining the drops. Inset by the drop's half-width so it
   starts and ends under the first and last marker rather than in mid-air. */
.bb-chain::before { content: ""; position: absolute; left: 26px; right: 26px; top: 34px;
              height: 3px; z-index: 0;
              background: repeating-linear-gradient(90deg, var(--bb-tint2) 0 10px, transparent 10px 18px); }
.bb-link    { position: relative; z-index: 1; display: flex; flex-direction: column;
              align-items: center; text-align: center; gap: 12px; }
.bb-drop    { position: relative; width: 68px; height: 68px; flex: none; display: flex;
              align-items: center; justify-content: center;
              border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
              background: #ffffff; border: 2px solid var(--bb-line);
              box-shadow: 0 10px 26px rgba(80,12,10,0.08);
              transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
/* The drop is rotated to make its point; the number rotates back so it reads level. */
.bb-drop > *    { transform: rotate(45deg); }
.bb-drop-num    { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 19px;
                  color: var(--bb); transition: color 0.3s; }
.bb-link:hover .bb-drop { background: var(--bb); border-color: var(--bb);
                  transform: rotate(-45deg) translate(4px,-4px);
                  box-shadow: 0 18px 36px rgba(185,41,36,0.35); }
.bb-link:hover .bb-drop-num { color: #ffffff; }
.bb-link h4 { font-size: 15px; font-weight: 800; margin: 0; color: var(--ink); letter-spacing: -0.01em; }
.bb-link p  { font-size: 12.5px; line-height: 1.55; color: var(--mut); margin: 0; max-width: 24ch; }
@media (max-width: 640px) { .bb-chain::before { display: none; } }

/* --- Live RFID indicator -------------------------------------------------- */
.bb-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #35d07f;
               animation: pulseDot 1.6s ease-in-out infinite; flex: none; }

/* --- Module rack (blood-bag label cards) ---------------------------------- */
.bb-rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
           gap: 12px; margin-top: 44px; }
.bb-bag  { position: relative; overflow: hidden; border-radius: 14px; background: #ffffff;
           border: 1px solid var(--bb-line); padding: 20px 18px 18px;
           display: flex; flex-direction: column; gap: 8px; min-height: 132px;
           transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
/* The coloured spine down the left edge of a blood-bag label. */
.bb-bag::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
           background: linear-gradient(180deg, var(--bb-light), var(--bb-deep)); }
/* And the barcode block in the top-right corner. */
.bb-bag::after  { content: ""; position: absolute; right: 16px; top: 16px; width: 26px; height: 16px;
           background: repeating-linear-gradient(90deg, var(--bb-tint2) 0 2px, transparent 2px 4px);
           opacity: 0.9; transition: background 0.25s; }
.bb-bag:hover        { transform: translateY(-5px); border-color: rgba(185,41,36,0.45);
                       box-shadow: 0 22px 46px rgba(60,10,8,0.14); }
.bb-bag:hover::after { background: repeating-linear-gradient(90deg, var(--bb) 0 2px, transparent 2px 4px); }
.bb-bag .bag-code { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em;
                    text-transform: uppercase; color: var(--bb); }
.bb-bag .bag-name { font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 18.5px;
                    line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.bb-bag .bag-desc { font-size: 12.5px; line-height: 1.55; color: var(--mut); margin-top: auto; }

/* --- Blood group stock board ---------------------------------------------- */
.bb-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
            gap: 12px; margin-top: 36px; }
.bb-cell  { position: relative; overflow: hidden; border-radius: 16px;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
            padding: 18px 16px 16px;
            transition: transform 0.25s, border-color 0.25s, background 0.25s; }
.bb-cell:hover { transform: translateY(-5px); border-color: rgba(245,169,165,0.6);
            background: rgba(224,82,76,0.14); }
.bb-cell .grp { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 32px;
            line-height: 1; letter-spacing: -0.02em; color: #ffffff; }
.bb-cell .lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
            text-transform: uppercase; color: rgba(255,220,218,0.7); margin-top: 8px; }
.bb-tube  { position: relative; height: 7px; border-radius: 999px;
            background: rgba(255,255,255,0.14); margin-top: 12px; overflow: hidden; }
.bb-tube span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
            background: linear-gradient(90deg, var(--bb-light), var(--bb-soft)); }

/* --- Statistics strip ------------------------------------------------------ */
.bb-stat-cell { flex: 1 1 180px; padding: 30px clamp(18px,2.2vw,34px); }
.bb-stat-cell + .bb-stat-cell { border-left: 1px solid rgba(255,238,237,0.14); }

/* --- Responsive hero ------------------------------------------------------ */
@media (max-width: 720px) {
  .bb-hero-h1 { font-size: 38px !important; }
  /* Stacked, the vertical divider between stats becomes a horizontal one. */
  .bb-stat-cell { border-left: none !important; border-top: 1px solid rgba(255,238,237,0.14); }
  .bb-stat-cell:first-child { border-top: none; }
}
@media (max-width: 480px) {
  .bb-hero-badge { font-size: 10.5px; letter-spacing: 0.06em; line-height: 1.4; padding: 8px 14px; }
  .bb-hero-h1  { font-size: 31px !important; line-height: 1.1 !important; margin-top: 18px !important; }
  .bb-hero-sub { font-size: 15.5px !important; line-height: 1.6 !important; margin-top: 18px !important; }
}

/* ===========================================================================
   LAB-IQ PAGE STYLES
   ---------------------------------------------------------------------------
   Lifted from the <style> block in html/lab-iq.html, with the palette scoped
   to .mq-brand-lab-iq — the class the theme puts on <body> for this page —
   because the design file's `:root` would repaint the whole site blue.

   Designed and developed by OASIS — https://oasis.ind.in · info@oasis.ind.in
   PROPRIETARY AND CONFIDENTIAL. Copying this file, or any part of it, into
   another website, product or client project without the prior written
   consent of OASIS is prohibited.  (c) 2026 OASIS. All rights reserved.
   ========================================================================= */

.mq-brand-lab-iq {
  --liq:       #1950a0;
  --liq-light: #2f8fe0;
  --liq-deep:  #123c7c;
  --liq-dark:  #0a2148;
  --liq-tint:  #eaf2fc;
  --liq-line:  rgba(25,80,160,0.18);
  /* Shared components on this page follow the product colour too. */
  --acc: #1950a0; --acc-deep: #123c7c;
  --tint: #eaf2fc; --acc-edge: rgba(25,80,160,0.45); --acc-wash: rgba(25,80,160,0.12);
  --acc-light: #bfe0ff;
  --acc-grad: linear-gradient(120deg, #2f8fe0, #123c7c); --acc-select: rgba(25,80,160,0.22);
}

/* --- Hover states --------------------------------------------------------- */
.liq-chip       { transition: transform 0.25s, background 0.25s, color 0.25s, border-color 0.25s; }
.liq-chip:hover { transform: translateY(-3px); }
.liq-feat       { transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.liq-feat:hover { border-color: rgba(25,80,160,0.5); transform: translateY(-4px);
                  box-shadow: 0 24px 54px rgba(10,30,60,0.1); }
.liq-frame      { transition: transform 0.4s; }
.liq-frame:hover{ transform: translateY(-6px); }
.liq-badge      { transition: transform 0.25s, border-color 0.25s; }
.liq-badge:hover{ transform: translateY(-4px); border-color: rgba(111,168,230,0.55); }
.liq-btn-hero      { transition: background 0.25s, transform 0.25s; }
.liq-btn-hero:hover{ background: #2a63b0; transform: translateY(-2px); }
.liq-btn-blue      { transition: background 0.25s, transform 0.25s, box-shadow 0.25s; }
.liq-btn-blue:hover{ background: #2a63b0; transform: translateY(-2px);
                  box-shadow: 0 18px 38px rgba(10,40,80,0.35); }
.liq-stage      { transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.liq-stage:hover{ transform: translateY(-6px); border-color: rgba(25,80,160,0.4);
                  box-shadow: 0 24px 50px rgba(10,30,60,0.12); }
.liq-stage-num  { transition: background 0.3s, color 0.3s; }
.liq-stage:hover .liq-stage-num { background: var(--liq); color: #ffffff; }

/* --- Periodic table of modules -------------------------------------------- */
.liq-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
             gap: 10px; margin-top: 44px; }
/* Each tile carries its group colour in --el, set inline from the group the
   editor picked. That one variable drives the symbol colour and the whole
   hover fill, so a new group needs no new CSS rule. */
.liq-el    { position: relative; border-radius: 16px; background: #ffffff;
             border: 1px solid var(--liq-line); padding: 14px; min-height: 152px;
             display: flex; flex-direction: column;
             transition: transform 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s; }
.liq-el .el-top  { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px;
             font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
             color: var(--mut); transition: color 0.25s; }
.liq-el .el-sym  { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 36px;
             line-height: 1; letter-spacing: -0.02em; color: var(--el);
             margin-top: auto; transition: color 0.25s; }
.liq-el .el-name { font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--ink);
             margin-top: 8px; transition: color 0.25s; }
.liq-el:hover    { transform: translateY(-5px); background: var(--el); border-color: var(--el);
             box-shadow: 0 20px 44px rgba(10,30,60,0.22); }
.liq-el:hover .el-top, .liq-el:hover .el-sym, .liq-el:hover .el-name { color: #ffffff; }
/* The single brand tile is already filled, so its hover holds still. */
.liq-el-brand      { background: linear-gradient(150deg, #1950a0, #0a2148); border-color: transparent; }
.liq-el-brand:hover{ background: linear-gradient(150deg, #1950a0, #0a2148); }

/* --- Compliance ribbon ----------------------------------------------------- */
.liq-marquee-track { display: flex; width: max-content; white-space: nowrap;
                     animation: marquee 26s linear infinite; }

/* --- Statistics strip ------------------------------------------------------ */
.liq-stat-cell { flex: 1 1 180px; padding: 30px clamp(18px,2.2vw,34px); }
.liq-stat-cell + .liq-stat-cell { border-left: 1px solid rgba(240,247,252,0.14); }

/* --- Responsive hero ------------------------------------------------------- */
@media (max-width: 720px) {
  .liq-hero-h1 { font-size: 38px !important; }
  /* Stacked, the vertical divider between stats becomes a horizontal one. */
  .liq-stat-cell { border-left: none !important; border-top: 1px solid rgba(240,247,252,0.14); }
  .liq-stat-cell:first-child { border-top: none; }
}
@media (max-width: 480px) {
  .liq-hero-badge { font-size: 10.5px; letter-spacing: 0.06em; line-height: 1.4; padding: 8px 14px; }
  .liq-hero-h1  { font-size: 31px !important; line-height: 1.1 !important; margin-top: 18px !important; }
  .liq-hero-sub { font-size: 15.5px !important; line-height: 1.6 !important; margin-top: 18px !important; }
}
/* ===========================================================================
   CONNECT-IQ PAGE STYLES
   ---------------------------------------------------------------------------
   Lifted from html/assets/css/connect-iq.css, with four changes:

     * the palette is scoped to .mq-brand-connect-iq rather than :root, so it
       cannot repaint the rest of the site;
     * .ciq-hero-shell is gone — the theme paints the hero panel, and this file
       redefines its gradient and its two overlay layers for this brand;
     * the nav-dropdown block is gone — the theme owns the nav;
     * the category tab switcher covers eight tabs instead of the design's
       five, so a category can be added in the admin without a CSS edit.

   Designed and developed by OASIS — https://oasis.ind.in · info@oasis.ind.in
   PROPRIETARY AND CONFIDENTIAL. Copying this file, or any part of it, into
   another website, product or client project without the prior written
   consent of OASIS is prohibited.  (c) 2026 OASIS. All rights reserved.
   ========================================================================= */

/* The teal palette, the hero panel's gradient, and the generic accent so
   shared components on this page follow the product colour. Scoped to the
   brand class: the design file could use :root because it was one standalone
   page, but here every page shares one stylesheet. */
.mq-brand-connect-iq {
  --hero-grad: linear-gradient(118deg, #041d21 0%, #0e444b 24%, #2b757d 52%, #3e98a1 76%, #9fdbe0 100%);
  --acc: #3e98a1; --acc-deep: #2b757d;
  --tint: #ecf7f8; --acc-edge: rgba(62,152,161,0.45); --acc-wash: rgba(62,152,161,0.12);
  --acc-light: #a8e0e4;
  --acc-grad: linear-gradient(120deg, #57bcc4, #2b757d); --acc-select: rgba(62,152,161,0.22);

  --ciq:        #3e98a1;
  --ciq-light:  #57bcc4;
  --ciq-soft:   #a8e0e4;
  --ciq-deep:   #2b757d;
  --ciq-darker: #15484f;
  --ciq-dark:   #08262b;
  --ciq-tint:   #ecf7f8;
  --ciq-tint2:  #d5eef0;
  --ciq-line:   rgba(62, 152, 161, 0.2);
}

/* ---------- shared bits ---------- */
.ciq-wrap { max-width: 1320px; margin: 0 auto; }

.ciq-eyebrow {
  font-size: 14px; font-weight: 700; color: var(--ciq);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.ciq-eyebrow-light { color: var(--ciq-soft); }

.ciq-h2 {
  font-family: 'DM Sans', sans-serif; font-weight: 500;
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.1;
  letter-spacing: -0.02em; margin: 18px 0 0; color: var(--ink);
}
.ciq-h2-light { color: #ffffff; }

.ciq-lead {
  font-size: 16.5px; line-height: 1.7; color: var(--mut);
  margin: 18px 0 0; max-width: 58ch;
}
.ciq-lead-light { color: rgba(235, 248, 249, 0.72); }

/* ============================================================
   HERO
   ============================================================ */
/* The fine grid weave, masked to a soft oval. The theme paints the hero panel
   and its two overlay layers, so this brand redefines those rather than adding
   elements of its own. */
.mq-brand-connect-iq .mq-hero-shell::before {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 46px);
  mask-image: radial-gradient(900px 640px at 68% 46%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(900px 640px at 68% 46%, #000 10%, transparent 78%);
}
/* The corner glows, on the same principle. */
.mq-brand-connect-iq .mq-hero-shell::after {
  background:
    radial-gradient(880px 600px at 88% 16%, rgba(168, 224, 228, 0.3), transparent 62%),
    radial-gradient(720px 520px at 6% 100%, rgba(3, 18, 21, 0.6), transparent 66%);
}

.ciq-hero-inner {
  position: relative; z-index: 2; flex: 1;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
  padding: 30px clamp(20px, 3.5vw, 56px) 56px;
}
.ciq-hero-copy { min-width: 0; }
.ciq-hero-logo {
  height: 54px; width: auto; display: block; margin-bottom: 24px;
  animation: fadeUp 0.8s ease both;
}
.ciq-hero-badge {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px; padding: 9px 16px; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff;
  animation: fadeUp 0.8s ease both;
}
.ciq-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ciq-soft); flex: none; }
.ciq-hero-h1 {
  font-family: 'DM Sans', sans-serif; font-weight: 500;
  font-size: clamp(38px, 4.6vw, 70px); line-height: 1.05; letter-spacing: -0.025em;
  color: #ffffff; max-width: 17ch; margin: 22px 0 0; animation: fadeUp 0.8s ease both;
}
.ciq-hero-sub {
  font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.7;
  color: rgba(255,255,255,0.86); max-width: 56ch; margin: 22px 0 0;
  animation: fadeUp 0.8s 0.15s ease both;
}
.ciq-hero-sub em { font-style: normal; color: #ffffff; font-weight: 700; border-bottom: 2px solid rgba(168,224,228,0.7); }
.ciq-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; animation: fadeUp 0.8s 0.3s ease both; }

.ciq-btn-solid {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none;
  color: #ffffff; font-size: 16px; font-weight: 600; padding: 19px 32px;
  border-radius: 14px; background: var(--ciq-deep); box-shadow: 0 14px 34px rgba(0,0,0,0.25);
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.ciq-btn-solid:hover { background: var(--ciq); color: #ffffff; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,0.3); }
.ciq-btn-ghost {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  color: #ffffff; font-size: 16px; font-weight: 600; padding: 19px 28px;
  border-radius: 14px; border: 1.5px solid rgba(255,255,255,0.5);
  transition: background 0.25s, border-color 0.25s;
}
.ciq-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #ffffff; color: #ffffff; }

/* ---------- hero visual (new) ---------- */
.ciq-hero-visual {
  position: relative; border-radius: 24px; overflow: hidden;
  aspect-ratio: 1200 / 720; min-height: 320px;
  border: 1px solid rgba(168, 224, 228, 0.3);
  box-shadow: 0 34px 78px rgba(2, 18, 21, 0.45);
  animation: fadeUp 0.8s 0.4s ease both;
  transition: transform 0.45s, box-shadow 0.45s;
}
.ciq-hero-visual:hover { transform: translateY(-6px); box-shadow: 0 42px 88px rgba(2, 18, 21, 0.55); }
.ciq-hero-visual img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ciq-hero-visual-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 29, 33, 0.12) 0%, rgba(4, 29, 33, 0) 34%, rgba(4, 29, 33, 0.72) 100%),
    linear-gradient(120deg, rgba(43, 117, 125, 0.28), transparent 58%);
}
.ciq-hero-visual-stats {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: 8px clamp(16px, 2.4vw, 34px);
  padding: 18px clamp(18px, 2.4vw, 28px);
  font-size: 13px; color: rgba(230, 249, 250, 0.82); font-weight: 600;
}
.ciq-hero-visual-stats strong {
  color: #ffffff; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 17px;
}

/* ============================================================
   THE BRIDGE
   ============================================================ */
.ciq-bridge {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(14px, 2vw, 30px); align-items: center; margin-top: 52px;
}
.ciq-side { display: grid; gap: 10px; }
.ciq-side-cap {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mut); margin-bottom: 4px;
}
.ciq-side-alt { text-align: right; }
.ciq-node {
  display: flex; align-items: center; gap: 12px;
  background: #ffffff; border: 1px solid var(--ciq-line); border-radius: 14px;
  padding: 16px 18px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 16px;
  color: var(--ink); transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.ciq-side-alt .ciq-node { flex-direction: row-reverse; }
.ciq-node:hover { transform: translateY(-3px); border-color: rgba(62,152,161,0.5); box-shadow: 0 18px 40px rgba(10,60,66,0.12); }
.ciq-node-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  background: var(--ciq-tint); color: var(--ciq-deep);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.25s, color 0.25s;
}
.ciq-node:hover .ciq-node-ic { background: var(--ciq); color: #ffffff; }

.ciq-core { position: relative; display: flex; flex-direction: column; align-items: center; }
.ciq-hub { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.ciq-hub-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px dashed rgba(62, 152, 161, 0.4); animation: ciqSpin 22s linear infinite;
}
.ciq-hub-face {
  width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--ciq-light), var(--ciq-deep) 62%, var(--ciq-darker));
  color: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; box-shadow: 0 20px 46px rgba(21, 72, 79, 0.4);
}
.ciq-hub-face span { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: -0.01em; }
.ciq-core-label {
  margin-top: 16px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ciq-deep); text-align: center;
}
.ciq-wire { position: absolute; top: 66px; width: clamp(30px, 5vw, 76px); height: 3px; background: var(--ciq-tint2); border-radius: 999px; overflow: hidden; }
.ciq-wire-left  { right: 100%; margin-right: 4px; }
.ciq-wire-right { left: 100%; margin-left: 4px; }
.ciq-wire span { position: absolute; top: 0; bottom: 0; width: 42%; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--ciq)); }
.ciq-wire-left span  { animation: ciqFlowR 2.2s linear infinite; }
.ciq-wire-right span { animation: ciqFlowL 2.2s linear infinite 1.1s; }
@keyframes ciqFlowR { from { left: -45%; } to { left: 100%; } }
@keyframes ciqFlowL { from { left: 100%; } to { left: -45%; } }
@keyframes ciqSpin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .ciq-bridge { grid-template-columns: 1fr; }
  .ciq-side-alt { text-align: left; }
  .ciq-side-alt .ciq-node { flex-direction: row; }
  .ciq-core { padding: 22px 0; }
  .ciq-wire { display: none; }
}

/* ============================================================
   BEFORE / AFTER SPLIT
   ============================================================ */
.ciq-split {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--ciq-line); background: #ffffff;
}
.ciq-split-col { padding: clamp(28px, 3.4vw, 44px); }
.ciq-before { background: #faf9f8; }
.ciq-after  { background: linear-gradient(160deg, var(--ciq-tint), #ffffff 70%); }
.ciq-split-tag {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 8px 14px; border-radius: 999px; margin-bottom: 22px;
}
.ciq-before .ciq-split-tag { background: rgba(20,17,20,0.06); color: var(--mut); }
.ciq-after  .ciq-split-tag { background: var(--ciq); color: #ffffff; }
.ciq-split-mid {
  display: grid; place-items: center; padding: 0 6px;
  background: linear-gradient(180deg, transparent, var(--ciq-line), transparent);
  background-size: 1px 100%; background-repeat: no-repeat; background-position: center;
}
.ciq-split-mid span {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: #ffffff; border: 1px solid var(--ciq-line); color: var(--ciq-deep);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px;
  box-shadow: 0 10px 26px rgba(10,60,66,0.1);
}
.ciq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ciq-list li {
  position: relative; padding-left: 34px; font-size: 15.5px; line-height: 1.6; color: var(--ink);
}
.ciq-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 21px; height: 21px;
  border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 12px;
}
.ciq-list-x li { color: var(--mut); }
.ciq-list-x li::before {
  background-color: rgba(20,17,20,0.07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5a5e' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.ciq-list-check li::before {
  background-color: var(--ciq);
  background-image: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@media (max-width: 820px) {
  .ciq-split { grid-template-columns: 1fr; }
  .ciq-split-mid { padding: 10px 0; background: none; border-top: 1px solid var(--ciq-line); border-bottom: 1px solid var(--ciq-line); }
}

/* ============================================================
   DARK PANEL + CATEGORY TABS
   ============================================================ */
.ciq-dark-panel {
  position: relative; max-width: 1412px; margin: 0 auto;
  border-radius: 30px; overflow: hidden; background: var(--ciq-dark); color: #ebf8f9;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px);
}
.ciq-panel-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 460px at 90% 0%, rgba(62, 152, 161, 0.36), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 54px);
}

.ciq-tabs { position: relative; margin-top: 44px; }
.ciq-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.ciq-tabbar { display: flex; flex-wrap: wrap; gap: 8px; }
.ciq-tab {
  cursor: pointer; user-select: none; font-size: 14px; font-weight: 700;
  padding: 13px 22px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16); color: rgba(235,248,249,0.72);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.ciq-tab:hover { border-color: rgba(168,224,228,0.5); color: #ffffff; transform: translateY(-2px); }

#ciq-t1:checked ~ .ciq-tabbar .l1,
#ciq-t2:checked ~ .ciq-tabbar .l2,
#ciq-t3:checked ~ .ciq-tabbar .l3,
#ciq-t4:checked ~ .ciq-tabbar .l4,
#ciq-t5:checked ~ .ciq-tabbar .l5,
#ciq-t6:checked ~ .ciq-tabbar .l6,
#ciq-t7:checked ~ .ciq-tabbar .l7,
#ciq-t8:checked ~ .ciq-tabbar .l8 {
  background: var(--ciq); border-color: var(--ciq); color: #ffffff;
  box-shadow: 0 14px 30px rgba(62,152,161,0.35);
}

.ciq-panes { position: relative; margin-top: 22px; }
.ciq-pane {
  display: none; gap: clamp(20px, 3vw, 40px);
  border-radius: 22px; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  padding: clamp(26px, 3.2vw, 40px);
  animation: fadeUp 0.45s ease both;
}
#ciq-t1:checked ~ .ciq-panes .p1,
#ciq-t2:checked ~ .ciq-panes .p2,
#ciq-t3:checked ~ .ciq-panes .p3,
#ciq-t4:checked ~ .ciq-panes .p4,
#ciq-t5:checked ~ .ciq-panes .p5,
#ciq-t6:checked ~ .ciq-panes .p6,
#ciq-t7:checked ~ .ciq-panes .p7,
#ciq-t8:checked ~ .ciq-panes .p8 { display: flex; }

.ciq-pane-num {
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: clamp(46px, 6vw, 78px);
  line-height: 0.9; letter-spacing: -0.03em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(168,224,228,0.5); flex: none;
}
.ciq-pane h3 {
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: clamp(21px, 2.2vw, 28px);
  letter-spacing: -0.015em; color: #ffffff; margin: 0;
}
.ciq-pane p { font-size: 15.5px; line-height: 1.7; color: rgba(235,248,249,0.75); margin: 14px 0 0; max-width: 62ch; }
.ciq-pane-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ciq-pane-chips span {
  font-size: 12.5px; font-weight: 700; color: var(--ciq-soft);
  border: 1px solid rgba(168,224,228,0.3); border-radius: 999px; padding: 8px 14px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.ciq-pane-chips span:hover { background: var(--ciq); border-color: var(--ciq); color: #ffffff; }
@media (max-width: 640px) {
  .ciq-pane { flex-direction: column; }
  .ciq-tab { font-size: 13px; padding: 11px 16px; }
}

/* ============================================================
   BRAND PLATES
   ============================================================ */
.ciq-brand-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
.ciq-brand-note { font-size: 15px; line-height: 1.65; color: var(--mut); max-width: 42ch; margin: 0; }

.ciq-plates {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 12px; margin-top: 44px;
}
.ciq-plate {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  min-height: 122px; padding: 20px 18px 18px; border-radius: 16px;
  background: #ffffff; border: 1px solid var(--ciq-line);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.ciq-plate::after {
  content: ""; position: absolute; right: 16px; bottom: 16px; width: 30px; height: 12px;
  border-radius: 3px; border: 1.5px solid var(--ciq-tint2);
  background: repeating-linear-gradient(90deg, var(--ciq-tint2) 0 2px, transparent 2px 5px);
  transition: border-color 0.25s, background 0.25s;
}
.ciq-plate:hover {
  transform: translateY(-5px); border-color: rgba(62,152,161,0.5);
  box-shadow: 0 22px 46px rgba(10,60,66,0.14); background: linear-gradient(160deg, #ffffff, var(--ciq-tint));
}
.ciq-plate:hover::after { border-color: var(--ciq); background: repeating-linear-gradient(90deg, var(--ciq) 0 2px, transparent 2px 5px); }
.ciq-pin {
  width: 26px; height: 26px; border-radius: 8px; display: block;
  background: var(--ciq-tint); border: 1px solid var(--ciq-line);
  position: relative; transition: background 0.25s, border-color 0.25s;
}
.ciq-pin::before, .ciq-pin::after {
  content: ""; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ciq); transform: translateY(-50%); transition: background 0.25s;
}
.ciq-pin::before { left: 6px; } .ciq-pin::after { right: 6px; }
.ciq-plate:hover .ciq-pin { background: var(--ciq); border-color: var(--ciq); }
.ciq-plate:hover .ciq-pin::before, .ciq-plate:hover .ciq-pin::after { background: #ffffff; }
.ciq-plate-no { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--ciq); }
.ciq-plate-name {
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.25;
  letter-spacing: -0.015em; color: var(--ink); margin-top: auto;
}
.ciq-plate-more {
  background: linear-gradient(155deg, var(--ciq-deep), var(--ciq-darker));
  border-color: transparent; align-items: flex-start; justify-content: flex-end;
}
.ciq-plate-more .ciq-plate-name { color: #ffffff; }
.ciq-plate-more::after { border-color: rgba(255,255,255,0.35); background: repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0 2px, transparent 2px 5px); }
.ciq-plate-more:hover { background: linear-gradient(155deg, var(--ciq), var(--ciq-darker)); }

/* ============================================================
   MARQUEE RIBBON
   ============================================================ */
.ciq-ribbon {
  transform: rotate(-1.4deg) scale(1.03); overflow: hidden; padding: 22px 0;
  background: linear-gradient(90deg, var(--ciq-dark) 0%, var(--ciq-darker) 42%, var(--ciq) 78%, var(--ciq-deep) 100%);
}
.ciq-marquee-track { display: flex; width: max-content; white-space: nowrap; animation: marquee 30s linear infinite; }
.ciq-marquee-track span {
  font-family: 'DM Sans', sans-serif; font-weight: 600;
  font-size: clamp(16px, 1.6vw, 20px); color: #ffffff; padding-right: 56px;
}

/* ============================================================
   WHY IT MATTERS
   ============================================================ */
.ciq-why {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.ciq-why-frame {
  position: relative; border-radius: 28px; overflow: hidden; min-height: 440px;
  transition: transform 0.4s;
}
.ciq-why-frame:hover { transform: translateY(-6px); }
.ciq-why-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ciq-why-veil { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(8,38,43,0) 38%, rgba(8,38,43,0.62)); }
.ciq-why-badge {
  position: absolute; left: 22px; bottom: 22px; background: #ffffff; border-radius: 16px;
  padding: 16px 20px; max-width: 262px; box-shadow: 0 18px 40px rgba(8,38,43,0.28);
}
.ciq-why-badge .n { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 34px; color: var(--ciq); line-height: 1; }
.ciq-why-badge .l { font-size: 13.5px; color: var(--mut); font-weight: 600; margin-top: 4px; line-height: 1.45; }

.ciq-benefits { display: grid; gap: 12px; margin-top: 30px; }
.ciq-benefit {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  border-radius: 16px; background: #ffffff; border: 1px solid var(--ciq-line);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.ciq-benefit:hover { transform: translateX(4px); border-color: rgba(62,152,161,0.5); box-shadow: 0 18px 38px rgba(10,60,66,0.1); }
.ciq-benefit-ic {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--ciq-tint); color: var(--ciq-deep);
  transition: background 0.25s, color 0.25s;
}
.ciq-benefit:hover .ciq-benefit-ic { background: var(--ciq); color: #ffffff; }
.ciq-benefit strong { display: block; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 16.5px; color: var(--ink); }
.ciq-benefit span { display: block; font-size: 14px; line-height: 1.55; color: var(--mut); margin-top: 3px; }

/* ============================================================
   DEPLOYMENT STRIP
   ============================================================ */
.ciq-deploy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--ciq-line); background: #ffffff; }
.ciq-deploy-item { padding: clamp(24px, 2.6vw, 34px); border-right: 1px solid var(--ciq-line); transition: background 0.25s; }
.ciq-deploy-item:last-child { border-right: 0; }
.ciq-deploy-item:hover { background: var(--ciq-tint); }
.ciq-deploy-item .s { display: block; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; color: var(--ciq); }
.ciq-deploy-item strong { display: block; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -0.015em; color: var(--ink); margin-top: 10px; }
.ciq-deploy-item .d { display: block; font-size: 14px; line-height: 1.6; color: var(--mut); margin-top: 8px; }
@media (max-width: 780px) { .ciq-deploy-item { border-right: 0; border-bottom: 1px solid var(--ciq-line); } .ciq-deploy-item:last-child { border-bottom: 0; } }

/* ============================================================
   CTA
   ============================================================ */
.ciq-cta {
  position: relative; border-radius: 30px; overflow: hidden; color: #ffffff;
  background: linear-gradient(125deg, #041d21 0%, #0e444b 38%, #3e98a1 86%, #9fdbe0 112%);
}
.ciq-cta-tex {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 50px),
    radial-gradient(680px 380px at 84% 10%, rgba(168,224,228,0.3), transparent 60%);
}
.ciq-cta-inner { position: relative; max-width: 880px; margin: 0 auto; padding: clamp(60px, 7vw, 104px) 32px; text-align: center; }
.ciq-cta-h2 {
  font-family: 'DM Sans', sans-serif; font-weight: 500;
  font-size: clamp(34px, 4.4vw, 62px); line-height: 1.06; letter-spacing: -0.025em; margin: 20px 0 0;
}
.ciq-cta-p { font-size: 16px; line-height: 1.7; color: rgba(235,248,249,0.85); max-width: 58ch; margin: 22px auto 0; }
.ciq-btn-white {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none;
  color: var(--ciq-darker); font-size: 16px; font-weight: 700;
  padding: 19px 36px; border-radius: 14px; background: #ffffff;
  transition: transform 0.25s, box-shadow 0.25s;
}
.ciq-btn-white:hover { color: var(--ciq-darker); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,0.25); }
.ciq-cta-contacts {
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; margin-top: 30px;
  font-size: 14.5px; color: rgba(235,248,249,0.85); font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px) {
  .ciq-hero-inner { grid-template-columns: 1fr; gap: 34px; padding-top: 18px; }
  .ciq-hero-h1 { max-width: 22ch; }
}
@media (max-width: 720px) {
  .ciq-hero-shell { min-height: 0; }
  .ciq-hero-logo { height: 42px; }
  .ciq-hero-visual { min-height: 240px; }
}
@media (max-width: 480px) {
  .ciq-hero-badge { font-size: 10.5px; letter-spacing: 0.06em; line-height: 1.4; padding: 8px 14px; }
  .ciq-hero-h1 { font-size: 32px; line-height: 1.1; margin-top: 18px; }
  .ciq-hero-sub { font-size: 15.5px; line-height: 1.6; margin-top: 18px; }
  .ciq-hero-visual { min-height: 200px; }
  .ciq-hero-visual-stats { font-size: 12px; padding: 14px 16px; }
  .ciq-hero-visual-stats strong { font-size: 15px; }
}

/* ===========================================================================
   CAREERS AND PROJECTS — 2026-09
   ---------------------------------------------------------------------------
   Both pages were assembled from the generic section types without any of them
   being told what they were for, and it showed: the "with icon" card style drew
   an empty red square because no icon had ever been supplied, the vacancy list
   was a paragraph in an otherwise blank white band, and Projects ended with a
   dark stat band sitting directly on the dark CTA and the dark footer — one
   unbroken black slab three storeys tall.

   What follows is the fix, kept as its own layer rather than edited into the
   component blocks above so the shared sections other pages depend on keep
   behaving exactly as they did.
   ========================================================================= */

/* --- 1303 card icons -----------------------------------------------------
   The placeholder was a 34px gradient square with nothing in it. A real icon
   needs a surface to sit on, so the tile stays and the glyph goes inside it:
   a soft brand tint rather than the solid gradient, because three saturated
   blocks in a row pulled the eye straight past the words next to them.
   ------------------------------------------------------------------------ */
.mq-card-icon      { width: 50px; height: 50px; border-radius: 15px;
                     display: inline-flex; align-items: center; justify-content: center;
                     background: var(--acc-wash, rgba(232, 73, 62, 0.1)); color: var(--acc);
                     transition: background 0.3s, color 0.3s, transform 0.3s; }
.mq-card-icon svg  { width: 25px; height: 25px; display: block; }
/* The old flat square is still the fallback when a card has no icon chosen,
   so a half-configured section never collapses its own card heights. */
.mq-card-icon span { display: block; width: 22px; height: 22px; border-radius: 7px;
                     background: var(--acc-grad, linear-gradient(120deg, #e8493e, #b3251a)); }
.mq-card:hover .mq-card-icon { background: var(--acc); color: #ffffff; transform: translateY(-1px); }
.mq-tone-dark .mq-card-icon  { background: rgba(255, 255, 255, 0.08); color: var(--acc-light, #ff8177); }
.mq-tone-dark .mq-card:hover .mq-card-icon { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
/* An icon card carries a picture, a title and a paragraph in one column, so it
   needs a little more room than a plain card to stop reading as cramped. */
.mq-cards--icon .mq-card { padding: 32px 30px 34px; gap: 14px; }
.mq-cards--icon .mq-card-title { margin-top: 4px; }

/* --- 1308 case cards -----------------------------------------------------
   The cards were inert: no hover, no depth, and a picture that sat behind a
   hard edge. They are the main object on the Projects page, so they get the
   lift and the slow image push-in that says "this is one thing, not three
   stacked pieces".
   ------------------------------------------------------------------------ */
.mq-case          { transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s; }
.mq-case-img img  { transition: transform 0.6s ease; }
a.mq-case:hover   { transform: translateY(-5px); border-color: var(--acc-edge, rgba(232, 73, 62, 0.4));
                    box-shadow: 0 26px 54px rgba(20, 17, 20, 0.13); }
a.mq-case:hover .mq-case-img img { transform: scale(1.045); }
.mq-case-tag      { padding: 5px 11px; border-radius: 999px; background: var(--acc-wash, rgba(232, 73, 62, 0.1));
                    font-size: 11px; letter-spacing: 0.1em; margin-bottom: 14px; }
.mq-case-body     { padding: 28px 28px 32px; }

/* --- 1304 stats, tile variant -------------------------------------------
   The hairline row works when the figures close a band that already has
   content in it. On Projects the band holds nothing else, and four numbers
   floating on black with a rule over each reads as an unfinished table. The
   tiles give each figure an edge to sit inside, and the band a shape.
   ------------------------------------------------------------------------ */
.mq-stats--panel  { gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }
.mq-stats--panel .mq-stat { border-top: 0; padding: 30px 28px 32px; border-radius: 20px;
                    background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1);
                    transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.mq-stats--panel .mq-stat:hover { background: rgba(255, 255, 255, 0.07);
                    border-color: var(--acc-edge, rgba(232, 73, 62, 0.5)); transform: translateY(-3px); }
.mq-stats--panel .mq-stat-num { font-size: clamp(40px, 3.1vw, 56px);
                    background: var(--acc-grad, linear-gradient(120deg, #ff9182, #e8493e));
                    -webkit-background-clip: text; background-clip: text; color: transparent; }
.mq-stats--panel .mq-stat-label { margin-top: 12px; max-width: none; }
/* On a light band the tile needs the opposite treatment — a white card on
   paper rather than a lighter hole in the dark. */
.mq-tone-paper .mq-stats--panel .mq-stat,
.mq-tone-white .mq-stats--panel .mq-stat,
.mq-tone-tint  .mq-stats--panel .mq-stat { background: #ffffff; border-color: var(--line); }
.mq-tone-paper .mq-stats--panel .mq-stat:hover,
.mq-tone-white .mq-stats--panel .mq-stat:hover,
.mq-tone-tint  .mq-stats--panel .mq-stat:hover { background: #ffffff; }

/* --- 1315 open roles -----------------------------------------------------
   A vacancy list is scanned down its left edge, so the roles are full-width
   rows and not a card grid: in a grid the eye has to travel sideways between
   job titles that have nothing to do with one another. Each row keeps title,
   facts and the apply link on one line at desktop width, and restacks in
   reading order — title, description, facts, action — on a phone.
   ------------------------------------------------------------------------ */
.mq-roles         { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mq-role          { display: grid; gap: 8px 28px; align-items: center;
                    grid-template-columns: 1fr; padding: 26px;
                    background: #ffffff; border: 1px solid var(--line); border-radius: 20px;
                    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; }
.mq-role:hover    { border-color: var(--acc-edge, rgba(232, 73, 62, 0.42)); transform: translateY(-2px);
                    box-shadow: 0 18px 40px rgba(20, 17, 20, 0.08); }
@media (min-width: 940px) {
  .mq-role        { grid-template-columns: minmax(0, 1fr) auto auto; padding: 24px 28px; }
}
.mq-role-title    { font-family: "DM Sans", sans-serif; font-size: 20px; font-weight: 600;
                    line-height: 1.3; margin: 0; color: var(--ink); }
.mq-role-text     { font-size: 15px; line-height: 1.6; color: var(--mut); margin: 7px 0 0; max-width: 58ch; }
.mq-role-facts    { display: flex; flex-wrap: wrap; gap: 8px; }
.mq-role-chip     { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
                    padding: 7px 13px; border-radius: 999px; color: var(--mut);
                    background: rgba(20, 17, 20, 0.045); border: 1px solid var(--line);
                    white-space: nowrap; }
/* The team a role sits in is the fact people filter on first, so it is the one
   chip that carries brand colour. */
.mq-role-facts .mq-role-chip:first-child { color: var(--acc); background: rgba(232, 73, 62, 0.09);
                    border-color: rgba(232, 73, 62, 0.22); }
.mq-role-apply    { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
                    font-size: 14.5px; font-weight: 700; color: var(--acc); white-space: nowrap;
                    padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(232, 73, 62, 0.35);
                    transition: background 0.25s, color 0.25s, border-color 0.25s; }
.mq-role-apply:hover { background: var(--acc); color: #ffffff; border-color: var(--acc); }
.mq-role-apply svg{ transition: transform 0.25s; }
.mq-role-apply:hover svg { transform: translate(2px, -2px); }
.mq-roles-empty   { background: #ffffff; border: 1px solid var(--line); border-radius: 20px;
                    padding: clamp(28px, 3vw, 40px); }
.mq-roles-foot    { margin-top: 30px; }
.mq-tone-dark .mq-role        { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.1); }
.mq-tone-dark .mq-role-title  { color: #ffffff; }
.mq-tone-dark .mq-role-text   { color: rgba(245, 242, 242, 0.72); }
.mq-tone-dark .mq-role-chip   { color: rgba(245, 242, 242, 0.75); background: rgba(255, 255, 255, 0.06);
                    border-color: rgba(255, 255, 255, 0.14); }
.mq-tone-dark .mq-role-apply  { color: #ff8177; border-color: rgba(255, 129, 119, 0.45); }

/* --- Careers and Projects page trims ------------------------------------- */
/* The checklist that explains how a programme is delivered reads better with
   its rows spaced like prose, not like a grid of equal boxes. */
.mq-s-1307 .mq-check-text { max-width: 40ch; }

@media (max-width: 620px) {
  .mq-role        { padding: 22px; }
  .mq-role-title  { font-size: 18.5px; }
  .mq-role-apply  { align-self: flex-start; margin-top: 4px; }
  .mq-cards--icon .mq-card { padding: 26px 24px 28px; }
}

/* ===========================================================================
   FORM CARD HEADING, AND THE CAREER APPLICATION FORM — 2026-09
   ---------------------------------------------------------------------------
   Two things this layer adds.

   First, a heading inside the form card. Both form sections put their heading
   in the column beside the fields, which works at desktop width and fails on a
   phone: the copy column scrolls past and the form arrives as an unlabelled
   "Your name" box with no indication of what filling it in would do.

   Second, the apply form's own controls — a select and a file input, neither
   of which the contact form ever needed, so neither had a style.
   ========================================================================= */

.mq-form-cardhead    { margin-bottom: 26px; padding-bottom: 22px;
                       border-bottom: 1px solid var(--line); }
.mq-form-cardhead-h  { font-family: "DM Sans", sans-serif; font-size: clamp(21px, 1.8vw, 25px);
                       font-weight: 600; line-height: 1.25; margin: 0; color: var(--ink); }
.mq-form-cardhead-note { font-size: 14.5px; line-height: 1.6; color: var(--mut); margin: 9px 0 0; }
.mq-form-note + .mq-form-cardhead { margin-top: 4px; }

/* --- Select ---------------------------------------------------------------
   Matched to the text inputs, with the browser's own arrow replaced by one
   drawn in the border colour — a default select next to these rounded fields
   is the one control that gives away that a form was assembled rather than
   designed. */
.mq-field select     { width: 100%; font: inherit; font-size: 15px; color: var(--ink);
                       background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
                       padding: 14px 44px 14px 16px; appearance: none; -webkit-appearance: none;
                       background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f5a5e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
                       background-repeat: no-repeat; background-position: right 16px center; }
.mq-field select:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: transparent; }

/* --- File input -----------------------------------------------------------
   The real <input type="file"> is still here and still does the work — it is
   laid over the visible face at full size and made transparent. A scripted
   replacement would look the same and break keyboard focus, screen readers and
   the browser's own "no file chosen" state, all to restyle one button. */
.mq-file             { position: relative; display: block; }
.mq-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%;
                       opacity: 0; cursor: pointer; z-index: 2; }
.mq-file-face        { display: flex; align-items: center; gap: 11px; width: 100%;
                       font-size: 15px; color: var(--mut); background: var(--paper);
                       border: 1px dashed rgba(20, 17, 20, 0.22); border-radius: 12px;
                       padding: 15px 16px; transition: border-color 0.25s, background 0.25s, color 0.25s; }
.mq-file-face svg    { flex: none; color: var(--acc); }
.mq-file-text        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-file:hover .mq-file-face { border-color: rgba(232, 73, 62, 0.5); background: #ffffff; color: var(--ink); }
/* :focus-visible does not apply to a transparent input the way it does to a
   button, so the focus ring is painted on the face the person can actually
   see — otherwise tabbing to this field looks like tabbing to nothing. */
.mq-file input[type="file"]:focus-visible + .mq-file-face {
                       outline: 2px solid var(--acc); outline-offset: 1px;
                       border-color: transparent; background: #ffffff; }
.mq-file-hint        { font-size: 13px; color: var(--mut); margin-top: 8px; }

/* The apply form asks for more than the contact form, so its fields are a
   little tighter — otherwise the card runs past the copy beside it. */
.mq-form--apply      { gap: 16px; }
.mq-form--apply textarea { min-height: 112px; }

.mq-tone-dark .mq-form-cardhead    { border-bottom-color: rgba(255, 255, 255, 0.14); }
.mq-tone-dark .mq-form-cardhead-h  { color: var(--ink); }

/* ===========================================================================
   FAQ — 2026-09
   ---------------------------------------------------------------------------
   The accordion is <details>/<summary>, not a scripted one. Two reasons, and
   the second is the one that matters here.

   The obvious one: no JavaScript, so it works on a page served straight from
   the HTML cache with the script blocked, still open on refresh, and
   keyboard-operable without anyone writing key handlers.

   The one that pays: a collapsed <details> still has its answer text in the
   document. Google will only show FAQ rich results when the answers are
   present in the page HTML, so a JS accordion that injects answers on click
   throws the rich result away for the sake of an animation.

   The open marker rotates rather than swapping glyphs, because a swap
   re-lays-out the row and the question text shifts by a pixel as it opens.
   ========================================================================= */

.mq-faq              { display: grid; gap: 12px; max-width: 900px; }
.mq-faq--two         { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }

.mq-faq-item         { background: #ffffff; border: 1px solid var(--line); border-radius: 16px;
                       overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; }
/* The open and hover borders are mixed FROM the brand accent rather than
   written as a fixed rgba(). Each product page re-points --acc, so a literal
   red here would put a red ring on the blue LAB-IQ page and the purple
   Connect-IQ one — which is exactly what the first version did. */
.mq-faq-item[open]   { border-color: color-mix(in srgb, var(--acc) 34%, transparent);
                       box-shadow: 0 10px 30px -22px rgba(20, 17, 20, 0.5); }
.mq-faq-item:hover   { border-color: color-mix(in srgb, var(--acc) 28%, transparent); }

.mq-faq-q            { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
                       padding: 20px 22px; cursor: pointer; list-style: none;
                       font-family: "DM Sans", sans-serif; font-size: clamp(16px, 1.2vw, 17.5px);
                       font-weight: 600; line-height: 1.45; color: var(--ink); }
.mq-faq-q::-webkit-details-marker { display: none; }
.mq-faq-q:focus-visible { outline: 2px solid var(--acc); outline-offset: -3px; }

.mq-faq-mark         { flex: none; display: grid; place-items: center; width: 28px; height: 28px;
                       margin-top: 1px; border-radius: 50%; color: var(--acc);
                       background: color-mix(in srgb, var(--acc) 10%, transparent);
                       transition: transform 0.28s ease, background 0.28s; }
.mq-faq-item[open] .mq-faq-mark { transform: rotate(45deg);
                       background: color-mix(in srgb, var(--acc) 18%, transparent); }

.mq-faq-a            { padding: 0 22px 22px; font-size: 15.5px; line-height: 1.75; color: var(--mut);
                       max-width: 68ch; }

.mq-faq-foot         { margin-top: 30px; }

/* Dark and tinted bands: the card cannot stay white or it reads as a hole
   punched through the band. */
.mq-tone-dark  .mq-faq-item { background: rgba(255, 255, 255, 0.045);
                              border-color: rgba(255, 255, 255, 0.14); }
.mq-tone-dark  .mq-faq-item[open],
.mq-tone-dark  .mq-faq-item:hover { border-color: rgba(255, 255, 255, 0.3); }
.mq-tone-dark  .mq-faq-q    { color: #ffffff; }
.mq-tone-dark  .mq-faq-a    { color: rgba(255, 255, 255, 0.72); }
.mq-tone-dark  .mq-faq-mark { color: #ffffff; background: rgba(255, 255, 255, 0.14); }
.mq-tone-white .mq-faq-item { background: var(--paper); }

@media (max-width: 900px) {
  .mq-faq--two       { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .mq-faq-q          { padding: 17px 18px; gap: 14px; }
  .mq-faq-a          { padding: 0 18px 19px; font-size: 15px; }
}

/* ===========================================================================
   CAALDOCK PAGE STYLES
   ---------------------------------------------------------------------------
   Taken from html/assets/css/caaldock.css and scoped to .mq-brand-caaldock —
   the class the theme puts on <body> for this page. The design file could
   write `:root { --cd: … }` because it was one standalone page; here every
   page shares one stylesheet, so an unscoped override would repaint the site.

   Without this block CAALDOCK fell through to the Mediquity red: red eyebrows,
   red step numbers, red check dots and red card hovers on a navy-and-amber
   page. Setting the generic accent tokens is what fixes that — every shared
   section then follows the product colour with no per-section rule.

   Designed and developed by OASIS — https://oasis.ind.in · info@oasis.ind.in
   PROPRIETARY AND CONFIDENTIAL. Copying this file, or any part of it, into
   another website, product or client project without the prior written
   consent of OASIS is prohibited.  (c) 2026 OASIS. All rights reserved.
   ========================================================================= */
.mq-brand-caaldock {
  --cd:          #ee8b3d;
  --cd-soft:     #f7ad70;
  --cd-deep:     #d9742a;
  --cd-navy:     #063983;
  --cd-navy-2:   #0a4ea8;
  --cd-navy-dark:#04255a;
  --cd-abyss:    #021936;
  --cd-tint:     #fdf2e8;
  --cd-tint-2:   #eef3fb;
  --cd-line:     rgba(6,57,131,0.14);
  --cd-line-2:   rgba(238,139,61,0.28);
  /* Shared components on this page follow the product colour too. */
  --acc: #ee8b3d; --acc-deep: #d9742a;
  --tint: #fdf2e8; --acc-edge: rgba(238,139,61,0.5); --acc-wash: rgba(238,139,61,0.14);
  --acc-light: #f7ad70;
  --acc-grad: linear-gradient(120deg, #f7ad70, #d9742a); --acc-select: rgba(238,139,61,0.24);
}

/* The hero weave is a fine square grid here, not the diagonal ribbon the other
   pages use, and the corner glows are amber over navy. The theme paints the
   hero panel and both overlay layers, so this brand redefines those rather
   than adding elements of its own. */
.mq-brand-caaldock .mq-hero-shell::before {
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 46px);
}
.mq-brand-caaldock .mq-hero-shell::after {
  background:
    radial-gradient(880px 580px at 88% 14%, rgba(238,139,61,0.34), transparent 62%),
    radial-gradient(700px 520px at 6% 100%, rgba(2,12,28,0.6), transparent 65%);
}


/* ---------------------------------------------------------------------------
   Rich-text fields
   ---------------------------------------------------------------------------
   Prose fields in the plugin editor now save HTML, so a paragraph that used to
   be one line of text can arrive as <p>, a list, or a small table. The section
   around it already owns its spacing, so the first and last block inside must
   not add margins of their own; everything else here just gives the tags the
   toolbar can produce a sane default inside any band, light or dark.
--------------------------------------------------------------------------- */
.mq-rich > :first-child { margin-top: 0; }
.mq-rich > :last-child  { margin-bottom: 0; }
.mq-rich p              { margin: 0 0 0.9em; }
.mq-rich ul,
.mq-rich ol             { margin: 0 0 0.9em; padding-left: 1.35em; }
.mq-rich li             { margin: 0 0 0.35em; }
.mq-rich h2,
.mq-rich h3,
.mq-rich h4             { margin: 1.2em 0 0.5em; line-height: 1.25; }
.mq-rich a              { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mq-rich table          { width: 100%; border-collapse: collapse; margin: 0 0 0.9em; }
.mq-rich th,
.mq-rich td             { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 22%, transparent);
                          padding: 8px 10px; text-align: left; vertical-align: top; }
.mq-rich th             { font-weight: 600; }


/* ===========================================================================
   BLOG  (plugin 1320_blog) — 2026-10
   ---------------------------------------------------------------------------
   Everything here is scoped to .mq-b* / .mq-blog* so it cannot touch another
   section. Colours come from the same tokens the rest of the site reads
   (--acc, --ink, --mut, --line, --tint), so the blog takes on a product
   colour if a page ever sets one, and nothing is hard-coded to red.
=========================================================================== */

/* --- header panel on article / category views --------------------------- */
.mq-hero-inner--blog .mq-eyebrow a      { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.45); }
.mq-hero-inner--blog .mq-eyebrow a:hover{ border-bottom-color: #fff; }
.mq-hero-h1--post                       { font-size: clamp(32px, 4.3vw, 62px); max-width: 24ch; line-height: 1.12; }
.mq-hero-byline                         { font-size: clamp(15px, 1.2vw, 17px); max-width: none; margin-top: 22px; }
.mq-hero-byline .mq-hero-dot            { opacity: 0.55; padding: 0 6px; }
.mq-hero-byline time                    { white-space: nowrap; }

/* --- section chrome ------------------------------------------------------ */
.mq-blog .mq-blog-head                  { margin-bottom: clamp(24px, 3vw, 40px); }
.mq-blog .mq-blog-head .mq-h2           { max-width: 28ch; }
.mq-bback                               { margin: 36px 0 0; font-size: 15px; font-weight: 600; }
.mq-bback a:not(.mq-btn)                { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--acc); padding-bottom: 2px; }
.mq-bback a:not(.mq-btn):hover          { color: var(--acc); }
.mq-bempty                              { background: #fff; border: 1px dashed var(--line); border-radius: 22px; padding: clamp(32px, 5vw, 64px); text-align: center; }
.mq-bempty h3                           { font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 24px; margin: 0 0 8px; color: var(--ink); }
.mq-bempty p                            { margin: 0; color: var(--mut); }

/* --- category pills ------------------------------------------------------ */
.mq-bpills                              { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(24px, 3vw, 36px); }
.mq-bpills a                            { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
                                          color: var(--ink); background: #fff; border: 1px solid var(--line); text-decoration: none;
                                          transition: border-color 0.2s, background 0.2s, color 0.2s; }
.mq-bpills a:hover                      { border-color: var(--acc-edge, rgba(232,73,62,0.45)); color: var(--acc); }
.mq-bpills a.is-on                      { background: var(--ink); border-color: var(--ink); color: #fff; }
.mq-bpills a.mq-bpills-more             { margin-left: auto; background: transparent; border-color: transparent; color: var(--mut); }
.mq-bpills a.mq-bpills-more:hover        { color: var(--acc); }

/* --- cards --------------------------------------------------------------- */
.mq-bgrid                               { display: grid; gap: clamp(18px, 2vw, 28px); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .mq-bgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .mq-bgrid { grid-template-columns: repeat(3, 1fr); } }

.mq-bcard                               { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
                                          border-radius: 22px; overflow: hidden; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.mq-bcard:hover                         { border-color: var(--acc-edge, rgba(232,73,62,0.45)); transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(20,17,20,0.35); }
.mq-bcard-media                         { display: block; aspect-ratio: 16 / 9; background: var(--tint, #fdf0ee); overflow: hidden; }
.mq-bcard-media img                     { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.mq-bcard:hover .mq-bcard-media img     { transform: scale(1.03); }
.mq-bcard-media--empty                  { display: flex; align-items: center; justify-content: center;
                                          background: var(--acc-grad, linear-gradient(120deg, #e8493e, #b3251a)); }
.mq-bcard-mark                          { font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 64px; color: rgba(255,255,255,0.9); line-height: 1; }
.mq-bcard-body                          { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 26px; flex: 1; }
.mq-bcard-meta                          { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--mut); position: relative; z-index: 2; }
.mq-bcard-meta span::before,
.mq-bcard-meta time::before             { content: "\00b7"; margin-right: 12px; opacity: 0.6; }
.mq-bcard-meta .mq-bchip + time::before { content: none; }
.mq-bchip                               { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--tint, #fdf0ee); color: var(--acc-deep, #b3251a);
                                          font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.mq-bchip:hover                         { background: var(--acc); color: #fff; }
.mq-bcard-title                         { font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
.mq-bcard-title a                       { color: var(--ink); text-decoration: none; }
.mq-bcard-title a::after                { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole card is the click target */
.mq-bcard-title a:hover                 { color: var(--acc); }
.mq-bcard-text                          { margin: 0; color: var(--mut); font-size: 15.5px; line-height: 1.65; }
.mq-bcard-more                          { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--acc); text-decoration: none; }
.mq-bcard-more svg                      { transition: transform 0.25s; }
.mq-bcard:hover .mq-bcard-more svg,
.mq-bterm:hover .mq-bcard-more svg      { transform: translateX(4px); }

@media (min-width: 1040px) {
  .mq-bgrid--lead .mq-bcard--lead       { grid-column: 1 / -1; flex-direction: row; }
  .mq-bgrid--lead .mq-bcard--lead .mq-bcard-media { flex: 0 0 56%; aspect-ratio: auto; min-height: 340px; }
  .mq-bgrid--lead .mq-bcard--lead .mq-bcard-body  { justify-content: center; padding: clamp(28px, 3.4vw, 52px); }
  .mq-bgrid--lead .mq-bcard--lead .mq-bcard-title { font-size: clamp(26px, 2.5vw, 36px); }
  .mq-bgrid--lead .mq-bcard--lead .mq-bcard-text  { font-size: 17px; }
}

/* --- pagination ---------------------------------------------------------- */
.mq-pager                               { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: clamp(32px, 4vw, 52px); }
.mq-pager ul                            { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.mq-pager li a,
.mq-pager li span.is-current            { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 12px;
                                          font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.mq-pager li a:hover                    { border-color: var(--acc); color: var(--acc); }
.mq-pager li span.is-current            { background: var(--ink); border-color: var(--ink); color: #fff; }
.mq-pager li.gap                        { align-self: center; padding: 0 4px; color: var(--mut); }
.mq-pager-step                          { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: 14.5px;
                                          text-decoration: none; background: #fff; border: 1px solid var(--line); color: var(--ink); }
a.mq-pager-step:hover                   { border-color: var(--acc); color: var(--acc); }
.mq-pager-step.is-off                   { opacity: 0.4; }

/* --- categories / tags index -------------------------------------------- */
.mq-bterms                              { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .mq-bterms { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .mq-bterms { grid-template-columns: repeat(3, 1fr); } }
.mq-bterm                               { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px; text-decoration: none; color: var(--ink);
                                          transition: border-color 0.3s, transform 0.3s; }
.mq-bterm:hover                         { border-color: var(--acc-edge, rgba(232,73,62,0.45)); transform: translateY(-3px); }
.mq-bterm-count                         { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc); }
.mq-bterm-name                          { font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 24px; margin: 0; }
.mq-bterm p                             { margin: 0; color: var(--mut); font-size: 15.5px; line-height: 1.6; }
.mq-btags                               { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0; }
.mq-btags a                             { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
                                          font-weight: 600; font-size: 15.5px; color: var(--ink); text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.mq-btags a:hover                       { border-color: var(--acc); color: var(--acc); }
.mq-btags a span                        { font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--tint, #fdf0ee); color: var(--acc-deep, #b3251a); }

/* --- one article --------------------------------------------------------- */
.mq-bpost-grid                          { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
@media (min-width: 1040px) { .mq-bpost-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.mq-bpost                               { min-width: 0; max-width: 780px; }
.mq-bpost-cover                         { margin: 0 0 clamp(24px, 3vw, 36px); border-radius: 22px; overflow: hidden; background: var(--tint, #fdf0ee); }
.mq-bpost-cover img                     { display: block; width: 100%; height: auto; }
.mq-bpost-summary                       { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.6; color: var(--ink); font-weight: 500; margin: 0 0 clamp(24px, 3vw, 34px);
                                          padding-left: 20px; border-left: 3px solid var(--acc); }

.mq-blog-body                           { font-size: 18px; line-height: 1.8; color: #2a262a; overflow-wrap: anywhere; }
.mq-blog-body > :first-child            { margin-top: 0; }
.mq-blog-body h2, .mq-blog-body h3,
.mq-blog-body h4                        { font-family: "DM Sans", sans-serif; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; scroll-margin-top: 96px; }
.mq-blog-body h2                        { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; margin: 1.1em 0 0.5em; }
.mq-blog-body h3                        { font-size: clamp(21px, 2vw, 25px);  font-weight: 600; margin: 1em 0 0.45em; }
.mq-blog-body h4                        { font-size: 19px; font-weight: 700; margin: 0.9em 0 0.4em; }
.mq-blog-body p                         { margin: 0 0 1.25em; }
.mq-blog-body a                         { color: var(--acc-deep, #b3251a); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.mq-blog-body a:hover                   { color: var(--acc); }
.mq-blog-body ul, .mq-blog-body ol      { margin: 0 0 1.25em; padding-left: 1.4em; }
.mq-blog-body li                        { margin: 0 0 0.5em; }
.mq-blog-body li::marker                { color: var(--acc); font-weight: 700; }
.mq-blog-body img                       { max-width: 100%; height: auto; border-radius: 14px; display: block; margin: 1.6em auto; }
.mq-blog-body figure                    { margin: 1.8em 0; }
.mq-blog-body figure img                { margin: 0 auto; }
.mq-blog-body figcaption                { font-size: 14px; color: var(--mut); text-align: center; margin-top: 10px; }
/* Image caption: put class "mq-caption" on the paragraph under an image */
.mq-blog-body .mq-caption               { display: block; max-width: 640px; margin: -0.9em auto 2em; padding: 0 12px; font-size: 14.5px; line-height: 1.55; font-style: normal; font-weight: 500; letter-spacing: 0.01em; text-align: center; color: var(--mut); }
.mq-blog-body .mq-caption::before       { content: ""; display: block; width: 36px; height: 3px; margin: 0 auto 10px; border-radius: 3px; background: var(--acc, #e84a3f); }
.mq-blog-body .mq-caption a             { color: var(--acc, #e84a3f); }

/* Copyright / legal note: put class "mq-copyright" on each paragraph of the notice */
.mq-blog-body .mq-copyright             { margin: 0 0 8px; padding: 0; font-size: 12.5px; line-height: 1.4; font-weight: 400; letter-spacing: 0; color: #8a8589; text-align: left; }
.mq-blog-body .mq-copyright + .mq-copyright { margin-top: 0; }
.mq-blog-body .mq-copyright a           { color: inherit; text-decoration: underline; }
.mq-blog-body blockquote                { margin: 1.8em 0; padding: 6px 0 6px 24px; border-left: 4px solid var(--acc); font-size: 1.12em; color: var(--ink); font-style: italic; }
.mq-blog-body blockquote p:last-child   { margin-bottom: 0; }
.mq-blog-body hr                        { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.mq-blog-body pre                       { background: #161215; color: #f5f2f2; padding: 20px 22px; border-radius: 14px; overflow-x: auto; font-size: 15px; line-height: 1.6; margin: 1.6em 0; }
.mq-blog-body code                      { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: rgba(20,17,20,0.07); padding: 2px 6px; border-radius: 6px; }
.mq-blog-body pre code                  { background: none; padding: 0; color: inherit; }
.mq-blog-table                          { overflow-x: auto; margin: 1.6em 0; -webkit-overflow-scrolling: touch; }
.mq-blog-body table                     { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.mq-blog-body th, .mq-blog-body td      { border: 1px solid var(--line); padding: 11px 14px; text-align: left; vertical-align: top; }
.mq-blog-body th                        { background: var(--paper); font-weight: 700; color: var(--ink); }
.mq-blog-embed                          { position: relative; aspect-ratio: 16 / 9; margin: 1.8em 0; border-radius: 14px; overflow: hidden; background: #000; }
.mq-blog-embed iframe                   { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.mq-bside-label                         { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.mq-bpost-tags                          { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.mq-bpost-tags a                        { padding: 7px 15px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.mq-bpost-tags a:hover                  { border-color: var(--acc); color: var(--acc); }
.mq-bpost-nav                           { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
@media (min-width: 700px) { .mq-bpost-nav { grid-template-columns: 1fr 1fr; } }
.mq-bpost-nav a                         { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; background: #fff; transition: border-color 0.25s, transform 0.25s; }
.mq-bpost-nav a:hover                   { border-color: var(--acc); transform: translateY(-2px); }
.mq-bpost-nav span                      { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.mq-bpost-nav strong                    { font-family: "DM Sans", sans-serif; font-size: 17px; line-height: 1.35; color: var(--ink); }
.mq-bpost-nav-next                      { text-align: right; }

.mq-bpost-aside                         { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 1040px) { .mq-bpost-aside { position: sticky; top: 24px; } }
.mq-btoc, .mq-bside-card    { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: #fff; }
.mq-btoc ol                             { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: toc; }
.mq-btoc li                             { counter-increment: toc; margin: 0; }
.mq-btoc a                              { display: flex; gap: 10px; padding: 8px 0; font-size: 14.5px; line-height: 1.4; font-weight: 600; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.mq-btoc li:first-child a               { border-top: 0; }
.mq-btoc a::before                      { content: counter(toc, decimal-leading-zero); color: var(--acc); font-weight: 700; font-size: 12.5px; padding-top: 2px; }
.mq-btoc a:hover                        { color: var(--acc); }
/* Article meta panel: Tagged / Category / Share share one aligned label column */
.mq-bmeta                               { margin-top: 40px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); overflow: hidden; }
.mq-bmeta-row, .mq-bshare               { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px 18px; padding: 18px 24px; margin: 0; }
.mq-bmeta-row + .mq-bmeta-row, .mq-bmeta-row + .mq-bshare { border-top: 1px solid var(--line); }
.mq-bmeta-chips                         { display: flex; flex-wrap: wrap; gap: 10px; }
.mq-bmeta-chips a                       { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--ink); text-decoration: none; transition: border-color .2s, color .2s; }
.mq-bmeta-chips a:hover                 { border-color: var(--acc); color: var(--acc); }
.mq-bshare-row                          { display: flex; flex-wrap: wrap; gap: 10px; }
.mq-bshare-btn                          { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; margin: 0; border-radius: 50%; border: 0; background: var(--bc, #444); color: #fff; font: inherit; line-height: 1; cursor: pointer; text-decoration: none; box-shadow: 0 6px 14px -8px var(--bc, rgba(0,0,0,.5)); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; -webkit-appearance: none; appearance: none; }
.mq-bshare-btn svg                      { display: block; width: 19px; height: 19px; fill: currentColor; }
.mq-bshare--email svg, .mq-bshare--copy svg { fill: none; }
.mq-bshare-btn:hover, .mq-bshare-btn:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 20px -8px var(--bc, rgba(0,0,0,.5)); filter: brightness(1.08); outline: none; color: #fff; }
.mq-bshare--facebook                    { --bc: #1877f2; }
.mq-bshare--x                           { --bc: #111; }
.mq-bshare--linkedin                    { --bc: #0a66c2; }
.mq-bshare--whatsapp                    { --bc: #25d366; }
.mq-bshare--pinterest                   { --bc: #e60023; }
.mq-bshare--email                       { --bc: #6b6468; }
.mq-bshare--copy                        { --bc: #151012; }
.mq-bshare-tip                          { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); padding: 5px 10px; border-radius: 8px; background: #151012; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.mq-bshare--copy.is-copied .mq-bshare-tip { opacity: 1; transform: translate(-50%, 0); }
.mq-bshare--copy.is-copied              { --bc: #1f9d55; }
@media (max-width: 560px) { .mq-bmeta-row, .mq-bshare { grid-template-columns: 1fr; padding: 16px 18px; } .mq-bshare-btn { width: 44px; height: 44px; } }
.mq-bside-card                          { display: flex; flex-direction: column; gap: 14px; background: var(--tint, #fdf0ee); border-color: transparent; }
.mq-bside-card strong                   { font-family: "DM Sans", sans-serif; font-size: 18px; line-height: 1.35; color: var(--ink); }
.mq-bside-card .mq-btn                  { padding: 14px 20px; font-size: 15px; }

/* --- closing call to action --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mq-bcard, .mq-bcard-media img, .mq-bterm, .mq-bpost-nav a { transition: none; }
  .mq-bcard:hover, .mq-bterm:hover, .mq-bpost-nav a:hover { transform: none; }
}