/* ===== DRB-APP consolidated stylesheet =====
Built by concatenating the existing linked stylesheets in their
EXACT browser load order so rendering is byte-identical.
Source order: fx-home -> density -> mobile -> stats -> newhome -> polish2 -> menu-fix
Backup: /home/drbusiness/backups/cssconsolidation-20260604-001509/
===== */
/* ========== [1] drb-fx-home.css ========== */
.drbfx-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);will-change:opacity,transform;}
.drbfx-reveal.drbfx-in{opacity:1;transform:none;}
.drbfx-tilt{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;transform-style:preserve-3d;will-change:transform;}
#drbfx-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;background:linear-gradient(90deg,#FF5A45,#ff8a73);box-shadow:0 0 12px rgba(255,90,69,.6);pointer-events:none;}
#drbfx-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
#drbfx-bg .drbfx-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;will-change:transform;}
#drbfx-bg .drbfx-orb.o1{width:420px;height:420px;background:radial-gradient(circle,rgba(255,90,69,.42),transparent 70%);top:-120px;left:-80px;animation:drbfxFloat1 22s ease-in-out infinite;}
#drbfx-bg .drbfx-orb.o2{width:520px;height:520px;background:radial-gradient(circle,rgba(255,138,115,.30),transparent 70%);bottom:-160px;right:-120px;animation:drbfxFloat2 28s ease-in-out infinite;}
#drbfx-bg .drbfx-orb.o3{width:360px;height:360px;background:radial-gradient(circle,rgba(255,90,69,.22),transparent 70%);top:40%;left:55%;animation:drbfxFloat3 25s ease-in-out infinite;}
@keyframes drbfxFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}}
@keyframes drbfxFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-30px)}}
@keyframes drbfxFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,50px)}}
#drbfx-net{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;}
#drbfx-cursor{position:fixed;top:0;left:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,69,.10),transparent 60%);z-index:1;pointer-events:none;transition:opacity .3s;mix-blend-mode:normal;}
body.brx-body{position:relative;}
main,section,header,footer,.brx-content{position:relative;z-index:2;}
@media (prefers-reduced-motion:reduce){.drbfx-reveal{opacity:1!important;transform:none!important}#drbfx-bg,#drbfx-net,#drbfx-cursor,#drbfx-prog{display:none!important}.drbfx-tilt{transform:none!important}}
@media (hover:none){#drbfx-cursor{display:none!important}.drbfx-tilt{transform:none!important}#drbfx-net{opacity:.35}}
/* ========== [2] drb-density.css ========== */
/* DRB density pass v2 */
body .section { padding-block: 56px !important; }
body .hero { padding-block: 56px 40px !important; }
body .hero__title { font-size: clamp(36px, 6.5vw, 84px) !important; line-height: 1.08 !important; }
body .hero__eyebrow { margin: 0 0 18px !important; }
body .hero__sub { margin-top: 20px !important; }
body .hero__cta-row { margin-top: 24px !important; }
body .hero__legend { margin-top: 36px !important; }
body #cta { padding-block: 56px !important; }
body #principles { padding-block: 48px !important; }
body #faq { padding-block: 52px !important; }
body #audit { padding-block: 60px !important; }
body #audit .wrap.audit-hero { padding-block: 0 !important; }
body .section .wrap { row-gap: 18px !important; gap: 18px !important; }
.eyebrow.reveal { margin: 0 0 6px !important; }
.title-lg.reveal { margin: 0 !important; line-height: 1.12 !important; }
.title-lg { font-size: clamp(30px, 3.8vw, 48px) !important; }
.lead.reveal { margin-top: 10px !important; font-size: 16px !important; }
.sysv2-grid, .cases { margin-top: 24px !important; }
.sys-footnote.reveal, .cases__note.reveal { margin-top: 14px !important; }
.audit-copy.reveal > * + * { margin-top: 12px !important; }
.audit-points { gap: 8px !important; margin-top: 14px !important; }
.ai-layer .wrap > * + *, .principles .wrap > * + *, .about .wrap > * + * { margin-top: 12px !important; }
.faq-list { margin-top: 16px !important; }
.faq-item { padding-block: 12px !important; }
.about-grid { gap: 36px !important; }
.case-card { min-height: 0 !important; }
.sysv2 { min-height: 0 !important; }
@media (max-width: 820px) {
body .section { padding-block: 40px !important; }
body .hero { padding-block: 48px 32px !important; }
body .hero__title { font-size: clamp(28px, 8vw, 44px) !important; }
body .hero__inner { gap: 32px !important; }
body .section .wrap { row-gap: 14px !important; gap: 14px !important; }
.title-lg { font-size: clamp(24px, 6.5vw, 32px) !important; }
.sysv2-grid, .cases { margin-top: 18px !important; }
.about-grid { gap: 24px !important; }
}
/* ========== [3] drb-mobile.css ========== */
/* DRB Mobile Responsive Overhaul */
body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
/* TABLET <= 980px */
@media (max-width: 980px) {
body .section { padding-block: 48px !important; }
body .hero { padding-block: 48px 32px !important; }
body .hero__title { font-size: clamp(34px, 7.2vw, 64px) !important; line-height: 1.12 !important; }
body .hero__sub { font-size: 16px !important; }
.title-lg { font-size: clamp(26px, 4.6vw, 40px) !important; line-height: 1.18 !important; }
.lead { font-size: 15px !important; }
.systems { padding-block: 32px !important; }
.about-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
.layer-grid, .principles, .case-row, .footer__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
/* MOBILE <= 720px */
@media (max-width: 720px) {
body .section { padding-block: 40px !important; padding-inline: 16px !important; }
body .hero { padding-block: 40px 28px !important; padding-inline: 16px !important; }
.hero__inner { gap: 24px !important; flex-direction: column !important; align-items: stretch !important; }
body .hero__title { font-size: clamp(28px, 9vw, 44px) !important; line-height: 1.15 !important; }
body .hero__sub { font-size: 15px !important; line-height: 1.6 !important; margin-top: 14px !important; }
.eyebrow { font-size: 12px !important; }
.hero__cta-row, .hero__cta, .cta-row, .audit-cta-row { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: stretch !important; }
.hero__cta-row .btn-primary, .hero__cta-row .btn-ghost, .hero__cta-row .btn-cta-big,
.audit-cta-row .btn-primary, .audit-cta-row .btn-ghost, .audit-cta-row .btn-cta-big,
.cta-row .btn-primary, .cta-row .btn-ghost, .cta-row .btn-cta-big {
width: 100% !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; font-size: 15px !important; padding: 14px 18px !important;
}
.title-lg { font-size: clamp(22px, 6.5vw, 32px) !important; line-height: 1.2 !important; }
.lead { font-size: 14.5px !important; line-height: 1.7 !important; }
.systems-orbit, .systems__orbit { display: none !important; }
.systems__cards, .systems__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; position: static !important; transform: none !important; }
.systems__card, .sys-card { position: static !important; transform: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.report--v2 { transform: scale(0.78) !important; transform-origin: center top !important; margin-bottom: -120px !important; }
.about-grid, .layer-grid, .principles, .case-row, .footer__grid, .audit-hero { grid-template-columns: 1fr !important; gap: 20px !important; }
.about-portrait { max-width: 280px !important; margin: 0 auto !important; }
.about-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
.about-stat__num { font-size: 26px !important; }
.about-stat__lbl { font-size: 12px !important; }
.case-card { padding: 18px !important; }
.case-card__num { font-size: 28px !important; }
.cases__note { font-size: 13px !important; }
.principle { padding: 16px !important; }
.principle__title { font-size: 16px !important; }
.principle__body { font-size: 14px !important; }
.faq__q { font-size: 15px !important; padding: 14px 16px !important; }
.faq__a { font-size: 14px !important; padding: 0 16px 14px !important; line-height: 1.7 !important; }
.faq__heading { font-size: 22px !important; }
.nav, header nav { gap: 8px !important; padding: 10px 12px !important; flex-wrap: wrap !important; }
.nav a, header nav a { font-size: 13px !important; padding: 6px 8px !important; }
.brand__mark, .brand { font-size: 16px !important; }
.footer { padding: 32px 16px 24px !important; }
.footer__grid { gap: 20px !important; }
.footer__desc { font-size: 13px !important; }
.footer__bottom { font-size: 12px !important; flex-direction: column !important; gap: 8px !important; text-align: center !important; }
.about-academy__head { font-size: 20px !important; }
.about-academy__cta { width: 100% !important; justify-content: center !important; }
.final-cta { padding: 32px 16px !important; }
.audit-deliv { padding: 16px !important; }
.audit-deliv__t { font-size: 14px !important; }
.audit-trust { font-size: 12px !important; }
.report__sheet { padding: 18px 16px !important; }
.report__header { gap: 8px !important; }
.report__avatar { width: 36px !important; height: 36px !important; font-size: 13px !important; }
.report__kicker { font-size: 13px !important; }
.report__meta { font-size: 11px !important; }
}
/* SMALL MOBILE <= 480px */
@media (max-width: 480px) {
body .section { padding-block: 32px !important; padding-inline: 14px !important; }
body .hero { padding-block: 32px 24px !important; padding-inline: 14px !important; }
body .hero__title { font-size: clamp(26px, 9.5vw, 38px) !important; }
.title-lg { font-size: clamp(20px, 6.8vw, 28px) !important; }
.lead, body .hero__sub { font-size: 14px !important; }
.eyebrow { font-size: 11px !important; letter-spacing: 0.05em !important; }
.btn-primary, .btn-cta-big, .btn-ghost { font-size: 14px !important; padding: 12px 16px !important; }
.btn-pill { font-size: 12px !important; padding: 6px 10px !important; }
.report--v2 { transform: scale(0.68) !important; margin-bottom: -180px !important; }
.audit-section, .about-section, .systems, .faq, .work { min-height: 0 !important; }
.about-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.about-stat__num { font-size: 22px !important; }
.about-stat__lbl { font-size: 11px !important; line-height: 1.35 !important; }
.layer-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.layer-card { padding: 16px !important; }
.layer-card__title { font-size: 15px !important; }
.layer-card__body { font-size: 13.5px !important; line-height: 1.65 !important; }
.faq__q { font-size: 14px !important; padding: 12px 14px !important; }
.faq__a { font-size: 13.5px !important; padding: 0 14px 12px !important; }
.nav, header nav { padding: 8px 10px !important; }
.nav a, header nav a { font-size: 12px !important; padding: 4px 6px !important; }
}
/* ULTRA NARROW <= 360px */
@media (max-width: 360px) {
body .section { padding-block: 28px !important; padding-inline: 12px !important; }
body .hero__title { font-size: clamp(22px, 10vw, 32px) !important; }
.title-lg { font-size: clamp(18px, 7.5vw, 24px) !important; }
.report--v2 { transform: scale(0.6) !important; margin-bottom: -220px !important; }
.about-stats { grid-template-columns: 1fr !important; gap: 6px !important; }
}
/* TOUCH TARGETS WCAG */
@media (max-width: 720px) and (pointer: coarse) {
a, button, .btn-primary, .btn-ghost, .btn-cta-big, .btn-pill, .faq__q, .nav a { min-height: 44px !important; }
.faq__q, .nav a, button { display: flex !important; align-items: center !important; }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* ========== [4] drb-stats.css ========== */
/* DRB Stats Pill - matches reference: unified card, dividers, Arabic-Indic numerals */
.stats { margin-top: 40px !important; padding: 0 16px !important; }
.stats__grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
align-items: center !important;
gap: 0 !important;
background: rgba(255, 248, 244, 0.65) !important;
border: 1px solid rgba(232, 106, 90, 0.18) !important;
border-radius: 18px !important;
padding: 22px 8px !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px -16px rgba(232, 106, 90, 0.18) !important;
max-width: 1100px !important;
margin: 0 auto !important;
}
.stats__grid .stat {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 4px 14px !important;
position: relative !important;
min-height: 0 !important;
width: auto !important;
}
/* Vertical dividers between cells (RTL-aware: works in either direction) */
.stats__grid .stat + .stat::before {
content: '' !important;
position: absolute !important;
top: 18% !important;
bottom: 18% !important;
inset-inline-start: 0 !important;
width: 1px !important;
background: rgba(232, 106, 90, 0.18) !important;
}
.stats__grid .stat__num {
font-size: clamp(28px, 3.4vw, 44px) !important;
font-weight: 800 !important;
color: #e85a4f !important;
line-height: 1.05 !important;
letter-spacing: -0.01em !important;
margin-bottom: 6px !important;
/* Use Arabic-Indic numerals */
font-feature-settings: 'lnum' off !important;
font-variant-numeric: tabular-nums !important;
}
.stats__grid .stat__num .unit {
font-size: 0.55em !important;
font-weight: 700 !important;
margin-inline-start: 2px !important;
opacity: 0.85 !important;
}
.stats__grid .stat__label {
font-size: 12.5px !important;
color: #6b6358 !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
white-space: normal !important;
}
/* Force Arabic-Indic digits via Unicode locale override */
.stats__grid .stat__num { unicode-bidi: plaintext; }
/* TABLET <= 980px */
@media (max-width: 980px) {
.stats__grid { padding: 18px 6px !important; }
.stats__grid .stat__num { font-size: clamp(24px, 4vw, 36px) !important; }
.stats__grid .stat__label { font-size: 11.5px !important; }
}
/* MOBILE <= 720px - 2x2 grid */
@media (max-width: 720px) {
.stats { margin-top: 28px !important; padding: 0 12px !important; }
.stats__grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 4px 0 !important;
padding: 16px 8px !important;
border-radius: 16px !important;
}
.stats__grid .stat { padding: 12px 10px !important; }
.stats__grid .stat__num { font-size: clamp(22px, 6vw, 30px) !important; margin-bottom: 4px !important; }
.stats__grid .stat__label { font-size: 11px !important; }
/* Reset dividers - only between columns, not between rows */
.stats__grid .stat + .stat::before { display: none !important; }
/* Show divider only between col 1 and col 2 of each row */
.stats__grid .stat:nth-child(2n)::before {
content: '' !important;
display: block !important;
position: absolute !important;
top: 18% !important; bottom: 18% !important;
inset-inline-start: 0 !important;
width: 1px !important;
background: rgba(232, 106, 90, 0.18) !important;
}
/* Horizontal divider between row 1 and row 2 */
.stats__grid .stat:nth-child(3)::after,
.stats__grid .stat:nth-child(4)::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 8% !important; right: 8% !important;
height: 1px !important;
background: rgba(232, 106, 90, 0.14) !important;
}
}
/* SMALL MOBILE <= 480px */
@media (max-width: 480px) {
.stats__grid .stat__num { font-size: clamp(20px, 6.5vw, 26px) !important; }
.stats__grid .stat__label { font-size: 10.5px !important; line-height: 1.35 !important; }
.stats__grid .stat { padding: 10px 6px !important; }
}
/* Ensure stats don't overlap with content above - force section containment */
.hero .stats, .hero--v2 .stats { position: relative !important; z-index: 2 !important; clear: both !important; }
.hero .wrap, .hero--v2 .wrap { overflow: visible !important; }
/* ========== [5] drb-newhome.css ========== */
/* === DRB NewHome — Bricks/Automatic.css override layer === */
body.page-id-33526 section.brxe-section { display: block; gap: 0; }
body.page-id-33526 .bricks-lazy-hidden { opacity: 1 !important; transform: none !important; }
body.page-id-33526 .brxe-button.bricks-button { display: inline-flex; padding: 0; background: transparent; border: 0; color: inherit; font: inherit; }
body.page-id-33526 .brxe-heading { margin: 0; }
/* automaticcss-core resets — nuke gap/align on section > div */
/* === end DRB override === */
/* === style block 1 === */
:root {
--cream: #f4ede1;
--cream-2: #ece3d2;
--cream-3: #e2d6be;
--ink: #10141e;
--ink-2: #1a1f2c;
--coral: #e86a5a;
--coral-2: #d4523f;
--text: #1a1a22;
--text-soft: #5a5247;
--text-dim: #8a816f;
--on-dark: #f4ede1;
--on-dark-soft: #b7b3a8;
--rule: rgba(26, 26, 34, 0.12);
--rule-dark: rgba(244, 237, 225, 0.14);
color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--cream);
color: var(--text);
font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p, h1, h2, h3 { margin: 0; }
ul { margin: 0; padding: 0; }
.skip-link {
position: fixed;
top: 12px;
right: 12px;
z-index: 9999;
transform: translateY(-140%);
background: var(--ink);
color: var(--cream);
padding: 10px 16px;
border-radius: 8px;
font-weight: 800;
}
.skip-link:focus-visible { transform: translateY(0); }
a:focus-visible, button:focus-visible {
outline: 3px solid var(--coral);
outline-offset: 4px;
border-radius: 8px;
}
div.page { overflow: hidden; }
.wrap {
width: min(100% - 112px, 1280px);
margin-inline: auto;
}
.topbar {
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid var(--rule);
background: rgba(244, 237, 225, 0.84);
backdrop-filter: blur(14px) saturate(140%);
}
.topbar__row {
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
font-weight: 800;
font-size: 18px;
white-space: nowrap;
}
.brand__mark {
width: 32px;
height: 32px;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--ink);
color: var(--cream);
font-size: 12px;
letter-spacing: 0.04em;
}
.nav {
display: flex;
align-items: center;
gap: 32px;
color: var(--text-soft);
font-size: 14px;
}
.nav a:hover { color: var(--coral); }
.nav-toggle {
display: none;
width: 42px;
height: 42px;
border: 1px solid var(--rule);
border-radius: 8px;
background: transparent;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
}
.nav-toggle span {
width: 18px;
height: 2px;
background: var(--ink);
border-radius: 999px;
}
.btn-pill, .btn-primary, .btn-cta-big {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 0;
border-radius: 999px;
font-weight: 800;
white-space: nowrap;
}
.btn-pill {
padding: 10px 22px;
background: var(--ink);
color: var(--cream);
font-size: 14px;
}
.btn-primary {
padding: 16px 28px;
background: var(--coral);
color: var(--cream);
box-shadow: 0 16px 34px -16px rgba(232, 106, 90, 0.72);
}
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 0;
border-bottom: 1.5px solid var(--ink);
font-weight: 800;
}
.btn-primary:hover, .btn-pill:hover, .btn-cta-big:hover { transform: translateY(-1px); }
.bg-grid {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(26,26,34,0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(26,26,34,0.05) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse at center, black 35%, transparent 82%);
}
.hero {
position: relative;
padding: 64px 0 72px;
}
.hero__bg-shape {
position: absolute;
inset: 0 0 auto auto;
width: 52vw;
height: 52vw;
max-height: 720px;
background: radial-gradient(circle, rgba(232,106,90,0.12), transparent 68%);
pointer-events: none;
}
.hero__inner--v2 {
position: relative;
z-index: 1;
min-height: 620px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 1.1fr);
align-items: center;
gap: 56px;
}
.hero__text { min-width: 0; }
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 28px;
padding: 7px 14px;
border: 1px solid var(--rule);
border-radius: 999px;
background: rgba(255,255,255,0.42);
color: var(--text-soft);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
letter-spacing: 0.06em;
}
.dot-live, .hero__legend-dot {
width: 9px;
height: 9px;
border-radius: 999px;
display: inline-block;
background: #5bd98a;
box-shadow: 0 0 0 7px rgba(91,217,138,0.18);
}
.dot-live.small { width: 8px; height: 8px; }
.hero__title {
font-weight: 900;
font-size: clamp(56px, 7vw, 104px);
line-height: 1.18;
letter-spacing: 0;
color: var(--ink);
text-wrap: balance;
}
.hero__title .under-1 { color: var(--coral); position: relative; display: inline-block; }
.hero__title .under-1::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 7px;
border-radius: 999px;
background: rgba(232,106,90,0.22);
}
.hero__title .under-2 { position: relative; display: inline-block; }
.hero__title .under-2 svg {
position: absolute;
right: 0;
left: 0;
bottom: -12px;
width: 100%;
height: 18px;
overflow: visible;
}
.hero__title .under-2 path {
stroke: var(--coral);
stroke-width: 4;
fill: none;
stroke-linecap: round;
}
.hero__sub {
margin-top: 28px;
max-width: 560px;
color: var(--text-soft);
font-size: 18px;
}
.hero__cta-row {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
margin-top: 34px;
}
.hero__legend {
display: flex;
align-items: center;
gap: 22px;
margin-top: 88px;
padding-top: 24px;
border-top: 1px dashed var(--rule);
color: var(--text-soft);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
}
.hero__legend-item { display: inline-flex; align-items: center; gap: 8px; }
.hero__legend-dot { width: 7px; height: 7px; background: var(--coral); box-shadow: 0 0 0 5px rgba(232,106,90,0.14); }
.hero__legend-spacer { flex: 1; }
.hero__legend-note { color: var(--text-dim); }
.hero__stage--diagram {
width: 100%;
max-width: 640px;
aspect-ratio: 1;
margin-inline: auto;
overflow: visible;
}
.sysdiag {
position: relative;
width: 100%;
height: 100%;
overflow: visible;
}
.sysdiag__lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: visible;
}
.sysdiag__line {
fill: none;
stroke: var(--coral);
stroke-width: 1.7;
stroke-dasharray: 5 7;
stroke-linecap: round;
opacity: 0.72;
animation: dash 15s linear infinite;
}
.sysdiag__hub {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
width: 32%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
}
.sysdiag__hub-ring {
position: absolute;
inset: 0;
border: 1px dashed rgba(16,20,30,0.18);
border-radius: 999px;
animation: spin 50s linear infinite;
}
.sysdiag__hub-ring--2 {
inset: 15%;
border-style: solid;
border-color: rgba(232,106,90,0.24);
animation: none;
}
.sysdiag__hub-core {
position: relative;
z-index: 2;
width: 56%;
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--ink);
color: var(--coral);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
box-shadow: 0 24px 50px -16px rgba(16,20,30,0.4);
}
.sysdiag__card {
position: absolute;
z-index: 4;
width: 28%;
min-width: 158px;
padding: 18px 18px 16px;
border: 1px solid var(--rule);
border-radius: 18px;
background: rgba(244,237,225,0.9);
box-shadow: 0 24px 50px -22px rgba(16,20,30,0.24);
text-align: right;
animation: float-card 7s ease-in-out infinite;
}
.sysdiag__card--site { top: -4%; left: -4%; }
.sysdiag__card--ops { top: -4%; right: -4%; animation-delay: -2.4s; }
.sysdiag__card--content { bottom: -8%; left: 50%; transform: translateX(-50%); animation-name: float-card-center; animation-delay: -4.8s; }
.sysdiag__card-tag {
position: absolute;
top: 16px;
left: 18px;
color: var(--coral);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
}
.sysdiag__card-name { font-size: 15px; line-height: 1.35; color: var(--ink); }
.sysdiag__card-body {
margin-top: 6px;
color: var(--text-soft);
font-size: 12px;
line-height: 1.55;
}
.sysdiag__card-meter {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding-top: 9px;
border-top: 1px dashed var(--rule);
color: var(--text-dim);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
}
.stats {
position: relative;
z-index: 1;
margin-top: 24px;
opacity: 0.42;
}
.stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.stat {
padding: 20px;
text-align: center;
border-radius: 14px;
background: rgba(255,255,255,0.18);
}
.stat__num {
font-size: clamp(30px, 4vw, 50px);
font-weight: 900;
color: rgba(232,106,90,0.35);
line-height: 1;
}
.stat__label {
margin-top: 8px;
color: var(--text-dim);
font-size: 12px;
}
.section {
position: relative;
padding: 88px 0;
scroll-margin-top: 92px;
}
.section--dark {
background: var(--ink);
color: var(--on-dark);
overflow: hidden;
}
.section--dark .bg-grid {
background-image:
linear-gradient(to right, rgba(244,237,225,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(244,237,225,0.04) 1px, transparent 1px);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
color: var(--text-dim);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
}
.section--dark .eyebrow { color: rgba(244,237,225,0.62); }
.eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--coral);
}
.title-lg {
max-width: 920px;
color: var(--ink);
font-size: clamp(34px, 5vw, 66px);
line-height: 1.22;
font-weight: 900;
text-wrap: balance;
}
.section--dark .title-lg { color: var(--on-dark); }
.title-xl {
font-size: clamp(42px, 7vw, 92px);
line-height: 1.24;
font-weight: 900;
text-align: center;
text-wrap: balance;
}
.title-sm { font-size: 22px; line-height: 1.35; }
.lead {
margin-top: 22px;
max-width: 720px;
color: var(--text-soft);
font-size: 18px;
line-height: 1.75;
}
.section--dark .lead { color: var(--on-dark-soft); }
.body {
color: var(--text-soft);
line-height: 1.8;
}
.audit-hero, .about-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
gap: 64px;
align-items: center;
}
.audit-deliv {
list-style: none;
display: grid;
gap: 12px;
margin-top: 28px;
}
.audit-deliv li {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border: 1px solid var(--rule);
border-radius: 10px;
background: rgba(255,255,255,0.28);
}
.audit-deliv__t {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 999px;
background: var(--cream-2);
color: var(--coral);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.audit-cta-row {
display: flex;
gap: 22px;
align-items: center;
flex-wrap: wrap;
margin-top: 30px;
}
.audit-trust { display: grid; gap: 2px; color: var(--text-soft); }
.audit-trust strong { color: var(--ink); font-size: 22px; }
.report {
position: relative;
padding: 22px;
border-radius: 18px;
background: rgba(255,255,255,0.3);
border: 1px solid var(--rule);
box-shadow: 0 24px 70px -36px rgba(16,20,30,0.35);
}
.report__sheet--front {
display: grid;
gap: 16px;
padding: 24px;
border-radius: 14px;
background: #fbf6ec;
border: 1px solid var(--rule);
}
.report__head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 16px;
}
.report__kicker, .report__axis-val, .report__tag, .sysv2__cat, .sysv2__num, .sysv2__price-label, .sysv2__price-note, .case-card__num, .case-card__domain, .case-card__label, .principle__num {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.report__t { font-size: 26px; color: var(--ink); }
.report__score {
color: var(--coral);
font-size: 42px;
font-weight: 900;
line-height: 1;
}
.report__axis {
display: grid;
grid-template-columns: 90px 1fr 44px;
gap: 12px;
align-items: center;
}
.report__axis-bar {
height: 7px;
border-radius: 999px;
background: var(--cream-2);
overflow: hidden;
}
.report__axis-bar i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--coral);
}
.report__foot {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding-top: 14px;
border-top: 1px solid var(--rule);
}
.report__foot span { display: block; color: var(--text-dim); font-size: 11px; }
.report__foot strong { color: var(--ink); font-size: 13px; }
.report__tag {
position: absolute;
top: -12px;
left: -8px;
display: inline-flex;
gap: 8px;
padding: 7px 12px;
border-radius: 999px;
background: var(--ink);
color: var(--cream);
font-size: 11px;
}
.report__tag span:first-child {
padding: 2px 8px;
border-radius: 4px;
background: var(--coral);
}
.layer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 46px;
}
.layer-card, .principle {
min-height: 230px;
padding: 26px;
border: 1px solid var(--rule-dark);
border-radius: 10px;
background: rgba(244,237,225,0.04);
}
.layer-card__tag { color: var(--coral); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.layer-card__title, .principle__title { margin-top: 18px; font-size: 22px; color: var(--on-dark); }
.layer-card__body, .principle__body { margin-top: 14px; color: var(--on-dark-soft); }
.sysv2-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
margin-top: 48px;
}
.sysv2 {
display: flex;
flex-direction: column;
padding: 30px 26px;
border: 1px solid transparent;
border-radius: 10px;
background: var(--cream-2);
}
.sysv2--ops { background: var(--cream-3); }
.sysv2__head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.sysv2__num { color: var(--coral); font-weight: 900; font-size: 22px; }
.sysv2__cat { color: var(--text-soft); font-size: 11px; letter-spacing: 0.08em; }
.sysv2__title { color: var(--ink); font-size: 24px; line-height: 1.32; }
.sysv2__title-em { color: var(--coral); }
.sysv2__desc { margin-top: 16px; color: var(--text-soft); }
.sysv2__packages { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.sysv2__pkg {
padding: 5px 12px;
border: 1px solid var(--rule);
border-radius: 999px;
color: var(--text-soft);
font-size: 12px;
}
.sysv2__pkg.is-anchor { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.sysv2__price {
margin-top: auto;
padding: 18px 0;
border-top: 1px dashed var(--rule);
border-bottom: 1px dashed var(--rule);
}
.sysv2__price-range { color: var(--ink); font-size: 28px; font-weight: 900; }
.sysv2__price-note, .sysv2__price-label { color: var(--text-dim); font-size: 11px; }
.sysv2__cta {
width: fit-content;
margin-top: 20px;
border-bottom: 1.5px solid var(--ink);
font-weight: 800;
}
.sys-footnote {
margin-top: 34px;
padding: 18px 22px;
border-right: 4px solid var(--coral);
border-radius: 8px;
background: var(--cream-2);
color: var(--text-soft);
}
.cases {
display: grid;
grid-template-columns: repeat(5, minmax(250px, 1fr));
gap: 18px;
margin-top: 48px;
overflow-x: auto;
padding-bottom: 10px;
}
.case-card {
min-height: 360px;
padding: 26px;
border: 1px solid var(--rule);
border-radius: 10px;
background: var(--cream-2);
}
.case-card__num { color: var(--coral); font-weight: 800; }
.case-card__sector { margin-top: 16px; color: var(--ink); font-size: 22px; }
.case-card__domain { margin-top: 6px; color: var(--text-dim); font-size: 12px; }
.case-card__row { margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--rule); }
.case-card__label { color: var(--coral); font-size: 11px; margin-bottom: 8px; }
.case-card__system, .case-card__impact { color: var(--text-soft); font-size: 14px; line-height: 1.7; }
.cases__note { margin-top: 18px; color: var(--text-dim); }
.principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 44px;
}
.principle__num { color: var(--coral); }
.about-portrait {
min-height: 520px;
border-radius: 10px;
background:
linear-gradient(135deg, rgba(232,106,90,0.92), rgba(232,106,90,0.65)),
radial-gradient(circle at 50% 20%, rgba(255,255,255,0.28), transparent 42%);
position: relative;
overflow: hidden;
}
.about-portrait::before {
content: "DR";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: rgba(16,20,30,0.82);
font-size: clamp(88px, 12vw, 150px);
font-weight: 900;
letter-spacing: 0.08em;
}
.about-portrait__tag {
position: absolute;
right: 22px;
bottom: 22px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(244,237,225,0.86);
color: var(--ink);
}
.about-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 28px 0;
padding: 22px 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.about-stat__num { color: var(--ink); font-size: 28px; font-weight: 900; }
.about-stat__lbl { color: var(--text-soft); font-size: 12px; }
.about-academy {
padding: 22px;
border: 1px solid var(--rule);
border-radius: 10px;
background: var(--cream-2);
}
.about-academy__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.about-academy__tag {
padding: 4px 10px;
border-radius: 999px;
background: rgba(232,106,90,0.1);
color: var(--coral);
font-size: 12px;
}
.about-academy__cta { display: inline-flex; margin-top: 14px; border-bottom: 1.5px solid var(--ink); font-weight: 800; }
.faq {
margin-top: 44px;
border-top: 1px solid var(--rule);
}
.faq__item {
border-bottom: 1px solid var(--rule);
padding: 0;
}
.faq__heading { margin: 0; }
.faq__q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 20px 0;
border: 0;
background: transparent;
text-align: right;
cursor: pointer;
font-weight: 800;
}
.faq__icon { transition: transform 0.2s; }
.faq__a {
max-height: 0;
overflow: hidden;
color: var(--text-soft);
transition: max-height 0.25s ease, padding-bottom 0.25s ease;
}
.faq__item.open .faq__a { max-height: 260px; padding-bottom: 20px; }
.faq__item.open .faq__icon { transform: rotate(45deg); }
.final-cta {
text-align: center;
padding: 84px 0;
}
.final-cta .wrap { position: relative; z-index: 1; }
.final-cta .lead { margin-inline: auto; }
.final-cta__glow {
position: absolute;
inset: 50% auto auto 50%;
width: 620px;
height: 620px;
transform: translate(-50%, -50%);
border-radius: 999px;
background: radial-gradient(circle, rgba(232,106,90,0.24), transparent 66%);
}
.btn-cta-big {
margin-top: 30px;
padding: 20px 34px;
background: var(--coral);
color: var(--cream);
}
.cta__small { margin-top: 14px; color: var(--on-dark-soft); font-size: 13px; }
.footer {
padding: 58px 0 34px;
background: #090c13;
color: var(--on-dark);
}
.footer__grid {
display: grid;
grid-template-columns: 1.4fr 0.7fr 0.7fr;
gap: 48px;
}
.footer__desc { margin-top: 18px; max-width: 420px; color: var(--on-dark-soft); }
.footer h2 { font-size: 18px; margin-bottom: 14px; }
.footer ul { list-style: none; display: grid; gap: 10px; color: var(--on-dark-soft); }
.footer__bottom {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 38px;
padding-top: 22px;
border-top: 1px solid rgba(244,237,225,0.12);
color: rgba(244,237,225,0.58);
font-size: 13px;
}
.scroll-progress {
position: fixed;
inset: 0 0 auto 0;
height: 2px;
z-index: 200;
pointer-events: none;
}
.scroll-progress__fill {
width: 0;
height: 100%;
background: var(--coral);
}
.reveal {
opacity: 1;
transform: none;
}
@keyframes dash { to { stroke-dashoffset: -180; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float-card { 50% { transform: translateY(-7px); } }
@keyframes float-card-center {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-7px); }
}
@media (max-width: 1100px) {
.layer-grid, .sysv2-grid, .principles { grid-template-columns: 1fr 1fr; }
.hero__inner--v2 { grid-template-columns: 1fr; min-height: 0; }
.hero__text { text-align: center; }
.hero__sub, .hero__cta-row { margin-inline: auto; justify-content: center; }
.hero__legend { max-width: 620px; margin-inline: auto; }
}
@media (max-width: 760px) {
.wrap { width: min(100% - 40px, 1280px); }
.topbar__row { gap: 12px; }
.brand { font-size: 14px; gap: 8px; overflow: hidden; text-overflow: ellipsis; }
.brand__mark { width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto; }
.nav-toggle { display: inline-flex; }
.nav {
position: fixed;
inset: 68px 0 auto 0;
display: grid;
gap: 0;
padding: 10px 20px 18px;
border-bottom: 1px solid var(--rule);
background: rgba(244,237,225,0.98);
transform: translateY(-120%);
transition: transform 0.24s ease;
}
.nav.is-open { transform: translateY(0); }
.nav a { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.topbar .btn-pill { display: none; }
.hero { padding-top: 36px; }
.hero__title { font-size: clamp(42px, 13vw, 56px); text-align: center; }
.hero__eyebrow { justify-content: center; white-space: normal; }
.hero__sub { font-size: 16px; }
.hero__legend { display: none; }
.hero__cta-row {
flex-direction: column;
align-items: center;
gap: 14px;
}
.hero__cta-row .btn-primary,
.hero__cta-row .btn-ghost {
width: min(100%, 320px);
white-space: normal;
text-align: center;
}
.hero__stage--diagram {
max-width: 420px;
width: 100%;
aspect-ratio: auto;
margin-top: 36px;
}
.sysdiag {
display: grid;
gap: 12px;
height: auto;
}
.sysdiag__lines, .sysdiag__hub { display: none; }
.sysdiag__card,
.sysdiag__card--site,
.sysdiag__card--ops,
.sysdiag__card--content {
position: relative;
inset: auto;
left: auto;
right: auto;
bottom: auto;
top: auto;
width: 100%;
min-width: 0;
transform: none;
animation: none;
max-width: 320px;
margin-inline: auto;
}
.stats__grid, .about-stats { grid-template-columns: 1fr 1fr; }
.audit-hero, .about-grid, .footer__grid { grid-template-columns: 1fr; gap: 34px; }
.layer-grid, .sysv2-grid, .principles { grid-template-columns: 1fr; }
.section { padding: 68px 0; }
.cases { grid-template-columns: 1fr; overflow: visible; }
.case-card { min-height: 0; }
.about-portrait { min-height: 320px; }
.footer__bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
.reveal { opacity: 1; transform: none; }
}
/* === style block 2 === */
:root { color-scheme: light; }
.skip-link {
position: fixed;
top: 12px;
right: 12px;
z-index: 9999;
transform: translateY(-140%);
background: var(--ink);
color: var(--cream);
padding: 10px 16px;
border-radius: 8px;
font-weight: 700;
}
.skip-link:focus-visible { transform: translateY(0); }
a:focus-visible,
button:focus-visible {
outline: 3px solid var(--coral);
outline-offset: 4px;
border-radius: 8px;
}
.brand { text-decoration: none; }
.topbar .nav { align-items: center; }
.hero__stage--diagram {
max-width: 640px;
margin-inline: auto;
overflow: visible;
}
.sysdiag { overflow: visible; }
.sysdiag__lines { inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.sysdiag__line { opacity: 0.72; stroke-width: 1.7; stroke-dasharray: 5 7; }
.sysdiag__card { width: 28%; min-width: 158px; z-index: 4; }
.sysdiag__card--site { top: -4%; left: -4%; }
.sysdiag__card--ops { top: -4%; right: -4%; }
.sysdiag__card--content { bottom: -8%; left: 50%; }
.sysdiag__hub { width: 32%; z-index: 3; }
.sysdiag__card-name { font-size: 15px; }
.sysdiag__card-body { font-size: 12px; }
.sysdiag__card-meter { padding-top: 8px; margin-top: 2px; }
.faq__item { cursor: default; }
.faq__q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
text-align: right;
color: inherit;
}
.faq__q span:first-child { flex: 1; }
.faq__item:not(.open) .faq__a { max-height: 0; padding-top: 0 !important; }
.faq__item.open .faq__a { max-height: 220px; }
.faq__item.open .faq__icon { transform: rotate(45deg); }
.faq__icon { transition: transform 0.25s ease; }
.site-main { display: block; }
.section[id] { scroll-margin-top: 92px; }
@media (max-width: 980px) {
.sysdiag__card { width: 36%; min-width: 0; padding: 12px; }
.sysdiag__card--site { top: 0; left: 0; }
.sysdiag__card--ops { top: 0; right: 0; }
.sysdiag__card--content { bottom: -4%; }
.sysdiag__card-body { display: none; }
.sysdiag__hub { width: 36%; }
}
@media (max-width: 700px) {
.wrap { padding-inline: 20px; }
.topbar__row { gap: 12px; height: 68px; }
.brand { min-width: 0; font-size: 14px; gap: 8px; }
.brand__mark { width: 24px; height: 24px; border-radius: 6px; }
.nav { display: none; }
.btn-pill { padding: 10px 16px; font-size: 13px; white-space: nowrap; }
.hero--v2 { padding-top: 36px !important; }
.hero__inner--v2 {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 32px !important;
width: 100%;
}
.hero__text {
width: 100%;
max-width: 100%;
min-width: 0;
padding-top: 0 !important;
text-align: center;
}
.hero__eyebrow {
max-width: 100%;
white-space: normal;
font-size: 12px;
justify-content: center;
}
body .hero__title {
max-width: 100%;
font-size: clamp(40px, 13vw, 52px) !important;
line-height: 1.28 !important;
overflow-wrap: anywhere;
text-align: center;
}
.hero__sub {
max-width: 100%;
font-size: 16px;
}
.hero__cta-row { gap: 12px; justify-content: center; }
.btn-primary,
.btn-ghost { max-width: 100%; }
.hero__legend { display: none; }
.hero__stage--diagram {
width: min(100%, 360px);
aspect-ratio: 1;
min-height: 0;
margin: 4px auto 0;
}
.sysdiag__card { width: 40%; }
.sysdiag__card-meter { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
.sysdiag__line { animation: none !important; }
}
/* === PATH B FIXES 2026-05-23-pathb === */
/* WP body has .page class from body_class() which collides with source .page wrapper. Unfreeze scroll on body. */
body.page-id-33526 { overflow: visible !important; height: auto !important; }
body.page-id-33526.page { overflow: visible !important; }
/* removed html overflow-x: hidden (locked viewport scroll); body handles x-clip */
/* Restore Bricks-rendered html element to behave as a block container, not flex */
body.page-id-33526 main#main { display: block; }
/* Make sure source layout inside the html element flows naturally */
body.page-id-33526 .topbar { position: sticky; top: 0; z-index: 50; }
/* === END PATH B FIXES === */
body.page-id-33526 div.page { overflow: visible !important; }
body.page-id-33526 main { overflow: visible !important; }
body.page-id-33526.admin-bar .topbar { top: 32px !important; }
/* ========== [6] drb-polish2.css ========== */
/* drb-polish2.css desktop polish */
.about-portrait { overflow: visible !important; text-align: center; }
.about-portrait__block { position: relative; overflow: hidden; border-radius: inherit; }
.about-portrait .about-portrait__tag {
position: relative !important;
inset: auto !important;
bottom: auto !important; left: auto !important; right: auto !important; top: auto !important;
transform: none !important;
display: inline-flex !important;
align-items: center; gap: 8px;
margin: 14px auto 0 auto !important;
width: auto !important; max-width: 92% !important;
background: rgba(244, 237, 225, 0.96) !important;
color: #10141e !important;
padding: 9px 16px !important;
border-radius: 999px !important;
box-shadow: 0 6px 18px rgba(16,20,30,0.10) !important;
font-weight: 600;
}
.about-portrait .about-portrait__tag .dot-live { background:#22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.18); }
@media (min-width: 901px) {
.drb-timeline .drb-timeline__steps::before {
background: none !important;
border-top: 2px dashed rgba(232,90,79,0.45) !important;
height: 0 !important;
top: 9px !important;
left: calc((100% / 3) / 2) !important;
right: calc((100% / 3) / 2) !important;
z-index: 0 !important;
}
.drb-timeline .drb-step__rail {
height: 22px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative; z-index: 1;
margin-bottom: 18px !important;
}
.drb-timeline .drb-step__dot {
width: 18px !important; height: 18px !important;
border-radius: 50% !important;
background: #fff !important;
border: 3px solid #E85A4F !important;
box-shadow: 0 0 0 6px rgba(232,90,79,0.10), 0 2px 8px rgba(232,90,79,0.22) !important;
position: relative; z-index: 2;
}
.drb-timeline .drb-step__rail::before,
.drb-timeline .drb-step__rail::after { content: none !important; display: none !important; }
.drb-timeline .drb-step__card {
background: #fff !important;
border: 1px solid rgba(16,20,30,0.06) !important;
box-shadow: 0 1px 0 rgba(16,20,30,0.04), 0 12px 28px -16px rgba(16,20,30,0.18) !important;
border-radius: 16px !important;
padding: 22px 22px 24px !important;
transition: transform .25s ease, box-shadow .25s ease;
}
.drb-timeline .drb-step__card:hover {
transform: translateY(-2px);
box-shadow: 0 1px 0 rgba(16,20,30,0.04), 0 18px 34px -16px rgba(16,20,30,0.22) !important;
}
.drb-timeline .drb-step__meta { margin-bottom: 10px; }
.drb-timeline .drb-step__num { color: #E85A4F !important; font-weight: 700; letter-spacing: .02em; }
}
/* About portrait tag positioning override v2: below portrait, not inside */
@media (min-width: 901px) {
.about-section .about-portrait,
.about-portrait { position: relative !important; overflow: visible !important; padding-bottom: 64px !important; }
.about-section .about-portrait .about-portrait__tag,
.about-portrait .about-portrait__tag {
position: absolute !important;
top: auto !important;
bottom: 8px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
margin: 0 !important;
z-index: 5;
white-space: nowrap;
}
}
/* ==========================================================
MOBILE mirror desktop polish (about tag + timeline dots)
========================================================== */
@media (max-width: 900px) {
/* Move Omar tag below his torso to clear his face */
.about-section .about-portrait,
.about-portrait { position: relative !important; overflow: visible !important; padding-bottom: 56px !important; }
.about-section .about-portrait .about-portrait__tag,
.about-portrait .about-portrait__tag {
position: absolute !important;
top: auto !important;
bottom: 8px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
margin: 0 !important;
z-index: 5;
white-space: nowrap;
display: inline-flex !important;
align-items: center;
gap: 8px;
background: rgba(244, 237, 225, 0.96) !important;
color: #10141e !important;
padding: 8px 14px !important;
border-radius: 999px !important;
box-shadow: 0 6px 18px rgba(16,20,30,0.10) !important;
font-weight: 600;
font-size: 14px;
}
.about-portrait .about-portrait__tag .dot-live {
background:#22c55e !important;
box-shadow: 0 0 0 4px rgba(34,197,94,0.18) !important;
}
/* Mobile timeline dots: ring style to match desktop */
.drb-timeline .drb-step__dot {
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
background: #fff !important;
border: 3px solid #E85A4F !important;
box-shadow: 0 0 0 5px rgba(232,90,79,0.10), 0 2px 6px rgba(232,90,79,0.22) !important;
position: relative;
z-index: 2;
}
/* Mobile timeline connector if it uses repeating gradient, soften to dashed border */
.drb-timeline .drb-timeline__steps::before {
background: none !important;
border-left: 2px dashed rgba(232,90,79,0.40) !important;
border-top: 0 !important;
width: 0 !important;
}
/* Card refinements on mobile */
.drb-timeline .drb-step__card {
background: #fff !important;
border: 1px solid rgba(16,20,30,0.06) !important;
box-shadow: 0 1px 0 rgba(16,20,30,0.04), 0 8px 22px -12px rgba(16,20,30,0.16) !important;
border-radius: 14px !important;
padding: 18px 18px 20px !important;
}
.drb-timeline .drb-step__num { color: #E85A4F !important; font-weight: 700; }
}
/* ==========================================================
MOBILE FIX v2 audit deliverables, cases grid, menu drawer
========================================================== */
@media (max-width: 900px) {
/* --- Audit deliverables (#audit .audit-deliv) full-width stack --- */
#audit .audit-hero,
#audit .audit-copy { width: 100% !important; max-width: 100% !important; }
#audit .audit-deliv {
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
max-width: 100% !important;
margin: 18px 0 0 !important;
padding: 0 !important;
gap: 10px !important;
background: transparent !important;
}
#audit .audit-deliv li {
width: 100% !important;
max-width: 100% !important;
background: #fff !important;
border: 1px solid rgba(16,20,30,0.08) !important;
border-radius: 14px !important;
padding: 14px 16px !important;
gap: 12px !important;
align-items: flex-start !important;
box-shadow: 0 1px 0 rgba(16,20,30,0.03), 0 6px 18px -12px rgba(16,20,30,0.14) !important;
}
#audit .audit-deliv li .audit-deliv__t {
flex: 0 0 auto !important;
width: 32px !important; height: 32px !important;
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
background: rgba(232,90,79,0.10) !important;
color: #E85A4F !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 13px !important;
padding: 0 !important;
}
#audit .audit-deliv li > span:not(.audit-deliv__t) {
flex: 1 1 auto !important;
line-height: 1.55 !important;
font-size: 15px !important;
color: #10141e !important;
text-align: right !important;
}
/* --- Work / Case cards (#work .cases) full-width stack --- */
#work .cases {
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
gap: 14px !important;
padding: 0 !important;
}
#work .case-card {
width: 100% !important;
max-width: 100% !important;
background: #fff !important;
border: 1px solid rgba(16,20,30,0.08) !important;
border-radius: 16px !important;
padding: 18px 18px 20px !important;
box-shadow: 0 1px 0 rgba(16,20,30,0.03), 0 8px 22px -14px rgba(16,20,30,0.16) !important;
}
#work .case-card__num {
color: #E85A4F !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: .04em;
margin-bottom: 4px;
}
#work .case-card__sector { font-size: 18px !important; font-weight: 700 !important; margin: 2px 0 6px !important; }
#work .case-card__domain { font-size: 13px !important; color: rgba(16,20,30,0.62) !important; margin-bottom: 12px !important; }
#work .case-card__row {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
margin-top: 10px !important;
padding-top: 10px !important;
border-top: 1px dashed rgba(16,20,30,0.10) !important;
}
#work .case-card__label { font-size: 11px !important; color: #E85A4F !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; }
#work .case-card__system, #work .case-card__impact { font-size: 14px !important; line-height: 1.6 !important; color: #10141e !important; }
/* --- Mobile menu drawer typography & contrast bump --- */
body header.topbar nav#primary-nav.is-open,
header.topbar nav#primary-nav.is-open,
nav#primary-nav.is-open {
background: #ffffff !important;
box-shadow: -12px 0 32px rgba(16,20,30,0.18) !important;
}
header.topbar nav#primary-nav a,
nav#primary-nav a {
color: #10141e !important;
font-weight: 600 !important;
font-size: 18px !important;
padding: 16px 22px !important;
border-bottom: 1px solid rgba(16,20,30,0.06) !important;
display: block !important;
text-align: right !important;
width: 100% !important;
background: transparent !important;
text-decoration: none !important;
line-height: 1.4 !important;
}
header.topbar nav#primary-nav a:hover,
header.topbar nav#primary-nav a:focus,
nav#primary-nav a:hover, nav#primary-nav a:focus {
background: rgba(232,90,79,0.06) !important;
color: #E85A4F !important;
}
/* Backdrop dim layer (when body has drb-menu-open) */
body.drb-menu-open::before {
content: "" !important;
position: fixed !important;
inset: 0 !important;
background: rgba(16,20,30,0.45) !important;
z-index: 9998 !important;
pointer-events: auto !important;
}
/* Make sure the drawer sits above topbar+backdrop */
header.topbar nav#primary-nav { z-index: 9999 !important; }
/* Drawer width on small screens cover most of viewport */
@media (max-width: 480px) {
header.topbar nav#primary-nav { width: 86vw !important; max-width: 360px !important; }
}
}
/* Audit hero collapse 2-col grid to single column on mobile */
@media (max-width: 900px) {
#audit .wrap.audit-hero {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 28px !important;
padding: 56px 20px !important;
}
#audit .audit-copy { width: 100% !important; }
}
/* Specificity boost for audit hero collapse on mobile */
@media (max-width: 900px) {
body section#audit > div.wrap.audit-hero,
body section#audit .wrap.audit-hero {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
gap: 28px !important;
padding: 56px 20px !important;
}
body section#audit > div.wrap.audit-hero > .audit-copy,
body section#audit .audit-copy { width: 100% !important; max-width: 100% !important; }
body section#audit .audit-deliv {
grid-template-columns: 1fr !important;
width: 100% !important;
max-width: 100% !important;
}
body section#audit .audit-deliv li { width: 100% !important; max-width: 100% !important; }
}
/* ==========================================================
MOBILE FIX v3 Collapse ALL multi-col grids that overflow
========================================================== */
@media (max-width: 900px) {
/* AI layers ( / / etc.) */
body .layer-grid,
body section .layer-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 14px !important;
width: 100% !important;
max-width: 100% !important;
}
body .layer-card,
body .layer-grid > .layer-card {
width: 100% !important;
max-width: 100% !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: 14px !important;
padding: 18px !important;
}
/* Principles cards ( ) */
body .principles,
body section .principles {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 14px !important;
width: 100% !important;
}
body .principles > * {
width: 100% !important;
max-width: 100% !important;
}
/* Systems v2 packages flex row */
body .sysv2__packages,
body section .sysv2__packages {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
}
body .sysv2__packages > * { width: 100% !important; }
/* About stats: 2x2 already done by mobile2 but ensure full width */
body .about-stats {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
width: 100% !important;
gap: 14px !important;
}
/* Report axis grid inside audit PDF visual */
body .report__axis {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
gap: 8px !important;
align-items: center;
}
}
/* MOBILE FIX v4 SPECIFICITY-WIN against Bricks inline !important rules */
@media (max-width: 900px) {
/* layer-grid must beat .layer-section .layer-grid (0,2,0) */
html body section.layer-section .layer-grid,
html body .layer-section .layer-grid,
html body div.layer-grid {
grid-template-columns: 1fr !important;
display: grid !important;
}
/* sysv2-grid and principles too */
html body .sysv2-grid,
html body .principles {
grid-template-columns: 1fr !important;
display: grid !important;
}
/* cases */
html body section#work .cases,
html body #work .cases {
grid-template-columns: 1fr !important;
display: grid !important;
}
}
/* MOBILE FIX v5 beat :has() selectors */
@media (max-width: 900px) {
html body section.section--dark:has(> .wrap > .principles) .principles,
html body section:has(.principles) .principles,
html body div.principles {
grid-template-columns: 1fr !important;
display: grid !important;
width: 100% !important;
max-width: 100% !important;
gap: 14px !important;
}
}
/* MOBILE FIX v6 hardened menu drawer + close button styling */
@media (max-width: 900px) {
/* Drawer background absolutely white + force */
html body header.topbar nav#primary-nav,
html body nav#primary-nav {
background: #ffffff !important;
padding-top: 64px !important;
}
/* Force all link colors to deep dark for maximum contrast */
html body header.topbar nav#primary-nav > a,
html body nav#primary-nav > a {
color: #0a0a0f !important;
font-weight: 700 !important;
font-size: 18px !important;
opacity: 1 !important;
text-shadow: none !important;
-webkit-text-fill-color: #0a0a0f !important;
}
/* Add a visible close cue at top-right of drawer */
html body header.topbar nav#primary-nav.is-open::before {
content: "";
position: absolute;
top: 14px;
left: 14px;
width: 36px; height: 36px;
display: inline-flex;
align-items: center; justify-content: center;
font-size: 26px;
color: #10141e;
background: rgba(16,20,30,0.05);
border-radius: 50%;
z-index: 2;
pointer-events: none;
font-weight: 300;
line-height: 1;
}
}
/* === drawer open-state fix vfp56 === */
@media (max-width: 900px) {
html body header.topbar nav.nav#primary-nav.is-open,
html body nav.nav#primary-nav.is-open,
html body header.topbar nav#primary-nav.is-open,
html body nav#primary-nav.is-open {
transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
}
/* drawer container hard-set */
html body nav#primary-nav {
background: #ffffff !important;
width: min(86vw, 360px) !important;
box-shadow: -16px 0 40px rgba(0,0,0,0.18) !important;
border-left: 1px solid rgba(0,0,0,0.06) !important;
}
/* backdrop visible */
#drb-mm-backdrop {
background: rgba(10,10,15,0.55) !important;
backdrop-filter: blur(2px) !important;
}
}
/* === drawer final polish vfp57 === */
@media (max-width: 900px) {
/* solid white background no transparency at any level */
html body header.topbar nav.nav#primary-nav,
html body nav.nav#primary-nav,
html body header.topbar nav#primary-nav,
html body nav#primary-nav {
background-color: #ffffff !important;
background-image: none !important;
opacity: 1 !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
padding: 80px 28px 28px !important;
box-shadow: -20px 0 50px rgba(0,0,0,0.22) !important;
overflow-y: auto !important;
}
/* link stack */
html body nav#primary-nav > a,
html body nav#primary-nav a {
display: block !important;
padding: 14px 0 !important;
margin: 0 !important;
font-size: 18px !important;
font-weight: 700 !important;
color: #0a0a0f !important;
-webkit-text-fill-color: #0a0a0f !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(10,10,15,0.08) !important;
line-height: 1.5 !important;
}
html body nav#primary-nav .pill,
html body nav#primary-nav .btn,
html body nav#primary-nav .cta-pill {
display: inline-flex !important;
margin-top: 18px !important;
background: #e85a3c !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
padding: 12px 22px !important;
border-radius: 999px !important;
border-bottom: none !important;
width: auto !important;
align-self: flex-start !important;
}
/* close X button visible */
#drb-mm-close,
.drb-mm-close,
nav#primary-nav .drb-mm-close {
position: absolute !important;
top: 18px !important;
left: 18px !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
background: rgba(10,10,15,0.06) !important;
color: #0a0a0f !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 22px !important;
font-weight: 700 !important;
border: 0 !important;
cursor: pointer !important;
z-index: 10 !important;
}
#drb-mm-close:hover {
background: rgba(10,10,15,0.12) !important;
}
}
/* === drawer bulletproof vfp58 === */
@media (max-width: 900px) {
/* fully opaque drawer with ::before solid layer for screenshot safety */
html body nav#primary-nav {
background: #ffffff !important;
isolation: isolate !important;
}
html body nav#primary-nav::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: #ffffff !important;
z-index: -1 !important;
}
html body nav#primary-nav > * {
position: relative !important;
z-index: 1 !important;
}
/* faster transition so iframe simulator does not freeze mid-flight */
html body header.topbar nav#primary-nav,
html body nav#primary-nav {
transition: transform 0.22s ease !important;
}
/* ensure the close X is visible even before mobilemenu.js injects it */
html body nav#primary-nav .nav-toggle-inline,
html body nav#primary-nav button.close {
display: none !important;
}
}
/* === vfp59 mobile triple-fix: FAQ collapse + audit column + drawer paint === */
@media (max-width: 900px) {
/* ---- FAQ: closed items must be FULLY collapsed (no padding bleed) ---- */
html body .faq .faq__item .faq__a,
html body .faq__item .faq__a {
max-height: 0 !important;
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
visibility: hidden !important;
transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.28s ease !important;
}
html body .faq .faq__item.open .faq__a,
html body .faq__item.open .faq__a {
max-height: 600px !important;
height: auto !important;
padding: 4px 14px 18px !important;
opacity: 1 !important;
visibility: visible !important;
}
/* FAQ question button polish */
html body .faq .faq__item {
background: #fff !important;
border: 1px solid rgba(10,10,15,0.06) !important;
border-radius: 14px !important;
margin-bottom: 12px !important;
overflow: hidden !important;
}
html body .faq .faq__q {
width: 100% !important;
background: transparent !important;
border: 0 !important;
padding: 16px 14px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
text-align: right !important;
cursor: pointer !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #1a1a22 !important;
line-height: 1.5 !important;
}
html body .faq .faq__q > span:first-child {
flex: 1 !important;
text-align: right !important;
}
html body .faq .faq__icon {
flex: 0 0 28px !important;
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
background: rgba(232,106,90,0.12) !important;
color: #e86a5a !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 18px !important;
font-weight: 700 !important;
transition: transform 0.2s ease !important;
}
html body .faq .faq__item.open .faq__icon {
transform: rotate(45deg) !important;
}
/* ---- AUDIT hero: kill the fixed 299px column ---- */
html body section#audit .wrap.audit-hero,
html body section#audit > .wrap.audit-hero,
html body #audit .audit-hero {
display: block !important;
grid-template-columns: none !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
html body #audit .audit-copy,
html body #audit .audit-visual,
html body #audit .audit-deliv {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 24px !important;
}
/* ---- DRAWER: nuclear background paint ---- */
html body header.topbar nav.nav#primary-nav,
html body nav.nav#primary-nav,
html body header.topbar nav#primary-nav,
html body nav#primary-nav,
body nav#primary-nav,
nav#primary-nav.nav {
background-color: #ffffff !important;
background: #ffffff !important;
background-image: linear-gradient(#fff, #fff) !important;
color: #0a0a0f !important;
-webkit-text-fill-color: initial !important;
opacity: 1 !important;
filter: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
mix-blend-mode: normal !important;
isolation: isolate !important;
}
}
/* === vfp60 FAQ hard-collapse (no transition, display:none on closed) === */
@media (max-width: 900px) {
/* Closed FAQ answers are DISPLAY:NONE, no rendering at all */
html body .faq .faq__item .faq__a,
html body .faq__item .faq__a,
.faq__item .faq__a,
.faq__a {
display: none !important;
max-height: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
visibility: hidden !important;
transition: none !important;
}
/* Open items: show the answer */
html body .faq .faq__item.open .faq__a,
html body .faq__item.open .faq__a,
.faq__item.open .faq__a {
display: block !important;
max-height: none !important;
height: auto !important;
padding: 4px 16px 18px !important;
opacity: 1 !important;
visibility: visible !important;
color: #1a1a22 !important;
font-size: 14px !important;
line-height: 1.65 !important;
}
/* Also handle aria-expanded based state */
html body .faq__item .faq__q[aria-expanded='false'] + .faq__a,
html body .faq__q[aria-expanded='false'] ~ .faq__a {
display: none !important;
height: 0 !important;
padding: 0 !important;
}
}
/* Apply ALSO on desktop to be safe closed FAQ = display none always */
html body .faq .faq__item:not(.open) .faq__a,
html body .faq__item:not(.open) .faq__a {
display: none !important;
}
/* ==========================================================
FINAL FIX v7 FAQ clip, hide 02 badge + eyebrow, drawer paint
========================================================== */
/* 1) FAQ closed items: clip the answer BEHIND the question.
Answer is positioned absolute behind the question header so
closed items occupy ZERO extra space and the text is hidden.
When .open is added, answer becomes static block below. */
.faq__item .faq__a {
display: block !important;
position: absolute !important;
left: -9999px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
max-height: 1px !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
clip: rect(0,0,0,0) !important;
clip-path: inset(50%) !important;
}
.faq__item.open .faq__a {
position: static !important;
left: auto !important;
width: auto !important;
height: auto !important;
max-height: 600px !important;
padding: 12px 20px 20px !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
clip: auto !important;
clip-path: none !important;
color: #1a1a1a !important;
line-height: 1.7 !important;
}
/* 2) Remove '02' floating badge on hero sysdiag card (both mobile + desktop) */
.sysdiag .sysdiag__card-tag,
.sysdiag__card .sysdiag__card-tag {
display: none !important;
}
/* 3) Remove hero eyebrow pill ' ' (both mobile + desktop) */
.hero .hero__eyebrow,
.hero__text .hero__eyebrow,
span.hero__eyebrow,
.hero__eyebrow {
display: none !important;
}
/* 4) Menu drawer bulletproof solid white paint on real mobile devices.
The issue: body::before backdrop creates stacking-context that traps
the drawer. Fix: drawer goes to z-index 100001, backdrop stays at 9998,
and we paint the drawer with multiple background layers + force
no isolation so nothing can trap it. */
@media (max-width: 900px) {
html body header.topbar nav#primary-nav.nav,
html body header.topbar nav#primary-nav {
z-index: 100001 !important;
background-color: #ffffff !important;
background: #ffffff !important;
background-image: linear-gradient(#ffffff, #ffffff) !important;
isolation: auto !important;
mix-blend-mode: normal !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
will-change: auto !important;
}
html body header.topbar nav#primary-nav::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: #ffffff !important;
z-index: -1 !important;
opacity: 1 !important;
}
/* Force backdrop to a LOWER stacking layer + body, not blocking */
body::before {
z-index: 99998 !important;
}
/* Drawer links force solid black */
html body header.topbar nav#primary-nav a,
html body header.topbar nav#primary-nav.is-open a {
color: #0a0a0f !important;
-webkit-text-fill-color: #0a0a0f !important;
opacity: 1 !important;
text-shadow: none !important;
background: transparent !important;
}
}
/* ==========================================================
FIX v8 escape header stacking context when drawer is open
The header.topbar has position:sticky + z-index:100 which traps
the drawer's z-index. When drawer is open, lift the entire
header above the backdrop (which is at 9998).
========================================================== */
@media (max-width: 900px) {
body.drb-menu-open header.topbar,
body.nav-open header.topbar {
z-index: 100000 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
background: transparent !important;
}
/* When menu open, drop the topbar's translucent backdrop so it
doesn't blur the drawer. The drawer itself paints its own bg. */
body.drb-menu-open header.topbar::before,
body.nav-open header.topbar::before {
display: none !important;
}
/* Belt + suspenders: backdrop below header */
#drb-mm-backdrop {
z-index: 99990 !important;
}
}
/* ==========================================================
FIX v9 BREATHING ROOM & spacing polish
Remove dead vertical space + improve section rhythm
========================================================== */
/* === DESKTOP & MOBILE: Drop min-height when cards stack === */
@media (max-width: 900px) {
/* Layer cards (AI section) was 230px, now auto */
.layer-card,
.layer-grid > .layer-card,
html body section .layer-card {
min-height: 0 !important;
height: auto !important;
padding: 22px 20px !important;
}
/* Principle cards same fix */
.principle,
.principles > .principle,
html body section .principle {
min-height: 0 !important;
height: auto !important;
padding: 22px 20px !important;
}
/* Sysv2 packages also tighten */
.sysv2,
html body section .sysv2 {
min-height: 0 !important;
}
/* Generic: any card-like that's too tall */
.case-card,
.layer-card,
.principle {
min-height: 0 !important;
}
/* Better vertical rhythm between stacked cards */
.layer-grid {
gap: 14px !important;
}
.principles {
gap: 14px !important;
}
.cases {
gap: 16px !important;
}
/* Sections: tighten heavy top/bottom padding on mobile */
section.section,
section.audit-section,
section.layer-section,
#systems,
#work,
#faq,
section.section--dark {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
/* Hero: a bit tighter */
.hero.hero--v2,
section.hero {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
}
/* === DESKTOP: Cases grid should be more breathable (3-col, not 5) === */
@media (min-width: 901px) {
/* Cases: 5 cards at 213px is too cramped. Go 3-col with 2 wrapping */
.cases {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 22px !important;
}
.case-card {
min-height: 0 !important;
padding: 28px 26px !important;
}
/* Layer grid: 4 cards stay at 4-col but more padding */
.layer-card {
min-height: 250px !important;
padding: 26px 24px !important;
}
/* Principles: 3 cards keep 3-col but more padding */
.principle {
padding: 28px 26px !important;
}
/* Section breathing on desktop */
section.section,
section.audit-section,
section.layer-section,
#systems,
#work,
#faq,
section.section--dark {
padding-top: 88px !important;
padding-bottom: 88px !important;
}
/* Hero a bit more space */
.hero.hero--v2 {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
/* Audit hero: a little more gap between columns */
.audit-hero {
gap: 80px !important;
}
/* Sysv2 cards padding bump */
.sysv2 {
padding: 30px 26px !important;
}
}
/* === Header spacing: don't crowd the section beneath === */
.hero.hero--v2 {
scroll-margin-top: 80px;
}
section[id] {
scroll-margin-top: 80px;
}
/* FIX v9b win specificity for cases grid + audit hero gap */
@media (min-width: 901px) {
html body #work .cases {
grid-template-columns: repeat(3, 1fr) !important;
gap: 22px !important;
}
html body section#audit > div.wrap.audit-hero {
gap: 80px !important;
}
}
/* FIX v10 - HEADER OPACITY + SECTION OVERLAP */
html body header.topbar,
html body header.topbar.is-stuck,
html body header {
background-color: #fdf6f2 !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}
html body.drb-scrolled header.topbar,
html body.drb-scrolled header {
background-color: #fdf6f2 !important;
box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
}
@media (max-width: 900px) {
html body #audit {
padding-top: 56px !important;
margin-top: 12px !important;
}
html body section.hero.hero--v2 {
padding-bottom: 36px !important;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
html body .stats.reveal {
margin-bottom: 8px !important;
}
}
@media (min-width: 901px) {
html body header.topbar {
background-color: rgba(253, 246, 242, 0.96) !important;
}
}
/* FIX v11 - PDF report breathing room from 250 USD pill */
@media (max-width: 900px) {
html body section#audit .wrap.audit-hero > .report,
html body section#audit .wrap.audit-hero > .report.report--v2,
html body section#audit aside.report {
margin-top: 40px !important;
}
html body section#audit .audit-cta-row {
margin-bottom: 16px !important;
}
/* Add internal spacing to make the report card itself feel less crowded */
html body section#audit aside.report {
margin-bottom: 12px !important;
}
}
/* FIX v12 - kill header bleed-through definitively */
html body header.topbar,
html body header {
z-index: 9999 !important;
background-color: #fdf6f2 !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
isolation: isolate;
}
html body .stats,
html body .stats.reveal,
html body .stat {
z-index: 1 !important;
}
@media (max-width: 900px) {
html body section.hero.hero--v2 {
overflow: hidden !important;
padding-bottom: 48px !important;
}
html body #audit {
padding-top: 72px !important;
margin-top: 16px !important;
}
}
/* FIX v12 - audit eyebrow position bug on mobile (overlapping H2) */
@media (max-width: 900px) {
html body section#audit > div.wrap.audit-hero > .audit-copy > .eyebrow,
html body section#audit .audit-copy > .eyebrow,
html body section#audit .audit-copy .eyebrow,
html body #audit .eyebrow {
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
margin: 0 0 12px 0 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
}
/* FIX v13 - eyebrow RTL alignment + tighten section whitespace */
/* 1. Align audit-copy eyebrow to the right (RTL) like other section eyebrows */
html body .audit-copy .eyebrow,
html body section#audit .audit-copy > .eyebrow {
align-self: flex-start !important;
margin-inline-end: auto !important;
margin-inline-start: 0 !important;
justify-content: flex-start !important;
text-align: right !important;
}
/* Make sure audit-copy contents align right consistently */
html body .audit-copy {
align-items: flex-start !important;
text-align: right !important;
}
/* Allow H2 to still be styled center-ish via its own width, but default right-align */
html body .audit-copy .title-lg,
html body .audit-copy .lead,
html body .audit-copy .audit-deliv,
html body .audit-copy .audit-cta-row {
text-align: right !important;
align-self: stretch !important;
}
/* 2. Tighten mobile section whitespace - consistent rhythm */
@media (max-width: 900px) {
/* Standard section spacing */
html body #systems,
html body #work,
html body #about,
html body #drb-timeline,
html body #faq,
html body #cta {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
/* Dark sections slightly more for visual weight */
html body .layer-section,
html body section.section.section--dark {
padding-top: 44px !important;
padding-bottom: 44px !important;
}
/* Audit: bump back down from 72 now that header z-index is fixed */
html body #audit {
padding-top: 48px !important;
padding-bottom: 44px !important;
margin-top: 8px !important;
}
/* Hero: keep tight */
html body section.hero.hero--v2 {
padding-top: 20px !important;
padding-bottom: 32px !important;
}
/* Tighten internal spacing: card grids gap */
html body .layer-cards,
html body .principles,
html body .sysv2,
html body .cases {
gap: 12px !important;
}
/* Card padding tighten */
html body .layer-card,
html body .principle,
html body .case,
html body .sysv2 {
padding: 20px 18px !important;
}
/* Section heading bottom margin */
html body .section-head,
html body .section-header,
html body .title-lg {
margin-bottom: 16px !important;
}
/* Lead text margin */
html body .lead,
html body .section-lead {
margin-bottom: 20px !important;
}
}
/* FIX v14 - kill hero stage aspect-ratio dead space on mobile + tighten hero rhythm */
@media (max-width: 900px) {
html body .hero__stage,
html body .hero__stage--diagram {
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
}
html body .hero__inner,
html body .hero__inner--v2 {
gap: 16px !important;
}
/* Sysdiag pills - tighten internal spacing */
html body .sysdiag {
gap: 8px !important;
}
/* Stats grid: less margin from hero content */
html body .stats,
html body .stats.reveal {
margin-top: 16px !important;
margin-bottom: 0 !important;
}
/* Hero text bottom margin */
html body .hero__text {
margin-bottom: 0 !important;
}
/* Hero section overall: also reduce bottom padding since stats sit at the bottom */
html body section.hero.hero--v2 {
padding-bottom: 24px !important;
}
}
/* FIX v15 - kill report card dead height on mobile */
@media (max-width: 900px) {
html body .report,
html body .report.report--v2,
html body aside.report,
html body section#audit aside.report,
html body section#audit .report.report--v2 {
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
}
/* Also ensure the report's inner sheet sets the height naturally */
html body .report__sheet.report__sheet--front {
position: relative !important;
}
/* And the back decorative sheets shouldn't force taller height */
html body .report__sheet.report__sheet--back-1,
html body .report__sheet.report__sheet--back-2 {
height: 100% !important;
}
/* Audit wrap shouldn't reserve extra height */
html body section#audit .wrap.audit-hero {
min-height: 0 !important;
height: auto !important;
}
}
/* FIX v16 - report sheet grid on mobile forces extra row height. Switch to block. */
@media (max-width: 900px) {
html body .report__sheet,
html body .report__sheet--front,
html body .report__sheet--back-1,
html body .report__sheet--back-2 {
display: block !important;
grid-template-rows: none !important;
grid-template-columns: none !important;
}
html body .report__sheet--front > * {
margin-bottom: 14px !important;
}
html body .report__sheet--front > *:last-child {
margin-bottom: 0 !important;
}
/* Remove the transform scale on mobile so the card fills natural mobile width */
html body section#audit aside.report,
html body section#audit .report.report--v2 {
transform: none !important;
transform-origin: top right !important;
}
}
/* v17: Footer color #1A1F2C + heading white+bold matching */
html body footer.footer { background-color: #1A1F2C !important; background: #1A1F2C !important; }
html body footer.footer h1, html body footer.footer h2, html body footer.footer h3, html body footer.footer h4, html body footer.footer h5, html body footer.footer h6 { color: #ffffff !important; font-weight: 700 !important; }
html body footer.footer .footer__title { color: #ffffff !important; font-weight: 700 !important; }
/* v18: Footer headings - bigger, bolder, pure white (force on all descendants) */
html body footer.footer h1, html body footer.footer h2, html body footer.footer h3, html body footer.footer h4, html body footer.footer h5, html body footer.footer h6,
html body footer.footer h1 *, html body footer.footer h2 *, html body footer.footer h3 *, html body footer.footer h4 *, html body footer.footer h5 *, html body footer.footer h6 *,
html body footer.footer .footer__title, html body footer.footer .footer__title * {
color: #FFFFFF !important;
font-weight: 900 !important;
font-size: 22px !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
margin-bottom: 14px !important;
-webkit-text-fill-color: #FFFFFF !important;
text-shadow: none !important;
opacity: 1 !important;
}
@media (max-width: 900px) {
html body footer.footer h1, html body footer.footer h2, html body footer.footer h3, html body footer.footer h4, html body footer.footer h5, html body footer.footer h6 {
font-size: 20px !important;
}
}
/* v19: Header layout - group nav + CTA together so CTA isn't isolated (desktop only) */
@media (min-width: 901px) {
html body header.topbar .topbar__row { justify-content: flex-start !important; gap: 28px !important; }
html body header.topbar .topbar__row .brand { margin-inline-start: auto !important; order: 1 !important; }
html body header.topbar .topbar__row .nav { order: 2 !important; gap: 22px !important; }
html body header.topbar .topbar__row > a[href*="wa.me"] { order: 3 !important; margin-inline-end: 0 !important; }
/* CTA polish - elevated pill style to feel like a primary action */
html body header.topbar .topbar__row > a[href*="wa.me"] {
background: #F08E72 !important;
color: #ffffff !important;
font-weight: 700 !important;
padding: 9px 20px !important;
border-radius: 999px !important;
box-shadow: 0 6px 16px rgba(240,142,114,0.28) !important;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}
html body header.topbar .topbar__row > a[href*="wa.me"]:hover {
background: #E97A5C !important;
transform: translateY(-1px) !important;
box-shadow: 0 10px 22px rgba(240,142,114,0.36) !important;
}
/* Nav links slightly tighter and consistent */
html body header.topbar .topbar__row .nav a { font-weight: 600 !important; }
}
/* v20: Force header to span full viewport width (was shrinking to content because parent is flex column align-items:flex-start) */
html body header.topbar {
width: 100% !important;
max-width: 100% !important;
align-self: stretch !important;
box-sizing: border-box !important;
left: 0 !important;
right: 0 !important;
}
html body header.topbar .wrap.topbar__row {
width: 100% !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
/* v21: Header layout fix - keep wrap full-width, cluster brand/nav/CTA on RTL start (right), keep CTA visually attached */
@media (min-width: 901px) {
/* Reset v19 ordering disasters */
html body header.topbar .topbar__row { justify-content: flex-end !important; gap: 28px !important; flex-direction: row !important; }
html body header.topbar .topbar__row .brand { order: 0 !important; margin: 0 !important; }
html body header.topbar .topbar__row .nav { order: 0 !important; gap: 22px !important; margin: 0 !important; }
html body header.topbar .topbar__row > a[href*="wa.me"] { order: 0 !important; margin: 0 !important; }
}
/* v22: RTL flex-start to push cluster to the RIGHT side */
@media (min-width: 901px) {
html body header.topbar .topbar__row { justify-content: flex-start !important; }
}
/* ============================================================
v23: Floating glass-pill header (award-winning treatment)
- Detached pill with backdrop-blur + soft elevation
- Dark charcoal CTA (complements hero peach instead of competing)
- Animated underline on nav links
- Refined DR brand mark with inner ring
- Scroll-aware shrink behavior
============================================================ */
@media (min-width: 901px) {
/* Sticky container becomes invisible track */
html body header.topbar {
background: transparent !important;
box-shadow: none !important;
border: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
top: 0 !important;
transition: padding .25s ease !important;
}
html body header.topbar::before, html body header.topbar::after { display: none !important; content: none !important; }
/* The floating pill itself */
html body header.topbar .wrap.topbar__row {
max-width: 1120px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 10px 18px 10px 10px !important;
background: rgba(253, 246, 242, 0.72) !important;
-webkit-backdrop-filter: blur(20px) saturate(140%) !important;
backdrop-filter: blur(20px) saturate(140%) !important;
border: 1px solid rgba(20, 20, 30, 0.06) !important;
border-radius: 999px !important;
box-shadow: 0 8px 28px rgba(20, 20, 30, 0.06), 0 1px 0 rgba(255,255,255,0.6) inset !important;
justify-content: flex-start !important;
gap: 24px !important;
transition: box-shadow .3s ease, background .3s ease, transform .3s ease !important;
}
html body.drb-scrolled header.topbar .wrap.topbar__row {
background: rgba(253, 246, 242, 0.88) !important;
box-shadow: 0 12px 36px rgba(20, 20, 30, 0.10), 0 1px 0 rgba(255,255,255,0.6) inset !important;
}
/* Brand mark refined */
html body header.topbar .brand {
gap: 10px !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
color: #10141E !important;
}
html body header.topbar .brand__mark {
width: 36px !important;
height: 36px !important;
border-radius: 999px !important;
background: #10141E !important;
color: #ffffff !important;
font-weight: 800 !important;
font-size: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 4px 10px rgba(16,20,30,0.18) !important;
}
html body header.topbar .brand__mark span { color: #ffffff !important; }
/* Nav links - animated underline */
html body header.topbar .nav { gap: 26px !important; }
html body header.topbar .nav a {
position: relative !important;
color: #10141E !important;
font-weight: 500 !important;
font-size: 15px !important;
padding: 6px 2px !important;
transition: color .2s ease !important;
}
html body header.topbar .nav a::after {
content: '' !important;
position: absolute !important;
left: 50% !important;
bottom: 0 !important;
transform: translateX(-50%) !important;
width: 0 !important;
height: 2px !important;
background: #F08E72 !important;
border-radius: 2px !important;
transition: width .25s ease !important;
}
html body header.topbar .nav a:hover { color: #F08E72 !important; }
html body header.topbar .nav a:hover::after { width: 100% !important; }
/* CTA - dark charcoal pill, complements hero peach */
html body header.topbar .topbar__row > a[href*="wa.me"] {
background: #10141E !important;
color: #ffffff !important;
font-weight: 600 !important;
font-size: 14px !important;
padding: 10px 20px !important;
border-radius: 999px !important;
box-shadow: 0 4px 12px rgba(16,20,30,0.18) !important;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
letter-spacing: 0 !important;
}
html body header.topbar .topbar__row > a[href*="wa.me"]:hover {
background: #1A1F2C !important;
transform: translateY(-1px) !important;
box-shadow: 0 8px 20px rgba(16,20,30,0.28) !important;
}
}
/* Mobile: keep glass pill aesthetic, simpler layout */
@media (max-width: 900px) {
html body header.topbar {
background: transparent !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
html body header.topbar .wrap.topbar__row {
background: rgba(253, 246, 242, 0.85) !important;
-webkit-backdrop-filter: blur(18px) saturate(140%) !important;
backdrop-filter: blur(18px) saturate(140%) !important;
border: 1px solid rgba(20, 20, 30, 0.06) !important;
border-radius: 999px !important;
box-shadow: 0 6px 20px rgba(20,20,30,0.08) !important;
padding: 8px 14px !important;
margin-left: 12px !important;
margin-right: 12px !important;
}
html body header.topbar .brand__mark { width: 32px !important; height: 32px !important; background: #10141E !important; color: #fff !important; }
}
/* ============================================================
v24: 9+ OVERHAUL - editorial discipline, design system lock
============================================================ */
/* ---------- 1. WhatsApp FAB - charcoal refined pill ---------- */
html body #drb-wa-fab {
background: #10141E !important;
background-image: none !important;
border-radius: 999px !important;
width: auto !important;
min-width: 56px !important;
height: 56px !important;
padding: 0 22px 0 18px !important;
box-shadow: 0 10px 30px rgba(16,20,30,0.22), 0 2px 6px rgba(16,20,30,0.18) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
color: #ffffff !important;
font-weight: 600 !important;
font-size: 14px !important;
letter-spacing: 0 !important;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
z-index: 90 !important;
}
html body #drb-wa-fab:hover {
background: #1A1F2C !important;
transform: translateY(-2px) !important;
box-shadow: 0 16px 40px rgba(16,20,30,0.32), 0 2px 6px rgba(16,20,30,0.18) !important;
}
html body #drb-wa-fab svg, html body #drb-wa-fab img, html body #drb-wa-fab i {
filter: brightness(0) invert(1) !important;
width: 20px !important;
height: 20px !important;
}
/* ---------- 2. Hero orbital diagram - refined elevation ---------- */
html body .hero__stage--diagram { isolation: isolate !important; }
html body .sysdiag__node, html body .sysdiag .node, html body .sysdiag [class*="card"], html body .hero__stage--diagram .card {
background: #FFFFFF !important;
border: 1px solid rgba(20,20,30,0.06) !important;
border-radius: 18px !important;
box-shadow: 0 12px 32px rgba(20,20,30,0.07), 0 2px 6px rgba(20,20,30,0.04) !important;
backdrop-filter: none !important;
transition: transform .25s ease, box-shadow .25s ease !important;
}
html body .sysdiag__node:hover, html body .hero__stage--diagram .card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 20px 44px rgba(20,20,30,0.10), 0 2px 6px rgba(20,20,30,0.04) !important;
}
/* Hub center - true black with refined ring */
html body .sysdiag__hub, html body .sysdiag .hub {
background: #10141E !important;
box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 12px 32px rgba(16,20,30,0.28), 0 0 0 8px rgba(240,142,114,0.08), 0 0 0 16px rgba(240,142,114,0.04) !important;
}
/* ---------- 3. Color system lock - kill beige #F4EDE1 ---------- */
html body { background: #FDF6F2 !important; }
html body .stats, html body .stats *, html body .report, html body .audit-pricepill {
background-color: #FFFFFF !important;
}
/* Audit price pill - refined */
html body .audit-pricepill {
background: linear-gradient(180deg, #FFFFFF, #FCF1EB) !important;
border: 1px solid rgba(240,142,114,0.18) !important;
border-radius: 999px !important;
box-shadow: 0 8px 24px rgba(240,142,114,0.10) !important;
}
/* ---------- 4. Stats card - editorial refinement ---------- */
html body .stats {
background: #FFFFFF !important;
border: 1px solid rgba(20,20,30,0.05) !important;
border-radius: 24px !important;
box-shadow: 0 16px 48px rgba(20,20,30,0.05), 0 2px 6px rgba(20,20,30,0.03) !important;
padding: 28px !important;
}
html body .stat { background: transparent !important; border: 0 !important; padding: 16px 12px !important; }
html body .stat__num, html body .stat strong, html body .stat .num {
font-weight: 800 !important;
letter-spacing: -0.02em !important;
color: #F08E72 !important;
}
html body .stat__label, html body .stat small, html body .stat span:not(.num) {
color: #4A5568 !important;
font-weight: 500 !important;
}
/* ---------- 5. Section eyebrows - refined editorial ---------- */
html body .eyebrow {
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: #F08E72 !important;
opacity: 1 !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
}
html body .eyebrow::before {
content: '' !important;
display: inline-block !important;
width: 28px !important;
height: 1px !important;
background: #F08E72 !important;
opacity: 0.5 !important;
}
/* ---------- 6. H2 hierarchy - editorial display sizing ---------- */
@media (min-width: 901px) {
html body .title-lg, html body h2.title-lg, html body section h2 {
font-size: clamp(36px, 4.2vw, 56px) !important;
line-height: 1.08 !important;
letter-spacing: -0.02em !important;
font-weight: 800 !important;
color: #10141E !important;
}
}
/* ---------- 7. Lead paragraph - softer body color ---------- */
html body .lead { color: #4A5568 !important; line-height: 1.7 !important; }
/* ---------- 8. All CTA buttons - design system lock ---------- */
html body .btn-primary, html body a.btn-primary {
background: #F08E72 !important;
color: #FFFFFF !important;
border-radius: 999px !important;
font-weight: 700 !important;
box-shadow: 0 10px 24px rgba(240,142,114,0.22), 0 2px 6px rgba(240,142,114,0.12) !important;
border: 0 !important;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
html body .btn-primary:hover, html body a.btn-primary:hover {
background: #E97A5C !important;
transform: translateY(-2px) !important;
box-shadow: 0 14px 32px rgba(240,142,114,0.30), 0 2px 6px rgba(240,142,114,0.16) !important;
}
/* ---------- 9. Card baseline - all cards use same shadow language ---------- */
html body .sysv2, html body .case-card, html body .layer-card, html body .priority-card, html body .step-card, html body .faq-item, html body .about-academy {
border-radius: 20px !important;
border: 1px solid rgba(20,20,30,0.06) !important;
box-shadow: 0 8px 24px rgba(20,20,30,0.04), 0 1px 3px rgba(20,20,30,0.02) !important;
transition: transform .25s ease, box-shadow .25s ease !important;
}
html body .sysv2:hover, html body .case-card:hover, html body .layer-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 16px 40px rgba(20,20,30,0.07), 0 2px 6px rgba(20,20,30,0.03) !important;
}
/* ---------- 10. Dark sections - true charcoal not blue ---------- */
html body .principles, html body .cta-final, html body section[class*="dark"] {
background: #10141E !important;
}
/* ---------- 11. Mobile refinement ---------- */
@media (max-width: 900px) {
html body #drb-wa-fab { padding: 0 18px 0 14px !important; height: 50px !important; }
html body .title-lg, html body h2.title-lg { font-size: clamp(28px, 7vw, 36px) !important; letter-spacing: -0.02em !important; }
html body .eyebrow { font-size: 11px !important; }
html body .eyebrow::before { width: 20px !important; }
}
/* v24.1: Hub round + node cards properly styled (not overriding hub) */
html body .sysdiag__hub {
border-radius: 50% !important;
aspect-ratio: 1 / 1 !important;
}
/* Make sure .sysdiag__node (the orbit cards) get the white card treatment, but NOT the hub */
html body .sysdiag__node {
background: #FFFFFF !important;
border: 1px solid rgba(20,20,30,0.06) !important;
border-radius: 18px !important;
box-shadow: 0 12px 32px rgba(20,20,30,0.07), 0 2px 6px rgba(20,20,30,0.04) !important;
backdrop-filter: none !important;
}
/* v24.2: Fix dark-section text visibility + PDF report background */
/* Dark sections must keep white text */
html body .section--dark h2, html body .section--dark .title-lg, html body .layer-section h2, html body .layer-section .title-lg,
html body .principles h2, html body .principles .title-lg, html body .cta-final h2, html body .cta-final .title-lg,
html body section.section--dark h2, html body section[class*="dark"] h2 {
color: #FFFFFF !important;
}
html body .section--dark .lead, html body .layer-section .lead, html body .principles .lead, html body .cta-final .lead,
html body section[class*="dark"] .lead, html body section[class*="dark"] p {
color: rgba(255,255,255,0.72) !important;
}
html body .section--dark .eyebrow, html body .layer-section .eyebrow, html body .principles .eyebrow, html body .cta-final .eyebrow,
html body section[class*="dark"] .eyebrow { color: #F08E72 !important; }
/* Layer cards on dark section - subtle glass treatment */
html body .layer-card, html body .section--dark [class*="card"], html body .layer-section [class*="card"] {
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: #FFFFFF !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
border-radius: 20px !important;
}
html body .layer-card h3, html body .layer-card h4, html body .layer-card strong, html body .section--dark [class*="card"] h3, html body .section--dark [class*="card"] h4 { color: #FFFFFF !important; }
html body .layer-card p, html body .layer-card li, html body .section--dark [class*="card"] p { color: rgba(255,255,255,0.72) !important; }
/* Principles cards - similar treatment */
html body .principles [class*="card"], html body .principles [class*="item"] {
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: #FFFFFF !important;
}
/* PDF Report card - restore proper background */
html body aside.report, html body .report, html body .report__sheet, html body .report__sheet--front {
background-color: #FFFFFF !important;
}
html body .report { border: 1px solid rgba(20,20,30,0.06) !important; box-shadow: 0 16px 48px rgba(20,20,30,0.06), 0 2px 6px rgba(20,20,30,0.03) !important; border-radius: 24px !important; }
/* Footer must stay dark - my rule shouldn't have broken it */
html body footer.footer h2, html body footer.footer h3, html body footer.footer h4 { color: #FFFFFF !important; }
html body footer.footer p, html body footer.footer a { color: rgba(255,255,255,0.72) !important; }
html body footer.footer a:hover { color: #FFFFFF !important; }
/* v24.3: Final design system lock - kill remaining beige tints */
html body .sysv2, html body .sysv2--site, html body .sysv2--ops, html body .sysv2--content {
background: #FFFFFF !important;
border: 1px solid rgba(20,20,30,0.06) !important;
border-radius: 20px !important;
box-shadow: 0 8px 24px rgba(20,20,30,0.04), 0 1px 3px rgba(20,20,30,0.02) !important;
}
/* Featured middle card - subtle peach tint to highlight */
html body .sysv2--featured, html body .sysv2.is-featured, html body .sysv2--ops {
background: linear-gradient(180deg, #FFFFFF, #FFF8F4) !important;
border-color: rgba(240,142,114,0.18) !important;
box-shadow: 0 12px 32px rgba(240,142,114,0.10), 0 2px 6px rgba(240,142,114,0.06) !important;
}
/* Layer-section card inner pill labels ( , etc) */
html body .layer-card [class*="pill"], html body .layer-card [class*="tag"], html body .layer-card span:first-child {
background: rgba(240,142,114,0.14) !important;
color: #F08E72 !important;
border: 1px solid rgba(240,142,114,0.24) !important;
border-radius: 999px !important;
padding: 4px 12px !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
}
/* Make sure the dark sections kill any leftover beige from priority cards on dark bg */
html body .section--dark .priority-card, html body section[class*="dark"] .priority-card {
background: rgba(255,255,255,0.04) !important;
color: #FFFFFF !important;
border-color: rgba(255,255,255,0.08) !important;
}
/* ==========================================================================
v25 - ORBIT ANIMATION + STATEMENT SECTION
The "moment" between hero and audit + breathing orbit metaphor
========================================================================== */
/* ---------- Orbit metaphor: living, breathing diagram ---------- */
/* The hub now has a slow pulse breathing */
@keyframes drb-hub-breathe {
0%, 100% {
box-shadow:
0 18px 48px -20px rgba(16, 20, 30, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.06) inset,
0 0 0 8px rgba(240, 142, 114, 0.10),
0 0 0 16px rgba(240, 142, 114, 0.04);
}
50% {
box-shadow:
0 24px 60px -18px rgba(16, 20, 30, 0.65),
0 0 0 1px rgba(255, 255, 255, 0.10) inset,
0 0 0 14px rgba(240, 142, 114, 0.14),
0 0 0 28px rgba(240, 142, 114, 0.06);
}
}
html body .sysdiag .sysdiag__hub {
animation: drb-hub-breathe 4.5s ease-in-out infinite !important;
}
/* Orbit rings rotate slowly, opposite directions */
@keyframes drb-ring-rotate-cw {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes drb-ring-rotate-ccw {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(-360deg); }
}
html body .sysdiag .sysdiag__hub-ring {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
border: 1px dashed rgba(240, 142, 114, 0.28) !important;
border-radius: 50% !important;
pointer-events: none !important;
}
html body .sysdiag .sysdiag__hub-ring--1 {
width: 140% !important;
height: 140% !important;
animation: drb-ring-rotate-cw 28s linear infinite !important;
border-style: dashed !important;
border-color: rgba(240, 142, 114, 0.32) !important;
}
html body .sysdiag .sysdiag__hub-ring--2 {
width: 180% !important;
height: 180% !important;
animation: drb-ring-rotate-ccw 42s linear infinite !important;
border-style: dotted !important;
border-color: rgba(240, 142, 114, 0.18) !important;
}
/* SVG flow lines: animated dash, flowing from hub outward */
@keyframes drb-line-flow {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -40; }
}
html body .sysdiag svg.sysdiag__lines .sysdiag__line {
stroke: rgba(240, 142, 114, 0.45) !important;
stroke-width: 1.4 !important;
stroke-dasharray: 4 6 !important;
fill: none !important;
animation: drb-line-flow 2.4s linear infinite !important;
}
/* Orbit nodes (the 3 cards): gentle float */
@keyframes drb-orbit-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
html body .sysdiag .sysdiag__node {
animation: drb-orbit-float 5s ease-in-out infinite !important;
will-change: transform;
}
html body .sysdiag .sysdiag__node:nth-of-type(2) { animation-delay: -1.6s !important; }
html body .sysdiag .sysdiag__node:nth-of-type(3) { animation-delay: -3.2s !important; }
html body .sysdiag .sysdiag__node:nth-of-type(4) { animation-delay: -0.8s !important; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
html body .sysdiag .sysdiag__hub,
html body .sysdiag .sysdiag__hub-ring,
html body .sysdiag svg.sysdiag__lines .sysdiag__line,
html body .sysdiag .sysdiag__node {
animation: none !important;
}
}
/* ---------- Statement section: the editorial moment ---------- */
html body .drb-statement {
position: relative;
background-color: #FDF6F2;
padding: clamp(80px, 12vw, 140px) 24px;
overflow: hidden;
isolation: isolate;
}
/* Subtle peach gradient corner accent */
html body .drb-statement::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 80% 20%, rgba(240, 142, 114, 0.10), transparent 60%),
radial-gradient(ellipse 50% 40% at 20% 90%, rgba(240, 142, 114, 0.06), transparent 60%);
z-index: 0;
pointer-events: none;
}
/* Giant decorative quote mark Arabic-aware */
html body .drb-statement::after {
content: "";
position: absolute;
top: 24px;
inset-inline-start: clamp(24px, 6vw, 80px);
width: clamp(60px, 8vw, 110px);
height: clamp(60px, 8vw, 110px);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M22 18c-8 4-14 12-14 22 0 8 6 14 14 14s14-6 14-14c0-7-5-13-12-14 1-3 4-6 8-8l-2-4c-3 1-6 2-8 4zm32 0c-8 4-14 12-14 22 0 8 6 14 14 14s14-6 14-14c0-7-5-13-12-14 1-3 4-6 8-8l-2-4c-3 1-6 2-8 4z' fill='%23F08E72' opacity='0.18'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
z-index: 0;
pointer-events: none;
}
html body .drb-statement__wrap {
position: relative;
z-index: 1;
max-width: 980px;
margin: 0 auto;
text-align: center;
}
html body .drb-statement__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #F08E72;
margin-bottom: 32px;
}
html body .drb-statement__eyebrow::before,
html body .drb-statement__eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: #F08E72;
display: inline-block;
}
html body .drb-statement__quote {
font-family: inherit;
font-size: clamp(32px, 5.2vw, 64px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: #10141E;
margin: 0 0 28px 0;
}
html body .drb-statement__quote .accent {
position: relative;
display: inline-block;
color: #10141E;
}
html body .drb-statement__quote .accent::after {
content: "";
position: absolute;
inset-inline: -2%;
bottom: 6%;
height: 14%;
background: rgba(240, 142, 114, 0.42);
z-index: -1;
border-radius: 4px;
}
html body .drb-statement__sub {
font-size: clamp(16px, 1.6vw, 20px);
line-height: 1.7;
color: rgb(74, 85, 104);
max-width: 620px;
margin: 0 auto 40px auto;
font-weight: 400;
}
html body .drb-statement__sig {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 10px 20px 10px 10px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
border: 1px solid rgba(16, 20, 30, 0.06);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: #10141E;
letter-spacing: 0.02em;
}
html body .drb-statement__sig-mark {
width: 36px;
height: 36px;
border-radius: 50%;
background: #10141E;
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
font-family: 'Inter', system-ui, sans-serif;
}
/* Mobile statement tuning */
@media (max-width: 900px) {
html body .drb-statement {
padding: 72px 20px;
}
html body .drb-statement__quote {
font-size: clamp(26px, 7vw, 38px);
line-height: 1.2;
}
html body .drb-statement__sub {
font-size: 15px;
}
html body .drb-statement__eyebrow {
margin-bottom: 24px;
}
}
/* Reveal on scroll */
html body .drb-statement__wrap > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
html body .drb-statement.in-view .drb-statement__wrap > * {
opacity: 1;
transform: translateY(0);
}
html body .drb-statement.in-view .drb-statement__eyebrow { transition-delay: 0.05s; }
html body .drb-statement.in-view .drb-statement__quote { transition-delay: 0.15s; }
html body .drb-statement.in-view .drb-statement__sub { transition-delay: 0.30s; }
html body .drb-statement.in-view .drb-statement__sig { transition-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
html body .drb-statement__wrap > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* v25.1 - statement section wrap MUST be block (Bricks flex was crushing children) */
html body section.drb-statement .drb-statement__wrap {
display: block !important;
width: 100% !important;
max-width: 980px !important;
margin: 0 auto !important;
text-align: center !important;
align-items: initial !important;
flex-direction: initial !important;
}
html body section.drb-statement .drb-statement__quote,
html body section.drb-statement .drb-statement__sub,
html body section.drb-statement .drb-statement__eyebrow,
html body section.drb-statement .drb-statement__sig {
display: block !important;
width: auto !important;
max-width: 100% !important;
}
html body section.drb-statement .drb-statement__eyebrow {
display: inline-flex !important;
}
html body section.drb-statement .drb-statement__sig {
display: inline-flex !important;
}
html body section.drb-statement .drb-statement__quote {
text-align: center !important;
width: 100% !important;
}
html body section.drb-statement .drb-statement__sub {
text-align: center !important;
max-width: 620px !important;
margin-inline: auto !important;
}
/* ==========================================================================
v26 - CASES (04) + FAQ (07) EDITORIAL REFINEMENT
========================================================================== */
/* ---------- CASES: from generic beige cards to editorial portfolio ---------- */
html body #work .cases {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
margin-top: 56px !important;
}
/* Case card: pure white, refined elevation, character */
html body #work .case-card {
position: relative !important;
background: #FFFFFF !important;
background-color: #FFFFFF !important;
border: 1px solid rgba(16, 20, 30, 0.06) !important;
border-radius: 20px !important;
padding: 32px 28px 28px 28px !important;
box-shadow:
0 1px 2px rgba(16, 20, 30, 0.04),
0 8px 24px -12px rgba(16, 20, 30, 0.08) !important;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease !important;
overflow: hidden;
isolation: isolate;
display: flex !important;
flex-direction: column !important;
}
/* Big numeral as background watermark */
html body #work .case-card::before {
content: "";
position: absolute;
inset-block-start: -10px;
inset-inline-start: -10px;
width: 90px;
height: 90px;
border-radius: 50%;
background: radial-gradient(circle, rgba(240, 142, 114, 0.10) 0%, transparent 70%);
z-index: 0;
pointer-events: none;
}
html body #work .case-card:hover {
transform: translateY(-4px) !important;
border-color: rgba(240, 142, 114, 0.35) !important;
box-shadow:
0 1px 2px rgba(16, 20, 30, 0.04),
0 16px 40px -16px rgba(16, 20, 30, 0.14),
0 4px 12px -4px rgba(240, 142, 114, 0.12) !important;
}
/* Number badge - peach pill, editorial */
html body #work .case-card__num {
position: relative !important;
z-index: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 44px !important;
height: 28px !important;
padding: 0 12px !important;
background: linear-gradient(135deg, #F08E72, #E87858) !important;
color: #FFFFFF !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
border-radius: 999px !important;
margin-bottom: 20px !important;
align-self: flex-start !important;
box-shadow: 0 4px 12px -4px rgba(240, 142, 114, 0.4) !important;
}
html body #work .case-card__sector {
position: relative !important;
z-index: 1 !important;
font-size: clamp(20px, 1.5vw, 24px) !important;
font-weight: 800 !important;
color: #10141E !important;
letter-spacing: -0.01em !important;
line-height: 1.2 !important;
margin: 0 0 6px 0 !important;
}
html body #work .case-card__domain {
position: relative !important;
z-index: 1 !important;
font-size: 13px !important;
font-weight: 500 !important;
color: rgb(120, 130, 145) !important;
letter-spacing: 0.01em !important;
margin-bottom: 22px !important;
padding-bottom: 22px !important;
border-bottom: 1px dashed rgba(16, 20, 30, 0.08) !important;
}
html body #work .case-card__row {
position: relative !important;
z-index: 1 !important;
display: block !important;
margin-bottom: 16px !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
html body #work .case-card__row:last-of-type {
margin-bottom: 0 !important;
}
html body #work .case-card__label {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 10px !important;
font-weight: 700 !important;
color: #F08E72 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
margin-bottom: 8px !important;
}
html body #work .case-card__label::before {
content: "";
width: 14px;
height: 1px;
background: #F08E72;
}
html body #work .case-card__system {
font-size: 15px !important;
font-weight: 700 !important;
color: #10141E !important;
line-height: 1.4 !important;
}
html body #work .case-card__impact {
font-size: 14px !important;
font-weight: 400 !important;
color: rgb(74, 85, 104) !important;
line-height: 1.65 !important;
}
/* Mobile cases */
@media (max-width: 900px) {
html body #work .cases {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
html body #work .case-card {
padding: 26px 22px !important;
}
}
/* ---------- FAQ (07): premium accordion treatment ---------- */
html body .faq {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
max-width: 880px !important;
margin: 56px auto 0 auto !important;
}
/* FAQ item: white card with clean elevation */
html body .faq__item {
position: relative !important;
background: #FFFFFF !important;
background-color: #FFFFFF !important;
border: 1px solid rgba(16, 20, 30, 0.06) !important;
border-radius: 16px !important;
padding: 0 !important;
box-shadow:
0 1px 2px rgba(16, 20, 30, 0.03),
0 4px 16px -8px rgba(16, 20, 30, 0.06) !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
overflow: hidden !important;
}
html body .faq__item:hover {
border-color: rgba(240, 142, 114, 0.25) !important;
box-shadow:
0 1px 2px rgba(16, 20, 30, 0.03),
0 8px 24px -10px rgba(16, 20, 30, 0.10) !important;
}
html body .faq__item.open {
border-color: rgba(240, 142, 114, 0.35) !important;
box-shadow:
0 1px 2px rgba(16, 20, 30, 0.03),
0 12px 32px -12px rgba(240, 142, 114, 0.18),
0 4px 12px -4px rgba(16, 20, 30, 0.06) !important;
}
/* The heading wrapper */
html body .faq__heading {
margin: 0 !important;
padding: 0 !important;
font-size: inherit !important;
font-weight: inherit !important;
}
/* The question button */
html body .faq__q {
display: flex !important;
width: 100% !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
padding: 22px 26px !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
text-align: start !important;
font-family: inherit !important;
font-size: clamp(16px, 1.2vw, 18px) !important;
font-weight: 700 !important;
color: #10141E !important;
line-height: 1.5 !important;
letter-spacing: -0.005em !important;
transition: color 0.2s ease !important;
}
html body .faq__q:hover {
color: #F08E72 !important;
}
html body .faq__item.open .faq__q {
color: #10141E !important;
padding-bottom: 14px !important;
}
/* Icon: replace text + with a real chevron-plus circle */
html body .faq__icon {
position: relative !important;
flex-shrink: 0 !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: rgba(240, 142, 114, 0.10) !important;
color: transparent !important;
font-size: 0 !important;
border: 1px solid rgba(240, 142, 114, 0.20) !important;
transition: background 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* Horizontal bar */
html body .faq__icon::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 2px;
background: #F08E72;
transform: translate(-50%, -50%);
border-radius: 2px;
transition: background 0.3s ease;
}
/* Vertical bar (forms +) */
html body .faq__icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 12px;
background: #F08E72;
transform: translate(-50%, -50%);
border-radius: 2px;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}
/* Open state: rotate icon to X-like, charcoal fill */
html body .faq__item.open .faq__icon {
background: #10141E !important;
border-color: #10141E !important;
transform: rotate(45deg) !important;
}
html body .faq__item.open .faq__icon::before,
html body .faq__item.open .faq__icon::after {
background: #FFFFFF !important;
}
html body .faq__q:hover .faq__icon {
background: rgba(240, 142, 114, 0.18) !important;
border-color: rgba(240, 142, 114, 0.35) !important;
}
/* Answer block */
html body .faq__a {
padding: 0 26px 24px 26px !important;
font-size: 15px !important;
font-weight: 400 !important;
color: rgb(74, 85, 104) !important;
line-height: 1.75 !important;
letter-spacing: 0.005em !important;
background: transparent !important;
border-top: 1px solid rgba(240, 142, 114, 0.10) !important;
padding-top: 18px !important;
}
/* Closed answers: hidden completely (no pixel rendering) */
html body .faq__item:not(.open) .faq__a {
display: none !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
visibility: hidden !important;
}
/* Mobile FAQ */
@media (max-width: 900px) {
html body .faq {
gap: 10px !important;
margin-top: 40px !important;
}
html body .faq__q {
padding: 18px 20px !important;
font-size: 15px !important;
gap: 14px !important;
}
html body .faq__icon {
width: 28px !important;
height: 28px !important;
}
html body .faq__icon::before {
width: 10px;
}
html body .faq__icon::after {
height: 10px;
}
html body .faq__a {
padding: 16px 20px 20px 20px !important;
font-size: 14px !important;
line-height: 1.7 !important;
}
}
/* ======================================================== */
/* === v27 LANGUAGE SWITCHER + ENGLISH (LTR) OVERRIDES === */
/* ======================================================== */
/* Language switcher sits inside the floating topbar pill */
html body .drb-langswitch{
display:inline-flex;
align-items:center;
gap:.4rem;
margin:0 .55rem 0 .55rem;
padding:6px 10px;
border-radius:999px;
background: rgba(0,0,0,.04);
font-family: var(--font-sans, system-ui, sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: .02em;
line-height: 1;
white-space:nowrap;
pointer-events:auto;
}
html body .drb-langswitch__btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-width: 28px;
padding: 3px 6px;
color: #1A1F2C !important;
text-decoration: none !important;
border-radius: 8px;
transition: color .2s ease, background .2s ease, transform .2s ease;
}
html body .drb-langswitch__btn:hover{
color: #E07A4B !important;
background: transparent;
}
html body .drb-langswitch__btn.is-active{position:relative;background:transparent !important;border-radius:0 !important;font-weight:700 !important;text-decoration:none !important;border-bottom:2px solid #E86A5A !important;padding-bottom:2px !important}
html body .drb-langswitch__btn.is-active::after{
}
html body .drb-langswitch__sep{
color: rgba(26,31,44,.25);
font-weight: 300;
pointer-events:none;
user-select:none;
}
/* Floating fallback (if mount target not found) */
html body .drb-langswitch--floating{
position: fixed;
top: 18px;
inset-inline-start: 18px;
z-index: 9999;
background: rgba(255,255,255,.95);
box-shadow: 0 6px 24px rgba(26,31,44,.10);
}
/* Mobile: tuck switcher in nicely */
@media (max-width: 900px){
html body .drb-langswitch{
margin: 0 .35rem;
padding: 4px 8px;
font-size: 12px;
}
html body .drb-langswitch__btn{ min-width: 24px; padding: 2px 4px; }
}
/* ============================================ */
/* === ENGLISH (LTR) html[lang="en"] block === */
/* ============================================ */
html[lang="en"], html[lang^="en-"]{
direction: ltr;
}
html[lang="en"] body, html[lang^="en-"] body{
direction: ltr;
text-align: left;
font-family: 'Inter', 'Shne', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* Force LTR on key wrappers (Bricks/RTL plugin may set RTL globally) */
html[lang="en"] [dir="rtl"],
html[lang^="en-"] [dir="rtl"]{ direction: ltr !important; text-align: left !important; }
/* Headings retain Inter/system stack instead of Arabic font */
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6,
html[lang^="en-"] h1, html[lang^="en-"] h2, html[lang^="en-"] h3,
html[lang^="en-"] h4, html[lang^="en-"] h5, html[lang^="en-"] h6{
font-family: 'Inter', 'Shne', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
letter-spacing: -0.015em;
}
/* Numbers/measurements look more refined in tabular */
html[lang="en"] .stat__num, html[lang="en"] .price__big,
html[lang^="en-"] .stat__num, html[lang^="en-"] .price__big{
font-variant-numeric: tabular-nums;
}
/* Hero give English a tighter tracking for long headlines */
html[lang="en"] .hero h1, html[lang^="en-"] .hero h1{
letter-spacing: -0.025em;
line-height: 1.05;
}
html[lang="en"] .hero .lead, html[lang^="en-"] .hero .lead{
max-width: 56ch;
}
/* Section eyebrow numbers (01 Diagnostic) keep number prefix logical in LTR */
html[lang="en"] .eyebrow, html[lang^="en-"] .eyebrow{ direction: ltr; }
/* Statement quote slightly more elegant in English */
html[lang="en"] .drb-statement__quote,
html[lang^="en-"] .drb-statement__quote{
font-family: 'Inter', 'Shne', system-ui, sans-serif;
letter-spacing: -0.022em;
line-height: 1.18;
max-width: 22ch;
}
html[lang="en"] .drb-statement__brand,
html[lang^="en-"] .drb-statement__brand{
letter-spacing: .08em;
text-transform: uppercase;
font-size: 12px;
}
/* Orbit hub label keep English readable */
html[lang="en"] .sysdiag__hub-label,
html[lang^="en-"] .sysdiag__hub-label{
font-family: 'Inter', 'Shne', system-ui, sans-serif;
letter-spacing: .04em;
}
/* Case card labels: " / " become "System / Impact" via WPML; just tighten styling */
html[lang="en"] .case-card__label,
html[lang^="en-"] .case-card__label{
letter-spacing: .12em;
text-transform: uppercase;
font-size: 11px;
}
/* Footer */
html[lang="en"] .footer, html[lang^="en-"] .footer{ direction: ltr; }
html[lang="en"] .footer h4, html[lang^="en-"] .footer h4{
letter-spacing: .04em;
text-transform: uppercase;
font-size: 13px;
}
/* WhatsApp floating button keep on right in EN (LTR) */
html[lang="en"] .whatsapp-float,
html[lang^="en-"] .whatsapp-float,
html[lang="en"] .wa-float,
html[lang^="en-"] .wa-float{
right: 20px !important; left: auto !important;
}
/* Mobile menu close icon mirror for LTR */
html[lang="en"] .nav-toggle, html[lang^="en-"] .nav-toggle{ transform: none; }
/* Language switcher position adjustment for LTR header layout */
html[lang="en"] body .drb-langswitch,
html[lang^="en-"] body .drb-langswitch{ margin: 0 .55rem; }
/* ========== [7] menu-fix.css (consolidated menu + logo) ========== */
/* ============================================================
DRB CONSOLIDATED MENU + MOBILE OVERRIDE (loads dead-last)
Single source of truth for the mobile nav drawer + brand logo.
Wins via html body[...] + duplicated class/id specificity.
Fully reversible: delete this plugin folder to revert.
============================================================ */
@media (max-width: 900px) {
/* ---- Kill the competing newhome dropdown design on #primary-nav ---- */
html body header.topbar nav.nav#primary-nav,
html body nav.nav#primary-nav#primary-nav {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: auto !important;
inset: 0 0 0 auto !important;
width: min(86vw, 360px) !important;
max-width: 360px !important;
height: 100vh !important;
height: 100dvh !important;
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
filter: none !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 100001 !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
padding: 78px 24px 28px !important;
box-shadow: -20px 0 50px rgba(0,0,0,0.22) !important;
overflow-y: auto !important;
transform: translateX(100%) !important;
-webkit-transform: translateX(100%) !important;
transition: transform 280ms cubic-bezier(.4,0,.2,1) !important;
}
/* ---- OPEN STATE: highest-specificity, beats every closed rule ---- */
html body header.topbar nav.nav#primary-nav.is-open.is-open,
html body nav.nav#primary-nav#primary-nav.is-open {
transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
pointer-events: auto !important;
}
/* ---- Links: crisp, opaque, full-size touch targets, clickable ---- */
html body nav#primary-nav#primary-nav a,
html body nav.nav#primary-nav a {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 52px !important;
margin: 0 !important;
padding: 13px 14px !important;
font-size: 17px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
color: #0a0a0f !important;
-webkit-text-fill-color: #0a0a0f !important;
text-shadow: none !important;
text-decoration: none !important;
opacity: 1 !important;
filter: none !important;
border-bottom: 1px solid rgba(10,10,15,0.08) !important;
border-radius: 8px !important;
pointer-events: auto !important;
}
html body nav#primary-nav#primary-nav a:hover,
html body nav#primary-nav#primary-nav a:focus {
background: rgba(0,0,0,0.05) !important;
outline: none !important;
}
/* CTA pill = last link */
html body nav#primary-nav#primary-nav a:last-child {
justify-content: center !important;
margin-top: 14px !important;
background: #e85a3c !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border-radius: 999px !important;
border-bottom: none !important;
min-height: 54px !important;
font-weight: 700 !important;
}
/* ---- Backdrop: dim only, no blur ---- */
html body #drb-mm-backdrop,
html body #drb-mobile-menu-backdrop {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: rgba(10,10,15,0.5) !important;
}
/* ---- Hamburger -> X, proper 44px target ---- */
html body header.topbar .nav-toggle {
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
padding: 0 !important;
background: transparent !important;
border: 1px solid rgba(0,0,0,0.14) !important;
border-radius: 11px !important;
cursor: pointer !important;
z-index: 100002 !important;
}
html body header.topbar .nav-toggle span {
display: block !important;
width: 18px !important;
height: 2px !important;
background: #1a1a1a !important;
border-radius: 2px !important;
transition: transform 220ms ease, opacity 220ms ease !important;
}
html body header.topbar .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
html body header.topbar .nav-toggle.is-open span:nth-child(2) { opacity: 0 !important; }
html body header.topbar .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
/* ---- BRAND LOGO: stop the 0x0 collapse ---- */
html body header .brand,
html body header a[rel="home"],
html body header [class*="brand"] {
overflow: visible !important;
min-width: auto !important;
max-width: none !important;
}
html body header .brand img,
html body header a[rel="home"] img,
html body header [class*="brand"] img {
height: 34px !important;
width: auto !important;
max-width: 60vw !important;
flex: 0 0 auto !important;
object-fit: contain !important;
display: block !important;
}
}
/* RTL drawer comes from the right too (Arabic) - same side panel, mirrored padding only */
@media (max-width: 900px) {
html body[dir="rtl"] nav#primary-nav#primary-nav,
html[dir="rtl"] body nav#primary-nav#primary-nav {
direction: rtl !important;
}
}
/* ============================================================
BACKDROP Z-ORDER FIX: every backdrop must sit BELOW the drawer
so the nav links remain hit-testable. The legacy backdrops
(#drb-mm-backdrop / -injected) were intercepting clicks.
============================================================ */
@media (max-width: 900px) {
html body #drb-mm-backdrop,
html body #drb-mm-backdrop-injected,
html body #drb-mobile-menu-backdrop {
z-index: 99990 !important;
}
/* Drawer must outrank ALL backdrops for hit-testing */
html body header.topbar nav.nav#primary-nav,
html body nav.nav#primary-nav#primary-nav {
z-index: 100050 !important;
}
html body header.topbar nav.nav#primary-nav.is-open.is-open,
html body nav.nav#primary-nav#primary-nav.is-open {
z-index: 100050 !important;
pointer-events: auto !important;
}
html body nav#primary-nav#primary-nav a,
html body nav.nav#primary-nav a {
position: relative !important;
z-index: 2 !important;
pointer-events: auto !important;
}
/* When the drawer is CLOSED, neutralise any stray full-screen backdrop
that legacy scripts leave with pointer-events on. */
html body #drb-mm-backdrop:not(.is-open),
html body #drb-mm-backdrop-injected:not(.is-open),
html body #drb-mobile-menu-backdrop:not(.is-open) {
pointer-events: none !important;
opacity: 0 !important;
}
}
/* === STEP5 overflow-x clip (appended; reversible) =========================
Goal: stop the ~19px horizontal bleed from decorative .drbfx-orb elements
WITHOUT disturbing the existing body.page-id-33526 { overflow:visible }
vertical fixes. overflow-x:clip clips the X axis only and does NOT create
a scroll container, so vertical sticky/height behaviour is unaffected.
To revert: delete this block. ------------------------------------------- */
/* html overflow-x intentionally NOT set: overflow on html creates a scroll container that locks viewport scroll. overflow-x is handled on body. */
body { overflow-x: hidden !important; }
body.page-id-33526,
body.page-id-33550 { overflow-x: hidden !important; }
/* === end STEP5 overflow-x clip =========================================== */
/* DRB-METER-RESET */ html body .sysdiag .sysdiag__card .sysdiag__card-meter{background:transparent!important;border:0!important;border-top:1px dashed var(--rule)!important;border-radius:0!important;box-shadow:none!important;padding:8px 0 0!important;}
/* ===== DRB-MOBILE-FIX-V2 (mobile overflow + card stacking) =====
Single source of truth for narrow-viewport corrections.
Placed last so it wins over the conflicting earlier breakpoints
without reordering them. Reversible: delete this block to revert. */
@media (max-width: 700px){
/* Hero headline: let it wrap naturally instead of overflowing.
The markup has hardcoded
tags that force lines wider than
the phone viewport (clipping off-screen in both LTR and RTL). */
body .hero__title{
font-size: clamp(26px, 8.5vw, 40px) !important;
line-height: 1.18 !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
white-space: normal !important;
max-width: 100% !important;
}
/* DRB-V8 fix: keep the authored hero line-breaks on mobile.
Hiding
merged words because the spans have no trailing
spaces (e.g. "شيء"+"عليك"). Restore the break instead. */
html body .hero__title br{ display: block !important; height: 0 !important; }
body .hero__title .ink,
body .hero__title .under-1,
body .hero__title .under-2{ display: inline !important; }
/* EN/AR diagram cards: stop the absolute 40% overlap; stack them
full-width in normal flow so titles & badges are never clipped. */
.sysdiag__stage .sysdiag__card,
.sysdiag .sysdiag__card,
.sysdiag__card,
.sysdiag__card--site,
.sysdiag__card--ops,
.sysdiag__card--content{
position: relative !important;
inset: auto !important;
top: auto !important; right: auto !important;
bottom: auto !important; left: auto !important;
transform: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 0 12px 0 !important;
z-index: auto !important;
}
.sysdiag__card-body{ display: block !important; }
.sysdiag__card-meter{ display: block !important; }
/* Hide the connector lines on mobile (they target desktop positions) */
.sysdiag__lines{ display: none !important; }
}
/* ===== DRB-MOBILE-FIX-V3-OVERFLOW (AR mobile horizontal bleed) =====
The AR page (page-id-33526) sets `overflow: visible !important` on
body AND on `body.page-id-33526.page` (2-class, higher specificity)
so the closed off-screen mobile nav drawer (position:fixed, translated
~354px to the right) extends the document scroll width by ~104px on
phones. We clip the X axis only, at mobile widths only, with a
specificity (html body.page-id-33526.page) that beats the existing
visible rule. overflow-x:clip does NOT create a scroll container, so
desktop bleed (>700px) and sticky/height behaviour are untouched.
Reversible: delete this block. */
@media (max-width: 700px){
/* Clip the X axis on the ROOT scroll container at mobile only.
overflow-x:clip (NOT hidden) clips horizontal bleed WITHOUT creating
a scroll container, so vertical scrolling, sticky and height behaviour
are unaffected (verified: page scrolls vertically fine). This single
root-level clip neutralises every horizontal bleeder on phones at once
(off-screen nav drawer, rotated report__sheet stack, decorative orbs)
instead of chasing each element. Desktop (>700px) keeps overflow:visible
so intentional desktop bleed still shows. */
html{ overflow-x: clip !important; }
html body,
html body.page-id-33526,
html body.page-id-33526.page,
html body.page-id-33550,
html body.page-id-33550.page{
overflow-x: clip !important;
max-width: 100% !important;
}
/* Keep the closed mobile nav drawer from forcing horizontal scroll
even where clip is not honoured: hide it until opened. */
/* An existing rule forces `display:flex !important` on the mobile
drawer via a 2-ID specificity hack (nav#primary-nav#primary-nav).
We beat it with 3 ID references, only while the drawer is CLOSED,
so the off-screen fixed drawer stops extending document width. */
html body nav.nav#primary-nav#primary-nav#primary-nav:not(.is-open):not(.nav-open):not(.open){
display: none !important;
}
html body nav.nav#primary-nav#primary-nav#primary-nav.is-open,
html body nav.nav#primary-nav#primary-nav#primary-nav.nav-open,
html body nav.nav#primary-nav#primary-nav#primary-nav.open{ display: flex !important; }
}
/* ===== DRB-MOBILE-FIX-V4-CONTENTCARD =====
The content diagram card has a page-scoped rule
`body.page-id-33550 .sysdiag__card--content{ transform:translateX(-50%);
left:50% !important }` with no media query, so on mobile it stayed
shifted ~172px left (clipped). Override it for both languages at the
mobile breakpoint with equal page-scoped specificity. Reversible. */
@media (max-width: 700px){
/* The reveal system keeps translateX(-50%) on this card and it cannot
be reliably cleared. Instead of fighting it, we PAIR it with left:50%
(the original centering math) so the stacked full-width card nets to
centered (left:50% of parent, minus 50% of its own width = centered),
and we use a left/right margin to keep it inside the rail. */
body.page-id-33550 .sysdiag__card--content,
body.page-id-33526 .sysdiag__card--content,
body .sysdiag__card--content{
position: relative !important;
left: 50% !important;
right: auto !important;
width: 100% !important;
margin: 0 0 12px 0 !important;
}
}
/* ===== DRB-MOBILE-FIX-V5-CARDTITLE =====
Ensure diagram-card titles never clip on mobile regardless of the
card width the reveal system settles on: full width, left/right aligned
by direction, no overflow clipping, wrap allowed. Reversible. */
@media (max-width: 700px){
.sysdiag__card .sysdiag__card-name,
.sysdiag__card .sysdiag__card-tag,
.sysdiag__card .sysdiag__card-body,
.sysdiag__card .sysdiag__card-meter{
position: relative !important;
left: auto !important; right: auto !important;
transition: none !important;
transform: none !important;
width: 100% !important; max-width: 100% !important;
overflow: visible !important;
white-space: normal !important;
text-align: start !important;
}
.sysdiag__card{ overflow: visible !important; }
}
/* ===== DRB-MOBILE-FIX-V6-CONTENTCARD-HARD =====
Final, highest-specificity override for the content card's stuck
desktop-centering (transform:translateX(-50%); left:50%). Uses
html + 2 page classes + descendant to exceed every other rule, and
pins the stacked card to natural flow. Reversible. */
@media (max-width: 700px){
html body.page-id-33550 .sysdiag .sysdiag__card--content,
html body.page-id-33550.page .sysdiag .sysdiag__card--content,
html body.page-id-33526 .sysdiag .sysdiag__card--content,
html body.page-id-33526.page .sysdiag .sysdiag__card--content,
html body .sysdiag .sysdiag__card--content{
position: relative !important;
left: 0 !important;
right: 0 !important;
/* Kill the stuck transform TRANSITION: it was frozen at its start
keyframe translateX(-50%) and never advanced to none, shifting the
card ~172px left. transition:none makes transform resolve instantly
to none so the card aligns with the others. THIS is the real fix. */
transition: none !important;
transform: none !important;
-webkit-transform: none !important;
margin: 0 0 12px 0 !important;
width: 100% !important;
}
}
/* ============================================================
DRB-MOBILE-FIX-V7 (2026-06-05)
1. EN: remove the status "white box" + green indicator on
the stacked diagram cards (Connected/Running/Calendar).
2. EN: $250 credit block reads left-to-right (was right-aligned).
3. AR: add breathing room so the 250 credit pill no longer
overlaps the diagnostic report card, plus gentle vertical
spacing across stacked sections.
============================================================ */
@media (max-width: 700px){
/* (1) EN diagram cards: hide the status meter pill entirely */
html body.page-id-33550 .sysdiag .sysdiag__card .sysdiag__card-meter.sysdiag__card-meter{
display: none !important;
}
/* (2) EN $250 credit block -> proper LTR alignment */
body.page-id-33550 .audit-trust,
body.page-id-33550 .audit-trust *{
direction: ltr !important;
text-align: left !important;
}
/* (3) AR: clear the overlap between the credit pill and report card.
High specificity (ID + html/body) to beat the 900px theme rule. */
html body.page-id-33526 section#audit .wrap.audit-hero > .report,
html body.page-id-33526 section#audit .wrap.audit-hero > .report.report--v2,
html body.page-id-33526 section#audit aside.report{
margin-top: 72px !important;
}
html body.page-id-33526 section#audit .audit-cta-row{
margin-bottom: 40px !important;
}
/* gentle breathing room across stacked AR sections */
html body.page-id-33526 section#audit .audit-deliv{
margin-bottom: 40px !important;
}
html body.page-id-33526 section#audit .drb-audit-note{
margin-bottom: 40px !important;
}
}
/* ===== DRB-CONSOLIDATED: drb-en-overrides (folded 2026-06-05) =====
Was a separate competing