/* ==========================================================================
   Design 3 — BOLD
   Big brand-blue blocks, stacked uppercase type, 2px outlines and hard
   offset shadows. Works with dark / light / mixed tokens.
   ========================================================================== */
:root[data-design="bold"] {
	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 18px;
}
/* Per-element so shadows follow each section's ink/paper colours */
:root[data-design="bold"] * { --hard: 6px 6px 0 var(--text); --hard-sm: 4px 4px 0 var(--text); }

/* ---------- Type: uppercase display ---------- */
:root[data-design="bold"] .section-title,
:root[data-design="bold"] .page-hero__title,
:root[data-design="bold"] .cta__title,
:root[data-design="bold"] .site-footer__title,
:root[data-design="bold"] .stack__title,
:root[data-design="bold"] .srv-row__title,
:root[data-design="bold"] .next-project__title { text-transform: uppercase; font-weight: 600; letter-spacing: -.02em; }
:root[data-design="bold"] .section-title { font-size: clamp(40px, 6.6vw, 104px); line-height: .92; }

/* Kicker → solid blue tag */
:root[data-design="bold"] .kicker { padding: 7px 12px; border-radius: 6px; background: var(--primary); color: #fff; font-weight: 700; letter-spacing: .12em; }
:root[data-design="bold"] .kicker__dot { background: #fff; box-shadow: none; }

/* ---------- Buttons: outlined with hard shadow ---------- */
:root[data-design="bold"] .btn { border-radius: 12px; border: 2px solid var(--text); box-shadow: var(--hard-sm); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), color .3s; }
:root[data-design="bold"] .btn:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--text); }
:root[data-design="bold"] .btn__icon { border-radius: 8px; }
:root[data-design="bold"] .btn:hover .btn__icon { transform: none; }
:root[data-design="bold"] .socials a, :root[data-design="bold"] .theme-toggle { border-radius: 10px; border: 2px solid var(--text); }
:root[data-design="bold"] .burger { border-radius: 10px; }
:root[data-design="bold"] .nav__list { border: 2px solid var(--text); border-radius: 14px; box-shadow: var(--hard-sm); }
:root[data-design="bold"] .nav__list a { border-radius: 9px; font-weight: 700; }
:root[data-design="bold"] .pills li { border: 2px solid var(--text); border-radius: 10px; font-weight: 700; }

/* ---------- Hero: full-bleed blue block ---------- */
.bd-hero {
	--text: #ffffff; --muted: rgba(255, 255, 255, .78); --line: rgba(255, 255, 255, .25); --line-strong: rgba(255, 255, 255, .5);
	--tk-ghost-bg: transparent; --tk-ghost-border: #fff;
	position: relative; min-height: 100svh; overflow: hidden;
	padding: calc(var(--header-h) + 40px) 0 clamp(40px, 5vw, 72px);
	background: var(--primary); color: #fff;
}
.bd-hero__grain { position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px); background-size: 22px 22px; }
.bd-hero .hero__inner { position: relative; display: grid; grid-template-columns: 1fr minmax(260px, 36%); grid-template-rows: auto auto; gap: 24px 40px; align-items: end; }
.bd-hero__title { grid-column: 1; font-size: clamp(64px, 13.5vw, 224px); font-weight: 600; line-height: .82; letter-spacing: -.03em; text-transform: uppercase; color: #fff; }
.bd-hero__title .hero__line { display: block; overflow: hidden; padding-bottom: .03em; }
.bd-hero__outline { color: transparent; -webkit-text-stroke: 2px #fff; }
.bd-dot { font-style: normal; color: var(--ink); }
.bd-card { grid-column: 2; grid-row: 1; align-self: center; margin: 0; padding: 10px; border-radius: 18px; background: #fff; border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); rotate: 4deg; }
.bd-card img { border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.bd-card figcaption { padding: 12px 6px 4px; color: var(--ink); font-weight: 700; }
.bd-card figcaption strong { color: var(--primary); font-family: var(--font-head); font-size: 26px; margin-right: 4px; }
.bd-sticker { position: absolute; right: 30%; top: 0; width: 150px; height: 150px; display: grid; place-items: center; border-radius: 50%; background: #ffd23f; color: var(--ink); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); z-index: 2; }
.bd-sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: bbs-spin 14s linear infinite; }
.bd-sticker text { fill: var(--ink); font: 700 13px var(--font-body); letter-spacing: .18em; }
.bd-sticker > span { font-size: 34px; }
.bd-hero__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: 28px; border-top: 2px solid rgba(255, 255, 255, .35); }
.bd-hero__foot p { max-width: 480px; margin: 0; font-size: var(--fs-lg); color: #fff; }
.bd-hero .btn { --hard-sm: 4px 4px 0 var(--ink); border-color: var(--ink); }
.bd-hero .btn--light { --btn-icon-bg: var(--primary); }
.bd-hero .btn--ghost { color: #fff; border-color: #fff; --hard-sm: 4px 4px 0 var(--ink); }

/* Page hero: blue block too */
:root[data-design="bold"] .page-hero { --text: #fff; --muted: rgba(255, 255, 255, .78); --line: rgba(255, 255, 255, .3); --accent-text: #ffd23f; --pill-bg: transparent; --pill-fg: #fff; --pill-strong-bg: #ffd23f; --pill-strong-fg: #121212;
	--tk-btn-bg: #fff; --tk-btn-fg: #121212; --tk-btn-icon-bg: var(--primary); --tk-btn-icon-fg: #fff; --tk-btn-hover: #ffd23f; --tk-ghost-bg: transparent; --tk-ghost-border: #fff;
	background: var(--primary); color: #fff; border-bottom: 2px solid var(--ink); }
:root[data-design="bold"] .page-hero .btn { border-color: var(--ink); --hard-sm: 4px 4px 0 var(--ink); }
:root[data-design="bold"] .page-hero .pills li { border-color: #fff; }
:root[data-design="bold"] .page-hero .pills li.is-strong { border-color: var(--ink); }
:root[data-design="bold"] .page-hero::before { display: none; }
:root[data-design="bold"] .page-hero__grid-bg { background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px); background-size: 22px 22px; mask-image: none; -webkit-mask-image: none; opacity: .5; }
:root[data-design="bold"] .page-hero .hero-stat__num { color: #ffd23f; }

/* Header sits on blue at the top of every page */
:root[data-design="bold"] .site-header:not(.is-scrolled) { --text: #fff; --line: rgba(255, 255, 255, .5); }
:root[data-design="bold"] .site-header:not(.is-scrolled) .nav__list { background: rgba(255, 255, 255, .12); border-color: #fff; box-shadow: 4px 4px 0 var(--ink); }
:root[data-design="bold"] .site-header:not(.is-scrolled) .nav__list a { color: #fff; }
:root[data-design="bold"] .site-header:not(.is-scrolled) .nav__list .is-active a { background: #fff; color: var(--primary); }
:root[data-design="bold"] .site-header:not(.is-scrolled) .logo__img--light { opacity: 1; }
:root[data-design="bold"] .site-header:not(.is-scrolled) .logo__img--dark { opacity: 0; }
:root[data-design="bold"] .site-header:not(.is-scrolled) .theme-toggle { background: transparent; border-color: #fff; color: #fff; }
:root[data-design="bold"] .site-header:not(.is-scrolled) .site-header__cta { --btn-bg: #fff; --btn-fg: #121212; --btn-icon-bg: var(--primary); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
:root[data-design="bold"] .site-header:not(.is-scrolled) .burger { background: #fff; }
:root[data-design="bold"] .site-header:not(.is-scrolled) .burger span { background: var(--primary); }
:root[data-design="bold"] .nav__list .is-active a { background: var(--primary); color: #fff; }

/* ---------- Marquee: tilted blue band ---------- */
:root[data-design="bold"] .marquee:not(.marquee--logos):not(.marquee--footer) { position: relative; z-index: 2; margin-block: 28px; background: var(--primary); border-block: 2px solid var(--ink); rotate: -2deg; width: 104%; margin-left: -2%; }
:root[data-design="bold"] .marquee:not(.marquee--logos):not(.marquee--footer) .marquee__item { color: #fff; -webkit-text-stroke: 0; text-transform: uppercase; font-weight: 600; }
:root[data-design="bold"] .marquee:not(.marquee--logos):not(.marquee--footer) .marquee__star { background: #ffd23f; }

/* ---------- Cards: outlined + hard shadow ---------- */
:root[data-design="bold"] [data-glow],
:root[data-design="bold"] .faq__card,
:root[data-design="bold"] .mini-card,
:root[data-design="bold"] .form-card,
:root[data-design="bold"] .review__card,
:root[data-design="bold"] .help-band,
:root[data-design="bold"] .stack__inner,
:root[data-design="bold"] .clients__logo { border: 2px solid var(--text); box-shadow: var(--hard); }
:root[data-design="bold"] .why__icon { border-radius: 10px; background: var(--primary); color: #fff; }
:root[data-design="bold"] .why__card:nth-child(3n+2) { background: var(--primary); color: #fff; --muted: rgba(255, 255, 255, .85); }
:root[data-design="bold"] .why__card:nth-child(3n+2) .why__icon { background: #fff; color: var(--primary); }
:root[data-design="bold"] .hwork__media, :root[data-design="bold"] .work-card__media, :root[data-design="bold"] .post-card__media, :root[data-design="bold"] .team__media, :root[data-design="bold"] .wide-media { border: 2px solid var(--text); box-shadow: var(--hard); }
:root[data-design="bold"] .work-card__badge { border-radius: 10px; border: 2px solid var(--ink); }

/* Service rows: giant outline numbers */
:root[data-design="bold"] .srv-row { border-bottom: 2px solid var(--text); }
:root[data-design="bold"] .srv-list__rows { border-top: 2px solid var(--text); }
:root[data-design="bold"] .srv-row__num { font-family: var(--font-head); font-size: clamp(30px, 3vw, 46px); font-weight: 600; color: transparent; -webkit-text-stroke: 1.5px var(--text); }
:root[data-design="bold"] .srv-row__link:hover .srv-row__num { -webkit-text-stroke-color: #fff; }
:root[data-design="bold"] .srv-row__arrow { border-radius: 10px; border: 2px solid var(--text); }

/* Accordion */
:root[data-design="bold"] .accordion, :root[data-design="bold"] .accordion__item { border-color: var(--text); border-width: 2px; }
:root[data-design="bold"] .accordion__icon { border-radius: 10px; border: 2px solid var(--text); }

/* CTA: ink block with blue type */
:root[data-design="bold"] .cta { border-radius: var(--radius-lg); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--primary); background: var(--ink); margin-inline: clamp(12px, 2vw, 28px); }
:root[data-design="bold"] .cta__orb { display: none; }
:root[data-design="bold"] .cta__line--accent { color: var(--primary); }
:root[data-design="bold"] .cta .btn { border-color: #fff; --hard-sm: 4px 4px 0 var(--primary); }

/* Ink bands */
:root[data-design="bold"] .tone-band[data-tone="ink"] { border-radius: var(--radius-lg) !important; }
:root[data-design="bold"] input, :root[data-design="bold"] textarea, :root[data-design="bold"] select { border: 2px solid var(--text); border-radius: 10px; }
:root[data-design="bold"] .wpcf7-submit { border-radius: 12px; border: 2px solid var(--text); box-shadow: var(--hard-sm); }

@media (max-width: 1024px) {
	.bd-hero .hero__inner { grid-template-columns: 1fr; }
	.bd-card { grid-column: 1; grid-row: auto; max-width: 420px; }
	.bd-sticker { right: 6%; top: -10px; width: 112px; height: 112px; }
}
@media (max-width: 767px) {
	.bd-hero__title { font-size: 22vw; }
	.bd-hero__foot { flex-direction: column; align-items: flex-start; }
	.bd-sticker { display: none; }
	:root[data-design="bold"] .site-header:not(.is-scrolled) .logo__img--light { opacity: 1; }
}

/* Logo is all-white on the blue blocks (its blue "B" would vanish) */
:root[data-design="bold"] .site-header:not(.is-scrolled) .logo__img--light { filter: brightness(0) invert(1); }
/* Ghost buttons on blue: white arrow chip */
.bd-hero .btn--ghost, :root[data-design="bold"] .page-hero .btn--ghost { --btn-icon-bg: #fff; --btn-icon-fg: var(--primary); }