/* ============================================================
   DRC Systems — corporate landing page (LIGHT theme)
   Clean white UI · indigo/violet brand · minimal interactions
   Color contrast tuned to WCAG 2.1 AA:
     body text  >= 4.5:1   ·   large/UI text >= 3:1
   ============================================================ */

:root{
  /* surfaces */
  --bg:#ffffff;
  --bg-soft:#f5f7fb;
  --surface:#ffffff;
  --line:#e6e9f1;
  --line-2:#d5dae6;

  /* text (AA on white) */
  --text:#0f172a;     /* ~17:1  */
  --muted:#475569;    /* ~7.4:1 */
  --faint:#64748b;    /* ~4.8:1 */

  /* brand: purple -> gold (text-safe variants for AA) */
  --brand:#6d0eb1;    /* brand purple  ~9:1 on white  (links/text) */
  --brand-ink:#57069a;/* darker purple ~11:1          */
  --violet:#7c3aed;
  --gold:#cfa94f;     /* brand gold — decorative only (fails as text) */
  --gold-ink:#8a6a14; /* gold text — AA on white ~5.6:1 */
  --teal-ink:#0e7490;
  --cyan:#06b6d4;     /* decorative only */
  --green:#15803d;    /* ~5.1:1 */

  /* gradients (brand) */
  --brand-grad:linear-gradient(to right, rgba(109,14,177,1) 0%, rgba(207,169,79,1) 100%); /* EXACT brand — decorative */
  --grad:var(--brand-grad);                                       /* decorative surfaces */
  --grad-cta:linear-gradient(to right,#6d0eb1 0%,#9a6f12 100%);   /* white-text surfaces: AA */
  --grad-text:linear-gradient(to right,#6d0eb1 0%,#9a7a1e 100%);  /* gradient heading text: >=3:1 large */
  --grad-soft:linear-gradient(120deg,rgba(109,14,177,.08),rgba(207,169,79,.12));

  /* elevation */
  --shadow-xs:0 1px 2px rgba(16,24,40,.06);
  --shadow-sm:0 4px 14px -8px rgba(16,24,40,.18);
  --shadow:0 14px 34px -18px rgba(16,24,40,.22);
  --shadow-lg:0 30px 60px -28px rgba(16,24,40,.28);

  --radius:16px;
  --radius-lg:22px;
  --container:1200px;
  --header-h:72px;
  --csd-band:clamp(60px,6vw,88px);  /* one vertical rhythm for every case-study band */
  --csd-ribbon-lift:52px;           /* how far .csd-facts climbs into the hero */
  --csd-ribbon-h:96px;              /* one .csd-facts row; the band below is pulled up by the part left hanging */
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:var(--font);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
/* global headings + paragraph (style by tag; components target via parent) */
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--display);font-weight:600;line-height:1.14;letter-spacing:-.02em;color:var(--text)}
p{margin:0;color:var(--muted);font-size:16px;line-height:1.65}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Legacy drc-theme gradient-heading classes: real WYSIWYG field content
   authored years ago under the old theme still carries these class names
   verbatim, and the old theme had several (drc/sass has gradient-text,
   gradient-text-blue, gradient-text-blue-yellow, gradient-text-warm,
   gradient-text-yellow, text-gradient-one through text-gradient-five) -
   map all of them to the same effect as .grad instead of editing the
   stored content. */
.gradient-text,.gradient-text-blue,.gradient-text-blue-yellow,.gradient-text-warm,.gradient-text-yellow,
.text-gradient-one,.text-gradient-two,.text-gradient-three,.text-gradient-four,.text-gradient-five{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:3px solid rgba(79,70,229,.5);outline-offset:2px;border-radius:6px}

/* ---------- soft background accents (very subtle) ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:
  radial-gradient(900px 520px at 88% -8%,rgba(79,70,229,.07),transparent 60%),
  radial-gradient(760px 520px at -6% 100%,rgba(6,182,212,.06),transparent 55%),var(--bg)}
.aurora__blob{display:none}
.grid-overlay{position:absolute;inset:0;background-image:
  linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 50% at 50% 0%,#000,transparent 75%)}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;background:var(--grad)}

/* ---------- announcement ---------- */
.announce{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0;font-size:15px;font-weight:600}
.announce__track{display:flex;gap:32px;align-items:center;white-space:nowrap;width:max-content;animation:ticker 40s linear infinite}
.announce:hover .announce__track{animation-play-state:paused}
.announce__track span,.announce__track a{color:var(--text);text-decoration:none}
.announce__track a:hover{color:var(--brand)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s}
.header.scrolled{border-bottom-color:var(--line);box-shadow:0 8px 24px -18px rgba(16,24,40,.35)}
.header__inner{display:flex;align-items:center;gap:18px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;color:var(--text)}
.brand__text span{color:var(--brand)}
.brand__mark{display:grid;place-items:center}

.nav{margin-inline:auto}
.nav__list{display:flex;align-items:center;gap:2px}
.nav__link{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;font-size:15px;font-weight:500;color:var(--muted);transition:color .2s,background .2s}
.nav__link:hover{color:var(--text);background:var(--bg-soft)}
.chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s;margin-left:2px;margin-top:-3px}
.nav__item.open .chev{transform:rotate(-135deg);margin-top:2px}
.header__cta{margin-left:0}

/* ---------- mega menu ---------- */
.has-mega{position:static}
.mega{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%) translateY(8px);width:min(1080px,calc(100vw - 40px));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:950}
.nav__item.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega__inner{display:grid;gap:26px;padding:26px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);grid-template-columns:1fr}
.mega--who-we-are{grid-template-columns:1fr 1fr 1fr 1.1fr}
.mega--hire-developers,.mega--what-we-do{display:block;column-count:4;column-gap:26px}
.mega--hire-developers .mega__col,.mega--what-we-do .mega__col{-webkit-column-break-inside:avoid;break-inside:avoid-column;margin-bottom:26px}
.mega__inner[class*="mega--imv"]{gap:18px}
.imv-ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mega--imv1{grid-template-columns:1fr}
.imv1__head{padding-bottom:14px;border-bottom:1px solid var(--line)}
.imv1__head h4{font-size:19px;letter-spacing:-.01em}
.imv1__head p{font-size:13px;margin-top:5px;max-width:58ch}
.imv1__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.imvcard{display:flex;gap:12px;padding:12px;border-radius:14px;border:1px solid transparent;transition:background .18s,border-color .18s,transform .18s var(--ease)}
.imvcard:hover{background:var(--bg-soft);border-color:var(--line);transform:translateY(-2px)}
.imvcard__ic{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--grad-soft);color:var(--brand)}
.imvcard__tx{min-width:0}
.imvcard__tx b{display:block;font-size:14px;font-weight:600;color:var(--text);line-height:1.3}
.imvcard__tx span{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--faint)}
.mega__col h4{font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-family:var(--font);font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.mega__col h4:not(:first-of-type){margin-top:18px}
.mega__links li a{display:block;padding:6px 8px;margin-inline:-8px;border-radius:8px;font-size:14px;color:var(--muted);transition:color .15s,background .15s}
.mega__links li a:hover{color:var(--brand-ink);background:var(--bg-soft)}
.dot{width:8px;height:8px;border-radius:3px;display:inline-block}
.dot--violet{background:#4f46e5}.dot--cyan{background:#06b6d4}.dot--lime{background:#0e7490}.dot--pink{background:#7c3aed}.dot--amber{background:#d97706}
.mega__promo{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--radius);background:var(--grad-soft);border:1px solid var(--line);transition:box-shadow .2s}
.mega__promo:hover{box-shadow:var(--shadow-sm)}
.mega__promo-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--brand);padding:4px 10px;border-radius:999px}
.mega__promo h4{font-size:19px}
.mega__promo p{font-size:13px}
.mega__promo-link{margin-top:auto;font-weight:600;color:var(--brand)}

/* ---------- buttons (minimal) ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:600;font-size:15px;transition:transform .18s var(--ease),box-shadow .2s,background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn--sm{padding:9px 16px;font-size:14px;border-radius:10px}
.btn--block{display:flex;justify-content:center;width:100%}
.btn--primary{background:var(--grad-cta);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn__arrow{transition:transform .25s}
.btn--primary:hover .btn__arrow{transform:translateX(3px)}
.btn--ghost{background:#fff;color:var(--text);border:1px solid var(--line-2)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand-ink)}

/* ---------- hamburger / drawer ---------- */
.hamburger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;border-radius:10px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line-2)}
.hamburger span{width:20px;height:2px;background:var(--text);border-radius:2px;transition:.3s}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(360px,86vw);background:#fff;border-left:1px solid var(--line);z-index:999;transform:translateX(100%);transition:transform .35s var(--ease);padding:88px 22px 28px;overflow-y:auto;box-shadow:var(--shadow-lg)}
.drawer.open{transform:translateX(0)}
.drawer__nav{display:flex;flex-direction:column;gap:4px}
.acc{border-bottom:1px solid var(--line)}
.acc summary{padding:14px 4px;font-weight:600;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--brand);font-size:20px}
.acc[open] summary::after{content:"−"}
.acc a{display:block;padding:9px 12px;color:var(--muted);font-size:14px}
.acc a:hover{color:var(--brand-ink)}
.drawer__link{padding:14px 4px;font-weight:600;font-size:16px;border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:16px}
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:998}

/* ---------- section heads ---------- */
section{position:relative}
.sec-head{max-width:720px;margin:0 auto 46px;text-align:center}
.sec-kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand);margin-bottom:14px;padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;background:#fff}
/* Some pages' sec-head title comes straight from a real WYSIWYG field
   (e.g. two-column-with-image-module's two_col_description) whose stored
   markup uses <h3> rather than <h2> - give it the same title size either way. */
.sec-head h2,.sec-head h3,.sec-head h4{font-size:clamp(28px,4vw,44px)}
.sec-head p{margin-top:16px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;background:#fff}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(21,128,61,.5);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(21,128,61,0)}100%{box-shadow:0 0 0 0 rgba(21,128,61,0)}}
.glass{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs)}
/* reusable card component — surface + standard hover lift (reused across sections) */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}

/* ---------- HERO ---------- */
.fold{display:block}
.hero{padding:clamp(100px,11vh,160px) 0;text-align:center;background:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 75% 55% at 50% -10%,rgba(109,14,177,.07),transparent),radial-gradient(ellipse 55% 45% at 95% 100%,rgba(207,169,79,.09),transparent),radial-gradient(ellipse 45% 40% at 0% 100%,rgba(109,14,177,.05),transparent);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(109,14,177,.055) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.hero__inner{display:flex;flex-direction:column;align-items:center;max-width:860px;margin-inline:auto;position:relative;z-index:1}
.hero__copy h1{font-size:clamp(44px,6.5vw,76px);margin:24px 0 22px;letter-spacing:-.04em;line-height:1.08}
.hero__copy h1 .line{display:block}
.hero__copy>p{font-size:clamp(16px,1.5vw,19px);max-width:640px;margin-inline:auto;color:var(--muted);line-height:1.75}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin:38px 0 0;justify-content:center;}
.hero__actions a.btn.btn--ghost{display:none;}


/* Hero Slider */
.hero__slides{overflow:hidden;width:100%}
.hero__track{display:flex;transition:transform .7s cubic-bezier(.4,0,.2,1);cursor:grab;user-select:none}
.hero__slide{flex:0 0 100%;width:100%}



/* ---------- pillars ---------- */
.pillars{padding:84px 0}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pillar{padding:28px 24px}
.pillar__ic{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;font-size:28px;margin-bottom:16px;background:color-mix(in srgb,var(--c) 14%,#fff);border:1px solid color-mix(in srgb,var(--c) 22%,var(--line))}
.pillar h3{font-size:20px;margin-bottom:10px}
.pillar p{font-size:15px;margin-bottom:16px}
.pillar ul{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pillar li{font-size:12px;padding:5px 11px;border-radius:999px;background:var(--bg-soft);color:var(--muted);border:1px solid var(--line)}
.pillar__link{font-weight:600;color:var(--brand)}

/* ACF-uploaded SVG icons have no generated intermediate size, so WP core
   bakes width="1" height="1" onto the <img> tag; these icon boxes only ever
   sized the .ico (inline svg fallback) case, leaving the real <img> case
   invisible at 1x1px. Force it to fill its box regardless of that attribute. */
.pillar__ic img,.why__ic img,.proc__ic img,.os-vmc__ic img,.hire-why__ic img,.svc-benefit__ic img,.svc-stack__ic img{width:100%!important;height:100%!important;object-fit:contain}


/* ---------- why ---------- */
.why{padding:84px 0;background:var(--bg-soft)}
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why__card{padding:26px 24px}
.why__ic{display:grid;place-items:center;width:50px;height:50px;border-radius:13px;font-size:26px;margin-bottom:14px;background:var(--grad-soft);border:1px solid var(--line)}
.why__card h3{font-size:18px;margin-bottom:8px}
.why__card p{font-size:14px}

/* ---------- process (redesigned) ---------- */
.process{padding:84px 0}
.proc{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.proc__line{position:absolute;top:66px;left:11%;right:11%;height:2px;background:linear-gradient(90deg,#4f46e5,#06b6d4);opacity:.3}
.proc__step{position:relative;padding:26px 24px}
.proc__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.proc__num{font-family:var(--display);font-weight:700;font-size:30px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.proc__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;font-size:22px;background:var(--bg-soft);border:1px solid var(--line)}
.proc__step h4{font-size:19px;margin-bottom:8px}
.proc__step p{font-size:14px;margin-bottom:16px}
.proc__meta{display:flex;flex-wrap:wrap;gap:8px}
.proc__meta li{font-size:11px;font-weight:600;color:var(--brand-ink);background:rgba(79,70,229,.07);border:1px solid rgba(79,70,229,.16);padding:4px 10px;border-radius:999px}

/* ---------- updates ---------- */
.updates{padding:84px 0}
.updates__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.update{display:flex;flex-direction:column;overflow:hidden;padding:0}
.update__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;flex:none}
.update__body{display:flex;flex-direction:column;gap:14px;padding:22px 26px 26px;flex:1}
.update__tag{align-self:flex-start;font-size:12px;font-weight:600;color:var(--brand-ink);padding:4px 12px;border-radius:999px;background:rgba(79,70,229,.07);border:1px solid rgba(79,70,229,.16)}
.update h3{font-size:19px;line-height:1.32}
.update__link{margin-top:auto;font-weight:600;color:var(--brand)}

/* ---------- cases ---------- */
.cases{padding:84px 0;background:var(--bg-soft)}
.cases__rail{display:flex;gap:22px;overflow-x:auto;padding:6px 24px 26px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.cases__rail::-webkit-scrollbar{height:8px}
.cases__rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.case{scroll-snap-align:start;min-width:320px;max-width:320px;padding:28px 24px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);border-top:4px solid var(--c);box-shadow:var(--shadow-xs);transition:transform .2s var(--ease),box-shadow .2s}
.case:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.case__ic{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;font-size:28px;margin-bottom:16px;background:color-mix(in srgb,var(--c) 12%,#fff);border:1px solid color-mix(in srgb,var(--c) 22%,var(--line))}
.case h3{font-size:21px;margin-bottom:10px}
.case p{font-size:15px;margin-bottom:18px}
.case__tag{font-size:12px;font-weight:600;color:var(--muted);padding:5px 12px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line)}
.cases__cta{display:flex;justify-content:center;margin-top:48px}


/* ---------- knowledge / blog ---------- */
.knowledge{padding:84px 0;background:var(--bg-soft)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden}
.post__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.post__cat{margin:18px 20px 0;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--brand)}
.post h3{margin:8px 20px 22px;font-size:18px;line-height:1.35}

/* ---------- cta ---------- */
.cta{padding:84px 0}
.cta__box{text-align:center;padding:clamp(40px,6vw,68px);border-radius:var(--radius-lg);background:var(--grad-soft);border:1px solid var(--line);position:relative;overflow:hidden}
.cta__box h2{font-size:clamp(28px,4.2vw,44px);margin-bottom:14px}
.cta__box p{font-size:17px;margin-bottom:30px}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- marquee ---------- */
.marquee{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0;font-size:15px;font-weight:600; margin-bottom: 6px;}
.marquee__track{display:flex;gap:32px;align-items:center;white-space:nowrap;width:max-content;animation:ticker 30s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span:not(:nth-child(even)){color:var(--text)}
.marquee__track span:nth-child(even){color:var(--brand)}

/* ---------- footer (dark navy) ---------- */
.footer:after {background: #734198; background: linear-gradient(90deg,rgba(115, 65, 152, 1) 0%, rgba(208, 164, 88, 1) 100%); position: absolute; top: -6px; width: 100%; height: 6px; content: ""; z-index: 1;}
.footer{background:#0f172a;color:#cbd5e1;padding:62px 0 28px; position: relative;}
.footer h5,.footer .brand,.footer .brand__text{color:#fff}
.footer .brand__text span{color:#a5b4fc}
.footer__top{display:grid;grid-template-columns:1.3fr 2.4fr;gap:48px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer__brand p{color:#94a3b8;font-size:14px;margin:18px 0;max-width:360px}
.footer__brand address{font-style:normal;color:#94a3b8;font-size:14px;line-height:1.8}
.footer__brand address a:hover{color:#fff}
.footer__social{display:flex;gap:10px;margin-top:18px}
.footer__social a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:background .2s,color .2s;font-size:14px;color:#cbd5e1}
.footer__social a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.footer__cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.footer__cols h5{font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;font-family:var(--font)}
.footer__cols a{color:#94a3b8;font-size:14px;line-height:2.1;transition:color .15s}
.footer__cols a:hover{color:#fff}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:22px;color:#94a3b8;font-size:13px}
.footer__bottom p{color:inherit;font-size:inherit}
.footer__region{display:flex;align-items:center;gap:8px}
.footer__region select{background:#1e293b;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:6px 10px;font-family:inherit}
.footer__legal{display:flex;gap:18px;flex-wrap:wrap}
.footer__legal a:hover{color:#fff}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   NEW COMPONENTS (round 3)
   ============================================================ */

/* ---------- logo ---------- */
.brand__logo{height:40px;width:auto;aspect-ratio:218/64;display:block}
.navmenu .brand__logo{height:36px}
.brand--light .brand__logo,.footer .brand__logo{filter:brightness(0) invert(1)}


/* ---------- fullscreen mobile overlay nav ---------- */
.navmenu{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;background:rgba(255,255,255,.99);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;overflow-y:auto;overscroll-behavior:contain}
.navmenu.open{opacity:1;visibility:visible;transform:none}
.navmenu__bar{z-index:1;display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:inherit}
.navmenu__close{position:relative;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line-2)}
.navmenu__close span{position:absolute;top:50%;left:50%;width:18px;height:2px;background:var(--text);border-radius:2px}
.navmenu__close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.navmenu__close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.navmenu__body{display:grid;grid-template-columns:1fr;gap:26px;padding:26px 22px 40px;width:100%;max-width:760px;margin:0 auto}
.navmenu__primary{display:flex;flex-direction:column}
.macc{border-bottom:1px solid var(--line)}
.macc>summary{display:flex;align-items:center;gap:14px;padding:18px 2px;font-family:var(--display);font-size:20px;font-weight:600;cursor:pointer;list-style:none}
.macc>summary::-webkit-details-marker{display:none}
.macc__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;font-size:18px;background:var(--grad-soft);border:1px solid var(--line);flex:none}
.macc__label{flex:1}
.macc__chev{width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .25s}
.macc[open] .macc__chev{transform:rotate(-135deg)}
.macc__panel{display:flex;flex-direction:column;padding:0 2px 14px 58px}
.macc__panel a{padding:10px 0;color:var(--muted);font-size:15px}
.macc__panel a:hover{color:var(--brand-ink)}
.navmenu__link{display:flex;align-items:center;gap:14px;padding:18px 2px;font-family:var(--display);font-size:20px;font-weight:600;border-bottom:1px solid var(--line)}
.navmenu__cta{padding:22px;border-radius:16px;background:var(--grad-soft);border:1px solid var(--line)}
.navmenu__cta h4{font-size:18px;margin-bottom:6px}
.navmenu__cta p{font-size:14px;margin-bottom:14px}
.navmenu__contact{display:grid;gap:12px;margin-top:20px}
.navmenu__contact li{display:flex;flex-direction:column;gap:2px}
.navmenu__contact span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.navmenu__contact a,.navmenu__contact address{color:var(--text);font-style:normal;font-size:15px;font-weight:500}
.navmenu__social{display:flex;gap:10px;margin-top:20px}
.navmenu__social a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--line-2);color:var(--text)}
.navmenu__social a:hover{background:var(--grad-cta);color:#fff;border-color:transparent}
.navmenu.open .macc,.navmenu.open .navmenu__link,.navmenu.open .navmenu__aside{animation:navIn .45s var(--ease) both}
.navmenu.open .macc:nth-child(1){animation-delay:.05s}
.navmenu.open .macc:nth-child(2){animation-delay:.1s}
.navmenu.open .macc:nth-child(3){animation-delay:.15s}
.navmenu.open .navmenu__link{animation-delay:.2s}
.navmenu.open .navmenu__aside{animation-delay:.25s}
@keyframes navIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}


/* ---------- success stories (expanding panels) ---------- */
.showcase{display:flex;gap:14px;height:480px}
.show{position:relative;flex:1;min-width:0;border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(165deg,color-mix(in srgb,var(--c) 12%,#fff),#fff);box-shadow:var(--shadow-xs);overflow:hidden;cursor:pointer;transition:flex .55s var(--ease),box-shadow .35s,border-color .35s}
.show.is-active{flex:4.4;box-shadow:var(--shadow);border-color:transparent}
.show.is-active::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c)}
.show__index{position:absolute;top:20px;left:22px;z-index:2;font-family:var(--display);font-weight:700;font-size:14px;color:var(--gold-ink)}
.show__ic{position:absolute;top:50px;left:18px;z-index:2;display:grid;place-items:center;width:50px;height:50px;border-radius:13px;font-size:26px;background:color-mix(in srgb,var(--c) 14%,#fff);border:1px solid color-mix(in srgb,var(--c) 24%,var(--line))}
.show__label{position:absolute;left:50%;bottom:28px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--display);font-weight:600;font-size:17px;white-space:normal;height:300px;color:var(--text);transition:opacity .3s}
.show.is-active .show__label{opacity:0}
.show__content{position:absolute;left:26px;right:26px;bottom:26px;max-width:560px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s .12s var(--ease),transform .4s .12s var(--ease)}
.show.is-active .show__content{opacity:1;visibility:visible;transform:none}
.show__industry{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.show__content h3{font-size:clamp(18px,2vw,26px);margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.show__content p{font-size:15px;margin-bottom:18px;max-width:46ch}
.show__results{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:18px}
.show__results b{display:block;font-family:var(--display);font-size:26px;color:var(--brand-ink)}
.show__results span{font-size:13px;color:var(--muted)}
.show__link{font-weight:600;color:var(--brand)}


/* ---------- mega footer ---------- */
.footer__cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:38px;margin-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer__cta h2{color:#fff;font-size:clamp(24px,3vw,34px)}
.footer__cta p{color:#94a3b8;font-size:15px;margin-top:8px}
.grad-light{background:linear-gradient(to right,#c4b5fd,#fcd34d);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer__main{display:grid;grid-template-columns:1fr 2.8fr;gap:48px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer__brand .footer__addr-label{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin:20px 0 8px}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 20px}
.facc{border:0}
.facc>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#fff;font-weight:700;font-family:var(--font);margin-bottom:14px;cursor:pointer}
.facc>summary::-webkit-details-marker{display:none}
.facc__chev{width:8px;height:8px;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:rotate(45deg);transition:transform .25s}
.facc[open] .facc__chev{transform:rotate(-135deg)}
.facc__panel{display:flex;flex-direction:column}
.footer__badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.fbadge{font-size:13px;color:#cbd5e1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:7px 14px;border-radius:999px}
.fbadge b{color:#fff}
.footer__badges .footer__social{margin-left:auto;margin-top:0}

/* desktop: footer columns are static (no collapse), chevron hidden */
@media (min-width:641px){
  .facc>summary{cursor:default;pointer-events:none}
  .facc__chev{display:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .mega{width:min(720px,calc(100vw - 32px))}
  .mega__inner,.mega--who-we-are{grid-template-columns:1fr 1fr}
  .mega--hire-developers,.mega--what-we-do{column-count:2}
  .imv1__grid{grid-template-columns:repeat(2,1fr)}
  .pillar-grid,.why__grid,.proc{grid-template-columns:1fr 1fr}
  .proc__line{display:none}
  .updates__grid,.blog-grid{grid-template-columns:1fr 1fr}
  .footer__top,.footer__main{grid-template-columns:1fr;gap:36px}
  .footer__cols{grid-template-columns:repeat(3,1fr)}
}

/* overlay nav only exists on mobile */
@media (min-width:861px){ .navmenu{display:none} }
@media (max-width:860px){
  .nav,.header__cta{display:none}
  .hamburger{display:flex}
  .header__inner{justify-content:space-between}
  /* success stories -> stacked cards */
  .showcase{flex-direction:column;height:auto;gap:14px}
  .show{flex:auto!important;padding:24px}
  .show.is-active{box-shadow:var(--shadow-xs);border-color:var(--line)}
  .show.is-active::after{display:none}
  .show__index,.show__ic{position:static}
  .show__ic{margin:6px 0 12px}
  .show__label{display:none}
  .show__content{position:static;opacity:1!important;visibility:visible!important;transform:none!important;max-width:none}
}
@media (max-width:640px){
  .container{padding-inline:18px}
  .pillar-grid,.why__grid,.proc,
  .updates__grid,.blog-grid{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr}
  .sec-head{margin-bottom:32px}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .footer__cta{flex-direction:column;align-items:flex-start}
  .footer__badges{flex-direction:column;align-items:flex-start;gap:16px}
  .footer__badges .footer__social{margin-left:0}
  /* footer columns become accordions: collapse by default on phones */
  .facc[open] .facc__panel{display:flex}
}
@media (max-width:420px){
  .footer__cols{grid-template-columns:1fr}
  .hero__actions .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   INLINE ICONS (Lucide SVG sprite)
   ============================================================ */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.why__ic,.proc__ic,.macc__ic{color:var(--brand)}
.pillar__ic{color:var(--c)}
.show__ic{color:var(--c)}
.slide__emoji{color:var(--accent)}
.slide__emoji .ico{stroke-width:1.4}
.announce__track span .ico,.announce__track a .ico{width:15px;height:15px;color:var(--brand);margin-right:5px;vertical-align:-0.2em}
.footer__region label{display:inline-flex;align-items:center;gap:6px}
/* social brand icons (Simple Icons) */
.sico{width:18px;height:18px;display:inline-block;vertical-align:middle;fill:currentColor}
/* rating stars (SVG) */
.star{width:1em;height:1em;display:inline-block;vertical-align:-0.12em;fill:currentColor}
.fbadge .star{color:var(--gold)}

/* ============================================================
   BLOG / KNOWLEDGE HUB LISTING  (blogs.html only)
   Scoped under new class names — does NOT touch landing styles.
   Reuses tokens: --brand, --grad-text, --card, --reveal, etc.
   ============================================================ */

/* ---- blog crumb (used on blog-detail.html) ---- */
.bloghero__crumb{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;font-size:13px;color:var(--faint);margin-bottom:18px}
.bloghero__crumb a{color:var(--faint);transition:color .2s}
.bloghero__crumb a:hover{color:var(--brand-ink)}
.bloghero__crumb svg{width:13px;height:13px;color:var(--line-2)}
.bloghero__crumb span{color:var(--text);font-weight:600}
/* search (compact, lives in the sticky catbar beside the chips) */
.blogsearch{position:relative;width:100%;max-width:560px;margin:30px auto 18px}
.catbar .blogsearch{flex:none;width:min(300px,32vw);margin:0}
.catbar .blogsearch input{font-size:14px;padding:9px 46px 9px 18px;box-shadow:none}
.catbar .blogsearch input:focus{box-shadow:0 0 0 3px rgba(109,14,177,.1)}
.catbar .blogsearch__btn{width:30px;height:30px;right:5px}
.catbar .blogsearch__btn svg{width:14px;height:14px}
.blogsearch input{width:100%;font:inherit;font-size:16px;color:var(--text);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:16px 66px 16px 26px;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.blogsearch input::placeholder{color:var(--faint)}
.blogsearch input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(109,14,177,.12)}
.blogsearch__ic{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--faint);width:20px;height:20px;pointer-events:none}
.blogsearch__btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--grad-cta);color:#fff;box-shadow:var(--shadow-sm);transition:transform .18s var(--ease)}
.blogsearch__btn:hover{transform:translateY(-50%) scale(1.06)}
.blogsearch__btn svg{width:18px;height:18px}
.bloghero__meta{font-size:14px;color:var(--faint)}
.bloghero__meta b{color:var(--text);font-family:var(--display)}
.blogmain .os-banner .bloghero__meta{margin-top:16px}
/* all outline icons in blog UI inherit current color like homepage .ico (fixes black icons) */
.blogsearch__ic,.blogsearch__btn svg,.sidecard__title svg,.featured__flag svg,.pager svg,.catbar__arrow svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- category chip bar (sticky, horizontal scroll on mobile) ---- */
.catbar{position:sticky;top:var(--header-h);z-index:40;background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(10px);border-block:1px solid var(--line)}
.catbar__inner{display:flex;align-items:center;gap:10px}
.catbar__scroll{flex:1;display:flex;gap:10px;overflow-x:auto;padding:14px 0;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.catbar__scroll::-webkit-scrollbar{display:none}
.catbar__arrow{flex:none;width:38px;height:38px;display:none;place-items:center;border-radius:50%;background:transparent;border:1px solid var(--line-2);color:var(--muted);transition:color .2s,border-color .2s,background .2s}
.catbar__arrow:hover{color:var(--brand-ink);border-color:var(--brand);background:#fff}
.catbar__arrow svg{width:18px;height:18px}
.catbar__arrow.show{display:grid}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line-2);cursor:pointer;white-space:nowrap;transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.chip:hover{color:var(--brand-ink);border-color:var(--brand)}
.chip.is-active{color:#fff;background:var(--grad-cta);border-color:transparent;box-shadow:var(--shadow-sm)}
.chip__count{font-size:12px;color:var(--faint)}
.chip.is-active .chip__count{color:#fff}

/* ---- layout: content + sidebar ---- */
.blogwrap{padding:34px 0 84px}
.blogwrap__inner{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:start}
.blogcontent{min-width:0}

/* ---- featured post ---- */
.featured{display:grid;grid-template-columns:1fr 1.08fr;overflow:hidden;margin-bottom:36px}
.featured__media{position:relative;min-height:300px;overflow:hidden;background:var(--bg-soft)}
.featured__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.featured:hover .featured__media img{transform:scale(1.05)}
.featured__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.22),transparent 45%);pointer-events:none}
.featured__flag{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(15,23,42,.72);backdrop-filter:blur(4px);padding:7px 13px;border-radius:999px}
.featured__flag svg{width:14px;height:14px}
.featured__body{padding:30px 32px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.bmeta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 13px;font-size:13.5px;font-weight:500;color:var(--faint);line-height:1.4}
.bmeta__cat{font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand);font-size:12px}
.bmeta__dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.bmeta__read{display:inline-flex;align-items:center;gap:6px}
.featured__body h2{font-size:clamp(22px,2.4vw,30px);line-height:1.22}
.featured__body h2 a:hover{color:var(--brand-ink)}
.featured__body p{font-size:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.featured__foot{display:flex;align-items:center;gap:11px;margin-top:2px}

/* ---- list head ---- */
.bloglist__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.bloglist__head h2{font-size:22px}
.bloglist__count{font-size:14px;color:var(--faint)}

/* ---- post grid + cards ---- */
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.bpost{display:flex;flex-direction:column;overflow:hidden}
.bpost__media{aspect-ratio:16/9;position:relative;display:block;background:var(--bg-soft);overflow:hidden}
.bpost__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.bpost:hover .bpost__media img{transform:scale(1.06)}
.bpost__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.18),transparent 40%);pointer-events:none}
.bpost__cat{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(15,23,42,.72);backdrop-filter:blur(4px);padding:6px 11px;border-radius:999px}
.bpost__body{display:flex;flex-direction:column;gap:12px;padding:22px 22px 22px;flex:1}
.bpost h3{font-size:20px;line-height:1.34;letter-spacing:-.01em}
.bpost h3 a:hover{color:var(--brand-ink)}
.bpost__excerpt{font-size:14px;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bpost__foot{margin-top:auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-top:6px}
.bpost__read{font-weight:600;font-size:14px;color:var(--brand);display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.bpost:hover .bpost__read{gap:10px}

/* ---- no results ---- */
.noresults{text-align:center;padding:60px 20px;border:1px dashed var(--line-2);border-radius:var(--radius-lg);background:var(--bg-soft)}
.noresults svg{width:40px;height:40px;color:var(--faint);margin-bottom:12px}
.noresults h3{font-size:20px;margin-bottom:6px}

/* ---- pagination ---- */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap}
.pager button{min-width:42px;height:42px;padding:0 12px;border-radius:12px;font-weight:600;font-size:15px;color:var(--muted);background:#fff;border:1px solid var(--line-2);transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.pager button:hover:not(:disabled):not(.is-active){color:var(--brand-ink);border-color:var(--brand)}
.pager button.is-active{color:#fff;background:var(--grad-cta);border-color:transparent;box-shadow:var(--shadow-sm);cursor:default}
.pager button:disabled{opacity:.45;cursor:not-allowed}
/* Real WordPress-rendered pagination (template-parts/blog/pagination.php,
   built from paginate_links()) emits real <a>/<span> links, not the JS
   mockup's <button data-page> elements, so it needs its own selectors -
   .pager__num had no rule at all (page numbers rendered unstyled) and
   .pager__nav only had icon/text layout, no box styling, both confirmed via
   direct CSS search after "pagination doesn't match the design" was
   reported. Mirrors .pager button's box exactly. */
.pager__num,.pager__nav{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:42px;height:42px;padding:0 12px;border-radius:12px;font-weight:600;font-size:15px;color:var(--muted);background:#fff;border:1px solid var(--line-2);text-decoration:none;transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.pager__num:hover,.pager__nav:hover{color:var(--brand-ink);border-color:var(--brand)}
.pager__num.is-active{color:#fff;background:var(--grad-cta);border-color:transparent;box-shadow:var(--shadow-sm);cursor:default}
.pager__nav svg{width:16px;height:16px}
.pager__gap{color:var(--faint);padding:0 2px}

/* ---- sidebar ---- */
.blogside{display:flex;flex-direction:column;gap:24px;position:sticky;top:calc(var(--header-h) + 78px)}
.sidecard{padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}
.sidecard__title{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:18px}
.sidecard__title svg{width:18px;height:18px;color:var(--brand)}

/* trending list */
.trend{display:flex;flex-direction:column}
.trend__item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.trend__item:first-child{border-top:0;padding-top:2px}
.trend__rank{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;flex:none;width:22px;text-align:center}
.trend__body h4{font-size:14.5px;font-weight:600;line-height:1.42;margin-bottom:6px}
.trend__body h4 a{transition:color .2s}
.trend__body h4 a:hover{color:var(--brand-ink)}
.trend__meta{display:flex;align-items:center;gap:7px;font-size:12px;color:#5b6677}
.trend__dot{width:7px;height:7px;border-radius:2px;flex:none}

/* categories list. The real sidebar (template-parts/blog/sidebar.php) renders
   real <a href> links (needed for real navigation/SEO), not the JS mockup's
   <button data-cat> elements - ".catlist button" alone never matched them at
   all, so real rows had no layout/padding/hover, the active category had no
   highlight, and the active count badge never got its white-on-highlight
   treatment (exactly the "number alignment / active color / number
   background" bug report). ",.catlist a" added to each rule fixes this
   without changing anything for the (unused-in-production) button markup. */
.catlist{display:flex;flex-direction:column;gap:2px}
.catlist button,.catlist a{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:10px 12px;margin-inline:-4px;border-radius:10px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s,background .2s}
.catlist button:hover,.catlist a:hover{color:var(--brand-ink);background:var(--bg-soft)}
.catlist button.is-active,.catlist a.is-active{color:var(--brand-ink);background:var(--grad-soft);font-weight:600}
.catlist__count{font-size:12px;font-weight:600;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);padding:2px 9px;border-radius:999px}
.catlist button.is-active .catlist__count,.catlist a.is-active .catlist__count{color:var(--brand-ink);background:#fff}

/* newsletter sidecard */
.sidecard--news{background:var(--grad-soft);border-color:var(--line-2)}
.sidecard--news p{font-size:14px;margin-bottom:14px}
.sidecard--news form{display:flex;flex-direction:column;gap:10px}
.sidecard--news input{width:100%;font:inherit;font-size:14px;padding:12px 14px;border-radius:11px;border:1px solid var(--line-2);background:#fff}
.sidecard--news input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,14,177,.1)}

/* ---- blog responsive ---- */
@media (max-width:980px){
  .blogwrap__inner{grid-template-columns:1fr;gap:48px}
  .blogside{position:static;flex-direction:row;flex-wrap:wrap;gap:24px}
  .blogside>.sidecard{flex:1 1 280px}
}
@media (max-width:760px){
  .featured{grid-template-columns:1fr}
  .featured__media{min-height:200px;aspect-ratio:16/9}
  .catbar__inner{flex-wrap:wrap}
  .catbar .blogsearch{order:-1;width:100%;margin:12px 0 0}
  .catbar__scroll{padding:12px 0 14px}
}
@media (max-width:560px){
  .bgrid{grid-template-columns:1fr}
  .blogside{flex-direction:column}
  .blogside>.sidecard{flex:1 1 auto}
  .bloglist__head{flex-direction:column;gap:4px}
  .pager button,.pager__num,.pager__nav{min-width:38px;height:38px}
}

/* ============================================================
   BLOG DETAIL / ARTICLE  (blog-detail.html only)
   Scoped under .article / .prose / .toc — landing styles untouched.
   ============================================================ */

/* ---- article hero ---- */
/* article banner uses the shared .os-banner structure */
.article .os-banner .abyline{justify-content:flex-start;margin-top:24px}
/* byline row */
.abyline{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.abyline__sep{width:1px;height:26px;background:var(--line-2)}
.ashare{display:inline-flex;gap:8px}
.ashare a,.ashare button{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid var(--line-2);color:var(--muted);transition:color .2s,border-color .2s,transform .18s var(--ease)}
.ashare a:hover,.ashare button:hover{color:var(--brand-ink);border-color:var(--brand);transform:translateY(-2px)}
.ashare .is-copied{color:var(--green);border-color:var(--green)}
.ashare .sico{width:16px;height:16px}
.ashare .ico{width:17px;height:17px}

/* ---- cover ---- */
.acover{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;margin:34px 0 8px;background:var(--bg-soft);box-shadow:var(--shadow)}
.acover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- layout: prose + sidebar ---- */
.awrap{padding:40px 0 30px}
.awrap__inner{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start}
.aside{display:flex;flex-direction:column;gap:22px;position:sticky;top:calc(var(--header-h) + 24px)}

/* ---- prose typography ---- */
.prose{min-width:0;max-width:72ch}
.prose>*+*{margin-top:22px}
.prose p{font-size:17px;line-height:1.75;color:#33415a}
.prose h2{font-size:clamp(23px,2.6vw,30px);letter-spacing:-.02em;margin-top:46px;line-height:1.2;scroll-margin-top:calc(var(--header-h) + 20px)}
.prose h3{font-size:20px;margin-top:34px;line-height:1.3;scroll-margin-top:calc(var(--header-h) + 20px)}
/* real legal/policy content (privacy-policy.php) uses <h5> as its only
   heading level - no other page uses <h5> inside .prose yet */
.prose h5{font-size:21px;font-weight:700;margin-top:38px;line-height:1.3;color:var(--text);scroll-margin-top:calc(var(--header-h) + 20px)}
.prose a:not(.btn){color:var(--brand-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(109,14,177,.35)}
.prose a:not(.btn):hover{text-decoration-color:var(--brand)}
.prose b,.prose strong{color:var(--text);font-weight:700}
.prose ul,.prose ol{padding-left:24px;display:flex;flex-direction:column;gap:10px}
.prose li{font-size:17px;line-height:1.7;color:#33415a}
.prose li::marker{color:var(--brand)}
.prose blockquote{margin-inline:0;padding:18px 24px;border-left:4px solid var(--brand);background:var(--grad-soft);border-radius:0 14px 14px 0;font-size:19px;line-height:1.55;color:var(--text);font-family:var(--display)}
.prose blockquote p{font-size:inherit;color:inherit}
.prose figure{margin:0}
.prose pre{background:#0f172a;color:#e2e8f0;padding:20px 22px;border-radius:14px;overflow-x:auto;font-size:14px;line-height:1.65;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.prose :not(pre)>code{background:var(--bg-soft);border:1px solid var(--line);padding:2px 7px;border-radius:7px;color:var(--brand-ink)}
.prose img{border-radius:14px;border:1px solid var(--line)}
.prose figcaption{font-size:13px;color:var(--faint);text-align:center;margin-top:10px}
.prose hr{border:0;border-top:1px solid var(--line);margin:38px 0}
/* extra heading levels + financial data tables - real press-release/financial-
   results content (tpl-webpage.php) authors h4/h6 sub-headings and Bootstrap-era
   table/table-responsive/text-align classes directly in the WYSIWYG content */
.prose h4{font-size:18px;font-weight:700;margin-top:30px;line-height:1.3;color:var(--text)}
.prose h6{font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--brand-ink);margin-top:30px}
.prose .text-center{text-align:center}
.prose .text-left{text-align:left}
.prose .text-right{text-align:right}
.prose .text-normal{font-weight:400}
.prose .table-responsive{overflow-x:auto;margin-top:22px;border:1px solid var(--line);border-radius:14px}
.prose table.table{width:100%;border-collapse:collapse;font-size:14.5px}
.prose table.table th,.prose table.table td{padding:12px 16px;border-bottom:1px solid var(--line)}
.prose table.table thead th{background:var(--bg-soft);font-weight:700;color:var(--text);font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.prose table.table tbody tr:last-child td{border-bottom:0}
.prose table.table tbody tr:nth-child(odd){background:rgba(15,23,42,.015)}
/* full-width .prose override - real live reference pages for both
   tpl-webpage.php (.pr-body) and privacy-policy.php (.prose--full) run
   content the full container width, no narrow reading column. `.pr-body`
   kept as its own selector (not renamed) so tpl-webpage.php's already-
   verified markup isn't touched; `.prose--full` is the generic name for any
   future template needing the same override. */
.pr-body.prose,.prose--full{max-width:none}
/* "Don't Forget to share this post!" row - matches old theme's .share-postrow
   (bordered top/bottom, label left / icons right), real .ashare icon buttons */
.pr-share{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:40px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pr-share__label{font-size:15px;font-weight:600;color:var(--text)}
/* PDF download link - matches old theme's .pdf-link (plain text link, thin
   rule above, icon after the text - not a button) */
.pr-pdf{margin-top:28px}
.pr-pdf__link{position:relative;display:inline-flex;align-items:center;gap:10px;padding-top:20px;color:var(--brand-ink);font-size:16px;font-weight:600}
.pr-pdf__link::before{content:"";position:absolute;top:0;left:0;width:100%;max-width:270px;height:1px;background:var(--line-2)}
.pr-pdf__link .ico{width:18px;height:18px}
/* lead paragraph */
.prose__lead{font-size:19px!important;color:var(--text)!important;line-height:1.7!important}
/* callout box */
.callout{display:flex;gap:14px;padding:20px 22px;border-radius:16px;background:var(--bg-soft);border:1px solid var(--line)}
.callout__ic{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--grad-cta);color:#fff}
.callout__ic .ico{width:20px;height:20px}
.callout p{margin:0;font-size:15px;line-height:1.6}
.callout b{color:var(--text)}

/* ---- sidebar cards ---- */
.toc__list{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line)}
.toc__list a{display:block;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;font-size:13.5px;line-height:1.4;color:var(--faint);transition:color .2s,border-color .2s}
.toc__list a:hover{color:var(--brand-ink)}
.toc__list a.is-active{color:var(--brand-ink);border-left-color:var(--brand);font-weight:600}
.sharecard__row{display:flex;gap:9px;flex-wrap:wrap}

/* ---- tags ---- */
.atags{display:flex;align-items:center;flex-wrap:wrap;gap:10px;max-width:72ch;margin-top:8px}
.atags__label{font-size:13px;font-weight:600;color:var(--faint)}
.atag{font-size:13px;font-weight:600;color:var(--brand-ink);background:var(--grad-soft);border:1px solid var(--line-2);padding:7px 14px;border-radius:999px;transition:box-shadow .2s,border-color .2s}
.atag:hover{box-shadow:var(--shadow-sm);border-color:var(--brand)}

/* ---- prev / next ---- */
.anav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.anav a{display:flex;flex-direction:column;gap:6px;padding:20px 22px}
.anav__dir{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:6px}
.anav__dir .ico{width:14px;height:14px;color:var(--brand)}
.anav__t{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.32;color:var(--text)}
.anav a:hover .anav__t{color:var(--brand-ink)}
.anav--next{text-align:right}
.anav--next .anav__dir{justify-content:flex-end}

/* ---- related articles slider (corporate) ---- */
.related{padding:60px 0 84px;background:var(--bg-soft)}
.related__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.related__head .sec-kicker{margin-bottom:10px}
.related__head h2{font-size:clamp(24px,3vw,34px)}
.related__nav{display:flex;align-items:center;gap:10px;flex:none}
.relslider__arrow{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid var(--line-2);color:var(--muted);box-shadow:var(--shadow-xs);transition:color .2s,border-color .2s,transform .18s var(--ease),opacity .2s}
.relslider__arrow:hover:not(:disabled){color:var(--brand-ink);border-color:var(--brand);transform:translateY(-2px)}
.relslider__arrow:disabled{opacity:.4;cursor:not-allowed}
.relslider__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.related__all{margin-left:6px}
.relslider{overflow:hidden;margin-inline:-4px;padding:4px}
.relslider__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.relslider__track::-webkit-scrollbar{display:none}
.relslide{flex:0 0 calc((100% - 48px) / 3);scroll-snap-align:start}
@media (max-width:900px){.relslide{flex:0 0 calc((100% - 24px) / 2)}}
@media (max-width:600px){
  .relslide{flex:0 0 86%}
  .related__head{flex-direction:column;align-items:flex-start;gap:14px}
  .related__all{display:none}
}

/* ---- article responsive ---- */
@media (max-width:980px){
  .awrap__inner{grid-template-columns:1fr;gap:34px}
  .aside{position:static;flex-direction:row;flex-wrap:wrap}
  .aside>.sidecard{flex:1 1 240px}
  .aside .toc{display:none}
  .prose{max-width:none}
  .atags{max-width:none}
}
@media (max-width:560px){
  .acover{aspect-ratio:16/9}
  .abyline{gap:12px}
  .abyline__sep{display:none}
  .aside{flex-direction:column}
  .aside>.sidecard{flex:1 1 auto}
  .anav{grid-template-columns:1fr}
  .anav--next{text-align:left}
  .anav--next .anav__dir{justify-content:flex-start}
  .prose p,.prose li{font-size:16px}
}

/* ============================================================
   LEGAL PAGES — Privacy / Cookies / Disclaimer
   (privacy-policy.php template only, gated on the `page-legal`
   body class). Reuses os-banner, .awrap + .prose and the shared
   .prose__lead/.callout rules above - matches html/privacy.html,
   html/cookies.html and html/disclaimer.html exactly.
   ============================================================ */
.legal-eff{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid var(--line-2);font-size:13.5px;color:var(--muted)}
.legal-eff .ico{width:15px;height:15px;color:var(--brand)}
.legal-eff b{color:var(--text);font-weight:600}

/* banner: staggered bottom-to-top entrance (above the fold — runs on load) */
.legal-hero>*{animation:legalUp .62s var(--ease) both}
.legal-hero>*:nth-child(1){animation-delay:.04s}
.legal-hero>*:nth-child(2){animation-delay:.12s}
.legal-hero>*:nth-child(3){animation-delay:.20s}
.legal-hero>*:nth-child(4){animation-delay:.28s}
.legal-hero>*:nth-child(5){animation-delay:.36s}
@keyframes legalUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* body: narrower, centered reading column (overrides the generic full-width
   .prose--full rule above via higher specificity) + more breathing room */
.page-legal .awrap{padding:56px 0 84px}
.page-legal .prose{max-width:860px;margin-inline:auto}
@media (max-width:860px){
  .page-legal .awrap{padding:38px 0 60px}
}
@media (prefers-reduced-motion:reduce){
  .legal-hero>*{animation:none}
}

/* ============================================================
   OUR STORY PAGE  (our-story.html only)
   Scoped under .os-* — reuses tokens + .sec-head/.sec-kicker/.grad/
   .card/.btn/.reveal/.eyebrow/.marquee/.cta for full consistency.
   Colour contrast tuned to WCAG 2.1 AA (see :root notes):
     body text >= 4.5:1 · large/UI text >= 3:1 · white only on
     --grad-cta / navy #0f172a / brand solids.
   ============================================================ */

/* ---- subpage banner (dark, modern, corporate) ---- */
.os-banner{position:relative;overflow:hidden;background:var(--grad-soft);color:#fff;padding:clamp(40px,7vh,84px) 0 clamp(44px,7vh,72px)}
.os-banner .container{position:relative;z-index:1}
.os-banner__inner{max-width:760px;}
.os-banner__crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;margin-bottom:18px}
.os-banner__crumb a{color:var(--faint);transition:color .2s}
.os-banner__crumb a:hover{color:var(--brand-ink)}
.os-banner__crumb svg{width:13px;height:13px;color:var(--line-2)}
.os-banner__crumb span{color:var(--text);font-weight:600}
.os-banner__kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand);background:rgba(255,255,255,.08);border:1px solid var(--line-2);padding:6px 14px;border-radius:999px;margin-bottom:18px}
.os-banner h1{font-size:clamp(34px,5.2vw,58px);letter-spacing:-.03em;line-height:1.09;margin:0 0 16px;}
.os-banner__lead{font-size:clamp(16px,1.5vw,16px);max-width:620px;line-height:1.7}
.os-pills{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.os-pill{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--brand-ink);background:var(--grad-soft);border:1px solid var(--brand-ink);padding:9px 15px;border-radius:999px}
.os-pill .ico{width:16px;height:16px;color:var(--brand)}
.os-pills--dark .os-pill{background:rgba(255,255,255,.08);}
.os-banner__inner .hero__actions {justify-content: flex-start;}
/* ---- who we are / overview split ---- */
.os-about{padding:84px 0}
.os-about__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,60px);align-items:center}
.os-about__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);aspect-ratio:4/5}
.os-about__media img{width:100%;height:100%;object-fit:cover}
.os-about__body .sec-head{text-align:left;margin:0 0 20px;max-width:none}
.os-about__body p{margin-bottom:16px}
.os-check{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin-top:24px}
.os-check li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--text);font-weight:500}
.os-check .ico{width:20px;height:20px;color:var(--green);flex:none;margin-top:1px}

/* ---- DRC philosophy (accessible underline tabs · each group is a full D·R·C) ---- */
.os-values{padding:84px 0;background:var(--bg-soft)}
.os-drc{max-width:1000px;margin:0 auto}
/* underline tab bar (light, modern) */
.os-drc__tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:40px}
.os-drc__tab{position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 24px;background:transparent;border:0;color:var(--muted);transition:color .2s}
.os-drc__tab::after{content:"";position:absolute;left:20px;right:20px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--grad-cta);opacity:0;transform:scaleX(.3);transform-origin:center;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.os-drc__tab:hover{color:var(--brand-ink)}
.os-drc__tabic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--grad-soft);border:1px solid var(--line);color:var(--brand);flex:none;transition:background .25s,border-color .25s,color .25s}
.os-drc__tabic .ico{width:20px;height:20px}
.os-drc__tabtxt{text-align:left}
.os-drc__tabtxt b{display:block;font-family:var(--display);font-weight:600;font-size:15px;color:var(--text);line-height:1.15}
.os-drc__tabtxt small{font-size:12px;color:var(--faint)}
.os-drc__tab.is-active{color:var(--brand-ink)}
.os-drc__tab.is-active::after{opacity:1;transform:scaleX(1)}
.os-drc__tab.is-active .os-drc__tabic{background:var(--grad-cta);border-color:transparent;color:#fff}
.os-drc__tab.is-active .os-drc__tabtxt b{color:var(--brand-ink)}
/* panels */
.os-drc__panel:not(.is-active){display:none}
.os-drc__panel.is-active{animation:drcFade .4s var(--ease) both}
@keyframes drcFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.os-drc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* card with big faded corner watermark letter (old design) */
.os-drc__card{position:relative;overflow:hidden;padding:34px 32px}
.os-drc__letter{position:absolute;bottom:-26px;right:-6px;font-family:var(--display);font-weight:700;font-size:158px;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.05;pointer-events:none;user-select:none;z-index:0}
.os-drc__card h3{position:relative;z-index:1;font-size:21px;margin-bottom:12px}
.os-drc__card p{position:relative;z-index:1;font-size:14.5px;line-height:1.66}

/* ---- vision / mission / commitment ---- */
.os-vmc{padding:84px 0}
.os-vmc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.os-vmc__card{padding:32px 28px}
.os-vmc__ic{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;font-size:26px;margin-bottom:16px;background:var(--grad-soft);border:1px solid var(--line);color:var(--brand)}
.os-vmc__ic .ico{width:26px;height:26px}
.os-vmc__card h3{font-size:20px;margin-bottom:10px}
.os-vmc__card p{font-size:15px}

/* ---- movement band (navy) ---- */
.os-movement{padding:24px 0 84px}
.os-movement__box{position:relative;overflow:hidden;text-align:center;padding:clamp(40px,6vw,72px);border-radius:var(--radius-lg);background:#0f172a;box-shadow:var(--shadow-lg)}
.os-movement__box::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 15% 0%,rgba(109,14,177,.55),transparent 60%),radial-gradient(ellipse 55% 55% at 90% 100%,rgba(207,169,79,.28),transparent 60%);pointer-events:none}
.os-movement__box>*{position:relative;z-index:1}
.os-movement__tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#e9d9ff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:8px 15px;border-radius:999px;margin-bottom:18px}
.os-movement__tag .ico{width:15px;height:15px}
.os-movement__box h2{color:#fff;font-size:clamp(28px,4vw,46px);letter-spacing:-.02em}
.os-movement__box p{color:#cbd5e1;font-size:clamp(16px,1.5vw,18px);max-width:680px;margin:18px auto 0;line-height:1.7}
.os-movement__points{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 26px;margin-top:30px}
.os-movement__point{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:15px}
.os-movement__point .ico{width:20px;height:20px;color:#c4b5fd}

/* ---- journey / timeline (scroll-driven) ---- */
.os-timeline{padding:84px 0;background:var(--bg-soft)}
.os-tl{position:relative;list-style:none;display:flex;flex-direction:column;gap:36px;max-width:1040px;margin:0 auto;padding:0}
.os-tl__track{position:absolute;top:14px;bottom:14px;left:50%;width:4px;transform:translateX(-50%);border-radius:999px;background:var(--line-2);overflow:hidden;z-index:0}
.os-tl__fill{position:absolute;inset:0;transform:scaleY(var(--p,0));transform-origin:top;background:var(--grad-cta);transition:transform .12s linear}
.os-tl__item{position:relative;width:calc(50% - 32px);transition-delay:calc(var(--i,0) * .1s);transition: all 0.4s ease-in-out;}

.os-tl__item:nth-child(odd){align-self:flex-start}
.os-tl__item:nth-child(even){align-self:flex-end}
.os-tl__dot{position:absolute;top:36px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 0 0 4px rgba(109,14,177,.1);z-index:2;transform:scale(0);transition:transform .45s var(--ease) .1s}
.os-tl__item.in .os-tl__dot{transform:scale(1)}
.os-tl__item:nth-child(odd) .os-tl__dot{right:-40px}
.os-tl__item:nth-child(even) .os-tl__dot{left:-40px}
.os-tl__card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.os-tl__card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.os-tl__bar{display:block;height:4px;flex:none;background:var(--grad-cta)}
.os-tl__body{display:flex;flex-direction:column;padding:30px 32px;position:relative}
.os-tl__year{position:absolute;top:28px;right:28px;z-index:1;font-family:var(--display);font-weight:700;font-size:13px;color:#fff;background:var(--grad-cta);padding:5px 14px;border-radius:999px;letter-spacing:.02em}
.os-tl__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--grad-soft);border:1px solid var(--line);color:var(--brand);flex:none;margin-bottom:16px;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.os-tl__ic .ico{width:24px;height:24px}
.os-tl__card:hover .os-tl__ic{background:var(--grad-cta);color:#fff;border-color:transparent}
.os-tl__body h3{font-size:21px;margin-bottom:10px;padding-right:80px}
.os-tl__body p{font-size:15px;line-height:1.65;color:var(--muted);margin:0}
@media (min-width:861px){
  .os-tl__item:nth-child(odd).reveal{transform:translateX(-30px)}
  .os-tl__item:nth-child(even).reveal{transform:translateX(30px)}
  .os-tl__item.reveal.in{transform:none}
}
@media (max-width:860px){
  .os-tl__track{left:9px;transform:none}
  .os-tl__item{width:100%!important;align-self:stretch!important;padding-left:46px}
  .os-tl__item .os-tl__dot{left:3px!important;right:auto!important}
}
@media (max-width:640px){
  .os-tl__body{padding:24px 26px}
  .os-tl__body h3{padding-right:70px}
  .os-tl__year{top:24px;right:24px}
  .os-tl__dot{top:34px;width:14px;height:14px}
  .os-tl__item .os-tl__dot{left:4px!important;}
}
@media (prefers-reduced-motion:reduce){
  .os-tl__dot{transform:none!important}
  .os-tl__fill{transform:scaleY(1)!important}
}

/* ---- CEO quote (refined, editorial) ---- */
.os-quote{padding:84px 0}
.os-quote__box{position:relative;overflow:hidden;max-width:940px;margin:0 auto;text-align:center;padding:clamp(40px,6vw,72px) clamp(28px,5vw,64px);border-radius:var(--radius-lg);background:var(--grad-soft);border:1px solid var(--line)}
.os-quote__glyph{position:absolute;top:24px;left:30px;color:var(--brand);opacity:.12;pointer-events:none}
.os-quote__glyph .ico{width:96px;height:96px}
.os-quote__box blockquote{position:relative;margin:0 auto;max-width:760px;font-family:var(--display);font-weight:600;font-size:clamp(21px,2.6vw,30px);line-height:1.5;letter-spacing:-.01em;color:var(--text)}
.os-quote__rule{display:block;width:56px;height:3px;border-radius:999px;background:var(--grad-cta);margin:28px auto 22px}
.os-quote__by{display:inline-flex;align-items:center;gap:14px;text-align:left}
.os-quote__avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:var(--shadow-sm)}
.os-quote__by b{display:block;font-size:16px;color:var(--text)}
.os-quote__by small{display:block;font-size:13.5px;color:var(--muted)}

/* ---- global presence ---- */
.os-global{padding:84px 0}
.os-global__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.os-office{position:relative;padding:30px 28px}
.os-office__flag{position:absolute;top:22px;right:22px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--grad-cta);padding:5px 11px;border-radius:999px}
.os-office__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;font-size:26px;margin-bottom:16px;background:var(--grad-soft);border:1px solid var(--line);color:var(--brand)}
.os-office__ic .ico{width:26px;height:26px}
.os-office h3{font-size:20px;margin-bottom:10px}
.os-office address{font-style:normal;font-size:14.5px;color:var(--muted);line-height:1.7}

/* ---- staggered reveal (framer-motion-like cascade) ---- */
.os-vmc__grid .reveal:nth-child(2),
.os-global__grid .reveal:nth-child(2){transition-delay:.08s}
.os-vmc__grid .reveal:nth-child(3),
.os-global__grid .reveal:nth-child(3){transition-delay:.16s}

/* ============================================================
   OUR STORY — RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .os-about__grid{grid-template-columns:1fr;gap:32px}
  .os-about__media{aspect-ratio:16/10;max-width:100%}
  .os-vmc__grid,.os-global__grid,.os-drc__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .os-check{grid-template-columns:1fr}
  .os-quote__by{flex-direction:column;text-align:center;gap:10px}
  /* DRC tabs -> compact, horizontally scrollable row (like the blog catbar) */
  .os-drc__tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .os-drc__tabs::-webkit-scrollbar{display:none}
  .os-drc__tab{flex:none;padding:14px 16px;gap:9px}
  .os-drc__tabtxt small{display:none}
  .os-drc__tab::after{left:12px;right:12px}
}
@media (max-width:520px){
  .os-banner__br{display:none}
}


/* ============================================================
   CONTACT US PAGE  (contact-us.html only)
   Scoped under .cnt-* — reuses os-banner pattern + tokens.
   ============================================================ */

/* ---- contact banner ---- */
.cnt-banner{position:relative;overflow:hidden;background:var(--grad-soft);padding:clamp(40px,7vh,84px) 0 clamp(44px,7vh,72px)}
.cnt-banner .container{position:relative;z-index:1}
.cnt-banner__inner{max-width:760px;text-align:center;margin-inline:auto}
.cnt-banner__crumb{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:13px;margin-bottom:18px}
.cnt-banner__crumb a{color:var(--faint);transition:color .2s}
.cnt-banner__crumb a:hover{color:var(--brand-ink)}
.cnt-banner__crumb svg{width:13px;height:13px;color:var(--line-2)}
.cnt-banner__crumb span{color:var(--text);font-weight:600}
.cnt-banner__kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand);background:rgba(255,255,255,.08);border:1px solid var(--line-2);padding:6px 14px;border-radius:999px;margin-bottom:18px}
.cnt-banner h1{font-size:clamp(34px,5.2vw,58px);letter-spacing:-.03em;line-height:1.09;margin:0 0 16px}
.cnt-banner__lead{font-size:clamp(16px,1.5vw,18px);max-width:620px;margin-inline:auto;line-height:1.7}

/* ---- contact info cards (modern 3-col staggered) ---- */
.cnt-info{padding:84px 0;}
.cnt-info__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cnt-card{position:relative;display:flex;gap:20px;padding:24px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;overflow:hidden}
.cnt-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c);opacity:0;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease),opacity .35s}
.cnt-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--c) 20%,var(--line-2))}
.cnt-card:hover::before{opacity:1;transform:scaleX(1)}
.cnt-card__ic{display:grid;place-items:center;width:56px;height:56px;min-width:56px;border-radius:16px;font-size:26px;background:color-mix(in srgb,var(--c) 12%,#fff);border:1px solid color-mix(in srgb,var(--c) 18%,var(--line));color:var(--c);transition:background .3s,transform .3s,border-color .3s}
.cnt-card:hover .cnt-card__ic{background:color-mix(in srgb,var(--c) 18%,#fff);transform:scale(1.05);border-color:var(--c)}
.cnt-card__body{display:flex;flex-direction:column;min-width:0}
.cnt-card__body h3{font-size:18px;margin-bottom:6px}
.cnt-card__body p{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:12px}
.cnt-card__link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--brand);margin-top:auto;transition:gap .25s}
.cnt-card__link .ico{width:16px;height:16px;transition:transform .25s}
.cnt-card__link:hover{gap:10px}
.cnt-card__link:hover .ico{transform:translateX(3px)}

/* ---- form + info split (redesigned) ---- */
.cnt-form{padding:84px 0;position:relative}
.cnt-form::before{content:"";position:absolute;inset:0;background:var(--grad-soft);pointer-events:none}
.cnt-form .container{position:relative;z-index:1}
.cnt-form__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,52px);align-items:start}
.cnt-form__copy{position:sticky;top:calc(var(--header-h) + 32px)}
.cnt-form__copy .sec-kicker{margin-bottom:14px}
.cnt-form__copy h2,.cnt-form__copy h3{font-size:clamp(28px,3.6vw,40px);margin-bottom:16px;line-height:1.14}
.cnt-form__copy>p{font-size:16px;margin-bottom:28px}
.cnt-form__points{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.cnt-form__points li{display:flex;align-items:flex-start;gap:14px;font-size:15px;color:var(--text);font-weight:500;line-height:1.5}
.cnt-form__points .ico{width:22px;height:22px;color:var(--brand);flex:none;margin-top:2px}
.cnt-form__contact{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cnt-form__contact-item{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:14px;background:#fff;border:1px solid var(--line);transition:box-shadow .2s,border-color .2s}
.cnt-form__contact-item:hover{box-shadow:var(--shadow-xs);border-color:var(--line-2)}
.cnt-form__contact-item .ico{width:20px;height:20px;color:var(--brand)}
.cnt-form__label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.cnt-form__phone,.cnt-form__email{font-weight:600;font-size:16px;color:var(--brand-ink);padding-left:28px;transition:color .2s}
.cnt-form__phone:hover,.cnt-form__email:hover{color:var(--brand)}

/* ---- form card (redesigned) ---- */
.cnt-form__card{position:relative;padding:40px 36px;border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:var(--shadow)}
.cnt-form__card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;background:var(--grad);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.35}
.cnt-form__form{display:flex;flex-direction:column;gap:18px}
.cnt-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cnt-form__field{display:flex;flex-direction:column;gap:7px}
.cnt-form__field label{font-size:13.5px;font-weight:600;color:var(--text)}
.cnt-form__field label span{color:var(--brand)}
.cnt-form__field input,.cnt-form__field select,.cnt-form__field textarea{font-family:inherit;font-size:15px;padding:14px 16px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--text);transition:border-color .25s,box-shadow .25s;width:100%}
.cnt-form__field input:focus,.cnt-form__field select:focus,.cnt-form__field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(109,14,177,.10)}
.cnt-form__field textarea{resize:vertical;min-height:110px}
.cnt-form__field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='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;padding-right:44px;cursor:pointer}
.cnt-form__field input::placeholder,.cnt-form__field textarea::placeholder{color:var(--faint)}
.cnt-form__checks{display:flex;flex-direction:column;gap:12px;margin:4px 0 2px}
.cnt-form__check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:13.5px;line-height:1.55;color:var(--muted)}
.cnt-form__check input[type=checkbox]{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--brand);cursor:pointer;border-radius:4px}

/* ---- real Contact Form 7 output (this page + page-contact-us.php +
   the on-site-meetings hero form, .ons-form) ----
   The live shortcode renders its own row/col-md/input-groups markup with
   Bootstrap-style control classes (a holdover from the old theme), not the
   .cnt-form__field structure above - restyle the real output to match
   without touching the CF7 form template itself. */
.cnt-form__card .wpcf7-form,.ons-form .wpcf7-form{display:flex;flex-direction:column;gap:2px}
.cnt-form__card .wpcf7-form .row,.ons-form .wpcf7-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cnt-form__card .wpcf7-form .row .col-md-12,.ons-form .wpcf7-form .row .col-md-12,
.cnt-form__card .wpcf7-form .row .col-md-3,.ons-form .wpcf7-form .row .col-md-3{grid-column:1/-1}
.cnt-form__card .wpcf7-form .input-groups p,.ons-form .wpcf7-form .input-groups p{margin:0 0 18px;display:flex;flex-direction:column;gap:7px}
.cnt-form__card .wpcf7-form label,.ons-form .wpcf7-form label{font-size:13.5px;font-weight:600;color:var(--text)}
.cnt-form__card .wpcf7-form input.wpcf7-form-control,.ons-form .wpcf7-form input.wpcf7-form-control,
.cnt-form__card .wpcf7-form select.wpcf7-form-control,.ons-form .wpcf7-form select.wpcf7-form-control,
.cnt-form__card .wpcf7-form textarea.wpcf7-form-control,.ons-form .wpcf7-form textarea.wpcf7-form-control{font-family:inherit;font-size:15px;padding:14px 16px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--text);transition:border-color .25s,box-shadow .25s;width:100%}
.cnt-form__card .wpcf7-form input.wpcf7-form-control:focus,.ons-form .wpcf7-form input.wpcf7-form-control:focus,
.cnt-form__card .wpcf7-form select.wpcf7-form-control:focus,.ons-form .wpcf7-form select.wpcf7-form-control:focus,
.cnt-form__card .wpcf7-form textarea.wpcf7-form-control:focus,.ons-form .wpcf7-form textarea.wpcf7-form-control:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(109,14,177,.10)}
.cnt-form__card .wpcf7-form textarea.wpcf7-form-control,.ons-form .wpcf7-form textarea.wpcf7-form-control{resize:vertical;min-height:110px}
.cnt-form__card .wpcf7-form select.wpcf7-form-control,.ons-form .wpcf7-form select.wpcf7-form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='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;padding-right:44px;cursor:pointer}
.cnt-form__card .wpcf7-form .checkbox-row,.ons-form .wpcf7-form .checkbox-row{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.cnt-form__card .wpcf7-form .checkbox-row p,.ons-form .wpcf7-form .checkbox-row p{margin:0}
.cnt-form__card .wpcf7-form .wpcf7-list-item,.ons-form .wpcf7-form .wpcf7-list-item{margin:0}
.cnt-form__card .wpcf7-form .wpcf7-list-item label,.ons-form .wpcf7-form .wpcf7-list-item label{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:400;color:var(--muted);cursor:pointer}
.cnt-form__card .wpcf7-form .wpcf7-list-item input[type=checkbox],.ons-form .wpcf7-form .wpcf7-list-item input[type=checkbox]{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--brand);cursor:pointer;border-radius:4px}
.cnt-form__card .wpcf7-form .bottom-text p,.ons-form .wpcf7-form .bottom-text p{font-size:12.5px;color:var(--faint);margin:8px 0 0;line-height:1.6}
.cnt-form__card .wpcf7-form .bottom-text a,.ons-form .wpcf7-form .bottom-text a{color:var(--brand);text-decoration:underline}
.cnt-form__card .wpcf7-form .btn-row,.ons-form .wpcf7-form .btn-row{margin-top:8px}
.cnt-form__card .wpcf7-form input.wpcf7-submit,.ons-form .wpcf7-form input.wpcf7-submit{font-family:inherit;display:flex;justify-content:center;width:100%;padding:13px 22px;border:none;border-radius:12px;background:var(--grad-cta);color:#fff;font-weight:600;font-size:15px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .18s var(--ease)}
.cnt-form__card .wpcf7-form input.wpcf7-submit:hover,.ons-form .wpcf7-form input.wpcf7-submit:hover{transform:translateY(-2px)}
.cnt-form__card .wpcf7-form input.reset_btn,.ons-form .wpcf7-form input.reset_btn{display:none}
.cnt-form__card .wpcf7-response-output{margin-top:14px;padding:12px 16px;border-radius:10px;font-size:13.5px}

/* ---- office locations ---- */
.cnt-offices{padding:84px 0}
.cnt-offices__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cnt-office{position:relative;overflow:hidden;padding:0}
.cnt-office::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--grad);opacity:.6}
.cnt-office__flag{position:absolute;top:22px;right:22px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--grad-cta);padding:5px 12px;border-radius:999px;z-index:1}
.cnt-office__body{padding:32px 30px}
.cnt-office__body h3{font-size:21px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.cnt-office__body address{font-style:normal;display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--muted);line-height:1.7;margin-bottom:16px}
.cnt-office__body address .ico{width:18px;height:18px;color:var(--brand);flex:none;margin-top:3px}
.cnt-office__link{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--brand-ink);padding:7px 0;transition:color .2s,gap .2s}
.cnt-office__link:hover{color:var(--brand);gap:14px}
.cnt-office__link .ico{width:17px;height:17px;color:var(--brand);flex:none}

/* ---- contact responsive ---- */
@media (max-width:1080px){
  .cnt-info__grid{grid-template-columns:repeat(2,1fr)}
  .cnt-form__grid{grid-template-columns:1fr}
  .cnt-form__copy{position:static}
  .cnt-offices__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .cnt-offices__grid{grid-template-columns:1fr;max-width:500px;margin-inline:auto}
}
@media (max-width:640px){
  .cnt-info__grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto}
  .cnt-card{gap:16px;padding:20px}
  .cnt-card__ic{width:48px;height:48px;min-width:48px;font-size:22px;border-radius:13px}
  .cnt-form__row{grid-template-columns:1fr}
  .cnt-form__card .wpcf7-form .row,.ons-form .wpcf7-form .row{grid-template-columns:1fr}
  .cnt-form__card{padding:28px 22px}
  .cnt-form__contact{grid-template-columns:1fr}
}
@media (max-width:420px){
  .cnt-office__body{padding:24px 20px}
}

/* ============================================================
   LEADERSHIP PAGE  (leadership.html only)
   Scoped under .lead-* / .lead / .board — reuses os-banner + tokens
   + .sec-head/.sec-kicker/.grad/.card/.btn/.reveal/.cta.
   AA: role text uses --brand (9:1) / --muted (7.4:1) on white.
   ============================================================ */

/* ---- management team (photo on top · name + role BELOW the image) ---- */
.lead-team{padding:84px 0}
.lead-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.lead{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.lead:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.lead__media{position:relative;overflow:hidden;aspect-ratio:1/1;background:var(--bg-soft)}
.lead__img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s var(--ease)}
.lead:hover .lead__img{transform:scale(1.03)}
.lead__body{padding:20px 22px 22px;text-align:left}
.lead__body h3{font-size:18px;letter-spacing:-.01em;color:var(--text)}
.lead__role{display:block;color:var(--muted);font-size:13px;font-weight:600;margin-top:6px;line-height:1.5}
/* always-visible "view profile" affordance (arrow nudges on hover) */
.lead__more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--brand)}
.lead__more .ico{width:15px;height:15px;transition:transform .25s var(--ease)}
.lead:hover .lead__more .ico{transform:translateX(3px)}
.lead:focus-visible{outline:3px solid rgba(109,14,177,.5);outline-offset:3px}

/* ---- board of directors (centered, corporate) ---- */
.lead-board{padding:84px 0;background:var(--bg-soft)}
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.board{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:38px 28px;border-radius:14px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.board:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.board::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-cta);opacity:0;transition:opacity .25s var(--ease)}
.board:hover::before{opacity:1}
.board__avatar{flex:none;width:92px;height:92px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--grad-soft);box-shadow:0 0 0 5px rgba(109,14,177,.10);margin-bottom:20px}
.board__avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}
.board__avatar--ini{font-family:var(--display);font-weight:700;font-size:28px;color:var(--brand-ink)}
.board__info{min-width:0}
.board__info h3{font-size:19px;letter-spacing:-.01em}
.board__role{display:block;font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.55;max-width:26ch;margin-inline:auto}
.board__more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--brand);transition:gap .2s var(--ease)}
.board__more .ico{width:15px;height:15px;transition:transform .2s var(--ease)}
.board:hover .board__more{gap:10px}
.board:hover .board__more .ico{transform:translateX(2px)}

/* ---- staggered reveal cascade ---- */
.lead-grid .reveal:nth-child(4n+2),
.board-grid .reveal:nth-child(3n+2){transition-delay:.07s}
.lead-grid .reveal:nth-child(4n+3),
.board-grid .reveal:nth-child(3n+3){transition-delay:.14s}
.lead-grid .reveal:nth-child(4n+4){transition-delay:.21s}

/* ---- leadership responsive ---- */
@media (max-width:1080px){
  .lead-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .lead-grid{grid-template-columns:repeat(2,1fr)}
  .board-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .board-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .lead-grid{grid-template-columns:1fr}
}

/* ============================================================
   CORPORATE GOVERNANCE PAGE  (corporate-governance.html only)
   Scoped under .gov-* — reuses os-banner + .why__grid/.why__card
   + .sec-head/.os-check/.card/.cta/.reveal + tokens.
   ============================================================ */
.gov-sec{padding:84px 0}
.gov-sec--soft{background:var(--bg-soft)}

/* feature split (image + copy) */
.gov-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.gov-split__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);aspect-ratio:4/3}
.gov-split__media img{width:100%;height:100%;object-fit:cover}
.gov-split__body .sec-head{text-align:left;margin:0 0 18px;max-width:none}
.gov-split__body p{margin-bottom:16px}
.gov-badge{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-ink);background:var(--grad-soft);border:1px solid var(--line-2);padding:8px 15px;border-radius:999px;margin-bottom:20px}
.gov-badge .ico{width:16px;height:16px;color:var(--brand)}

/* numbered innovations */
.gov-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gov-num{position:relative;overflow:hidden;padding:32px 30px}
.gov-num::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-cta);opacity:0;transition:opacity .25s var(--ease)}
.gov-num:hover::before{opacity:1}
.gov-num__n{display:block;font-family:var(--display);font-weight:700;font-size:44px;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.gov-num h3{font-size:19px;margin-bottom:9px}
.gov-num p{font-size:14.5px;line-height:1.65}

/* governance staggered reveal */
.gov-nums .reveal:nth-child(3n+2){transition-delay:.08s}
.gov-nums .reveal:nth-child(3n+3){transition-delay:.16s}

@media (max-width:900px){
  .gov-split{grid-template-columns:1fr;gap:32px}
  .gov-split__media{aspect-ratio:16/10;max-width:600px}
  .gov-nums{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .gov-nums{grid-template-columns:1fr}
}

/* ---------- Social Responsibility: commitment split ---------- */
.sr-commit{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center}
.sr-commit__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);position:relative}
.sr-commit__media-inner{display:block;border-radius:var(--radius-lg);overflow:hidden;position:relative}
.sr-commit__media-inner::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);pointer-events:none}
.sr-commit__media img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}
.sr-commit__body .sec-head{margin-bottom:0}
.sr-commit__body p{font-size:15px;line-height:1.7;color:var(--muted);margin-top:16px}
.sr-commit__chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sr-commit__chip{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 18px 6px 6px;box-shadow:var(--shadow-xs);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.sr-commit__chip:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-2)}
.sr-commit__chip-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--grad-soft);color:var(--brand);flex:none}
.sr-commit__chip-ic .ico{width:15px;height:15px}
@media (max-width:860px){.sr-commit{grid-template-columns:1fr;gap:32px}}

/* ---------- Social Responsibility: pillar cards ---------- */
.sr-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.sr-pillar{display:flex;flex-direction:column;padding:34px 30px;position:relative;overflow:hidden;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.sr-pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.sr-pillar__bar{position:absolute;inset:0 auto 0 0;width:4px;background:var(--grad-cta);border-radius:0 4px 4px 0}
.sr-pillar__ic{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;margin-bottom:20px;background:var(--grad-soft);border:1px solid var(--line);color:var(--brand)}
.sr-pillar__ic .ico{width:26px;height:26px}
.sr-pillar h3{font-size:20px;margin-bottom:16px}
.sr-pillar ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.sr-pillar li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;font-weight:500;line-height:1.55;color:var(--text)}
.sr-pillar li .ico{width:18px;height:18px;color:var(--green);flex:none;margin-top:2px}
.sr-pillars .reveal:nth-child(2){transition-delay:.08s}
.sr-pillars .reveal:nth-child(3){transition-delay:.16s}
@media (max-width:900px){.sr-pillars{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ============================================================
   LISTING  (listing.html)
   Scoped under .list- / .exch- — reuses tokens + .gov-sec/.os-about.
   ============================================================ */
/* ---- listing snapshot ---- */


/* ---- exchange cards ---- */
.exch-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.exch-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow-xs);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.exch-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.exch-card__topbar{display:block;height:4px;flex:none;background:var(--grad-cta)}
.exch-card__brand{display:flex;align-items:center;gap:16px;padding:26px 28px 0}
.exch-card__badge{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:14px;background:var(--grad-cta);color:#fff;box-shadow:var(--shadow-sm)}
.exch-card__badge .ico{width:26px;height:26px}
.exch-card__info{flex:1}
.exch-card__abbr{display:block;font-family:var(--display);font-weight:700;font-size:24px;line-height:1.1;letter-spacing:-.01em;color:var(--text)}
.exch-card__full{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:3px;line-height:1.4}
.exch-card__tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green);background:rgba(22,163,74,.08);border-radius:999px;padding:5px 10px;flex:none}
.exch-card__tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);animation:exchPulse 2s var(--ease) infinite}
@keyframes exchPulse{0%{box-shadow:0 0 0 0 rgba(21,128,61,.5)}70%{box-shadow:0 0 0 8px rgba(21,128,61,0)}100%{box-shadow:0 0 0 0 rgba(21,128,61,0)}}
.exch-card__meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:22px 28px 26px}
.exch-card__meta-item{display:flex;flex-direction:column;gap:6px}
.exch-card__meta-item--wide{grid-column:1/-1}
.exch-card__meta-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.exch-card__meta-value{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.15;letter-spacing:.01em;color:var(--text)}
.exch-card__meta-value--addr{font-family:inherit;font-size:13px;font-weight:500;color:var(--text);line-height:1.55}
.exch-card__btn{border-radius:0;justify-content:center;padding:14px 28px}
.exch-card__btn .ico{transition:transform .2s var(--ease)}
.exch-card__btn:hover .ico{transform:translateX(4px)}
.exch-grid .reveal:nth-child(2){transition-delay:.1s}
@media (max-width:820px){.exch-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

/* ---- investor transparency cards ---- */
.inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
.inv-card{display:flex;flex-direction:column;padding:30px 26px;position:relative;overflow:hidden}
.inv-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad-cta);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.inv-card:hover::before{transform:scaleX(1)}
.inv-card__ic{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;margin-bottom:18px;background:var(--grad-soft);border:1px solid var(--line);color:var(--brand)}
.inv-card__ic .ico{width:27px;height:27px}
.inv-card h3{font-size:18px;margin-bottom:9px}
.inv-card p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}
.inv-grid .reveal:nth-child(2){transition-delay:.07s}
.inv-grid .reveal:nth-child(3){transition-delay:.14s}
.inv-grid .reveal:nth-child(4){transition-delay:.21s}
.inv-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:40px}
@media (max-width:900px){ .inv-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .inv-grid{grid-template-columns:1fr;max-width:360px;margin-inline:auto} }

/* ============================================================
   CAREERS PAGE  (careers.html only)
   Scoped under .car-* — reuses tokens + existing components.
   ============================================================ */

/* ---- careers hero ---- */
.car-hero{position:relative;overflow:hidden;padding:clamp(60px,10vh,100px) 0 clamp(40px,6vh,60px);background:#fff}
.car-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 75% 55% at 50% -10%,rgba(109,14,177,.07),transparent),radial-gradient(ellipse 55% 45% at 95% 100%,rgba(207,169,79,.09),transparent),radial-gradient(ellipse 45% 40% at 0% 100%,rgba(109,14,177,.05),transparent);pointer-events:none}
.car-hero__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.car-hero__orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;animation:carOrb 12s ease-in-out infinite alternate}
.car-hero__orb--1{width:500px;height:500px;background:rgba(109,14,177,.15);top:-120px;right:-80px}
.car-hero__orb--2{width:400px;height:400px;background:rgba(207,169,79,.12);bottom:-100px;left:-60px;animation-delay:-4s}
.car-hero__orb--3{width:300px;height:300px;background:rgba(6,182,212,.08);top:40%;left:50%;transform:translateX(-50%);animation-delay:-8s}
@keyframes carOrb{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,-30px) scale(1.1)}}
.car-hero .container{position:relative;z-index:1}
.car-hero__inner{max-width:860px;margin-inline:auto;text-align:center}
.car-hero__kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand);background:rgba(255,255,255,.8);border:1px solid var(--line-2);padding:6px 14px;border-radius:999px;margin-bottom:20px;backdrop-filter:blur(8px)}
.car-hero h1{font-size:clamp(40px,6vw,72px);letter-spacing:-.04em;line-height:1.06;margin:0 0 20px}
.car-hero__lead{font-size:clamp(17px,1.8vw,20px);max-width:640px;margin-inline:auto;line-height:1.7;color:var(--muted)}
.car-hero__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.car-hero__stats{display:flex;justify-content:center;align-items:stretch;gap:16px;margin-top:48px;padding:18px 24px;background:rgba(255,255,255,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,.06);flex-wrap:wrap;position:relative}
.car-hero__stat{display:flex;align-items:center;gap:14px;padding:14px 24px;background:#fff;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.04);flex:1;min-width:160px;max-width:260px;transition:transform .25s var(--ease),box-shadow .25s;position:relative}
.car-hero__stat:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(109,14,177,.10)}
.car-hero__stat-ico{display:grid;place-items:center;width:44px;height:44px;min-width:44px;border-radius:12px;background:var(--grad-soft);color:var(--brand)}
.car-hero__stat-ico svg{width:20px;height:20px}
.car-hero__stat-num{display:block;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.car-hero__stat-label{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:500}

/* ---- awards band ---- */
.car-awards{padding:32px 0;background:#fff;position:relative}
.car-awards::after{content:"";position:absolute;bottom:0;left:10%;right:10%;height:1px;background:var(--line)}
.car-awards__inner{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.car-award{display:flex;align-items:center;gap:12px;padding:8px 18px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);transition:transform .2s var(--ease),box-shadow .2s}
.car-award:hover{transform:translateY(-2px);box-shadow:var(--shadow-xs)}
.car-award__rating{display:inline-flex;align-items:center;gap:4px;color:var(--brand-ink);font-weight:700;font-size:14px}
.car-award__star{width:14px;height:14px;fill:var(--gold);color:var(--gold)}
.car-award__label{font-size:13px;font-weight:600;color:var(--muted)}
.car-award__ico{width:16px;height:16px;color:var(--brand)}

/* ---- quote ---- */
.car-quote{padding:80px 0;background:var(--bg-soft);position:relative}
.car-quote::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 0%,rgba(109,14,177,.04),transparent);pointer-events:none}
.car-quote__box{position:relative;max-width:820px;margin:0 auto;text-align:center;padding:clamp(40px,5vw,60px) clamp(28px,4vw,52px);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--line)}
.car-quote__glyph{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;background:var(--grad-cta);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px #fff}
.car-quote__glyph .ico{width:22px;height:22px}
.car-quote__box blockquote{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.2vw,26px);line-height:1.5;letter-spacing:-.01em;color:var(--text);margin:16px 0 0}
.car-quote__divider{display:block;width:40px;height:3px;border-radius:999px;background:var(--grad-cta);margin:24px auto 18px}
.car-quote__by{display:inline-flex;align-items:center;gap:12px;font-size:15px;color:var(--muted)}
.car-quote__avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad-soft);color:var(--brand-ink);font-weight:700;font-size:13px;border:2px solid var(--line-2)}
.car-quote__by b{color:var(--text)}

/* ---- work at drc ---- */
.car-work{padding:84px 0;background:#fff}
.car-work__inner{max-width:960px;margin:0 auto;text-align:center}
.car-work__body .sec-kicker{margin-bottom:14px}
.car-work__body h2{font-size:clamp(28px,4vw,44px);margin-bottom:20px}
.car-work__body p{font-size:16px;line-height:1.75;max-width:680px;margin:0 auto;color:var(--muted)}
.car-work__body p+p{margin-top:16px}
.car-work__metrics{display:flex;justify-content:center;gap:clamp(24px,4vw,56px);margin-top:44px;flex-wrap:wrap}
.car-work__metric{text-align:center;padding:20px 28px;border-radius:var(--radius);background:var(--bg-soft);border:1px solid var(--line);min-width:140px;transition:transform .25s var(--ease),box-shadow .25s}
.car-work__metric:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.car-work__metric-num{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,36px);background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.car-work__metric-label{display:block;font-size:13px;color:var(--muted);margin-top:6px;font-weight:500}

/* ---- dei section ---- */
.car-dei{padding:84px 0;background:var(--bg-soft);position:relative}
.car-dei .sec-head{margin-bottom:48px}
.car-dei__metrics{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:56px}
.car-dei__metric{display:flex;align-items:center;gap:16px;padding:20px 28px;background:#fff;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-xs);min-width:180px;flex:1;max-width:260px;transition:transform .25s var(--ease),box-shadow .25s}
.car-dei__metric:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.car-dei__metric-ico{display:grid;place-items:center;width:48px;height:48px;min-width:48px;border-radius:14px;background:var(--grad-soft);color:var(--brand)}
.car-dei__metric-ico svg{width:22px;height:22px}
.car-dei__metric-body{text-align:left}
.car-dei__metric-val{display:block;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1;color:var(--text)}
.car-dei__metric-lbl{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:500}
.car-dei__pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.car-dei__pillar{text-align:center;padding:32px 24px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);transition:transform .25s var(--ease),box-shadow .25s}
.car-dei__pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.car-dei__pillar-ic{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 16px;border-radius:12px;background:var(--grad-cta);color:#fff}
.car-dei__pillar-ic svg{width:20px;height:20px}
.car-dei__pillar h4{font-size:17px;margin-bottom:8px}
.car-dei__pillar p{font-size:14px;line-height:1.65;color:var(--muted)}

/* ---- why work with us (6 pillars) ---- */
.car-why{padding:84px 0;background:#fff}
.car-why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.car-pillar{position:relative;padding:32px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;overflow:hidden}
.car-pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-cta);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.car-pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.car-pillar:hover::before{transform:scaleX(1)}
.car-pillar__wm{position:absolute;bottom:-8px;right:4px;font-family:var(--display);font-weight:700;font-size:clamp(56px,5vw,72px);line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.06;pointer-events:none;user-select:none;z-index:0;letter-spacing:-.03em}
.car-pillar__ic{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;border-radius:14px;margin-bottom:16px;font-size:24px;background:var(--grad-soft);border:1px solid var(--line);color:var(--brand)}
.car-pillar__ic .ico{width:24px;height:24px}
.car-pillar h3{font-size:18px;margin-bottom:8px}
.car-pillar p{font-size:14.5px;line-height:1.65;color:var(--muted)}

/* ---- inclusive culture ---- */
.car-culture{padding:84px 0;background:var(--bg-soft)}
.car-culture__inner{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,5vw,64px);align-items:start}
.car-culture__intro{position:sticky;top:100px}
.car-culture__intro .sec-kicker{margin-bottom:14px}
.car-culture__intro h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:16px}
.car-culture__intro p{font-size:16px;line-height:1.75;color:var(--muted)}
.car-culture__traits{display:flex;flex-direction:column;gap:14px}
.car-culture__trait{display:flex;align-items:flex-start;gap:18px;padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;cursor:default}
.car-culture__trait:hover{transform:translateX(5px);box-shadow:var(--shadow-sm);border-color:var(--line-2)}
.car-culture__trait-ic{display:grid;place-items:center;width:48px;height:48px;min-width:48px;border-radius:14px;background:var(--grad-soft);color:var(--brand);margin-top:2px}
.car-culture__trait-ic svg{width:22px;height:22px}
.car-culture__trait-body h4{font-size:16px;margin-bottom:5px}
.car-culture__trait-body p{font-size:14px;line-height:1.6;color:var(--muted)}

/* ---- open roles ---- */
.car-roles{padding:84px 0;background:var(--bg-soft)}
.car-roles__list{display:flex;flex-direction:column;gap:14px;max-width:860px;margin:0 auto}
.car-role{display:flex;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.car-role:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--line-2)}
.car-role__bar{width:5px;flex:none;background:var(--grad-cta);opacity:.6;transition:opacity .25s}
.car-role:hover .car-role__bar{opacity:1}
.car-role__body{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;width:100%}
.car-role__info h3{font-size:18px;margin-bottom:10px;letter-spacing:-.01em}
.car-role__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.car-role__tag{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--faint);background:var(--bg-soft);padding:4px 12px 4px 10px;border-radius:999px;border:1px solid var(--line)}
.car-role__tag .ico{width:12px;height:12px;color:var(--brand)}
.car-role__info p{font-size:14px;line-height:1.65;color:var(--muted)}
.car-role__action{flex-shrink:0}
.car-role__btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--brand);padding:10px 22px;border-radius:999px;border:2px solid var(--brand);transition:color .25s,background .25s,transform .25s,box-shadow .25s;white-space:nowrap}
.car-role__btn span{display:inline-block;transition:transform .25s var(--ease)}
.car-role__btn:hover{color:#fff;background:var(--grad-cta);border-color:transparent;box-shadow:0 4px 14px rgba(109,14,177,.25)}
.car-role__btn:hover span{transform:translateX(4px)}

/* ---- fun moments / gallery ---- */
.car-fun{padding:84px 0;background:var(--bg-soft)}
.car-fun__tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-bottom:36px}
.car-fun__tab{padding:10px 22px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line-2);cursor:pointer;transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.car-fun__tab:hover{color:var(--brand-ink);border-color:var(--brand)}
.car-fun__tab.is-active{color:#fff;background:var(--grad-cta);border-color:transparent;box-shadow:var(--shadow-sm)}
.car-fun__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.car-fun__panel:not(.is-active){display:none}
.car-fun__panel.is-active{animation:carFade .35s var(--ease) both}
@keyframes carFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.car-fun__card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/11;background:var(--grad-soft);border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s;cursor:pointer;display:block}
.car-fun__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.car-fun__card img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.car-fun__card:hover img{transform:scale(1.06)}
.car-fun__card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.85) 8%,transparent 55%);display:flex;align-items:flex-end;padding:20px;z-index:1;pointer-events:none}
.car-fun__card-overlay h4{color:#fff;font-size:16px;font-weight:600;letter-spacing:-.01em}
.car-fun__card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:2;transition:transform .25s var(--ease),background .25s}
.car-fun__card-play svg{width:24px;height:24px;color:#fff;margin-left:3px}
.car-fun__card:hover .car-fun__card-play{transform:translate(-50%,-50%) scale(1.1);background:rgba(255,255,255,.3)}
.car-fun__card-label{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(15,23,42,.7);backdrop-filter:blur(4px);padding:5px 11px;border-radius:999px}

/* ---- career cta (replaced by .cta above) ---- */

/* ---- staggered reveal ---- */
@media (min-width:641px){
  .car-why__grid .reveal:nth-child(3n+2){transition-delay:.07s}
  .car-why__grid .reveal:nth-child(3n+3){transition-delay:.14s}
  .car-fun__grid .reveal:nth-child(3n+2){transition-delay:.08s}
  .car-fun__grid .reveal:nth-child(3n+3){transition-delay:.16s}
}

/* ---- careers responsive ---- */
@media (max-width:1080px){
  .car-why__grid{grid-template-columns:repeat(2,1fr)}
  .car-culture__inner{grid-template-columns:1fr 1fr;gap:32px}
  .car-dei__pillars{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .car-fun__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .car-culture__inner{grid-template-columns:1fr}
  .car-culture__intro{position:static}
  .car-dei__pillars{grid-template-columns:1fr}
  .car-hero__stats{gap:12px;padding:14px 16px;margin-top:32px}
  .car-hero__stat{padding:12px 18px;min-width:0;max-width:none;flex:1 1 calc(50% - 12px)}
  .car-role__body{flex-direction:column;align-items:stretch;gap:16px;padding:20px}
  .car-role__action{text-align:right}
}
@media (max-width:640px){
  .car-why__grid,.car-fun__grid{grid-template-columns:1fr}
  .car-hero__stats{gap:10px;padding:12px;margin-top:28px}
  .car-hero__stat{padding:10px 14px;flex:1 1 100%}
  .car-hero__stat-ico{width:36px;height:36px;min-width:36px}
  .car-hero__stat-ico svg{width:16px;height:16px}
  .car-awards__inner{gap:12px}
  .car-award{padding:6px 14px}
  .car-fun__tabs{gap:4px}
  .car-fun__tab{padding:8px 16px;font-size:13px}
  .car-work__metrics{gap:14px}
  .car-work__metric{padding:16px 20px;min-width:120px}
  .car-culture__trait{padding:18px 18px;gap:14px}
  .car-culture__trait-ic{width:40px;height:40px;min-width:40px}
  .car-culture__trait-ic svg{width:18px;height:18px}
  .car-dei__metric{padding:16px 20px;min-width:0;flex:1 1 calc(50% - 16px)}
  .car-dei__pillar{padding:24px 20px 22px}
}
@media (max-width:420px){
  .car-why__grid{grid-template-columns:1fr}
}

/* ============================================================
   Investor Relations — ir-*.html
   Download lists, document tables, accordion sections
   ============================================================ */
.ir-sec{padding:64px 0}
.ir-sec--soft{background:var(--bg-soft)}

/* ---------- Card grid ---------- */
.ir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}

/* ---------- Card (meta card in overview sidebar / card in financials grid) ---------- */
.ir-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow-xs);transition:transform .25s var(--ease),box-shadow .3s,border-color .25s}
.ir-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.ir-card h3{font-size:17px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.ir-card h3 .ico{width:22px;height:22px;color:var(--brand);flex-shrink:0}
.ir-card h4{font-size:15px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.ir-card h4 .ico{width:18px;height:18px;color:var(--brand);flex-shrink:0}
.ir-card p{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 6px}
.ir-card p strong{color:var(--text)}

/* Card meta list (overview sidebar) */
.ir-card__meta{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.ir-card__meta li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.6;color:var(--muted)}
.ir-card__meta li .ico{width:18px;height:18px;color:var(--brand);flex-shrink:0;margin-top:2px}
.ir-card__meta li a{color:var(--text);font-weight:500;word-break:break-all}
.ir-card__meta li a:hover{color:var(--brand)}

/* ---------- Download list (overview, policies, financials) ---------- */
.ir-dl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ir-dl li{margin:0}

/* Item as <li> (overview / policies) */
.ir-dl__item{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--text);transition:border-color .2s,box-shadow .2s,transform .15s var(--ease);text-decoration:none}
.ir-dl__item:hover{border-color:var(--brand);box-shadow:var(--shadow-xs);transform:translateX(4px)}
.ir-dl__item[hidden]{display:none}
/* Item as <a> (financials) */
a.ir-dl__item{display:flex;align-items:center;gap:10px;color:var(--text)}
a.ir-dl__item .ico{width:18px;height:18px;color:var(--brand);flex-shrink:0}

.ir-dl__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--grad-soft);border:1px solid var(--line);color:var(--brand);flex-shrink:0}
.ir-dl__ic .ico{width:18px;height:18px}
.ir-dl__label{margin-right:auto;font-size:14px;font-weight:500;color:var(--text)}
.ir-dl__tag{font-size:11px;font-weight:600;color:var(--muted);background:var(--bg-soft);padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.ir-dl__btn{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--brand);border:1px solid var(--line);background:#fff;transition:background .15s,border-color .15s;flex-shrink:0;text-decoration:none}
.ir-dl__btn:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.ir-dl__btn .ico{width:16px;height:16px}

/* Download list scheme/shareholders (legacy .ir-dl__link style) */
.ir-dl__link{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--text);transition:border-color .2s,box-shadow .2s,transform .15s var(--ease)}
.ir-dl__link:hover{border-color:var(--brand);box-shadow:var(--shadow-xs);transform:translateX(4px)}
.ir-dl__link .ico{width:20px;height:20px;color:var(--brand);flex-shrink:0}
.ir-dl__link span{margin-right:auto}
.ir-dl__link small{font-size:12px;color:var(--muted);font-weight:400;white-space:nowrap}
.ir-dl--compact{gap:8px}
.ir-dl--compact .ir-dl__link{padding:10px 14px;font-size:13px}

/* ---------- Announcements listing (non-collapsible) ---------- */
.ir-accord{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:10px; align-items: flex-start;}
.ir-accord__item{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow-sm);position:relative}
.ir-accord__head{display:flex;align-items:center;gap:12px;padding:18px 24px;font-weight:600;font-size:15px;user-select:none;list-style:none;border-radius:var(--radius) var(--radius) 0 0;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.ir-accord__head .ico{width:20px;height:20px;color:var(--brand);flex-shrink:0}
.ir-accord__body{padding:16px 24px 20px;display:grid;gap:8px}
.ir-accord__link{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;color:var(--brand);text-decoration:none;transition:background .2s;background:var(--bg-soft);border:1px solid var(--line);width:fit-content}
.ir-accord__link:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.ir-accord__link .ico{width:16px;height:16px;flex-shrink:0}

/* ---------- Press release cards ---------- */
.ir-pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ir-pr-card.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-xs);transition:transform .25s var(--ease),box-shadow .3s,border-color .25s}
.ir-pr-card.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.ir-pr-card__date{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--brand);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.ir-pr-card__date .ico{width:14px;height:14px;color:var(--brand);flex-shrink:0}
.ir-pr-card.card h3{font-size:17px;margin-bottom:6px}
.ir-pr-card.card p{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:14px}
.ir-pr-card__link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--brand);text-decoration:none}
.ir-pr-card__link .ico{width:16px;height:16px;transition:transform .2s var(--ease)}
.ir-pr-card__link:hover .ico{transform:translateX(3px)}

/* ---------- Split layout (overview, odr) — modern asymmetric ---------- */
.ir-split{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
.ir-split__body{display:grid;gap:18px}
.ir-split__body h2{font-size:clamp(24px,3vw,34px);margin-bottom:0;color:var(--text);letter-spacing:-.01em}
.ir-split__body p{font-size:16px;line-height:1.75;margin:0;color:var(--text)}
.ir-split__body .btn{margin-top:6px}
.ir-split__body .btn .ico{width:18px;height:18px}
.ir-split__aside{border-radius:var(--radius);padding:0;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column}
.ir-split__aside-head{background:var(--grad-cta);padding:20px 26px;display:flex;align-items:center;gap:12px}
.ir-split__aside-head .ico{width:22px;height:22px;color:#fff;flex-shrink:0}
.ir-split__aside-head h3{font-size:17px;font-weight:700;color:#fff;margin:0}
.ir-split__aside-body{padding:26px;display:grid;gap:24px}
.ir-split__aside p{font-size:15px;line-height:1.65;color:var(--text);margin:0}
.ir-split__aside strong{color:var(--text)}
.ir-split__aside a{color:var(--brand);font-weight:600}
.ir-split__aside a:hover{text-decoration:underline}
/* Contact block inside aside (overview) */
.ir-split__aside .ir-card{padding:22px 24px;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px}
.ir-split__aside .ir-card + .ir-card{margin-top:0}
.ir-split__aside .ir-card h4{font-size:16px;margin-bottom:16px;display:flex;align-items:center;gap:10px;color:var(--text)}
.ir-split__aside .ir-card h4 .ico{width:20px;height:20px;color:var(--brand);flex-shrink:0}
.ir-split__aside .ir-card h4 ~ *{padding-left:30px}
.ir-split__aside .ir-card p{font-size:14px;color:var(--text);line-height:1.55;margin-bottom:6px}
.ir-split__aside .ir-card p strong{color:var(--text);font-weight:700}
.ir-split__aside .ir-card .ir-card__meta{margin-top:12px;display:grid;gap:10px}
.ir-split__aside .ir-card .ir-card__meta li{font-size:14px;line-height:1.5;gap:10px;color:var(--text);display:flex;align-items:flex-start;padding:0}
.ir-split__aside .ir-card .ir-card__meta li .ico{width:16px;height:16px;color:var(--brand);flex-shrink:0;margin-top:3px}
/* Location items: icon+label on one row, address below */
.ir-split__aside .ir-card .ir-card__meta li.ir-meta-loc{flex-direction:column;align-items:stretch;gap:2px}
.ir-split__aside .ir-card .ir-card__meta li.ir-meta-loc .ir-meta-loc__head{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:var(--text)}
.ir-split__aside .ir-card .ir-card__meta li.ir-meta-loc .ir-meta-loc__head .ico{width:16px;height:16px;color:var(--brand);flex-shrink:0;margin-top:0}
.ir-split__aside .ir-card .ir-card__meta li.ir-meta-loc .ir-meta-loc__addr{font-size:14px;color:var(--text);padding-left:26px;line-height:1.5}
/* Aside list (odr benefits) — direct child only */
.ir-split__aside-body > ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ir-split__aside-body > ul li{font-size:15px;color:var(--text);display:flex;align-items:center;gap:12px;font-weight:500;padding:0}
.ir-split__aside-body > ul li::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--brand);flex-shrink:0;box-shadow:0 0 0 3px rgba(109,14,177,.12)}

/* Split list (overview checkmark list) */
.ir-split__features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ir-split__features li{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg-soft);border-radius:var(--radius);font-size:14px;line-height:1.4;color:var(--text)}
.ir-split__features li .ico{width:18px;height:18px;color:var(--brand);flex-shrink:0;margin-top:0}

/* ---------- ODR grid (odr page, split redesign) ---------- */
.odr-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:36px;align-items:start}
.odr-grid__tag{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand);border:1px solid var(--line-2);padding:6px 14px;border-radius:999px;margin-bottom:14px}
.odr-grid__text h2{font-size:clamp(26px,3.2vw,36px);margin-bottom:16px;color:var(--text);letter-spacing:-.01em}
.odr-grid__text p{font-size:16px;line-height:1.75;margin-bottom:18px;color:var(--text)}
.odr-grid__text .btn{margin-top:8px}
.odr-grid__benefits h3{font-size:18px;font-weight:700;color:var(--text);margin-bottom:16px}
.odr-grid__cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.odr-grid__card{display:flex;align-items:center;gap:10px;padding:16px 18px;background:var(--bg-soft);border-radius:var(--radius);font-size:14px;line-height:1.35;color:var(--text);font-weight:500;transition:transform .2s,box-shadow .2s;cursor:default}
.odr-grid__card:hover{transform:translateY(-2px);box-shadow:var(--shadow-xs)}
.odr-grid__card .ico{width:20px;height:20px;color:var(--brand);flex-shrink:0}

/* ---------- ODR assistance ---------- */
.odr-help{display:flex;align-items:center;gap:24px;padding:28px 32px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.odr-help__ic{flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--bg-soft);color:var(--brand)}
.odr-help__ic .ico{width:22px;height:22px}
.odr-help__body{flex:1;min-width:0}
.odr-help__body h2{font-size:18px;margin-bottom:4px;color:var(--text)}
.odr-help__body p{font-size:15px;color:var(--muted);margin:0}
.odr-help .btn{flex:none}

@media (max-width:860px){
  .odr-grid{grid-template-columns:1fr;gap:28px}
  .odr-grid__cards{grid-template-columns:1fr 1fr}
  .odr-grid__card{padding:14px 16px}
  .odr-help{flex-wrap:wrap;gap:16px;padding:24px 22px}
  .odr-help__body{flex:1 1 100%}
  .ir-split{grid-template-columns:1fr;gap:28px}
  .ir-card{padding:26px 20px}
  .ir-dl__item{padding:12px 14px;gap:10px}
  .ir-accord__head{padding:14px 18px;font-size:14px}
  .ir-accord__body{padding:12px 18px 18px}
  .ir-pr-card.card{padding:20px 18px}
  .ir-tabs{gap:6px}
  .ir-tabs__btn{padding:6px 14px;font-size:12px}
  .ir-pr-grid{grid-template-columns:1fr 1fr}
  .ir-split__body{padding:22px 20px}
  .ir-split__features{grid-template-columns:1fr}
  .ir-split__aside-head{padding:16px 20px}
  .ir-split__aside-body{padding:20px}
  .ir-split__aside .ir-card{padding:18px 18px}
}
@media (max-width:480px){
  .ir-grid{grid-template-columns:1fr}
  .ir-pr-grid{grid-template-columns:1fr}
  .ir-dl{grid-template-columns:1fr}
  .ir-accord{grid-template-columns:1fr}
  .ir-dl__label{font-size:13px}
}

/* ---------- Year filter tabs ---------- */
.ir-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.ir-tabs__btn{padding:7px 18px;border-radius:999px;font-size:13px;font-weight:600;background:#fff;border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:all .2s;font-family:inherit}
.ir-tabs__btn:hover{border-color:var(--brand);color:var(--brand)}
.ir-tabs__btn.is-active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(109,14,177,.25)}

/* ---------- Financials document library (sidebar + search) ---------- */
.ir-fin{display:grid;grid-template-columns:264px 1fr;gap:24px;margin-top:32px;align-items:start}

/* Sidebar */
.ir-fin__side{position:sticky;top:calc(var(--header-h) + 16px)}
.ir-fin__side-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 12px 4px}
.ir-fin__mobile-sel{display:none}
.ir-fin__cats{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ir-fin__cat{width:100%;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;background:transparent;border:1px solid transparent;color:var(--muted);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left;transition:background .2s,color .2s,border-color .2s}
.ir-fin__cat-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--bg-soft);color:var(--brand);flex-shrink:0;transition:background .2s,color .2s}
.ir-fin__cat-ic .ico{width:18px;height:18px}
.ir-fin__cat-label{flex:1;min-width:0}
.ir-fin__cat-count{font-size:12px;font-weight:700;color:var(--faint);background:var(--bg-soft);border-radius:999px;padding:2px 9px;transition:background .2s,color .2s}
.ir-fin__cat:hover{background:var(--bg-soft);color:var(--text)}
.ir-fin__cat.is-active{background:var(--grad-soft);border-color:color-mix(in srgb,var(--brand) 22%,transparent);color:var(--brand-ink)}
.ir-fin__cat.is-active .ir-fin__cat-ic,.ir-fin__cat.is-active .ir-fin__cat-count{background:var(--brand);color:#fff}

/* Main panel */
.ir-fin__main{min-width:0}
.ir-fin__panel[hidden]{display:none}
.ir-fin__panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.ir-fin__panel-title{display:flex;align-items:center;gap:10px;margin:0;font-size:18px;font-weight:700;color:var(--text)}
.ir-fin__panel-title .ico{width:20px;height:20px;color:var(--brand)}
.ir-fin__years{display:flex;flex-wrap:wrap;gap:8px}
.ir-fin__year{padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;background:#fff;border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:all .2s;font-family:inherit}
.ir-fin__year:hover{border-color:var(--brand);color:var(--brand)}
.ir-fin__year.is-active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(109,14,177,.25)}

/* Document rows use the shared .ir-dl / .ir-dl__item component for project-wide consistency */
.ir-fin__empty{padding:32px;text-align:center;color:var(--muted);background:var(--bg-soft);border-radius:12px;font-size:14px}

@media (max-width:860px){
  .ir-fin{grid-template-columns:1fr;gap:18px}
  .ir-fin__side{position:static}
  .ir-fin__side-label,.ir-fin__cats{display:none}
  .ir-fin__mobile-sel{display:block;width:100%;padding:12px 44px 12px 14px;border:1px solid var(--line);border-radius:12px;font-family:inherit;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;appearance:none;-webkit-appearance:none;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d0eb1' stroke-width='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}
}
@media (max-width:520px){
  .ir-fin__panel-title{font-size:16px}
}

/* ---------- Case studies (listing) ---------- */
/* Filter bar: two labelled groups */
.cs-filterbar{display:grid;gap:18px;padding:22px 24px;margin-bottom:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}
.cs-filtergroup{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
.cs-filtergroup + .cs-filtergroup{padding-top:18px;border-top:1px solid var(--line)}
.cs-filtergroup__label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding-top:8px}
.cs-filtergroup__label .ico{width:15px;height:15px;color:var(--brand)}
.cs-chips,.cs-tags{display:flex;flex-wrap:wrap;gap:9px}
/* Industry chips — filled pills with icon */
.cs-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);cursor:pointer;transition:color .2s,background .2s,border-color .2s,box-shadow .2s,transform .15s var(--ease)}
.cs-chip .ico{width:16px;height:16px;color:var(--brand);transition:color .2s}
.cs-chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.cs-chip.is-active{background:var(--grad-cta);border-color:transparent;color:#fff;box-shadow:0 6px 16px -6px rgba(109,14,177,.5)}
.cs-chip.is-active .ico{color:#fff}
/* Technology tags — compact # pills, multi-select */
.cs-tag{position:relative;padding:6px 13px 6px 22px;border-radius:8px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.cs-tag::before{content:"#";position:absolute;left:11px;color:var(--brand);font-weight:700;opacity:.7}
.cs-tag:hover{border-color:var(--brand);color:var(--brand-ink)}
.cs-tag.is-active{background:color-mix(in srgb,var(--brand) 10%,#fff);border-color:var(--brand);color:var(--brand-ink)}
.cs-tag.is-active::before{opacity:1}

/* Result bar */
.cs-resultbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;min-height:20px}
.cs-count{font-size:14px;font-weight:600;color:var(--muted)}
.cs-clear{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:600;color:var(--brand);background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:8px;transition:color .2s}
.cs-clear[hidden]{display:none}
.cs-clear .ico{width:14px;height:14px}
.cs-clear:hover{color:var(--brand-ink);text-decoration:underline}

/* Sticky category bar (Industry only, real case_study_cat terms) */
.cs-catbar{position:sticky;top:var(--header-h);z-index:40;background:rgba(255,255,255,.88);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.cs-catbar__inner{display:flex;align-items:center;gap:10px;height:60px}
.cs-catbar__scroll{flex:1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.cs-catbar__scroll::-webkit-scrollbar{display:none}
.cs-cat{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted);background:transparent;border:1px solid transparent;text-decoration:none;white-space:nowrap;transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.cs-cat .ico{width:15px;height:15px;color:var(--brand);transition:color .2s}
.cs-cat:hover{color:var(--brand-ink);background:color-mix(in srgb,var(--brand) 6%,#fff);border-color:color-mix(in srgb,var(--brand) 18%,#fff)}
.cs-cat.is-active{color:#fff;background:var(--grad-cta);border-color:transparent;box-shadow:0 4px 14px -5px rgba(109,14,177,.5)}
.cs-cat.is-active .ico{color:#fff}
.cs-catbar__arrow{flex:none;width:34px;height:34px;display:none;place-items:center;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.cs-catbar__arrow:hover{color:var(--brand-ink);border-color:var(--brand);background:#fff}
.cs-catbar__arrow svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cs-catbar__arrow.show{display:grid}
.cs-catbar__meta{flex:none;display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--line)}
.cs-catbar__count{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.cs-catbar__clear{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:13px;font-weight:600;color:var(--brand);text-decoration:none;border-radius:8px;padding:4px 6px;transition:color .2s}
.cs-catbar__clear .ico{width:13px;height:13px}
.cs-catbar__clear:hover{color:var(--brand-ink);text-decoration:underline}

/* Case studies section + 3-up card grid */
.cs-sec{padding:48px 0 84px}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:40px}

.cs-card{display:flex;flex-direction:column;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs);transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.cs-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--brand) 28%,var(--line))}
.cs-card--no-media .cs-card__body{padding-top:24px}
.cs-card__frame{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft)}
.cs-card__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.cs-card:hover .cs-card__frame img{transform:scale(1.06)}
.cs-card__badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;background:var(--bc,var(--brand));color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:999px;z-index:2;white-space:nowrap}
.cs-card__badge .ico{width:11px;height:11px;flex-shrink:0}
.cs-card__body{display:flex;flex-direction:column;gap:9px;padding:18px 20px 20px;flex:1}
.cs-card__title{margin:0;font-size:clamp(15px,1.5vw,18px);line-height:1.35;font-weight:700;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-card__title a{color:var(--text);text-decoration:none;transition:color .2s}
.cs-card:hover .cs-card__title a{color:var(--brand)}
.cs-card__desc{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cs-card__stats{display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 0;padding:0;list-style:none}
.cs-card__stats li{display:flex;flex-direction:column;line-height:1.25}
.cs-card__stats b{font-family:var(--display);font-size:15px;font-weight:700;color:var(--brand-ink)}
.cs-card__stats span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.cs-card__stack{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:8px}
.cs-card__stack span{font-size:11px;font-weight:600;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);border-radius:5px;padding:2px 9px}
.cs-card__links{display:flex;flex-wrap:wrap;gap:16px}
.cs-card__link{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--brand);text-decoration:none;margin-top:4px;transition:gap .2s}
.cs-card__link .ico{width:14px;height:14px;transition:transform .2s}
.cs-card:hover .cs-card__link{gap:10px}
.cs-card:hover .cs-card__link .ico{transform:translateX(3px)}

/* Featured card - one editorially-flagged case study, full-width hero treatment */
.cs-card.is-featured{grid-column:1/-1;min-height:460px;justify-content:flex-end}
.cs-card.is-featured .cs-card__frame{position:absolute;inset:0;aspect-ratio:unset;height:100%}
.cs-card.is-featured .cs-card__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,2,22,.94) 0%,rgba(8,2,22,.52) 46%,rgba(0,0,0,.04) 100%);z-index:1;pointer-events:none}
.cs-card.is-featured::before{content:"Featured";position:absolute;top:22px;right:22px;z-index:4;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);padding:5px 13px;border-radius:999px}
.cs-card.is-featured .cs-card__badge{top:22px;left:22px;font-size:11.5px;padding:5px 14px;z-index:4}
.cs-card.is-featured .cs-card__body{position:relative;z-index:3;padding:36px 44px 40px;background:none;flex:none;gap:12px}
.cs-card.is-featured .cs-card__title{font-size:clamp(22px,2.7vw,34px);-webkit-line-clamp:2;color:#fff}
.cs-card.is-featured .cs-card__title a{color:#fff}
.cs-card.is-featured:hover .cs-card__title a{color:#c084fc}
.cs-card.is-featured .cs-card__desc{font-size:15.5px;color:rgba(255,255,255,.7);-webkit-line-clamp:2;max-width:66ch}
.cs-card.is-featured .cs-card__stats b{color:#fff}
.cs-card.is-featured .cs-card__stats span{color:rgba(255,255,255,.55)}
.cs-card.is-featured .cs-card__stack span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.72)}
.cs-card.is-featured .cs-card__link{color:#c084fc}
.cs-card.is-featured:hover{border-color:rgba(109,14,177,.5)}
@media (max-width:820px){
  .cs-card.is-featured{min-height:380px}
  .cs-card.is-featured .cs-card__body{padding:26px 28px 32px}
  .cs-card.is-featured .cs-card__desc{display:none}
}
@media (max-width:620px){
  .cs-card.is-featured{min-height:300px}
  .cs-card.is-featured .cs-card__body{padding:18px 18px 22px;gap:8px}
  .cs-card.is-featured .cs-card__title{font-size:clamp(18px,4.5vw,24px)}
}

.cs-sec .pager{margin-top:0}
#cases{scroll-margin-top:calc(var(--header-h) + 60px)}

.cs-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.cs-empty[hidden]{display:none}
.cs-empty .ico{width:40px;height:40px;color:var(--faint);margin-bottom:12px}
.cs-empty h3{margin:0 0 6px;font-size:18px;color:var(--text)}
.cs-empty p{margin:0;font-size:14px}

@media (max-width:1080px){.cs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  .cs-filtergroup{grid-template-columns:1fr;gap:10px}
  .cs-filtergroup__label{padding-top:0}
  .cs-catbar__meta{display:none}
}
@media (max-width:620px){.cs-grid{grid-template-columns:1fr}}
@media (max-width:520px){
  .cs-filterbar{padding:18px 16px}
  .cs-chip{padding:8px 13px;font-size:12.5px}
}

/* ---------- Hire developers page ---------- */
/* Hero */
.hire-hero{padding:100px 0 60px;position:relative;overflow:hidden}
.hire-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 6%,#fff),color-mix(in srgb,var(--gold) 4%,#fff));pointer-events:none}
.hire-hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;position:relative}
.hire-hero__text{position:relative;max-width:640px}
.hire-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,#fff);padding:5px 14px;border-radius:999px;margin-bottom:18px}
.hire-hero h1{font-size:clamp(32px,4.2vw,48px);margin-bottom:18px;color:var(--text);letter-spacing:-.02em;line-height:1.15}
.hire-hero__text h5{font-size:17px;font-weight:400;line-height:1.7;color:var(--muted);margin:0 0 28px;max-width:540px}
.hire-hero__lead{font-size:17px;line-height:1.7;color:var(--muted);margin-bottom:28px;max-width:540px}
.hire-hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.hire-hero__stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.hire-stat{text-align:center;padding:22px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs)}
.hire-stat__num{display:block;font-size:clamp(22px,2.4vw,28px);font-weight:700;color:var(--text);letter-spacing:-.01em;margin-bottom:4px}
.hire-stat__label{font-size:13px;color:var(--muted);font-weight:500}
.hire-stat--brand{background:var(--grad-cta);border-color:transparent}
.hire-stat--brand .hire-stat__num{color:#fff}
.hire-stat--brand .hire-stat__label{color:rgba(255,255,255,.8)}
/* Services */
.hire-srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hire-srv{padding:28px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:transform .28s var(--ease),box-shadow .28s,border-color .28s}
.hire-srv:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.hire-srv__ic{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--grad-soft);color:var(--brand);margin-bottom:18px}
.hire-srv__ic .ico{width:24px;height:24px}
.hire-srv h3{font-size:18px;margin-bottom:10px;color:var(--text)}
.hire-srv p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}
.hire-srv--wide{grid-column:span 2}
/* CTA band */
.hire-cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px 40px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.hire-cta-band__text h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:8px;color:var(--text)}
.hire-cta-band__text p{font-size:15px;color:var(--muted);margin:0;max-width:560px}
/* Beyond hiring */
.hire-beyond-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hire-beyond{padding:28px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);position:relative;overflow:hidden}
.hire-beyond__num{font-family:var(--display);font-size:clamp(40px,3.6vw,56px);font-weight:700;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.15;margin-bottom:8px;letter-spacing:-.03em}
.hire-beyond__ic{position:absolute;top:24px;right:22px;width:30px;height:30px;opacity:.55}
.hire-beyond h3{font-size:17px;margin-bottom:10px;color:var(--text)}
.hire-beyond p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}
/* Process steps */
.hire-steps{display:flex;align-items:flex-start;gap:0;justify-content:center}
.hire-step{text-align:center;flex:1;max-width:220px;padding:0 12px}
.hire-step__ic{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--grad-cta);color:#fff;margin:0 auto 16px;box-shadow:0 4px 16px rgba(109,14,177,.2)}
.hire-step__ic .ico{width:24px;height:24px}
.hire-step h3{font-size:16px;margin-bottom:8px;color:var(--text)}
.hire-step p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}
.hire-step__arrow{flex:none;display:grid;place-items:center;padding:0 8px;margin-top:28px;color:var(--line-2)}
.hire-step__arrow .ico{width:20px;height:20px}
/* Why DRC */
.hire-why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.hire-why{text-align:center;padding:28px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}
.hire-why__ic{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--grad-soft);color:var(--brand);margin:0 auto 14px}
.hire-why__ic .ico{width:22px;height:22px}
.hire-why h3{font-size:16px;margin-bottom:8px;color:var(--text)}
.hire-why p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}

/* ---- Why DRC — light feature band with magazine-style bento ---- */
.ir-sec--why{position:relative;overflow:hidden;background:linear-gradient(155deg,#efe6fb 0%,#f4ecfa 45%,#faf1e6 100%);padding:clamp(64px,8vh,88px) 0}
.ir-sec--why::before{content:"";position:absolute;top:-130px;left:-110px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(109,14,177,.16),transparent 70%);pointer-events:none}
.ir-sec--why::after{content:"";position:absolute;bottom:-150px;right:-120px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(207,169,79,.20),transparent 70%);pointer-events:none}
.ir-sec--why .container{position:relative;z-index:1}
.ir-sec--why .hire-why-grid{gap:18px}
/* base card */
.ir-sec--why .hire-why{position:relative;overflow:hidden;text-align:left;padding:28px 26px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px -22px rgba(15,23,42,.5);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.ir-sec--why .hire-why > *{position:relative;z-index:1}
.ir-sec--why .hire-why:hover{transform:translateY(-6px);box-shadow:0 22px 46px -24px rgba(109,14,177,.45);border-color:rgba(109,14,177,.25)}
.ir-sec--why .hire-why__ic{width:52px;height:52px;border-radius:14px;margin:0 0 16px;background:var(--grad-soft);color:var(--brand);border:1px solid rgba(109,14,177,.15)}
.ir-sec--why .hire-why__ic .ico{width:24px;height:24px}
.ir-sec--why .hire-why h3{font-size:17px;margin-bottom:10px;color:var(--text);letter-spacing:-.01em}
.ir-sec--why .hire-why p{font-size:13.5px;line-height:1.6;color:var(--muted)}
/* hero card — first reason, bold brand gradient */
.ir-sec--why .hire-why:first-child{background:linear-gradient(150deg,#6d0eb1 0%,#8b2fd6 52%,#cfa94f 145%);border:0;display:flex;flex-direction:column;justify-content:center;box-shadow:0 24px 52px -24px rgba(109,14,177,.7)}
.ir-sec--why .hire-why:first-child::after{content:"";position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);z-index:0}
.ir-sec--why .hire-why:first-child .hire-why__ic{width:60px;height:60px;background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.32)}
.ir-sec--why .hire-why:first-child h3{color:#fff;font-size:clamp(22px,2.3vw,30px)}
.ir-sec--why .hire-why:first-child p{color:rgba(255,255,255,.88);font-size:15px;line-height:1.65}
.ir-sec--why .hire-why:first-child:hover{transform:translateY(-6px);box-shadow:0 32px 62px -24px rgba(109,14,177,.85)}
/* bento: tall hero on the left, 2×2 white cards on the right (desktop, exactly 5 cards) */
@media (min-width:961px){
  .ir-sec--why .hire-why-grid{grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:1fr}
  .ir-sec--why .hire-why:first-child{grid-row:1 / span 2;grid-column:1}
}
/* Intro */
.hire-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hire-intro__img img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow);display:block}
.hire-intro__text h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:18px}
.hire-intro__text p{font-size:15px;line-height:1.7;color:var(--muted);margin-bottom:20px}
.hire-intro__checks{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px}
.hire-intro__checks li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text)}
.hire-intro__checks li .ico{width:20px;height:20px;color:var(--brand);flex:none}
/* Why Choose Us */
.hire-value-grid{display:grid;gap:20px;max-width:900px;margin:0 auto}
.hire-value{display:flex;gap:20px;padding:28px 30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}
.hire-value__num{font-family:var(--display);font-size:22px;font-weight:700;width:52px;height:52px;min-width:52px;display:grid;place-items:center;border-radius:50%;background:var(--grad-cta);color:#fff;line-height:1}
.hire-value__body h3{font-size:18px;margin-bottom:8px;color:var(--text)}
.hire-value__body p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}

@media (max-width:960px){
  .hire-hero__inner{grid-template-columns:1fr;gap:32px}
  .hire-hero{padding:80px 0 48px}
  .hire-srv-grid{grid-template-columns:1fr 1fr}
  .hire-beyond-grid{grid-template-columns:1fr 1fr}
  .hire-why-grid{grid-template-columns:repeat(3,1fr)}
  .hire-intro{grid-template-columns:1fr;gap:32px}
  .hire-steps{flex-wrap:wrap;gap:24px}
  .hire-step{flex:1 1 180px;max-width:none}
  .hire-step__arrow{display:none}
}
@media (max-width:640px){
  .hire-hero__stats{grid-template-columns:1fr 1fr}
  .hire-srv-grid{grid-template-columns:1fr}
  .hire-beyond-grid{grid-template-columns:1fr}
  .hire-why-grid{grid-template-columns:1fr 1fr}
  .hire-value{flex-direction:column;align-items:center;text-align:center;padding:24px 20px}
  .hire-value__num{margin:0 auto}
  .hire-cta-band{flex-direction:column;text-align:center;padding:28px 24px}
  .hire-hero__actions{flex-direction:column}
  .hire-hero__actions .btn{width:100%;justify-content:center}
  .hire-stat{padding:18px 12px}
}

/* ============================================================
   CORPORATE GOVERNANCE PAGE — scoped under .page-gov
   Does NOT affect other pages.
   ============================================================ */
.page-gov{--g-svg-light:#ddd6fe;--g-radius:20px}
.page-gov .gov-sec{padding:100px 0}
.page-gov .gov-sec--soft{background:var(--bg-soft)}
/* 1. PRINCIPLES — shield crest grid */
.page-gov .gov-crest__intro{max-width:720px;margin:0 auto 46px;text-align:center}
.page-gov .gov-crest__intro h3{margin-top:34px}
.page-gov .gov-crest__intro h3:first-child{margin-top:0}
.page-gov .gov-crest__intro .prose{margin-inline:auto}
.page-gov .gov-crest{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;max-width:100%;margin:0 auto;position:relative}
.page-gov .gov-crest__item{text-align: center;position:relative;padding:38px 32px 32px;border-radius:var(--g-radius);background:var(--bg);border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s;overflow:hidden}
.page-gov .gov-feature__media{height:100%}
.page-gov .gov-crest__item:hover{transform:translateY(-6px);box-shadow:0 24px 64px rgba(124,58,237,.1)}
.page-gov .gov-crest__ring{position:relative;z-index:1;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;margin:0 auto 20px auto;border:2px solid var(--g-svg-light);color:var(--violet);font-size:24px;transition:border-color .3s,color .3s,background .3s,transform .3s}
.page-gov .gov-crest__item:hover .gov-crest__ring{border-color:var(--violet);background:rgba(124,58,237,.05);transform:scale(1.08)}
.page-gov .gov-crest__ring .ico{width:24px;height:24px}
.page-gov .gov-crest__item h3{position:relative;z-index:1;font-size:20px;margin-bottom:10px;color:var(--text)}
.page-gov .gov-crest__item p{position:relative;z-index:1;font-size:14.5px;line-height:1.65;color:var(--faint);margin:0}
.page-gov .gov-crest__tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);margin-bottom:12px;position:relative;z-index:1}
.page-gov .gov-crest__tag svg{width:14px;height:14px}

/* 2. ELEVATING PEOPLE — clean split */
.page-gov .gov-feature{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;background:var(--bg);border-radius:var(--g-radius);overflow:hidden;box-shadow:0 20px 60px rgba(124,58,237,.08);border:1px solid var(--line)}
.page-gov .gov-feature__media{position:relative;min-height:420px;overflow:hidden;background:var(--bg-soft)}
.page-gov .gov-feature__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}
.page-gov .gov-feature:hover .gov-feature__media img{transform:scale(1.05)}
.page-gov .gov-feature__media::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent 40%,rgba(255,255,255,.92) 100%);pointer-events:none}
.page-gov .gov-feature__body{padding:44px 48px 44px 36px;display:flex;flex-direction:column;justify-content:center}
.page-gov .gov-feature__body .sec-head{text-align:left;margin:0 0 14px;max-width:none}
.page-gov .gov-feature__body>p{font-size:15px;line-height:1.75;color:var(--faint);margin-bottom:0}


/* 3. ETHICS — values grid */
.page-gov .gov-ethics__intro{max-width:720px;margin:0 auto 46px;text-align:center}
.page-gov .gov-ethics__intro h3{margin-top:34px}
.page-gov .gov-ethics__intro h3:first-child{margin-top:0}
.page-gov .gov-ethics__intro .prose{margin-inline:auto}
.page-gov .gov-ethics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.page-gov .gov-ethics__card{background:var(--bg);border-radius:var(--g-radius);border:1px solid var(--line);padding:38px 28px 32px;text-align:center;transition:transform .4s var(--ease),box-shadow .4s;display:flex;flex-direction:column;align-items:center}
.page-gov .gov-ethics__card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(124,58,237,.08)}
.page-gov .gov-ethics__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;margin-bottom:20px;background:rgba(124,58,237,.08);color:var(--violet);transition:background .3s,color .3s,transform .3s}
.page-gov .gov-ethics__card:hover .gov-ethics__icon{background:var(--violet);color:var(--bg);transform:scale(1.08)}
.page-gov .gov-ethics__icon .ico{width:24px;height:24px}
.page-gov .gov-ethics__card h3{font-size:19px;color:var(--text);margin-bottom:10px}
.page-gov .gov-ethics__card p{font-size:14.5px;line-height:1.65;color:var(--faint);margin:0}

/* 4. INNOVATIONS — looking-ahead roadmap */
.page-gov .gov-road__intro{max-width:720px;margin:0 auto 46px;text-align:center}
.page-gov .gov-road__intro h3{margin-top:34px}
.page-gov .gov-road__intro h3:first-child{margin-top:0}
.page-gov .gov-road__intro .prose{margin-inline:auto}
.page-gov .gov-road{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative}
.page-gov .gov-road::before{content:'';position:absolute;top:28px;left:9%;right:9%;height:2px;background:linear-gradient(to right,transparent,var(--g-svg-light) 10%,var(--g-svg-light) 90%,transparent)}
.page-gov .gov-road__step{position:relative;display:flex;flex-direction:column;text-align:center}
.page-gov .gov-road__node{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin:0 auto 20px;border-radius:50%;background:var(--bg);border:2px solid var(--g-svg-light);color:var(--violet);box-shadow:0 0 0 6px var(--bg-soft);transition:background .3s,border-color .3s,color .3s,transform .3s}
.page-gov .gov-road__node .ico{width:24px;height:24px}
.page-gov .gov-road__step:hover .gov-road__node{background:var(--violet);border-color:var(--violet);color:#fff;transform:scale(1.08)}
.page-gov .gov-road__card{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:var(--g-radius);padding:26px 20px 24px;transition:transform .4s var(--ease),box-shadow .4s}
.page-gov .gov-road__step:hover .gov-road__card{transform:translateY(-6px);box-shadow:0 20px 50px rgba(124,58,237,.08)}
.page-gov .gov-road__num{display:block;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.14em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.page-gov .gov-road__card h3{font-size:16.5px;line-height:1.35;color:var(--text);margin-bottom:8px}
.page-gov .gov-road__card p{font-size:13.5px;line-height:1.6;color:var(--faint);margin:0}

/* reveal delays */
.page-gov .gov-crest .reveal:nth-child(2){transition-delay:.07s}
.page-gov .gov-crest .reveal:nth-child(3){transition-delay:.14s}
.page-gov .gov-crest .reveal:nth-child(4){transition-delay:.21s}
.page-gov .gov-road .reveal:nth-child(2){transition-delay:.07s}
.page-gov .gov-road .reveal:nth-child(3){transition-delay:.14s}
.page-gov .gov-road .reveal:nth-child(4){transition-delay:.21s}
.page-gov .gov-road .reveal:nth-child(5){transition-delay:.28s}

/* responsive — graduated breakpoints */
@media(max-width:1200px){
  .page-gov .gov-crest{grid-template-columns:repeat(2,1fr)}
  .page-gov .gov-road{gap:14px}
  .page-gov .gov-road__card{padding:22px 16px 20px}
  .page-gov .gov-road__card h3{font-size:15.5px}
  .page-gov .gov-road__card p{font-size:13px}
}
@media(max-width:1080px){
  .page-gov .gov-ethics{grid-template-columns:repeat(2,1fr)}

}
@media(max-width:960px){
  .page-gov .gov-feature{grid-template-columns:1fr}
  .page-gov .gov-feature__media{min-height:280px}
  .page-gov .gov-feature__media::after{background:linear-gradient(to bottom,transparent 30%,rgba(255,255,255,.95) 100%)}
  .page-gov .gov-feature__body{padding:32px 28px}
  .page-gov .gov-crest{gap:22px}
  .page-gov .gov-crest__item{padding:32px 26px 28px}

  .page-gov .gov-ethics__card{padding:32px 24px 28px}
}
@media(max-width:1100px){
  .page-gov .gov-road{grid-template-columns:1fr 1fr;gap:18px}
  .page-gov .gov-road::before{display:none}
  .page-gov .gov-road__step{flex-direction:row;align-items:flex-start;text-align:left;gap:16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--g-radius);padding:24px 22px;transition:transform .4s var(--ease),box-shadow .4s}
  .page-gov .gov-road__step:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(124,58,237,.08)}
  .page-gov .gov-road__step:hover .gov-road__card{transform:none;box-shadow:none}
  .page-gov .gov-road__step:last-child{grid-column:1/-1}
  .page-gov .gov-road__node{margin:0;flex:none;width:52px;height:52px;box-shadow:none}
  .page-gov .gov-road__card{background:none;border:0;border-radius:0;padding:0}
  .page-gov .gov-road__num{margin-bottom:6px}
  .page-gov .gov-road__card h3{font-size:16px}
  .page-gov .gov-road__card p{font-size:13.5px}
}
@media(max-width:740px){
  .page-gov .gov-crest{gap:18px}
  .page-gov .gov-crest__item{padding:26px 20px 24px}
.page-gov .gov-ethics{gap:18px}
  .page-gov .gov-road{grid-template-columns:1fr;gap:14px;max-width:560px;margin:0 auto}
  .page-gov .gov-road__step:last-child{grid-column:auto}
}
@media(max-width:640px){
  .page-gov .gov-sec{padding:64px 0}
  .page-gov .gov-crest{grid-template-columns:1fr;max-width:400px;margin-inline:auto}
  .page-gov .gov-crest__item{padding:28px 22px 24px}
  .page-gov .gov-ethics{grid-template-columns:1fr;max-width:400px;margin-inline:auto}
  .page-gov .gov-ethics__card{padding:28px 22px 24px}
  .page-gov .gov-sec .sec-head{margin-bottom:24px}
  .page-gov .gov-ethics__intro{margin-bottom:24px}
  .page-gov .gov-crest__intro{margin-bottom:24px}
  .page-gov .gov-road__intro{margin-bottom:24px}
  .page-gov .gov-feature__body{padding:24px 20px}
  .page-gov .gov-crest__ring{width:52px;height:52px;font-size:20px;margin-bottom:16px}
  .page-gov .gov-crest__ring .ico{width:20px;height:20px}
  .page-gov .gov-crest__item h3{font-size:18px}
  .page-gov .gov-ethics__card h3{font-size:17px}
  .page-gov .gov-crest__tag{font-size:10px}
  .page-gov .gov-road__node{width:48px;height:48px}
  .page-gov .gov-road__node .ico{width:20px;height:20px}
  .page-gov .gov-road__step{gap:14px;padding:20px 18px}
  .page-gov .gov-road__card h3{font-size:15px}
}

/* ============================================================
   MEDIA KIT PAGE — scoped under .mediakit
   Reuses tokens + os-banner, sec-head, .bpost, .btn patterns.
   ============================================================ */
/* brand story — bento grid */
.mediakit .mk-bento{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:20px}
.mediakit .mk-bento__tile{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--line);background:#fff;padding:32px;box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s}
.mediakit .mk-bento__tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mediakit .mk-bento__tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.mediakit .mk-bento__tile h3{font-size:19px;line-height:1.35;margin-bottom:10px}
.mediakit .mk-bento__tile p{font-size:14.5px;line-height:1.7;color:var(--muted);margin:0}
.mediakit .mk-bento__logo{grid-row:span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:var(--grad-soft)}
.mediakit .mk-bento__logo img{width:min(230px,62%);display:block}
.mediakit .mk-bento__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.mediakit .mk-chip{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand);background:#fff;border:1px solid var(--line-2);padding:7px 14px;border-radius:999px}
.mediakit .mk-bento__story{grid-column:span 2;display:flex;flex-direction:column;justify-content:center}
.mediakit .mk-bento__color{border:0;color:#fff}
.mediakit .mk-bento__color .mk-bento__tag{color:rgba(255,255,255,.78)}
.mediakit .mk-bento__color h3{color:#fff}
.mediakit .mk-bento__color p{color:rgba(255,255,255,.86)}
.mediakit .mk-bento__color--purple{background:linear-gradient(140deg,#6d0eb1,#7c3aed)}
.mediakit .mk-bento__color--gold{background:linear-gradient(140deg,#b8923d,#9a6f12)}
.mediakit .mk-bento__color::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 0,rgba(255,255,255,.18),transparent 55%);pointer-events:none}

/* values — tiles inside the bento */
.mediakit .mk-value::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#6d0eb1,#9a6f12)}
.mediakit .mk-value__head{display:flex;align-items:center;justify-content:space-between;gap:13px;margin-bottom:18px}
.mediakit .mk-value__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--grad-soft);color:var(--brand);transition:background .3s,color .3s,transform .3s}
.mediakit .mk-value:hover .mk-value__ic{background:var(--violet);color:#fff;transform:scale(1.06)}
.mediakit .mk-value__ic .ico{width:21px;height:21px}
.mediakit .mk-value__num{font-family:var(--display);font-weight:700;font-size:36px;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.18;letter-spacing:-.02em}
.mediakit .mk-value h3{font-size:17.5px;margin-bottom:8px}
.mediakit .mk-value p{font-size:14px;line-height:1.65;color:var(--faint)}

/* logo assets */
.mediakit .mk-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mediakit .mk-logo{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s}
.mediakit .mk-logo:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mediakit .mk-logo__preview{display:grid;place-items:center;aspect-ratio:16/9;background:repeating-conic-gradient(#fafbfd 0 25%,#fff 0 50%) 0 0/22px 22px;border-bottom:1px solid var(--line)}
.mediakit .mk-logo__preview img{width:min(150px,55%)}
.mediakit .mk-logo__preview--dark{background:#191331}
.mediakit .mk-logo__preview--tile{background:#191331}
.mediakit .mk-logo__appicon{display:grid;place-items:center;width:84px;height:84px;border-radius:20px;background:#fff;box-shadow:var(--shadow-sm)}
.mediakit .mk-logo__appicon img{width:56px}
.mediakit .mk-logo__body{padding:20px 22px 22px}
.mediakit .mk-logo__body h3{font-size:16.5px;margin-bottom:4px}
.mediakit .mk-logo__body p{font-size:13.5px;color:var(--faint);margin:0 0 14px}
.mediakit .mk-logo__dl{display:flex;gap:10px}
.mediakit .mk-logo__dl .btn{gap:7px}
.mediakit .mk-logo__dl .ico{width:15px;height:15px}

/* brand colors — palette tiles */
.mediakit .mk-pal{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mediakit .mk-pal__swatch{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:34px;min-height:150px;border-radius:var(--radius-lg);padding:20px 22px;color:#fff;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.mediakit .mk-pal__swatch:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mediakit .mk-pal__swatch--wide{grid-column:span 4;min-height:120px}
.mediakit .mk-pal__swatch--lg{grid-column:span 2;min-height:190px}
.mediakit .mk-pal__swatch--dark{color:var(--text);border:1px solid var(--line-2)}
.mediakit .mk-pal__role{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.mediakit .mk-pal__swatch--dark .mk-pal__role{background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.14)}
.mediakit .mk-pal__info b{display:block;font-family:var(--display);font-size:16.5px}
.mediakit .mk-pal__info span{font-size:12.5px;opacity:.85}

/* reveal stagger */
.mediakit .mk-bento .reveal:nth-child(2),.mediakit .mk-logos .reveal:nth-child(2),.mediakit .mk-pal .reveal:nth-child(2){transition-delay:.07s}
.mediakit .mk-bento .reveal:nth-child(3),.mediakit .mk-logos .reveal:nth-child(3),.mediakit .mk-pal .reveal:nth-child(3){transition-delay:.14s}
.mediakit .mk-bento .reveal:nth-child(4),.mediakit .mk-logos .reveal:nth-child(4),.mediakit .mk-pal .reveal:nth-child(4){transition-delay:.21s}
.mediakit .mk-bento .reveal:nth-child(5),.mediakit .mk-logos .reveal:nth-child(5),.mediakit .mk-pal .reveal:nth-child(5){transition-delay:.28s}
.mediakit .mk-bento .reveal:nth-child(6),.mediakit .mk-logos .reveal:nth-child(6),.mediakit .mk-pal .reveal:nth-child(6){transition-delay:.35s}
.mediakit .mk-bento .reveal:nth-child(7),.mediakit .mk-pal .reveal:nth-child(7){transition-delay:.42s}

/* responsive */
@media (max-width:960px){
  .mediakit .mk-bento{grid-template-columns:1fr 1fr}
  .mediakit .mk-bento__logo{grid-row:auto;grid-column:span 2;padding:40px 24px}
  .mediakit .mk-bento__story{grid-column:span 2}
  .mediakit .mk-value:last-child{grid-column:span 2}
  .mediakit .mk-logos{grid-template-columns:repeat(2,1fr)}
  .mediakit .mk-pal{grid-template-columns:1fr 1fr}
  .mediakit .mk-pal__swatch--wide{grid-column:span 2}
}
@media (max-width:640px){
  .mediakit .mk-bento{grid-template-columns:1fr}
  .mediakit .mk-bento__logo,.mediakit .mk-bento__story,.mediakit .mk-value:last-child{grid-column:auto}
  .mediakit .mk-bento__tile{padding:26px 22px}
  .mediakit .mk-logos{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .mediakit .mk-pal{grid-template-columns:1fr;gap:14px}
  .mediakit .mk-pal__swatch--wide,.mediakit .mk-pal__swatch--lg{grid-column:auto;min-height:130px}
}

/* ============================================================
   SERVICE / TECHNOLOGY PAGE TEMPLATE  (ai-ml.html — reusable)
   Scoped under .svc-* so every service page uses the same system.
   Intentionally reuses existing tokens + components:
     .card · .btn · .sec-head · .sec-kicker · .grad · .reveal ·
     .why__grid · .why__card · .knowledge · .blog-grid · .post ·
     .cases · .showcase · .show · .cta · .marquee
   New classes added only where no reusable equivalent exists.
   ============================================================ */

/* ---- service hero (split: copy left | stat panel right) ---- */
.svc-hero{position:relative;overflow:hidden;padding:clamp(52px,8vh,96px) 0 clamp(48px,7vh,80px);background:#fff}
.svc-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 70% 60% at 100% -10%,rgba(109,14,177,.07),transparent 55%),
  radial-gradient(ellipse 50% 45% at 0% 100%,rgba(6,182,212,.06),transparent 50%);pointer-events:none}
.svc-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(109,14,177,.045) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.svc-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 400px;gap:clamp(32px,5vw,72px);align-items:center}

/* breadcrumb */
.svc-crumb{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--faint);margin-bottom:20px}
.svc-crumb a{color:var(--faint);transition:color .2s}
.svc-crumb a:hover{color:var(--brand-ink)}
.svc-crumb svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--line-2)}
.svc-crumb span{color:var(--text);font-weight:600}

/* copy column */
.svc-hero__copy{display:flex;flex-direction:column}
.svc-hero__copy h1{font-size:clamp(36px,5.2vw,62px);letter-spacing:-.03em;line-height:1.1;margin:6px 0 18px}
.svc-hero__lead{font-size:clamp(16px,1.5vw,18px);color:var(--muted);line-height:1.7;max-width:560px;margin-bottom:30px}
.svc-hero__actions{display:flex;gap:12px;flex-wrap:wrap}

/* trust pills */
.svc-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.svc-trust__pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line-2);padding:7px 13px;border-radius:999px}
.svc-trust__pill .ico{width:15px;height:15px;color:var(--brand)}

/* stat panel (right column) */
.svc-hero__panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow)}
.svc-panel__head{display:flex;align-items:center;gap:14px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.svc-panel__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--grad-soft);border:1px solid var(--line);color:var(--brand);flex:none}
.svc-panel__ic .ico{width:26px;height:26px}
.svc-panel__head-text h3{font-size:17px}
.svc-panel__head-text p{font-size:13px;color:var(--muted);margin-top:3px}
.svc-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-bottom:22px}
.svc-stat{display:flex;flex-direction:column;gap:4px}
.svc-stat b{font-family:var(--display);font-weight:700;font-size:30px;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-stat span{font-size:13px;color:var(--muted);line-height:1.4}

/* ---- benefits: 3-col card grid with ghost number decoration ---- */
.svc-benefits{padding:84px 0;background:var(--bg-soft)}
.svc-benefits__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-benefit{position:relative;overflow:hidden;padding:32px 28px 28px;border-color:rgba(109,14,177,.13);box-shadow:0 4px 22px rgba(109,14,177,.07)}
.svc-benefit:hover{border-color:rgba(109,14,177,.24);box-shadow:0 8px 32px rgba(109,14,177,.12)}
.svc-benefit h3{font-size:18px;margin-bottom:9px;letter-spacing:-.01em}
.svc-benefit p{font-size:14.5px;line-height:1.65}
/* Some real "expertise" feature content (two-column-flexible-layout-module)
   echoes its own already-complete real markup (image/h6/paragraph/label/list)
   straight into a .svc-benefit card instead of the usual icon+h3+p shape -
   give those real child tags a matching look rather than bare browser defaults. */
.svc-benefit h6{font-size:18px;margin-bottom:9px;letter-spacing:-.01em;font-weight:600;color:var(--text)}
.svc-benefit .img{width:48px;height:48px;margin-bottom:14px}
.svc-benefit .img img{width:100%;height:100%;object-fit:contain}
.svc-benefit .label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand);margin:16px 0 8px}
.svc-benefit ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.svc-benefit ul li{font-size:13.5px;color:var(--muted);line-height:1.5}

/* ---- services grid (icon-left layout) ---- */
.svc-services{padding:84px 0}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc-card{display:flex;gap:20px;align-items:flex-start;padding:28px 26px}
.svc-card__ic{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:color-mix(in srgb,var(--c,var(--brand)) 12%,#fff);border:1px solid color-mix(in srgb,var(--c,var(--brand)) 22%,var(--line));color:var(--c,var(--brand));flex:none;transition:background .25s,border-color .25s}
.svc-card:hover .svc-card__ic{background:color-mix(in srgb,var(--c,var(--brand)) 20%,#fff);border-color:color-mix(in srgb,var(--c,var(--brand)) 40%,var(--line))}
.svc-card__ic .ico{width:26px;height:26px}
.svc-card__body{min-width:0}
.svc-card__body h3{font-size:19px;margin-bottom:8px}
.svc-card__body p{font-size:14.5px;line-height:1.65}

/* ---- capabilities: sticky intro + interactive numbered list ---- */
.cap-wrap{display:grid;grid-template-columns:minmax(300px,.85fr) 1.5fr;gap:clamp(36px,5vw,80px);align-items:start}
.cap-intro{position:sticky;top:calc(var(--header-h) + 36px)}
.cap-intro .sec-kicker{margin-bottom:0}
.cap-intro h2{font-size:clamp(28px,3.4vw,42px);margin:16px 0 18px;letter-spacing:-.02em}
.cap-intro p{margin-bottom:30px;max-width:42ch}
.cap-list{display:flex;flex-direction:column}
.cap-item{position:relative;display:flex;align-items:flex-start;gap:clamp(18px,2.6vw,30px);padding:30px clamp(14px,2vw,26px);border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.cap-item:first-child{border-top:1px solid var(--line)}
.cap-item:hover{background:var(--grad-soft)}
/* left gradient accent on hover */
.cap-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-cta);opacity:0;transition:opacity .3s var(--ease)}
.cap-item:hover::before{opacity:1}
.cap-item__num{flex:none;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.5;padding-top:3px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;opacity:.7}
.cap-item__body{min-width:0;flex:1}
.cap-item__body h3{font-size:19px;margin-bottom:8px;letter-spacing:-.01em;transition:color .25s}
.cap-item:hover .cap-item__body h3{color:var(--brand-ink)}
.cap-item__body p{font-size:14.5px;line-height:1.68}
/* subtle stagger */
.cap-list .reveal:nth-child(even){transition-delay:.06s}

/* ---- why DRC — 3-column variant for 6 items; white bg overrides .why's bg-soft ---- */
.why--svc{background:#fff}
.why--svc .why__grid{grid-template-columns:repeat(3,1fr)}
/* icon-free: 4px brand top-border replaces icon block */
.why--svc .why__card{border-top:1px solid var(--line)}

/* ---- 5-step development process ---- */
.svc-proc{padding:84px 0;background:var(--bg-soft)}
.svc-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:8px}
.svc-steps::before{content:"";position:absolute;top:26px;left:calc(10% + 22px);right:calc(10% + 22px);height:2px;background:linear-gradient(90deg,var(--brand),var(--cyan));opacity:.22}
.svc-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 10px;position:relative}
.svc-step__num-wrap{position:relative;z-index:2;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--line);margin-bottom:20px;box-shadow:var(--shadow-xs);transition:border-color .25s var(--ease),box-shadow .25s,background .25s}
.svc-step:hover .svc-step__num-wrap{border-color:var(--brand);box-shadow:0 0 0 6px rgba(109,14,177,.1);background:var(--grad-soft)}
.svc-step__num{font-family:var(--display);font-weight:700;font-size:16px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-step h4{font-size:15px;margin-bottom:7px;line-height:1.3}
.svc-step p{font-size:13px;line-height:1.6;color:var(--muted)}

/* ---- mid-page CTA band (full-bleed dark navy) ---- */
.svc-cta-band{position:relative;overflow:hidden;padding:clamp(56px,9vh,88px) 0;background:#0f172a}
.svc-cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 85% at 12% 0%,rgba(109,14,177,.5),transparent 60%),radial-gradient(ellipse 50% 80% at 92% 100%,rgba(207,169,79,.26),transparent 60%);pointer-events:none}
/* thin gradient edges — ties into the brand line used above the footer */
.svc-cta-band::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--brand-grad)}
.svc-cta-band__box{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.svc-cta-band__copy h2,.svc-cta-band__copy h3{color:#fff;font-size:clamp(22px,3vw,34px);margin-bottom:10px}
.svc-cta-band__copy p{color:#94a3b8;font-size:15px}
.svc-cta-band__actions{display:flex;gap:12px;flex-wrap:wrap;flex:none}

/* ---- FAQ accordion ---- */
.svc-faq{padding:84px 0;background:var(--bg-soft)}
.svc-faq__list{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.svc-faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s,border-color .2s}
.svc-faq__item:hover{border-color:var(--line-2);box-shadow:var(--shadow-xs)}
.svc-faq__item[open]{border-color:rgba(109,14,177,.22);box-shadow:var(--shadow-sm)}
.svc-faq__q{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 24px;font-family:var(--display);font-weight:600;font-size:16px;color:var(--text);cursor:pointer;list-style:none;transition:color .2s}
.svc-faq__q::-webkit-details-marker{display:none}
.svc-faq__item[open] .svc-faq__q{color:var(--brand-ink)}
.svc-faq__icon{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--bg-soft);border:1px solid var(--line);color:var(--brand);transition:background .2s,border-color .2s}
.svc-faq__icon .ico{width:16px;height:16px;transition:transform .3s var(--ease)}
.svc-faq__item[open] .svc-faq__icon{background:var(--grad-soft);border-color:rgba(109,14,177,.22)}
.svc-faq__item[open] .svc-faq__icon .ico{transform:rotate(45deg)}
.svc-faq__a{padding:0 24px 22px;font-size:15px;color:var(--muted);line-height:1.7}
.svc-faq__a ul{margin-top:10px;padding-left:20px;display:flex;flex-direction:column;gap:6px;list-style:disc}
.svc-faq__a ul li{font-size:14.5px;color:var(--muted)}
.svc-faq__a ul li::marker{color:var(--brand)}

/* ---- staggered reveal cascades ---- */
.svc-grid .reveal:nth-child(2n){transition-delay:.08s}
.why--svc .why__grid .reveal:nth-child(3n+2){transition-delay:.07s}
.why--svc .why__grid .reveal:nth-child(3n+3){transition-delay:.14s}

/* ---- service page responsive ---- */
@media (max-width:1080px){
  .svc-hero__inner{grid-template-columns:1fr 340px;gap:40px}
  .svc-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .cap-wrap{grid-template-columns:1fr;gap:36px}
  .cap-intro{position:static}
  .cap-intro p{max-width:none}
}
@media (max-width:860px){
  .svc-hero__inner{grid-template-columns:1fr}
  .svc-hero__panel{display:none}
  .svc-benefits__grid{grid-template-columns:1fr 1fr}
  .why--svc .why__grid{grid-template-columns:repeat(2,1fr)}
  .svc-steps{grid-template-columns:1fr 1fr;gap:24px}
  .svc-steps::before{display:none}
  .svc-step{align-items:flex-start;text-align:left;padding:0}
  .svc-cta-band__box{grid-template-columns:1fr;gap:24px}
}
@media (max-width:540px){
  .svc-benefits__grid{grid-template-columns:1fr}
  .why--svc .why__grid{grid-template-columns:1fr}
  .svc-steps{grid-template-columns:1fr}
  .cap-item{padding-inline:14px;gap:14px}
  .cap-item__num{padding-top:2px}
}
@media (max-width:480px){
  .svc-card{flex-direction:column;gap:12px}
}

/* ============================================================
   BENEFIT CARD ICONS
   ============================================================ */
.svc-benefit__ic{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;margin-bottom:18px;background:var(--grad-soft);border:1px solid var(--line);color:var(--brand);transition:background .25s,border-color .25s}
.svc-benefit__ic .ico{width:22px;height:22px}
.svc-benefit:hover .svc-benefit__ic{background:color-mix(in srgb,var(--brand) 12%,#fff);border-color:color-mix(in srgb,var(--brand) 25%,var(--line))}

/* ============================================================
   WHY DRC — REDESIGNED NUMBERED CARDS
   ============================================================ */
.why--svc .why__card{
  position:relative;
  overflow:hidden;
  padding:34px 28px 30px;
  transition:transform .22s var(--ease),box-shadow .22s,border-color .22s;
}
/* gradient top accent bar — hidden by default, appears on hover */
.why--svc .why__card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--grad-cta);
  border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  opacity:0;
  transition:opacity .25s var(--ease);
}
.why--svc .why__card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:rgba(109,14,177,.18);
}
.why--svc .why__card:hover::before{opacity:1}
/* ghost number watermark */
.why__num{
  position:absolute;
  top:6px;right:18px;
  font-family:var(--display);
  font-weight:700;
  font-size:84px;
  line-height:1;
  letter-spacing:-.04em;
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:.05;
  pointer-events:none;
  user-select:none;
  transition:opacity .25s;
}
.why--svc .why__card:hover .why__num{opacity:.1}
/* keep text above the number */
.why--svc .why__card h3,
.why--svc .why__card p{position:relative;z-index:1}
.why--svc .why__card h3{font-size:18px;margin-bottom:10px;letter-spacing:-.01em}
.why--svc .why__card p{font-size:14.5px;line-height:1.68}

/* ============================================================
   FULL STACK WEB DEVELOPMENT PAGE
   ============================================================ */
/* ---- core technology stack (dark band, mirrors svc-cta-band styling) ---- */
.svc-stack{position:relative;overflow:hidden;padding:84px 0;background:#0f172a}
.svc-stack::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 85% at 12% 0%,rgba(109,14,177,.5),transparent 60%),radial-gradient(ellipse 50% 80% at 92% 100%,rgba(207,169,79,.26),transparent 60%);pointer-events:none}
.svc-stack .sec-head{position:relative;z-index:1}
.svc-stack .sec-head h2,.svc-stack .sec-head h3{color:#fff}
.svc-stack .sec-head p{color:#94a3b8}
.svc-stack .sec-kicker{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#c4b5fd}
.svc-stack__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc-stack__group{padding:28px 26px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);transition:background .25s var(--ease),border-color .25s var(--ease)}
.svc-stack__group:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.svc-stack__head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.svc-stack__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#c4b5fd;flex:none}
.svc-stack__ic .ico{width:22px;height:22px}
.svc-stack__head h3{font-size:17px;color:#fff;letter-spacing:-.01em}
.svc-stack__tags{display:flex;flex-wrap:wrap;gap:8px}
.svc-stack__tag{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-size:13.5px;font-weight:500;color:#cbd5e1;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.svc-stack__tag:hover{background:rgba(109,14,177,.25);border-color:rgba(196,181,253,.5);color:#fff}
.svc-stack__grid .reveal:nth-child(even){transition-delay:.07s}
@media (max-width:860px){.svc-stack__grid{grid-template-columns:1fr}}

/* ---- 6-step variant of the development process ---- */
.svc-steps--six{grid-template-columns:repeat(6,1fr)}
.svc-steps--six::before{left:calc(8.333% + 22px);right:calc(8.333% + 22px)}
.svc-steps--six .svc-step h4{font-size:14.5px}
@media (max-width:1080px){
  .svc-steps--six{grid-template-columns:repeat(3,1fr);gap:28px 16px}
  .svc-steps--six::before{display:none}
}
@media (max-width:860px){.svc-steps--six{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.svc-steps--six{grid-template-columns:1fr}}

/* ============================================================
   PYTHON DEVELOPMENT PAGE (py-*)
   Same design tokens, fresh section layouts.
   ============================================================ */

/* ---- hero: split copy + code window ---- */
.py-hero{position:relative;overflow:hidden;padding:clamp(52px,8vh,92px) 0 64px;background:#fff}
.py-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 6% 0%,rgba(109,14,177,.07),transparent 60%),radial-gradient(ellipse 50% 45% at 100% 92%,rgba(207,169,79,.09),transparent 60%);pointer-events:none}
.py-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,5vw,72px);align-items:center}
.py-hero__crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--faint);margin-bottom:20px}
.py-hero__crumb a{transition:color .2s}
.py-hero__crumb a:hover{color:var(--brand-ink)}
.py-hero__crumb .ico{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;opacity:.6}
.py-hero__copy h1{font-size:clamp(34px,4.5vw,56px);letter-spacing:-.03em;margin:18px 0 20px}
.py-hero__lead{font-size:clamp(16px,1.4vw,18px);line-height:1.75;max-width:54ch}
.py-hero__stats{display:flex;flex-wrap:wrap;gap:clamp(22px,3.4vw,46px);margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.py-hero__stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1.1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.py-hero__stat span{font-size:13px;color:var(--muted)}
.py-window{position:relative;border-radius:var(--radius-lg);background:#0f172a;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-lg);overflow:hidden}
.py-window::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-grad)}
.py-window__bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.py-window__dot{width:11px;height:11px;border-radius:50%}
.py-window__dot--a{background:#f87171}.py-window__dot--b{background:#fbbf24}.py-window__dot--c{background:#34d399}
.py-window__title{margin-left:8px;font-size:12.5px;font-weight:500;color:#94a3b8}
.py-window pre{margin:0;padding:24px 24px 28px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.8;color:#e2e8f0;overflow-x:auto}
.py-window .c{color:#64748b}.py-window .k{color:#c4b5fd}.py-window .s{color:#fcd34d}.py-window .f{color:#7dd3fc}

/* ---- why python: narrative + staggered fact tiles ---- */
.py-why{padding:84px 0;background:var(--bg-soft)}
.py-why__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center}
.py-why__copy h2{font-size:clamp(28px,3.6vw,42px);margin:16px 0 18px}
.py-why__copy p{margin-bottom:14px}
.py-facts{display:flex;flex-direction:column;gap:16px}
.py-fact{display:flex;align-items:center;gap:20px;padding:22px 24px}
.py-fact:nth-child(2){margin-left:28px}
.py-fact:nth-child(3){margin-left:56px}
.py-fact b{flex:none;min-width:104px;font-family:var(--display);font-weight:700;font-size:clamp(26px,2.6vw,34px);line-height:1.05;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.py-fact p{font-size:14px;line-height:1.55}

/* ---- benefits: asymmetric bento grid ---- */
.py-bene{padding:84px 0;background:#fff}
.py-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.py-tile{position:relative;padding:30px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.py-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(109,14,177,.2)}
.py-tile--lg{grid-column:span 2}
.py-tile--tint{background:var(--grad-soft)}
.py-tile__ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line-2);color:var(--brand);margin-bottom:18px;transition:border-color .25s}
.py-tile:hover .py-tile__ic{border-color:rgba(109,14,177,.35)}
.py-tile__ic .ico{width:21px;height:21px}
.py-tile h3{font-size:17.5px;margin-bottom:8px;letter-spacing:-.01em}
.py-tile p{font-size:14.5px;line-height:1.65}

/* ---- services: hairline ledger grid ---- */
.py-svc{padding:84px 0;background:var(--bg-soft)}
.py-svc__head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:42px}
.py-svc__head h2{font-size:clamp(28px,3.6vw,42px);max-width:580px;margin-top:16px}
.py-svc__head>p{max-width:420px;font-size:15px}
.py-ledger{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.py-ledger__cell{position:relative;padding:32px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s var(--ease)}
.py-ledger__cell:nth-child(3n){border-right:0}
.py-ledger__cell:nth-child(n+7){border-bottom:0}
.py-ledger__cell::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-cta);opacity:0;transition:opacity .25s}
.py-ledger__cell:hover{background:var(--grad-soft)}
.py-ledger__cell:hover::after{opacity:1}
.py-ledger__num{display:block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--faint);margin-bottom:16px}
.py-ledger__cell h3{font-size:17.5px;margin-bottom:9px;letter-spacing:-.01em}
.py-ledger__cell p{font-size:14.5px;line-height:1.65}

/* ---- tech stack: dashed category rails (light) ---- */
.py-stack{padding:84px 0;background:#fff}
.py-stackrows{border-top:1px dashed var(--line-2)}
.py-stackrow{display:grid;grid-template-columns:230px 1fr;gap:16px 24px;align-items:start;padding:24px 4px;border-bottom:1px dashed var(--line-2)}
.py-stackrow h3{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding-top:9px}
.py-stackrow__tags{display:flex;flex-wrap:wrap;gap:8px}
.py-tag{display:inline-flex;align-items:center;padding:7px 15px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-size:13.5px;font-weight:500;color:var(--text);text-decoration:none;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.py-tag:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--grad-soft)}

/* ---- why DRC: sticky intro + borderless checklist ---- */
.py-choose{padding:84px 0;background:#fff}
.py-choose__grid{display:grid;grid-template-columns:.85fr 1.35fr;gap:clamp(36px,5vw,76px);align-items:start}
.py-choose__intro{position:sticky;top:calc(var(--header-h) + 36px)}
.py-choose__intro h2{font-size:clamp(28px,3.4vw,42px);margin:16px 0 18px}
.py-choose__intro p{margin-bottom:28px;max-width:40ch}
.py-checks{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.py-check{display:flex;align-items:flex-start;gap:14px;padding:24px 0;border-top:1px solid var(--line)}
.py-check .ico{flex:none;width:22px;height:22px;margin-top:2px;color:var(--green);fill:none;stroke:currentColor;stroke-width:2}
.py-check h3{font-size:16.5px;margin-bottom:7px;letter-spacing:-.01em}
.py-check p{font-size:14px;line-height:1.62}

/* ---- process: vertical alternating timeline ---- */
.py-proc{padding:84px 0;background:var(--bg-soft)}
.py-tl{position:relative;max-width:900px;margin:0 auto}
.py-tl::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,var(--brand),var(--gold));opacity:.22}
.py-tl__item{position:relative;width:calc(50% - 44px);padding:24px 26px;margin-bottom:26px}
.py-tl__item:nth-child(odd){margin-left:auto}
.py-tl__item:last-child{margin-bottom:0}
.py-tl__num{position:absolute;top:24px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--line);box-shadow:var(--shadow-xs);font-family:var(--display);font-weight:700;font-size:14px;z-index:1;transition:border-color .25s,box-shadow .25s}
.py-tl__num i{font-style:normal;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.py-tl__item:nth-child(odd) .py-tl__num{left:-68px}
.py-tl__item:nth-child(even) .py-tl__num{right:-68px}
.py-tl__item:hover .py-tl__num{border-color:var(--brand);box-shadow:0 0 0 6px rgba(109,14,177,.1)}
.py-tl__item h3{font-size:17px;margin-bottom:7px;letter-spacing:-.01em}
.py-tl__item p{font-size:14px;line-height:1.62}

/* ---- engagement models ---- */
.py-models{padding:84px 0;background:#fff}
.py-models__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.py-model{position:relative;display:flex;flex-direction:column;padding:34px 28px 28px}
.py-model--featured{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--brand-grad) border-box;box-shadow:var(--shadow)}
.py-model__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--grad-cta);padding:5px 14px;border-radius:999px}
.py-model h3{font-size:20px;letter-spacing:-.01em}
.py-model__sub{font-size:14px;margin:8px 0 20px}
.py-model__list{display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.py-model__list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--muted);line-height:1.5}
.py-model__list .ico{flex:none;width:18px;height:18px;margin-top:2px;color:var(--green);fill:none;stroke:currentColor;stroke-width:2}
.py-model .btn{margin-top:auto}

/* ---- CTA: soft gradient box (light) ---- */
.py-cta{padding:8px 0 84px;background:#fff}
.py-cta__box{position:relative;overflow:hidden;text-align:center;padding:clamp(44px,7vw,72px) 28px;border-radius:28px;border:1px solid var(--line);background:var(--grad-soft)}
.py-cta__box::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(109,14,177,.07) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.py-cta__box>*{position:relative;z-index:1}
.py-cta__box h2{font-size:clamp(26px,3.6vw,40px);max-width:640px;margin:0 auto}
.py-cta__box p{margin:14px auto 0;max-width:520px}
.py-cta__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:32px}

/* ---- hire page: engagement model comparison ---- */
.hire-cmp-wrap{max-width:1000px;margin:0 auto;overflow-x:auto}
.hire-cmp{min-width:680px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-xs);overflow:hidden}
.hire-cmp__row{display:grid;grid-template-columns:.9fr 1fr 1fr;border-top:1px solid var(--line)}
.hire-cmp__row:first-child{border-top:0}
.hire-cmp__row>div{padding:16px 22px}
.hire-cmp__row--head>div{padding:28px 22px 22px}
.hire-cmp__row--foot>div{padding:22px}
.hire-cmp__label{display:flex;align-items:center;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.hire-cmp__cell{font-size:14.5px;line-height:1.55;color:var(--muted);border-left:1px solid var(--line)}
.hire-cmp__col-head{position:relative;border-left:1px solid var(--line)}
.hire-cmp__col-head h3{font-size:19px;margin-bottom:6px;letter-spacing:-.01em}
.hire-cmp__col-head p{font-size:13.5px;line-height:1.5}
.hire-cmp__tag{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--grad-cta);padding:4px 11px;border-radius:999px}
/* highlight the featured (last) column */
.hire-cmp__row>div:last-child{background:var(--grad-soft)}
.hire-cmp__row--foot .hire-cmp__cell{display:flex;align-items:center}

/* ---- python page responsive ---- */
@media (max-width:1080px){
  .py-bento{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .py-hero__grid{grid-template-columns:1fr}
  .py-window{max-width:600px}
  .py-why__grid{grid-template-columns:1fr}
  .py-fact:nth-child(2),.py-fact:nth-child(3){margin-left:0}
  .py-choose__grid{grid-template-columns:1fr}
  .py-choose__intro{position:static}
}
@media (max-width:900px){
  .py-ledger{grid-template-columns:1fr 1fr}
  .py-ledger__cell{border-right:0;border-bottom:1px solid var(--line)}
  .py-ledger__cell:nth-child(odd){border-right:1px solid var(--line)}
  .py-ledger__cell:last-child{border-bottom:0}
  .py-models__grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
}
@media (max-width:820px){
  .py-tl::before{left:22px;transform:none}
  .py-tl__item{width:auto;margin-left:60px}
  .py-tl__item:nth-child(odd){margin-left:60px}
  .py-tl__item:nth-child(odd) .py-tl__num,.py-tl__item:nth-child(even) .py-tl__num{left:-60px;right:auto}
}
@media (max-width:640px){
  .py-bento{grid-template-columns:1fr}
  .py-tile--lg{grid-column:auto}
  .py-stackrow{grid-template-columns:1fr;padding:20px 2px}
  .py-stackrow h3{padding-top:0}
  .py-checks{grid-template-columns:1fr}
}
@media (max-width:560px){
  .py-ledger{grid-template-columns:1fr}
  .py-ledger__cell:nth-child(odd){border-right:0}
}


/* ============================================================
   Ported from html/css/styles.css for the Proprietary Solutions
   rebuild (TruFlux + EZMS) - see MD/Proprietary-Solutions.md
   ============================================================ */

/* ---- TruFlux "Trusted by" logo strip - not in the original mockup,
   added to keep 5 real client logos (truflux_section_image_2) that would
   otherwise silently disappear (confirmed decision) ---- */
.tf-logos{padding:32px 0;border-bottom:1px solid var(--line)}
.tf-logos__label{display:block;text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:20px}
.tf-logos__grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px}
.tf-logos__grid img{max-height:34px;width:auto;opacity:.7;filter:grayscale(1);transition:opacity .2s,filter .2s}
.tf-logos__grid img:hover{opacity:1;filter:none}
/* ============================================================
   ECONOMIC ZONE MANAGEMENT SYSTEM (EZMS) — scoped under .page-ezms
   Reuses global tokens, buttons, cards, svc-cta-band & svc-faq.
   Fresh, premium section layouts unique to this page.
   ============================================================ */
.page-ezms .ez-sec,.page-truflux .ez-sec{padding:clamp(60px,8vh,96px) 0}
.page-ezms .ez-sec--soft,.page-truflux .ez-sec--soft{background:var(--bg-soft)}

/* ---- 1. Hero: split copy + glass control-center panel ---- */
.ez-hero{position:relative;overflow:hidden;padding:clamp(46px,7vh,84px) 0 clamp(56px,8vh,90px)}
.ez-hero__bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(ellipse 60% 62% at 6% -6%,rgba(109,14,177,.12),transparent 60%),
  radial-gradient(ellipse 58% 58% at 104% 108%,rgba(207,169,79,.14),transparent 60%),
  linear-gradient(180deg,#faf7ff 0%,#ffffff 70%)}
.ez-hero .container{position:relative;z-index:1}
.ez-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,66px);align-items:center}
.ez-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand);background:rgba(109,14,177,.06);border:1px solid rgba(109,14,177,.18);padding:7px 14px;border-radius:999px;margin-bottom:18px}
.ez-pill .ico{width:15px;height:15px}
.ez-hero__copy h1{font-size:clamp(32px,4.6vw,54px);letter-spacing:-.03em;line-height:1.08;margin:0 0 18px}
.ez-hero__lead{font-size:clamp(15.5px,1.4vw,18px);line-height:1.75;max-width:56ch}
.ez-hero .hero__actions{justify-content:flex-start;margin:30px 0 0}
.ez-hero__trust{display:flex;flex-wrap:wrap;gap:16px 26px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.ez-hero__trust li{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--text)}
.ez-hero__trust .ico{width:18px;height:18px;color:var(--brand)}

.ez-hero__panel{position:relative}
.ez-panel{position:relative;border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.75));border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:20px;overflow:hidden}
.ez-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--brand-grad)}
.ez-panel::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0,rgba(109,14,177,.08),transparent 55%);pointer-events:none}
.ez-panel__head{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ez-panel__dots{display:inline-flex;gap:6px}
.ez-panel__dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.ez-panel__dots i:first-child{background:#f4a4a4}.ez-panel__dots i:nth-child(2){background:#f6cf7d}
.ez-panel__title{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--text)}
.ez-panel__live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--green)}
.ez-panel__live i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(21,128,61,.5);animation:ezPulse 2.4s var(--ease) infinite}
.ez-panel__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.ez-panel__stat{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:12px 12px}
.ez-panel__stat span{display:block;font-size:11px;color:var(--faint);margin-bottom:4px}
.ez-panel__stat b{font-family:var(--display);font-size:18px;color:var(--text)}
.ez-panel__stat b.is-ok{color:var(--green)}
.ez-panel__grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
.ez-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 12px;border-radius:11px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--text)}
.ez-chip .ico{width:16px;height:16px;color:var(--brand)}
.ez-panel__bar{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ez-panel__barlabel{display:block;font-size:11.5px;color:var(--faint);margin-bottom:8px}
.ez-panel__track{display:block;height:8px;border-radius:999px;background:#e6e9f1;overflow:hidden}
.ez-panel__track i{display:block;height:100%;border-radius:999px;background:var(--grad-cta)}
@keyframes ezPulse{0%{box-shadow:0 0 0 0 rgba(21,128,61,.5)}70%{box-shadow:0 0 0 7px rgba(21,128,61,0)}100%{box-shadow:0 0 0 0 rgba(21,128,61,0)}}

/* ---- 2. Stat strip (elevated card overlapping hero) ---- */
.ez-stats{position:relative;z-index:2;margin-top:-42px}
.ez-stats__grid{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.ez-stat{padding:26px 24px;text-align:center;border-right:1px solid var(--line)}
.ez-stat:last-child{border-right:0}
.ez-stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,40px);line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:9px}
.ez-stat span{font-size:13px;color:var(--muted);line-height:1.5}

/* ---- 3. Overview + audience ---- */
.ez-overview{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,64px);align-items:center}
.ez-overview__copy h2{font-size:clamp(26px,3.2vw,40px);margin:14px 0 18px}
.ez-overview__copy p{margin-bottom:16px}
.ez-overview__actions{margin-top:24px}
.ez-audience{background:linear-gradient(160deg,#faf6ff,#fdf9f2);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:28px}
.ez-audience__label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.ez-audience__list{display:grid;gap:12px}
.ez-audience__list li{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.ez-audience__list li:hover{transform:translateX(4px);border-color:var(--line-2);box-shadow:var(--shadow-xs)}
.ez-audience__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--grad-soft);color:var(--brand);border:1px solid rgba(109,14,177,.14)}
.ez-audience__ic .ico{width:22px;height:22px}
.ez-audience__list b{display:block;font-family:var(--display);font-size:15px;color:var(--text)}
.ez-audience__list small{font-size:12.5px;color:var(--muted)}

/* ---- 4. Transformation comparison ---- */
.ez-compare{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;max-width:980px;margin:0 auto}
.ez-compare__col{position:relative;padding:34px 30px;border:1px solid transparent}
.ez-compare__col--before{border-radius:var(--radius-lg) 0 0 var(--radius-lg);background:linear-gradient(180deg,#fdfbfb,#f6f1f2);border-color:#ecdfe1}
.ez-compare__col--after{border-radius:0 var(--radius-lg) var(--radius-lg) 0;background:linear-gradient(155deg,#6d0eb1,#57069a 55%,#3d0475);box-shadow:0 26px 60px -26px rgba(87,6,154,.65)}
.ez-compare__tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin-bottom:20px}
.ez-compare__col--before .ez-compare__tag{background:#fff;border:1px solid #f0dbdd;color:#b23a48}
.ez-compare__col--after .ez-compare__tag{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff}
.ez-compare__col ul{display:grid;gap:15px}
.ez-compare__col li{display:flex;gap:12px;font-size:14.5px;line-height:1.5}
.ez-compare__col li .ico{flex:none;width:22px;height:22px;padding:3px;border-radius:7px;margin-top:1px;box-sizing:border-box}
.ez-compare__col--before li{color:var(--muted)}
.ez-compare__col--before li .ico{color:#c0505c;background:#fbeaec;transform:rotate(45deg)}
.ez-compare__col--after li{color:rgba(255,255,255,.94)}
.ez-compare__col--after li .ico{color:#fff;background:rgba(255,255,255,.18)}

/* ---- 5. Why / capabilities grid (uses .card) ---- */
.ez-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ez-why{padding:30px 26px}
.ez-why__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--grad-soft);color:var(--brand);border:1px solid rgba(109,14,177,.14);margin-bottom:18px}
.ez-why__ic .ico{width:24px;height:24px}
.ez-why h3{font-size:17.5px;margin-bottom:10px;letter-spacing:-.01em}
.ez-why p{font-size:14px;line-height:1.6}

/* ---- 6. Modules bento ---- */
.ez-mod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ez-mod{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);padding:24px 22px;transition:transform .28s var(--ease),box-shadow .28s,border-color .28s}
.ez-mod:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}
.ez-mod__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--grad-soft);color:var(--brand);border:1px solid rgba(109,14,177,.14);margin-bottom:15px}
.ez-mod__ic .ico{width:22px;height:22px}
.ez-mod__ic-mask{display:block;width:22px;height:22px;background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.ez-mod h3{font-size:16px;margin-bottom:8px;letter-spacing:-.01em}
.ez-mod p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}
/* two featured modules span two columns + brand accent */
.ez-mod--lg{grid-column:span 2;background:linear-gradient(150deg,#faf6ff,#fff)}
.ez-mod--lg::after{content:"";position:absolute;top:-40px;right:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(207,169,79,.16),transparent 70%);pointer-events:none}
.ez-mod--lg .ez-mod__ic{background:var(--grad-cta);color:#fff;border:0;box-shadow:0 10px 22px -10px rgba(109,14,177,.8)}
.ez-mod--lg h3{font-size:19px}
.ez-mod--lg p{font-size:14px}

/* ---- 7. Integrations: copy + connected hub ---- */
.ez-integrate{display:grid;grid-template-columns:1fr .9fr;gap:clamp(34px,5vw,64px);align-items:center}
.ez-integrate__copy h2{font-size:clamp(24px,3vw,36px);margin:14px 0 16px}
.ez-integrate__list{display:grid;gap:16px;margin-top:26px}
.ez-integrate__list li{display:flex;gap:14px;align-items:flex-start}
.ez-integrate__list li .ico{flex:none;width:22px;height:22px;margin-top:2px;color:var(--brand)}
.ez-integrate__list b{display:block;font-family:var(--display);font-size:15px;color:var(--text)}
.ez-integrate__list small{font-size:13px;color:var(--muted);line-height:1.5}
.ez-hub{position:relative;width:100%;max-width:400px;margin:0 auto;aspect-ratio:1}
.ez-hub::before{content:"";position:absolute;inset:9%;border-radius:50%;border:1.5px dashed var(--line-2);animation:ezSpin 40s linear infinite}
.ez-hub::after{content:"";position:absolute;inset:24%;border-radius:50%;border:1px dashed rgba(109,14,177,.16)}
.ez-hub__core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:grid;place-items:center;gap:4px;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#8b2fd6,#57069a);color:#fff;box-shadow:0 22px 46px -18px rgba(109,14,177,.75),inset 0 1px 0 rgba(255,255,255,.25)}
.ez-hub__core .ico{width:30px;height:30px}
.ez-hub__core span{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.02em}
.ez-hub__node{position:absolute;transform:translate(-50%,-50%);z-index:2;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--brand)}
.ez-hub__node .ico{width:22px;height:22px}
.ez-hub__node--1{top:6%;left:50%}
.ez-hub__node--2{top:28%;left:88%}
.ez-hub__node--3{top:72%;left:88%}
.ez-hub__node--4{top:94%;left:50%}
.ez-hub__node--5{top:72%;left:12%}
.ez-hub__node--6{top:28%;left:12%}
@keyframes ezSpin{to{transform:rotate(360deg)}}

/* ---- 8. Engagement journey stepper ---- */
.ez-journey{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0;margin:0;list-style:none;counter-reset:none}
.ez-step{position:relative;padding:36px 24px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.ez-step:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}
.ez-step__num{position:absolute;top:-16px;left:24px;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;font-family:var(--display);font-weight:700;font-size:15px;color:#fff;background:var(--grad-cta);box-shadow:var(--shadow-sm)}
.ez-step__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--grad-soft);color:var(--brand);border:1px solid rgba(109,14,177,.14);margin:6px 0 16px}
.ez-step__ic .ico{width:23px;height:23px}
.ez-step h3{font-size:18px;margin-bottom:9px;letter-spacing:-.01em}
.ez-step p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}

/* ---- reveal stagger for EZMS grids ---- */
.page-ezms .ez-stats .reveal:nth-child(2),.page-truflux .ez-stats .reveal:nth-child(2){transition-delay:.06s}
.page-ezms .ez-stats .reveal:nth-child(3),.page-truflux .ez-stats .reveal:nth-child(3){transition-delay:.12s}
.page-ezms .ez-stats .reveal:nth-child(4),.page-truflux .ez-stats .reveal:nth-child(4){transition-delay:.18s}
.page-ezms .ez-why-grid .reveal:nth-child(3n+2),.page-truflux .ez-why-grid .reveal:nth-child(3n+2){transition-delay:.07s}
.page-ezms .ez-why-grid .reveal:nth-child(3n+3),.page-truflux .ez-why-grid .reveal:nth-child(3n+3){transition-delay:.14s}

/* ---- EZMS responsive ---- */
@media (max-width:980px){
  .ez-hero__grid{grid-template-columns:1fr;gap:38px}
  .ez-hero__panel{max-width:480px}
  .ez-overview{grid-template-columns:1fr;gap:34px}
  .ez-integrate{grid-template-columns:1fr;gap:40px}
  .ez-integrate__copy{text-align:center}
  .ez-integrate__list{text-align:left;max-width:520px;margin-inline:auto}
  .ez-why-grid{grid-template-columns:repeat(2,1fr)}
  .ez-mod-grid{grid-template-columns:repeat(3,1fr)}
  .ez-mod--lg{grid-column:span 1}
  .ez-journey{grid-template-columns:repeat(2,1fr);gap:24px 20px}
}
@media (max-width:720px){
  .ez-stats__grid{grid-template-columns:1fr 1fr}
  .ez-stat:nth-child(odd){border-right:1px solid var(--line)}
  .ez-stat:nth-child(even){border-right:0}
  .ez-stat:nth-child(1),.ez-stat:nth-child(2){border-bottom:1px solid var(--line)}
  .ez-compare{grid-template-columns:1fr;max-width:520px}
  .ez-compare__col--before{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .ez-compare__col--after{border-radius:0 0 var(--radius-lg) var(--radius-lg)}
  .ez-mod-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ez-stats{margin-top:-28px}
  .ez-why-grid{grid-template-columns:1fr}
  .ez-mod-grid{grid-template-columns:1fr}
  .ez-journey{grid-template-columns:1fr;gap:26px}
}
@media (prefers-reduced-motion:reduce){
  .ez-hub::before{animation:none}
  .ez-panel__live i{animation:none}
}

/* ============================================================
   TRUFLUX — Project Management Tool  (scoped under .page-truflux)
   Distinct identity: indigo -> cyan accent, product-led layout
   ============================================================ */
.page-truflux{
  --brand:#4f46e5;          /* indigo */
  --brand-ink:#4338ca;
  --violet:#6366f1;
  --gold:#06b6d4;
  --tf-accent:#4f46e5;
  --tf-accent-2:#06b6d4;
  --tf-ink:#0b1224;
  --brand-grad:linear-gradient(90deg,#4f46e5 0%,#06b6d4 100%);
  --grad:var(--brand-grad);
  --grad-cta:linear-gradient(90deg,#4338ca 0%,#0e7490 100%);
  --grad-text:linear-gradient(90deg,#4338ca 0%,#0e7490 100%);
  --grad-soft:linear-gradient(120deg,rgba(79,70,229,.10),rgba(6,182,212,.12));
  --tf-shadow:0 24px 60px -30px rgba(30,27,75,.5);
}
.page-truflux main{overflow:hidden}
.page-truflux section{padding:clamp(56px,8vh,92px) 0}
.page-truflux .sec-head{max-width:760px}

/* ---- shared mini window chrome (mockups) ---- */
.tf-win{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--tf-shadow);overflow:hidden}
.tf-win__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbfcff,#f4f6fc)}
.tf-win__bar i{width:10px;height:10px;border-radius:50%;background:#d7dcea;flex:none}
.tf-win__bar i:nth-child(1){background:#ff6058}.tf-win__bar i:nth-child(2){background:#ffbd2e}.tf-win__bar i:nth-child(3){background:#28ca42}
.tf-win__bar span{margin-left:8px;font-size:12px;font-weight:600;color:var(--faint)}

/* ============ HERO ============ */
.tf-hero{position:relative;background:
  radial-gradient(ellipse 60% 70% at 85% -5%,rgba(6,182,212,.14),transparent 60%),
  radial-gradient(ellipse 55% 65% at 0% 10%,rgba(79,70,229,.14),transparent 55%),
  linear-gradient(180deg,#fbfcff,#f4f6fd)}
.tf-hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,60px);align-items:center}
.tf-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint);margin-bottom:22px}
.tf-crumb a:hover{color:var(--brand-ink)}
.tf-crumb .ico{width:14px;height:14px}
.tf-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--brand-ink);background:#fff;border:1px solid var(--line-2);padding:7px 14px;border-radius:999px;box-shadow:var(--shadow-xs)}
.tf-pill .ico{width:16px;height:16px;color:var(--tf-accent-2)}
.tf-hero h1{font-size:clamp(32px,5vw,54px);line-height:1.06;letter-spacing:-.02em;margin:20px 0 18px}
.tf-hero__lead{font-size:clamp(16px,1.4vw,18px);color:var(--muted);max-width:560px}
.tf-hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* hero dashboard mockup */
.tf-dash{transform:perspective(1600px) rotateY(-9deg) rotateX(3deg);transform-origin:center}
.tf-dash__body{display:grid;grid-template-columns:64px 1fr;min-height:330px}
.tf-dash__side{background:linear-gradient(180deg,#0b1224,#141c39);padding:16px 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.tf-dash__logo{width:30px;height:30px;border-radius:9px;background:var(--brand-grad);display:grid;place-items:center;color:#fff}
.tf-dash__logo .ico{width:17px;height:17px}
.tf-dash__side i{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.08)}
.tf-dash__side i.on{background:rgba(255,255,255,.22)}
.tf-dash__main{padding:16px 16px 18px;background:#f7f8fc}
.tf-dash__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.tf-dash__stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.tf-dash__stat span{display:block;font-size:10px;color:var(--faint);font-weight:600}
.tf-dash__stat b{font-size:19px;font-family:var(--display)}
.tf-dash__stat b.c1{color:var(--tf-accent)}.tf-dash__stat b.c2{color:var(--tf-accent-2)}.tf-dash__stat b.c3{color:#15803d}
.tf-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tf-col{background:#eef1f8;border-radius:10px;padding:9px}
.tf-col h5{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-bottom:8px;display:flex;justify-content:space-between}
.tf-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:7px;box-shadow:var(--shadow-xs)}
.tf-card .l{height:6px;border-radius:3px;background:#e2e6f0;margin-bottom:6px}
.tf-card .l.s{width:60%}
.tf-card .m{display:flex;align-items:center;justify-content:space-between}
.tf-card .tag{font-size:8px;font-weight:700;padding:2px 6px;border-radius:999px}
.tf-card .tag.a{background:rgba(79,70,229,.12);color:var(--tf-accent)}
.tf-card .tag.b{background:rgba(6,182,212,.14);color:var(--teal-ink)}
.tf-card .tag.c{background:rgba(21,128,61,.12);color:#15803d}
.tf-card .av{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#4f46e5,#06b6d4)}

/* ============ FEATURE SHOWCASE ============ */
.tf-feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(34px,5vw,64px)}
.tf-feat:first-of-type{margin-top:clamp(30px,4vw,52px)}
.tf-feat:nth-child(even) .tf-feat__media{order:-1}
.tf-feat__step{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tf-accent)}
.tf-feat__step b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--grad-soft);border:1px solid rgba(79,70,229,.18);color:var(--tf-accent);font-size:12px}
.tf-feat h3{font-size:clamp(21px,2.6vw,29px);letter-spacing:-.01em;margin:16px 0 12px}
.tf-feat p{color:var(--muted);font-size:15.5px;max-width:520px}
.tf-feat__list{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.tf-feat__list li{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:7px 13px}
.tf-feat__list .ico{width:14px;height:14px;color:var(--tf-accent-2)}
.tf-feat__media{position:relative}

/* mock UI variants inside showcase */
.tf-mock{padding:16px}
.tf-mock--board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#f7f8fc}
.tf-mock--list .row{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px solid var(--line)}
.tf-mock--list .row:last-child{border-bottom:0}
.tf-mock--list .ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--grad-soft);display:grid;place-items:center;color:var(--tf-accent)}
.tf-mock--list .ic .ico{width:17px;height:17px}
.tf-mock--list .tx{flex:1}
.tf-mock--list .tx .a{height:8px;width:45%;border-radius:4px;background:#dfe3ee;margin-bottom:6px}
.tf-mock--list .tx .b{height:6px;width:70%;border-radius:3px;background:#eef1f8}
.tf-mock--list .st{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(6,182,212,.14);color:var(--teal-ink)}
.tf-mock--time{padding:18px 16px;background:#fff}
.tf-mock--time .hd{display:flex;gap:8px;margin-bottom:14px}
.tf-mock--time .hd span{flex:1;text-align:center;font-size:10px;font-weight:700;color:var(--faint);padding-bottom:6px;border-bottom:2px solid var(--line)}
.tf-mock--time .hd span.on{color:var(--tf-accent);border-color:var(--tf-accent)}
.tf-mock--time .bar{height:12px;border-radius:6px;margin-bottom:10px;background:var(--brand-grad);opacity:.85}
.tf-mock--time .bar.w1{width:78%}.tf-mock--time .bar.w2{width:52%;background:linear-gradient(90deg,#06b6d4,#4f46e5);margin-left:14%}
.tf-mock--time .bar.w3{width:64%;margin-left:8%}.tf-mock--time .bar.w4{width:40%;margin-left:30%}

/* ============ PROBLEM BAND ============ */
.tf-problem{position:relative;background:var(--tf-ink);overflow:hidden}
.tf-problem::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 50% 80% at 10% 0%,rgba(79,70,229,.45),transparent 60%),
  radial-gradient(ellipse 50% 80% at 95% 100%,rgba(6,182,212,.35),transparent 60%)}
.tf-problem__in{position:relative;z-index:1;text-align:center;max-width:900px;margin:0 auto}
.tf-problem h2{color:#fff;font-size:clamp(24px,3.4vw,40px);line-height:1.2;letter-spacing:-.01em}
.tf-problem p{color:#aeb6cf;margin:16px auto 30px;font-size:16px}
.tf-problem .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.tf-problem .btn--ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}

/* ============ CAPABILITIES ============ */
.tf-caps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tf-cap{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px 24px;transition:transform .26s var(--ease),box-shadow .26s,border-color .26s}
.tf-cap:hover{transform:translateY(-5px);box-shadow:var(--tf-shadow);border-color:transparent}
.tf-cap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand-grad);transform:scaleY(0);transform-origin:top;transition:transform .28s var(--ease)}
.tf-cap:hover::before{transform:scaleY(1)}
.tf-cap__num{position:absolute;top:14px;right:20px;font-family:var(--display);font-weight:800;font-size:44px;line-height:1;color:transparent;-webkit-text-stroke:1.4px #e6e9f1;background:none}
.tf-cap__ic{display:grid;place-items:center;width:50px;height:50px;border-radius:13px;background:var(--grad-soft);border:1px solid rgba(79,70,229,.16);color:var(--tf-accent);margin-bottom:16px}
.tf-cap__ic .ico{width:24px;height:24px}
.tf-cap__ic-mask{display:block;width:24px;height:24px;background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.tf-cap h3{font-size:17px;letter-spacing:-.01em;margin-bottom:9px}
.tf-cap p{font-size:13.6px;color:var(--muted);line-height:1.6;margin:0}

/* ============ ONE-STOP (two big cards) ============ */
.tf-onestop{background:var(--bg-soft)}
.tf-os-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tf-os{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-xs);padding:30px;transition:transform .26s var(--ease),box-shadow .26s}
.tf-os:hover{transform:translateY(-4px);box-shadow:var(--tf-shadow)}
.tf-os__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--brand-grad);color:#fff;margin-bottom:18px;box-shadow:0 12px 24px -12px rgba(79,70,229,.8)}
.tf-os__ic .ico{width:25px;height:25px}
.tf-os h3{font-size:20px;letter-spacing:-.01em;margin-bottom:10px}
.tf-os p{color:var(--muted);font-size:14.5px;margin-bottom:20px}
.tf-os__ui{border:1px solid var(--line);border-radius:12px;overflow:hidden}
/* login mock */
.tf-login{padding:20px;background:linear-gradient(180deg,#fbfcff,#f4f6fc);text-align:center}
.tf-login .av{width:44px;height:44px;border-radius:50%;background:var(--brand-grad);margin:0 auto 12px}
.tf-login .ln{height:9px;border-radius:5px;background:#e2e6f0;margin:0 auto 9px;max-width:180px}
.tf-login .ln.s{max-width:120px}
.tf-login .gbtn{display:flex;align-items:center;justify-content:center;gap:9px;background:#fff;border:1px solid var(--line-2);border-radius:9px;padding:10px;font-size:12.5px;font-weight:700;color:var(--text);margin-top:14px}
.tf-login .gbtn b{color:#4285F4}
/* metrics mock */
.tf-metrics{padding:8px 16px}
.tf-metrics .r{display:flex;align-items:center;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.tf-metrics .r:last-child{border-bottom:0}
.tf-metrics .r b{font-family:var(--display);font-size:15px;color:var(--text)}
.tf-metrics .r .pill{font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px}
.tf-metrics .r .pill.red{background:#fdecec;color:#c0392b}
.tf-metrics .r .pill.grn{background:#e9f7ee;color:#15803d}
.tf-metrics .r .pill.amb{background:#fdf4e3;color:#8a6a14}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .tf-hero__grid,.tf-os-grid{grid-template-columns:1fr}
  .tf-dash{transform:none;margin-top:8px}
  .tf-feat{grid-template-columns:1fr;gap:24px}
  .tf-feat:nth-child(even) .tf-feat__media{order:0}
  .tf-caps-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .tf-caps-grid{grid-template-columns:1fr}
}

/* ============================================================
   LEADERSHIP MEMBER DETAIL  (leadership-detail*.html)
   Hero reuses the site .os-banner layout: text left (breadcrumb,
   kicker, gradient name, lead, social) + photo showcased on the
   right. No-image variant = same banner, photo omitted (full-width
   text). Navigation via breadcrumb only (no back button).
   ============================================================ */

/* ---- profile banner (extends .os-banner) ---- */
.os-banner--member{color:var(--text)}
.mem-banner{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,5vw,64px);align-items:center}
.mem-banner__text{max-width:640px;min-width:0}
.mem-banner__text .os-banner__lead{color:var(--muted);margin-bottom:24px}
.mem-figure{width:clamp(200px,23vw,264px);aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;border:5px solid #fff;box-shadow:var(--shadow-lg);background:var(--grad-soft);flex:none}
.mem-figure img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* social row (left-aligned in the banner text column) */
.mem-social{display:flex;gap:10px}
.mem-social a{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#fff;border:1px solid var(--line);color:var(--brand);transition:background .2s,color .2s,border-color .2s,transform .18s var(--ease)}
.mem-social a:hover{background:var(--grad-cta);color:#fff;border-color:transparent;transform:translateY(-2px)}
.mem-social .sico{width:17px;height:17px}
.mem-social .ico{width:18px;height:18px}

/* ---- content column (simple prose, matches old site) ---- */
.member{padding:clamp(44px,6vh,68px) 0 84px}
.mem-wrap{max-width:820px;margin-inline:auto}
.mem-block{margin-bottom:34px}
.mem-block:last-child{margin-bottom:0}
.mem-block > h2{font-size:clamp(20px,2.2vw,24px);letter-spacing:-.02em;margin-bottom:14px}
.mem-block p{margin-bottom:14px;font-size:16px;line-height:1.8;color:var(--muted)}
.mem-block p:last-child{margin-bottom:0}
.mem-lead-p{font-size:17px;line-height:1.8;color:var(--text)}

/* simple bullet list (brand dot markers) */
.mem-list{display:grid;gap:12px;margin-top:4px}
.mem-list li{position:relative;padding-left:24px;font-size:16px;line-height:1.7;color:var(--muted)}
.mem-list li b{color:var(--text);font-weight:600}
.mem-list li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--grad-cta)}

@media (max-width:760px){
  .mem-banner{grid-template-columns:1fr;gap:28px}
  .mem-figure{order:-1;width:150px;border-width:4px}
}

/* ============================================================
   ON-SITE MEETINGS — Europe tour landing (onsite-meetings.html)
   Scoped under .page-onsite / .ons-* — reuses tokens, .card,
   .sec-head, .btn, .cta__box, .blog-grid/.post and .cnt-form__*
   field styling. Section order mirrors the original page.
   ============================================================ */

/* ---- 1. banner: dates + booking form ---- */
.ons-hero{position:relative;overflow:hidden;background:var(--grad-soft);padding:clamp(34px,5vh,56px) 0 clamp(48px,7vh,80px)}
.ons-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(109,14,177,.06) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.ons-hero .container{position:relative;z-index:1}
.ons-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,58px);align-items:center}
.ons-hero__copy{min-width:0}
.ons-hero__crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;margin-bottom:18px}
.ons-hero__crumb a{color:var(--faint);transition:color .2s}
.ons-hero__crumb a:hover{color:var(--brand-ink)}
.ons-hero__crumb .ico{width:13px;height:13px;color:var(--line-2)}
.ons-hero__crumb span{color:var(--text);font-weight:600}
.ons-hero__kicker{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:#fff;border:1px solid var(--line-2);padding:7px 15px;border-radius:999px;margin-bottom:20px}
.ons-hero h1{font-size:clamp(30px,4.1vw,48px);letter-spacing:-.035em;line-height:1.1;margin-bottom:14px}
.ons-hero__lead{font-family:var(--display);font-size:clamp(18px,2vw,22px);font-weight:600;color:var(--brand-ink)}

/* country / date strip — one compact pill per country */
.ons-hero__legs{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.ons-leg{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;background:#fff;border:1px solid var(--line-2);border-radius:999px;box-shadow:var(--shadow-xs);transition:border-color .22s,box-shadow .22s,transform .22s var(--ease)}
.ons-leg:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.flag{display:inline-block;flex:none;border-radius:50%;overflow:hidden;vertical-align:middle}
.ons-leg__flag{width:19px;height:19px}
.ons-leg b{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.005em}
.ons-leg__date{padding-left:9px;border-left:1px solid var(--line);font-size:13px;font-weight:600;color:var(--brand-ink);white-space:nowrap}
.ons-hero__note{display:flex;align-items:center;gap:9px;margin-top:24px;font-family:var(--display);font-size:16px;font-weight:600;color:var(--text)}
.ons-hero__note .ico{width:18px;height:18px;color:var(--brand);flex:none}

/* booking form card */
.ons-form{position:relative;padding:32px 30px;border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:var(--shadow-lg)}
.ons-form::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;background:var(--grad);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.35}
.ons-form:hover{transform:none}
.ons-form__head{display:flex;align-items:center;gap:14px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.ons-form__ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:var(--grad-cta);color:#fff}
.ons-form__ic .ico{width:23px;height:23px}
.ons-form__head h2{font-size:21px;letter-spacing:-.02em}
.ons-form__head p{font-size:14px;margin-top:3px}

/* ---- 2. our upcoming visit ---- */
.ons-about{padding:84px 0}
.ons-about__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4vw,56px);align-items:center}
.ons-about__copy h2{font-size:clamp(26px,3.4vw,38px);margin:14px 0 18px;letter-spacing:-.025em;line-height:1.16}
.ons-about__copy p+p{margin-top:14px}
.ons-about__cta{margin-top:28px}
.ons-about__media{min-width:0}
.ons-trip{position:relative;overflow:hidden;padding:28px 26px 26px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.ons-trip::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--brand-grad);opacity:.85}
.ons-trip>*{position:relative;z-index:1}
.ons-trip__head{display:flex;align-items:center;gap:14px;padding-bottom:20px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.ons-trip__ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--grad-soft);border:1px solid var(--line-2);color:var(--brand)}
.ons-trip__ic .ico{width:22px;height:22px}
.ons-trip__title{flex:1;min-width:0}
.ons-trip__title h3{font-size:19px;letter-spacing:-.02em}
.ons-trip__title p{font-size:13px;color:var(--faint);margin-top:3px}
.ons-trip__days{flex:none;text-align:center;padding:8px 14px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--line);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);line-height:1.25}
.ons-trip__days b{display:block;font-family:var(--display);font-size:20px;letter-spacing:-.02em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ons-trip__list{display:flex;flex-direction:column}
.ons-trip__leg{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 0 16px 14px;border-bottom:1px solid var(--line)}
.ons-trip__leg::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--c);opacity:.55}
.ons-trip__flag{width:28px;height:28px}
.ons-trip__body{min-width:0}
.ons-trip__country{display:block;font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--text)}
.ons-trip__dates{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ons-trip__dates span{font-size:12px;font-weight:600;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);padding:3px 10px;border-radius:999px;white-space:nowrap}
.ons-trip__len{flex:none;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c)}
.ons-trip__foot{margin-top:20px}
.ons-trip__foot p{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.55;color:var(--faint)}
.ons-trip__foot .ico{width:15px;height:15px;color:var(--brand);flex:none;margin-top:2px}

/* ---- 4. why DRC systems ---- */
.ons-why{padding:84px 0;background:var(--bg-soft)}
.ons-why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ons-why__item{position:relative;overflow:hidden;padding:30px 26px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:transform .24s var(--ease),box-shadow .24s,border-color .24s}
.ons-why__item::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-cta);transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)}
.ons-why__item:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.ons-why__item:hover::before{transform:scaleX(1)}
.ons-why__num{position:absolute;top:16px;right:20px;font-family:var(--display);font-weight:800;font-size:42px;line-height:1;letter-spacing:-.04em;color:var(--brand);opacity:.07;pointer-events:none;transition:opacity .3s}
.ons-why__item:hover .ons-why__num{opacity:.12}
.ons-why__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--grad-soft);border:1px solid var(--line-2);color:var(--brand);margin-bottom:18px;transition:background .28s,border-color .28s,color .28s}
.ons-why__item:hover .ons-why__ic{border-color:var(--brand);color:var(--brand-ink)}
.ons-why__ic .ico{width:24px;height:24px}
.ons-why__item h3{font-size:18px;letter-spacing:-.015em;line-height:1.3;margin-bottom:9px}
.ons-why__item p{font-size:14.5px;line-height:1.62}
.ons-why__note{max-width:780px;margin:34px auto 0;font-style:italic;font-weight:500;font-size:16px;line-height:1.7;text-align:center;color:var(--muted)}

/* ---- 5. our services ---- */
.ons-svc{padding:84px 0}
.ons-svc__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ons-svc__card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px 24px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:box-shadow .3s var(--ease),border-color .3s var(--ease)}
.ons-svc__card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 7%,#fff),#fff 72%);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.ons-svc__card:hover{box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--c) 30%,var(--line))}
.ons-svc__card:hover::before{opacity:1}
.ons-svc__card>*{position:relative;z-index:1}
.ons-svc__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--c) 11%,#fff);border:1px solid color-mix(in srgb,var(--c) 20%,var(--line));color:var(--c);margin-bottom:6px;transition:background .26s,color .26s,border-color .26s}
.ons-svc__card:hover .ons-svc__ic{background:color-mix(in srgb,var(--c) 18%,#fff);border-color:color-mix(in srgb,var(--c) 34%,var(--line))}
.ons-svc__ic .ico{width:24px;height:24px}
.ons-svc__card h3{font-size:17px;letter-spacing:-.012em;line-height:1.3}
.ons-svc__card p{font-size:14px;line-height:1.6}

/* ---- 6. our clients ---- */
.ons-clients{padding:84px 0;background:var(--bg-soft)}
.ons-logos{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ons-logos__track{display:flex;align-items:stretch;gap:18px;width:max-content;animation:ticker 46s linear infinite}
.ons-logos:hover .ons-logos__track{animation-play-state:paused}
.ons-client{flex:none;display:grid;place-items:center;width:190px;height:96px;padding:16px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs);transition:box-shadow .25s,border-color .25s}
.ons-client:hover{box-shadow:var(--shadow-sm);border-color:rgba(109,14,177,.24)}
.ons-client img{width:100%;height:100%;max-height:52px;object-fit:contain;object-position:center center;filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s;mix-blend-mode:multiply}
.ons-client:hover img{filter:none;opacity:1}

/* ---- 7. knowledge hub ---- */
.ons-blog{padding:84px 0}
.ons-blog .post{overflow:hidden}
.ons-blog__ex{margin:0 20px 22px;font-size:14px;line-height:1.6;color:var(--muted)}
.ons-blog .post h3{margin-bottom:10px}
.ons-blog__cta{display:flex;justify-content:center;margin-top:42px}

/* ---- responsive ---- */
@media (max-width:1080px){
  .ons-hero__grid,.ons-about__grid{grid-template-columns:1fr}
  .ons-svc__grid{grid-template-columns:repeat(2,1fr)}
  .ons-why__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .ons-about,.ons-why,.ons-svc,.ons-clients,.ons-blog{padding:60px 0}
}
@media (max-width:560px){
  .ons-leg{width:100%;justify-content:flex-start}
  .ons-svc__grid,.ons-why__grid{grid-template-columns:1fr}
  .ons-client{width:150px;height:82px;padding:14px 18px}
  .ons-client img{max-height:44px}
  .ons-form{padding:24px 20px}
  .ons-trip{padding:22px 20px}
  .ons-trip__head{flex-wrap:wrap}
  .ons-trip__leg{grid-template-columns:auto 1fr;row-gap:4px}
  .ons-trip__len{grid-column:2;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .ons-logos__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .ons-client[aria-hidden="true"]{display:none}
}


/* ============================================================
   AI, ML & AUTOMATION — ai-ml-automation.html
   Follows the established page language (see .ez-mod / .tf-cap):
   rounded cards, gradient icon tiles, bento spans, accent bars,
   hover lift. Section heads use the global .sec-head/.sec-kicker.
   Reuses .cta__box, .why--svc, .svc-faq, .cnt-form, .showcase.
   ============================================================ */

.aim-sec{padding:clamp(66px,8vh,92px) 0}
.aim-sec--soft{background:var(--bg-soft)}

/* shared card + gradient icon tile (matches .ez-mod / .tf-cap) */
.aim-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:transform .28s var(--ease),box-shadow .28s,border-color .28s}
.aim-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}
.aim-ic{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:var(--grad-soft);color:var(--brand);border:1px solid rgba(109,14,177,.14);margin-bottom:18px}
.aim-ic .ico{width:24px;height:24px}

/* ============================================================
   2. MARKET INSIGHT — minimal figure row on hairline rules
   No cards, shadows, gradients or motion; the numbers carry it.
   ============================================================ */
.mkt{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mkt__item{padding:clamp(30px,3.6vw,48px) clamp(18px,2.2vw,30px);border-right:1px solid var(--line)}
.mkt__item:last-child{border-right:0}
.mkt__val{display:block;font-family:var(--display);font-weight:700;font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.042em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:16px}
.mkt__item p{font-size:14px;line-height:1.6;margin-bottom:12px;max-width:26ch}
.mkt__item em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

@media (max-width:900px){
  .mkt{grid-template-columns:repeat(2,1fr)}
  .mkt__item:nth-child(2n){border-right:0}
  .mkt__item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .mkt{grid-template-columns:1fr}
  .mkt__item{border-right:0}
  .mkt__item+.mkt__item{border-top:1px solid var(--line)}
  .mkt__item p{max-width:none}
}

/* ============================================================
   3. OPPORTUNITY — light statement panel
   Impact comes from type scale and the tinted panel, not colour
   saturation or motion: no hover states, no animation.
   ============================================================ */
.opp{position:relative;overflow:hidden;padding:clamp(36px,4.6vw,68px);border-radius:var(--radius-lg);background:var(--grad-soft);border:1px solid var(--line)}
.opp__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4.5vw,64px);align-items:center}

.opp__tag{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);background:#fff;border:1px solid var(--line-2);padding:7px 15px;border-radius:999px;margin-bottom:22px}
.opp h2{font-size:clamp(27px,3.6vw,44px);letter-spacing:-.032em;line-height:1.14;margin-bottom:20px}
.opp h2 em{font-style:normal;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.opp__lead{font-size:clamp(15px,1.4vw,16.5px);line-height:1.68;max-width:48ch}
.opp__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

.opp__list{display:grid;gap:16px;padding-left:clamp(0px,2vw,26px);border-left:1px solid var(--line-2)}
.opp__list li{display:flex;align-items:flex-start;gap:13px;font-size:15px;line-height:1.5;color:var(--text)}
.opp__list .ico{flex:none;width:22px;height:22px;padding:3px;border-radius:7px;margin-top:1px;box-sizing:border-box;color:var(--brand);background:#fff;border:1px solid var(--line)}

@media (max-width:900px){
  .opp__grid{grid-template-columns:1fr;gap:34px}
  .opp__list{padding-left:0;border-left:0;padding-top:28px;border-top:1px solid var(--line-2)}
  .opp__lead{max-width:none}
}

/* ============================================================
   4. BENEFITS — two columns of horizontal icon-left rows
   Deliberately not a card grid: Expertise and Services already
   use vertical cards, so these read as a list instead.
   ============================================================ */
.aim-benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aim-bene{display:flex;align-items:flex-start;gap:18px;padding:24px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.aim-bene:hover{transform:translateX(5px);box-shadow:var(--shadow-sm);border-color:var(--line-2)}
.aim-bene__ic{display:grid;place-items:center;width:48px;height:48px;min-width:48px;border-radius:14px;background:var(--grad-soft);color:var(--brand);margin-top:2px}
.aim-bene__ic .ico{width:22px;height:22px}
.aim-bene h3{font-size:16.5px;margin-bottom:6px;letter-spacing:-.01em}
.aim-bene p{font-size:14px;line-height:1.6}

@media (max-width:860px){
  .aim-benefits{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .aim-bene:hover{transform:none}
}

/* ============================================================
   5. EXPERTISE — three pillar cards
   Balance is handled structurally: the card is a flex column and
   the capability panel is margin-top:auto, so the panels align on
   a shared baseline no matter how the descriptions wrap.
   ============================================================ */
.aim-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aim-pillar{display:flex;flex-direction:column;padding:30px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:border-color .28s var(--ease),box-shadow .28s}
.aim-pillar:hover{border-color:rgba(109,14,177,.26);box-shadow:var(--shadow)}
.aim-pillar h3{font-size:19px;margin-bottom:10px;letter-spacing:-.015em}
.aim-pillar>p{font-size:14px;line-height:1.66;margin-bottom:24px}

/* capability panel — inset block, pinned to the bottom of the card */
/* the tint is a gradient overlay faded with opacity: transitioning
   `background` from a solid colour to a gradient is not interpolable,
   so it snaps mid-transition and reads as a jump. */
.aim-caps{position:relative;overflow:hidden;margin-top:auto;padding:20px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .28s var(--ease)}
.aim-caps::before{content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:0;transition:opacity .28s var(--ease);pointer-events:none}
.aim-caps>*{position:relative;z-index:1}
.aim-pillar:hover .aim-caps{border-color:rgba(109,14,177,.14)}
.aim-pillar:hover .aim-caps::before{opacity:1}
.aim-caps__label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.aim-caps ul{display:grid;gap:11px}
.aim-caps li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--text);line-height:1.35}
.aim-caps li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--grad-cta)}

/* ============================================================
   6. SERVICES — 3x3 cards, accent bar + outlined numeral
   ============================================================ */
.aim-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.aim-svc{padding:28px 26px 26px}
.aim-svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand-grad);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.aim-svc:hover::before{transform:scaleY(1)}
.aim-svc__num{position:absolute;top:16px;right:22px;font-family:var(--display);font-weight:800;font-size:46px;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--line);pointer-events:none;user-select:none;transition:-webkit-text-stroke-color .3s}
.aim-svc:hover .aim-svc__num{-webkit-text-stroke-color:rgba(109,14,177,.3)}
.aim-svc h3{font-size:17.5px;margin-bottom:10px;letter-spacing:-.012em;max-width:16ch}
.aim-svc p{font-size:13.8px;line-height:1.62}

/* ============================================================
   9. WHY CHOOSE US — tinted cards, circular numeral badge
   Deliberately unlike the Services cards (white + square icon
   tile + corner numeral): tinted fill, no icon, round badge.
   ============================================================ */
.aim-why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.aim-whycard{position:relative;padding:30px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:border-color .28s var(--ease),box-shadow .28s}
.aim-whycard:hover{border-color:rgba(109,14,177,.26);box-shadow:var(--shadow)}
.aim-whycard__n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--bg-soft);border:1px solid var(--line);margin-bottom:20px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.01em;transition:border-color .28s}
.aim-whycard__n span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.aim-whycard:hover .aim-whycard__n{border-color:rgba(109,14,177,.24)}
.aim-whycard h3{font-size:17.5px;margin-bottom:10px;letter-spacing:-.012em}
.aim-whycard p{font-size:14.5px;line-height:1.68}

@media (max-width:1080px){
  .aim-why{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .aim-why{grid-template-columns:1fr}
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1080px){
  .aim-pillars,.aim-svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .aim-pillars,.aim-svc-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .aim-card:hover{transform:none}
}

/* ---- expertise: two-up variant (Pimcore / Ibexa) ---- */
.aim-pillars--two{grid-template-columns:repeat(2,1fr)}

/* ============================================================
   TECH STACK — grouped capability tags
   Light counterpart to the global .svc-stack (which is dark).
   ============================================================ */
.aim-stack{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.aim-stack__group{padding:28px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:border-color .28s var(--ease),box-shadow .28s}
.aim-stack__group:hover{border-color:rgba(109,14,177,.26);box-shadow:var(--shadow)}
.aim-stack__head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.aim-stack__head .aim-ic{margin-bottom:0;width:46px;height:46px;border-radius:12px}
.aim-stack__head .aim-ic .ico{width:22px;height:22px}
.aim-stack__head h3{font-size:17px;letter-spacing:-.012em}
.aim-stack__tags{display:flex;flex-wrap:wrap;gap:8px}
.aim-stack__tags li{padding:7px 14px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--muted);transition:border-color .22s,color .22s}
.aim-stack__group:hover .aim-stack__tags li{border-color:var(--line-2);color:var(--brand-ink)}

@media (max-width:860px){
  .aim-pillars--two{grid-template-columns:1fr}
  .aim-stack{grid-template-columns:1fr}
}

/* ============================================================
   HIRE DEVELOPERS - overview page  (scope: hd-*)
   Page-specific layout only. Everything repeatable comes from
   the shared components:
     banner    -> .os-banner + .os-pills
     filter    -> .cs-filterbar / .cs-chip / .cs-resultbar / .cs-empty
     portfolio -> .cases / .showcase / .show
     form      -> .cnt-form        faqs -> .svc-faq
   ============================================================ */
.hd-sec{padding:96px 0;position:relative}
.hd-sec--soft{background:var(--bg-soft);border-block:1px solid var(--line)}
.hd-sec__head{max-width:760px;margin:0 auto 52px;text-align:center}
.hd-sec__head h2{font-size:clamp(28px,3.6vw,42px)}
.hd-sec__head p{margin-top:16px;font-size:16.5px}

/* ---------- role directory ---------- */
.hd-roles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.hd-role{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:13px;
  padding:26px 24px 22px;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:0 12px 30px -26px rgba(15,23,42,.5);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
/* soft brand wash that fades in from the top-right corner */
.hd-role::before{content:"";position:absolute;z-index:-1;top:-40%;right:-30%;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(109,14,177,.13),transparent 70%);
  opacity:0;transition:opacity .34s var(--ease)}
.hd-role::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)}
.hd-role:hover{transform:translateY(-6px);box-shadow:0 28px 52px -26px rgba(109,14,177,.4);border-color:rgba(109,14,177,.26)}
.hd-role:hover::before{opacity:1}
.hd-role:hover::after{transform:scaleX(1)}
.hd-role:focus-visible{transform:translateY(-6px);border-color:rgba(109,14,177,.26)}

.hd-role__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hd-role__ic{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;
  background:var(--grad-soft);color:var(--brand);border:1px solid rgba(109,14,177,.14);
  transition:background .26s,color .26s,border-color .26s,transform .26s var(--ease)}
.hd-role__ic .ico{width:22px;height:22px}
.hd-role:hover .hd-role__ic{background:var(--grad-cta);color:#fff;border-color:transparent;transform:scale(1.05)}

/* always-visible arrow affordance (replaces the old hover-only text link) */
.hd-role__arrow{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--line-2);
  transition:background .26s,border-color .26s,color .26s,transform .26s var(--ease)}
.hd-role__arrow .ico{width:14px;height:14px}
.hd-role:hover .hd-role__arrow{background:var(--grad-cta);border-color:transparent;color:#fff;transform:translate(3px,-3px)}

.hd-role h3{font-size:16.5px;letter-spacing:-.01em;line-height:1.3;transition:color .22s}
.hd-role:hover h3{color:var(--brand-ink)}
.hd-role p{font-size:13.5px;line-height:1.62;color:var(--muted);margin:0}

/* category chip pinned to the card foot */
.hd-role__cat{margin-top:auto;align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);background:var(--bg-soft);border:1px solid var(--line);
  padding:4px 11px;border-radius:999px;transition:color .24s,background .24s,border-color .24s}
.hd-role:hover .hd-role__cat{color:var(--brand-ink);background:color-mix(in srgb,var(--brand) 8%,#fff);border-color:rgba(109,14,177,.24)}
.hd-role[hidden]{display:none}

/* ---------- why choose: sticky aside + spec-sheet rows ---------- */
.hd-why{display:grid;grid-template-columns:.82fr 1.18fr;gap:60px;align-items:start}
.hd-why__aside{position:sticky;top:calc(var(--header-h) + 40px)}
.hd-why__aside h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:18px}
.hd-why__aside p{font-size:16.5px;line-height:1.72}
.hd-why__aside .sec-kicker{margin-bottom:16px}
.hd-why__aside .hero__actions{margin-top:30px;justify-content:flex-start}

.hd-why__list{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 18px 44px -34px rgba(15,23,42,.5);overflow:hidden}
.hd-val{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;padding:30px 34px;transition:background .26s}
.hd-val + .hd-val{border-top:1px solid var(--line)}
.hd-val::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-cta);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.hd-val:hover{background:linear-gradient(90deg,rgba(109,14,177,.045),rgba(207,169,79,.03) 70%,transparent)}
.hd-val:hover::before{transform:scaleY(1)}
.hd-val__n{font-family:var(--display);font-size:clamp(30px,3vw,40px);font-weight:700;line-height:1;letter-spacing:-.03em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.22;user-select:none;transition:opacity .28s}
.hd-val:hover .hd-val__n{opacity:.6}
.hd-val__kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:7px}
.hd-val__body h3{font-size:19px;letter-spacing:-.01em;margin-bottom:8px}
.hd-val__body p{font-size:14.5px;line-height:1.68;margin:0;max-width:60ch}
.hd-val__ic{width:50px;height:50px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--grad-soft);border:1px solid rgba(109,14,177,.13);color:var(--brand);transition:background .26s,color .26s,border-color .26s,transform .26s var(--ease)}
.hd-val__ic .ico{width:23px;height:23px}
.hd-val:hover .hd-val__ic{background:var(--grad-cta);color:#fff;border-color:transparent;transform:scale(1.06)}

/* ---------- section background rhythm ----------
   banner(tint) > roles(white) > why(soft) > portfolio(white)
   > form(white) > faq(soft).  .cnt-form and .svc-faq keep their
   global defaults; only .cases is flipped, so three soft
   sections never stack after .hd-sec--soft.                  */
.cases.hd-cases{background:var(--bg)}
.hd-form{border-top:1px solid var(--line)}
.hd-form .cnt-form__copy h2{font-size:clamp(26px,3.2vw,38px)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hd-roles{grid-template-columns:repeat(3,1fr)}
  .hd-why{grid-template-columns:1fr;gap:40px}
  .hd-why__aside{position:static}
}
@media (max-width:860px){
  .hd-sec,.hd-form{padding:72px 0}
  .hd-sec__head{margin-bottom:36px}
  .hd-roles{grid-template-columns:repeat(2,1fr)}
  .hd-val{grid-template-columns:auto 1fr;gap:20px;padding:26px 24px}
  .hd-val__ic{grid-column:2;justify-self:start;margin-top:4px}
}
@media (max-width:560px){
  .hd-roles{grid-template-columns:1fr;gap:14px}
  .hd-val{grid-template-columns:1fr;gap:14px;padding:24px 20px}
  .hd-val__ic{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .hd-role:hover,.hd-role:focus-visible{transform:none}
  .hd-role:hover .hd-role__ic,.hd-role:hover .hd-role__arrow,.hd-val:hover .hd-val__ic{transform:none}
}

/* ============================================================
   INDUSTRY PAGES - section modules
   Scoped under .ind-* so all six industry pages (healthcare,
   bfsi, public sector, retail, education, manufacturing) share
   one layout. The section list mirrors the live industry pages
   exactly - hero, company intro, trusted partner, expertise,
   success stories, why choose, benefits, contact, FAQs.
   Shared page chrome (header, os-banner, svc-cta-band, cases,
   cnt-form, svc-faq, marquee, footer) is reused as-is; the
   modules below are the industry-specific pieces.
   ============================================================ */

/* ---- section shell ---- */
.ind-sec{padding:clamp(64px,8vh,92px) 0}
.ind-sec--soft{background:var(--bg-soft)}
.ind-head{max-width:730px;margin:0 auto clamp(34px,4.4vw,52px);text-align:center}
.ind-head h2{font-size:clamp(27px,3.8vw,42px);letter-spacing:-.03em}
.ind-head p{margin-top:16px;font-size:15.5px}

/* ------------------------------------------------------------
   STATS BAND - its own band directly below the page banner
   ------------------------------------------------------------ */
.ind-hband{position:relative;z-index:2}
.ind-hstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.ind-hstat{position:relative;background:#fff;padding:clamp(22px,2.5vw,34px) clamp(20px,2.2vw,28px);transition:background .3s}
.ind-hstat:hover{background:#fcfbfe}
.ind-hstat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand-grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.ind-hstat:hover::after{transform:scaleX(1)}
.ind-hstat__lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.ind-hstat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,36px);line-height:1.05;letter-spacing:-.04em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.ind-hstat span{display:block;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* ------------------------------------------------------------
   1. COMPANY INTRO - centred head over four strength cards.
   Uses the page's own .ind-head rhythm so this section matches
   Trusted Partner / Expertise / Benefits.
   ------------------------------------------------------------ */
.ind-head__actions{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:28px}

.ind-strengths{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ind-attr{display:flex;flex-direction:column;padding:30px 26px 28px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.ind-attr:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(109,14,177,.24)}
.ind-attr__ic{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:var(--grad-soft);border:1px solid rgba(109,14,177,.16);color:var(--brand);margin-bottom:20px}
.ind-attr__ic .ico{width:22px;height:22px}
.ind-attr h3{font-size:17px;font-weight:600;letter-spacing:-.018em;margin:0 0 10px}
.ind-attr p{font-size:13.8px;line-height:1.64;margin:0}

/* ------------------------------------------------------------
   2. TRUSTED PARTNER - solution cards grouped by theme.
   Soft gradient corner wash, category eyebrow, footer arrow.
   ------------------------------------------------------------ */
.ind-svc6{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ind-svcc{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:26px 26px 22px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.ind-svcc::before{content:"";position:absolute;top:-62px;right:-62px;width:172px;height:172px;border-radius:50%;background:var(--grad-soft);opacity:.55;transition:opacity .32s var(--ease),transform .32s var(--ease);pointer-events:none}
.ind-svcc>*{position:relative;z-index:1}
.ind-svcc:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(109,14,177,.24)}
.ind-svcc:hover::before{opacity:1;transform:scale(1.14)}
.ind-svcc__meta{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ind-svcc__cat{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);padding:5px 11px;border-radius:999px;background:#fff;border:1px solid var(--line-2)}
.ind-svcc__n{margin-left:auto;font-family:var(--display);font-size:clamp(32px,3.4vw,42px);font-weight:800;line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px var(--line-2);user-select:none;transition:-webkit-text-stroke-color .32s var(--ease)}
.ind-svcc:hover .ind-svcc__n{-webkit-text-stroke-color:rgba(109,14,177,.34)}
.ind-svcc__ic{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:#fff;border:1px solid var(--line);color:var(--brand);margin-bottom:18px;box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.ind-svcc:hover .ind-svcc__ic{transform:translateY(-2px);border-color:rgba(109,14,177,.26);box-shadow:var(--shadow-sm)}
.ind-svcc__ic .ico{width:23px;height:23px}
.ind-svcc h3{font-size:16.8px;letter-spacing:-.016em;margin-bottom:11px;transition:color .25s}
.ind-svcc:hover h3{color:var(--brand-ink)}
.ind-svcc p{font-size:13.8px;line-height:1.64;margin:0 0 20px}
.ind-svcc__more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--brand);opacity:.6;transition:opacity .28s,border-color .28s}
.ind-svcc:hover .ind-svcc__more{opacity:1;border-color:var(--line-2)}
.ind-svcc__more .ico{width:14px;height:14px;transition:transform .25s var(--ease)}
.ind-svcc:hover .ind-svcc__more .ico{transform:translateX(4px)}

/* ------------------------------------------------------------
   3. EXPERTISE CARDS - left accent, icon header, capability chips
   ------------------------------------------------------------ */
.ind-exp{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ind-expc{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:30px 30px 28px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.ind-expc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand-grad);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.ind-expc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(109,14,177,.22)}
.ind-expc:hover::before{transform:scaleY(1)}
.ind-expc__head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.ind-expc__ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--grad-soft);border:1px solid rgba(109,14,177,.14);color:var(--brand)}
.ind-expc__ic .ico{width:24px;height:24px}
.ind-expc h3{flex:1;min-width:0;font-size:18.5px;letter-spacing:-.018em;margin:0}
.ind-expc p{font-size:14.2px;line-height:1.66;margin:0 0 22px}
.ind-expc__caps{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.ind-expc__caps li{font-size:12.5px;font-weight:500;padding:6px 13px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);transition:border-color .25s,color .25s}
.ind-expc:hover .ind-expc__caps li{border-color:rgba(109,14,177,.2);color:var(--brand-ink)}

/* ------------------------------------------------------------
   4. WHY CHOOSE US - sticky lead + editorial reason rows
   ------------------------------------------------------------ */
.ind-why{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:start}
.ind-why__aside{position:sticky;top:calc(var(--header-h) + 28px)}
.ind-why__aside h2{font-size:clamp(26px,3.5vw,40px);letter-spacing:-.03em;margin-bottom:16px}
.ind-why__aside p{font-size:15px;line-height:1.68;margin-bottom:26px}
.ind-why__rows{display:grid}
.ind-whyrow{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.2vw,28px);padding:26px 0;border-top:1px solid var(--line-2)}
.ind-whyrow:last-child{border-bottom:1px solid var(--line-2)}
.ind-whyrow__n{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--faint);padding-top:4px;transition:color .3s}
.ind-whyrow:hover .ind-whyrow__n{color:var(--brand)}
.ind-whyrow h3{display:flex;align-items:center;gap:10px;font-size:17.5px;letter-spacing:-.016em;margin-bottom:8px}
.ind-whyrow h3 .ico{width:17px;height:17px;color:var(--brand);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s var(--ease)}
.ind-whyrow:hover h3 .ico{opacity:1;transform:none}
.ind-whyrow p{font-size:14.2px;line-height:1.66;margin:0}

/* ------------------------------------------------------------
   5. BENEFITS - centred trio, icon ring fills on hover
   ------------------------------------------------------------ */
.ind-ben{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ind-benc{text-align:center;padding:36px 30px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.ind-benc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(109,14,177,.24)}
.ind-benc__ic{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;margin:0 auto 20px;background:var(--grad-soft);border:1px solid rgba(109,14,177,.16);color:var(--brand);transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.ind-benc:hover .ind-benc__ic{background:var(--grad-cta);border-color:transparent;color:#fff;box-shadow:0 14px 28px -14px rgba(109,14,177,.65)}
.ind-benc__ic .ico{width:27px;height:27px}
.ind-benc h3{font-size:17.5px;letter-spacing:-.016em;margin-bottom:11px}
.ind-benc p{font-size:14px;line-height:1.66;margin:0}

/* ---- responsive ---- */
@media (max-width:1080px){
  .ind-strengths{grid-template-columns:repeat(2,1fr)}
  .ind-svc6{grid-template-columns:repeat(2,1fr)}
  .ind-ben{grid-template-columns:1fr}
  .ind-why{grid-template-columns:1fr}
  .ind-why__aside{position:static}
}
@media (max-width:960px){
  .ind-exp{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ind-sec{padding:56px 0}
  .ind-svc6,.ind-strengths{grid-template-columns:1fr}
  .ind-attr{padding:26px 24px 24px}
  .ind-head__actions .btn{width:100%;justify-content:center}
  .ind-expc{padding:26px 24px 24px}
  .ind-expc__head{gap:13px}
  .ind-benc{padding:30px 24px}
}
@media (prefers-reduced-motion:reduce){
  .ind-attr:hover,.ind-svcc:hover,.ind-expc:hover,.ind-benc:hover{transform:none}
  .ind-svcc:hover::before,.ind-svcc:hover .ind-svcc__ic{transform:none}
  .ind-expc:hover::before,.ind-hstat:hover::after,.ind-attr:hover::before{transition:none}
}

/* ============================================================
   CASE STUDY DETAIL  (casestudy-detail.html — master template)
   Long-form case study template. Section patterns follow the
   reference layouts supplied for this build:
     · icon-led highlight cards        (Moon §6 / eSpark §3)
     · split overview w/ product shot  (Moon §3)
     · notable-features chip banner    (Moon §4)
     · challenges | solutions columns  (Moon §5)
     · impact = narrative + list + KPI (eSpark §15)
     · differentiator cards            (eSpark §12)
     · labelled interface highlights   (eSpark §10)
   Motion is CSS transitions + the site's .reveal observer only —
   no animation library, no scroll pinning or scrubbing.
   Tokens only — no new colours, no new fonts.
   ============================================================ */

/* ---- shared dark band (matches .svc-cta-band / .svc-stack) ---- */
.csd-dark{position:relative;overflow:hidden;background:#0f172a}
.csd-dark::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 85% at 12% 0%,rgba(109,14,177,.5),transparent 60%),radial-gradient(ellipse 50% 80% at 92% 100%,rgba(207,169,79,.26),transparent 60%)}
.csd-dark .container{position:relative;z-index:1}
.csd-dark h2,.csd-dark h3{color:#fff}
.csd-dark p{color:#94a3b8}
.csd-dark .sec-kicker{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#c4b5fd}
/* Safeguard: .grad is the LIGHT-background brand gradient (#6d0eb1 -> #9a7a1e)
   and disappears on a dark band. Copies of this template that reach for the
   familiar .grad inside a dark section get the .grad-light ramp instead, so a
   headline can never silently render dark-on-dark. */
.csd-hero .grad,.csd-dark .grad,.csd-cs .grad,.csd-notable .grad,.csd-outro .grad,.svc-stack .grad{
  background:linear-gradient(to right,#c4b5fd,#fcd34d);-webkit-background-clip:text;background-clip:text;color:transparent}
/* section head, left-aligned variant (references use left far more than centred) */
/* .csd-head was a left-aligned section head used only by the case study
   pages. It has been retired: every section head across the collection
   now uses the site-wide .sec-head (see the top of this file), the same
   one index.html uses, so a heading looks identical wherever it appears.
   The dark bands need no override - .csd-dark styles h2, p and
   .sec-kicker directly rather than the head wrapper. */

/* ---- A . banner (no image) ----
   Typographic banner: the headline carries it, so there is no device
   composition, no phone, no glow and no scroll cue to hold a picture in
   place. Height is content plus padding rather than a forced 88vh, which
   takes roughly 230px off the fold without crowding anything. Atmosphere
   is the aurora and the grid overlay, both already in the page. */
/* Symmetric padding, no --header-h term: .header is sticky, so it sits in
   normal flow and the band already starts below it. Adding the header
   height here (as a fixed header would need) put a surplus 72px on top
   that the bottom never had - 136px against 72px. */
/* The ribbon that follows overlaps upward by --csd-ribbon-lift, eating the
   hero's bottom padding: the band stayed symmetric but the visible gap fell
   to 34px against 86px on top. Hand that space back, and only when the
   ribbon is actually there, so removing it does not leave a hole. */
.csd-hero:has(+ .csd-facts){padding-bottom:calc(var(--csd-band) + var(--csd-ribbon-lift))}
.csd-hero{position:relative;overflow:hidden;
  padding:var(--csd-band) 0;
  background:
    radial-gradient(ellipse 58% 82% at 8% 6%,rgba(109,14,177,.6),transparent 62%),
    radial-gradient(ellipse 46% 68% at 78% 96%,rgba(207,169,79,.20),transparent 62%),
    linear-gradient(118deg,#1c0839 0%,#140830 32%,#0f172a 74%,#0b1120 100%)}
.csd-hero .container{position:relative;z-index:2}
/* outer cap for the whole banner column - the h1 and lead measures below
   are the real line-length control, so this only has to stay clear of them */
.csd-hero__inner{max-width:1080px}
/* re-enables the site .aurora blobs (globally display:none) inside the hero
   only, so the page-level fixed .aurora markup stays untouched everywhere */
.csd-hero__aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.csd-hero__aurora .aurora__blob{display:block;position:absolute;border-radius:50%;filter:blur(90px)}
.csd-hero__aurora .aurora__blob--1{width:40vw;height:40vw;top:-18%;left:-8%;background:rgba(109,14,177,.5)}
.csd-hero__aurora .aurora__blob--2{width:30vw;height:30vw;bottom:-24%;right:6%;background:rgba(207,169,79,.16)}
.csd-hero__aurora .aurora__blob--3{width:26vw;height:26vw;top:24%;left:46%;background:rgba(124,58,237,.24)}
.csd-hero__grid{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 66% 70% at 26% 22%,#000,transparent 78%)}
.csd-hero__crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;margin-bottom:20px}
.csd-hero__crumb a{color:#94a3b8;transition:color .2s}
.csd-hero__crumb a:hover{color:#fff}
.csd-hero__crumb svg{width:13px;height:13px;color:rgba(255,255,255,.28)}
.csd-hero__crumb span{color:#e2e8f0;font-weight:600}
.csd-hero__kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#c4b5fd;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);padding:6px 14px;border-radius:999px;margin-bottom:18px}
/* measures are in ch so they track the font size - a long-question headline
   ("How has this healthcare platform...") gets a wider column without the
   short ones going slack, since they run out of words before the cap */
.csd-hero h1{color:#fff;font-size:clamp(34px,5vw,58px);line-height:1.05;
  letter-spacing:-.03em;margin:0 0 18px;max-width:22ch}
.csd-hero__lead{color:#cbd5e1;font-size:clamp(15.5px,1.5vw,18px);line-height:1.7;max-width:78ch}
/* word stagger - caseStudyDetail() wraps each word, CSS does the motion.
   Without JS the h1 is plain text and simply renders normally. */
.csd-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.csd-h1--split .csd-w__i{display:inline-block;transform:translateY(110%);
  animation:csdWordUp .72s cubic-bezier(.16,1,.3,1) forwards}
@keyframes csdWordUp{to{transform:translateY(0)}}
/* ---- banner entrance ----
   One timeline for the whole band. Order follows the reading order:
   breadcrumb, kicker, then the h1 words (offset in heroWords() so they
   land after the kicker), then the lead, then the pills. Without JS the
   .js gate never applies and everything is simply present. */
@keyframes csdRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.js .csd-hero__crumb,
.js .csd-hero__kicker,
.js .csd-hero__lead,
.js .csd-hero .os-pill{opacity:0;animation:csdRise .62s var(--ease) forwards}
.js .csd-hero__crumb{animation-delay:.04s}
.js .csd-hero__kicker{animation-delay:.11s}
/* h1 words occupy roughly .18s - .45s */
.js .csd-hero__lead{animation-delay:.46s}
.js .csd-hero .os-pill:nth-child(1){animation-delay:.54s}
.js .csd-hero .os-pill:nth-child(2){animation-delay:.60s}
.js .csd-hero .os-pill:nth-child(3){animation-delay:.66s}
.js .csd-hero .os-pill:nth-child(4){animation-delay:.72s}
.js .csd-hero .os-pill:nth-child(n+5){animation-delay:.78s}

/* .os-pill is authored for light backgrounds - relight it on the dark band */
.csd-hero .os-pills{margin-top:26px;gap:9px}
.csd-hero .os-pill{color:#e2e8f0;background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);font-size:13px;padding:8px 14px}
.csd-hero .os-pill .ico{color:#c4b5fd}

@media (max-width:900px){
  .csd-hero h1{max-width:none}
}

/* ---- B · project highlights (icon-led fact cards) ---- */
.csd-facts{position:relative;z-index:3;margin-top:calc(var(--csd-ribbon-lift) * -1);
  /* surface the ribbon's lower half sits on - set it to the background of
     the band that follows, so the two read as one continuous surface */
  --csd-ribbon-bg:var(--bg-soft)}
/* Without this the strip between the banner and the first band is the bare
   page: a white gap under the ribbon that detached it from both. The fill
   starts at --csd-ribbon-lift, i.e. exactly where the banner ends, so it
   never paints over the dark hero the ribbon climbs into. */
.csd-facts::before{content:"";position:absolute;z-index:-1;left:0;right:0;
  top:var(--csd-ribbon-lift);bottom:0;background:var(--csd-ribbon-bg)}
.csd-facts__grid{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(var(--csd-facts,4),1fr);overflow:hidden}
.csd-fact{display:flex;align-items:flex-start;gap:14px;padding:26px 24px;border-right:1px solid var(--line)}
.csd-fact:last-child{border-right:0}
.csd-fact__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--grad-soft);border:1px solid rgba(109,14,177,.14);color:var(--brand)}
.csd-fact__ic .ico{width:21px;height:21px}
.csd-fact__k{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.csd-fact__v{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.35;color:var(--text)}
/* numeric variant, for case studies that publish figures */
.csd-fact__v--num{font-size:clamp(24px,2.6vw,32px);line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
/* The first band is pulled up under the ribbon by the part of it that
   hangs below the banner (--csd-ribbon-h minus the lift), so its surface
   starts at the banner's edge and no page white is left showing between
   the two. Its top padding takes that pull back plus its own breathing
   room, so the copy still clears the ribbon.
   --csd-ribbon-h is deliberately a touch under the real ribbon height:
   erring short overlaps the banner's last pixels, which is invisible on a
   flat dark band, where erring long would reopen the white strip. */
.csd-facts + section{
  margin-top:calc(var(--csd-ribbon-lift) - var(--csd-ribbon-h));
  padding-top:calc(var(--csd-ribbon-h) - var(--csd-ribbon-lift) + clamp(30px,3vw,44px))}

/* ---- C . overview of the client (editorial split) ----
   Narrative carries the section; the right rail is a sticky identity +
   spec card. Deliberately NO product shot here - the hero already shows
   the dashboard, and repeating it made the two columns compete. The rail
   holds the technical spec, which is the one set of facts the highlight
   ribbon above does not already state. */
.csd-overview{padding:var(--csd-band) 0;background:#fff}
/* Soft variant, for the pages whose source publishes no separate
   objectives list - there the overview absorbs the "what the client
   needed" role, so it takes the soft background .csd-obj carries on
   every other page. Also stops it merging into the white .csd-deep
   challenges band that follows. */
.csd-overview--soft{background:var(--bg-soft)}
/* The two halves are revealed together: observed individually, the sticky
   spec card crossed the threshold before the copy and looked like it had
   never animated at all. */
.js .csd-overview__grid.reveal > *{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .csd-overview__grid.reveal.in > *{opacity:1;transform:none}
.js .csd-overview__grid.reveal.in > *:nth-child(2){transition-delay:.12s}
.csd-overview__grid{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(36px,5vw,80px);align-items:start}
.csd-overview__copy .sec-kicker{margin-bottom:16px}
.csd-overview__copy h2{font-size:clamp(27px,3.3vw,42px);letter-spacing:-.025em;margin-bottom:26px;max-width:20ch}
.csd-overview__copy p{margin-bottom:18px;font-size:16.5px;line-height:1.78;color:var(--muted)}
/* the lede gets an editorial rule and sits a step up in weight */
.csd-lede{position:relative;padding-left:22px;font-size:clamp(17px,1.7vw,19.5px);line-height:1.72;
  color:var(--text);font-weight:500;margin-bottom:24px}
.csd-lede::before{content:"";position:absolute;left:0;top:.34em;bottom:.24em;width:3px;border-radius:3px;background:var(--grad-cta)}
/* "the brief" pull-block - the client ask, stated once, given weight */
.csd-brief{position:relative;margin:30px 0 0;padding:26px 30px;border-radius:var(--radius-lg);
  background:var(--grad-soft);border:1px solid rgba(109,14,177,.14)}
.csd-brief__label{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.csd-brief__label .ico{width:15px;height:15px}
.csd-brief p{margin:0;font-family:var(--display);font-size:clamp(16px,1.7vw,18.5px);line-height:1.6;
  font-weight:500;color:var(--text)}
.csd-overview__actions{margin-top:32px}

/* identity + spec rail */
.csd-proj-card{position:sticky;top:calc(var(--header-h) + 24px);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);background:#fff}
.csd-proj-card__id{display:flex;align-items:center;gap:14px;padding:22px 22px 20px;
  background:linear-gradient(150deg,#1c0839,#0f172a)}
.csd-proj-card__mono{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:var(--grad-cta);color:#fff;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.02em}
.csd-proj-card__who b{display:block;font-family:var(--display);font-size:15.5px;font-weight:600;color:#fff;line-height:1.3}
.csd-proj-card__who span{display:block;font-size:12.5px;color:#94a3b8;margin-top:3px}
.csd-proj-card__eyebrow{padding:14px 22px 0;font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}
.csd-proj-card__body{background:#fff;padding:8px 0 6px}
.csd-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 22px;font-size:13.5px;border-bottom:1px solid var(--line)}
.csd-row:last-child{border-bottom:0}
.csd-row__key{color:var(--faint);flex-shrink:0}
.csd-row__val{font-weight:600;color:var(--text);text-align:right}
.csd-proj-card__foot{display:flex;align-items:center;gap:9px;padding:14px 22px;
  border-top:1px solid var(--line);background:var(--bg-soft);font-size:12.5px;font-weight:600;color:var(--brand-ink)}
.csd-proj-card__foot .ico{width:15px;height:15px;color:var(--green)}

/* ---- E · notable features (chip banner on a dark band) ---- */
.csd-notable{padding:var(--csd-band) 0}
.csd-notable__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.csd-chip{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--radius);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.csd-chip:hover{background:rgba(255,255,255,.09);border-color:rgba(196,181,253,.35);transform:translateY(-3px)}
.csd-chip__ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#c4b5fd}
.csd-chip__ic .ico{width:20px;height:20px}
.csd-chip b{display:block;font-family:var(--display);font-size:15px;font-weight:600;color:#fff;line-height:1.35}
.csd-chip small{display:block;font-size:12.5px;color:#94a3b8;margin-top:3px;line-height:1.5}
/* Some case studies publish these as icon + sentence with no label of
   their own. A chip carrying a single text block renders that block as
   one readable statement line, rather than as the heavy 15px display
   weight the b + small pairing uses for its title. Same normalisation
   principle as .csd-obj__card above. */
.csd-chip > div:not(:has(small)) > b{font-size:14px;font-weight:500;line-height:1.6;color:#e2e8f0}

/* ---- E . objectives ---- */
/* The band is lit rather than flat: two wide, low-opacity brand washes
   sit behind the grid so the soft-grey surface has depth. They are on a
   pseudo rather than the section background so the .csd-obj--? variants
   and the band token stay untouched. */
.csd-obj{position:relative;overflow:hidden;padding:var(--csd-band) 0;background:var(--bg-soft)}
.csd-obj::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 52% 58% at 10% -4%,rgba(109,14,177,.09),transparent 62%),
    radial-gradient(ellipse 46% 54% at 92% 104%,rgba(207,169,79,.11),transparent 62%)}
.csd-obj .container{position:relative;z-index:1}
.csd-obj__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* 2-up variant, for a section carrying only two cards - at repeat(3,1fr)
   two cards leave a dead third column. Declared before the responsive
   block later in the file, which still collapses it. Mirrors
   .csd-deep__grid--2. */
.csd-obj__grid--2{grid-template-columns:repeat(2,1fr)}
/* ---- the card ----
   There is no numeral. The old 84px watermark was removed and not
   replaced: it collided with long headings, sat invisibly at 7% opacity
   on some screens, and an enumeration adds nothing here - the cards are
   already in order and every one is a statement in its own right.
   The interest is carried by light instead, at rest and on hover:
     - a gradient edge down the left, always on, which gives the grid a
       strong vertical rhythm no numeral could
     - a brand bloom in the top-left that expands on hover
     - the surface warming from white to a barely-there tint
   Deliberately mirrored against .csd-feat--imm, the challenges card,
   which blooms from the top-RIGHT and keeps its numeral. Side by side
   down the page the two bands lean opposite ways rather than repeating.

   isolation + z-index 0 on the pseudos, NOT z-index -1: a negative index
   paints them behind the card's own background and nothing shows. The
   children are lifted to z-index 1 to sit above both layers - the same
   approach .csd-feat--imm uses.

   It is GLASS, and it is the only glass card in the collection. Every
   other card here is opaque white with a painted-on accent, and each of
   those accents is already taken: .csd-apart__card owns the gradient
   left rule, .csd-feat--imm owns the top-right corner aurora and the
   numeral watermark, .csd-chip owns the translucent dark pill. A fourth
   variation on "white card plus an accent" would just look like a fifth
   sibling, so this one changes material instead of decoration.

   How it works: the band behind it is lit (see .csd-obj::before), the
   card is semi-transparent and blurs what is behind it, so each card
   picks up whatever brand light happens to fall where it sits. Cards on
   the left of the grid read faintly violet, cards bottom-right faintly
   gold, and no two are identical. Nothing is painted per card to
   achieve it.

   The hover is a single gesture, not a stack of small ones: the light
   --grad-soft wash floods the card as a circle expanding from the
   bottom-left corner. One thing happens, and it is the only
   fill-on-hover in the collection - every other card here just lifts and
   warms its hairline.
   The wash is deliberately the SAME gradient the page banners use
   (.os-banner), so the card resolves into a surface the rest of the site
   already speaks in rather than a colour that appears nowhere else. It
   stays light, so the text stays dark and contrast is never at risk.
   clip-path:circle() is used rather than a transform so the gradient
   never stretches, and rather than a left-to-right wipe so the motion
   reads as ink spreading rather than a progress bar. Geometry never
   changes; only colour moves.

   backdrop-filter and mask-composite are both already dependencies of
   this stylesheet (13 and 3 prior uses), so no new browser requirement.
   Without backdrop-filter support the card degrades to a plain
   translucent white panel, which is still correct. */
.csd-obj__card{position:relative;isolation:isolate;overflow:hidden;
  padding:32px 30px;
  background-color:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 1px 2px rgba(16,24,40,.05),
             0 12px 30px -16px rgba(109,14,177,.30);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             border-color .45s var(--ease)}
.csd-obj__card > *{position:relative;z-index:1}
/* the ink: --grad-soft, the same light violet-to-gold wash the section
   banners use (see .os-banner on leadership, our-story and the rest),
   over an opaque white base so it reads as a clean tinted surface
   rather than a second layer of haze on the glass.
   Clipped to nothing at the bottom-left corner, expanded past the far
   corner on hover. 150% covers the diagonal of the widest card. */
.csd-obj__card::before{content:"";position:absolute;z-index:0;inset:0;
  background-color:#fff;background-image:var(--grad-soft);
  clip-path:circle(0% at 8% 96%);pointer-events:none;
  transition:clip-path .62s var(--ease)}
.csd-obj__card:hover{transform:translateY(-6px);
  border-color:rgba(109,14,177,.22);
  box-shadow:0 2px 4px rgba(16,24,40,.05),
             0 20px 40px -18px rgba(109,14,177,.30)}
.csd-obj__card:hover::before{clip-path:circle(150% at 8% 96%)}
.csd-obj__card h3{font-size:17.5px;margin-bottom:10px;letter-spacing:-.01em}
.csd-obj__card p{font-size:14.5px;line-height:1.68}

/* ---- the brand marker ----
   A target glyph in the brand gradient, set against whichever element
   leads the card: the heading normally, the paragraph on the pages whose
   source publishes no titles. Objectives are goals, so a target reads
   correctly, and it is deliberately NOT the check used by the solution
   lists - the two sections should not share a bullet.

   Drawn as a masked data-URI rather than an <svg><use>: the sprite route
   would mean editing 106 cards across 23 pages for something purely
   decorative, and a mask lets the glyph carry --grad-cta rather than a
   flat colour. Two data-URI icons already ship in this stylesheet, so
   the technique is not new here.

   The lead element becomes a 2-column grid so a wrapping title hangs
   clear of the glyph instead of running back under it.

   Every shape top-aligns the glyph with the first line of its text, so
   a wrapping title or a multi-line sentence never leaves the marker
   floating in the middle of the block. Only the baseline nudge differs,
   below, because the heading and the larger single-block paragraph sit
   at different cap heights. */
.csd-obj__card > :is(h3, p):first-child{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
/* 19px glyph + 11px gap - keeps the description on the title's column */
.csd-obj__card > h3:first-child + p{padding-left:30px}
.csd-obj__card > :is(h3, p):first-child::before{
  content:"";width:19px;height:19px;
  background:var(--grad-cta);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .45s var(--ease)}
/* baseline nudge - the heading and the larger single-block paragraph
   sit at different cap heights, so each gets its own */
.csd-obj__card > h3:first-child::before{margin-top:3px}
.csd-obj__card > p:first-child::before{margin-top:2px}
/* the target tightens as the wash arrives - a scale only, since
   concentric circles are rotationally symmetric and a spin would be
   invisible */
.csd-obj__card:hover > :is(h3, p):first-child::before{transform:scale(1.14)}
@media (prefers-reduced-motion:reduce){
  .csd-obj__card:hover > :is(h3, p):first-child::before{transform:none}
}
@media (prefers-reduced-motion:reduce){
  /* the card still fills and the text still inverts - that is colour,
     not motion - but the ink stops travelling and the card stops
     lifting. The shared :hover transform:none rule further down covers
     the lift; this kills the spread. */
  .csd-obj__card{transition:box-shadow .35s var(--ease),border-color .35s var(--ease)}
  .csd-obj__card::before{transition:none}
}
/* The card takes three content shapes across the collection, because the
   sources publish their objectives three ways, and all three are in use:
     title + description   9 pages (open edX, python, lxp-lms, skill
                                    india, mutual fund, in-vehicle,
                                    wealth, urban water, master)
     title only            3 pages (immunization, sales force, ezms)
     sentence only        11 pages (healthcare, computer vision,
                                    interview, bid, database, erp, custom
                                    ai/ml, hpe, modern ai, privategpt,
                                    wordpress)
   A card carrying a SINGLE text block gets that block sized up to lead
   the card - it is the whole content, not a caption - but each keeps the
   weight its tag has earned. An earlier version set both to 600 so the
   two shapes matched exactly; that was wrong. A sentence-only card was
   then a bold paragraph, which reads as emphasis the copy never asked
   for, and semibold across 25 words is heavy.

   There are now only TWO shapes in the markup, not three:
     title + description - heading treatment, unchanged
     single block        - prose, 16px/400, sized up but never bolded
   The old third shape, a card holding a bare <h3> and nothing else, was
   removed at source: those 13 cards (sales-force x4, ezms x5,
   immunization x4) had their <h3> rewritten to <p>, so a lone statement
   is now the same element and the same treatment wherever it appears,
   whether it runs to three words or thirty. The h3-only guard that used
   to sit here is gone with them - it can no longer match anything.
   :has() is already a dependency of this stylesheet (see
   .csd-hero:has(+ .csd-facts)). */
.csd-obj__card:not(:has(h3)) > p{
  font-size:16px;font-weight:400;line-height:1.65;
  color:var(--text);margin-bottom:0}

/* ---- F . challenges | solutions ----
   Reference: Moon section 5. ONE grid, not two independent columns: each
   pair occupies a single grid row, so a challenge and its solution always
   sit level with each other and stay the same height however long the copy
   runs. Below 900px the grid becomes one column and the DOM order
   (C1, S1, C2, S2 ...) keeps every pair adjacent with no ordering rules,
   so any number of pairs works. */
.csd-cs{padding:var(--csd-band) 0}
.csd-cs__cols{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px) clamp(20px,3vw,40px);align-items:stretch}
.csd-cs__colhead{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.12)}
.csd-cs__colic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.csd-cs__colic .ico{width:18px;height:18px}
.csd-cs__colhead--problem .csd-cs__colic{color:#fca5a5}
.csd-cs__colhead--answer .csd-cs__colic{color:#c4b5fd;background:rgba(109,14,177,.24);border-color:rgba(196,181,253,.3)}
.csd-cs__colhead h3{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.csd-cs__item{position:relative;display:grid;grid-template-columns:auto 1fr;gap:16px;align-content:start;padding:22px 24px;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:background .25s var(--ease),border-color .25s var(--ease)}
.csd-cs__item--answer{background:rgba(109,14,177,.15);border-color:rgba(196,181,253,.22)}
.csd-cs__item:hover{border-color:rgba(196,181,253,.42)}
.csd-cs__no{font-family:var(--display);font-weight:700;font-size:26px;line-height:1;letter-spacing:-.03em;color:rgba(255,255,255,.22);font-variant-numeric:tabular-nums}
.csd-cs__item--answer .csd-cs__no{color:rgba(196,181,253,.55)}
.csd-cs__item h4{font-size:16.5px;color:#fff;line-height:1.35;margin-bottom:8px;letter-spacing:-.01em}
.csd-cs__item p{font-size:14.5px;line-height:1.7;color:#cbd5e1}
/* row labels shown only in the stacked, single-column view */
.csd-cs__inline{display:none;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#94a3b8;margin-bottom:8px}
.csd-cs__item--answer .csd-cs__inline{color:#c4b5fd}

/* ---- G . solution deep-dive ---- */
/* A whisper of brand light across the band. It is barely visible on its
   own - the band still reads as white in the alternating rhythm - but it
   is what the frosted cards pick up when they turn to glass on hover.
   Over flat white a translucent card is indistinguishable from an opaque
   one, so without this the glass effect has nothing to work with. */
.csd-deep{position:relative;overflow:hidden;padding:var(--csd-band) 0;background:#fff}
.csd-deep::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 56% at 88% 0%,rgba(109,14,177,.07),transparent 62%),
    radial-gradient(ellipse 44% 52% at 6% 100%,rgba(207,169,79,.08),transparent 62%)}
.csd-deep .container{position:relative;z-index:1}
.csd-deep__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* 2-up variant, for a section carrying only two cards - at repeat(3,1fr)
   two cards leave a dead third column. Declared before the responsive
   block below, which is later in the file and so still collapses it. */
.csd-deep__grid--2{grid-template-columns:repeat(2,1fr)}
.csd-feat{padding:30px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.csd-feat:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(109,14,177,.18)}
.csd-feat__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--grad-soft);border:1px solid rgba(109,14,177,.14);color:var(--brand);margin-bottom:18px}
.csd-feat__ic .ico{width:24px;height:24px}
.csd-feat h3{font-size:17.5px;margin-bottom:10px;letter-spacing:-.01em}
.csd-feat p{font-size:14.5px;line-height:1.68}
/* optional sub-clustering (e.g. RFP Engine -> Eligibility -> Proposal Automation) */
/* Clustering: for a source that groups its items under named sub-headings
   (e.g. RFP Engine -> Eligibility Check -> Proposal Automation). The head
   is shared by .csd-deep and .csd-apart so a solutions block can carry
   sub-groups without leaving .csd-apart, which is this collection's
   component for solutions. */
.csd-deep__cluster + .csd-deep__cluster,
.csd-apart__cluster + .csd-apart__cluster{margin-top:44px}
/* numeral and title on the first line; an optional lead paragraph wraps
   to its own line beneath the title, indented past the numeral so it
   aligns under it. flex-wrap + flex-basis:100% does the wrap without a
   markup change; the indent is the numeral's 34px plus the 14px gap. */
.csd-clusterhead{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.csd-clusterno{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad-cta);color:#fff;font-family:var(--display);font-weight:700;font-size:14px}
.csd-clusterhead h3{font-size:19px;letter-spacing:-.01em}
.csd-clusterhead p{flex-basis:100%;margin-top:8px;padding-left:48px;font-size:14px;line-height:1.65}
/* Composition, not a new component: a feature card may carry the Interface
   Highlights check-list in place of its paragraph, for capabilities whose
   detail is a set of points rather than a sentence. Slightly tighter than
   in .csd-screen, where the list has a full column to run in. */
.csd-feat .csd-screen__pts{gap:10px;margin-top:4px}
.csd-feat .csd-screen__pts li{font-size:14px;line-height:1.62}
.csd-feat .csd-screen__pts .ico{width:15px;height:15px;margin-top:2px}

/* ---- .csd-feat--imm : the card, dressed ----
   The hover is the RIM and nothing else. The surface stays pure white -
   no wash, no texture, no glow - and the 1px grey hairline is replaced
   by a brand-gradient ring that fades up around the whole card.

   Chosen because it is the one register left unused here:
     .csd-apart__card  gradient left rule (one edge, always on)
     .csd-obj__card    glass, then an ink wash from the bottom-left
     .csd-feat         plain white, lifts
     .csd-chip         translucent dark pill
   A full gradient ring is the left rule's opposite - it closes rather
   than points, and it only exists on hover.

   Technique is the house one, already used by .cnt-form__card and
   .ons-form: a pseudo inset -1px so it covers the border exactly,
   filled with the gradient, then masked with composite:exclude so only
   the 1px edge paints. NOTE: the card must NOT carry overflow:hidden or
   the -1px offset clips and the ring loses its outer half.

   Only opacity and colour animate. Nothing translates, scales, blurs or
   resizes, so a grid of eight cards stays calm as the pointer crosses.

   The numeral is a large outlined watermark in the bottom-right corner
   (same data-n attribute, no markup change). It brightens with the rim
   so the two read as one gesture rather than two separate events. */
.csd-feat--imm{position:relative;isolation:isolate;
  /* rest values stated explicitly so every transition has a start */
  background-color:#fff;border-color:var(--line);box-shadow:var(--shadow-xs)}
.csd-feat--imm > *{position:relative;z-index:2}
/* the rim: 2px brand gradient laid over the hairline. inset stays at -1px
   (matching .cnt-form__card) so the ring grows 1px out and 1px in rather
   than pushing away from the card edge. */
.csd-feat--imm::after{content:"";position:absolute;z-index:1;inset:-1px;
  border-radius:inherit;padding:1px;background:var(--grad-cta);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease)}
/* the watermark: a large numeral filled with the brand gradient, so it
   carries the same violet-to-gold ramp as the rim on ::after. The glyph
   is painted by clipping --grad-cta to the text, which is why the fill
   colour is transparent.

   It replaced a hollow, brand-stroked version. Worth recording why the
   hollow one could not simply be tinted: -webkit-text-stroke takes a
   single flat colour, there is no gradient stroke in CSS, and faking one
   needs a second layer to knock the interior back out - both pseudos on
   this card are already spoken for (::after is the rim). A gradient
   outline was therefore not reachable without extra markup.

   The trade is real. An outline has an edge, so the eye reads it as a
   drawn mark; a filled glyph at low alpha is the shape that read as a
   printing fault in earlier passes here. The gradient earns some of that
   back - it is obviously deliberate in a way flat grey is not - but the
   alpha does the rest of the work, hence .1 at rest rather than the
   outline's .5. If it still reads heavy, that value is the dial.

   Top-right, opposite the .csd-feat__ic tile at top-left, so the two
   corner marks balance across the card's head.

   z-index:0 puts it above the card's own background and below the copy
   (which is z-index:2), so the heading always wins the overlap. No
   padding-right is set on the heading - it keeps its full measure and
   simply runs over the mark, which is how a watermark should behave.

   The hover is opacity ONLY, and deliberately a small step: .1 to .18.
   The rim is the event on this card; the watermark should acknowledge the
   pointer, not compete with it. A wider ramp (the .16-to-.4 tried before)
   pulled the eye to the corner and away from the copy.

   Transparent fill means that in an engine without background-clip:text
   the numeral does not paint at all. That is the right failure: the
   watermark is ornament and its absence costs nothing, where a fallback
   solid numeral would be the exact blob this is tuned to avoid. */
.csd-feat--imm::before{content:attr(data-n);position:absolute;z-index:0;
  right:20px;top:12px;
  font-family:var(--display);font-weight:800;
  font-size:clamp(48px,4.6vw,64px);line-height:.8;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  background-image:var(--grad-cta);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  opacity:.1;pointer-events:none;
  transition:opacity .5s var(--ease)}
/* the whole hover. transform/box-shadow/border-color are reset here, not
   omitted, because .csd-feat:hover sets a lift, a heavier shadow and a
   violet hairline - all three would otherwise fire underneath the rim. */
.csd-feat--imm:hover{transform:none;border-color:var(--line);
  box-shadow:var(--shadow-xs)}
.csd-feat--imm:hover::after{opacity:1}
.csd-feat--imm:hover::before{opacity:.18}
/* check markers: tinted discs, static */
.csd-feat--imm .csd-screen__pts .ico{width:19px;height:19px;padding:3px;border-radius:50%;
  background:var(--grad-soft);border:1px solid rgba(109,14,177,.14);margin-top:1px;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){
  /* nothing on this card moves or resizes - the hover is opacity and
     colour only, both fine to keep. The transform reset stays as a
     guard against the .csd-feat lift. */
  .csd-feat--imm:hover{transform:none}
}

/* ---- H . our methodology (scroll-driven timeline) ----
   Not a static card grid - Objectives, the solution deep-dive and the
   differentiators already use the white rounded card, so a fourth would
   read as the same block repeated. Here the panels start bare and are
   filled by scrolling:
     · untouched - no fill, no border, muted numeral
     · reached   - plain white panel, hairline border, node ringed in brand
   Once filled a phase stays filled; the read line only ever adds state.
   The connector is a dotted trail rather than a solid line; the brand copy
   of it is revealed with clip-path tied to --p, so the dotting survives
   (stroke-dashoffset cannot animate progress on an already-dashed stroke).
   flowPath() in js/script.js generates both paths from the real node
   positions, so any phase count works and it re-routes on resize.
   No JS -> no paths, no states, everything still reads in order. */
.csd-flow{padding:var(--csd-band) 0;background:var(--bg-soft);overflow:hidden}
.csd-flow__wrap{position:relative;margin-top:26px}
.csd-flow__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.csd-flow__track,.csd-flow__path{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:.5 11}
.csd-flow__track{stroke:var(--line-2)}
.csd-flow__path{stroke:url(#csdFlowGrad);
  clip-path:inset(0 0 calc((1 - var(--p,0)) * 100%) 0);
  transition:clip-path .2s linear}

.csd-flow__steps{position:relative;z-index:1;display:flex;flex-direction:column;
  /* room for the trail to breathe between one node and the next */
  gap:clamp(48px,5vw,76px)}
/* three tracks: panel | trail | panel */
.csd-phase{display:grid;grid-template-columns:minmax(0,1fr) 132px minmax(0,1fr);
  align-items:center;min-height:188px}

/* the panel - bare until the reader reaches it */
/* one shared easing + duration for every scroll-driven state change, so the
   panel, node, numeral and chip all settle together rather than racing */
.csd-phase{--csd-t:.55s cubic-bezier(.22,.61,.36,1)}
.csd-phase__body{grid-column:1;grid-row:1;position:relative;text-align:right;
  padding:26px 30px;border-radius:var(--radius-lg);--lift:0px;
  background:transparent;border:1px solid transparent;box-shadow:none;
  transition:background var(--csd-t),border-color var(--csd-t),box-shadow var(--csd-t),
             transform .55s var(--ease),opacity .55s var(--ease)}
.csd-phase:nth-child(even) .csd-phase__body{grid-column:3;grid-row:1;text-align:left}
/* reached - the panel fills and stays filled. .is-current is emitted by
   flowPath() for the phase at the read line but is intentionally styled
   the same as .is-reached, so passing a phase does not change it again. */
.csd-phase.is-reached .csd-phase__body{background:#fff;border-color:var(--line);box-shadow:var(--shadow-xs)}
/* The row itself must never move: the global .reveal rule translates it
   22px down, which drags the node off the trail until the reveal fires.
   Neutralise it here and let the children carry the animation instead. */
.js .csd-phase.reveal{opacity:1;transform:none}
/* Slide in from the side the phase lives on - applied to the PANEL, never
   to .csd-phase itself. Transforming the row moved the node with it
   (-30px odd / +30px even), which put the nodes on two axes 60px apart and
   made the trail zig-zag instead of running straight through them. */
.js .csd-phase.reveal .csd-phase__body{opacity:0;transform:translateX(-30px)}
.js .csd-phase:nth-child(even).reveal .csd-phase__body{transform:translateX(30px)}
/* end state keeps the lift variable in play, so the hover rule below
   does not have to out-specify this selector */
.js .csd-phase.reveal.in .csd-phase__body{opacity:1;transform:translateY(var(--lift,0px))}
.js .csd-phase.reveal .csd-phase__node{opacity:0;transform:scale(.7)}
.js .csd-phase.reveal.in .csd-phase__node{opacity:1;transform:none}

/* node on the trail */
.csd-phase__node{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:2;
  display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:var(--bg-soft);box-shadow:0 0 0 2px var(--line-2);
  font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;
  transition:background var(--csd-t),color var(--csd-t),box-shadow var(--csd-t),
             transform .5s var(--ease),opacity .4s var(--ease)}
.csd-phase.is-reached .csd-phase__node{background:#fff;color:var(--brand);box-shadow:0 0 0 2px var(--brand)}

/* ghost numeral, inside the panel on its outer edge */
/* z-index 0, NOT -1: a negative index paints the numeral behind its own
   parent's background, so it disappeared the moment .is-reached filled the
   panel white. It now sits above the fill, with the copy lifted above it. */
.csd-phase__body::before{content:attr(data-n);position:absolute;top:6px;right:18px;z-index:0;
  font-family:var(--display);font-weight:700;font-size:clamp(56px,5.4vw,76px);line-height:1;
  letter-spacing:-.06em;color:var(--brand);opacity:.06;pointer-events:none;
  transition:opacity var(--csd-t),transform .5s var(--ease)}
.csd-phase__body > *{position:relative;z-index:1}
/* a filled panel can carry a slightly stronger watermark without muddying */
.csd-phase.is-reached .csd-phase__body::before{opacity:.09}
.csd-phase:nth-child(even) .csd-phase__body::before{right:auto;left:18px}

.csd-phase__label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-bottom:10px;transition:color var(--csd-t)}
.csd-phase h4{font-size:clamp(18px,2vw,23px);line-height:1.28;letter-spacing:-.02em;margin-bottom:10px;
  transition:color var(--csd-t)}
/* fixed measure + reserved lines so uneven copy keeps the rhythm even */
.csd-phase p{font-size:14.5px;line-height:1.7;max-width:42ch;min-height:calc(1.7em * 3)}
.csd-phase:nth-child(odd) p{margin-left:auto}
.csd-phase__out{display:inline-flex;align-items:center;gap:8px;margin-top:13px;
  padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:12px;font-weight:600;color:var(--muted);
  transition:border-color var(--csd-t),background var(--csd-t),transform .35s var(--ease)}
.csd-phase__out b{color:var(--brand-ink);font-weight:700}
.csd-phase__out .ico{width:14px;height:14px;color:var(--green)}

/* ---- hover, once the phase has been reached ----
   Bare (not yet scrolled to) phases stay inert so hovering ahead of the
   read line does not pre-empt the reveal. */
.csd-phase.is-reached .csd-phase__body:hover{--lift:-4px;
  border-color:rgba(109,14,177,.28);box-shadow:var(--shadow)}
.csd-phase.is-reached .csd-phase__body:hover .csd-phase__out{transform:translateY(-1px);
  border-color:rgba(109,14,177,.3)}
.csd-phase.is-reached .csd-phase__body:hover::before{opacity:.14}
/* the node keeps its reached appearance on hover - hovering a phase must
   not restyle it, only the panel responds */
/* keyboard parity for the link inside the chip area */
.csd-phase.is-reached .csd-phase__body:focus-within{border-color:rgba(109,14,177,.28);
  box-shadow:var(--shadow)}

/* the whole band eases in as the section is entered */
.csd-flow__svg{opacity:0;transition:opacity .7s var(--ease)}
.csd-flow__wrap.is-live .csd-flow__svg{opacity:1}

/* ---- J . business benefits (before -> after transformation) ----
   The page already carries three white icon-card grids, so a fourth here
   read as more of the same. This states the outcome the way a case study
   actually earns it: the world before the build beside the world after,
   with the pivot between them. It also suits a client with no published
   figures far better than empty stat tiles - and where a case study DOES
   have numbers, the optional KPI strip underneath takes them.
   Rows are index-matched: item N on the left is answered by item N on the
   right, so keep both lists the same length. */
/* overflow:hidden contains the after-panel glow, whose negative right
   inset otherwise spills past the viewport and adds a scrollbar */
.csd-impact{padding:var(--csd-band) 0;background:#fff;overflow:hidden}
.csd-impact__lead{max-width:64ch;font-size:16.5px;line-height:1.78;margin-bottom:44px}

.csd-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2vw,28px);align-items:stretch}
.csd-ba__side{position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,36px);border-radius:var(--radius-lg);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
/* before: deliberately flat and drained - it is the state being left behind */
.csd-ba__side--before{background:var(--bg-soft);border:1px solid var(--line)}
/* after: lifted, brand-lit, the state being arrived at */
.csd-ba__side--after{background:#fff;border:1px solid rgba(109,14,177,.16);box-shadow:var(--shadow)}
.csd-ba__side--after::before{content:"";position:absolute;inset:-1px;border-radius:var(--radius-lg);
  padding:1px;background:var(--brand-grad);opacity:.34;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
/* brand glow behind the after panel */
.csd-ba__side--after::after{content:"";position:absolute;z-index:-1;inset:8% -6% -12% 4%;
  border-radius:50%;background:radial-gradient(circle,rgba(109,14,177,.16),rgba(207,169,79,.08) 46%,transparent 70%);
  filter:blur(44px);pointer-events:none}
.csd-ba__side--after:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}

.csd-ba__head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.csd-ba__tag{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.csd-ba__side--before .csd-ba__tag{background:#fff;border:1px solid var(--line-2);color:var(--faint)}
.csd-ba__side--after .csd-ba__tag{background:var(--grad-cta);color:#fff}
.csd-ba__side h3{font-size:clamp(17px,1.9vw,21px);line-height:1.3;letter-spacing:-.015em;margin:14px 0 22px}
.csd-ba__side--before h3{color:var(--muted)}

.csd-ba__list{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.csd-ba__list li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  padding:13px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.62}
.csd-ba__list li:first-child{border-top:0}
/* --muted, not --faint: --faint on --bg-soft measures 4.44:1 and misses
   the 4.5 AA floor. This still reads far quieter than the after column
   (which sits at ~17:1), so the drained effect survives. */
.csd-ba__side--before .csd-ba__list li{color:var(--muted)}
.csd-ba__side--after .csd-ba__list li{color:var(--text)}
.csd-ba__ic{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;margin-top:1px}
.csd-ba__side--before .csd-ba__ic{background:#fff;border:1px solid var(--line-2);color:var(--faint)}
.csd-ba__side--after .csd-ba__ic{background:color-mix(in srgb,var(--green) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--green) 26%,#fff);color:var(--green)}
.csd-ba__ic .ico{width:12px;height:12px;stroke-width:3}

/* the pivot between the two states */
.csd-ba__pivot{display:grid;place-items:center;width:clamp(44px,4vw,58px)}
.csd-ba__pivot span{display:grid;place-items:center;width:clamp(40px,3.6vw,52px);aspect-ratio:1;
  border-radius:50%;background:var(--grad-cta);color:#fff;
  box-shadow:0 14px 30px -12px rgba(109,14,177,.6);
  transition:transform .4s var(--ease)}
.csd-ba__pivot .ico{width:20px;height:20px;stroke-width:2.4}
.csd-ba:hover .csd-ba__pivot span{transform:scale(1.08)}

/* OPTIONAL numeric strip, for case studies that publish figures */
.csd-impact__kpis{display:grid;grid-template-columns:repeat(var(--csd-kpis,4),1fr);gap:20px;margin-top:34px}
.csd-kpi{padding:26px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(160deg,#faf6ff,#fdf9f2);box-shadow:var(--shadow-xs);text-align:center}
.csd-kpi b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,38px);
  line-height:1;letter-spacing:-.02em;background:var(--grad-text);-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:9px}
.csd-kpi span{display:block;font-size:12.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint)}

/* ---- L · what sets us apart (differentiators) ---- */
.csd-apart{padding:var(--csd-band) 0;background:var(--bg-soft)}
.csd-apart__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* The column count follows the card count, capped at three. A two-card
   group left at repeat(3,1fr) has a dead third column and a one-card
   group has two dead columns, which is very visible in the clustered
   solutions blocks where a sub-group can hold a single point.
   Mirrors .csd-deep__grid--2 and .csd-obj__grid--2. Applied per grid,
   so one section can hold clusters of different widths. */
.csd-apart__grid--1{grid-template-columns:minmax(0,1fr)}
.csd-apart__grid--2{grid-template-columns:repeat(2,1fr)}
.csd-apart__card{position:relative;padding:28px 26px 28px 30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.csd-apart__card::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--grad-cta);opacity:.5;transition:opacity .25s var(--ease)}
.csd-apart__card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(109,14,177,.18)}
.csd-apart__card:hover::before{opacity:1}
/* One heading treatment for every .csd-apart__card, whatever it contains. */
.csd-apart__card h3{font-size:16.5px;margin-bottom:9px;letter-spacing:-.01em}
.csd-apart__card p{font-size:14.5px;line-height:1.68}
/* ...except when the heading IS the card. The margin exists to separate the
   title from what follows it, so with nothing following it is dead space at
   the card's foot. Across the collection this is 25 label-only cards; the
   49 h3+ul and 6 h3+p cards keep the gap.

   :last-child, NOT :not(:has(p)). The :has() form was tried here once and
   pulled because it misaligned headings inside a single grid - it also
   stripped the margin from h3+ul cards, where a list DOES follow the title.
   :last-child cannot cause that: it only ever fires when the title has no
   sibling at all, so there is nothing left to misalign against. */
.csd-apart__card > h3:last-child{margin-bottom:0}

/* ---- L . interface highlights (alternating device rows) ----
   One screen per row, device-framed on one side and explained on the
   other, alternating direction. Each screen gets real estate instead of
   being squeezed into an equal-width column, portrait and landscape shots
   both sit correctly in their own frame type, and the row count is free -
   one screen or six read the same. Frames reuse the hero's device
   language so the page holds together. */
.csd-shots{padding:var(--csd-band) 0;background:#fff;overflow:hidden}
.csd-showcase{display:flex;flex-direction:column;gap:clamp(56px,7vw,92px)}
.csd-screen{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,72px);align-items:center}
/* flipping the side must also flip the ratio, or the media column lands
   in the narrow track and alternate rows get visibly smaller images */
.csd-screen--flip{grid-template-columns:.9fr 1.1fr}
.csd-screen--flip .csd-screen__media{order:2}
/* media side */
.csd-screen__media{position:relative;display:grid;place-items:center;isolation:isolate}
.csd-screen__media::before{content:"";position:absolute;z-index:-1;width:82%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(109,14,177,.18),rgba(207,169,79,.1) 45%,transparent 70%);filter:blur(46px)}
.csd-frame{position:relative;width:100%;border-radius:16px;overflow:hidden;background:#0b1120;
  border:1px solid rgba(15,23,42,.14);box-shadow:var(--shadow-lg);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.csd-screen:hover .csd-frame{transform:translateY(-6px);box-shadow:0 44px 74px -34px rgba(16,24,40,.5)}
.csd-frame__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 13px;
  background:linear-gradient(to bottom,#182135,#121a2b);border-bottom:1px solid rgba(255,255,255,.08)}
.csd-frame__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.csd-frame__bar i:first-child{background:rgba(252,165,165,.5)}
.csd-frame__bar i:nth-child(2){background:rgba(207,169,79,.55)}
.csd-frame__bar i:nth-child(3){background:rgba(134,239,172,.42)}
.csd-frame__bar span{flex:1;height:12px;margin-left:8px;border-radius:999px;background:rgba(255,255,255,.07)}
.csd-frame img{display:block;width:100%;height:auto}
/* phone variant for portrait screens */
.csd-frame--app{width:auto;max-width:288px;border-radius:32px;border:7px solid #151d30;background:#0b1120}
.csd-frame--app::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:2;
  width:32%;height:5px;border-radius:999px;background:rgba(255,255,255,.22)}
/* copy side */
.csd-screen__no{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
  padding:0 11px;border-radius:999px;background:var(--grad-soft);border:1px solid rgba(109,14,177,.16);
  font-family:var(--display);font-size:13px;font-weight:700;color:var(--brand);
  font-variant-numeric:tabular-nums;margin-bottom:16px}
.csd-screen__body h3{font-size:clamp(20px,2.3vw,27px);letter-spacing:-.02em;line-height:1.24;margin-bottom:13px}
.csd-screen__body > p{font-size:15.5px;line-height:1.74;color:var(--muted);margin-bottom:20px}
.csd-screen__pts{display:flex;flex-direction:column;gap:11px}
.csd-screen__pts li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:14.5px;line-height:1.6;color:var(--muted)}
.csd-screen__pts .ico{width:16px;height:16px;margin-top:3px;color:var(--brand);stroke-width:2.6}

/* ---- M . conclusion + CTA band ---- */
.csd-outro{padding:var(--csd-band) 0;text-align:center}
.csd-outro::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--brand-grad)}
.csd-outro__inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.csd-outro h2{color:#fff;font-size:clamp(26px,3.6vw,44px);letter-spacing:-.025em;margin-bottom:16px}
.csd-outro p{color:#94a3b8;font-size:16px;margin-bottom:32px}
.csd-outro__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* reassurance badges under the buttons (reference: eSpark CTA) */
.csd-outro__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:30px}
.csd-outro__badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#cbd5e1}
.csd-outro__badge .ico{width:16px;height:16px;color:#c4b5fd}

/* ---- N . related case studies ----
   Reuses the existing .cases / .showcase expanding-panel component from
   index.html — no bespoke CSS needed here. */

/* ---- O . prev / next case study ----
   Full-bleed two-up footer nav. Each half names the destination's industry
   above its title, so the link says what you are moving to rather than just
   naming it. Hovering wipes a brand wash in from that half's outer edge -
   left-origin on prev, right-origin on next - so the motion agrees with the
   direction of travel. Use .csd-pn__item--empty on a <div> instead of an
   <a> at either end of the collection. */
.csd-pn{position:relative;background:#fff;border-top:1px solid var(--line)}
.csd-pn::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--brand-grad);opacity:.5}
.csd-pn__grid{display:grid;grid-template-columns:1fr 1fr}
/* Full-view halves: the outer edge is a page margin rather than the
   container gutter, so each destination reads out to the edge of the
   viewport and the pair uses the whole width it is given. Block padding
   is kept compact - this is a footer nav, not a section. */
.csd-pn__item{position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:18px;min-height:150px;justify-content:center;
  padding-block:clamp(28px,3.2vw,44px)}
.csd-pn__item--prev{padding-left:clamp(24px,3vw,48px);
  padding-right:clamp(24px,3.5vw,56px)}
.csd-pn__item--next{padding-right:clamp(24px,3vw,48px);
  padding-left:clamp(24px,3.5vw,56px)}
/* directional wash */
.csd-pn__item::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--grad-soft);transform:scaleX(0);
  transition:transform .45s var(--ease)}
.csd-pn__item--prev::before{transform-origin:left center}
.csd-pn__item--next::before{transform-origin:right center}
.csd-pn__item:hover::before,.csd-pn__item:focus-visible::before{transform:scaleX(1)}
.csd-pn__item--next{border-left:1px solid var(--line);align-items:flex-end;text-align:right}
.csd-pn__item--next .csd-pn__title{margin-left:auto}

.csd-pn__dir{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);transition:color .3s var(--ease)}
.csd-pn__item:hover .csd-pn__dir{color:var(--brand)}
.csd-pn__dir .ico{width:15px;height:15px;transition:transform .3s var(--ease)}
.csd-pn__item--prev:hover .csd-pn__dir .ico{transform:translateX(-5px)}
.csd-pn__item--next:hover .csd-pn__dir .ico{transform:translateX(5px)}

/* tag sits directly above the title, so it owns the spacing between them */
.csd-pn__tag{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:-9px;transition:color .3s var(--ease)}
.csd-pn__item:hover .csd-pn__tag{color:var(--brand)}
/* the half is full-view now, so the title is allowed to use it before
   wrapping - 22ch left long titles breaking against an empty column */
.csd-pn__title{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(18px,2.1vw,25px);line-height:1.28;letter-spacing:-.02em;color:var(--text);max-width:34ch;
  transition:color .3s var(--ease)}
.csd-pn__item:hover .csd-pn__title{color:var(--brand-ink)}

/* end of the collection */
.csd-pn__item--empty{justify-content:center;color:var(--faint);font-size:14px}
.csd-pn__item--empty::before{display:none}
.csd-pn__item--empty .csd-pn__dir{color:var(--line-2)}

/* ---- responsive ---- */
@media (max-width:1080px){
  .csd-obj__grid,.csd-deep__grid,.csd-apart__grid{grid-template-columns:repeat(2,1fr)}
  /* a one-card grid stays one column here - the rule above would give it
     a dead second column at tablet width */
  .csd-apart__grid--1{grid-template-columns:minmax(0,1fr)}
  .csd-screen{gap:34px}
  .csd-facts__grid{grid-template-columns:repeat(2,1fr)}
  .csd-fact:nth-child(2n){border-right:0}
  .csd-fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .csd-notable__grid{grid-template-columns:repeat(2,1fr)}
  .csd-impact__kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .csd-overview__grid{grid-template-columns:1fr;gap:36px}
  .csd-proj-card{position:static}
  /* one column: media first, copy under it, on every row */
  .csd-screen{grid-template-columns:1fr;gap:26px}
  .csd-screen--flip .csd-screen__media{order:0}
  .csd-frame--app{margin-inline:auto}
  /* base already wraps the lead onto its own line; drop the numeral-width
     indent here so the text is not squeezed on a narrow column */
  .csd-clusterhead p{padding-left:0}
}
@media (max-width:560px){
  .csd-hero__bar{height:28px}
}

@media (max-width:900px){
  /* stack the two states; the pivot turns to point downward */
  .csd-ba{grid-template-columns:1fr;gap:0}
  .csd-ba__pivot{width:auto;padding:14px 0}
  .csd-ba__pivot span{transform:rotate(90deg)}
  .csd-ba:hover .csd-ba__pivot span{transform:rotate(90deg) scale(1.08)}
  .csd-ba__side--after::after{inset:10% -4% -8% 2%}
  /* spine moves to the left edge; every phase reads on one side */
  .csd-flow__steps{gap:34px}
  .csd-phase{grid-template-columns:56px 1fr;align-items:start}
  .csd-phase__node{grid-column:1;grid-row:1;justify-self:start;width:44px;height:44px;font-size:13.5px}
  .csd-phase__body,
  .csd-phase:nth-child(even) .csd-phase__body{grid-column:2;grid-row:1;
    text-align:left;padding-left:8px;padding-right:0}
  .csd-phase__body::before,
  .csd-phase:nth-child(even) .csd-phase__body::before{left:auto;right:0;top:-18px;font-size:62px}
  .csd-phase:nth-child(odd) p{margin-left:0}
  .csd-phase p{max-width:none}
  /* one column: DOM order already alternates C, S, C, S ... */
  .csd-cs__cols{grid-template-columns:1fr;gap:14px}
  .csd-cs__colhead{display:none}
  .csd-cs__inline{display:block}
  .csd-cs__item--answer{margin-bottom:14px}
}
@media (max-width:680px){
  /* narrow: tighter spine, node and copy shrink but the line stays */
  .csd-flow__steps{gap:30px}
  .csd-phase{grid-template-columns:44px 1fr}
  .csd-phase__node{width:38px;height:38px;font-size:12.5px}
  .csd-phase__body::before{display:none}
  .csd-obj__grid,.csd-deep__grid,.csd-apart__grid,.csd-notable__grid{grid-template-columns:1fr}
  .csd-facts__grid{grid-template-columns:1fr}
  .csd-fact{border-right:0;border-bottom:1px solid var(--line)}
  .csd-fact:last-child{border-bottom:0}
  .csd-impact__kpis{grid-template-columns:1fr}
  .csd-pn__grid{grid-template-columns:1fr}
  .csd-pn__item{min-height:0;padding-block:clamp(26px,6vw,36px)}
  .csd-pn__item--prev,.csd-pn__item--next{padding-inline:24px}
  .csd-pn__item--next{text-align:left;align-items:flex-start;border-left:0;border-top:1px solid var(--line)}
  .csd-pn__item--next .csd-pn__title{margin-left:0}
  .csd-pn__title{max-width:none}
  .csd-pn__item--next{align-items:flex-start}
  /* both halves wipe from the left once stacked */
  .csd-pn__item--next::before{transform-origin:left center}
  .csd-outro__actions .btn{width:100%;justify-content:center}
}

/* ---- no-motion fallback ----
   caseStudyDetail() adds .csd--static to #csdRoot when the visitor
   prefers reduced motion. Nothing here is required for the page to be
   readable — with JS off entirely, every slot already renders static. */
/* NOTE: the global rule at the top of this file — .reveal{opacity:1} inside
   @media (prefers-reduced-motion:reduce) — is defeated by `.js .reveal`
   (0,2,0 beats 0,1,0), so reduced-motion visitors still get hidden-until-
   scrolled content site-wide. Fixed here for this template only, with an
   id to win the cascade outright rather than relying on source order. */
#csdRoot.csd--static .reveal{opacity:1;transform:none}
.csd--static .csd-w__i{transform:none;animation:none}
.csd--static .csd-flow__path{transition:none}
.csd--static .csd-phase__body,.csd--static .csd-phase__node,.csd--static .csd-phase h4,
.csd--static .csd-phase__label,.csd--static .csd-phase__out{transition:none}
@media (prefers-reduced-motion:reduce){
  .csd-w__i{transform:none;animation:none}
  .js .csd-hero__crumb,.js .csd-hero__kicker,.js .csd-hero__lead,
  .js .csd-hero .os-pill{opacity:1;animation:none}
  .js .csd-overview__grid.reveal > *{opacity:1;transform:none;transition:none}
  .csd-flow__path{transition:none}
  .js .csd-phase.reveal{opacity:1;transform:none}
  .csd-phase{--csd-t:.001s linear}
  .csd-phase.is-reached .csd-phase__body:hover{transform:none}
  .csd-flow__svg{transition:none}
  .csd-obj__card:hover,.csd-feat:hover,.csd-kpi:hover,.csd-apart__card:hover,
  .csd-chip:hover,.csd-screen:hover .csd-frame,.csd-ba__side--after:hover{transform:none}
}