/* ROVARD STUDIOS — "Blue Glass" theme (v4). Loaded after site.css, so it overrides it.
   The logo blue (#162DAF) is the primary colour. Surfaces are frosted glass over a soft blue backdrop; yellow is a small accent
   (highlighter strokes, the arrow chip, tags). To go back to the earlier look, delete the theme.css <link> in tools/build.py head(). */

:root {
  --cream: #F3F6FF;
  --butter: #FFF0A8;
  --r: 22px;
  --glass: rgba(255, 255, 255, .58);
  --glass-2: rgba(255, 255, 255, .78);
  --glass-line: rgba(255, 255, 255, .78);
  --blue-line: rgba(22, 45, 175, .16);
  --lift: 0 14px 44px rgba(22, 45, 175, .14), 0 2px 8px rgba(22, 45, 175, .06);
  --lift-lg: 0 24px 70px rgba(22, 45, 175, .22), 0 4px 14px rgba(22, 45, 175, .08);
  --blur: blur(18px) saturate(170%);
  --line: rgba(22, 45, 175, .12);
  --line-2: rgba(22, 45, 175, .2);
  --soft: rgba(255, 255, 255, .55);
  --soft-2: rgba(255, 255, 255, .8);
}
body { background: #E9EFFF; }
/* soft blue backdrop that the glass sits on */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 8% 4%, rgba(61, 131, 251, .42), transparent 70%),
    radial-gradient(45% 40% at 96% 14%, rgba(245, 204, 0, .22), transparent 70%),
    radial-gradient(60% 50% at 70% 62%, rgba(22, 45, 175, .18), transparent 72%),
    radial-gradient(50% 45% at 6% 88%, rgba(116, 163, 255, .35), transparent 70%),
    linear-gradient(180deg, #EEF3FF, #E3EBFF); }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 3px; }
.sub { color: #3F4670; }

/* ── Headline highlighter (yellow accent) ─────────────────────────────── */
.grad, .sp .grad, .dark .grad, .sp .grad .wi, .dark .sp .grad .wi {
  background: linear-gradient(transparent 60%, rgba(245, 204, 0, .85) 60%, rgba(245, 204, 0, .85) 90%, transparent 90%) no-repeat 0 0 / 100% 100%;
  -webkit-background-clip: border-box; background-clip: border-box; color: inherit; -webkit-text-fill-color: currentColor; animation: none;
  transition: background-size .9s var(--out) .45s; padding-inline: .04em; margin-inline: -.04em;
}
.sp .grad { background: none; }
html.js [data-r]:not(.in) .grad, html.js [data-r]:not(.in) .grad .wi { background-size: 0% 100%; }
.dark .grad, .dark .sp .grad .wi { color: #fff; -webkit-text-fill-color: #fff; }

/* ── Buttons: blue glass with a yellow arrow chip ─────────────────────── */
.pill {
  height: 52px; padding: 0 8px 0 26px; border-radius: 16px; color: #fff; border: 1px solid rgba(255, 255, 255, .45);
  background: linear-gradient(180deg, #3355E0 0%, var(--blue) 100%);
  box-shadow: 0 12px 28px rgba(22, 45, 175, .38), 0 2px 6px rgba(22, 45, 175, .25), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .35s var(--out), box-shadow .35s var(--out), filter .25s;
}
.pill:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 18px 38px rgba(22, 45, 175, .45), 0 3px 8px rgba(22, 45, 175, .25), inset 0 1px 0 rgba(255, 255, 255, .5); }
.pill:active { transform: translateY(0); }
.pill .ico { width: 34px; height: 34px; border-radius: 11px; background: var(--yellow); color: var(--ink); }
.pill:hover .ico { transform: rotate(45deg); }
.pill-lg { height: 60px; padding-left: 30px; }
.pill-lg .ico { width: 42px; height: 42px; }
.pill-ghost, .pill-outline {
  color: var(--blue); background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--blue-line); box-shadow: 0 8px 22px rgba(22, 45, 175, .1), inset 0 1px 0 #fff; padding: 0 24px;
}
.pill-ghost { padding: 0 8px 0 24px; }
.pill-ghost:hover, .pill-outline:hover { background: #fff; color: var(--blue); border-color: rgba(22, 45, 175, .35); box-shadow: 0 14px 30px rgba(22, 45, 175, .18), inset 0 1px 0 #fff; filter: none; }
.pill-ghost .ico { background: var(--blue); color: #fff; }
.pill-yellow { background: var(--yellow); color: var(--ink); border-color: rgba(255, 255, 255, .6); box-shadow: 0 12px 28px rgba(245, 204, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pill-yellow .ico { background: var(--ink); color: var(--yellow); }
.pill-line { background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: #fff; border: 1px solid rgba(255, 255, 255, .5); box-shadow: none; }
.pill-line:hover { background: #fff; color: var(--blue); }
.pill-line .ico { background: rgba(255, 255, 255, .22); color: #fff; }
.pill-line:hover .ico { background: var(--blue); color: #fff; }
.pill-sm { height: 48px; }
.bar-cta { height: 46px; font-size: 13px; }
.arrow-c { border: 1px solid var(--blue-line); border-radius: 12px; background: rgba(255, 255, 255, .6); color: var(--blue); }
.link { border-bottom-color: var(--yellow); }

/* ── Header + menu ────────────────────────────────────────────────────── */
.site-header { background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 6px 30px rgba(22, 45, 175, .08); }
.menu-btn { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(#fff, rgba(255, 255, 255, .6)); border: 1px solid var(--glass-line); box-shadow: 0 8px 22px rgba(22, 45, 175, .16); }
.menu-btn span { background: var(--blue); left: 17px; right: 17px; height: 2px; }
.menu-btn span:nth-child(1) { top: 20px; } .menu-btn span:nth-child(2) { top: 29px; left: 22px; }
.menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); box-shadow: none; }
.menu-btn[aria-expanded="true"] span { background: #fff; left: 17px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
.menu-open .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
.menu-open .logo .lg-b { display: none; }
.menu-open .logo .lg-w { display: block; }
.menu-open .site-header .bar-cta { background: var(--yellow); color: var(--ink); border-color: rgba(255, 255, 255, .6); }
.menu-open .site-header .bar-cta .ico { background: var(--ink); color: var(--yellow); }
.menu-panel { background: radial-gradient(70% 60% at 85% 0%, rgba(116, 163, 255, .55), transparent 65%), radial-gradient(60% 50% at 0% 100%, rgba(245, 204, 0, .2), transparent 65%), linear-gradient(160deg, #1B35C4, var(--deep)); color: #fff; }
.menu-panel nav a.m { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.menu-panel nav a.m small { color: rgba(255, 255, 255, .6); }
.menu-panel nav a.m:hover { color: #fff; background: rgba(255, 255, 255, .12); padding-left: 18px; border-radius: 14px; }
.menu-panel nav a.m { transition: opacity .6s var(--out), transform 1s var(--out), padding .35s var(--out), background-color .3s; }
.menu-panel .menu-foot { color: rgba(255, 255, 255, .78); }
.menu-panel .menu-foot a { color: #fff; font-weight: 600; }
.menu-panel .menu-foot .pill { background: var(--yellow); color: var(--ink); border-color: rgba(255, 255, 255, .6); box-shadow: 0 12px 28px rgba(0, 0, 40, .35); }
.menu-panel .menu-foot .pill .ico { background: var(--ink); color: var(--yellow); }
.menu-panel :focus-visible { outline-color: var(--yellow); }

/* ── Type bits ────────────────────────────────────────────────────────── */
.eyebrow { color: var(--blue); font-weight: 700; }
.eyebrow::before { content: ""; width: 9px; height: 9px; background: var(--yellow); border-radius: 50%; flex: none; box-shadow: 0 0 0 4px rgba(245, 204, 0, .25); }
.dark .eyebrow, #large-format .eyebrow { color: rgba(255, 255, 255, .8); }

/* ── Page heads ───────────────────────────────────────────────────────── */
.ph { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15)); border-bottom: 1px solid rgba(255, 255, 255, .7); }
.ph .lead { color: var(--ink); }

/* ── Home hero ────────────────────────────────────────────────────────── */
.hero2 { background: transparent; border-bottom: 0; overflow: hidden; padding-top: clamp(40px, 5.5vw, 84px); }
.hero2-in { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero2 .eyebrow { justify-content: center; }
.hero2 .h1 { font-size: clamp(2.6rem, 6.4vw, 6.2rem); line-height: 1.02; max-width: 15ch; margin-inline: auto; }
.hero2 .hero-we { margin-top: 22px; min-height: 0; display: inline-block; padding: 12px 24px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); border-radius: 18px; box-shadow: var(--lift); font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
.hero2 .hero-we .rt { background: none; padding: 0; margin: 0; }
.hero2 .hero-we .rt.grad { background: linear-gradient(transparent 60%, rgba(245, 204, 0, .85) 60%, rgba(245, 204, 0, .85) 92%, transparent 92%); }
.hero2 .lead { margin: 26px auto 0; max-width: 52ch; text-align: center; font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.hero2 .cta-row { justify-content: center; margin-top: 30px; }
.hero2 .hero-proof { justify-content: center; margin: 26px 0 6px; font-size: 16px; color: var(--ink); }
.hero2 .hero-proof i { background: var(--blue); border-radius: 50%; }
.hero2 .hero-note { color: #4A5280; }
.hero-reel { margin-top: clamp(36px, 5vw, 64px); display: grid; gap: 16px; padding-bottom: clamp(32px, 4vw, 56px); }
.reel-row { display: flex; gap: 16px; width: max-content; animation: marqH 80s linear infinite; }
.reel-row.rev { animation-direction: reverse; animation-duration: 95s; }
.hero-reel:hover .reel-row { animation-play-state: paused; }
.rcard { position: relative; flex: none; width: clamp(180px, 19vw, 280px); aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--glass-line); box-shadow: var(--lift); }
.rcard img { width: 100%; height: 100%; object-fit: cover; }
.rcard span { position: absolute; left: 10px; bottom: 10px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); color: var(--blue); border-radius: 10px; font: 700 12px/1 var(--body); padding: 7px 10px; }
@media (prefers-reduced-motion: reduce) { .reel-row { animation: none; } .hero-reel { overflow-x: auto; } }

/* ── Logo strip: glass tiles on a blue band ───────────────────────────── */
.logos { padding: 0; background: linear-gradient(180deg, rgba(22, 45, 175, .92), rgba(0, 9, 133, .92)); text-align: left; }
.logos .wrap { padding-top: 26px; }
.logos .eyebrow { text-align: left; margin-bottom: 16px; color: rgba(255, 255, 255, .85); }
.logo-marq { overflow: hidden; padding: 4px 0 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-track { display: flex; gap: 16px; width: max-content; animation: marqH 45s linear infinite; }
.logo-marq:hover .logo-track { animation-play-state: paused; }
.lg-tile { flex: none; display: grid; place-items: center; min-width: 180px; height: 92px; padding: 0 28px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px; box-shadow: 0 10px 28px rgba(0, 0, 60, .28); }
.lg-tile .lg { max-width: 160px; max-height: 44px; width: auto; height: auto; }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; width: auto; padding-inline: var(--gut); } .lg-tile[aria-hidden] { display: none; } }

/* ── Film, marquee ────────────────────────────────────────────────────── */
.film { box-shadow: var(--lift-lg); border: 1px solid rgba(255, 255, 255, .5); }
.marquee { background: linear-gradient(90deg, var(--blue), #2A47D6, var(--blue)); border: 0; }
.marquee span { color: #fff; }
.marquee span::after { background: var(--yellow); }

/* ── Need / service rows → glass tiles ────────────────────────────────── */
.rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 0; counter-reset: rw; }
.row { counter-increment: rw; position: relative; padding: 22px 20px 22px 24px; border-radius: 20px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: var(--lift); font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.25; min-height: 100px; transition: transform .35s var(--out), box-shadow .35s var(--out), background-color .3s, color .3s; }
.row::before { content: counter(rw, decimal-leading-zero); position: absolute; top: 10px; left: 24px; font: 700 11px/1 var(--body); letter-spacing: .12em; color: var(--blue); opacity: .6; }
.row > span { padding-top: 14px; }
.row:hover { padding-left: 24px; transform: translateY(-4px); box-shadow: var(--lift-lg); background: linear-gradient(180deg, #3355E0, var(--blue)); color: #fff; border-color: rgba(255, 255, 255, .5); }
.row:hover::before { color: #fff; }
.row:hover .arrow-c { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.row.hl { background: linear-gradient(180deg, rgba(22, 45, 175, .9), rgba(0, 9, 133, .9)); color: #fff; }
.row.hl::before { color: #fff; }
.row.hl .arrow-c { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .5); color: #fff; }
@media (max-width: 1000px) { .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rows { grid-template-columns: minmax(0, 1fr); } }

/* ── Cards ────────────────────────────────────────────────────────────── */
.pcard { border: 1px solid rgba(255, 255, 255, .55); border-radius: 26px; box-shadow: var(--lift); transition: transform .4s var(--out), box-shadow .4s var(--out); }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--lift-lg); }
.pcard .tagc { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); border-radius: 10px; color: var(--blue); }
.car-track { padding-block: 10px 18px; }
.car-bar { background: rgba(22, 45, 175, .14); height: 5px; border-radius: 5px; }
.car-bar i { background: var(--blue); border-radius: 5px; }
.car-btn { border: 1px solid var(--glass-line); border-radius: 50%; background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--blue); box-shadow: var(--lift); }
.car-btn:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
.two { border: 1px solid var(--glass-line); border-radius: 28px; box-shadow: var(--lift); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.way, .way + .way { background: transparent; }
.way + .way { background: rgba(61, 131, 251, .1); border-left: 1px solid var(--glass-line); }
.chip { background: rgba(255, 255, 255, .75); border: 1px solid var(--glass-line); color: var(--blue); }
.story-grid figure, .mini .mi, .collage figure, .wc-media, .post-cover .wc-media, .hero-img { border: 1px solid rgba(255, 255, 255, .6); border-radius: 22px; box-shadow: var(--lift); }
.story-grid figcaption, .collage figcaption { background: rgba(255, 255, 255, .75); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); border-radius: 10px; color: var(--blue); }
.s-n { background: var(--blue); color: #fff; }
.acard { border: 1px solid var(--glass-line); border-radius: 22px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--lift); }
.cards-row { padding: 6px 8px 14px; }
.acard.blue { background: linear-gradient(160deg, rgba(22, 45, 175, .95), rgba(0, 9, 133, .95)); color: #fff; border-color: rgba(255, 255, 255, .3); }
.acard p { color: #3F4670; }
.acard.blue p { color: rgba(255, 255, 255, .85); }
.acard.photo figcaption { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); border-radius: 10px; color: var(--blue); }
.wcard:hover .wc-media { box-shadow: var(--lift-lg); }
.pf { border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--blue); box-shadow: 0 6px 18px rgba(22, 45, 175, .08); }
.pf.is-on, .pf:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ── Why: glass tiles ─────────────────────────────────────────────────── */
.acc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; height: auto; }
.pan { flex: none; display: flex; flex-direction: column; cursor: default; border: 1px solid var(--glass-line); border-radius: 26px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--ink); box-shadow: var(--lift); isolation: auto; }
.pan.open { flex: none; }
.pan img { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; z-index: 0; object-fit: cover; transform: none !important; }
.pan::before { display: none; }
.pan .pn { top: 14px; left: 14px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); border-radius: 10px; padding: 6px 10px; color: var(--blue); z-index: 2; }
.pan .pp { display: none; }
.pan .pbd { position: static; padding: 22px 24px 28px; }
.pan h3, .pan.open h3 { font: 600 clamp(1.3rem, 1.8vw, 1.6rem)/1.2 var(--display); letter-spacing: -.02em; max-width: none; }
.pan p, .pan.open p { color: #3F4670; max-height: none; opacity: 1; margin-top: 10px; max-width: none; overflow: visible; }
@media (max-width: 900px) { .acc { grid-template-columns: minmax(0, 1fr); } .pan img { aspect-ratio: 16 / 9; } }
.stats { border-top: 1px solid var(--blue-line); }
.stat { border-left: 1px solid var(--blue-line); }
.stat b { font-weight: 700; color: var(--blue); }
.stat span { color: #3F4670; }

/* ── Blue large-format + dark sections ────────────────────────────────── */
.dark, #large-format { background: radial-gradient(70% 60% at 85% 0%, rgba(116, 163, 255, .45), transparent 65%), radial-gradient(60% 50% at 0% 100%, rgba(245, 204, 0, .14), transparent 65%), linear-gradient(160deg, #1B35C4, var(--deep)); color: #fff; }
#large-format .big { font-size: clamp(2.2rem, 4.3vw, 4rem); }
#large-format .soon { background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 22px; }
#large-format .pill-yellow { background: var(--yellow); color: var(--ink); border-color: rgba(255, 255, 255, .6); }
#large-format .collage figure { border-color: rgba(255, 255, 255, .45); }
#large-format :focus-visible { outline-color: var(--yellow); }

/* ── Steps ────────────────────────────────────────────────────────────── */
.steps li { border-top: 1px solid var(--blue-line); }
.steps li::before { top: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(245, 204, 0, .25); }
.steps .n { background: var(--glass-2) !important; -webkit-text-fill-color: var(--blue) !important; color: var(--blue); display: inline-block; padding: 8px 16px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); border-radius: 16px; font-size: clamp(1.6rem, 2.2vw, 2rem); box-shadow: var(--lift); animation: none; }
.steps p { color: #3F4670; }
.asks-list li, .asks li, .asks-wide li { border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 6px 16px rgba(22, 45, 175, .07); }
.asks-list li:hover { background: var(--blue); color: #fff; }
.asks-list li:hover a { color: #fff; }

/* ── Closing band ─────────────────────────────────────────────────────── */
.close { background: radial-gradient(70% 60% at 90% 0%, rgba(116, 163, 255, .5), transparent 65%), radial-gradient(60% 60% at 0% 100%, rgba(245, 204, 0, .16), transparent 65%), linear-gradient(160deg, #1B35C4, var(--deep)); color: #fff; }
.close .big, .close .h2 { color: #fff; }
.close .sub, .close-note { color: rgba(255, 255, 255, .82); }
.close .grad { color: #fff; -webkit-text-fill-color: #fff; }
.close .pill:not(.pill-outline) { background: var(--yellow); color: var(--ink); border-color: rgba(255, 255, 255, .6); box-shadow: 0 12px 28px rgba(0, 0, 50, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.close .pill:not(.pill-outline) .ico { background: var(--ink); color: var(--yellow); }
.close .pill-outline { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .5); }
.close .pill-outline:hover { background: #fff; color: var(--blue); }
.close :focus-visible { outline-color: var(--yellow); }
.close-r { border-left: 0; padding-left: 0; }
.close-r .wc-media { border: 1px solid rgba(255, 255, 255, .5); border-radius: 26px; box-shadow: 0 30px 70px rgba(0, 0, 60, .4); transform: rotate(1.2deg); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-sec { background: transparent; border-top: 0; }
.faq-list { display: grid; gap: 14px; }
.faq-i, .faq-i:first-child { border: 1px solid var(--glass-line); border-radius: 20px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--lift); overflow: hidden; }
.faq-i summary { padding: 20px 24px; }
.faq-i summary:hover { color: var(--blue); background: rgba(255, 255, 255, .5); border-radius: 0; }
.faq-i[open] summary { background: rgba(22, 45, 175, .08); border-bottom: 1px solid var(--blue-line); border-radius: 0; color: var(--blue); }
.faq-ico { border: 1px solid var(--blue-line); border-radius: 50%; background: #fff; color: var(--blue); }
.faq-i[open] .faq-ico { background: var(--blue); color: #fff; }
.faq-i p { padding: 18px 24px 24px; color: #3F4670; }

/* ── Pricing ──────────────────────────────────────────────────────────── */
.pk-grid .pk { border: 1px solid var(--glass-line); border-radius: 26px; box-shadow: var(--lift); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--ink); transition: transform .4s var(--out), box-shadow .4s var(--out); }
.pk-grid .pk:hover { transform: translateY(-5px); box-shadow: var(--lift-lg); }
.pk-grid .pk:nth-child(-n+3) { background: var(--glass); }
.pk-grid .pk:nth-child(n+4):nth-child(-n+6) { background: linear-gradient(160deg, rgba(116, 163, 255, .32), rgba(61, 131, 251, .16)); border-color: rgba(255, 255, 255, .8); }
.pk-grid .pk:nth-child(n+4):nth-child(-n+6) .pk-who { color: #2F3868; }
.pk-grid .pk li::before, .pk-grid .pk:nth-child(n+4):nth-child(-n+6) li::before { border-color: var(--blue); }
.pk-grid .pk .pk-who { color: #3F4670; }
.pk-grid .pk:nth-child(n+7) { background: linear-gradient(160deg, rgba(27, 53, 196, .96), rgba(0, 9, 133, .96)); border-color: rgba(255, 255, 255, .35); color: #fff; }
.pk-grid .pk:nth-child(n+7) .pk-who { color: rgba(255, 255, 255, .8); }
.pk-grid .pk:nth-child(n+7) li::before { border-color: var(--yellow); }
.pk-grid .pk:nth-child(n+7) .pill-outline { background: var(--yellow); color: var(--ink); border-color: rgba(255, 255, 255, .6); }
.pk-price b { font-weight: 700; }
.pk-grid .pk .pill-outline { background: var(--blue); color: #fff; border-color: rgba(255, 255, 255, .45); box-shadow: 0 10px 24px rgba(22, 45, 175, .3); }
.pk-grid .pk .pill-outline:hover { background: #2441C9; color: #fff; }
.pk-grid .pk:nth-child(n+7) .pill-outline:hover { background: #FFD81A; color: var(--ink); }

/* ── Blog + projects ──────────────────────────────────────────────────── */
.bband { background: linear-gradient(120deg, rgba(27, 53, 196, .96), rgba(0, 9, 133, .96)); color: #fff; border: 1px solid rgba(255, 255, 255, .35); box-shadow: var(--lift-lg); border-radius: 26px; }
.bband p { opacity: 1; color: rgba(255, 255, 255, .85); }
.bmeta h2 a:hover, .wc-meta a:hover { color: var(--blue); }
.post-body li::marker, .tick li::before { color: var(--blue); border-color: var(--blue); }
.pk li::before { border-color: var(--blue); }
.post-body h2 { background: linear-gradient(transparent 62%, rgba(245, 204, 0, .35) 62%) no-repeat 0 0 / auto 100%; display: inline-block; }
.pf, .kt { color: var(--blue); }

/* ── Start page ───────────────────────────────────────────────────────── */
.talk2 { padding-block: clamp(36px, 5vw, 72px) var(--sec); background: transparent; border-bottom: 0; }
.talk2-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; }
.talk2-side { position: sticky; top: calc(var(--head-h) + 20px); background: radial-gradient(80% 60% at 100% 0%, rgba(116, 163, 255, .5), transparent 65%), linear-gradient(160deg, #1B35C4, var(--deep)); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 30px; box-shadow: var(--lift-lg); padding: clamp(24px, 3vw, 40px); }
.talk2-side .nrf { font-size: clamp(1.1rem, 1.5vw, 1.35rem); display: inline-block; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: #fff; border: 1px solid rgba(255, 255, 255, .4); border-radius: 16px; padding: 8px 16px; margin-bottom: 20px; }
.talk2-side .big { font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.02; max-width: none; text-align: left; color: #fff; }
.talk2-side .grad, .talk2-side .sp .grad .wi { color: #fff; -webkit-text-fill-color: #fff; }
.talk2-side .talk-sub { margin-top: 18px; font-size: clamp(1.05rem, 1.3vw, 1.2rem); max-width: 38ch; color: rgba(255, 255, 255, .88); }
.talk2-side .talk-sub a { text-decoration-color: var(--yellow); color: #fff; }
.talk2-side .alt { margin: 26px 0 0; max-width: none; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.talk2-side .alt-card { background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid rgba(255, 255, 255, .35); border-radius: 18px; padding: 16px 64px 16px 18px; color: #fff; }
.talk2-side .alt-card b { font-size: 18px; color: #fff; }
.talk2-side .alt-card small { color: rgba(255, 255, 255, .75); }
.talk2-side .alt-card:hover { background: rgba(255, 255, 255, .26); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 60, .3); border-color: rgba(255, 255, 255, .6); }
.talk2-side .alt-card .arrow-c { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); color: #fff; }
.talk2-side .alt-card:hover .arrow-c { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.side-h { margin-top: 30px; font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.side-steps { margin-top: 14px; display: grid; gap: 12px; }
.side-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.side-steps .n { display: grid; place-items: center; width: 40px; height: 40px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .4); color: #fff; border-radius: 13px; font: 700 14px/1 var(--body); }
.side-steps h3 { font: 600 17px/1.25 var(--display); color: #fff; }
.side-steps p { font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .8); }
.talk2-main { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); border-radius: 30px; box-shadow: var(--lift-lg); padding: clamp(22px, 3vw, 44px); }
.talk2 .tform { max-width: none; margin: 0; }
.f label, .f .lab { color: var(--blue); margin-left: 6px; }
.f input, .f textarea { background: rgba(255, 255, 255, .7); border: 1px solid var(--blue-line); border-radius: 18px; padding: 18px 22px; font-size: 18px; box-shadow: inset 0 1px 2px rgba(22, 45, 175, .06); }
.f textarea { border-radius: 20px; }
.f input:focus, .f textarea:focus { background: #fff; border-color: var(--blue-2); box-shadow: 0 0 0 4px rgba(61, 131, 251, .2); }
.seg { background: transparent; padding: 0; gap: 10px; }
.pick span { border: 1px solid var(--blue-line); border-radius: 14px; background: rgba(255, 255, 255, .7); padding: 12px 18px; font-size: 16px; color: #2F3868; }
.pick:hover span { background: #fff; }
.pick input:checked + span { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 10px 22px rgba(22, 45, 175, .3); }
.pick input:focus-visible + span { outline: 3px solid var(--blue-2); outline-offset: 2px; }
.form-error { text-align: left; }
.form-done { border: 1px solid var(--glass-line); border-radius: 24px; background: var(--glass-2); box-shadow: var(--lift); padding: 28px; }
@media (max-width: 960px) { .talk2-grid { grid-template-columns: minmax(0, 1fr); } .talk2-side { position: static; } }

/* ── Footer (deep blue) ───────────────────────────────────────────────── */
.site-footer { background: radial-gradient(70% 60% at 90% 0%, rgba(116, 163, 255, .4), transparent 65%), linear-gradient(170deg, #1B35C4, var(--deep) 70%); color: #fff; border-top: 0; padding-top: 0; }
.foot-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; padding-block: clamp(48px, 6vw, 88px) clamp(32px, 4vw, 56px); border-bottom: 1px solid rgba(255, 255, 255, .22); margin-bottom: clamp(32px, 4vw, 56px); }
.foot-big { font: 600 clamp(2.4rem, 6vw, 5.4rem)/1 var(--display); letter-spacing: -.03em; max-width: 12ch; color: #fff; }
.foot-top-r { display: grid; gap: 18px; justify-items: start; }
.foot-mail { font: 600 clamp(1.1rem, 1.8vw, 1.6rem)/1.2 var(--display); border-bottom: 3px solid var(--yellow); padding-bottom: 3px; color: #fff; }
.foot-mail:hover { color: var(--yellow); }
.foot-col h2 { color: var(--yellow); }
.foot-col a, .foot-svc .svc-cols a { color: #fff; }
.foot-col a:hover, .foot-svc .svc-cols a:hover { color: var(--yellow); }
.foot-brand p { color: rgba(255, 255, 255, .88); }
.foot-brand .foot-contact { color: rgba(255, 255, 255, .72); margin-top: 0; }
.foot-base { border-top: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .75); }
.foot-legal a:hover, .lang a:hover { color: var(--yellow); }
.lang a[aria-current] { color: var(--yellow); }
.site-footer .pill { background: var(--yellow); color: var(--ink); border-color: rgba(255, 255, 255, .6); box-shadow: 0 12px 28px rgba(0, 0, 50, .35); }
.site-footer .pill .ico { background: var(--ink); color: var(--yellow); }
.site-footer .grad, .site-footer .sp .grad .wi { color: #fff; -webkit-text-fill-color: #fff; }
.site-footer :focus-visible { outline-color: var(--yellow); }

/* ── Misc ─────────────────────────────────────────────────────────────── */
.wa-fab { border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 12px 28px rgba(31, 175, 83, .4); }
.sticky-cta { box-shadow: 0 14px 34px rgba(22, 45, 175, .45); }
.lightbox { background: rgba(10, 12, 36, .92); }
.prose a, .post-body a { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
.unsure { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); border-radius: 26px; box-shadow: var(--lift); }
.svc-body .more { color: var(--blue); }
html.js .row[data-r], html.js .pk[data-r], html.js .pan[data-r], html.js .faq-i[data-r] { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.asks-list li { padding: 10px 16px; line-height: 1.35; font-size: 15px; }
.site-footer { border-top: 1px solid rgba(255, 255, 255, .25); }

/* headings on blue surfaces are always white */
.bband .h3, .bband h2, .bband h3, .close h2, .close h3, .logos h2, .logos h3, .site-footer h2, .site-footer h3,
.talk2-side h1, .talk2-side h2, .talk2-side h3, .acard.blue h3, .row.hl, .pk-grid .pk:nth-child(n+7) h2, .pk-grid .pk:nth-child(n+7) h3,
.pk-grid .pk:nth-child(n+7) .pk-price, .pk-grid .pk:nth-child(n+7) .pk-price b, .dark h1, .dark h2, .dark h3, #large-format h1, #large-format h2, #large-format h3 { color: #fff; }
.row:hover { color: #fff; }
.foot-col h2 { color: var(--yellow); }
.side-h { color: var(--yellow); }

/* hero: 3D wireframe sculpture behind the headline (moves with the cursor) */
.hero2-stage { position: relative; }
.hero-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: .85; }
.hero2-in { position: relative; z-index: 1; }

/* hero: the original layout (kicker, big left-aligned title, copy bottom-left, round link bottom-right, scroll line) */
.hero-orig .hero2-stage { min-height: calc(100svh - 0px); display: flex; }
.hero-orig-in { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; text-align: left; padding-top: clamp(96px, 12vh, 150px); padding-bottom: clamp(40px, 6vh, 72px); }
.hero-kicker { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; display: flex; gap: 12px; align-items: center; color: var(--blue); font-weight: 600; }
.hero-kicker span { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.hero-title-wrap { margin: 5vh 0 4vh; }
.hero-orig .eyebrow { justify-content: flex-start; }
.hero-orig .hero-title { font-size: clamp(2.7rem, 7vw, 7.6rem); line-height: .98; letter-spacing: -.045em; max-width: none; margin: 0; text-align: left; }
.hero-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
.hero-copy-col { max-width: 560px; }
.hero-orig .hero-we { margin-top: 0; }
.hero-orig .lead { text-align: left; margin: 20px 0 0; max-width: 48ch; }
.hero-orig .cta-row { justify-content: flex-start; margin-top: 22px; }
.hero-orig .hero-proof { justify-content: flex-start; margin: 20px 0 0; }
.round-link { width: 128px; height: 128px; border-radius: 50%; display: grid; place-content: center; gap: 9px; text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--blue); background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: var(--lift); transition: transform .4s var(--out), background-color .3s, color .3s; }
.round-link:hover { background: var(--blue); color: #fff; transform: translateY(-4px); }
.round-link b { font-size: 1.3rem; font-weight: 400; }
.hero-scroll { position: absolute; bottom: 18px; left: 50%; width: 1px; height: 48px; background: rgba(22, 45, 175, .2); overflow: hidden; }
.hero-scroll span { display: block; height: 30%; background: var(--blue); animation: scrollLine 1.7s ease-in-out infinite; }
@keyframes scrollLine { 0% { transform: translateY(-100%); } 100% { transform: translateY(340%); } }
@media (max-width: 760px) { .hero-bottom { grid-template-columns: 1fr; } .round-link { width: 100px; height: 100px; justify-self: end; } .hero-orig .hero-title { font-size: clamp(2.3rem, 10.5vw, 4rem); } .hero-scroll { display: none; } }
.hero-orig .hero-title { font-size: clamp(2.6rem, 5.6vw, 6.6rem); }
.hero-orig-in { padding-top: clamp(84px, 10vh, 120px); padding-bottom: clamp(32px, 4vh, 56px); }
.hero-title-wrap { margin: 3.5vh 0 3vh; }
.hero-orig .lead { font-size: clamp(1rem, 1.2vw, 1.15rem); }
.hero-orig .hero-proof { margin-top: 14px; }