:root {
	--ink: #171931;
	--text: #343852;
	--muted: #667088;
	--blue: #6258e8;
	--cyan: #28bce8;
	--purple: #9d65ed;
	--bg: #f7f8fc;
	--border: #e2e5f0;
	--radius: 20px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-width: 320px;
	font: 17px/1.7 Inter,'Segoe UI',Arial,sans-serif;
	background: white;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
}

a {
	text-decoration: none;
	color: inherit;
}

img {
	max-width: 100%;
	display: block;
}

button,input,select,textarea {
	font: inherit;
}

button {
	cursor: pointer;
}

h1,h2,h3,p {
	margin-top: 0;
}

h1,h2,h3 {
	color: var(--ink);
	letter-spacing: -.05em;
	line-height: 1.1;
}

h1 {
	font-size: clamp(3.4rem,6vw,6.5rem);
}

h2 {
	font-size: clamp(2.55rem,4.7vw,5rem);
}

h3 {
	font-size: 1.48rem;
}

h1 em,h2 em {
	font-style: normal;
	color: var(--blue);
}

svg {
	width: 1.14em;
	height: 1.14em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.85;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

:focus-visible {
	outline: 3px solid var(--cyan);
	outline-offset: 4px;
}

::selection {
	background: #dcd5ff;
	color: #1b1939;
}

.container {
	width: min(1230px,calc(100% - 68px));
	margin: auto;
}

.section-padding {
	padding: 110px 0;
}

.eyebrow {
	display: inline-flex;
	gap: 9px;
	color: var(--blue);
	letter-spacing: .15em;
	font-size: .74rem;
	text-transform: uppercase;
	font-weight: 850;
}

.eyebrow.light {
	color: #bbb4ff;
}

.section-heading {
	margin-bottom: 45px;
}

.section-heading.center {
	text-align: center;
	max-width: 850px;
	margin: 0 auto 54px;
}

.section-heading h2 {
	margin: 17px 0 18px;
}

.section-heading p {
	font-size: 1.06rem;
	color: var(--muted);
	line-height: 1.85;
	max-width: 660px;
}

.section-heading.center p {
	margin-left: auto;
	margin-right: auto;
}

.section-heading.split {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 65px;
	align-items: end;
}

.section-heading.split h2 {
	margin-bottom: 0;
}

.pill {
	display: inline-block;
	font-size: .74rem;
	padding: 8px 16px;
	background: #e9e5ff;
	border: 1px solid #dcd6ff;
	border-radius: 30px;
	color: #574bc7;
	letter-spacing: .11em;
	font-weight: 900;
}

.gradient-text {
	background: linear-gradient(104deg,#25badd,#605fec 52%,#a85ce9);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.btn {
	display: inline-flex;
	gap: 13px;
	align-items: center;
	justify-content: center;
	min-height: 55px;
	border: 1px solid transparent;
	border-radius: 45px;
	padding: 13px 25px;
	font-size: .92rem;
	font-weight: 800;
	white-space: nowrap;
	transition: transform .25s,box-shadow .25s;
}

.btn:hover {
	transform: translateY(-3px);
}

.btn-primary {
	color: white;
	background: linear-gradient(105deg,#27bfe6,#655aeb 70%,#9f60eb);
	box-shadow: 0 12px 26px #5a55d341;
}

.btn-outline {
	background: #fff;
	border-color: #cfd4e4;
	color: #262947;
}

.btn-white {
	background: white;
	color: #29234d;
}

.text-cta,.text-link {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	color: var(--blue);
	font-weight: 850;
}

.text-link {
	font-size: .86rem;
}

.text-cta:hover,.text-link:hover {
	gap: 17px;
}

.section-after {
	text-align: center;
	margin-top: 39px;
}

.skip-link {
	position: fixed;
	top: -100px;
	left: 12px;
	padding: 10px;
	background: #14172c;
	color: white;
	z-index: 10000;
}

.skip-link:focus {
	top: 12px;
}
/* header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: #ffffffed;
	backdrop-filter: blur(18px);
	border-bottom: 1px solid #e5e6ee;
}

.nav-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 88px;
	gap: 20px;
}

.brand {
	flex-shrink: 0;
}

.brand img {
	width: 205px;
	height: auto;
}

.desktop-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 27px;
}

.nav-link {
	font-size: .89rem;
	font-weight: 800;
	border: 0;
	background: transparent;
	padding: 30px 0;
	color: #434866;
}

.nav-link.active,.nav-link:hover {
	color: var(--blue);
}

.nav-services {
	position: relative;
}

.nav-trigger {
	display: flex;
	gap: 6px;
	align-items: center;
}

.chevron {
	font-size: 1.4rem;
	line-height: .6;
}

.dropdown {
	position: absolute;
	top: 100%;
	left: -17px;
	width: 295px;
	background: white;
	border-radius: 16px;
	border: 1px solid #dddff0;
	padding: 12px;
	box-shadow: 0 20px 55px #191b4436;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition: all .18s;
}

.nav-services:hover .dropdown,.nav-services:focus-within .dropdown,.nav-services.open .dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.dropdown a {
	display: flex;
	justify-content: space-between;
	padding: 9px 11px;
	font-weight: 700;
	font-size: .88rem;
	border-radius: 9px;
}

.dropdown a:hover {
	background: #f1efff;
	color: var(--blue);
}

.dropdown-all {
	border-top: 1px solid var(--border);
}

.nav-cta {
	min-height: 46px;
	padding: 10px 21px;
	font-size: .84rem;
}

.mobile-menu-btn {
	display: none;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	border: 1px solid var(--border);
	background: white;
}

.mobile-menu-btn svg {
	width: 23px;
	height: 23px;
}

/* Theme-matched drawer: slide from the right with a soft fade. */
.mobile-menu-backdrop {
  position:fixed;inset:0;z-index:499;background:rgb(23 25 49 / 45%);
  opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s;
  backdrop-filter:blur(4px);
}
.mobile-nav {
  position:fixed;inset:0 0 0 auto;z-index:500;
  width:min(88vw,390px);height:100dvh;max-height:100dvh;
  padding:24px 26px max(28px,env(safe-area-inset-bottom));
  background:radial-gradient(circle at 100% 0%,#dcd8ff,transparent 55%),linear-gradient(155deg,#fbfaff,#f0efff 65%,#e4f8fe);
  border-left:1px solid var(--border);box-shadow:-16px 0 60px rgb(23 25 49 / 14%);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateX(100%);
  transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .32s ease,visibility .38s;
}
.mobile-nav[hidden]{display:none}
.mobile-menu-open {overflow:hidden}
.mobile-menu-open .mobile-menu-backdrop{opacity:1;visibility:visible}
.mobile-menu-open .mobile-nav{opacity:1;visibility:visible;transform:translateX(0)}
.mobile-nav-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;color:var(--ink);font-size:.8rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.mobile-menu-close{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border:1px solid #6258e830;border-radius:50%;background:#ffffffa6;color:var(--blue);font:30px/1 Arial;cursor:pointer}
.mobile-nav a{display:block;padding:11px 10px;border-bottom:1px solid #6258e81a;color:var(--ink);font-weight:750;border-radius:8px;transition:background .2s,color .2s}
.mobile-nav a:hover,.mobile-nav a[aria-current="page"]{background:#6258e812;color:var(--blue)}
.mobile-nav a.subnav{font-size:.86rem;padding:8px 10px 8px 24px;color:var(--muted);font-weight:550}
.mobile-nav .wh-mobile-contact{margin-top:24px;padding-top:16px;border-top:1px solid #6258e830}
.mobile-nav .wh-mobile-contact a{font-size:.86rem;color:var(--blue);overflow-wrap:anywhere}
.mobile-menu-btn svg{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.mobile-nav a:focus-visible,.mobile-menu-close:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.mobile-nav,.mobile-menu-backdrop{transition:none}}
/* hero */
.hero {
	background: radial-gradient(circle at 90% 15%,#dcd8ff,transparent 38%),radial-gradient(circle at 30% 95%,#e4f8fe,transparent 34%),linear-gradient(125deg,#fbfaff,#f4f3ff);
	overflow: hidden;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	min-height: 700px;
	align-items: center;
	padding: 70px 0;
}

.hero-copy {
	z-index: 1;
}

.hero h1 {
	font-size: clamp(3.7rem,6vw,6.8rem);
	line-height: 1.02;
	letter-spacing: -.075em;
	margin: 22px 0 24px;
}

.hero-lead {
	max-width: 585px;
	color: #676e88;
	font-size: 1.12rem;
	line-height: 1.85;
}

.hero-ctas {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
	margin-top: 30px;
}

.hero-proof {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 58px;
	font-size: .81rem;
	color: #717a96;
	font-weight: 600;
}

.proof-line {
	width: 42px;
	height: 3px;
	background: var(--blue);
}

.hero-proof-badge {
	font-size: .72rem;
	margin-left: 24px;
}

.hero-proof-badge strong {
	color: var(--blue);
}

.hero-visual {
	position: relative;
	min-width: 0;
	height: 535px;
}

.orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.orb-a {
	width: 530px;
	height: 530px;
	right: -160px;
	top: 0;
	background: radial-gradient(circle,#9987f255,transparent 68%);
}

.orb-b {
	width: 300px;
	height: 300px;
	left: -30px;
	bottom: -30px;
	border: 2px dashed #a5a1ef8a;
}

.hero-shot {
	position: absolute;
	border: 8px solid white;
	overflow: hidden;
	border-radius: 24px;
	box-shadow: 0 26px 65px #15163b45;
	background: #19172a;
	transition: transform .4s;
}

.hero-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-shot-main {
	top: 12%;
	right: 0;
	width: 75%;
	aspect-ratio: 1.22;
	transform: rotate(7deg);
}

.hero-shot-float {
	left: 0;
	bottom: 4%;
	width: 56%;
	aspect-ratio: 1.15;
	transform: rotate(-11deg);
}

.hero-visual:hover .hero-shot-main {
	transform: rotate(4deg) translateY(-6px);
}

.hero-visual:hover .hero-shot-float {
	transform: rotate(-7deg);
}

.orbit-label {
	position: absolute;
	bottom: 0;
	right: 0;
	background: white;
	padding: 9px 15px;
	border-radius: 30px;
	font-size: .59rem;
	font-weight: 800;
	letter-spacing: .1em;
	color: #696a88;
	transform: rotate(-6deg);
}

.orbit-label span {
	color: var(--blue);
}

.hero-bottom {
	border-top: 1px solid #dcddec;
}

.hero-bottom-inner {
	display: flex;
	align-items: center;
	min-height: 74px;
	gap: 12px;
	font-size: .76rem;
	font-weight: 850;
	letter-spacing: .1em;
	color: #83869d;
}

.hero-bottom-inner span:nth-child(2) {
	color: var(--blue);
}

.hero-bottom-inner a {
	margin-left: auto;
	color: #242444;
}
/* services */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 20px;
}

.service-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 310px;
	padding: 29px;
	border: 1px solid var(--border);
	border-radius: 22px;
	background: #fff;
	transition: transform .28s,box-shadow .28s,border .28s;
}

.service-tile:nth-child(even) {
	background: #fafaff;
}

.service-tile:hover {
	transform: translateY(-5px);
	border-color: #bdbeed;
	box-shadow: 0 20px 48px #29296c19;
}

.service-top {
	display: flex;
	justify-content: space-between;
}

.service-icon {
	display: grid;
	place-items: center;
	width: 59px;
	height: 59px;
	border-radius: 16px;
	background: #eeedff;
	color: #5b56d9;
}

.service-tile:nth-child(3n+2) .service-icon {
	background: #e4f7fe;
	color: #17b3d7;
}

.service-tile:nth-child(3n+3) .service-icon {
	background: #f4eaff;
	color: #a15be1;
}

.service-icon svg {
	width: 29px;
	height: 29px;
}

.tile-index {
	color: #aeb2c5;
	font-size: .75rem;
	font-weight: 850;
}

.service-tile h3 {
	margin: 25px 0 9px;
}

.service-tile p {
	font-size: .91rem;
	color: var(--muted);
	line-height: 1.75;
}

.service-tile .text-link {
	margin-top: 16px;
}
/* about & why */
.about-section,.why-section,.dark-block {
	background: #191a37;
	color: #d4d6e9;
}

.about-grid,.why-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 95px;
	align-items: center;
}

.about-photo {
	position: relative;
}

.about-photo>img {
	width: 100%;
	aspect-ratio: 1/1.08;
	object-fit: cover;
	border-radius: 20px 130px 20px 20px;
}

.about-sticker {
	position: absolute;
	right: -32px;
	bottom: 34px;
	background: #dedcff;
	color: #232143;
	display: grid;
	place-items: center;
	text-align: center;
	transform: rotate(10deg);
	width: 164px;
	height: 164px;
	border-radius: 50%;
	line-height: 1.25;
	font-size: .88rem;
	font-weight: 900;
}

.about-copy h2,.why-section h2,.dark-block h2 {
	color: white;
	margin: 16px 0 24px;
}

.about-copy h2 em,.why-section h2 em,.dark-block h2 em {
	color: #c4b2ff;
}

.about-copy>p,.why-section p,.dark-block p {
	color: #b7bdd4;
	font-size: 1.02rem;
	line-height: 1.85;
}

.about-mini {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
	margin: 32px 0 28px;
	padding-top: 26px;
	border-top: 1px solid #45455f;
}

.about-mini span {
	display: block;
	color: #b3a4fc;
	font-weight: 850;
	font-size: .74rem;
	margin-bottom: 9px;
}

.about-mini strong {
	color: white;
}

.about-mini p {
	color: #b7bdd4;
	font-size: .88rem;
}

.why-section {
	background: #222047;
}

.why-points>div {
	display: flex;
	align-items: start;
	gap: 25px;
	padding: 28px 0;
	border-top: 1px solid #4a4969;
}

.why-points>div>span {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border: 1px solid #7f80b1;
	border-radius: 50%;
	font-size: 1.6rem;
	color: #c2b6ff;
}

.why-points h3 {
	color: white;
	margin-bottom: 6px;
}

.why-points p {
	font-size: .9rem;
	margin-bottom: 0;
}
/* work */
.work-section,.portfolio-full,.content-section,.faq-section,.contact-area {
	background: var(--bg);
}

.project-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 30px 0;
}

.project-tabs button {
	background: white;
	border: 1px solid #dce0ed;
	border-radius: 30px;
	padding: 10px 20px;
	font-size: .88rem;
	font-weight: 800;
	color: #5d637f;
}

.project-tabs button[aria-selected=true] {
	background: #292845;
	color: white;
	border-color: #292845;
}

.projects-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 28px;
}

.project-card[hidden] {
	display: none!important;
}

.project-visual {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	    height: 400px;
	background: #e5e5fa;
}

.project-visual img {
    width: 100%;
    height: 100%;
    object-fit: inherit;
    transition: transform .55s;
}

.project-card:hover img {
	transform: scale(1.04);
}

.concept-tag {
	position: absolute;
	top: 17px;
	left: 17px;
	border-radius: 40px;
	padding: 6px 12px;
	background: #ffffffec;
	font-size: .7rem;
	font-weight: 800;
}

.project-caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 17px 4px 5px;
}

.project-caption .eyebrow {
	font-size: .66rem;
}

.project-caption h3 {
	margin: 5px 0 0;
	font-size: 1.6rem;
}

.project-arrow {
	display: grid;
	place-items: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--border);
	font-size: 1.4rem;
	color: var(--blue);
}
/* process */
.process-line {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 32px 40px;
}

.process-step {
	position: relative;
	border-top: 1px solid #d9dbed;
	padding: 24px 6px;
}

.process-dot {
	position: absolute;
	right: 5px;
	top: -7px;
	background: #7364eb;
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.process-no {
	color: var(--blue);
	font-size: .82rem;
	font-weight: 900;
	display: block;
	margin-bottom: 27px;
}

.process-step h3 {
	margin-bottom: 10px;
}

.process-step p {
	color: var(--muted);
	font-size: .92rem;
	max-width: 300px;
}
/* articles */
.article-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 22px;
}

.article-card {
	display: flex;
	flex-direction: column;
	min-height: 332px;
	border: 1px solid var(--border);
	background: var(--bg);
	border-radius: 21px;
	padding: 30px;
	transition: transform .25s;
}

.article-card:hover {
	transform: translateY(-5px);
}

.article-meta {
	display: flex;
	justify-content: space-between;
	color: var(--blue);
	font-weight: 850;
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.article-card h3 {
	margin: 25px 0 12px;
	font-size: 1.55rem;
}

.article-card p {
	font-size: .91rem;
	color: var(--muted);
}

.read-arrow {
	margin-top: auto;
	padding-top: 18px;
	color: var(--blue);
	font-weight: 850;
	font-size: .88rem;
}
/* cta + footer */
.next-step-section {
	padding: 60px 0 110px;
}

.next-step {
	overflow: hidden;
	position: relative;
	background: linear-gradient(112deg,#4e58d4,#7960e7 65%,#a15fea);
	color: #fff;
	min-height: 450px;
	border-radius: 27px;
	padding: 65px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
}

.next-step h2 {
	color: white;
	margin: 16px 0;
	font-size: clamp(3rem,5.8vw,6rem);
	z-index: 1;
}

.next-step h2 em {
	color: #ddd7ff;
}

.next-step .eyebrow {
	color: #e0ddff;
}

.next-step p {
	color: #eeeaff;
	z-index: 1;
}

.next-step a {
	margin-top: 15px;
	z-index: 1;
}

.next-step-art {
	position: absolute;
	width: 53%;
	height: 165%;
	top: -32%;
	right: -1%;
	transform: rotate(-25deg);
	pointer-events: none;
}

.next-step-art span {
	position: absolute;
	inset: 12%;
	border: 65px solid #d0d6ff24;
	border-radius: 50%;
}

.next-step-art span+span {
	inset: 29%;
	border-width: 36px;
	border-color: #a2dff43b;
}

.site-footer {
	background: #16182e;
	color: #bbbfd6;
	padding: 74px 0 22px;
}

.footer-upper {
	display: grid;
	grid-template-columns: 2fr 1fr 1.2fr .95fr;
	gap: 45px;
}

.footer-brand img {
	width: 210px;
	margin-bottom: 18px;
}

.footer-brand p {
	max-width: 310px;
	font-size: .93rem;
}

.footer-hello {
	color: #b0acff;
	font-weight: 800;
}

.footer-column {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer-column h3 {
	color: white;
	font-size: .93rem;
	letter-spacing: 0;
}

.footer-column a {
	font-size: .87rem;
}

.footer-column a:hover {
	color: white;
}

.footer-bottom {
	border-top: 1px solid #353750;
	margin-top: 57px;
	padding-top: 19px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: .77rem;
}
/* inner pages */
.inner-intro {
	padding-top: 52px;
	padding-bottom: 77px;
}

.breadcrumbs {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: .83rem;
	color: #979cb1;
	margin-bottom: 47px;
}

.breadcrumbs a {
	color: var(--blue);
	font-weight: 750;
}

.inner-hero,.service-hero {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 65px;
	align-items: center;
}

.inner-hero h1,.service-hero h1 {
	font-size: clamp(3.2rem,5.5vw,6rem);
	margin: 18px 0 22px;
}

.inner-hero p,.service-hero p {
	font-size: 1.07rem;
	color: var(--muted);
	max-width: 690px;
	line-height: 1.88;
}

.shape-panel {
	min-height: 385px;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 75% 20%,#c5d6ff,transparent 55%),linear-gradient(145deg,#f4f3ff,#e5e8ff);
	border-radius: 25px;
}

.shapebox {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	width: 255px;
	border-radius: 50%;
	background: white;
	box-shadow: 0 20px 60px #6a67a42c;
	text-align: center;
	line-height: 1;
	letter-spacing: -.07em;
	font-weight: 900;
	font-size: 3rem;
	transform: rotate(-14deg);
}

.shapebox span {
	font-size: 3.7rem;
	color: var(--blue);
}

.service-hero-image img,.folio-art img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1.15;
	border-radius: 23px;
}

.two-column-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 90px;
}

.two-column-content h2 {
	margin: 18px 0;
}

.two-column-content>div>p {
	color: var(--muted);
	max-width: 580px;
}

.benefit-list,.number-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.benefit-list li,.number-list li {
	display: flex;
	align-items: start;
	gap: 18px;
	padding: 20px 0;
	border-bottom: 1px solid #dfe0eb;
	font-weight: 750;
	font-size: 1.08rem;
}

.benefit-list svg {
	color: var(--blue);
	flex: 0 0 26px;
}

.number-list li {
	border-color: #47485d;
	color: white;
}

.list-no {
	color: #bdb0ff;
	font-size: .8rem;
	min-width: 24px;
}

.mini-process {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 15px;
}

.mini-step {
	padding: 24px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 16px;
	min-height: 172px;
}

.mini-step span {
	font-weight: 900;
	font-size: .8rem;
	color: var(--blue);
}

.mini-step p {
	font-weight: 750;
	margin-top: 20px;
}

.faq-grid {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 80px;
}

.faq-grid h2 {
	margin: 17px 0;
}

.faq-grid>div:first-child>p {
	color: var(--muted);
}

.faq-item {
	border-bottom: 1px solid #d9dbe9;
}

.faq-item:first-child {
	border-top: 1px solid #d9dbe9;
}

.faq-item summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 22px;
	align-items: center;
	padding: 22px 0;
	font-weight: 800;
	cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary span {
	color: var(--blue);
	background: #e5e4fa;
	border-radius: 50%;
	flex-shrink: 0;
	width: 33px;
	height: 33px;
	display: grid;
	place-items: center;
	font-size: 1.5rem;
}

.faq-item[open] summary span {
	transform: rotate(45deg);
}

.faq-item p {
	font-size: .96rem;
	color: var(--muted);
}

.related-section h2,.service-overview h2 {
	margin: 17px 0 25px;
}

.related-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17px;
}

.related-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--border);
	padding: 28px;
	border-radius: 16px;
	font-size: 1.2rem;
	font-weight: 850;
}

.related-card svg {
	color: var(--blue);
}

.value-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 19px;
}

.value-grid article {
	background: var(--bg);
	padding: 30px;
	border: 1px solid var(--border);
	border-radius: 18px;
}

.value-grid article span {
	font-weight: 900;
	color: var(--blue);
}

.value-grid h3 {
	margin: 30px 0 12px;
}

.value-grid p {
	font-size: .93rem;
	color: var(--muted);
}
/* about + case studies */
.about-story {
	display: grid;
	grid-template-columns: .4fr 1fr;
	gap: 80px;
}

.about-story p {
	font-size: 1.1rem;
	color: var(--muted);
	line-height: 1.95;
}

.principles-grid {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 18px;
	margin-top: 50px;
}

.principles-grid>div {
	border: 1px solid #4c4a61;
	border-radius: 16px;
	padding: 25px;
}

.principles-grid b {
	color: #c2b3ff;
}

.principles-grid h3 {
	color: white;
	margin-top: 33px;
}

.principles-grid p {
	font-size: .88rem;
}

.about-grid-lite,.case-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.about-grid-lite img {
	border-radius: 20px;
}

.about-grid-lite p,.case-details p {
	color: var(--muted);
	font-size: 1.08rem;
	line-height: 1.9;
}

.case-heading {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 25px;
}

.case-heading h1 {
	font-size: clamp(4rem,7vw,8rem);
	margin: 13px 0;
}

.case-heading p {
	color: var(--muted);
	font-size: 1.1rem;
	max-width: 750px;
}

.period {
	color: var(--blue);
}

.case-lead-image img {
	width: 100%;
	max-height: 655px;
	object-fit: cover;
	border-radius: 22px;
}

.scope-list {
	border-top: 1px solid var(--border);
	padding-top: 24px;
	margin-top: 45px;
}

.scope-list ul {
	padding: 0;
	list-style: none;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.scope-list li {
	background: #eeeaff;
	border-radius: 30px;
	padding: 10px 15px;
	font-weight: 750;
	color: #534cd0;
	font-size: .86rem;
}

.concept-disclaimer {
	padding: 27px 30px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 16px;
	margin-top: 25px;
}

.concept-disclaimer p {
	color: var(--muted);
	margin: 8px 0 0;
	font-size: .91rem;
}

.article-hero {
	max-width: 1000px;
}

.article-hero h1 {
	font-size: clamp(3.3rem,5vw,5.7rem);
	margin: 16px 0 20px;
}

.article-hero p {
	color: var(--muted);
	font-size: 1.12rem;
}

.back-link {
	display: inline-block;
	margin-top: 20px;
	color: var(--blue);
	font-weight: 800;
}

.article-body {
	max-width: 870px;
	padding-bottom: 85px;
}

.article-body .article-intro {
	border-left: 4px solid var(--blue);
	padding-left: 21px;
	font-size: 1.25rem;
}

.article-body section {
	margin: 43px 0;
}

.article-body h2 {
	font-size: 2rem;
}

.article-body p {
	color: var(--muted);
	font-size: 1.07rem;
	line-height: 1.9;
}

.article-conclusion {
	padding: 26px;
	background: var(--bg);
	border-radius: 16px;
}

.legal-body {
	max-width: 870px;
	padding-bottom: 90px;
}

.legal-body h2 {
	font-size: 1.6rem;
	margin: 30px 0 12px;
}

.legal-body p {
	color: var(--muted);
}

.min-page {
	min-height: 60vh;
	display: grid;
	align-items: center;
}

.narrow-message {
	max-width: 760px;
}

.narrow-message p {
	font-size: 1.08rem;
	color: var(--muted);
}
/* contact */
.contact-grid {
	display: grid;
	grid-template-columns: .83fr 1.17fr;
	gap: 75px;
}

.contact-info h2 {
	margin: 15px 0;
}

.contact-info>p {
	color: var(--muted);
	line-height: 1.85;
}

.contact-info-note {
	background: #e9e9ff;
	padding: 25px;
	border-radius: 15px;
	margin-top: 30px;
}

.contact-info-note p {
	color: var(--muted);
	font-size: .93rem;
	margin: 5px 0;
}

.contact-mini {
	margin-top: 28px;
	border-top: 1px solid var(--border);
	padding-top: 22px;
}

.contact-mini span {
	color: var(--blue);
	font-weight: 850;
}

.contact-mini p {
	color: var(--muted);
	font-size: .92rem;
}

.form-wrap {
	background: white;
	border: 1px solid var(--border);
	border-radius: 24px;
	box-shadow: 0 20px 52px #221b5217;
	padding: 39px;
}

.project-form label {
	display: block;
	font-size: .87rem;
	font-weight: 800;
	color: #282d48;
}

.project-form input:not([type=checkbox]),.project-form select,.project-form textarea {
	width: 100%;
	display: block;
	margin-top: 8px;
	min-height: 49px;
	padding: 13px 14px;
	border: 1px solid #dfe1ed;
	border-radius: 11px;
	background: #fbfbff;
	color: var(--ink);
}

.project-form input::placeholder,.project-form textarea::placeholder {
	color: #a4a7ba;
}

.project-form textarea {
	min-height: 150px;
	resize: vertical;
}

.project-form label>span:first-child {
	color: #ab61da;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17px;
	margin-bottom: 19px;
}

.consent {
	display: flex!important;
	align-items: start;
	gap: 10px;
	font-weight: 500!important;
	color: var(--muted)!important;
	font-size: .81rem!important;
	line-height: 1.5;
	margin-top: 21px;
}

.consent input {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 3px;
	accent-color: var(--blue);
}

.consent a {
	color: var(--blue);
	text-decoration: underline;
}

.form-bottom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 20px;
}

.form-status {
	margin: 0;
	color: #a04b25;
	font-size: .85rem;
}

.form-disclaimer {
	font-size: .76rem;
	color: #8a90a7;
	margin: 18px 0 0;
}

.honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media(max-width:1100px) {
	.desktop-nav {
		gap: 18px;
	}

	.brand img {
		width: 180px;
	}

	.hero-visual {
		height: 480px;
	}

	.hero-grid {
		min-height: 640px;
	}

	.about-grid,.why-grid {
		gap: 55px;
	}

	.footer-upper {
		gap: 27px;
	}
}

@media(max-width:970px) {
	.desktop-nav {
		display: none;
	}

	.mobile-menu-btn {
		display: grid;
	}

	.nav-shell {
		min-height: 76px;
	}

	.section-padding {
		padding: 82px 0;
	}

	.services-grid {
		grid-template-columns: repeat(2,1fr);
	}

	.hero h1 {
		font-size: clamp(3.25rem,6vw,5rem);
	}

	.hero-visual {
		height: 410px;
	}

	.hero-proof-badge {
		display: none;
	}

	.mini-process {
		grid-template-columns: 1fr 1fr;
	}

	.article-grid {
		grid-template-columns: 1fr 1fr;
	}

	.article-card:last-child {
		grid-column: span 2;
	}

	.footer-upper {
		grid-template-columns: 1.5fr 1fr 1fr;
	}

	.footer-column:last-child {
		grid-column: 2/-1;
	}
}

@media(max-width:760px) {
	.container {
		width: calc(100% - 40px);
	}

	.section-padding {
		padding: 67px 0;
	}

	.nav-shell {
		min-height: 70px;
	}

	.nav-cta {
		display: none;
	}

	.hero-grid {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 48px 0 30px;
	}

	.hero h1 {
		font-size: clamp(3.3rem,11vw,5.6rem);
	}

	.hero-visual {
		width: 100%;
		height: 400px;
	}

	.hero-proof {
		margin-top: 27px;
	}

	.hero-shot-main {
		width: 67%;
		top: 2%;
	}

	.hero-shot-float {
		bottom: 1%;
	}

	.hero-bottom-inner {
		min-height: 60px;
	}

	.section-heading.split,.inner-hero,.service-hero,.about-grid,.why-grid,.two-column-content,.faq-grid,.about-story,.about-grid-lite,.case-details,.contact-grid {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	.services-grid,.projects-grid,.article-grid,.value-grid,.principles-grid,.related-grid {
		grid-template-columns: 1fr 1fr;
	}

	.article-card:last-child {
		grid-column: auto;
	}

	.about-photo {
		max-width: 500px;
	}

	.about-photo>img {
		aspect-ratio: 1/.83;
	}

	.about-sticker {
		width: 130px;
		height: 130px;
		right: -14px;
		bottom: 12px;
		font-size: .7rem;
	}

	.process-line {
		grid-template-columns: 1fr 1fr;
		gap: 22px;
	}

	.section-heading.split {
		gap: 5px;
	}

	.inner-intro {
		padding: 30px 0 62px;
	}

	.breadcrumbs {
		margin-bottom: 35px;
	}

	.inner-hero h1,.service-hero h1 {
		font-size: clamp(3.1rem,9vw,5.2rem);
	}

	.shape-panel {
		min-height: 260px;
	}

	.shapebox {
		width: 190px;
		font-size: 2.5rem;
	}

	.folio-art img {
		aspect-ratio: 1.5;
	}

	.service-hero-image img {
		aspect-ratio: 1.4;
	}

	.faq-grid {
		gap: 15px;
	}

	.footer-upper {
		grid-template-columns: 1fr 1fr;
	}

	.footer-brand {
		grid-column: 1/-1;
	}

	.footer-column:last-child {
		grid-column: auto;
	}

	.next-step {
		padding: 43px 30px;
		min-height: 375px;
	}

	.case-heading {
		align-items: start;
		flex-direction: column;
	}
}

@media(max-width:540px) {
	body {
		font-size: 16px;
	}

	.container {
		width: calc(100% - 32px);
	}

	.hero h1 {
		font-size: clamp(3.05rem,12vw,4.25rem);
	}

	.hero-lead {
		font-size: 1rem;
	}

	.hero-ctas .btn {
		width: 100%;
	}

	.hero-visual {
		height: 300px;
	}

	.hero-shot {
		border-width: 6px;
		border-radius: 15px;
	}

	.hero-shot-main {
		width: 72%;
	}

	.hero-shot-float {
		width: 60%;
	}

	.orbit-label {
		font-size: .44rem;
		padding: 8px 10px;
	}

	.hero-bottom-inner span:nth-child(2) {
		display: none;
	}

	.pill {
		font-size: .65rem;
		padding: 7px 11px;
	}

	.services-grid,.projects-grid,.article-grid,.value-grid,.principles-grid,.related-grid {
		grid-template-columns: 1fr;
	}

	.service-tile {
		min-height: 260px;
	}

	.service-tile p {
		margin-bottom: 5px;
	}

	.project-caption h3 {
		font-size: 1.45rem;
	}

	.section-heading h2,.why-section h2 {
		font-size: clamp(2.5rem,10vw,3.7rem);
	}

	.process-line {
		gap: 15px;
	}

	.process-step h3 {
		font-size: 1.18rem;
	}

	.process-step p {
		font-size: .81rem;
	}

	.about-mini {
		grid-template-columns: 1fr;
	}

	.footer-upper {
		gap: 24px 18px;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 5px;
	}

	.form-row {
		grid-template-columns: 1fr;
	}

	.form-wrap {
		padding: 22px;
	}

	.form-bottom .btn {
		width: 100%;
	}

	.mini-process {
		grid-template-columns: 1fr;
	}

	.inner-hero h1,.service-hero h1 {
		font-size: clamp(2.8rem,11vw,4.2rem);
	}

	.next-step {
		padding: 40px 24px;
	}

	.next-step h2 {
		font-size: clamp(2.6rem,9.5vw,3.8rem);
	}
}

@media(prefers-reduced-motion:reduce) {
	*,*:before,*:after {
		scroll-behavior: auto!important;
		animation-duration: .01ms!important;
		transition-duration: .01ms!important;
	}
}
/* Prevent decorative elements from expanding narrow viewport bounds. */
.about-section {
	overflow: hidden;
}

@media(max-width:540px) {
	.about-sticker {
		right: 6px;
	}
}

/* tools */
.tools-highlight {
	background: linear-gradient(180deg,#fbfbfe 0%,#f1f4fb 100%);
}

.tools-quick-grid,.tool-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 28px;
}

.tools-quick-grid {
	grid-template-columns: repeat(3,minmax(0,1fr));
}

.tool-quick-card,.tool-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 18px 45px rgba(27,36,79,.06);
	transition: transform .25s,box-shadow .25s;
}

.tool-quick-card:hover,.tool-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 60px rgba(27,36,79,.09);
}

.tool-quick-card img,.tool-card-media img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	background: #eef1fa;
}

.tool-quick-card div,.tool-card-body {
	padding: 20px 22px 24px;
}

.tool-quick-card h3,.tool-card h3 {
	margin: 0 0 10px;
	font-size: 1.28rem;
}

.tool-quick-card p,.tool-card p,.tool-bullets li,.tool-copy-box p,.tool-feedback,.tool-note {
	color: var(--muted);
}

.tool-bullets {
	margin: 0 0 20px;
	padding-left: 18px;
	display: grid;
	gap: 8px;
}

.tool-landing-hero .service-hero-image img,.tool-page-hero .service-hero-image img {
	border-radius: 24px;
	box-shadow: 0 20px 48px rgba(26,31,86,.16);
}

.tool-ui {
	display: grid;
	grid-template-columns: minmax(0,1.3fr) 360px;
	gap: 26px;
	align-items: start;
}

.tool-ui-main,.tool-sidebar,.tool-sidebar-wide {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 24px;
	padding: 26px;
	box-shadow: 0 18px 45px rgba(27,36,79,.06);
}

.tool-sidebar-wide {
	padding: 18px;
}

.tool-label {
	display: block;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 10px;
}

.tool-input,.tool-textarea {
	width: 100%;
	border: 1px solid #d8dcef;
	background: #f8f9fd;
	border-radius: 18px;
	padding: 16px 18px;
	color: var(--ink);
	resize: vertical;
}

.tool-textarea {
	line-height: 1.7;
	min-height: 160px;
}

.tool-textarea-sm {
	min-height: 126px;
}

.tool-input:focus,.tool-textarea:focus {
	outline: none;
	border-color: #8d86ef;
	box-shadow: 0 0 0 4px rgba(104,94,235,.12);
}

.tool-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 18px;
}

.tool-two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-top: 18px;
}

.tool-sidebar {
	display: grid;
	gap: 14px;
}

.tool-stat {
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: #f8f9fd;
}

.tool-stat span {
	display: block;
	color: var(--muted);
	font-size: .92rem;
	margin-bottom: 8px;
}

.tool-stat strong {
	font-size: 2rem;
	line-height: 1;
	color: var(--ink);
}

.search-preview {
	background: #fff;
	border-radius: 20px;
	border: 1px solid var(--border);
	padding: 24px;
	box-shadow: 0 16px 34px rgba(23,25,49,.06);
}

.search-preview-url {
	color: #347a3b;
	font-size: .95rem;
	margin-bottom: 10px;
}

.search-preview-title {
	font-size: 1.3rem;
	color: #2445ce;
	line-height: 1.4;
	margin-bottom: 8px;
}

.search-preview-desc {
	color: #55606e;
	line-height: 1.65;
}

.tool-feedback {
	margin-top: 18px;
	padding: 18px;
	border-radius: 18px;
	background: #f8f9fd;
	border: 1px solid var(--border);
}

.tool-feedback ul {
	margin: 10px 0 0;
	padding-left: 18px;
}

.tool-preview-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 18px;
	margin-top: 22px;
}

.tool-preview-card {
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 18px;
	background: #f8f9fd;
}

.tool-preview-card h3 {
	margin-bottom: 14px;
}

.tool-preview-card img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	background: #e9edf7;
	border-radius: 14px;
	border: 1px solid #dde2f0;
}

.palette-grid {
	display: grid;
	grid-template-columns: repeat(5,minmax(0,1fr));
	gap: 16px;
	margin-top: 18px;
}

.palette-swatch {
	border: 1px solid var(--border);
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
}

.palette-color {
	height: 150px;
}

.palette-meta {
	padding: 14px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.palette-copy {
	border: none;
	background: #eef1fa;
	color: var(--ink);
	border-radius: 12px;
	padding: 9px 12px;
	font-weight: 700;
}

.palette-copy:hover {
	background: #e3e8f7;
}

.tool-copy-box {
	background: #f8f9fd;
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 20px;
}

#email-preview-frame {
	width: 100%;
	height: 760px;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: #fff;
}

.breadcrumbs {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	color: var(--muted);
	font-size: .94rem;
	margin-bottom: 28px;
}

@media (max-width:1100px) {
	.tools-quick-grid {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}

	.tool-ui {
		grid-template-columns: 1fr;
	}

	.tool-grid {
		grid-template-columns: 1fr;
	}

	.palette-grid {
		grid-template-columns: repeat(3,minmax(0,1fr));
	}
}

@media (max-width:780px) {
	.tools-quick-grid,.tool-preview-grid {
		grid-template-columns: 1fr;
	}

	.palette-grid {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}

	.tool-ui-main,.tool-sidebar,.tool-sidebar-wide {
		padding: 20px;
	}

	.search-preview-title {
		font-size: 1.15rem;
	}
}

@media (max-width:560px) {
	.palette-grid {
		grid-template-columns: 1fr;
	}

	.tool-actions .btn {
		width: 100%;
	}

	.tool-stat strong {
		font-size: 1.7rem;
	}
}
/* WebHolick shared navigation: visible Services dropdown arrow. */
.nav-services .nav-trigger {display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.services-arrow-icon{display:inline-block!important;width:17px!important;height:17px!important;flex:none;stroke:currentColor!important;fill:none!important;stroke-width:2.1!important;stroke-linecap:round!important;stroke-linejoin:round!important;transition:transform .2s ease}
.nav-services.open .services-arrow-icon,.nav-services:hover .services-arrow-icon,.nav-services:focus-within .services-arrow-icon{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.services-arrow-icon{transition:none}}


/* WEBHOLICK GLOBAL CONTACT DETAILS / SOCIAL SHARE */
.wh-topbar { background:#171b34; color:#f5f7ff; font-size:12px; }
.wh-topbar-inner { min-height:37px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.wh-topbar-contact {display:flex; align-items:center; flex-wrap:wrap; gap:22px;}
.wh-topbar-contact a {display:inline-flex; gap:8px; align-items:center; color:#ebedff; font-size:12px; font-weight:500; letter-spacing:0;}
.wh-topbar-contact a:hover {color:#9fdfff;}
.wh-topbar svg {width:15px; height:15px; flex:none;}
.wh-social-links {display:flex; align-items:center; flex-wrap:wrap; gap:8px;}
.wh-social-links a {display:inline-grid; place-items:center; width:32px; height:32px; border-radius:10px; color:inherit; border:1px solid rgba(255,255,255,.19); transition:background-color .2s, transform .2s;}
.wh-social-links a:hover {background:rgba(132,127,245,.25); transform:translateY(-2px);}
.wh-social-links a[hidden]{display:none;}
.wh-social-links svg {width:17px;height:17px;}
.wh-footer-contact{display:flex!important;align-items:start;gap:8px;overflow-wrap:anywhere;}
.wh-footer-contact svg {width:16px;height:16px;flex:none;margin-top:2px;}
.wh-social-links--footer {margin:7px 0 10px;}
.wh-social-links--footer a {color:#eef0ff;}
.wh-mobile-contact {display:none;}
.footer-upper{grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr) minmax(0,.95fr) minmax(0,.95fr) minmax(0,1.15fr);gap:26px;}
.wh-contact-direct{display:grid;gap:12px;margin:26px 0 28px;}
.wh-contact-direct-link{display:flex;gap:14px;align-items:center;padding:16px;background:#f9faff;border:1px solid #e2e5f0;border-radius:16px;transition:border-color .2s, box-shadow .2s;}
.wh-contact-direct-link:hover{border-color:#aba6f4;box-shadow:0 10px 25px rgba(41,40,115,.08);}
.wh-contact-direct-link>svg{width:24px;height:24px;color:#6457df;flex-shrink:0;}
.wh-contact-direct-link span{display:flex;flex-direction:column;min-width:0;}
.wh-contact-direct-link small{font-weight:500;color:#798098;}
.wh-contact-direct-link strong{font-size:15px;color:#212442;overflow-wrap:anywhere;font-weight:650;}
@media (max-width:1200px){.footer-upper{grid-template-columns:1.4fr 1fr 1fr;gap:26px 34px;}.footer-column:last-child{grid-column:auto;}}
@media (max-width:970px){.footer-upper{grid-template-columns:repeat(2,minmax(0,1fr));}.wh-topbar-contact{gap:14px;}}
@media (max-width:760px){.wh-topbar-inner{padding:7px 0;}.wh-topbar-contact{gap:8px 13px;}.wh-topbar-contact a{font-size:11px;}.wh-social-links--top{display:none;}.footer-upper{grid-template-columns:repeat(2,minmax(0,1fr));}.wh-mobile-contact{display:grid;gap:4px;margin-top:12px;padding-top:12px;border-top:1px solid #e5e6ee;}.wh-mobile-contact a{font-size:13px;font-weight:600;}}
@media (max-width:540px){.wh-topbar-contact a:last-child{white-space:nowrap;}.wh-topbar-inner{justify-content:center;}.wh-topbar-contact{justify-content:center;}.footer-upper{grid-template-columns:1fr 1fr;}.footer-brand{grid-column:1/-1;}.footer-column:last-child{grid-column:1/-1;}.wh-contact-direct-link{padding:14px;}}

/* Services label navigates; adjacent arrow opens the submenu. */
.nav-services{display:flex;align-items:center;gap:3px}
.nav-services .nav-trigger{padding:6px 3px;min-width:30px;min-height:40px}
.nav-services .nav-trigger:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}

/* Topic images on inner-page introductions. */
.topic-hero{align-items:center;gap:clamp(28px,5vw,72px)}
.topic-hero .article-hero{max-width:none;padding:0}
.topic-hero .case-heading{display:block;margin:0}
.topic-hero .case-heading .btn{margin-top:24px}
.page-topic-image{width:100%;overflow:hidden;border-radius:24px;background:var(--bg)}
.page-topic-image img{display:block;width:100%;height:100%;max-height:460px;object-fit:cover}
.topic-message{max-width:1240px;text-align:left}
.topic-hero .page-topic-image{aspect-ratio:4/3}
@media(max-width:760px){.topic-hero .page-topic-image{max-height:340px}.topic-hero .case-heading h1{overflow-wrap:anywhere}}

/* About: use the story sidebar for a purposeful introduction. */
.about-story-aside{display:flex;flex-direction:column;gap:28px;align-self:start}
.about-purpose-card{padding:26px 24px;border:1px solid #6258e826;border-radius:20px;background:linear-gradient(145deg,#eeebff,#f3faff)}
.about-purpose-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--blue);color:white;font-size:25px;margin-bottom:22px}
.about-purpose-card h3{font-size:1.4rem;line-height:1.35;margin:0 0 16px;color:var(--ink)}
.about-story .about-purpose-card p{font-size:.93rem;line-height:1.75;margin:0 0 22px}
.about-purpose-card .text-cta{font-size:.86rem}
.about-grid-lite .about-brand-story-image{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:760px){.about-story-aside{gap:18px}.about-purpose-card{padding:24px}.about-story{gap:32px}}

/* Portfolio mockups keep their proportions at every screen size. */
body[data-page="portfolio"] .project-visual{height:auto;aspect-ratio:4/3;background:#f3f3f8}
body[data-page="portfolio"] .project-visual img{display:block;object-fit:contain}
body[data-page="portfolio"] .project-card{margin:0}

/* Compact, image-only three-row homepage showcase. */
.work-showcase{overflow:hidden;padding-block:76px}
.work-showcase .section-heading{position:relative;margin-bottom:32px}
.work-motion-toggle{border:1px solid var(--border);border-radius:30px;background:white;color:var(--muted);font:inherit;font-size:.72rem;padding:7px 13px;cursor:pointer;justify-self:start;grid-column:1/-1}
.work-strips{display:grid;gap:16px;margin-top:30px;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.work-strip{overflow:hidden}
.work-strip-track{display:flex;width:max-content;animation:work-drift-right 55s linear infinite;will-change:transform}
.work-strip:nth-child(2) .work-strip-track{animation-name:work-drift-left;animation-duration:65s}
.work-strip:nth-child(3) .work-strip-track{animation-duration:60s}
.work-strip-group{display:flex;gap:16px;padding-right:16px;flex-shrink:0}
.work-strip-image{flex:0 0 auto;width:260px;aspect-ratio:4/3;margin:0;border-radius:14px;overflow:hidden;background:#eeedf4}
.work-strip-image img{display:block;width:100%;height:100%;object-fit:contain}
.work-showcase:hover .work-strip-track,.work-showcase:focus-within .work-strip-track,.work-showcase.is-paused .work-strip-track{animation-play-state:paused}
@keyframes work-drift-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes work-drift-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){.work-showcase{padding-block:52px}.work-strips{gap:12px}.work-strip-group{gap:12px;padding-right:12px}.work-strip-image{width:190px;border-radius:12px}.work-motion-toggle{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.work-strip-track{animation:none;transform:none}.work-strip{overflow-x:auto}.work-strip-group[aria-hidden]{display:none}.work-motion-toggle{display:none}}

.work-showcase .work-motion-toggle{display:block;margin-top:16px}
@media(prefers-reduced-motion:reduce){.work-showcase .work-motion-toggle{display:none}}
/* Expanded image and gradient tools. */
.image-studio{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;align-items:start}
.image-studio-controls,.image-preview-area,.gradient-controls{min-width:0}
.image-drop{padding:26px;border:2px dashed #c5c0f1;border-radius:20px;background:linear-gradient(135deg,#f7f5ff,#f0fbff);margin-bottom:22px}
.image-drop.is-dragging{border-color:var(--blue);background:#e8e4ff}
.image-drop h3{margin:16px 0 10px}.image-drop p,.image-preview-empty p{color:var(--muted);font-size:.9rem}
.image-drop .btn{margin-top:14px}.image-settings{padding:24px;border:1px solid var(--border);border-radius:20px;background:#fff}
.image-settings .tool-label{margin-top:16px}.image-settings .tool-actions{margin-top:24px;flex-wrap:wrap}
.image-check{display:flex;gap:10px;align-items:center;margin-top:15px;font-size:.9rem}
.image-status{padding:14px;border-radius:12px;background:var(--bg);font-size:.9rem;overflow-wrap:anywhere}
.image-preview-area{display:grid;gap:18px}.image-preview-empty{padding:24px;border-radius:18px;background:var(--bg)}
.image-checker{border-radius:12px;overflow:hidden;background-color:#fff;background-image:linear-gradient(45deg,#ececf4 25%,transparent 25%),linear-gradient(-45deg,#ececf4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ececf4 75%),linear-gradient(-45deg,transparent 75%,#ececf4 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.image-checker img{display:block;width:100%;max-height:330px;object-fit:contain}.image-format-help{margin-top:22px}.image-studio [hidden]{display:none!important}
.image-studio input[type=range],.gradient-controls input[type=range]{width:100%;accent-color:var(--blue)}
.image-studio input[type=color],.gradient-controls input[type=color]{width:52px;height:42px;padding:2px;border:1px solid var(--border);border-radius:8px;background:white;cursor:pointer}
.gradient-studio{margin-top:64px;padding-top:44px;border-top:1px solid var(--border)}
.gradient-heading h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:12px 0}.gradient-heading p{color:var(--muted);margin-bottom:28px}
.gradient-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px}
.gradient-preview{height:280px;border-radius:20px;border:1px solid var(--border)}
.gradient-controls{padding:24px;border:1px solid var(--border);border-radius:20px;background:white}
.gradient-controls>.tool-label{margin-top:16px}.gradient-controls .tool-actions{flex-wrap:wrap}
.gradient-presets{display:grid;grid-template-columns:repeat(8,1fr);gap:9px;margin:18px 0}
.gradient-preset{height:40px;border:2px solid white;outline:1px solid var(--border);border-radius:10px;cursor:pointer}
.gradient-stop{display:grid;grid-template-columns:76px minmax(0,1fr) 30px;align-items:end;gap:10px;margin:16px 0}
.gradient-stop label{display:grid;gap:4px;font-size:.75rem}.gradient-stop .tool-input{margin:0;min-width:0}.gradient-remove{border:1px solid var(--border);border-radius:8px;background:white;height:43px;cursor:pointer;font-size:22px;color:var(--ink)}
.gradient-remove:disabled{opacity:.4;cursor:default}.gradient-studio .tool-actions{margin-top:16px}.gradient-studio textarea{width:100%;font-family:monospace;overflow-wrap:anywhere}.gradient-stop [aria-invalid=true]{outline:2px solid #c83249}
@media(max-width:850px){.image-studio,.gradient-layout{grid-template-columns:1fr}.gradient-preview{height:230px}.image-drop,.image-settings,.gradient-controls{padding:20px}.gradient-presets{grid-template-columns:repeat(4,1fr)}}
/* Shared motion: soft entrances, responsive cards and subtle ambient accents. */
.wh-reveal{opacity:0;translate:0 26px;transition:opacity .75s ease var(--reveal-delay,0ms),translate .75s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms)}
.wh-reveal.is-visible{opacity:1;translate:0 0}
.wh-reveal:focus-within{opacity:1;translate:0 0}
.site-header{transition:box-shadow .35s ease,background .35s ease}
.site-header.is-scrolled{box-shadow:0 8px 35px #1719310d;background:#fffffffa}
.btn{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 26px #6258e826}
.btn:active{transform:translateY(0)}
.service-tile,.tool-card,.article-card,.principles-grid>div,.related-card{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease}
@media(hover:hover){.service-tile:hover,.tool-card:hover,.article-card:hover,.related-card:hover{transform:translateY(-7px);box-shadow:0 16px 40px #17193112}.principles-grid>div:hover{transform:translateY(-5px);border-color:#a69bef}}
.nav-link,.footer-column>a{position:relative}
.nav-link:not(button)::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.wh-social-links a svg{transition:transform .25s ease}.wh-social-links a:hover svg{transform:translateY(-2px) rotate(-5deg)}
.hero-art,.hero-visual{animation:wh-hero-arrive 1s cubic-bezier(.22,1,.36,1) both}
.hero h1 em,.hero h1 .gradient-text{background-size:200% 200%;animation:wh-gradient-shift 9s ease-in-out infinite alternate}
.next-step-art{animation:wh-ambient 12s ease-in-out infinite alternate}
@keyframes wh-hero-arrive{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes wh-gradient-shift{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes wh-ambient{from{transform:translate3d(-8px,5px,0) rotate(-2deg)}to{transform:translate3d(8px,-7px,0) rotate(2deg)}}
.work-showcase .work-motion-toggle{width:34px;height:34px;padding:8px;display:grid;place-items:center;border-radius:50%;line-height:1}
.work-motion-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.wh-reveal{translate:0 16px;transition-duration:.55s}}
@media(prefers-reduced-motion:reduce){.wh-reveal{opacity:1;translate:none;transition:none}.hero-art,.hero-visual,.next-step-art{animation:none}.work-showcase .work-motion-toggle{display:none}.btn:hover,.service-tile:hover,.tool-card:hover,.article-card:hover,.related-card:hover{transform:none}}

@media print{.wh-reveal{opacity:1;translate:none;transition:none}.next-step-art{animation:none}}
/* Tools directory: two cards per row across screen sizes. */
#tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
#tool-grid .tool-card{min-width:0}
#tool-grid .tool-card-body{display:flex;flex-direction:column;flex:1}
#tool-grid .tool-card-body>.btn{margin-top:auto;align-self:flex-start}
@media(max-width:780px){#tool-grid{gap:14px}#tool-grid .tool-card-body{padding:15px}#tool-grid .tool-card h3{font-size:1.1rem;line-height:1.35}#tool-grid .tool-card p{font-size:.84rem;line-height:1.6}#tool-grid .tool-bullets{display:none}#tool-grid .pill{font-size:.62rem;padding:5px 8px;letter-spacing:.04em}#tool-grid .btn{padding:10px 12px;font-size:.77rem;min-height:42px;white-space:normal}#tool-grid .tool-card-media img{aspect-ratio:4/3;object-fit:cover}}
@media(max-width:380px){#tool-grid{gap:10px}#tool-grid .tool-card-body{padding:12px}#tool-grid .tool-card h3{font-size:1rem}#tool-grid .tool-card p{font-size:.78rem}}

/* Single tool pages: title followed directly by the working tool. */
.standalone-tool{padding-top:48px;padding-bottom:64px;min-height:60vh}
.standalone-tool>h1{font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.2;letter-spacing:-.035em;margin:0 0 32px;color:var(--ink)}
.standalone-tool #tool-app{scroll-margin-top:120px}
.standalone-tool .gradient-studio{margin-top:36px;padding-top:32px}
@media(max-width:760px){.standalone-tool{padding-top:30px;padding-bottom:42px}.standalone-tool>h1{margin-bottom:24px}}