/* ==========================================================================
   Suits Consultants — design system
   ========================================================================== */
:root {
	--ink: #0a0a0b;
	--ink-2: #121216;
	--ink-3: #1b1b21;
	--paper: #ffffff;
	--cream: #f7f5f1;
	--line: #e7e3dc;
	--line-dark: rgba(255, 255, 255, .1);
	--text: #1d1d22;
	--muted: #5d5d68;
	--muted-dark: #a3a3ae;
	--red: #e3262e;
	--red-2: #ff4b4f;
	--acc: #10b981;
	--ai: #8b5cf6;
	--re: #d4a74f;
	--accent: var(--red);
	--radius: 22px;
	--radius-sm: 14px;
	--shadow: 0 1px 2px rgba(10, 10, 11, .04), 0 12px 40px -12px rgba(10, 10, 11, .14);
	--shadow-lg: 0 30px 80px -24px rgba(10, 10, 11, .35);
	--sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--serif: "Instrument Serif", Georgia, serif;
	--wrap: 1240px;
	--ease: cubic-bezier(.2, .8, .2, 1);
}
.accent-acc { --accent: var(--acc); }
.accent-ai { --accent: var(--ai); }
.accent-re { --accent: var(--re); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--paper); color: var(--text);
	font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.025em; font-weight: 700; color: inherit; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap.narrow { max-width: 900px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 14px; z-index: 999; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.ico { flex: none; }

/* Buttons ---------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 15.5px; line-height: 1;
	border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--ease), background .25s, box-shadow .25s, color .25s, border-color .25s;
	white-space: nowrap; font-family: inherit;
}
.btn .ico { transition: transform .25s var(--ease); }
.btn:hover .ico-arrow { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 10px 30px -10px rgba(227, 38, 46, .7); }
.btn-primary:hover { background: #c81e25; box-shadow: 0 14px 34px -10px rgba(227, 38, 46, .85); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #26262d; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #f1efe9; }
.btn-outline { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink); }
.btn-ghost-light { color: #fff; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .04); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.eyebrow {
	display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow.on-dark { color: #fff; opacity: .85; }
.eyebrow.on-dark::before { background: var(--accent); }

/* Top bar & header ------------------------------------------------------- */
.topbar { background: #050506; color: var(--muted-dark); font-size: 13px; }
.topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 40px; }
.topbar a, .tb-msg { display: inline-flex; align-items: center; gap: 7px; }
.tb-links { display: flex; gap: 22px; }
.topbar a:hover { color: #fff; }

.site-header {
	position: sticky; top: 0; z-index: 50; background: rgba(10, 10, 11, .82); color: #fff;
	backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
	border-bottom: 1px solid var(--line-dark); transition: background .3s;
}
.site-header.scrolled { background: rgba(10, 10, 11, .94); }
.header-in { display: flex; align-items: center; gap: 28px; height: 78px; }
.brand img { height: 48px; width: auto; }
.brand .logo-dark { display: none; }
.main-nav { margin-left: auto; }
.main-nav > ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav-top { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .82); transition: color .2s, background .2s; }
.nav-top:hover, .has-mega:hover > .nav-top, .has-mega:focus-within > .nav-top { color: #fff; background: rgba(255, 255, 255, .07); }
.has-mega { position: relative; }
.mega {
	position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px); width: 760px;
	opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.mega::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-in { display: grid; grid-template-columns: 250px 1fr; gap: 10px; background: #fff; color: var(--text); padding: 10px; border-radius: 22px; box-shadow: var(--shadow-lg); }
.mega-feature { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 16px; background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.mega-feature::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; bottom: -90px; background: radial-gradient(circle, var(--accent), transparent 70%); opacity: .55; }
.mega-feature strong { font-size: 19px; }
.mega-feature span { color: var(--muted-dark); font-size: 14px; line-height: 1.5; }
.mega-feature em { margin-top: auto; font-style: normal; font-weight: 600; font-size: 14px; color: #fff; position: relative; z-index: 1; }
.mf-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--accent); }
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mega-list a { display: flex; gap: 12px; padding: 12px; border-radius: 12px; transition: background .2s; }
.mega-list a:hover { background: var(--cream); }
.mega-list strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.mega-list small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 3px; }
.ml-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); flex: none; }
.header-cta { display: flex; align-items: center; gap: 10px; }
.header-cta .btn { padding: 12px 20px; font-size: 14.5px; }
.nav-toggle, .nav-close { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 8px; }

.mobile-nav { position: fixed; inset: 0; z-index: 100; background: var(--ink); color: #fff; overflow-y: auto; }
.mobile-nav[hidden] { display: none; }
.mn-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line-dark); }
.mn-head img { height: 40px; width: auto; }
.mn-body { padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 6px; }
.mn-group { border-bottom: 1px solid var(--line-dark); }
.mn-group summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 0; font-size: 18px; font-weight: 600; cursor: pointer; }
.mn-group summary::-webkit-details-marker { display: none; }
.mn-group summary .ico-plus { margin-left: auto; transition: transform .25s; }
.mn-group[open] summary .ico-plus { transform: rotate(45deg); }
.mn-ico { color: var(--accent); display: grid; }
.mn-group a { display: block; padding: 9px 0 9px 32px; color: var(--muted-dark); }
.mn-group a:last-child { padding-bottom: 18px; }
.mn-link { padding: 16px 0; font-size: 18px; font-weight: 600; border-bottom: 1px solid var(--line-dark); }
.mn-body .btn { margin-top: 14px; }

/* Hero ------------------------------------------------------------------- */
.hero, .page-hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; }
.hero { padding: 84px 0 70px; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orb { --c: #7a1418; position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 68%); opacity: .75; animation: float 18s ease-in-out infinite; will-change: transform; }
.o1 { width: 900px; height: 900px; left: -360px; top: -420px; }
.o2 { --c: #3b2a7a; width: 860px; height: 860px; right: -340px; top: -120px; animation-delay: -6s; }
.o3 { --c: #6b5320; width: 760px; height: 760px; left: 30%; bottom: -520px; animation-delay: -12s; opacity: .6; }
.page-hero.accent-acc .o2 { --c: #0d5c45; }
.page-hero.accent-ai .o2 { --c: #44288f; }
.page-hero.accent-re .o2 { --c: #7a5c1c; }
.grid-lines {
	position: absolute; inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
}
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.06); } 66% { transform: translate(-30px, 25px) scale(.96); } }

.hero-copy { max-width: 900px; margin: 0 auto; text-align: center; }
.hero h1 { font-size: clamp(42px, 6.4vw, 84px); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; }
.hero h1 em, .page-hero h1 em { color: #fff; background: linear-gradient(100deg, #ff6b6f, #f3c77a 50%, #b79bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .04em; margin-right: -.04em; }
.hero-lead { font-size: clamp(17px, 1.6vw, 20px); color: #c9c9d2; max-width: 720px; margin: 24px auto 0; line-height: 1.6; }
.hero-ask { margin: 40px 0 0; font-size: 14px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: #fff; opacity: .75; }

.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.path {
	--mx: 50%; --my: 0%;
	position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 26px; min-height: 380px;
	border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
	border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; isolation: isolate;
	transition: transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease);
}
.path::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent 55%); opacity: .35; z-index: -1; transition: opacity .4s; }
.path-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 35%, transparent), transparent 45%); opacity: 0; transition: opacity .3s; }
.path:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--accent) 60%, transparent); }
.path:hover .path-glow { opacity: 1; }
.path:hover::before { opacity: .6; }
.path-num { position: absolute; top: 26px; right: 28px; font-family: var(--serif); font-size: 44px; line-height: 1; color: rgba(255, 255, 255, .18); }
.path-ico { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.path-kicker { margin-top: 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted-dark); font-weight: 600; }
.path-title { font-size: 27px; line-height: 1.15; letter-spacing: -.02em; }
.path-desc { color: #c3c3cc; font-size: 15px; line-height: 1.55; }
.path-items { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.path-items span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e6e6ec; }
.path-items .ico { color: var(--accent); }
.path-go { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; }
.path-go .ico { transition: transform .3s var(--ease); }
.path:hover .path-go .ico { transform: translateX(6px); }
.paths.compact .path { min-height: 0; }
.hero-trust { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 36px; color: var(--muted-dark); font-size: 14.5px; }
.hero-trust strong { color: #fff; }
.ht-stars, .stars { display: inline-flex; gap: 2px; color: #f5b83d; }

/* Page hero -------------------------------------------------------------- */
.page-hero { padding: 72px 0 84px; }
.page-hero.compact { padding: 56px 0 72px; }
.page-hero h1 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -.035em; max-width: 920px; }
.page-hero .hero-lead { margin: 22px 0 0; }
.ph-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--muted-dark); margin-bottom: 28px; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: #fff; }
.post-meta { color: var(--muted-dark); margin-top: 18px; }

/* Sections --------------------------------------------------------------- */
.section { padding: 110px 0; position: relative; }
.section.tint { background: var(--cream); }
.section.dark { background: var(--ink); color: #fff; }
.sec-head { max-width: 720px; margin-bottom: 52px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(32px, 4.2vw, 54px); letter-spacing: -.035em; }
.sec-head .lead { font-size: 18.5px; color: var(--muted); margin-top: 18px; }
.dark .sec-head .lead { color: var(--muted-dark); }
.row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 0; }
.row-head .btn { margin-bottom: 52px; }
.h-sm { font-size: 28px; margin: 56px 0 22px; letter-spacing: -.025em; }

/* Logos ------------------------------------------------------------------ */
.logos-band { background: var(--ink); padding: 8px 0 54px; border-top: 1px solid var(--line-dark); }
.logos-band.light { background: var(--paper); border-top: 1px solid var(--line); padding-top: 50px; }
.logos-label { text-align: center; color: var(--muted-dark); font-size: 13px; text-transform: uppercase; letter-spacing: .16em; font-weight: 600; margin: 34px 0 26px; }
.logos { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logos-track { display: flex; gap: 56px; width: max-content; animation: marquee 50s linear infinite; align-items: center; }
.logos-track img { height: 64px; width: auto; filter: grayscale(1) brightness(1.9) contrast(.9); opacity: .55; transition: opacity .3s, filter .3s; }
.logos-band.light .logos-track img { filter: grayscale(1); opacity: .6; }
.logos-track img:hover { opacity: 1; filter: none; }
.logos:hover .logos-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Answer & stats --------------------------------------------------------- */
.answer-band { padding: 90px 0; }
.answer { position: relative; padding: 34px 38px; border-radius: var(--radius); background: var(--cream); border: 1px solid var(--line); }
.answer::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 4px; border-radius: 4px; background: var(--accent); }
.answer-q { font-size: 21px; letter-spacing: -.015em; margin-bottom: 12px; }
.answer p { margin: 0; font-size: 18px; color: #3a3a44; }
.answer a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.stat { text-align: center; padding: 26px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.stat strong { display: block; font-size: clamp(34px, 4vw, 50px); letter-spacing: -.04em; line-height: 1; }
.stat > span { display: block; margin-top: 10px; color: var(--muted); font-size: 14.5px; }

/* Pillar sections -------------------------------------------------------- */
.pillar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.pillar-sec.flip .pillar-copy { order: 2; }
.pillar-copy .sec-head { margin-bottom: 30px; }
.svc-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.svc-mini a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.svc-mini a:hover { border-color: var(--accent); transform: translateX(4px); box-shadow: var(--shadow); }
.svc-mini strong { display: block; font-size: 15.5px; }
.svc-mini small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.svc-mini a > .ico-arrow { margin-left: auto; color: var(--muted); }
.sm-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); flex: none; }

/* Product-style visuals */
.viz { position: relative; padding: 30px; }
.viz::before { content: ""; position: absolute; inset: 0; border-radius: 32px; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%), var(--ink); }
.viz-card { position: relative; background: #fff; border-radius: 22px; padding: 26px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px; }
.ph-visual .viz::before { background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 65%), rgba(255, 255, 255, .04); border: 1px solid var(--line-dark); }
.viz-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); font-weight: 600; }
.pill { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill.ok { background: #e6f8f0; color: #0b8a5e; }
.pill.live { background: #f1ebff; color: #6d3fe0; }
.viz-big { font-size: 15px; color: var(--muted); }
.viz-big strong { display: block; font-size: 38px; color: var(--ink); letter-spacing: -.03em; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; }
.bars i { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--acc), color-mix(in srgb, var(--acc) 30%, white)); transform-origin: bottom; animation: grow 1.4s var(--ease) both; }
.bars i:nth-child(2n) { animation-delay: .1s; } .bars i:nth-child(3n) { animation-delay: .2s; }
@keyframes grow { from { transform: scaleY(.1); } }
.viz-rows { display: grid; gap: 8px; }
.viz-rows div { display: flex; justify-content: space-between; padding: 11px 14px; border-radius: 12px; background: var(--cream); font-size: 14px; }
.viz-rows b { color: var(--ink); }
.viz-float { position: absolute; left: -6px; bottom: 6px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .15); animation: bob 5s ease-in-out infinite; }
.viz-float .ico { color: var(--accent); }
@keyframes bob { 50% { transform: translateY(-8px); } }
.msg { max-width: 82%; padding: 11px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; }
.msg.in { background: var(--cream); border-bottom-left-radius: 4px; }
.msg.out { background: var(--ai); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.wavebar { display: flex; gap: 4px; align-items: center; height: 36px; margin-top: 4px; }
.wavebar i { flex: 1; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--ai) 60%, white); animation: wv 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -0.07s); transform-origin: center; }
@keyframes wv { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.viz-map { height: 150px; border-radius: 16px; position: relative; overflow: hidden; background:
	linear-gradient(90deg, rgba(212, 167, 79, .18) 1px, transparent 1px) 0 0 / 28px 28px,
	linear-gradient(rgba(212, 167, 79, .18) 1px, transparent 1px) 0 0 / 28px 28px,
	linear-gradient(135deg, #f6efe1, #efe4cc); }
.viz-map::after { content: ""; position: absolute; left: -10%; right: -10%; top: 55%; height: 14px; background: rgba(255, 255, 255, .9); transform: rotate(-12deg); box-shadow: 0 0 0 1px rgba(212, 167, 79, .3); }
.dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--re); box-shadow: 0 0 0 6px rgba(212, 167, 79, .25); z-index: 1; animation: ping 2.4s ease-out infinite; }
.d1 { left: 22%; top: 28%; } .d2 { left: 58%; top: 40%; animation-delay: .8s; } .d3 { left: 76%; top: 18%; animation-delay: 1.6s; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(212, 167, 79, .6); } 100% { box-shadow: 0 0 0 18px rgba(212, 167, 79, 0); } }

/* Why grid --------------------------------------------------------------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why-grid.four { grid-template-columns: repeat(4, 1fr); }
.why-grid.two { grid-template-columns: repeat(2, 1fr); }
.why-card { padding: 30px; border-radius: var(--radius); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-dark); transition: transform .35s var(--ease), border-color .3s, background .3s; }
.why-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: rgba(255, 255, 255, .06); }
.why-card h3 { font-size: 20px; margin: 18px 0 10px; }
.why-card p { color: var(--muted-dark); margin: 0; font-size: 15.5px; }
.why-card.light { background: #fff; border-color: var(--line); }
.why-card.light p { color: var(--muted); }
.why-card.light:hover { border-color: var(--accent); background: #fff; box-shadow: var(--shadow); }
.wc-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.why .wc-ico { color: #ff6b6f; background: rgba(227, 38, 46, .14); }
.why.accent-acc .wc-ico, .why.accent-ai .wc-ico, .why.accent-re .wc-ico { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.wc-num { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--accent); }

/* Steps ------------------------------------------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
.steps li { position: relative; padding: 30px 26px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.steps li > span { font-family: var(--serif); font-size: 46px; line-height: 1; color: var(--red); }
.steps h3 { font-size: 20px; margin: 16px 0 8px; }
.steps p { color: var(--muted); margin: 0; font-size: 15.5px; }
.steps.vertical { grid-template-columns: 1fr; }
.steps.vertical li { display: grid; grid-template-columns: 72px 1fr; column-gap: 12px; }
.steps.vertical li > span { grid-row: span 2; color: var(--accent); }
.steps.vertical h3 { margin-top: 4px; }

/* Testimonials ----------------------------------------------------------- */
.t-grid { columns: 3; column-gap: 18px; }
.t-card { break-inside: avoid; margin: 0 0 18px; padding: 30px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.t-card blockquote { margin: 16px 0 22px; font-size: 16.5px; line-height: 1.6; color: #2b2b33; }
.t-card figcaption { display: flex; align-items: center; gap: 12px; }
.t-card strong { display: block; font-size: 15px; }
.t-card small { color: var(--muted); font-size: 13.5px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 700; flex: none; }
.testimonials { background: linear-gradient(180deg, var(--cream), #fff); }

/* Team ------------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.member { margin: 0; }
.m-img { aspect-ratio: 4 / 4.4; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, #26262e, #0a0a0b); }
.m-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.member:hover .m-img img { transform: scale(1.04); }
.member figcaption { padding: 16px 4px 0; }
.member strong { display: block; font-size: 18px; }
.member span { color: var(--muted); font-size: 14.5px; }

/* Posts ------------------------------------------------------------------ */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; transition: transform .35s var(--ease), box-shadow .35s; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pc-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); display: block; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; }
.pc-ph { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255, 255, 255, .4); background: radial-gradient(circle at 30% 30%, rgba(227, 38, 46, .35), transparent 60%), var(--ink); }
.pc-body { padding: 24px; }
.pc-meta { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.post-card h3 { font-size: 20px; margin: 10px 0; letter-spacing: -.015em; }
.post-card h3 a:hover { color: var(--red); }
.post-card p { color: var(--muted); font-size: 15px; margin: 0; }
.pager { margin-top: 48px; }
.pager .nav-links { display: flex; justify-content: center; gap: 8px; }
.pager .page-numbers { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); padding: 0 12px; }
.pager .current { background: var(--ink); color: #fff; border-color: var(--ink); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* FAQ -------------------------------------------------------------------- */
.faq-list { display: grid; gap: 12px; }
.faq { border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: border-color .25s, box-shadow .25s; }
.faq[open] { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: var(--shadow); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.faq-x { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); flex: none; transition: transform .3s var(--ease), background .3s; }
.faq[open] .faq-x { transform: rotate(45deg); background: var(--ink); color: #fff; }
.faq-a { padding: 0 26px 22px; color: var(--muted); }
.faq-a p { margin: 0; }

/* Services grid ---------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; overflow: hidden; transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.svc-card::after { content: ""; position: absolute; width: 200px; height: 200px; right: -100px; top: -100px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%); opacity: 0; transition: opacity .4s; }
.svc-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow); }
.svc-card:hover::after { opacity: 1; }
.svc-card h3 { font-size: 20px; margin-top: 8px; }
.svc-card p { color: var(--muted); margin: 0; font-size: 15.5px; }
.sc-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); }
.sc-go { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; }
.sc-go .ico { transition: transform .3s var(--ease); }
.svc-card:hover .sc-go .ico { transform: translateX(4px); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }
.chip-tag { padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 500; font-size: 15px; }

/* Service page ----------------------------------------------------------- */
.svc-layout { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: start; }
.includes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.includes li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; background: var(--cream); font-weight: 500; font-size: 15.5px; }
.inc-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; flex: none; }
.svc-side .sticky { position: sticky; top: 100px; }
.side-card h3 { font-size: 24px; }
.side-card > p { color: var(--muted); font-size: 15px; margin: 8px 0 20px; }

/* Forms ------------------------------------------------------------------ */
.form-card { background: #fff; color: var(--text); border-radius: 26px; padding: 34px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.lead-form { display: grid; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 13.5px; font-weight: 600; color: #3a3a44; }
.field input, .field textarea {
	width: 100%; font: inherit; font-size: 15.5px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); color: var(--text);
	transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(10, 10, 11, .06); }
.interest-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.interest-pick legend { font-size: 13.5px; font-weight: 600; color: #3a3a44; margin-bottom: 8px; padding: 0; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s; }
.chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-fine { font-size: 13px; color: var(--muted); text-align: center; margin: 0; }
.form-note { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-radius: 12px; font-size: 15px; font-weight: 500; }
.form-note.ok { background: #e6f8f0; color: #0b6b4a; }
.form-note.bad { background: #fdecec; color: #a3141a; }

.contact-grid { display: grid; grid-template-columns: 1fr 520px; gap: 64px; align-items: start; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.contact-list li { display: flex; gap: 16px; align-items: center; }
.contact-list .ico { color: #ff6b6f; width: 48px; height: 48px; padding: 13px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.contact-list small { display: block; color: var(--muted-dark); font-size: 13px; }
.contact-list a, .contact-list span { font-weight: 600; font-size: 17px; }
.contact-cards { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.contact-cards li { display: flex; gap: 16px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 18px; }
.cc-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fdecec; color: var(--red); flex: none; }
.contact-cards small { display: block; color: var(--muted); font-size: 13px; }
.contact-cards a, .contact-cards span span { font-weight: 600; }
.map { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); height: 260px; }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.4); }

/* Pricing ---------------------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 32px 28px; border-radius: 26px; border: 1px solid var(--line); background: #fff; }
.price-card.featured { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow-lg); transform: translateY(-10px); }
.badge { position: absolute; top: -13px; left: 28px; background: var(--red); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.pr-tag { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.price-card h2 { font-size: 22px; margin: 10px 0 18px; }
.pr-price strong { font-size: 44px; letter-spacing: -.04em; }
.pr-price span { color: var(--muted); }
.featured .pr-price span, .featured .pr-note { color: var(--muted-dark); }
.pr-note { color: var(--muted); font-size: 14.5px; margin: 6px 0 22px; }
.price-card ul { list-style: none; margin: 0 0 28px; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.featured ul { border-color: var(--line-dark); }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.price-card li .ico { color: var(--accent); margin-top: 3px; }
.price-card .btn { margin-top: auto; }
.featured .btn-primary { box-shadow: none; }

/* About ------------------------------------------------------------------ */
.story-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 64px; align-items: start; }
.timeline { display: grid; gap: 14px; }
.timeline div { padding: 22px 24px; border-radius: 18px; background: var(--cream); border-left: 4px solid var(--red); }
.timeline span { font-family: var(--serif); font-size: 32px; line-height: 1; }
.timeline p { margin: 6px 0 0; color: var(--muted); }
.founder { display: flex; align-items: center; gap: 16px; margin: 22px 0 0; padding: 18px; border-radius: 18px; border: 1px solid var(--line); }
.founder img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--ink); }
.founder strong { display: block; }
.founder span { color: var(--muted); font-size: 14px; }
.careers-apply { margin-top: 56px; padding: 44px; border-radius: 26px; background: var(--ink); color: #fff; text-align: center; }
.careers-apply h2 { font-size: 34px; }
.careers-apply p { color: var(--muted-dark); margin: 12px 0 0; }
.careers-apply a { color: #fff; text-decoration: underline; text-decoration-color: var(--red); }

/* Prose ------------------------------------------------------------------ */
.prose { font-size: 18px; line-height: 1.75; color: #2b2b33; }
.prose h2 { font-size: 32px; margin: 1.6em 0 .6em; }
.prose h3 { font-size: 24px; margin: 1.4em 0 .5em; }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .35em 0; }
.prose img { border-radius: 16px; margin: 1.6em 0; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--red); font-size: 20px; color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 16px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.post-cover { border-radius: 24px; overflow: hidden; margin: -150px 0 48px; position: relative; box-shadow: var(--shadow-lg); }
.post-hero { padding-bottom: 180px !important; }
.post-cta { margin-top: 56px; padding: 30px; border-radius: 22px; background: var(--cream); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.post-cta strong { font-size: 20px; }
.post-cta span { color: var(--muted); flex: 1 1 260px; }
.empty { text-align: center; color: var(--muted); }

/* CTA band --------------------------------------------------------------- */
.cta-band { padding: 0 0 110px; }
.section.tint + .cta-band, .testimonials + .cta-band { padding-top: 0; }
.cta-inner {
	position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
	padding: 60px; border-radius: 32px; color: #fff;
	background: radial-gradient(circle at 0% 0%, rgba(227, 38, 46, .55), transparent 50%), radial-gradient(circle at 100% 100%, rgba(139, 92, 246, .45), transparent 50%), var(--ink);
}
.cta-inner h2 { font-size: clamp(28px, 3.4vw, 42px); max-width: 640px; letter-spacing: -.03em; }
.cta-inner p { color: #c9c9d2; margin: 12px 0 0; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: #050506; color: var(--muted-dark); padding: 88px 0 34px; font-size: 15px; }
.f-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 40px; }
.f-brand img { height: 52px; width: auto; }
.f-brand p { margin: 20px 0; max-width: 320px; }
.f-social { display: flex; gap: 10px; }
.f-social a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: #fff; transition: background .2s; }
.f-social a:hover { background: var(--red); }
.f-col h3 { color: #fff; font-size: 15px; margin-bottom: 18px; letter-spacing: 0; }
.f-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.f-col a:hover { color: #fff; }
.f-contact li { display: flex; gap: 10px; align-items: flex-start; }
.f-contact .ico { margin-top: 4px; color: #ff6b6f; }
.f-company { margin-top: 22px !important; grid-template-columns: 1fr 1fr; }
.f-bottom { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line-dark); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; }
.f-legal { max-width: 560px; }

.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px 14px 16px; border-radius: 999px; background: #25d366; color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 14px 40px -10px rgba(37, 211, 102, .7); transition: transform .3s var(--ease); }
.wa-float:hover { transform: translateY(-3px) scale(1.03); }

/* Reveal animation ------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.js .reveal { opacity: 1; transform: none; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1180px) {
	.main-nav, .tb-msg { display: none; }
	.nav-toggle { display: inline-grid; }
	.header-cta { margin-left: auto; }
	.f-top { grid-template-columns: 1fr 1fr 1fr; }
	.f-brand { grid-column: 1 / -1; }
	.price-grid { grid-template-columns: repeat(2, 1fr); }
	.price-card.featured { transform: none; }
	.why-grid.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
	.section { padding: 80px 0; }
	.paths { grid-template-columns: 1fr; }
	.path { min-height: 0; }
	.pillar-grid, .ph-grid, .svc-layout, .contact-grid, .story-grid { grid-template-columns: 1fr; gap: 44px; }
	.pillar-sec.flip .pillar-copy { order: 0; }
	.svc-grid, .post-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
	.why-grid { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.t-grid { columns: 2; }
	.stats { grid-template-columns: repeat(2, 1fr); }
	.svc-side .sticky { position: static; }
	.ph-visual { display: none; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.wrap { width: calc(100% - 32px); }
	.topbar { display: none; }
	.header-in { height: 66px; gap: 12px; }
	.brand img { height: 40px; }
	.header-cta .btn { display: none; }
	.hero { padding: 56px 0 50px; }
	.section { padding: 64px 0; }
	.answer-band { padding: 56px 0; }
	.svc-grid, .post-grid, .why-grid, .why-grid.two, .why-grid.four, .steps, .includes, .grid-2, .f-top, .price-grid { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.t-grid { columns: 1; }
	.answer { padding: 26px 24px; }
	.form-card { padding: 24px 20px; }
	.cta-inner { padding: 36px 26px; }
	.cta-band { padding-bottom: 64px; }
	.viz { padding: 16px; }
	.viz-float { position: relative; left: 0; bottom: 0; margin-top: 14px; }
	.wa-float span { display: none; }
	.wa-float { padding: 14px; right: 16px; bottom: 16px; }
	.f-company { grid-template-columns: 1fr 1fr; }
	.post-cover { margin-top: -120px; }
	.row-head .btn { margin-bottom: 32px; }
	.sec-head { margin-bottom: 36px; }
}

/* ==========================================================================
   v1.1 — Motion & polish layer
   ========================================================================== */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes angle { to { --ang: 360deg; } }
@keyframes wordUp { to { transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes msgIn { to { opacity: 1; translate: 0 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.75); } }
@keyframes dots { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes vscroll { to { transform: translateY(-50%); } }
@keyframes cue { 0% { transform: translate(-50%, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, 14px); opacity: 0; } }
@keyframes shine { to { transform: translateX(220%) skewX(-20deg); } }

/* Reveal now uses the independent `translate` property so hover transforms keep working. */
.js .reveal { transform: none; translate: 0 28px; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.in { translate: 0 0; }

/* Hero atmosphere */
.aurora, .page-hero::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; pointer-events: none;
	background: conic-gradient(from 0deg, rgba(227, 38, 46, .0), rgba(227, 38, 46, .22), rgba(139, 92, 246, .22), rgba(212, 167, 79, .18), rgba(16, 185, 129, .12), rgba(227, 38, 46, .0));
	-webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%); mask-image: radial-gradient(circle, #000 0%, transparent 62%);
	animation: spin 40s linear infinite; will-change: transform;
}
.page-hero::before { z-index: -1; opacity: .7; top: 30%; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; }
.grain {
	position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero { padding: 96px 0 84px; min-height: calc(100svh - 118px); display: flex; align-items: center; }
.hero-in { position: relative; width: min(100% - 40px, var(--wrap)); }
.hero .hero-title { display: block; font-size: clamp(42px, 6.6vw, 92px); font-weight: 700; letter-spacing: -.045em; line-height: 1.0; }
.h1-kicker {
	display: inline-flex; align-items: center; gap: 10px; margin-bottom: 30px; padding: 9px 18px 9px 14px; border-radius: 999px;
	font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: #e9e9ef;
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	opacity: 0; animation: fadeIn .8s .1s var(--ease) forwards;
}
.h1-kicker i { font-style: normal; color: var(--red-2); }
.kick-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-2); box-shadow: 0 0 0 4px rgba(255, 75, 79, .2); animation: pulse 2s infinite; }
.split { display: block; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .12em 0; margin: 0 -.06em -.12em 0; }
.w > span { display: inline-block; transform: translateY(110%); }
.hero-title .w > span, .page-hero h1 .w > span { animation: wordUp 1s var(--ease) forwards; animation-delay: calc(var(--wi) * 70ms + 200ms); }
.js .sec-head .w > span { transition: transform .9s var(--ease); transition-delay: calc(var(--wi) * 50ms + 80ms); }
.js .sec-head.in .w > span { transform: none; }
.no-split .w > span { transform: none !important; animation: none !important; }
.hero-lead, .hero-ask { opacity: 0; animation: fadeIn 1s .7s var(--ease) forwards; }
.hero-ask { animation-delay: .9s; }
.scroll-cue { position: absolute; left: 50%; bottom: -46px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255, 255, 255, .3); border-radius: 14px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 2px; background: #fff; animation: cue 1.8s infinite; }

/* Path cards: animated gradient border + 3D tilt */
.path { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform .5s var(--ease), border-color .3s, box-shadow .45s var(--ease); }
.path:hover { --ty: -10px; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty)); }
.path.tilting { transition: transform .12s linear, border-color .3s, box-shadow .45s; }
.path-border {
	position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
	background: conic-gradient(from var(--ang), transparent 0deg, transparent 220deg, color-mix(in srgb, var(--accent) 90%, white) 290deg, #fff 315deg, transparent 340deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	animation: angle 5s linear infinite; opacity: .55; transition: opacity .3s;
}
.path:nth-child(2) .path-border { animation-delay: -1.7s; }
.path:nth-child(3) .path-border { animation-delay: -3.4s; }
.path:hover .path-border { opacity: 1; }
.path-ico { transition: transform .5s var(--ease); }
.path:hover .path-ico { transform: translateZ(30px) rotate(-6deg) scale(1.08); }

/* Buttons: shine + magnetic */
.btn { position: relative; overflow: hidden; translate: var(--bx, 0) var(--by, 0); }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); }
.btn-primary:hover::after { animation: shine .9s var(--ease); }

/* Header: progress bar + nav underline */
.site-header { position: sticky; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--red), var(--ai), var(--re)); }

/* Practice visuals */
.viz-card { color: var(--text); }
.viz-rows span { color: var(--muted); }
.viz-card.tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.viz-card.tilt.tilting { transition: transform .12s linear; }
.viz-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.viz-kpis div { padding: 10px 12px; border-radius: 12px; background: var(--cream); }
.viz-kpis small { display: block; font-size: 11.5px; color: var(--muted); }
.viz-kpis strong { font-size: 13.5px; }
.viz-chart { width: 100%; height: 130px; overflow: visible; }
.viz-chart .gridl path { stroke: #eceae4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz-chart .line { fill: none; stroke: #10b981; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.viz-chart .area { opacity: 0; animation: fadeIn 1.2s 1.2s forwards; }
.viz-chart .pt { fill: #10b981; opacity: 0; animation: fadeIn .4s 2.3s forwards; }
.viz .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.2s var(--ease) .4s forwards; }
.js .reveal:not(.in) .viz *, .js .reveal:not(.in) .viz { animation-play-state: paused !important; }
.neural { position: absolute; inset: 0; width: 100%; height: 100%; }
.neural line { stroke: rgba(183, 155, 255, .4); stroke-width: 1; stroke-dasharray: 4 6; animation: neuralDash 6s linear infinite; animation-delay: calc(var(--i) * -.4s); }
.neural circle { fill: #b79bff; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes neuralDash { to { stroke-dashoffset: -60; } }
.viz-ai .viz-card { position: relative; }
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 250px; }
.chat .msg, .chat .typing { opacity: 0; translate: 0 10px; animation: msgIn .55s var(--ease) forwards; animation-delay: calc(var(--m) * .9s + .4s); }
.typing { display: inline-flex; gap: 5px; padding: 12px 14px; border-radius: 16px; background: var(--cream); width: max-content; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9a9aa6; animation: dots 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; margin-right: 6px; animation: pulse 1.6s infinite; vertical-align: middle; }
.skyline { width: 100%; height: auto; border-radius: 14px; display: block; }
.skyline .h1 { fill: #2b2140; opacity: .9; }
.skyline .h2 { fill: #241a2a; }
.skyline .mosque path, .skyline .monument path, .skyline .towers rect { fill: #110e18; }
.skyline .mosque .cut { fill: #d4a74f; opacity: .28; }
.skyline .ground { fill: #0c0a12; }
.skyline .road { fill: none; stroke: #d4a74f; stroke-width: 1.5; }
.skyline .sun { transform-box: fill-box; transform-origin: center; animation: pulse 6s ease-in-out infinite; }
.skyline .pins circle { fill: #ffd36b; stroke: rgba(255, 211, 107, .4); stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: pulse 2.2s infinite; }
.skyline .pins circle:nth-child(2) { animation-delay: .7s; } .skyline .pins circle:nth-child(3) { animation-delay: 1.4s; }
.viz-float.f2 { left: auto; right: -10px; bottom: auto; top: 18px; animation-delay: -2.5s; }

/* Spotlight cards */
.why-card, .svc-card, .price-card { --sx: 50%; --sy: 50%; position: relative; overflow: hidden; }
.why-card::after, .price-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(380px circle at var(--sx) var(--sy), color-mix(in srgb, var(--accent) 22%, transparent), transparent 45%); }
.why-card:hover::after, .price-card:hover::after { opacity: 1; }
.why .why-card::after { background: radial-gradient(380px circle at var(--sx) var(--sy), rgba(255, 255, 255, .09), transparent 45%); }
.svc-card .sc-ico { transition: transform .5s var(--ease), background .3s, color .3s; }
.svc-card:hover .sc-ico { transform: rotate(-8deg) scale(1.08); background: var(--accent); color: #fff; }
.why-grid.bento { grid-template-columns: 1.3fr 1fr 1fr; }
.why-card.big { grid-row: span 2; display: flex; flex-direction: column; background: radial-gradient(circle at 0% 0%, rgba(227, 38, 46, .35), transparent 60%), rgba(255, 255, 255, .04); }
.big-num { margin-top: auto; padding-top: 40px; font-family: var(--serif); font-size: clamp(90px, 10vw, 150px); line-height: .85; color: #fff; letter-spacing: -.03em; }
.why-card.big h3 { font-size: 26px; }

/* Process timeline */
.flow-wrap { position: relative; }
.flow-line { position: absolute; left: 26px; right: 26px; top: 54px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.flow-line span { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--fp, 0)); background: linear-gradient(90deg, var(--red), var(--ai), var(--re)); transition: transform .2s linear; }
.steps.flow li { background: #fff; z-index: 1; }
.steps.flow li > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 16px; font-weight: 700; box-shadow: 0 0 0 8px #fff; }
.steps.flow { gap: 22px; }
.steps.flow li { border: 0; padding: 0 6px; }

/* Testimonials wall */
.t-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; height: 660px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.t-col { overflow: hidden; }
.t-track { animation: vscroll var(--speed, 40s) linear infinite; }
.t-track.rev { animation-direction: reverse; }
.t-wall:hover .t-track { animation-play-state: paused; }
.t-wall .t-card { margin: 0 0 18px; transition: transform .35s var(--ease), box-shadow .35s; }
.t-wall .t-card:hover { transform: scale(1.02); }

/* White header so the logo always shows in true brand colours */
.site-header, .site-header.scrolled { background: rgba(255, 255, 255, .94); color: var(--ink); border-bottom: 1px solid var(--line); }
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(10, 10, 11, .35); }
.nav-top { color: #3a3a44; }
.nav-top:hover, .has-mega:hover > .nav-top, .has-mega:focus-within > .nav-top { color: var(--ink); background: var(--cream); }
.nav-toggle { color: var(--ink); }
.mn-head { background: #fff; border-bottom: 1px solid var(--line); }
.nav-close { color: var(--ink); display: inline-grid; }
.logo-plate { display: inline-block; background: #fff; padding: 14px 18px; border-radius: 14px; }

/* Guides ---------------------------------------------------------------- */
.guide-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 22px 0 0; color: var(--muted-dark); font-size: 14.5px; }
.guide-meta span + span::before { content: "·"; margin-right: 22px; opacity: .6; }
.guide-body { padding-top: 72px; }
.guide-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.guide-main { max-width: 760px; font-size: 17.5px; line-height: 1.75; color: #2b2b33; }
.guide-main .answer { margin-bottom: 28px; }
.tldr { padding: 26px 30px; border-radius: 18px; background: var(--ink); color: #fff; margin-bottom: 48px; }
.tldr h2 { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: #ff8a8e; margin-bottom: 14px; }
.tldr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tldr li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.55; color: #e8e8ee; }
.tldr .ico { color: #34d399; margin-top: 4px; }
.g-sec { margin: 0 0 52px; scroll-margin-top: 110px; }
.g-sec > h2 { font-size: clamp(24px, 2.6vw, 31px); letter-spacing: -.025em; margin-bottom: 16px; color: var(--ink); }
.g-list { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.g-list li { position: relative; padding: 12px 16px 12px 44px; border-radius: 12px; background: var(--cream); font-size: 16px; }
.g-list li::before { content: ""; position: absolute; left: 18px; top: 21px; width: 10px; height: 10px; border-radius: 50%; background: var(--deep, var(--red)); }
.g-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
.g-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.g-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 700; }
.g-steps h3 { font-size: 18px; margin: 2px 0 4px; color: var(--ink); }
.g-steps p { margin: 0; font-size: 15.5px; color: var(--muted); line-height: 1.6; }
.g-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.g-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.g-table th, .g-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.g-table thead th { background: var(--ink); color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.g-table tbody th { color: var(--ink); white-space: nowrap; }
.g-table tr:last-child th, .g-table tr:last-child td { border-bottom: 0; }
.author-box { display: flex; gap: 22px; align-items: center; padding: 24px; border-radius: 18px; border: 1px solid var(--line); background: var(--cream); }
.author-box .sc-logo { height: 52px; flex: none; }
.author-box p { margin: 0; font-size: 15px; color: var(--muted); }
.toc.sticky { position: sticky; top: 110px; }
.toc { padding: 24px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.toc-title { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 8px 10px; border-radius: 10px; font-size: 14.5px; line-height: 1.4; color: #3a3a44; transition: background .2s, color .2s; }
.toc a:hover { background: var(--cream); color: var(--ink); }
.toc-cta { padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.toc-cta p { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.toc-cta .btn { width: 100%; color: #fff; padding: 13px 18px; font-size: 14.5px; border-radius: 999px; }
.toc-cta .btn:hover { background: #c81e25; color: #fff; }
.toc-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: #128c4a; padding: 8px; }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.guide-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 18px; border: 1px solid var(--line); background: #fff; transition: border-color .3s, box-shadow .35s, translate .35s var(--ease); }
.guide-card:hover { border-color: var(--deep); box-shadow: var(--shadow); translate: 0 -4px; }
.guide-card h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.guide-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.gc-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--deep); }
.gc-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); }
.gc-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.gc-go .ico { transition: transform .3s var(--ease); }
.guide-card:hover .gc-go .ico { transform: translateX(4px); }
.guides-sec { background: linear-gradient(180deg, #fff, var(--cream)); }
.platforms { background: #fff; padding: 18px 0 56px; border-bottom: 1px solid var(--line); }
.platforms .logos-label { color: var(--muted); margin-top: 26px; }
.plat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.plat-list img { height: 84px; width: auto; filter: grayscale(1) contrast(1.1); opacity: .7; transition: filter .3s, opacity .3s; }
.plat-list img:hover { filter: none; opacity: 1; }
@media (max-width: 980px) {
	.pillar-grid, .ph-grid, .svc-layout, .contact-grid, .story-grid, .guide-grid { grid-template-columns: minmax(0, 1fr); }
	.btn { max-width: 100%; white-space: normal; text-align: center; }
	.guide-grid { gap: 32px; }
	.guide-side { order: -1; }
	.toc.sticky { position: static; }
	.toc ol { display: none; }
	.toc-title { display: none; }
	.toc-cta { border-top: 0; padding-top: 0; }
}
@media (max-width: 640px) {
	.guide-main { font-size: 16.5px; }
	.tldr { padding: 22px; }
	.author-box { flex-direction: column; align-items: flex-start; }
	.plat-list img { height: 64px; }
	.g-steps li { grid-template-columns: 36px 1fr; padding: 16px; }
	.g-n { width: 36px; height: 36px; }
}

/* Vector logo */
.sc-logo { display: block; width: auto; height: auto; }
.brand { display: block; line-height: 0; }
.brand .sc-logo { height: 60px; }
.mn-head .sc-logo { height: 44px; }
.f-brand .sc-logo { height: 66px; }
@media (max-width: 640px) { .brand .sc-logo { height: 44px; } }

/* Practice-area chooser — editorial panel under the hero */
.hero { min-height: 0; padding: 104px 0 210px; }
.hero-trust { opacity: 0; animation: fadeIn 1s 1.1s var(--ease) forwards; margin-top: 34px; }
.accent-acc { --deep: #0f7a57; }
.accent-ai { --deep: #5b3cc4; }
.accent-re { --deep: #96681c; }
.choose { position: relative; z-index: 3; margin-top: -150px; }
.choose-head { text-align: center; margin-bottom: 18px; }
.choose-ask { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.choose-panel {
	display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-radius: 18px; overflow: hidden;
	box-shadow: 0 40px 90px -40px rgba(10, 10, 11, .55), 0 0 0 1px rgba(10, 10, 11, .06);
}
.choice { position: relative; display: flex; flex-direction: column; padding: 40px 38px 36px; color: var(--text); background: #fff; transition: background .3s; }
.choice + .choice { border-left: 1px solid var(--line); }
.choice::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--deep); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.choice:hover { background: #fbfaf8; }
.choice:hover::before, .choice:focus-visible::before { transform: scaleX(1); }
.choice:focus-visible { outline: 2px solid var(--deep); outline-offset: -2px; border-radius: 0; }
.choice-label { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--deep); }
.choice-title { font-size: 27px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: 20px 0 12px; color: var(--ink); }
.choice-desc { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0 0 24px; }
.choice-list { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--line); }
.choice-list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 500; color: #2b2b33; }
.choice-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink); transition: color .25s; }
.choice-link .ico { transition: transform .3s var(--ease); }
.choice:hover .choice-link { color: var(--deep); }
.choice:hover .choice-link .ico { transform: translateX(4px); }
.choose + .logos-band { padding-top: 40px; }

/* Above-the-fold: compact hero so all three businesses are visible on first screen */
.hero { padding: 40px 0 168px; }
.hero .hero-title { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.04; }
.h1-kicker { margin-bottom: 18px; }
.hero-lead { margin-top: 18px; font-size: clamp(16px, 1.35vw, 18.5px); max-width: 760px; }
.hero-trust { margin-top: 22px; }
.choose { margin-top: -140px; }
.choose-head { margin-bottom: 14px; }
.choice { padding: 30px 32px 28px; }
.choice-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.choice-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--deep); background: color-mix(in srgb, var(--deep) 10%, white); }
.choice-label { gap: 6px; font-size: 11.5px; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--deep) 8%, white); }
.choice-title { font-size: 25px; margin: 18px 0 8px; }
.choice-desc { font-size: 15px; margin-bottom: 18px; }
.choice-list { margin-bottom: 22px; }
.choice-list li { padding: 8px 0; font-size: 14px; }
@media (min-width: 981px) and (max-height: 820px) { .topbar { display: none; } }
.hero-quick { display: none; }
@media (max-width: 980px) {
	.hero { padding: 44px 0 150px; }
	.choose { margin-top: -118px; }
	.hero-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; opacity: 0; animation: fadeIn .8s .8s var(--ease) forwards; }
	.hero-quick a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); }
	.hero-quick .ico { color: var(--accent); }
}
@media (max-width: 640px) {
	/* The chips repeat the kicker's three businesses visibly; keep the kicker for SEO/screen readers only. */
	.hero .h1-kicker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; }
}
@media (max-width: 980px) {
	.hero { padding: 72px 0 160px; }
	.choose { margin-top: -120px; }
	.choose-panel { grid-template-columns: 1fr; }
	.choice + .choice { border-left: 0; border-top: 1px solid var(--line); }
	.choice { padding: 30px 26px 28px; }
	.choice-title { font-size: 24px; margin-top: 16px; }
}

/* Client logos — day mode */
.logos-band.light { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); padding: 8px 0 56px; }
.logos-band.light .logos-label { color: var(--muted); }
.logos-band.light .logos-track { gap: 8px; }
.logos-band.light .logos-track img { height: 120px; filter: grayscale(1) contrast(1.15); opacity: .8; }
.logos-band.light .logos-track img:hover { filter: none; opacity: 1; }

/* Team, posts, misc polish */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.member { flex: 0 1 calc(33.333% - 15px); min-width: 0; max-width: 340px; }
.member .m-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: clamp(64px, 7vw, 110px); color: #fff; letter-spacing: -.02em; background: radial-gradient(circle at 30% 20%, rgba(227, 38, 46, .55), transparent 60%), radial-gradient(circle at 80% 90%, rgba(139, 92, 246, .45), transparent 60%), linear-gradient(160deg, #26262e, #0a0a0b); }
.m-in { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #0a66c2; color: #fff; font-weight: 800; font-size: 17px; font-family: Arial, sans-serif; transition: transform .3s var(--ease); }
.m-in:hover { transform: scale(1.1); }
.m-img img { filter: grayscale(.35) contrast(1.02); transition: transform .6s var(--ease), filter .5s; }
.member:hover .m-img img { filter: none; }
.m-img { position: relative; }
.m-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 11, .55)); pointer-events: none; }
.answer { box-shadow: var(--shadow); background: linear-gradient(135deg, #fff, var(--cream)); }
.stat { position: relative; overflow: hidden; background: #fff; transition: transform .35s var(--ease), box-shadow .35s; }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--red), var(--ai), var(--re)); }
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stat strong { background: linear-gradient(180deg, var(--ink), #4b4b57); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cta-inner::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(circle at 80% 50%, #000, transparent 70%); mask-image: radial-gradient(circle at 80% 50%, #000, transparent 70%); pointer-events: none; }
.cta-inner > * { position: relative; z-index: 1; }
.section.dark { position: relative; isolation: isolate; }
.section.dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(800px 400px at 15% 0%, rgba(227, 38, 46, .16), transparent 70%), radial-gradient(700px 400px at 90% 100%, rgba(139, 92, 246, .14), transparent 70%); }
.f-mark { margin: 72px 0 0; text-align: center; font-weight: 800; font-size: clamp(90px, 21vw, 320px); line-height: .78; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .13); user-select: none; background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 80%); -webkit-background-clip: text; background-clip: text; }
.f-mark span { -webkit-text-stroke: 0; color: var(--red); }
.nav-top { position: relative; }
.main-nav .nav-top::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1.5px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.main-nav .nav-top:hover::after { transform: scaleX(1); transform-origin: left; }
.svc-mini a { transition: border-color .25s, transform .35s var(--ease), box-shadow .25s, background .25s; }
.svc-mini a:hover { background: color-mix(in srgb, var(--accent) 5%, white); }

@media (max-width: 980px) {
	.why-grid.bento { grid-template-columns: 1fr 1fr; }
	.why-card.big { grid-column: 1 / -1; grid-row: auto; }
	.flow-line { display: none; }
	.t-wall { gap: 12px; }
	.member { flex-basis: calc(33.333% - 15px); }
	.hero { min-height: 0; }
	.scroll-cue { display: none; }
}
@media (max-width: 640px) {
	.why-grid.bento { grid-template-columns: 1fr; }
	.team-grid { gap: 14px; }
	.member { flex-basis: calc(50% - 7px); }
	.t-wall { display: block; height: auto; -webkit-mask-image: none; mask-image: none; }
	.t-track { animation: none; }
	.t-wall .t-card[aria-hidden] { display: none; }
	.h1-kicker { font-size: 10.5px; letter-spacing: .1em; padding: 8px 14px 8px 12px; }
	.viz-float.f2 { right: 0; top: 0; }
	.hero-canvas { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
	.w > span, .js .reveal { transform: none !important; translate: none !important; }
	.hero-lead, .hero-ask, .h1-kicker, .chat .msg, .chat .typing, .viz-chart .area, .viz-chart .pt { opacity: 1 !important; translate: none !important; }
	.viz .draw { stroke-dashoffset: 0; }
}

/* ==========================================================================
   v2 — Unified brand palette: ink · ivory · signature red · champagne brass
   (taken from the logo: black suit, white collar, red tie)
   ========================================================================== */
:root {
	--ink: #0f0f12;
	--ink-2: #17171b;
	--ink-3: #202026;
	--cream: #f7f4ef;
	--ivory: #fbf9f5;
	--line: #e8e2d8;
	--text: #1c1b1f;
	--muted: #5f5b57;
	--muted-dark: #a9a49c;
	--red: #d42a2f;
	--red-2: #e8474c;
	--red-deep: #a8161e;
	--brass: #b08a52;
	--brass-2: #d8b77f;
	/* One accent for all three practice areas — differentiation comes from icons and numerals, not colour. */
	--acc: var(--red);
	--ai: var(--red);
	--re: var(--red);
	--accent: var(--red);
	--shadow: 0 1px 2px rgba(15, 15, 18, .04), 0 14px 40px -14px rgba(15, 15, 18, .16);
	--shadow-lg: 0 34px 80px -28px rgba(15, 15, 18, .38);
}
.accent-acc, .accent-ai, .accent-re { --accent: var(--red); --deep: var(--red-deep); }
body { background: var(--ivory); color: var(--text); }
::selection { background: var(--red); color: #fff; }

/* Typography accents: italic serif in red on light, champagne on dark */
h1 em, h2 em { color: var(--red); }
.hero h1 em, .page-hero h1 em, .dark h2 em, .section.dark h2 em, .cta-inner h2 em, .markets h2 em {
	background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: var(--brass-2);
}
.eyebrow { color: var(--brass); }
.eyebrow::before { background: var(--brass); }
.eyebrow.on-dark { color: #efe6d6; opacity: 1; }
.eyebrow.on-dark::before { background: var(--brass-2); }

/* Surfaces */
.section.tint, .testimonials, .guides-sec { background: var(--cream); }
.answer-band, .logos-band.light, .platforms { background: #fff; }
.choice, .svc-card, .why-card.light, .steps li, .t-card, .faq, .post-card, .price-card, .guide-card, .g-steps li, .toc, .contact-cards li, .svc-mini a, .form-card { background: #fff; border-color: var(--line); }
.answer { background: #fff; border-color: var(--line); }
.answer::before { background: var(--red); }

/* Hero & page heroes: ink with a restrained red glow and brass warmth (no violet, no rainbow) */
.hero, .page-hero { background: radial-gradient(1200px 600px at 12% -10%, rgba(212, 42, 47, .28), transparent 60%), radial-gradient(900px 520px at 100% 110%, rgba(176, 138, 82, .22), transparent 60%), var(--ink); }
.orb { opacity: .45; }
.o1 { --c: #7d1419; }
.o2, .page-hero.accent-acc .o2, .page-hero.accent-ai .o2, .page-hero.accent-re .o2 { --c: #3a2a1a; }
.o3 { --c: #5a1216; opacity: .35; }
.aurora, .page-hero::before { background: conic-gradient(from 0deg, transparent, rgba(212, 42, 47, .16), rgba(176, 138, 82, .14), transparent 70%); opacity: .8; }
.grid-lines { background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); }
.hero-lead, .page-hero .hero-lead { color: #cfc9c0; }
.h1-kicker { background: rgba(255, 255, 255, .04); border-color: rgba(216, 183, 127, .28); color: #efe6d6; }
.h1-kicker i, .kick-dot { color: var(--brass-2); }
.kick-dot { background: var(--red-2); box-shadow: 0 0 0 4px rgba(232, 71, 76, .18); }
.crumbs span[aria-current] { color: #efe6d6; }
.ht-stars, .stars { color: var(--brass-2); }
.stars { color: var(--brass); }
.hero-quick .ico { color: var(--brass-2); }

/* Header & progress */
.progress span { background: var(--red); }
.main-nav .nav-top::after { background: var(--red); }
.mf-ico { color: var(--brass-2); }
.mega-feature::after { background: radial-gradient(circle, rgba(212, 42, 47, .55), transparent 70%); }
.ml-ico, .sm-ico, .sc-ico, .choice-ico { background: #f6ecec; color: var(--red-deep); }
.svc-card:hover .sc-ico { background: var(--red); color: #fff; }

/* Choice panel */
.choice::before { background: var(--red); }
.choice-label { color: var(--brass); background: #f6efe4; }
.choice:hover { background: var(--ivory); }
.choice:hover .choice-link { color: var(--red); }

/* Practice visuals: brass + ink instead of green/violet */
.viz::before { background: radial-gradient(circle at 25% 15%, rgba(212, 42, 47, .32), transparent 60%), radial-gradient(circle at 90% 95%, rgba(176, 138, 82, .3), transparent 60%), var(--ink); }
.ph-visual .viz::before { background: radial-gradient(circle at 30% 20%, rgba(212, 42, 47, .25), transparent 65%), rgba(255, 255, 255, .03); }
.viz-chart .line { stroke: var(--brass); }
.viz-chart .pt { fill: var(--brass); }
.bars i { background: linear-gradient(180deg, var(--brass), #ead9bb); }
.pill.ok { background: #f3ede2; color: #7a5a2a; }
.pill.live { background: #f8e7e7; color: var(--red-deep); }
.msg.out { background: var(--ink); color: #fff; }
.wavebar i { background: #e9c9ca; }
.neural line { stroke: rgba(216, 183, 127, .35); }
.neural circle { fill: var(--brass-2); }
.viz-float .ico { color: var(--brass-2); }
.skyline .h1 { fill: #2a2420; }
.skyline .h2 { fill: #1f1a17; }
.skyline .pins circle { fill: #f1d7a6; stroke: rgba(241, 215, 166, .35); }
.skyline .road { stroke: var(--brass-2); }
.skyline .mosque .cut { fill: var(--brass-2); }
.dot { background: var(--brass); }

/* Dark sections */
.section.dark::before { background: radial-gradient(900px 420px at 10% 0%, rgba(212, 42, 47, .18), transparent 70%), radial-gradient(760px 420px at 95% 100%, rgba(176, 138, 82, .14), transparent 70%); }
.why .wc-ico, .why.accent-acc .wc-ico, .why.accent-ai .wc-ico, .why.accent-re .wc-ico { color: var(--brass-2); background: rgba(216, 183, 127, .1); }
.why-card.big { background: radial-gradient(circle at 0% 0%, rgba(212, 42, 47, .3), transparent 60%), rgba(255, 255, 255, .03); }
.big-num { color: var(--brass-2); }
.wc-num { color: var(--brass); }
.why .why-card:hover { border-color: rgba(216, 183, 127, .45); }

/* Numbers, steps, stats */
.stat::before { background: var(--red); }
.stat strong { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
.flow-line span { background: linear-gradient(90deg, var(--red), var(--brass)); }
.steps li > span, .steps.vertical li > span { color: var(--brass); }
.steps.flow li > span { background: var(--ink); color: var(--brass-2); }
.g-n { background: var(--ink); color: var(--brass-2); }
.timeline div { border-left-color: var(--brass); }
.inc-ico { background: var(--ink); color: var(--brass-2); }
.g-list li::before { background: var(--red); }
.tldr { background: var(--ink); }
.tldr h2 { color: var(--brass-2); }
.tldr .ico { color: var(--brass-2); }
.gc-label { color: var(--brass); }
.guide-card:hover { border-color: var(--brass); }
.pr-tag { color: var(--brass); }
.price-card li .ico { color: var(--red); }
.featured .pr-tag { color: var(--brass-2); }
.badge { background: var(--brass); }
.avatar { background: var(--ink); color: var(--brass-2); }

/* CTA band */
.cta-inner { background: radial-gradient(circle at 0% 0%, rgba(212, 42, 47, .45), transparent 52%), radial-gradient(circle at 100% 100%, rgba(176, 138, 82, .35), transparent 55%), var(--ink); }

/* Footer */
.site-footer { background: #0b0b0d; }
.f-social a:hover { background: var(--red); }
.f-contact .ico { color: var(--brass-2); }
.f-mark { -webkit-text-stroke: 1px rgba(216, 183, 127, .16); background: linear-gradient(180deg, rgba(216, 183, 127, .1), transparent 80%); -webkit-background-clip: text; background-clip: text; }
.contact-list .ico { color: var(--brass-2); }
.cc-ico { background: #f6ecec; color: var(--red-deep); }

/* WhatsApp: on-brand ink pill with a green signal */
.wa-float { background: var(--ink); color: #fff; box-shadow: 0 16px 40px -14px rgba(15, 15, 18, .6); border: 1px solid rgba(255, 255, 255, .12); }
.wa-float .ico { color: #25d366; }

/* Team monogram */
.member .m-mono { background: radial-gradient(circle at 30% 20%, rgba(212, 42, 47, .5), transparent 60%), radial-gradient(circle at 80% 90%, rgba(176, 138, 82, .45), transparent 60%), linear-gradient(160deg, #24242a, #0f0f12); }

/* Accessibility: small brass text on light surfaces uses a deeper brass (WCAG AA ≥ 4.5:1) */
:root { --brass-text: #7a5b29; }
.eyebrow { color: var(--brass-text); }
.eyebrow::before { background: var(--brass); }
.choice-label, .gc-label, .pr-tag, .steps li > span, .steps.vertical li > span, .wc-num, .timeline span { color: var(--brass-text); }
.featured .pr-tag, .why .wc-num { color: var(--brass-2); }
.choose-ask { display: inline-block; padding: 9px 18px; border-radius: 999px; background: var(--ink-2); color: #f3eee6; border: 1px solid rgba(216, 183, 127, .25); }

/* Where we work ----------------------------------------------------------- */
.markets { position: relative; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; }
.markets::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 500px at 0% 0%, rgba(212, 42, 47, .2), transparent 65%), radial-gradient(800px 500px at 100% 100%, rgba(176, 138, 82, .18), transparent 65%); }
.globe { position: absolute; right: -140px; top: 50%; width: 720px; height: 720px; translate: 0 -50%; color: rgba(216, 183, 127, .16); z-index: -1; animation: spin 120s linear infinite; }
.globe-pins circle { fill: var(--red-2); stroke: rgba(232, 71, 76, .3); stroke-width: 10; }
.markets .sec-head .lead { color: var(--muted-dark); }
.market-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.market { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 40px 34px 34px; color: #fff; transition: background .35s; }
.market + .market { border-left: 1px solid rgba(255, 255, 255, .12); }
.market::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.market:hover { background: rgba(255, 255, 255, .03); }
.market:hover::before { transform: scaleX(1); }
.mk-num { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--brass-2); }
.mk-place { margin-top: 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-2); }
.mk-what { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.025em; line-height: 1.12; }
.mk-desc { color: #c9c3ba; font-size: 15.5px; line-height: 1.6; }
.mk-office { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: #e9e3d9; }
.mk-office .ico { color: var(--brass-2); }
.mk-go { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.mk-go .ico { transition: transform .3s var(--ease); }
.market:hover .mk-go { color: var(--brass-2); }
.market:hover .mk-go .ico { transform: translateX(5px); }
@media (max-width: 980px) {
	.market-grid { grid-template-columns: 1fr; }
	.market + .market { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
	.market { padding: 30px 4px; }
	.globe { width: 520px; height: 520px; right: -220px; top: 30%; }
}