:root {
			--ink: #082238;
			--muted: #496275;
			--blue: #2466b1;
			--blue-dark: #174f91;
			--blue-soft: #e8f2fb;
			--blue-pale: #f3f8fd;
			--steel: #8aa4b8;
			--line: rgba(8, 34, 56, 0.12);
			--page: #f5f8fb;
			--white: #fff;
			--shadow: 0 18px 55px rgba(8, 34, 56, 0.14);
		}

		* {
			box-sizing: border-box;
		}

		html {
			scroll-behavior: smooth;
		}

		body {
			margin: 0;
			background: var(--page);
			color: var(--ink);
			font-family: "DM Sans", Arial, sans-serif;
			-webkit-font-smoothing: antialiased;
		}

		a {
			color: inherit;
		}

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

		.visually-hidden {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}

		.site-shell {
			width: min(1440px, calc(100% - 40px));
			margin: 20px auto 0;
		}

		.hero {
			position: relative;
			min-height: min(760px, calc(100vh - 40px));
			overflow: hidden;
			border-radius: 34px;
			background:
				linear-gradient(90deg, rgba(244, 249, 253, 0.25) 0%, rgba(244, 249, 253, 0) 51%),
				url("../images/gp-slider-home.png") center center / cover no-repeat;
			box-shadow: var(--shadow);
		}

		.site-header {
			position: fixed;
			z-index: 100;
			top: 22px;
			left: 50%;
			right: auto;
			width: min(1396px, calc(100% - 84px));
			transform: translateX(-50%);
			transition: top 180ms ease, width 180ms ease;
		}

		.header-inner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: 92px;
			padding: 10px 14px 10px 24px;
			border: 1px solid rgba(255, 255, 255, 0.82);
			border-radius: 22px;
			background: rgba(255, 255, 255, 0.9);
			box-shadow: 0 12px 35px rgba(8, 34, 56, 0.11);
			backdrop-filter: blur(18px);
			-webkit-backdrop-filter: blur(18px);
			transition: min-height 180ms ease, padding 180ms ease, border-radius 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
		}

		.logo-link {
			flex: 0 0 auto;
			padding: 4px 0;
		}

		.logo-link img {
			width: auto;
			height: 68px;
			transition: height 180ms ease;
		}

		.nav-list {
			display: flex;
			align-items: center;
			gap: 5px;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.nav-link {
			display: inline-flex;
			align-items: center;
			min-height: 46px;
			padding: 0 19px;
			border: 1px solid transparent;
			border-radius: 13px;
			color: var(--ink);
			font-size: 0.92rem;
			font-weight: 700;
			text-decoration: none;
			transition: min-height 180ms ease, padding 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
		}

		.site-header.is-compact {
			top: 12px;
		}

		.site-header.is-compact .header-inner {
			min-height: 70px;
			padding: 6px 12px 6px 20px;
			border-radius: 18px;
			background: rgba(255, 255, 255, 0.96);
			box-shadow: 0 14px 38px rgba(8, 34, 56, 0.16);
		}

		.site-header.is-compact .logo-link img {
			height: 50px;
		}

		.site-header.is-compact .nav-link {
			min-height: 42px;
			padding-inline: 16px;
		}

		#what-we-do,
		#contact {
			scroll-margin-top: 100px;
		}

		.nav-link:hover,
		.nav-link:focus-visible {
			border-color: var(--line);
			background: #edf4fb;
			color: var(--blue-dark);
			outline: none;
			transform: translateY(-1px);
		}

		.nav-link.contact-link {
			background: var(--blue);
			color: var(--white);
		}

		.nav-link.contact-link:hover,
		.nav-link.contact-link:focus-visible {
			border-color: var(--blue-dark);
			background: var(--blue-dark);
			color: var(--white);
		}

		.nav-toggle,
		.nav-toggle-label {
			display: none;
		}

		.hero-content {
			position: relative;
			z-index: 2;
			display: flex;
			align-items: center;
			min-height: inherit;
			width: 52%;
			padding: 150px 0 90px 5.5%;
		}

		.hero-copy {
			max-width: 610px;
		}

		.eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 9px;
			margin: 0 0 20px;
			color: var(--blue-dark);
			font-size: 0.78rem;
			font-weight: 800;
			letter-spacing: 0.14em;
			text-transform: uppercase;
		}

		.eyebrow::before {
			width: 28px;
			height: 3px;
			border-radius: 99px;
			background: var(--blue);
			content: "";
		}

		h1 {
			margin: 0;
			font-family: "Manrope", Arial, sans-serif;
			font-size: clamp(2.95rem, 4.25vw, 4.6rem);
			font-weight: 800;
			letter-spacing: -0.055em;
			line-height: 0.98;
		}

		h1 span {
			display: block;
		}

		h1 .accent {
			color: var(--blue);
		}

		.hero-text {
			max-width: 560px;
			margin: 28px 0 0;
			color: #263f52;
			font-size: clamp(1.1rem, 1.45vw, 1.28rem);
			font-weight: 600;
			line-height: 1.55;
		}

		.hero-actions {
			display: flex;
			align-items: center;
			gap: 16px;
			margin-top: 32px;
		}

		.primary-button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 14px;
			min-height: 54px;
			padding: 0 24px;
			border-radius: 14px;
			background: var(--blue);
			box-shadow: 0 12px 24px rgba(36, 102, 177, 0.24);
			color: var(--white);
			font-weight: 800;
			text-decoration: none;
			transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
		}

		.primary-button::after {
			font-size: 1.2rem;
			content: "→";
		}

		.primary-button:hover,
		.primary-button:focus-visible {
			background: var(--blue-dark);
			box-shadow: 0 15px 28px rgba(23, 79, 145, 0.28);
			outline: none;
			transform: translateY(-2px);
		}

		.section-label {
			margin: 0 0 16px;
			color: var(--blue);
			font-size: 0.8rem;
			font-weight: 800;
			letter-spacing: 0.16em;
			text-transform: uppercase;
		}

		.services-intro h2,
		.contact-section h2 {
			margin: 0;
			font-family: "Manrope", Arial, sans-serif;
			font-size: clamp(2.2rem, 4.5vw, 4rem);
			letter-spacing: -0.045em;
			line-height: 1.05;
		}

		.services-section {
			padding: 124px 0 132px;
			background: var(--page);
		}

		.services-inner {
			width: min(1240px, calc(100% - 40px));
			margin: 0 auto;
		}

		.services-intro {
			display: grid;
			grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
			gap: clamp(44px, 7vw, 96px);
			align-items: end;
		}

		.services-intro-copy {
			padding-bottom: 6px;
		}

		.services-intro-copy p {
			margin: 0;
			color: var(--muted);
			font-size: clamp(1.04rem, 1.3vw, 1.16rem);
			line-height: 1.72;
		}

		.services-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 20px;
			margin-top: 70px;
		}

		.service-card {
			--card-accent: var(--blue);
			--card-highlight: rgba(36, 102, 177, 0.08);
			position: relative;
			isolation: isolate;
			display: grid;
			grid-template-columns: 84px minmax(0, 1fr);
			gap: 26px;
			min-height: 320px;
			padding: 38px;
			overflow: hidden;
			border: 1px solid rgba(8, 34, 56, 0.1);
			border-radius: 24px;
			background:
				linear-gradient(rgba(36, 102, 177, 0.026) 1px, transparent 1px),
				linear-gradient(90deg, rgba(36, 102, 177, 0.026) 1px, transparent 1px),
				radial-gradient(circle at 12% 14%, var(--card-highlight), transparent 34%),
				linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(243, 248, 253, 0.91));
			background-position: 0 0, 0 0, 0 0, 0 0;
			background-size: 26px 26px, 26px 26px, auto, auto;
			box-shadow: 0 16px 45px rgba(8, 34, 56, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
			transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background-position 220ms ease;
		}

		.service-card::before {
			position: absolute;
			top: 21px;
			right: 21px;
			width: 28px;
			height: 28px;
			border-top: 2px solid color-mix(in srgb, var(--card-accent) 32%, transparent);
			border-right: 2px solid color-mix(in srgb, var(--card-accent) 32%, transparent);
			border-radius: 0 7px 0 0;
			content: "";
			pointer-events: none;
		}

		.service-card-websites {
			--card-accent: #2466b1;
			--card-highlight: rgba(36, 102, 177, 0.09);
		}

		.service-card-marketing {
			--card-accent: #387cae;
			--card-highlight: rgba(56, 124, 174, 0.085);
		}

		.service-card-branding {
			--card-accent: #526faf;
			--card-highlight: rgba(82, 111, 175, 0.08);
		}

		.service-card-strategy {
			--card-accent: #216f91;
			--card-highlight: rgba(33, 111, 145, 0.085);
		}

		.service-card:hover,
		.service-card:focus-within {
			border-color: color-mix(in srgb, var(--card-accent) 30%, transparent);
			background-position: 0 0, 3px 3px, 0 0, 0 0;
			box-shadow: 0 24px 54px rgba(8, 34, 56, 0.11), inset 0 1px 0 #fff;
			transform: translateY(-3px);
		}

		.service-icon-wrap {
			display: grid;
			position: relative;
			z-index: 2;
			width: 84px;
			height: 84px;
			border: 1px solid color-mix(in srgb, var(--card-accent) 18%, transparent);
			border-radius: 20px;
			background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), var(--blue-soft));
			box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(8, 34, 56, 0.07);
			color: var(--card-accent);
			place-items: center;
		}

		.service-icon-wrap::after {
			position: absolute;
			top: 12px;
			right: 12px;
			width: 10px;
			height: 10px;
			border-top: 2px solid color-mix(in srgb, var(--card-accent) 38%, transparent);
			border-right: 2px solid color-mix(in srgb, var(--card-accent) 38%, transparent);
			border-radius: 0 4px 0 0;
			content: "";
			pointer-events: none;
		}

		.service-icon {
			width: 64px;
			height: 64px;
			fill: none;
			stroke: currentColor;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-width: 1.75;
			transition: transform 180ms ease;
		}

		.service-card:hover .service-icon,
		.service-card:focus-within .service-icon {
			transform: scale(1.035);
		}

		.service-icon .illustration-panel {
			fill: rgba(255, 255, 255, 0.78);
			stroke: color-mix(in srgb, currentColor 58%, white);
		}

		.service-icon .illustration-fill {
			fill: color-mix(in srgb, currentColor 14%, white);
		}

		.service-icon .illustration-dot {
			fill: currentColor;
			stroke: none;
		}

		.service-card-art {
			position: absolute;
			z-index: 0;
			right: -8px;
			bottom: -5px;
			width: 238px;
			height: 160px;
			color: var(--card-accent);
			opacity: 0.085;
			pointer-events: none;
			transition: opacity 180ms ease, transform 180ms ease;
		}

		.service-card-art svg {
			display: block;
			width: 100%;
			height: 100%;
			fill: none;
			stroke: currentColor;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-width: 1.35;
		}

		.service-card:hover .service-card-art,
		.service-card:focus-within .service-card-art {
			opacity: 0.115;
			transform: translate(-2px, -2px);
		}

		.service-card-marketing .service-card-art {
			right: -16px;
			width: 250px;
		}

		.service-card-branding .service-card-art {
			bottom: -12px;
			width: 230px;
		}

		.service-card-strategy .service-card-art {
			right: -12px;
			bottom: -10px;
			width: 248px;
		}

		.service-card-content {
			position: relative;
			z-index: 1;
		}

		.service-card-content::after {
			display: block;
			width: 46px;
			height: 3px;
			margin-top: 22px;
			border-radius: 999px;
			background: linear-gradient(90deg, var(--card-accent), rgba(36, 102, 177, 0.08));
			content: "";
			opacity: 0.42;
		}

		.service-number {
			display: block;
			margin-bottom: 23px;
			color: #7b94a7;
			font-family: "Manrope", Arial, sans-serif;
			font-size: 0.72rem;
			font-weight: 800;
			letter-spacing: 0.16em;
		}

		.service-card h3 {
			margin: 0;
			font-family: "Manrope", Arial, sans-serif;
			font-size: clamp(1.25rem, 1.8vw, 1.55rem);
			letter-spacing: -0.025em;
			line-height: 1.2;
			text-transform: uppercase;
		}

		.service-card p {
			margin: 17px 0 0;
			color: var(--muted);
			font-size: 1rem;
			line-height: 1.68;
		}

		.services-footer {
			display: flex;
			justify-content: center;
			margin-top: 48px;
		}

		.services-link {
			display: inline-flex;
			align-items: center;
			gap: 12px;
			padding: 12px 2px;
			border-bottom: 2px solid rgba(36, 102, 177, 0.28);
			color: var(--blue-dark);
			font-weight: 800;
			text-decoration: none;
			transition: border-color 180ms ease, color 180ms ease, gap 180ms ease;
		}

		.services-link:hover,
		.services-link:focus-visible {
			gap: 17px;
			border-color: var(--blue);
			color: var(--blue);
			outline: none;
		}

		.contact-section {
			width: min(1180px, calc(100% - 40px));
			margin: 0 auto 40px;
			padding: 70px;
			border-radius: 28px;
			background: var(--ink);
			color: var(--white);
			text-align: center;
		}

		.contact-section p {
			margin: 18px auto 0;
			color: #c6d6e2;
			font-size: 1.1rem;
			line-height: 1.65;
		}

		.contact-button {
			margin-top: 32px;
			box-shadow: 0 14px 30px rgba(36, 102, 177, 0.34);
		}

		.site-footer {
			margin-top: 80px;
			background: #071f34;
			color: #fff;
		}

		.footer-inner {
			display: grid;
			grid-template-columns: minmax(0, 1.5fr) minmax(160px, 0.45fr) minmax(160px, 0.45fr);
			gap: 56px;
			width: min(1240px, calc(100% - 40px));
			margin: 0 auto;
			padding: 64px 0 48px;
		}

		.footer-logo {
			display: inline-flex;
			align-items: center;
			max-width: 220px;
			margin-bottom: 22px;
			padding: 8px 14px;
			border-radius: 14px;
			background: rgba(255, 255, 255, 0.96);
		}

		.footer-logo img {
			width: auto;
			height: 72px;
		}

		.footer-tagline {
			max-width: 520px;
			margin: 0;
			color: #d6e4ef;
			font-size: 1.05rem;
			line-height: 1.65;
		}

		.footer-services {
			max-width: 620px;
			margin: 22px 0 0;
			color: #94afc3;
			font-size: 0.92rem;
			font-weight: 700;
			letter-spacing: 0.02em;
			line-height: 1.55;
		}

		.footer-nav h3,
		.footer-connect h3 {
			margin: 0 0 18px;
			color: #fff;
			font-family: "Manrope", Arial, sans-serif;
			font-size: 0.9rem;
			font-weight: 800;
			letter-spacing: 0.12em;
			text-transform: uppercase;
		}

		.footer-nav ul,
		.footer-connect ul {
			display: grid;
			gap: 12px;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.footer-nav a,
		.footer-connect a {
			color: #c6d6e2;
			font-weight: 700;
			text-decoration: none;
			transition: color 180ms ease;
		}

		.footer-connect .footer-social-link {
			display: inline-flex;
			align-items: center;
			gap: 8px;
		}

		.footer-social-link svg {
			flex: 0 0 auto;
			width: 17px;
			height: 17px;
			fill: currentColor;
		}

		.footer-connect .footer-member-badge {
			display: inline-block;
			margin-top: 26px;
			line-height: 0;
		}

		.footer-member-badge img {
			display: block;
			width: 130px;
			max-width: 100%;
			height: auto;
		}

		.footer-nav a:hover,
		.footer-nav a:focus-visible,
		.footer-connect a:hover,
		.footer-connect a:focus-visible {
			color: #fff;
			outline: none;
		}

		.footer-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 24px;
			width: min(1240px, calc(100% - 40px));
			margin: 0 auto;
			padding: 24px 0;
			border-top: 1px solid rgba(255, 255, 255, 0.12);
			color: #8fa8bb;
			font-size: 0.9rem;
		}

		.footer-bottom p {
			margin: 0;
		}

		@media (max-width: 1040px) {
			.site-shell {
				width: calc(100% - 24px);
				margin-top: 12px;
			}

			.hero {
				min-height: 720px;
				border-radius: 26px;
				background-position: 56% center;
			}

			.hero::after {
				position: absolute;
				inset: 0;
				background: linear-gradient(90deg, rgba(245, 250, 254, 0.96) 0%, rgba(245, 250, 254, 0.84) 46%, rgba(245, 250, 254, 0.12) 78%);
				content: "";
			}

			.hero-content {
				z-index: 3;
				width: 67%;
				padding-left: 5%;
			}

			.nav-link {
				padding-inline: 13px;
			}

			.services-section {
				padding: 100px 0 108px;
			}

			.services-intro {
				grid-template-columns: 1fr;
				gap: 28px;
			}

			.services-intro-copy {
				max-width: 790px;
			}

			.services-grid {
				margin-top: 56px;
			}

			.service-card {
				grid-template-columns: 66px minmax(0, 1fr);
				gap: 22px;
				min-height: 350px;
				padding: 30px;
			}

			.service-icon-wrap {
				width: 66px;
				height: 66px;
				border-radius: 18px;
			}

			.service-icon {
				width: 52px;
				height: 52px;
			}

			.service-card-art {
				width: 205px;
				height: 138px;
			}
		}

		@media (max-width: 820px) {
			.footer-inner {
				grid-template-columns: 1fr;
				gap: 36px;
				padding: 52px 0 40px;
			}

			.footer-bottom {
				flex-direction: column;
				align-items: flex-start;
				gap: 10px;
			}
		}

		@media (max-width: 760px) {
			.site-shell {
				width: 100%;
				margin: 0;
			}

			.hero {
				min-height: 680px;
				border-radius: 0 0 26px 26px;
				background-position: 63% center;
			}

			.site-header {
				top: 12px;
				left: 50%;
				right: auto;
				width: calc(100% - 24px);
				transform: translateX(-50%);
			}

			.header-inner {
				min-height: 80px;
				padding: 8px 10px 8px 16px;
				border-radius: 18px;
			}

			.logo-link img {
				height: 58px;
			}

			.site-header.is-compact .header-inner {
				min-height: 68px;
				padding: 6px 10px 6px 14px;
				border-radius: 16px;
			}

			.site-header.is-compact .logo-link img {
				height: 46px;
			}

			.site-header.is-compact .nav-toggle-label {
				width: 44px;
				height: 44px;
				border-radius: 12px;
			}

			.site-header.is-compact .nav-list {
				top: 52px;
			}

			.main-nav {
				position: relative;
			}

			.nav-toggle-label {
				display: grid;
				width: 48px;
				height: 48px;
				border-radius: 13px;
				background: #edf4fb;
				color: var(--ink);
				cursor: pointer;
				font-size: 0;
				place-items: center;
			}

			.nav-toggle-label::before {
				font-size: 1.5rem;
				line-height: 1;
				content: "☰";
			}

			.nav-toggle:checked + .nav-toggle-label::before {
				content: "×";
			}

			.nav-list {
				display: none;
				position: absolute;
				top: 58px;
				right: 0;
				width: 210px;
				padding: 10px;
				border: 1px solid var(--line);
				border-radius: 16px;
				background: rgba(255, 255, 255, 0.98);
				box-shadow: var(--shadow);
			}

			.nav-toggle:checked ~ .nav-list {
				display: grid;
			}

			.nav-link {
				width: 100%;
			}

			.hero::after {
				background: linear-gradient(90deg, rgba(245, 250, 254, 0.98) 0%, rgba(245, 250, 254, 0.9) 58%, rgba(245, 250, 254, 0.3) 100%);
			}

			.hero-content {
				width: 100%;
				padding: 126px 24px 52px;
			}

			.hero-copy {
				max-width: 570px;
			}

			h1 {
				font-size: clamp(2.5rem, 11.5vw, 3.5rem);
			}

			.hero-text {
				max-width: 470px;
				font-size: 1.08rem;
			}

			.services-section {
				padding: 78px 0 84px;
			}

			.services-inner {
				width: min(620px, calc(100% - 32px));
			}

			.services-grid {
				grid-template-columns: 1fr;
				gap: 16px;
				margin-top: 44px;
			}

			.service-card {
				grid-template-columns: 58px minmax(0, 1fr);
				gap: 18px;
				min-height: 0;
				padding: 26px 22px;
				border-radius: 20px;
			}

			.service-icon-wrap {
				width: 58px;
				height: 58px;
				border-radius: 16px;
			}

			.service-icon {
				width: 46px;
				height: 46px;
			}

			.service-card-art {
				width: 190px;
				height: 128px;
				right: -28px;
				bottom: -18px;
				opacity: 0.055;
			}

			.service-card:hover .service-card-art,
			.service-card:focus-within .service-card-art {
				opacity: 0.075;
				transform: translate(-1px, -1px);
			}

			.service-number {
				margin-bottom: 15px;
			}

			.service-card p {
				font-size: 0.97rem;
			}

			.services-footer {
				justify-content: flex-start;
				margin-top: 36px;
			}

			.contact-section {
				padding: 54px 24px;
			}
		}

		@media (max-width: 430px) {
			.hero {
				min-height: 650px;
			}

			.logo-link img {
				height: 50px;
			}

			.hero-content {
				align-items: flex-start;
				padding-top: 150px;
			}

			.eyebrow {
				margin-bottom: 15px;
			}

			h1 {
				font-size: clamp(2.4rem, 11vw, 3.1rem);
			}

			.hero-text {
				margin-top: 22px;
				line-height: 1.55;
			}

			.hero-actions {
				margin-top: 24px;
			}

			.site-footer {
				margin-top: 56px;
			}

			.footer-inner,
			.footer-bottom {
				width: min(620px, calc(100% - 32px));
			}

			.footer-logo img {
				height: 62px;
			}

			.footer-member-badge img {
				width: 112px;
			}
		}

		@media (prefers-reduced-motion: reduce) {
			html {
				scroll-behavior: auto;
			}

			* {
				transition-duration: 0.01ms !important;
			}
		}