@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* Design tokens */
:root {
  --ink: #10293d;
  --ink-2: #183d54;
  --aqua: #4bc8ed;
  --mint: #6fc9c4;
  --cyan: #08c5d8;
  --turquoise: #08d7c6;
  --teal: #2ca5a0;
  --mist: #eefbfc;
  --paper: #ffffff;
  --muted: #5d7180;
  --line: rgba(16, 41, 61, .14);
  --radius: 28px;
  --shadow: 0 28px 80px rgba(16, 41, 61, .13);
  --clay-icon-disc: rgba(255,255,255,.92);
  --clay-icon-shadow: 0 10px 18px rgba(16,41,61,.18);
  --display: 'Plus Jakarta Sans', sans-serif;
  --body: 'DM Sans', sans-serif;
  --heading-tracking: -.03em;
}

/* Base and accessibility */
* { box-sizing: border-box; }
html { max-width: 100%; scroll-behavior: smooth; }
body { max-width: 100%; margin: 0; color: var(--ink); background: var(--paper); font: 400 17px/1.75 var(--body); overflow-x: clip; }
body.nav-open { overflow: hidden; }
h1, h2, h3, h4, h5, h6 { letter-spacing: var(--heading-tracking); }
img { display: block; max-width: 100%; }
.clay-icon-disc { --clay-disc-size: 64px; --clay-icon-size: 78px; width: var(--clay-disc-size); height: var(--clay-disc-size); display: grid; grid-template: 100% / 100%; place-items: center; overflow: visible; border-radius: 50%; background: var(--clay-icon-disc); box-shadow: 0 8px 22px rgba(16,41,61,.08); }
.clay-icon-disc img { width: var(--clay-icon-size); max-width: none; height: var(--clay-icon-size); object-fit: contain; filter: drop-shadow(var(--clay-icon-shadow)); }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.container { width: min(1340px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

/* Header and navigation */
.site-header { position: absolute; inset: 0 0 auto; z-index: 30; color: #fff; }
.site-header__bar { border-bottom: 1px solid rgba(255,255,255,.24); background: linear-gradient(90deg, var(--cyan), var(--turquoise)); font-size: 14px; }
.site-header__bar .container, .site-header__main .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header__bar .container { min-height: 44px; }
.contact-strip, .social-strip, .main-nav, .main-nav__surface, .main-nav__links { display: flex; align-items: center; gap: 22px; }
.contact-strip a, .social-strip a { opacity: .82; }
.contact-strip a:hover, .social-strip a:hover { opacity: 1; }
.social-strip { gap: 8px; }
.social-strip a { display: grid; place-items: center; opacity: 1; transition: opacity .2s ease, transform .2s ease; }
.social-strip a:hover { transform: translateY(-1px); }
.social-strip img { width: 34px; height: 34px; object-fit: contain; }
.site-header__main { color: var(--ink); border-bottom: 1px solid rgba(16,41,61,.1); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgba(16,41,61,.08); }
.site-header__main .container { min-height: 92px; }
.brand img { width: 205px; height: 62px; object-fit: contain; object-position: left center; }
.main-nav { gap: 3px; }
.main-nav__surface, .main-nav__links { gap: 10px; }
.main-nav a { padding: 10px 9px; border-radius: 999px; font: 700 11px/1 var(--display); text-transform: uppercase; letter-spacing: .035em; }
.main-nav a:hover, .main-nav a[aria-current='page'] { background: rgba(8,197,216,.14); }
.mobile-nav__intro, .mobile-nav__footer, .mobile-nav__art { display: none; }
.header-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 23px; position: relative; border-radius: 999px; font: 800 13px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; transition: transform .2s, background .2s; }
.header-cta { margin-right: 52px; color: var(--button-ink); background: var(--button-surface); }
.button { --button-surface: var(--ink); --button-ink: #fff; margin-right: 52px; color: var(--button-ink); background: var(--button-surface); border: 0; cursor: pointer; }
.header-cta::after, .button:not(.button--outline)::after { content: '→'; width: 54px; height: 54px; position: absolute; top: 50%; right: -52px; display: grid; place-items: center; border-radius: 50%; color: var(--button-ink); background: var(--button-surface); font-size: 1.15rem; transform: translateY(-50%); }
.button--gradient, .header-cta.button--gradient { --button-surface: linear-gradient(90deg, var(--teal) 0%, var(--turquoise) 60%, var(--cyan) 100%); --button-arrow-surface: linear-gradient(90deg, var(--cyan), var(--aqua)); --button-ink: var(--ink); }
.button--gradient:not(.button--outline)::after, .header-cta.button--gradient::after { background: var(--button-arrow-surface); }
.button--light { --button-surface: #fff; --button-ink: var(--ink); }
.button--outline { margin-right: 0; color: var(--ink); background: rgba(255,255,255,.16); border: 1px solid rgba(16,41,61,.38); }
.button:hover, .header-cta:hover { transform: translateY(-2px); }
.menu-toggle { width: 56px; height: 56px; padding: 0; display: none; place-items: center; position: relative; border: 0; border-radius: 50%; color: var(--ink); background: linear-gradient(145deg, var(--turquoise), var(--aqua)); box-shadow: 0 12px 30px rgba(8,197,216,.24), inset 0 0 0 1px rgba(255,255,255,.5); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.menu-toggle:hover { transform: rotate(4deg) scale(1.04); box-shadow: 0 15px 34px rgba(8,197,216,.32), inset 0 0 0 1px rgba(255,255,255,.65); }
.menu-toggle__icon { width: 24px; height: 16px; position: relative; display: block; }
.menu-toggle__icon::before, .menu-toggle__icon::after { content: ''; height: 3px; position: absolute; right: 0; border-radius: 999px; background: var(--ink); transition: width .25s ease, top .25s ease, transform .25s ease; }
.menu-toggle__icon::before { width: 24px; top: 2px; }
.menu-toggle__icon::after { width: 16px; top: 11px; }
.menu-toggle[aria-expanded='true'] .menu-toggle__icon::before, .menu-toggle[aria-expanded='true'] .menu-toggle__icon::after { width: 24px; top: 7px; }
.menu-toggle[aria-expanded='true'] .menu-toggle__icon::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__icon::after { transform: rotate(-45deg); }

/* Homepage hero and service ticker */
.hero { min-height: 870px; padding: 220px 0 105px; color: #fff; background: var(--cyan); position: relative; isolation: isolate; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -3; background: radial-gradient(circle at 77% 30%, rgba(255,255,255,.22), transparent 27%), radial-gradient(circle at 18% 77%, rgba(255,255,255,.12), transparent 31%), linear-gradient(90deg, rgba(16,41,61,.3), rgba(16,41,61,.06)), linear-gradient(125deg, var(--cyan) 0%, var(--turquoise) 48%, var(--teal) 100%); }
.hero::after { content: ''; position: absolute; width: 680px; height: 680px; right: -160px; top: 120px; z-index: -2; border: 1px solid rgba(16,41,61,.18); border-radius: 50%; box-shadow: 0 0 0 90px rgba(16,41,61,.045), 0 0 0 180px rgba(16,41,61,.035); }
.hero-grid { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: 76px; }
.eyebrow { display: inline-flex; align-items: center; margin-bottom: 21px; padding: 12px 18px; border-radius: 999px; color: transparent; background-image: linear-gradient(90deg, var(--teal), var(--aqua)), linear-gradient(135deg, rgba(75,200,237,.13), rgba(8,215,198,.09)); background-clip: text, border-box; -webkit-background-clip: text, border-box; -webkit-text-fill-color: transparent; font: 800 13px/1 var(--display); letter-spacing: .045em; text-transform: uppercase; }
.eyebrow::before { content: none; }
.hero .eyebrow, .page-hero .eyebrow, .section--marketing-importance .eyebrow, .impact-highlights .eyebrow, .contact-panel .eyebrow { padding: 12px 18px; color: #fff; background: rgba(255,255,255,.14); -webkit-text-fill-color: #fff; letter-spacing: .045em; }
.hero h1, .page-hero h1 { margin: 0; font: 800 clamp(3.5rem, 6.4vw, 6.4rem)/.94 var(--display); letter-spacing: var(--heading-tracking); text-wrap: balance; }
.hero h1 .gradient { padding-right: .08em; color: transparent; background: linear-gradient(100deg, var(--ink), #1b5570); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 8px 28px rgba(255,255,255,.1); }
.hero h1 .gradient-g { color: #123249; background: none; -webkit-text-fill-color: #123249; }
.hero-lead { max-width: 700px; margin: 30px 0 0; color: rgba(255,255,255,.88); font-size: clamp(1.08rem, 1.5vw, 1.28rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 37px; }
.hero-visual { position: relative; min-height: 530px; transform: translateX(-100px); }
.route-orbit { position: absolute; top: 50%; left: 50%; width: min(112%, 540px); aspect-ratio: 1; z-index: 0; border: 1px dashed rgba(255,255,255,.35); border-radius: 50%; animation: hero-orbit 26s linear infinite; }
.route-orbit::before, .route-orbit::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 36px rgba(75,200,237,.8); }
.route-orbit::before { left: 8%; top: 15%; background: #fff; }
.route-orbit::after { right: 9%; bottom: 17%; background: #fff; }
.hero-team-art { position: absolute; inset: -2% -7% -6%; z-index: 1; display: grid; place-items: end center; pointer-events: none; transform: translateX(50px) scale(1.1); transform-origin: center bottom; }
.hero-team-art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 30px 34px rgba(16,41,61,.24)); }
.floating-note { position: absolute; z-index: 2; padding: 15px 19px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: var(--shadow); font: 800 13px/1.2 var(--display); }
.hero .floating-note { translate: 50px 0; }
.floating-note--one { left: -4%; bottom: 16%; transform: rotate(5deg); }
.floating-note--two { right: -5%; top: calc(34% - 15px); transform: rotate(-5deg); }
.marquee { overflow: hidden; color: var(--aqua); background: var(--ink); transform: rotate(-1deg); margin: -28px 0 0; position: relative; z-index: 4; }
.marquee__track { display: flex; width: max-content; gap: 25px; padding: 19px 0; animation: ticker 27s linear infinite; }
.marquee span { display: flex; align-items: center; gap: 25px; font: 800 15px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.marquee i { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); }

/* Shared section structure */
.section { padding: 118px 0; position: relative; }
.section--mist { background: var(--mist); }
.section-title { display: grid; grid-template-columns: 1fr .62fr; gap: 70px; align-items: end; margin-bottom: 58px; }
.section-title h2 { margin: 0; font: 800 clamp(2.6rem, 5vw, 5rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
.section-title p { margin: 0; color: var(--muted); }

/* Who we are */
.section--who .proof-card { color: var(--ink); background: #fff; border: 1px solid rgba(8,197,216,.2); box-shadow: 0 28px 80px rgba(8,197,216,.16); }
.section--who .proof-card::after { border-color: rgba(8,215,198,.16); }
.section--who .proof-card__number { color: var(--cyan); -webkit-text-stroke: 0; }
.who-visual { min-height: 530px; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(8,197,216,.2); border-radius: 38px; background: radial-gradient(circle at 24% 20%, rgba(255,255,255,.9), transparent 30%), linear-gradient(145deg, #effcfc, #d9f6f5); box-shadow: 0 28px 80px rgba(8,197,216,.16); }
.who-visual::before { content: ''; width: 430px; height: 430px; position: absolute; right: -120px; bottom: -150px; z-index: -1; border: 66px solid rgba(8,215,198,.1); border-radius: 50%; box-shadow: 0 0 0 62px rgba(75,200,237,.055); }
.who-visual > img { width: 100%; height: 100%; position: absolute; inset: 2% 0 0; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 24px 30px rgba(16,41,61,.16)); }
.who-experience { position: absolute; left: 50%; bottom: 20px; z-index: 2; padding: 16px 19px; display: flex; align-items: center; gap: 12px; border-radius: 20px; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 18px 50px rgba(16,41,61,.13); transform: translateX(-50%); }
.who-experience strong { display: inline-block; padding-right: .08em; color: transparent; background: linear-gradient(90deg, var(--teal), var(--aqua)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 800 3.2rem/.8 var(--display); letter-spacing: -.07em; }
.who-experience span { font: 800 12px/1.15 var(--display); text-transform: uppercase; }
.section--marketing-importance { color: #fff; background: linear-gradient(110deg, var(--teal), var(--turquoise) 55%, var(--cyan)); }
.section--marketing-importance .copy p { color: rgba(255,255,255,.88); }
.section--marketing-importance .proof-card { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); box-shadow: none; }
.section--marketing-importance .proof-card::after { border-color: rgba(255,255,255,.12); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.copy h2 { margin: 0 0 25px; font: 800 clamp(2.35rem, 4vw, 4.4rem)/1.02 var(--display); letter-spacing: var(--heading-tracking); }
.copy p { margin: 0 0 18px; color: var(--muted); }
.proof-card { min-height: 500px; padding: 48px; position: relative; overflow: hidden; color: #fff; background: linear-gradient(145deg, var(--ink-2), var(--ink)); border-radius: 38px; box-shadow: var(--shadow); }
.proof-card::after { content: ''; position: absolute; width: 370px; height: 370px; right: -110px; bottom: -130px; border: 70px solid rgba(75,200,237,.1); border-radius: 50%; }
.proof-card__number { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.28); font: 800 clamp(7rem, 13vw, 11rem)/.8 var(--display); letter-spacing: -.08em; }
.proof-card h3 { max-width: 390px; margin: 42px 0 0; font: 700 2.2rem/1.15 var(--display); }
/* Services showcase */
.service-showcase { overflow: hidden; background: linear-gradient(155deg, var(--mist) 0%, #dff8f8 100%); }

/* Website package cards */
.website-options { padding: 80px 0; overflow: hidden; isolation: isolate; background: linear-gradient(145deg, #f8feff 0%, #eefbfc 52%, #f3f5ff 100%); }
.website-options::before { content: ''; width: 420px; height: 420px; position: absolute; left: -255px; bottom: -170px; z-index: -1; border: 70px solid rgba(75,200,237,.08); border-radius: 50%; box-shadow: 0 0 0 68px rgba(8,215,198,.045); }
.website-options::after { content: ''; width: 260px; height: 260px; position: absolute; right: -145px; top: 80px; z-index: -1; border-radius: 42% 58% 65% 35%; background: rgba(8,197,216,.06); transform: rotate(24deg); }
.website-options__intro { display: grid; grid-template-columns: 1fr .55fr; gap: 58px; align-items: end; margin-bottom: 34px; }
.website-options__intro h2 { margin: 0; font: 800 clamp(2.8rem, 5vw, 5rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
.website-options__intro p { margin: 0 0 8px; color: var(--muted); font-size: 1.08rem; }
.website-options__clarifier { margin-top: 14px; display: block; color: var(--ink); font-weight: 700; }
.website-options__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.website-plan { min-width: 0; padding: 22px; position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(75,200,237,.34); border-radius: 28px; box-shadow: 0 24px 65px rgba(16,41,61,.08); }
.website-plan__header { height: 214px; min-height: 214px; padding: 20px 24px; position: relative; overflow: hidden; color: #fff; background: linear-gradient(140deg, var(--teal), var(--cyan)); border-radius: 22px; }
.website-plan__header::after { content: ''; width: 155px; height: 155px; position: absolute; right: -42px; bottom: -72px; border: 28px solid rgba(255,255,255,.12); border-radius: 50%; }
.website-plan--standard .website-plan__header { background: linear-gradient(140deg, var(--ink), #17637b 70%, var(--aqua)); }
.website-plan--bespoke .website-plan__header { background: linear-gradient(140deg, var(--cyan), var(--turquoise) 58%, var(--teal)); }
.website-plan__number { --clay-disc-size: 58px; --clay-icon-size: 76px; position: absolute; right: 20px; top: 17px; z-index: 2; }
.website-plan__number img { place-self: center; object-position: center; transform: none; }
.website-plan--micro .website-plan__number { --clay-icon-size: 76px; }
.website-plan--standard .website-plan__number { --clay-icon-size: 82px; }
.website-plan--bespoke .website-plan__number { --clay-icon-size: 72px; }
.website-plan__header h3 { max-width: 245px; margin: 0; font: 800 clamp(1.45rem, 2vw, 1.85rem)/1.05 var(--display); letter-spacing: var(--heading-tracking); }
.website-plan__price { margin-top: 22px; display: flex; align-items: flex-end; gap: 9px; }
.website-plan__price strong { font: 800 clamp(2.8rem, 4vw, 4.2rem)/.82 var(--display); letter-spacing: -.07em; }
.website-plan__price span { padding-bottom: 5px; font: 700 14px/1 var(--display); text-transform: uppercase; }
.website-plan__price--quote { align-items: baseline; gap: 12px; }
.website-plan__price--quote strong { font-size: clamp(2.45rem, 3.6vw, 3.65rem); }
.website-plan__header p { margin: 10px 0 0; color: rgba(255,255,255,.82); font-weight: 700; }
.website-plan__best-for { min-height: 46px; margin: 14px 4px 0; padding: 9px 12px; border-radius: 14px; color: var(--muted); background: var(--mist); font-size: .84rem; line-height: 1.35; }
.website-plan__best-for strong { color: var(--ink); font-family: var(--display); }
.website-plan__summary { min-height: 72px; margin: 12px 4px; color: var(--muted); line-height: 1.5; }
.website-plan__features { margin: 0 4px 20px; }
.website-plan__features summary { display: none; }
.website-plan ul { margin: 0; padding: 0; list-style: none; }
.website-plan li { padding: 7px 0 7px 27px; position: relative; border-bottom: 1px solid rgba(16,41,61,.09); color: rgba(16,41,61,.82); font-size: .94rem; line-height: 1.3; }
.website-plan li::before { content: '✓'; position: absolute; left: 0; top: 7px; color: var(--cyan); font-weight: 800; }
.website-plan__button { width: calc(100% - 52px); margin-top: auto; }
.section--marketing-intro { background: #fff; }
.section--marketing-intro::before { content: ''; height: 1px; position: absolute; top: 0; left: max(20px, calc((100% - 1340px) / 2)); right: max(20px, calc((100% - 1340px) / 2)); background: linear-gradient(90deg, transparent, rgba(8,197,216,.28), transparent); }

/* Expandable service cards */
.service-showcase-grid { height: 430px; display: flex; gap: 20px; }
.service-showcase-card { width: 118px; flex: 0 0 118px; position: relative; overflow: hidden; border-radius: 28px; background: var(--ink); box-shadow: 0 24px 70px rgba(16,41,61,.12); transition: flex-basis .45s ease, width .45s ease, transform .3s ease; }
.service-showcase-card.is-active { width: calc(100% - 414px); flex-basis: calc(100% - 414px); }
.service-showcase-card--web { background: linear-gradient(135deg, var(--teal), var(--cyan)); }
.service-showcase-card--social { background: linear-gradient(135deg, var(--turquoise), var(--aqua)); }
.service-showcase-card--seo { background: linear-gradient(135deg, var(--aqua), #2588ad); }
.service-showcase-card--ads { background: linear-gradient(135deg, var(--teal), var(--ink)); }
.service-journey-cta { margin-top: 34px; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 32px; border: 1px solid rgba(8,197,216,.2); border-radius: 28px; background: rgba(255,255,255,.72); box-shadow: 0 18px 50px rgba(16,41,61,.07); }
.service-journey-cta p { max-width: none; margin: 0; color: var(--muted); }
.service-journey-cta strong { color: var(--ink); font-family: var(--display); }
.service-journey-cta .button { flex: 0 0 auto; }
.service-showcase-toggle { width: 100%; height: 100%; padding: 26px 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: absolute; inset: 0; z-index: 4; color: #fff; background: transparent; border: 0; cursor: pointer; transition: opacity .2s ease; }
.service-showcase-toggle span { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 1.65rem/1.02 var(--display); }
.service-showcase-toggle b, .service-showcase-content > span { --clay-disc-size: 64px; --clay-icon-size: 70px; color: var(--ink); }
.service-showcase-toggle b img, .service-showcase-icon img { place-self: center; object-position: center; }
.service-showcase-toggle:focus-visible { outline: 3px solid #fff; outline-offset: -7px; }
.service-showcase-card.is-active .service-showcase-toggle { opacity: 0; pointer-events: none; }
.service-showcase-panel { position: absolute; inset: 0; opacity: 0; transform: scale(.98); transition: opacity .34s ease .08s, transform .4s ease; }
.service-showcase-card.is-active .service-showcase-panel { opacity: 1; transform: none; }
.service-art-placeholder { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 68% 28%, rgba(255,255,255,.52), transparent 13%), radial-gradient(circle at 65% 52%, rgba(255,255,255,.2), transparent 25%), linear-gradient(135deg, rgba(255,255,255,.22), transparent 62%); }
.service-art-placeholder::before { content: ''; width: 310px; height: 310px; position: absolute; right: 6%; top: 7%; border: 58px solid rgba(255,255,255,.16); border-radius: 50%; transform: rotate(-12deg); }
.service-art-placeholder::after { content: ''; width: 175px; height: 230px; position: absolute; right: 13%; bottom: -34px; border-radius: 48% 48% 20% 20%; background: rgba(255,255,255,.14); box-shadow: 0 0 0 24px rgba(255,255,255,.06); }
.service-card-art { width: 88%; height: 110%; position: absolute; right: -8%; top: -5%; z-index: 1; object-fit: contain; object-position: right center; opacity: .7; filter: saturate(.72) contrast(.94); -webkit-mask-image: linear-gradient(90deg, transparent 1%, rgba(0,0,0,.22) 24%, #000 58%); mask-image: linear-gradient(90deg, transparent 1%, rgba(0,0,0,.22) 24%, #000 58%); }
.service-showcase-card--web .service-card-art { right: 2%; }
.service-showcase-card--social .service-card-art { width: 75%; right: 1%; }
.service-showcase-card--seo .service-card-art { width: 82%; right: -1%; }
.service-showcase-card--ads .service-card-art { width: 78%; right: 0; }
.service-showcase-card--ads .service-art-placeholder::before { border-color: rgba(255,255,255,.1); }
.service-showcase-card--ads .service-art-placeholder::after { background: rgba(255,255,255,.09); box-shadow: 0 0 0 24px rgba(255,255,255,.035); }
.service-showcase-panel::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(16,41,61,.78)); }
.service-showcase-content { max-width: 560px; position: absolute; left: 36px; right: 36px; bottom: 34px; z-index: 2; color: #fff; }
.service-showcase-content > span { margin-bottom: 18px; }
.service-showcase-content h3 { max-width: 510px; margin: 0 0 14px; font: 800 clamp(2rem, 3.4vw, 3.5rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
.service-showcase-content a { display: inline-flex; padding: 10px 16px; border: 1px solid rgba(255,255,255,.52); border-radius: 999px; background: rgba(16,41,61,.18); backdrop-filter: blur(10px); font: 800 12px/1 var(--display); text-transform: uppercase; }
.service-showcase-content a:hover { background: #fff; color: var(--ink); }

/* About-page marketing story */
.story-steps { display: grid; gap: 18px; }
.story-step { display: grid; grid-template-columns: 76px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.story-step span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ink); font: 800 14px var(--display); }
.story-step h3 { margin: 0 0 8px; font: 800 1.4rem var(--display); }
.story-step p { margin: 0; color: var(--muted); }
.marketing-copy { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 45px; padding: 34px 38px; background: #fff; border: 1px solid rgba(8,197,216,.18); border-radius: 24px; box-shadow: 0 22px 60px rgba(16,41,61,.08); }
.marketing-copy p { max-width: 850px; margin: 0 0 12px; color: var(--muted); }
.marketing-copy p:last-child { margin-bottom: 0; }
.marketing-story .story-steps { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.marketing-story .story-step { min-height: 230px; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; position: relative; overflow: hidden; border: 0; border-radius: 24px; background: linear-gradient(145deg, #a9f1ed, var(--turquoise)); }
.marketing-story .story-step:nth-child(2) { background: linear-gradient(145deg, #bceefa, var(--aqua)); }
.marketing-story .story-step:nth-child(3) { color: #fff; background: var(--ink); }
.marketing-story .story-step::after { content: ''; position: absolute; width: 170px; height: 170px; right: -68px; top: -74px; border: 36px solid rgba(255,255,255,.2); border-radius: 50%; }
.marketing-story .story-step span { position: relative; z-index: 1; color: var(--ink); background: rgba(255,255,255,.72); }
.marketing-story .story-step:nth-child(3) span { color: #fff; background: rgba(255,255,255,.14); }
.marketing-story .story-step h3 { max-width: 280px; margin: auto 0 0; position: relative; z-index: 1; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.08; }

/* Homepage marketing overview */
.marketing-overview { padding-block: 96px; overflow: hidden; background: linear-gradient(135deg, #f8ffff 0%, var(--mist) 55%, #e4fbfa 100%); }
.marketing-overview::before { content: ''; width: 520px; height: 520px; position: absolute; left: -330px; bottom: -360px; border: 76px solid rgba(8,197,216,.08); border-radius: 50%; }
.marketing-overview__grid { display: grid; grid-template-columns: minmax(0, 1fr) 620px; align-items: center; gap: clamp(24px, 2.5vw, 38px); }
.marketing-overview__copy { position: relative; z-index: 2; }
.marketing-overview__copy::before { content: ''; position: absolute; inset: -42px -30px -42px -44px; z-index: -1; border: 1px solid rgba(75,200,237,.18); border-radius: 42px 150px 150px 42px; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.58)); box-shadow: 0 28px 80px rgba(16,41,61,.07); }
.marketing-overview__copy h2 { max-width: 690px; margin: 20px 0 28px; font: 800 clamp(3rem, 5.2vw, 5.35rem)/.97 var(--display); letter-spacing: var(--heading-tracking); text-wrap: balance; }
.marketing-overview__copy p { max-width: 650px; margin: 0 0 15px; color: var(--muted); line-height: 1.65; }
.marketing-overview__copy .button { margin-top: 19px; }
.marketing-system { width: min(100%, 620px); aspect-ratio: 1; min-height: 0; position: relative; isolation: isolate; justify-self: end; }
.marketing-system::before { content: ''; position: absolute; inset: 6%; z-index: -2; border-radius: 50%; background: linear-gradient(145deg, var(--teal), var(--turquoise) 54%, var(--cyan)); box-shadow: 0 42px 90px rgba(8,197,216,.22); }
.marketing-system::after { content: ''; width: 70%; height: 70%; position: absolute; left: 15%; top: 15%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 66%); }
.marketing-system__centre { width: 190px; aspect-ratio: 1; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; left: 50%; top: 50%; z-index: 3; border-radius: 50%; color: var(--ink); background: #fff; box-shadow: 0 28px 60px rgba(16,41,61,.2); text-align: center; transform: translate(-50%, -50%); }
.marketing-system__centre span, .marketing-system__centre small { font: 800 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.marketing-system__centre strong { margin: 7px 0 10px; font: 800 2.05rem/.95 var(--display); letter-spacing: -.05em; }
.marketing-system__centre small { color: var(--teal); }
.marketing-system__planet { --orbit-start: 0deg; --orbit-duration: 20s; --orbit-radius: clamp(190px, 19vw, 250px); width: 0; height: 0; position: absolute; left: 50%; top: 50%; z-index: 4; transform-origin: 0 0; animation: solar-orbit var(--orbit-duration) linear infinite; }
.marketing-system__planet::before { content: ''; width: calc(var(--orbit-radius) + var(--orbit-radius)); aspect-ratio: 1; position: absolute; left: calc(0px - var(--orbit-radius)); top: calc(0px - var(--orbit-radius)); z-index: -1; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }
.marketing-system__planet:nth-of-type(even)::before { border-style: dashed; border-color: rgba(255,255,255,.42); }
.marketing-system__node { width: 96px; height: 96px; padding: 13px; display: flex; align-items: center; justify-content: center; position: absolute; left: var(--orbit-radius); top: 0; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 18px 40px rgba(16,41,61,.16); backdrop-filter: blur(10px); text-align: center; transform: translate(-50%, -50%) rotate(calc(0deg - var(--orbit-start))); animation: solar-counter var(--orbit-duration) linear infinite; }
.marketing-system__node strong { font: 800 12px/1.15 var(--display); }
.marketing-system__node--icon { --clay-icon-size: 52px; padding: 16px; border-color: rgba(255,255,255,.72); overflow: hidden; }
.marketing-system__planet--web { --orbit-start: 210deg; --orbit-duration: 29s; --orbit-radius: 250px; }
.marketing-system__planet--seo { --orbit-start: 300deg; --orbit-duration: 21s; --orbit-radius: 195px; }
.marketing-system__planet--social { --orbit-start: 120deg; --orbit-duration: 16s; --orbit-radius: 145px; }
.marketing-system__planet--ads { --orbit-start: 30deg; --orbit-duration: 25s; --orbit-radius: 220px; }
.marketing-system__planet--team { --orbit-start: 275deg; --orbit-duration: 19s; --orbit-radius: 112px; }
.marketing-system__planet--engagement { --orbit-start: 155deg; --orbit-duration: 23s; --orbit-radius: 170px; }
.marketing-system__planet--target { --orbit-start: 65deg; --orbit-duration: 34s; --orbit-radius: 275px; }
/* Testimonials */
.quote-card { margin: 0; padding: 42px; background: rgba(255,255,255,.48); border: 1px solid rgba(16,41,61,.14); border-radius: var(--radius); }
.quote-card p { margin: 0 0 26px; color: rgba(16,41,61,.8); font-size: 1.08rem; }
.quote-card cite { display: grid; gap: 5px; color: var(--ink); font-style: normal; }
.quote-card cite strong { font: 800 14px var(--display); }
.quote-card cite span { color: var(--muted); font: 600 12px/1.2 var(--body); }
.section--feedback { --feedback-surface: #fff; padding: 82px 0 96px; z-index: 2; overflow: hidden; isolation: isolate; color: var(--ink); background: var(--feedback-surface); }
.section--feedback::before { content: ''; width: 520px; height: 520px; position: absolute; left: -310px; top: 70px; z-index: -1; border: 72px solid rgba(8,197,216,.055); border-radius: 50%; }
.feedback-layout { display: block; }
.feedback-intro { margin-bottom: 28px; }
.feedback-intro h2 { max-width: none; margin: 0; white-space: nowrap; font: 800 clamp(3rem, 4vw, 4.35rem)/.96 var(--display); letter-spacing: var(--heading-tracking); }
.feedback-stage { display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(360px, .76fr); gap: clamp(50px, 7vw, 105px); align-items: center; }
.feedback-content { min-width: 0; align-self: center; }
.feedback-visual { width: min(100%, 440px); aspect-ratio: 1; position: relative; justify-self: end; }
.feedback-visual::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: linear-gradient(145deg, var(--teal), var(--turquoise) 58%, var(--cyan)); box-shadow: 0 32px 80px rgba(8,197,216,.22); }
.feedback-visual__orbit { position: absolute; inset: 1%; border: 1px dashed rgba(44,165,160,.45); border-radius: 50%; animation: orbit 24s linear infinite; }
.feedback-visual__orbit::before, .feedback-visual__orbit::after { content: ''; width: 17px; height: 17px; position: absolute; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 24px rgba(75,200,237,.6); }
.feedback-visual__orbit::before { left: 12%; top: 13%; }
.feedback-visual__orbit::after { right: 7%; bottom: 23%; background: var(--turquoise); }
.feedback-visual__art { position: absolute; inset: -8% -7% -11%; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.feedback-visual__art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 28px rgba(16,41,61,.18)); }
.feedback-visual__bubble { padding: 12px 17px; position: absolute; z-index: 2; border-radius: 999px; color: var(--ink); background: #fff; box-shadow: 0 16px 40px rgba(16,41,61,.14); font: 800 11px/1 var(--display); font-style: normal; text-transform: uppercase; animation: feedback-float 6s ease-in-out infinite; }
.feedback-visual__bubble--one { right: -2%; top: 19%; }
.feedback-visual__bubble--two { left: 1%; bottom: 14%; animation-delay: -3s; }
.testimonial-carousel { min-width: 0; position: relative; }
.testimonial-carousel__viewport { overflow: hidden; border-radius: var(--radius); }
.testimonial-carousel__track { --review-index: 0; display: flex; align-items: stretch; transform: translateX(calc(var(--review-index) * -100%)); transition: transform .72s cubic-bezier(.65,0,.2,1); }
.testimonial-carousel__controls { margin-top: 22px; position: absolute; top: 100%; left: 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.testimonial-carousel__controls > button { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: var(--ink); cursor: pointer; font: 800 1rem/1 var(--display); transition: transform .2s ease, background .2s ease; }
.testimonial-carousel__controls > button:hover { background: var(--teal); transform: translateY(-2px); }
.testimonial-carousel__dots { height: 48px; padding: 0 17px; display: flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--mist); border: 1px solid rgba(8,197,216,.18); }
.testimonial-carousel__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(16,41,61,.24); cursor: pointer; transition: width .25s ease, background .25s ease; }
.testimonial-carousel__dots button.is-active { width: 28px; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--cyan)); }
.section--feedback .quote-card { min-height: 265px; padding: 42px 46px 38px 74px; position: relative; overflow: hidden; background: linear-gradient(135deg, #f5feff, var(--mist)); border-color: rgba(8,197,216,.22); box-shadow: 0 24px 70px rgba(16,41,61,.08); }
.testimonial-carousel .quote-card { width: 100%; min-width: 100%; flex: 0 0 100%; }
.section--feedback .quote-card::before { content: '“'; position: absolute; left: 24px; top: 17px; color: var(--cyan); font: 800 4.7rem/.9 var(--display); opacity: .72; }
.section--feedback .quote-card::after { content: ''; width: 150px; height: 150px; position: absolute; right: -70px; bottom: -86px; border: 28px solid rgba(8,215,198,.11); border-radius: 50%; }
.section--feedback .quote-card:nth-child(2) { background: linear-gradient(135deg, #fff, #effafa); }
.section--feedback .quote-card p, .section--feedback .quote-card cite { position: relative; z-index: 1; }
.impact-highlights { padding: 125px 0; overflow: hidden; isolation: isolate; color: #fff; background: radial-gradient(circle at 18% 22%, rgba(255,255,255,.16), transparent 23%), radial-gradient(circle at 82% 78%, rgba(75,200,237,.22), transparent 28%), linear-gradient(120deg, var(--ink) 0%, var(--teal) 42%, var(--cyan) 100%); }
.impact-highlights::before { content: ''; width: 520px; height: 520px; position: absolute; left: -250px; top: -220px; z-index: -1; border: 72px solid rgba(255,255,255,.055); border-radius: 50%; box-shadow: 0 0 0 90px rgba(255,255,255,.035); }
.impact-highlights::after { content: ''; width: 680px; height: 220px; position: absolute; right: -100px; bottom: -120px; z-index: -1; border-radius: 50%; background: rgba(255,255,255,.06); transform: rotate(-7deg); }
.impact-highlights__grid { display: grid; grid-template-columns: .9fr .78fr 1.3fr; align-items: center; }
.impact-highlights__intro { padding-right: 52px; }
.impact-highlights__intro .eyebrow { padding: 12px 16px; border-radius: 999px; background: rgba(255,255,255,.13); }
.impact-highlights__intro h2 { margin: 18px 0 0; font: 800 clamp(2.4rem, 4vw, 4.3rem)/1.02 var(--display); letter-spacing: var(--heading-tracking); }
.impact-highlights__visual { height: 430px; position: relative; z-index: 2; overflow: hidden; border-radius: 30px; background: linear-gradient(145deg, #245f79 0%, #0b2438 100%); box-shadow: 0 30px 80px rgba(16,41,61,.24); }
.impact-highlights__orbit { width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(255,255,255,.3); border-radius: 50%; transform: translate(-50%,-50%); }
.impact-highlights__art { position: absolute; inset: -8% -18% -6%; z-index: 1; display: grid; place-items: end center; pointer-events: none; }
.impact-highlights__art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 28px 30px rgba(0,0,0,.24)); }
.impact-highlights__stats { min-height: 400px; margin-left: -30px; padding-left: 30px; display: grid; grid-template-columns: 1fr 1fr; align-self: center; overflow: hidden; color: var(--ink); background: #fff; border-radius: 30px; box-shadow: 0 30px 80px rgba(16,41,61,.16); }
.impact-highlights__stats article { min-height: 200px; padding: 38px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.impact-highlights__stats article:nth-child(2n) { border-right: 0; }
.impact-highlights__stats article:nth-child(n+3) { border-bottom: 0; }
.impact-highlights__stats strong { display: inline-block; color: transparent; background: linear-gradient(90deg, var(--teal), var(--aqua)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 800 clamp(2.35rem, 3.7vw, 4.2rem)/1 var(--display); letter-spacing: -.06em; }
.impact-highlights__stats h3 { max-width: 210px; margin: 20px 0 0; font: 800 1.2rem/1.15 var(--display); }
/* Contact form */
.contact-section { background: #fff; }
.contact-panel { display: grid; grid-template-columns: .75fr 1.25fr; overflow: hidden; color: #fff; background: var(--ink); border-radius: 38px; box-shadow: var(--shadow); }
.contact-panel__copy { padding: 56px; background: linear-gradient(145deg, rgba(75,200,237,.18), transparent); }
.contact-panel__copy h2 { margin: 0 0 18px; font: 800 clamp(2.4rem, 4vw, 4rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
.contact-panel__copy a { color: var(--aqua); font: 800 1.6rem var(--display); }
.callback-form { padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font: 700 13px var(--display); }
.field input, .field select, .field textarea { width: 100%; min-height: 55px; padding: 12px 16px; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.17); border-radius: 12px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--aqua) 50%), linear-gradient(135deg, var(--aqua) 50%, transparent 50%); background-position: calc(100% - 20px) 24px, calc(100% - 14px) 24px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field select option { color: var(--ink); background: #fff; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid rgba(75,200,237,.38); outline-offset: 2px; border-color: var(--aqua); }
.field--full { grid-column: 1 / -1; }
.form-honeypot { width: 1px; height: 1px; position: absolute; left: -10000px; overflow: hidden; }
.form-consent label { display: flex; align-items: flex-start; gap: 11px; color: rgba(255,255,255,.82); font: 500 12px/1.45 var(--body); cursor: pointer; }
.form-consent input { width: 18px; min-height: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--cyan); }
.form-consent a { color: var(--aqua); text-decoration: underline; text-underline-offset: 2px; }
.form-turnstile { min-height: 0; }
.form-turnstile:empty { display: none; }

.consent-panel {
  position: fixed;
  z-index: 1200;
  right: clamp(16px, 3vw, 42px);
  bottom: clamp(16px, 3vw, 42px);
  width: min(720px, calc(100vw - 32px));
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  color: #fff;
  background-color: var(--ink);
  background-image: linear-gradient(135deg, var(--ink), var(--ink-2) 58%, #148d91);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(5,35,51,.3);
  transform: translateY(18px);
  transition: transform .22s ease;
}
.consent-panel[hidden] { display: none; }
.consent-panel.is-visible { transform: translateY(0); }
.consent-panel__copy strong { display: block; margin-bottom: 6px; font: 800 22px/1.1 var(--display); }
.consent-panel__copy p { margin: 0 0 8px; color: rgba(255,255,255,.82); font-size: 14px; }
.consent-panel__copy a { color: var(--aqua); font-size: 13px; font-weight: 800; text-underline-offset: 3px; }
.consent-panel__actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.consent-panel .button { min-height: 46px; white-space: nowrap; }
.consent-panel .button--outline { color: #fff; border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.06); }

@media (max-width: 700px) {
  .consent-panel { grid-template-columns: 1fr; gap: 18px; padding: 20px; border-radius: 22px; }
  .consent-panel__actions { justify-content: stretch; }
  .consent-panel .button { flex: 1 1 150px; }
}

@media (max-width: 420px) {
  .consent-panel {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    gap: 12px;
    padding: 15px;
    overflow-y: auto;
    border-radius: 18px;
  }
  .consent-panel__copy strong { margin-bottom: 4px; font-size: 18px; }
  .consent-panel__copy p { margin-bottom: 6px; font-size: 12px; line-height: 1.45; }
  .consent-panel__copy a { font-size: 12px; }
  .consent-panel__actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
  .consent-panel .button { min-height: 40px; width: 100%; padding-block: 9px; }
}
.form-status { margin: 2px 0 0; padding: 13px 15px; border-radius: 12px; color: var(--ink); background: var(--mist); font-weight: 700; }
.form-status[data-state='error'] { color: #7c2430; background: #fff0f2; }
.form-status[data-state='success'] { color: #145f59; background: #e7fffb; }
.callback-form button[disabled] { opacity: .62; cursor: wait; }

/* Interior page structure */
.page-hero { padding: 245px 0 105px; color: #fff; background: radial-gradient(circle at 75% 30%, rgba(255,255,255,.24), transparent 30%), linear-gradient(125deg, var(--cyan), var(--turquoise), var(--teal)); }
.page-hero h1 { max-width: 900px; font-size: clamp(3.4rem, 6vw, 6.4rem); }
.page-hero p { max-width: 780px; margin: 25px 0 0; color: rgba(255,255,255,.88); font-size: 1.2rem; }
.about-hero { min-height: 800px; padding-bottom: 95px; position: relative; overflow: hidden; isolation: isolate; }
.about-hero::after { content: ''; width: 670px; height: 670px; position: absolute; right: -180px; top: 125px; z-index: -1; border: 1px solid rgba(16,41,61,.16); border-radius: 50%; box-shadow: 0 0 0 90px rgba(16,41,61,.04), 0 0 0 180px rgba(16,41,61,.03); }
.about-hero__grid { display: grid; grid-template-columns: 1.05fr .75fr; gap: 82px; align-items: center; }
.about-hero__visual { min-height: 450px; position: relative; }
.about-hero__orbit { position: absolute; inset: 7%; border: 1px dashed rgba(255,255,255,.38); border-radius: 50%; }
.about-hero__orbit::before, .about-hero__orbit::after { content: ''; width: 18px; height: 18px; position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 28px rgba(255,255,255,.6); }
.about-hero__orbit::before { left: 7%; top: 20%; }
.about-hero__orbit::after { right: 8%; bottom: 17%; }
.about-hero__logo { width: 68%; position: absolute; left: 50%; top: 50%; padding: 34px; display: grid; place-items: center; border-radius: 38px; background: rgba(255,255,255,.95); box-shadow: 0 30px 90px rgba(16,41,61,.22); transform: translate(-50%,-50%) rotate(-4deg); }
.about-hero__logo img { width: min(100%, 290px); }
.about-hero__note { position: absolute; z-index: 2; padding: 13px 16px; border-radius: 15px; color: var(--ink); background: #fff; box-shadow: 0 18px 50px rgba(16,41,61,.16); font: 800 12px/1.2 var(--display); }
.about-hero__note--one { left: 0; bottom: 18%; transform: rotate(5deg); }
.about-hero__note--two { right: -3%; top: 17%; transform: rotate(-5deg); }
.about-story .proof-card { color: var(--ink); background: #fff; border: 1px solid rgba(8,197,216,.2); box-shadow: 0 28px 80px rgba(8,197,216,.16); }
.about-story .proof-card::after { border-color: rgba(8,215,198,.16); }
.about-story .proof-card__number { color: var(--cyan); -webkit-text-stroke: 0; }
.about-story .proof-card h3 { max-width: 470px; }
.about-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.about-values__grid article { min-height: 330px; padding: 34px; display: flex; flex-direction: column; position: relative; overflow: hidden; background: #fff; border: 1px solid rgba(8,197,216,.18); border-radius: 28px; box-shadow: 0 22px 60px rgba(16,41,61,.07); }
.about-values__grid article::after { content: ''; width: 170px; height: 170px; position: absolute; right: -75px; top: -75px; border: 34px solid rgba(8,215,198,.1); border-radius: 50%; }
.about-values__grid article:nth-child(2) { color: #fff; background: linear-gradient(145deg, var(--teal), var(--cyan)); }
.about-values__grid article:nth-child(3) { color: #fff; background: var(--ink); }
.about-values__grid span { width: 48px; height: 48px; display: grid; place-items: center; position: relative; z-index: 1; border-radius: 50%; color: var(--ink); background: var(--mist); font: 800 12px/1 var(--display); }
.about-values__grid h3 { margin: auto 0 15px; position: relative; z-index: 1; font: 800 1.75rem/1.08 var(--display); letter-spacing: var(--heading-tracking); }
.about-values__grid p { margin: 0; position: relative; z-index: 1; color: var(--muted); line-height: 1.55; }
.about-values__grid article:nth-child(n+2) p { color: rgba(255,255,255,.82); }
.about-commitment { background: linear-gradient(180deg, #fff 0%, #f8feff 100%); }
.about-commitment .proof-card { color: var(--ink); background: linear-gradient(135deg, var(--turquoise), var(--cyan)); box-shadow: 0 28px 80px rgba(8,197,216,.22); }
.about-commitment .proof-card::after { border-color: rgba(255,255,255,.18); }
.about-commitment .proof-card__number { color: rgba(255,255,255,.42); -webkit-text-stroke: 0; }
.about-highlights { padding: 115px 0; }
.about-cta { padding: 58px; display: grid; grid-template-columns: 1fr auto; gap: 70px; align-items: center; overflow: hidden; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(75,200,237,.24), transparent 25%), linear-gradient(120deg, var(--ink), var(--teal)); border-radius: 38px; box-shadow: var(--shadow); }
.about-cta .eyebrow { padding: 12px 18px; color: #fff; background: rgba(255,255,255,.14); -webkit-text-fill-color: #fff; }
.about-cta h2 { margin: 0; font: 800 clamp(2.5rem, 4.6vw, 4.5rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
.about-cta p { max-width: 720px; margin: 20px 0 0; color: rgba(255,255,255,.76); }
.about-cta .button { align-self: center; white-space: nowrap; }
/* Shared interior-page design system */
.page-hero--split { --inner-hero-height: 820px; --inner-hero-grid-height: 520px; --inner-hero-visual-height: 500px; --inner-hero-art-inset: -9% -19% -6%; --inner-hero-art-shift: -100px; height: var(--inner-hero-height); min-height: var(--inner-hero-height); padding: 220px 0 80px; position: relative; overflow: hidden; isolation: isolate; }
.page-hero--split::after { content: ''; width: 650px; height: 650px; position: absolute; right: -170px; top: 150px; z-index: -1; border: 1px solid rgba(16,41,61,.16); border-radius: 50%; box-shadow: 0 0 0 86px rgba(16,41,61,.045), 0 0 0 172px rgba(16,41,61,.03); }
.page-hero__grid { height: var(--inner-hero-grid-height); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(440px, .82fr); gap: 64px; align-items: center; }
.page-hero__copy { width: 100%; max-width: 720px; position: relative; z-index: 2; }
.page-hero__copy h1 { max-width: 720px; font-size: clamp(3.5rem, 5.3vw, 5.6rem); }
.page-hero__copy p { max-width: 660px; }
.page-hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 13px; }
.page-hero__visual { width: 100%; height: var(--inner-hero-visual-height); min-height: var(--inner-hero-visual-height); position: relative; }
.page-hero__orbit { position: absolute; inset: 4%; border: 1px dashed rgba(255,255,255,.42); border-radius: 50%; animation: orbit 30s linear infinite; }
.page-hero__orbit::before, .page-hero__orbit::after { content: ''; width: 18px; height: 18px; position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 28px rgba(255,255,255,.58); }
.page-hero__orbit::before { left: 7%; top: 18%; }
.page-hero__orbit::after { right: 8%; bottom: 18%; }
.page-hero__art { position: absolute; inset: var(--inner-hero-art-inset); transform: translateX(var(--inner-hero-art-shift)); }
.page-hero__art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 28px 34px rgba(16,41,61,.22)); }
.page-hero--social { background: radial-gradient(circle at 75% 30%, rgba(255,255,255,.2), transparent 30%), linear-gradient(125deg, var(--turquoise), var(--aqua), var(--teal)); }
.social-media-page .page-hero__art {
  inset: -2% -8% -2%;
  transform: translateX(calc(var(--inner-hero-art-shift) + 30px)) scale(1.05);
  transform-origin: center bottom;
}
.social-media-page .page-hero__orbit {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(480px, 100%);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.page-hero--seo { background: radial-gradient(circle at 75% 30%, rgba(255,255,255,.2), transparent 30%), linear-gradient(125deg, var(--aqua), #2588ad, var(--teal)); }
.seo-page .page-hero__art {
  transform: translateX(calc(var(--inner-hero-art-shift) - 60px)) scale(1.05);
  transform-origin: center bottom;
}
.seo-page .page-hero__orbit {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(480px, 100%);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.page-hero--ads { background: radial-gradient(circle at 75% 30%, rgba(255,255,255,.18), transparent 30%), linear-gradient(125deg, var(--teal), #17637b, var(--ink)); }
.page-hero--ads .page-hero__art {
  transform: translateX(calc(var(--inner-hero-art-shift) - 30px)) scale(1.15);
  transform-origin: center bottom;
}
.page-hero--ads .page-hero__orbit {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(480px, 100%);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.page-hero--ink { background: radial-gradient(circle at 75% 30%, rgba(75,200,237,.2), transparent 30%), linear-gradient(125deg, var(--ink), #17637b, var(--teal)); }
.page-hero--thanks {
  background:
    radial-gradient(circle at 78% 29%, rgba(75,200,237,.22), transparent 28%),
    radial-gradient(circle at 12% 92%, rgba(8,215,198,.12), transparent 32%),
    linear-gradient(125deg, #092b3c 0%, #0d4b60 48%, #147f82 100%);
}
.thank-you-page .page-hero__copy { max-width: 750px; }
.thank-you-page .page-hero__copy h1 { max-width: 750px; font-size: clamp(3.55rem, 5vw, 5.3rem); }
.thank-you-page .page-hero__copy p { max-width: 640px; }
.thank-you-page .page-hero__art {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(590px, 132%);
  aspect-ratio: 1;
  translate: -50% -50%;
  transform: translateX(var(--inner-hero-art-shift));
  z-index: 1;
}
.thank-you-page .page-hero__art img { object-position: center; }
.thank-you-page .page-hero__orbit {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(500px, 112%);
  aspect-ratio: 1;
  translate: calc(-50% + var(--inner-hero-art-shift)) -50%;
}
.thank-you-page .button--outline { color: #fff; border-color: rgba(255,255,255,.4); }
.page-hero--light { color: var(--ink); border-bottom: 1px solid rgba(8,197,216,.24); background: radial-gradient(circle at 78% 25%, rgba(255,255,255,.66), transparent 30%), radial-gradient(circle at 13% 88%, rgba(111,201,196,.25), transparent 34%), linear-gradient(135deg, #e8f9fc 0%, #cceef7 52%, #bde8f2 100%); box-shadow: inset 0 -22px 42px rgba(16,41,61,.045); }
.page-hero--light .page-hero__copy p { color: var(--muted); }
.page-hero--light .eyebrow { color: transparent; background-image: linear-gradient(90deg, var(--teal), var(--aqua)), linear-gradient(135deg, rgba(75,200,237,.13), rgba(8,215,198,.09)); background-clip: text, border-box; -webkit-background-clip: text, border-box; -webkit-text-fill-color: transparent; }
.page-hero--blog { --inner-hero-art-inset: -5% -13% -4%; }
.page-hero--light .page-hero__orbit { border-color: rgba(16,41,61,.16); }
.page-hero--light .page-hero__orbit::before, .page-hero--light .page-hero__orbit::after { background: var(--aqua); box-shadow: 0 0 28px rgba(75,200,237,.48); }

/* Websites landing-page hero alignment */
.websites-page .page-hero__art {
  transform: translateX(calc(var(--inner-hero-art-shift) - 30px)) scale(1.05);
  transform-origin: center bottom;
}
.websites-page .page-hero__orbit {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(480px, 100%);
  aspect-ratio: 1;
  translate: -50% -50%;
}

/* Micro Websites hero alignment */
.micro-websites-page .page-hero__art {
  transform: translateX(calc(var(--inner-hero-art-shift) + 30px));
}
.micro-websites-page .page-hero__orbit {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(480px, 100%);
  aspect-ratio: 1;
  translate: -50% -50%;
}

/* Standard Websites hero alignment */
.standard-websites-page .page-hero__art {
  transform: translateX(calc(var(--inner-hero-art-shift) + 30px));
}
.standard-websites-page .page-hero__orbit {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(480px, 100%);
  aspect-ratio: 1;
  translate: -50% -50%;
}

/* Bespoke Websites hero alignment */
.bespoke-websites-page .page-hero__art {
  transform: translateX(calc(var(--inner-hero-art-shift) + 30px)) scale(1.05);
  transform-origin: center bottom;
}
.bespoke-websites-page .page-hero__orbit {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(480px, 100%);
  aspect-ratio: 1;
  translate: -50% -50%;
}

/* About page visual story */
.about-page { --about-soft-blue: #e8f8fb; --about-deep-teal: #1f7778; }
.page-hero--about::before { content: ''; width: 330px; height: 110px; position: absolute; left: -65px; bottom: -58px; border-radius: 50%; background: rgba(255,255,255,.13); transform: rotate(7deg); }
.page-hero--about .page-hero__art {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(550px, 123%);
  aspect-ratio: 1;
  translate: -50% -50%;
  transform: translateX(var(--inner-hero-art-shift));
  z-index: 1;
}
.page-hero--about .page-hero__art img { object-fit: contain; object-position: center; }
.page-hero--about .page-hero__orbit {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(540px, 120%);
  aspect-ratio: 1;
  translate: calc(-50% + var(--inner-hero-art-shift)) -50%;
  z-index: 0;
}
.page-hero--about .page-hero__visual::after { content: ''; width: 84px; height: 84px; position: absolute; right: 7%; top: 7%; border: 18px solid rgba(255,255,255,.12); border-radius: 50%; animation: about-pulse 5s ease-in-out infinite; }
.about-intro { padding: 105px 0 135px; overflow: hidden; }
.about-intro::before { content: ''; width: 440px; height: 440px; position: absolute; right: -280px; top: 120px; border: 68px solid rgba(75,200,237,.07); border-radius: 50%; }
.about-intro__grid { grid-template-columns: minmax(430px, .9fr) minmax(0, 1.1fr); gap: clamp(70px, 8vw, 125px); }
.about-intro .who-visual { min-height: 590px; transform: rotate(-1.5deg); }
.about-intro .who-visual > img { inset: -1% -2% 0; width: 104%; height: 104%; }
.about-intro .feature-copy { max-width: 660px; }
.about-intro .feature-copy p:last-child { margin-top: 28px; padding: 24px 26px; border-left: 4px solid var(--cyan); border-radius: 0 20px 20px 0; color: var(--ink); background: linear-gradient(90deg, var(--mist), rgba(238,251,252,.22)); font-weight: 600; }
.about-values { padding: 105px 0 100px; overflow: hidden; isolation: isolate; background: linear-gradient(150deg, #f6feff 0%, var(--mist) 48%, #e1f6f8 100%); }
.about-values::before { content: ''; width: 560px; height: 560px; position: absolute; left: -320px; bottom: -320px; z-index: -1; border: 74px solid rgba(8,215,198,.07); border-radius: 50%; box-shadow: 0 0 0 70px rgba(75,200,237,.04); }
.about-values .section-heading { margin-bottom: 58px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr); gap: 70px; align-items: end; max-width: none; }
.about-values .section-heading .eyebrow { grid-column: 1 / -1; justify-self: start; margin-bottom: -35px; }
.about-values .section-heading p { margin: 0 0 8px; }
.about-values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.about-values__grid .feature-card { min-height: 390px; padding: 38px; }
.about-values__grid .feature-card:first-child { min-height: 390px; color: #fff; background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.18), transparent 24%), linear-gradient(145deg, var(--ink), #17637b 62%, var(--teal)); }
.about-values__grid .feature-card:first-child p { color: rgba(255,255,255,.78); }
.about-values__grid .feature-card:nth-child(2) { background: linear-gradient(145deg, var(--teal), var(--cyan)); }
.about-values__grid .feature-card:nth-child(3) { color: var(--ink); background: #fff; }
.about-values__grid .feature-card:nth-child(3) p { color: var(--muted); }
.about-values__grid .feature-card h3 { margin-top: auto; font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.about-values__grid .feature-card::after { width: 210px; height: 210px; }
.about-values__grid .feature-card__icon { --clay-disc-size: 70px; --clay-icon-size: 82px; }
.about-values__grid .feature-card__icon img { filter: drop-shadow(0 9px 9px rgba(16,41,61,.25)); }
.about-process { padding: 90px 0 110px; overflow: hidden; }
.about-process .section-heading { margin-bottom: 54px; }
.about-page .about-process__grid { position: relative; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); gap: 0; align-items: center; }
.about-process__grid::before { display: none; }
.about-process__grid .process-card { min-height: 340px; padding: 30px 32px 34px; z-index: 1; display: flex; flex-direction: column; border-color: rgba(8,197,216,.24); box-shadow: 0 24px 70px rgba(16,41,61,.08); transition: transform .3s ease, box-shadow .3s ease; }
.about-process__grid .process-card:hover { transform: translateY(-7px); box-shadow: 0 30px 78px rgba(16,41,61,.14); }
.about-process__arrow { width: 72px; height: 58px; justify-self: center; position: relative; z-index: 4; }
.about-process__arrow img { width: 100%; height: 100%; display: block; object-fit: contain; }
.about-process__grid .process-card::before { width: 54px; height: 54px; margin: 0 0 32px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: #fff; -webkit-text-fill-color: var(--ink); box-shadow: 0 12px 30px rgba(16,41,61,.12); font-size: 1rem; letter-spacing: 0; }
.about-process__grid .process-card__icon { --clay-disc-size: 78px; --clay-icon-size: 92px; margin: 0 0 auto auto; position: absolute; right: 28px; top: 24px; }
.about-process__grid .process-card h3 { margin-top: auto; font-size: 1.75rem; }
.about-marketing-map { padding: 100px 0; overflow: hidden; isolation: isolate; background: linear-gradient(145deg, #effbfc 0%, #dff6f8 100%); }
.about-marketing-map::after { content: ''; width: 520px; height: 520px; position: absolute; right: -250px; top: 70px; z-index: -1; border: 70px solid rgba(8,197,216,.065); border-radius: 50%; box-shadow: 0 0 0 66px rgba(75,200,237,.04); }
.about-marketing-map__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr); align-items: stretch; gap: 42px; }
.about-marketing-map__copy { display: flex; flex-direction: column; gap: 28px; }
.about-marketing-map__copy .section-heading { max-width: 680px; margin-bottom: 0; }
.about-marketing-map__copy > .feature-copy { padding: 34px; border: 1px solid rgba(8,197,216,.2); border-radius: 32px; background: rgba(255,255,255,.72); }
.about-marketing-map__copy > .feature-copy p:first-child { color: var(--ink); font: 800 clamp(1.55rem, 2.2vw, 2.15rem)/1.1 var(--display); }
.about-page .about-marketing-map__steps { grid-template-columns: 1fr; gap: 14px; }
.about-page .about-marketing-map__steps .process-card { min-height: 0; padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; color: #fff; border: 0; background: linear-gradient(155deg, var(--teal), var(--cyan)); }
.about-marketing-map__steps .process-card:nth-child(2) { background: linear-gradient(155deg, var(--cyan), #2588ad); }
.about-marketing-map__steps .process-card:nth-child(3) { background: linear-gradient(155deg, #17637b, var(--ink)); }
.about-marketing-map__steps .process-card::before { margin-bottom: 18px; color: rgba(255,255,255,.7); background: none; -webkit-text-fill-color: rgba(255,255,255,.7); }
.about-marketing-map__steps .process-card h3 { font-size: 1.65rem; }
.about-marketing-map__steps .process-card p { color: rgba(255,255,255,.78); }
.about-importance { padding: 100px 0; color: #fff; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.12), transparent 25%), linear-gradient(120deg, var(--ink) 0%, #17637b 54%, var(--teal) 100%); }
.about-importance::before { content: ''; width: 440px; height: 440px; position: absolute; left: -255px; bottom: -260px; z-index: -1; border: 68px solid rgba(255,255,255,.055); border-radius: 50%; box-shadow: 0 0 0 64px rgba(255,255,255,.03); }
.about-importance .feature-copy p { color: rgba(255,255,255,.78); }
.about-importance .eyebrow { color: #fff; background: rgba(255,255,255,.12); -webkit-text-fill-color: #fff; }
.about-importance .visual-panel { min-height: 550px; color: var(--ink); background: linear-gradient(145deg, #fff, #e9fbfc); box-shadow: 0 28px 80px rgba(0,0,0,.18); transform: rotate(1.5deg); }
.about-importance .visual-panel p { color: var(--muted); }
.about-importance .visual-panel::before { border-color: rgba(8,215,198,.12); }
.fact-band.about-facts { padding: 105px 0; color: var(--ink); overflow: hidden; isolation: isolate; background: linear-gradient(145deg, #f8feff 0%, var(--mist) 58%, #e2f7f8 100%); }
.about-facts::before { content: ''; width: 430px; height: 430px; position: absolute; right: -230px; bottom: -255px; z-index: -1; border: 64px solid rgba(8,197,216,.065); border-radius: 50%; box-shadow: 0 0 0 62px rgba(8,215,198,.035); }
.about-facts__layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(60px, 6.5vw, 100px); align-items: center; }
.about-facts__visual { min-height: 520px; position: relative; overflow: hidden; border: 1px solid rgba(8,197,216,.2); border-radius: 38px; background: linear-gradient(145deg, #dff7f8, #bfeaec); box-shadow: 0 28px 70px rgba(16,41,61,.12); }
.about-facts__visual::after { content: ''; width: 72px; height: 72px; position: absolute; right: 8%; top: 9%; border: 15px solid rgba(255,255,255,.38); border-radius: 50%; }
.about-facts__visual img { width: 110%; height: 110%; position: absolute; left: -5%; bottom: -5%; z-index: 2; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 24px 28px rgba(16,41,61,.2)); }
.about-facts__orbit { width: 72%; aspect-ratio: 1; position: absolute; left: 14%; top: 14%; border: 1px dashed rgba(16,41,61,.2); border-radius: 50%; }
.about-facts__orbit::before, .about-facts__orbit::after { content: ''; width: 15px; height: 15px; position: absolute; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 20px rgba(75,200,237,.42); }
.about-facts__orbit::before { left: 3%; top: 28%; }
.about-facts__orbit::after { right: 5%; bottom: 20%; }
.about-facts__content { min-width: 0; }
.about-facts__intro { max-width: 690px; margin-bottom: 38px; }
.about-facts__intro h2 { margin: 20px 0 16px; font: 800 clamp(2.8rem, 5vw, 5rem)/.98 var(--display); }
.fact-band .about-facts__intro p { max-width: 640px; margin: 0; color: var(--muted); }
.about-facts__ribbon { overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid rgba(8,197,216,.2); border-radius: 28px; background: rgba(255,255,255,.9); box-shadow: 0 24px 58px rgba(16,41,61,.1); }
.about-facts__ribbon article { min-height: 145px; padding: 24px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.about-facts__ribbon article + article { border-left: 1px solid rgba(16,41,61,.12); }
.about-facts__ribbon article:nth-child(3) { border-left: 0; border-top: 1px solid rgba(16,41,61,.12); }
.about-facts__ribbon article:nth-child(4) { border-top: 1px solid rgba(16,41,61,.12); }
.about-facts__ribbon strong { color: transparent; background: linear-gradient(90deg, var(--teal), var(--aqua)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 800 clamp(2.2rem, 3.5vw, 3.65rem)/.95 var(--display); }
.about-facts__ribbon span { margin-top: 12px; color: var(--ink); font: 800 .95rem/1.15 var(--display); }
.about-reviews { padding-top: 105px; padding-bottom: 115px; }
.about-reviews::after { content: ''; width: 340px; height: 120px; position: absolute; right: -65px; bottom: -55px; z-index: -1; border-radius: 50%; background: rgba(8,215,198,.06); transform: rotate(-8deg); }
.about-closing { padding: 95px 0 120px; background: linear-gradient(180deg, #fff, #f5fcfd); }
.about-closing .page-cta { position: relative; isolation: isolate; }
.about-closing .page-cta::after { content: ''; width: 260px; height: 260px; position: absolute; right: 8%; top: -105px; z-index: -1; border: 42px solid rgba(255,255,255,.06); border-radius: 50%; }
.section-reveal { opacity: 0; transform: translateY(30px); transition: opacity .75s ease, transform .75s cubic-bezier(.22, 1, .36, 1); }
.section-reveal.is-visible { opacity: 1; transform: none; }

/* Shared conversion-led inner-page system */
.inner-page main > .section { padding-block: 105px; overflow: hidden; isolation: isolate; }
.inner-page main > .section:nth-of-type(3n + 2):not(.fact-band):not(.inner-closing) { background: linear-gradient(145deg, #f7feff 0%, var(--mist) 56%, #e5f8fa 100%); }
.inner-page .inner-story::after { content: ''; width: 390px; height: 390px; position: absolute; right: -250px; bottom: -250px; z-index: -1; border: 58px solid rgba(8,197,216,.055); border-radius: 50%; box-shadow: 0 0 0 58px rgba(8,215,198,.028); }
.inner-page .inner-story .feature-split { gap: clamp(64px, 8vw, 120px); }
.inner-page .inner-story .feature-copy { max-width: 690px; }
.inner-page .inner-story .visual-panel { min-height: 500px; border-radius: 36px; box-shadow: 0 28px 75px rgba(16,41,61,.12); }
.inner-page .inner-story .visual-panel h3 { font-size: clamp(2rem, 3.2vw, 3.4rem); }
.inner-page .inner-cards .section-heading { margin-bottom: 58px; }
.inner-page .inner-cards .feature-grid { align-items: stretch; }
.inner-page .inner-cards .feature-card { min-height: 315px; padding: 34px; border-color: rgba(8,197,216,.18); box-shadow: 0 22px 60px rgba(16,41,61,.07); }
.inner-page .inner-cards .feature-card:first-child { color: #fff; background: radial-gradient(circle at 84% 12%, rgba(255,255,255,.16), transparent 25%), linear-gradient(145deg, var(--ink), #17637b 65%, var(--teal)); }
.inner-page .inner-cards .feature-card:first-child p { color: rgba(255,255,255,.78); }
.inner-page .inner-cards .feature-card:nth-child(2) { color: #fff; background: linear-gradient(145deg, var(--teal), var(--cyan)); }
.inner-page .inner-cards .feature-card:nth-child(2) p { color: rgba(255,255,255,.82); }
.inner-page .inner-cards .feature-card__icon { --clay-disc-size: 68px; --clay-icon-size: 80px; }
.inner-page .inner-cards .feature-card__icon img { filter: drop-shadow(0 9px 9px rgba(16,41,61,.22)); }
.inner-page .inner-process .process-grid { gap: 28px; }
.inner-page .inner-process .process-card { min-height: 330px; padding: 34px; border-color: rgba(8,197,216,.2); box-shadow: 0 24px 65px rgba(16,41,61,.08); }
.inner-page .inner-process .process-card::before { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: #fff; -webkit-text-fill-color: var(--ink); box-shadow: 0 12px 30px rgba(16,41,61,.12); font-size: 1rem; }
.inner-page .inner-process .process-card h3 { margin-top: auto; font-size: clamp(1.55rem, 2.25vw, 2rem); }
.inner-page .fact-band { padding-block: 105px; background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.1), transparent 24%), linear-gradient(120deg, var(--ink) 0%, #17637b 48%, var(--teal) 100%); }
.inner-page .fact-band__grid { gap: clamp(60px, 7vw, 105px); }
.inner-page .fact-band__items { box-shadow: 0 30px 80px rgba(5,25,41,.22); }
.inner-page .inner-faq { background: linear-gradient(145deg, #f7feff, var(--mist)); }
.inner-page .inner-faq .faq-list { max-width: 1080px; margin-inline: auto; }
.journey-prompt { padding: 0 0 105px; background: #fff; }
.journey-prompt__panel { min-height: 260px; padding: 46px 54px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 34px; align-items: center; overflow: hidden; position: relative; color: var(--ink); border: 1px solid rgba(8,197,216,.2); border-radius: 38px; background: radial-gradient(circle at 92% 10%, rgba(75,200,237,.2), transparent 28%), linear-gradient(135deg, #f7feff, #def7f8); box-shadow: 0 28px 80px rgba(16,41,61,.1); }
.journey-prompt__panel::after { content: ''; width: 260px; height: 260px; position: absolute; right: -145px; bottom: -155px; border: 42px solid rgba(8,215,198,.09); border-radius: 50%; }
.journey-prompt__icon { --clay-disc-size: 82px; --clay-icon-size: 98px; position: relative; z-index: 1; }
.journey-prompt h2 { margin: 16px 0 10px; font: 800 clamp(2.1rem, 3.8vw, 3.8rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
.journey-prompt p { max-width: 700px; margin: 0; color: var(--muted); }
.journey-prompt .button { z-index: 1; white-space: nowrap; }
.service-proof { color: var(--ink); background: #fff; }
.service-proof__grid { display: grid; grid-template-columns: minmax(340px, .75fr) minmax(0, 1.25fr); gap: clamp(60px, 8vw, 120px); align-items: center; }
.service-proof__intro h2 { margin: 18px 0 16px; font: 800 clamp(2.7rem, 4.8vw, 4.8rem)/.98 var(--display); letter-spacing: var(--heading-tracking); }
.service-proof__intro p { max-width: 520px; margin: 0 0 30px; color: var(--muted); }
.service-proof__quote { min-height: 360px; margin: 0; padding: 58px 58px 48px 90px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(8,197,216,.2); border-radius: 36px; background: radial-gradient(circle at 92% 85%, rgba(75,200,237,.18), transparent 27%), linear-gradient(135deg, #f7feff, #e4f9fa); box-shadow: 0 28px 75px rgba(16,41,61,.1); }
.service-proof__quote::before { content: '“'; position: absolute; left: 30px; top: 24px; color: var(--cyan); font: 800 5rem/.9 var(--display); opacity: .75; }
.service-proof__quote::after { content: ''; width: 180px; height: 180px; position: absolute; right: -90px; bottom: -95px; border: 32px solid rgba(8,215,198,.1); border-radius: 50%; }
.service-proof__quote p { margin: 0 0 26px; position: relative; z-index: 1; color: rgba(16,41,61,.8); font-size: 1.08rem; line-height: 1.65; }
.service-proof__quote cite { display: grid; gap: 4px; position: relative; z-index: 1; font-style: normal; }
.service-proof__quote cite strong { font: 800 1rem/1.2 var(--display); }
.service-proof__quote cite span { color: var(--muted); font-size: .85rem; }
.inner-page .inner-closing { padding: 95px 0 120px; background: linear-gradient(180deg, #fff, #f3fbfc); }
.inner-page .page-cta { position: relative; overflow: hidden; background: radial-gradient(circle at 88% 15%, rgba(75,200,237,.2), transparent 25%), linear-gradient(120deg, var(--ink), #17637b 54%, var(--teal)); }
.inner-page .page-cta::after { content: ''; width: 260px; height: 260px; position: absolute; right: 7%; top: -130px; border: 42px solid rgba(255,255,255,.06); border-radius: 50%; }
.inner-page .page-cta > * { position: relative; z-index: 1; }

/* Website package family */
.package-switcher { position: relative; z-index: 4; color: var(--ink); background: #fff; border-bottom: 1px solid rgba(8,197,216,.14); box-shadow: 0 18px 55px rgba(16,41,61,.07); }
.package-switcher__inner { min-height: 112px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(38px, 6vw, 90px); align-items: center; }
.package-switcher__label { color: var(--teal); font: 800 .75rem/1 var(--display); letter-spacing: .075em; text-transform: uppercase; white-space: nowrap; }
.package-switcher__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.package-switcher__links a { min-height: 64px; padding: 0 22px; display: flex; align-items: center; gap: 16px; border: 1px solid rgba(8,197,216,.18); border-radius: 999px; background: #f7feff; font: 800 clamp(1rem, 1.5vw, 1.25rem)/1 var(--display); transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.package-switcher__links a:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16,41,61,.09); }
.package-switcher__links a span { color: var(--teal); font-size: .72rem; letter-spacing: .06em; }
.package-switcher__links a[aria-current='page'] { color: #fff; background: linear-gradient(100deg, var(--ink), #17637b 65%, var(--teal)); box-shadow: 0 15px 38px rgba(16,41,61,.16); }
.package-switcher__links a[aria-current='page'] span { color: var(--aqua); }
.package-page--micro .package-switcher__links a[aria-current='page'] { color: var(--ink); background: linear-gradient(100deg, var(--teal), var(--turquoise), var(--aqua)); }
.package-page--micro .package-switcher__links a[aria-current='page'] span { color: var(--ink); }
.package-page--bespoke .package-switcher__links a[aria-current='page'] { color: var(--ink); background: linear-gradient(100deg, var(--cyan), var(--turquoise), var(--teal)); }
.package-page--bespoke .package-switcher__links a[aria-current='page'] span { color: var(--ink); }
.package-page main > .section { scroll-margin-top: 40px; }
.package-page .journey-prompt h2 { margin-top: 0; }

.package-story-panel { min-height: 500px; position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; color: #fff; background: linear-gradient(145deg, var(--ink), #17637b 62%, var(--teal)); box-shadow: 0 28px 75px rgba(16,41,61,.14); }
.package-story-panel::before { content: ''; width: 390px; height: 390px; position: absolute; right: -85px; top: -105px; z-index: -1; border: 62px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 58px rgba(255,255,255,.035); }
.package-story-panel::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7,35,51,.96) 0%, rgba(7,45,60,.85) 44%, rgba(7,45,60,.2) 78%); pointer-events: none; }
.package-story-panel--micro { color: var(--ink); background: linear-gradient(145deg, #d7f8f8, var(--turquoise) 58%, var(--aqua)); }
.package-story-panel--micro::after { background: linear-gradient(90deg, rgba(238,255,255,.98) 0%, rgba(222,249,249,.82) 42%, rgba(222,249,249,.12) 76%); }
.package-story-panel--bespoke { background: linear-gradient(145deg, #0b5066, #168b8d 54%, var(--turquoise)); }
.package-story-panel__art { width: 112%; height: 112%; position: absolute; right: -22%; bottom: -8%; z-index: 0; object-fit: contain; object-position: right bottom; opacity: .78; filter: saturate(.78) drop-shadow(0 28px 30px rgba(5,31,44,.2)); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 22%, #000 48%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 22%, #000 48%); }
.package-story-panel--standard .package-story-panel__art { width: 118%; right: -8%; }
.package-story-panel--micro .package-story-panel__art { width: 108%; right: -18%; }
.package-story-panel__copy { max-width: 410px; padding: 42px; position: absolute; inset: auto auto 0 0; z-index: 2; }
.package-story-panel__copy h3 { margin: 0; font: 800 clamp(2.25rem, 3.25vw, 3.45rem)/1.02 var(--display); letter-spacing: var(--heading-tracking); }
.package-story-panel__copy p { margin: 18px 0 0; color: rgba(255,255,255,.8); }
.package-story-panel--micro .package-story-panel__copy p { color: var(--muted); }

.inner-page.package-page main > .section.inner-cards { background: linear-gradient(180deg, #d9f1f5 0%, #e8f8fa 48%, #f8feff 100%); }
.package-benefits .feature-card { isolation: isolate; }
.package-benefits .feature-card::after { display: none; }
.package-card__watermark { width: 230px; height: 230px; position: absolute; right: -42px; top: -38px; z-index: -1; object-fit: contain; opacity: .26; filter: saturate(.78) drop-shadow(0 22px 22px rgba(5,35,48,.2)); transform: rotate(7deg); }
.package-benefits .feature-card:nth-child(2) .package-card__watermark { width: 245px; height: 245px; right: -54px; top: -54px; transform: rotate(-6deg); }
.package-benefits .feature-card:nth-child(3) .package-card__watermark { width: 238px; height: 238px; right: -46px; top: -42px; transform: rotate(4deg); }
.package-benefits .feature-card:nth-child(4) .package-card__watermark { width: 225px; height: 225px; right: -35px; top: -30px; transform: rotate(-4deg); }
.package-benefits .feature-card h3 { text-wrap: balance; }

.package-pricing { overflow: hidden; }
.fact-band__grid.package-pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "copy rates"; column-gap: clamp(36px, 4vw, 64px); align-items: center; }
.package-pricing__copy { grid-area: copy; position: relative; z-index: 2; }
.package-pricing__copy h2 { max-width: 640px; }
.package-pricing .fact-band__items { grid-area: rates; align-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 18px; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.package-pricing .fact-band__items article { min-height: 128px; padding: 22px 18px; position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,251,252,.96)); box-shadow: 0 20px 48px rgba(5,25,41,.15); }
.package-pricing .price-card--calculator { --price-icon: url('/assets/img/icons/clay-calculator.webp'); }
.package-pricing .price-card--offer { --price-icon: url('/assets/img/icons/clay-offer-basket.webp'); }
.package-pricing .price-card--launch { --price-icon: url('/assets/img/icons/clay-launch-rocket.webp'); }
.package-pricing .price-card--profile { --price-icon: url('/assets/img/icons/clay-web-profile.webp'); }
.package-pricing .price-card--mobile { --price-icon: url('/assets/img/icons/clay-mobile-configuration.webp'); }
.package-pricing .price-card--talk { --price-icon: url('/assets/img/icons/clay-talk.webp'); }
.package-pricing .price-card--magic { --price-icon: url('/assets/img/icons/clay-magic-wand.webp'); }
.package-pricing .price-card--gears { --price-icon: url('/assets/img/icons/clay-gears.webp'); }
.package-pricing .price-card--growth { --price-icon: url('/assets/img/icons/clay-growth.webp'); }
.package-pricing .fact-band__items article::after { display: none; }
.package-pricing .fact-band__items article::before { content: ''; width: 185px; height: 185px; position: absolute; right: -36px; bottom: -48px; z-index: -1; background: var(--price-icon) center / contain no-repeat; opacity: .22; transform: rotate(-7deg); filter: saturate(.9); }
.package-pricing .fact-band__items article:nth-child(-n+2) { min-height: 168px; color: #fff; border-color: rgba(255,255,255,.12); background: linear-gradient(145deg, #0c3f58 0%, #176b7d 58%, #12aeb0 100%); }
.package-pricing .fact-band__items article:nth-child(2) { background: linear-gradient(145deg, #168a8c 0%, #08c5d8 58%, #4bc8ed 100%); }
.package-pricing .fact-band__items article:nth-child(-n+2)::before { width: 220px; height: 220px; right: -50px; bottom: -70px; opacity: .26; }
.package-pricing .fact-band__items article:nth-child(-n+2) strong { color: #fff; background: none; -webkit-text-fill-color: #fff; font-size: clamp(3rem, 5vw, 5.2rem); }
.package-pricing .fact-band__items article:nth-child(-n+2) span { color: rgba(255,255,255,.86); }
.package-pricing .fact-band__items article:nth-child(n+3) { min-height: 112px; }
.package-page--bespoke .package-pricing .fact-band__items article strong,
.package-page--bespoke .package-pricing .fact-band__items article:nth-child(-n+2) strong { font-size: clamp(2.35rem, 3.6vw, 3.8rem); letter-spacing: -.04em; }

.social-story { background: linear-gradient(145deg, #f7feff 0%, #eefbfc 56%, #e5f8fa 100%); }
.social-story .feature-split { grid-template-columns: minmax(0, 1.12fr) minmax(470px, .88fr); gap: clamp(44px, 5vw, 72px); }
.social-story .feature-copy { max-width: 690px; }
.social-network { width: min(100%, 540px); aspect-ratio: 1; justify-self: end; position: relative; overflow: hidden; isolation: isolate; border-radius: 38px; background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.3), transparent 28%), linear-gradient(145deg, var(--teal), var(--cyan) 58%, var(--turquoise)); box-shadow: 0 30px 80px rgba(16,41,61,.16); }
.social-network::before { content: ''; width: 430px; height: 430px; position: absolute; left: 50%; top: 50%; z-index: -2; border-radius: 50%; background: rgba(255,255,255,.04); box-shadow: 0 0 0 68px rgba(255,255,255,.025); transform: translate(-50%,-50%); }
.social-network__centre { width: 146px; height: 146px; padding: 18px; display: grid; place-items: center; align-content: center; position: absolute; left: 50%; top: 50%; z-index: 5; color: var(--ink); text-align: center; border-radius: 50%; background: rgba(255,255,255,.97); box-shadow: 0 22px 52px rgba(16,41,61,.2); transform: translate(-50%,-50%); }
.social-network__centre img { width: 58px; filter: drop-shadow(0 9px 10px rgba(16,41,61,.16)); }
.social-network__centre strong { font: 800 1.08rem/1 var(--display); }
.social-network__planet { --orbit-start: 0deg; --orbit-duration: 20s; --orbit-radius: 180px; width: 0; height: 0; position: absolute; left: 50%; top: 50%; z-index: 3; transform-origin: 0 0; animation: solar-orbit var(--orbit-duration) linear infinite; }
.social-network__planet::before { content: ''; width: calc(var(--orbit-radius) * 2); height: calc(var(--orbit-radius) * 2); position: absolute; left: calc(0px - var(--orbit-radius)); top: calc(0px - var(--orbit-radius)); z-index: -1; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.social-network__planet:nth-of-type(even)::before { border-style: dashed; border-color: rgba(255,255,255,.44); }
.social-network__node { width: 88px; height: 88px; padding: 9px; display: grid; place-items: center; align-content: center; position: absolute; left: var(--orbit-radius); top: 0; color: var(--ink); text-align: center; border: 1px solid rgba(255,255,255,.74); border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 16px 36px rgba(16,41,61,.16); transform: translate(-50%,-50%) rotate(calc(0deg - var(--orbit-start))); animation: solar-counter var(--orbit-duration) linear infinite; }
.social-network__node img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 6px 7px rgba(16,41,61,.14)); }
.social-network__node b { font: 800 .62rem/1.05 var(--display); }
.social-network__node--words { padding: 13px; background: linear-gradient(145deg, #fff, #e6fafb); }
.social-network__node--words b { font-size: .7rem; }
.social-network__planet--facebook { --orbit-start: 212deg; --orbit-duration: 27s; --orbit-radius: 222px; }
.social-network__planet--instagram { --orbit-start: 318deg; --orbit-duration: 19s; --orbit-radius: 190px; }
.social-network__planet--linkedin { --orbit-start: 42deg; --orbit-duration: 31s; --orbit-radius: 224px; }
.social-network__planet--meta { --orbit-start: 132deg; --orbit-duration: 22s; --orbit-radius: 132px; }
.social-network__planet--targeting { --orbit-start: 265deg; --orbit-duration: 35s; --orbit-radius: 172px; }
.social-network__planet--reporting { --orbit-start: 78deg; --orbit-duration: 25s; --orbit-radius: 108px; }
.social-network__planet--engagement { --orbit-start: 168deg; --orbit-duration: 29s; --orbit-radius: 150px; }
.social-network__planet--creative { --orbit-start: 350deg; --orbit-duration: 38s; --orbit-radius: 208px; }

.social-support__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.inner-page main > .section.social-support { background: linear-gradient(180deg, #d5eff4 0%, #e8f8fa 54%, #f9feff 100%); }
.social-support__grid .feature-card { min-height: 360px; isolation: isolate; }
.tile--watermark::after { display: none; }
.social-support__watermark { width: 245px; height: 245px; position: absolute; right: -48px; top: -50px; z-index: -1; object-fit: contain; opacity: .25; transform: rotate(7deg); filter: saturate(.85) drop-shadow(0 20px 22px rgba(16,41,61,.16)); }
.social-support__grid article:nth-child(2) .social-support__watermark { transform: rotate(-6deg); }
.social-support__grid article:nth-child(3) .social-support__watermark { opacity: .22; }
.social-support__number { margin-bottom: auto; color: rgba(255,255,255,.72); font: 800 2.8rem/1 var(--display); }
.social-support__grid article:nth-child(3) .social-support__number { color: var(--teal); }

.social-facts .fact-band__items { gap: 18px; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.social-facts .fact-band__items article { min-height: 170px; position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 26px; background: #fff; box-shadow: 0 20px 48px rgba(5,25,41,.15); }
.social-facts .fact-band__items article:nth-child(n) { border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.social-facts .fact-band__items article::before { content: ''; width: 185px; height: 185px; position: absolute; right: -36px; bottom: -54px; z-index: -1; background: var(--social-fact-icon) center / contain no-repeat; opacity: .18; transform: rotate(-8deg); filter: saturate(.9); }
.social-facts .fact-band__items strong,
.social-facts .fact-band__items span { position: relative; z-index: 1; }
.social-fact--rolling { --social-fact-icon: url('/assets/img/icons/clay-mobile-configuration.webp'); }
.social-fact--reach { --social-fact-icon: url('/assets/img/icons/clay-people.webp'); }
.social-fact--clicks { --social-fact-icon: url('/assets/img/icons/clay-growth.webp'); }
.social-fact--leads { --social-fact-icon: url('/assets/img/icons/orbit-target.png'); }

.social-projects { background: #fff; }
.social-projects__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 18px; }
.social-projects__rail { display: contents; }
.social-projects__swipe-hint { display: none; }
.social-project { width: 100%; padding: 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; color: #fff; text-align: left; border: 1px solid rgba(8,197,216,.2); border-radius: 26px; background: var(--ink); box-shadow: 0 20px 50px rgba(16,41,61,.12); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.social-project:hover { transform: translateY(-5px); box-shadow: 0 26px 60px rgba(16,41,61,.13); }
.social-project:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.social-project::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,25,41,.32) 0%, rgba(5,25,41,.35) 34%, rgba(5,25,41,.68) 68%, rgba(5,25,41,.98) 100%); }
.social-project__image { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 0; object-fit: cover; transition: transform .55s ease; }
.social-project:hover .social-project__image { transform: scale(1.045); }
.social-project span:not(.social-project__play),
.social-project h3 { position: relative; z-index: 2; }
.social-project span:not(.social-project__play) { color: var(--aqua); font: 800 .7rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.social-project h3 { margin: 8px 0 0; color: #fff; font: 800 1.35rem/1.05 var(--display); }
.social-project__play { width: 48px; height: 48px; position: absolute; top: 18px; right: 18px; z-index: 3; display: grid; place-items: center; padding-left: 3px; color: var(--ink); border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 12px 30px rgba(5,25,41,.22); font-size: .9rem; transition: transform .25s ease, background .25s ease; }
.social-project:hover .social-project__play { transform: scale(1.08); background: #fff; }
.social-project--featured { grid-column: span 2; grid-row: span 2; padding: 34px; }
.social-project--featured span:not(.social-project__play) { color: var(--aqua); }
.social-project--featured h3 { max-width: 330px; font-size: clamp(2rem, 3vw, 3.2rem); }

.social-video-lightbox { width: min(1080px, calc(100% - 32px)); max-width: none; padding: 0; color: #fff; border: 0; border-radius: 30px; background: transparent; overflow: visible; }
.social-video-lightbox::backdrop { background: rgba(5,25,41,.84); backdrop-filter: blur(8px); }
.social-video-lightbox__panel { padding: 18px; position: relative; border: 1px solid rgba(255,255,255,.15); border-radius: 30px; background: var(--ink); box-shadow: 0 35px 100px rgba(0,0,0,.4); }
.social-video-lightbox__frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; background: #050d14; }
.social-video-lightbox__frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.social-video-lightbox h2 { margin: 18px 56px 4px 6px; color: #fff; font: 800 clamp(1.45rem, 3vw, 2.3rem)/1 var(--display); }
.social-video-lightbox__close { width: 50px; height: 50px; position: absolute; right: -14px; top: -14px; z-index: 2; display: grid; place-items: center; color: var(--ink); border: 0; border-radius: 50%; background: linear-gradient(145deg, var(--teal), var(--cyan)); box-shadow: 0 14px 30px rgba(5,25,41,.3); cursor: pointer; font: 500 2rem/1 sans-serif; }

/* SEO: search journey, factor system and ongoing progress */
.seo-intro { background: #fff; }
.seo-intro__grid { grid-template-columns: minmax(0, 1.12fr) minmax(460px, .88fr); gap: clamp(48px, 5vw, 76px); }
.seo-intro .feature-copy { max-width: 700px; }
.seo-intro__visual { aspect-ratio: 1; position: relative; overflow: hidden; border-radius: 38px; background: linear-gradient(145deg, var(--ink), #074d6d 52%, var(--cyan)); box-shadow: 0 30px 80px rgba(16,41,61,.16); }
.seo-intro__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(5,25,41,.34)); pointer-events: none; }
.seo-intro__visual img { width: 100%; height: 100%; object-fit: cover; }
.seo-intro__chip { padding: 12px 17px; position: absolute; left: 28px; bottom: 28px; z-index: 2; border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 14px 36px rgba(5,25,41,.2); font: 800 .72rem/1 var(--display); letter-spacing: .035em; text-transform: uppercase; }

.inner-page main > .section.seo-factors { background: linear-gradient(180deg, #d4eef3 0%, #e8f8fa 54%, #fbfeff 100%); }
.seo-factor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.seo-factor-card { min-height: 305px; padding: 28px; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(8,197,216,.18); border-radius: 28px; box-shadow: 0 22px 56px rgba(16,41,61,.1); transition: transform .25s ease, box-shadow .25s ease; }
.seo-factor-card:hover { transform: translateY(-5px); box-shadow: 0 29px 65px rgba(16,41,61,.16); }
.seo-factor-card > img { width: 210px; height: 210px; position: absolute; right: -35px; top: -36px; z-index: -1; object-fit: contain; opacity: .28; filter: saturate(.86) drop-shadow(0 18px 20px rgba(5,35,48,.2)); transform: rotate(7deg); }
.seo-factor-card:nth-child(even) > img { transform: rotate(-7deg); }
.seo-factor-card > span { margin-bottom: auto; font: 800 2.5rem/1 var(--display); opacity: .68; }
.seo-factor-card h3 { margin: 0 0 12px; font: 800 clamp(1.45rem, 2vw, 1.9rem)/1.05 var(--display); letter-spacing: var(--heading-tracking); }
.seo-factor-card p { margin: 0; line-height: 1.52; }
.seo-factor-card--navy { color: #fff; background: linear-gradient(145deg, var(--ink), #17637b 72%, #268f91); }
.seo-factor-card--aqua { color: #fff; background: linear-gradient(145deg, #168b8d, var(--cyan) 66%, var(--turquoise)); }
.seo-factor-card--teal { color: #fff; background: linear-gradient(145deg, #176f79, var(--teal) 55%, #44bfcf); }
.seo-factor-card--navy p, .seo-factor-card--aqua p, .seo-factor-card--teal p { color: rgba(255,255,255,.82); }
.seo-factor-card--light { color: var(--ink); background: linear-gradient(145deg, #fff, #ebfafb); }
.seo-factor-card--light p { color: var(--muted); }
.seo-factor-card--light > span { color: var(--teal); }

.seo-progress { background: #fff; }
.seo-progress__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(50px, 6vw, 90px); align-items: center; }
.seo-progress .feature-copy { max-width: 660px; }
.seo-route { min-height: 650px; padding: 54px; position: relative; overflow: hidden; display: grid; gap: 18px; border-radius: 38px; background: linear-gradient(145deg, var(--ink), #07516b 56%, var(--teal)); box-shadow: 0 30px 80px rgba(16,41,61,.17); }
.seo-route::before { content: ''; width: 390px; height: 390px; position: absolute; right: -170px; top: -160px; border: 58px solid rgba(255,255,255,.075); border-radius: 50%; box-shadow: 0 0 0 58px rgba(255,255,255,.03); }
.seo-route__line { width: 2px; position: absolute; left: 105px; top: 100px; bottom: 100px; border-left: 2px dashed rgba(255,255,255,.35); }
.seo-route article { min-height: 120px; padding: 20px 24px 20px 112px; position: relative; display: flex; align-items: center; color: var(--ink); border: 1px solid rgba(255,255,255,.55); border-radius: 25px; background: rgba(255,255,255,.94); box-shadow: 0 18px 42px rgba(5,25,41,.18); }
.seo-route article:nth-of-type(even) { margin-left: 34px; }
.seo-route article > img { width: 92px; height: 92px; position: absolute; left: 10px; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(16,41,61,.2)); }
.seo-route article span { color: var(--teal); font: 800 .68rem/1 var(--display); letter-spacing: .08em; }
.seo-route article h3 { margin: 6px 0 5px; font: 800 1.35rem/1 var(--display); letter-spacing: var(--heading-tracking); }
.seo-route article p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.4; }

.seo-foundations .fact-band__items { gap: 18px; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.seo-foundations .fact-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(50px, 6vw, 90px); }
.seo-foundations .fact-band__grid > div:first-child { max-width: 600px; }
.seo-foundations .fact-band__items article { min-height: 170px; position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 26px; background: #fff; box-shadow: 0 20px 48px rgba(5,25,41,.15); }
.seo-foundations .fact-band__items article:nth-child(n) { border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.seo-foundations__items article img { width: 160px; height: 160px; position: absolute; right: -30px; bottom: -48px; z-index: -1; object-fit: contain; opacity: .18; transform: rotate(-7deg); filter: saturate(.9); }
.seo-foundations__items article:nth-child(even) img { transform: rotate(7deg); }
.seo-foundations__items strong, .seo-foundations__items span { position: relative; z-index: 1; }

.seo-faqs { background: linear-gradient(145deg, #f7feff, var(--mist)); }
.seo-faqs .section-heading { max-width: 1080px; margin: 0 auto 46px; }
.seo-faqs .faq-list { max-width: 1080px; margin-inline: auto; }
.seo-faqs .faq-list details { box-shadow: 0 14px 40px rgba(16,41,61,.06); }

/* Google Ads: paid search journey and campaign management */
.ads-intro { background: #fff; }
.ads-intro__grid { grid-template-columns: minmax(0, 1.04fr) minmax(500px, .96fr); gap: clamp(48px, 5vw, 76px); }
.ads-intro .feature-copy { max-width: 680px; }
.ads-intro__visual { aspect-ratio: 1; position: relative; isolation: isolate; overflow: hidden; border-radius: 38px; background: linear-gradient(145deg, var(--ink), #07516b 52%, var(--cyan)); box-shadow: 0 30px 80px rgba(16,41,61,.16); }
.ads-intro__visual::before { content: ''; width: 390px; height: 390px; position: absolute; right: -145px; top: -135px; z-index: -1; border: 58px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 58px rgba(255,255,255,.035); }
.ads-intro__visual img { width: 112%; height: 112%; position: absolute; left: -7%; bottom: -6%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(5,25,41,.24)); }
.ads-intro__chip { padding: 12px 17px; position: absolute; left: 28px; bottom: 28px; z-index: 2; border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 14px 36px rgba(5,25,41,.2); font: 800 .72rem/1 var(--display); letter-spacing: .035em; text-transform: uppercase; }

.inner-page main > .section.ads-routes { background: linear-gradient(180deg, #d5eff4 0%, #ebf9fa 55%, #fbfeff 100%); }
.ads-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ads-route-card { min-height: 340px; padding: 30px; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(8,197,216,.18); border-radius: 30px; box-shadow: 0 24px 65px rgba(16,41,61,.11); transition: transform .25s ease, box-shadow .25s ease; }
.ads-route-card:hover { transform: translateY(-5px); box-shadow: 0 31px 72px rgba(16,41,61,.16); }
.ads-route-card > img { width: 225px; height: 225px; position: absolute; right: -38px; top: -44px; z-index: -1; object-fit: contain; opacity: .27; transform: rotate(7deg); filter: saturate(.9) drop-shadow(0 18px 18px rgba(5,25,41,.2)); }
.ads-route-card:nth-child(2) > img { transform: rotate(-7deg); }
.ads-route-card > span { margin-bottom: auto; font: 800 2.65rem/1 var(--display); opacity: .68; }
.ads-route-card h3 { margin: 0 0 13px; font: 800 clamp(1.75rem, 2.5vw, 2.5rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
.ads-route-card p { margin: 0; line-height: 1.55; }
.ads-route-card--navy { color: #fff; background: linear-gradient(145deg, var(--ink), #17637b 72%, #268f91); }
.ads-route-card--aqua { color: #fff; background: linear-gradient(145deg, #168b8d, var(--cyan) 66%, var(--turquoise)); }
.ads-route-card--navy p, .ads-route-card--aqua p { color: rgba(255,255,255,.82); }
.ads-route-card--light { color: var(--ink); background: linear-gradient(145deg, #fff, #eafafb); }
.ads-route-card--light p { color: var(--muted); }
.ads-route-card--light > span { color: var(--teal); }

.inner-page main > .section.ads-process { background: linear-gradient(180deg, #d9f1f5 0%, #edf9fb 52%, #fff 100%); }
.ads-process__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ads-process__grid article { min-height: 330px; padding: 28px; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(8,197,216,.18); border-radius: 28px; background: #fff; box-shadow: 0 22px 58px rgba(16,41,61,.08); }
.ads-process__grid article:nth-child(2) { color: #fff; background: linear-gradient(145deg, var(--teal), var(--cyan)); }
.ads-process__grid article:nth-child(3) { color: #fff; background: linear-gradient(145deg, var(--ink), #17637b); }
.ads-process__grid article:nth-child(4) { background: linear-gradient(145deg, #fff, #eafafb); }
.ads-process__grid article > img { width: 205px; height: 205px; position: absolute; right: -38px; top: -42px; z-index: -1; object-fit: contain; opacity: .3; transform: rotate(7deg); filter: drop-shadow(0 18px 20px rgba(5,25,41,.16)); }
.ads-process__grid article:nth-child(even) > img { transform: rotate(-7deg); }
.ads-process__grid article > span { margin-bottom: auto; color: transparent; background: linear-gradient(90deg, var(--teal), var(--aqua)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 800 2.7rem/1 var(--display); }
.ads-process__grid article:nth-child(2) > span, .ads-process__grid article:nth-child(3) > span { color: rgba(255,255,255,.72); background: none; -webkit-text-fill-color: currentColor; }
.ads-process__grid h3 { margin: 0 0 12px; font: 800 clamp(1.35rem, 1.8vw, 1.72rem)/1.05 var(--display); letter-spacing: var(--heading-tracking); }
.ads-process__grid p { margin: 0; color: var(--muted); line-height: 1.52; }
.ads-process__grid article:nth-child(2) p, .ads-process__grid article:nth-child(3) p { color: rgba(255,255,255,.82); }

.inner-page main > .section.ads-budget { background: linear-gradient(180deg, #fff 0%, #effafb 48%, #dff4f7 100%); }
.ads-budget__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(52px, 6vw, 92px); align-items: center; }
.ads-budget__intro { max-width: 630px; }
.ads-budget__intro h2 { margin: 22px 0 24px; font: 800 clamp(3rem, 5vw, 5.3rem)/.98 var(--display); letter-spacing: var(--heading-tracking); }
.ads-budget__intro p { color: var(--muted); }
.ads-budget__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ads-budget__cards article { min-height: 225px; padding: 28px; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(8,197,216,.18); border-radius: 28px; background: linear-gradient(145deg, #fff, #eafafb); box-shadow: 0 22px 58px rgba(16,41,61,.1); }
.ads-budget__cards article:nth-child(1) { color: #fff; background: linear-gradient(145deg, var(--ink), #17637b 72%, #268f91); }
.ads-budget__cards article:nth-child(2) { color: #fff; background: linear-gradient(145deg, #168b8d, var(--cyan) 66%, var(--turquoise)); }
.ads-budget-card--spend { --ads-budget-icon: url('/assets/img/icons/clay-calculator.webp'); }
.ads-budget-card--setup { --ads-budget-icon: url('/assets/img/icons/clay-blueprint.webp'); }
.ads-budget-card--management { --ads-budget-icon: url('/assets/img/icons/clay-growth.webp'); }
.ads-budget-card--starting-point { --ads-budget-icon: url('/assets/img/icons/orbit-target.png'); }
.ads-budget__cards article::before { content: ''; width: 180px; height: 180px; position: absolute; right: -34px; top: -34px; z-index: -1; background: var(--ads-budget-icon) center / contain no-repeat; opacity: .22; transform: rotate(7deg); filter: saturate(.9) drop-shadow(0 16px 18px rgba(5,25,41,.16)); }
.ads-budget__cards article:nth-child(even)::before { transform: rotate(-7deg); }
.ads-budget__cards article > span { margin-bottom: auto; color: transparent; background: linear-gradient(90deg, var(--teal), var(--aqua)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 800 2.4rem/1 var(--display); }
.ads-budget__cards article:nth-child(-n+2) > span { color: rgba(255,255,255,.72); background: none; -webkit-text-fill-color: currentColor; }
.ads-budget__cards h3 { margin: 0 0 10px; font: 800 clamp(1.45rem, 2vw, 1.9rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
.ads-budget__cards p { margin: 0; color: var(--muted); line-height: 1.5; }
.ads-budget__cards article:nth-child(-n+2) p { color: rgba(255,255,255,.84); }

.inner-page .ads-focus__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(50px, 6vw, 90px); }
.ads-focus__grid > div:first-child { max-width: 630px; }
.inner-page .ads-focus__items { gap: 18px; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.ads-focus__items article { min-height: 175px; position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 26px; background: #fff; box-shadow: 0 20px 48px rgba(5,25,41,.15); }
.ads-focus__items article:nth-child(n) { border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.ads-focus__items article img { width: 165px; height: 165px; position: absolute; right: -30px; bottom: -50px; z-index: -1; object-fit: contain; opacity: .2; transform: rotate(-7deg); filter: saturate(.9); }
.ads-focus__items article:nth-child(even) img { transform: rotate(7deg); }
.ads-focus__items strong, .ads-focus__items span { position: relative; z-index: 1; }

.ads-faqs { background: linear-gradient(145deg, #f7feff, var(--mist)); }
.ads-faqs .section-heading, .ads-faqs .faq-list { max-width: 1080px; margin-inline: auto; }
.ads-faqs .section-heading { margin-bottom: 46px; }
.ads-faqs .faq-list details { box-shadow: 0 14px 40px rgba(16,41,61,.06); }

.package-inclusions { color: var(--ink); background: linear-gradient(145deg, #fff 0%, #f7feff 46%, var(--mist) 100%); }
.package-inclusions__grid { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); column-gap: clamp(54px, 7vw, 105px); row-gap: 0; align-items: start; }
.package-inclusions__intro { position: static; }
.package-inclusions__intro h2 { margin: 20px 0 20px; font: 800 clamp(2.75rem, 4.7vw, 4.9rem)/.98 var(--display); letter-spacing: var(--heading-tracking); text-wrap: balance; }
.package-inclusions__intro p { max-width: 520px; margin: 0; color: var(--muted); }
.package-inclusions__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgba(8,197,216,.2); border-radius: 30px; background: rgba(255,255,255,.92); box-shadow: 0 28px 75px rgba(16,41,61,.1); }
.package-inclusions__list article { min-height: 170px; padding: 30px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(16,41,61,.1); border-bottom: 1px solid rgba(16,41,61,.1); }
.package-inclusions__list article:nth-child(2n) { border-right: 0; }
.package-inclusions__list article:nth-child(n+5) { border-bottom: 0; }
.package-inclusions__list strong { font: 800 clamp(1.3rem, 1.8vw, 1.7rem)/1.08 var(--display); }
.package-inclusions__list span { margin-top: 12px; color: var(--muted); line-height: 1.5; }
.package-inclusions__note { width: 100%; box-sizing: border-box; grid-column: 2; margin: 30px 0 0; padding: 25px 28px; position: relative; z-index: 2; color: var(--muted); border: 1px solid rgba(8,197,216,.18); border-radius: 22px; background: #f3fcfd; box-shadow: 0 18px 45px rgba(16,41,61,.07); }

.package-page .package-process { gap: 22px; }
.package-page .package-process .process-card { overflow: hidden; isolation: isolate; color: #fff; border: 0; background: linear-gradient(145deg, var(--ink), #17637b 68%, var(--teal)); box-shadow: 0 24px 65px rgba(16,41,61,.14); }
.package-page .package-process .process-card:nth-child(2) { background: linear-gradient(145deg, var(--teal), var(--cyan)); }
.package-page .package-process .process-card:nth-child(3) { background: linear-gradient(145deg, #268aac, var(--aqua) 58%, var(--teal)); }
.package-page .package-process .process-card::after { display: none; }
.package-page .package-process .process-card p { color: rgba(255,255,255,.82); }
.package-page .package-process .process-card::before { color: var(--ink); background: rgba(255,255,255,.94); -webkit-text-fill-color: var(--ink); }
.package-process__icon { width: 235px; height: 235px; position: absolute; right: -42px; top: -48px; z-index: -1; object-fit: contain; opacity: .4; filter: saturate(.9) drop-shadow(0 20px 22px rgba(5,35,48,.22)); transform: rotate(6deg); }
.package-page .package-process .process-card:nth-child(2) .package-process__icon { width: 250px; height: 250px; right: -55px; top: -58px; transform: rotate(-7deg); }
.package-page .package-process .process-card:nth-child(3) .package-process__icon { width: 245px; height: 245px; right: -48px; top: -50px; transform: rotate(5deg); }
.package-page .inner-faq .section-heading { margin-bottom: 42px; }
.package-page .inner-faq .faq-list details { box-shadow: 0 14px 40px rgba(16,41,61,.06); }
.package-page--micro .fact-band { background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.11), transparent 24%), linear-gradient(120deg, #17637b 0%, var(--teal) 48%, var(--cyan) 100%); }
.package-page--bespoke .fact-band { background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.11), transparent 24%), linear-gradient(120deg, var(--ink) 0%, #166f7c 48%, var(--turquoise) 100%); }
.inner-page .blog-grid { gap: 24px; }
.inner-page .blog-card { --blog-card-padding: 34px; min-height: 570px; padding: var(--blog-card-padding); display: flex; flex-direction: column; border-color: rgba(8,197,216,.2); box-shadow: 0 22px 60px rgba(16,41,61,.08); transition: transform .25s ease, box-shadow .25s ease; }
.inner-page .blog-card:hover { transform: translateY(-6px); box-shadow: 0 30px 72px rgba(16,41,61,.14); }
.inner-page .blog-card:nth-child(3n + 1) { background: linear-gradient(145deg, #fff, #eafafb); }
.inner-page .blog-card:nth-child(3n + 2) { background: linear-gradient(145deg, #f7feff, #dff7f8); }
.inner-page .blog-card h2 { font-size: clamp(1.55rem, 2.25vw, 2.15rem); }
.inner-page .blog-card small { margin-top: auto; padding-top: 24px; }
.inner-page .blog-card__action { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; color: var(--teal); font: 800 .75rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.inner-page .blog-card__action span { font-size: 1rem; transition: transform .2s ease; }
.inner-page .blog-card__action:hover span { transform: translateX(4px); }

/* Blog article template */
.article-hero { min-height: 760px; padding: 205px 0 88px; position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, #eefdfe 0%, #d9f7f8 52%, #caedf8 100%); }
.article-hero::before { content: ''; width: 650px; height: 650px; position: absolute; right: -165px; top: 110px; z-index: -1; border: 1px solid rgba(16,41,61,.08); border-radius: 50%; box-shadow: 0 0 0 90px rgba(8,197,216,.045), 0 0 0 180px rgba(44,165,160,.035); }
.article-hero__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr); align-items: center; gap: 78px; }
.article-hero__copy { max-width: 760px; }
.article-back { margin-bottom: 22px; display: block; color: var(--teal); font: 800 .72rem/1 var(--display); letter-spacing: .055em; text-transform: uppercase; }
.article-hero h1 { margin: 0; font: 800 clamp(2.8rem, 4.35vw, 4.75rem)/1.01 var(--display); letter-spacing: var(--heading-tracking); text-wrap: balance; }
.article-meta { margin-top: 28px; display: flex; align-items: center; gap: 14px; color: var(--muted); font: 700 .78rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.article-meta span::before { content: ''; width: 6px; height: 6px; margin-right: 14px; display: inline-block; vertical-align: middle; border-radius: 50%; background: var(--cyan); }
.article-hero__visual { aspect-ratio: 3 / 2; position: relative; overflow: hidden; border: 1px solid rgba(8,197,216,.22); border-radius: 36px; background: linear-gradient(145deg, #c9f2f3, #8bdfe5); box-shadow: 0 32px 90px rgba(16,41,61,.16); transform: rotate(1.5deg); }
.article-hero__visual img { width: 100%; height: 100%; position: relative; z-index: 1; object-fit: cover; }
.article-hero__orbit { width: 78%; aspect-ratio: 1; position: absolute; right: -22%; top: -35%; z-index: 2; pointer-events: none; border: 1px dashed rgba(255,255,255,.5); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,255,255,.08), 0 0 0 100px rgba(16,41,61,.035); animation: orbit 24s linear infinite; }
.article-section { padding: 105px 0 125px; background: #fff; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 94px; }
.article-content { max-width: 850px; color: #344e60; font-size: 1.08rem; line-height: 1.8; }
.article-content > :first-child { margin-top: 0; color: var(--ink); font-size: clamp(1.2rem, 1.8vw, 1.42rem); line-height: 1.7; }
.article-content h2 { margin: 74px 0 22px; color: var(--ink); font: 800 clamp(2rem, 3.8vw, 3.55rem)/1.05 var(--display); letter-spacing: var(--heading-tracking); text-wrap: balance; scroll-margin-top: 30px; }
.article-content h3 { margin: 42px 0 14px; color: var(--ink); font: 800 clamp(1.35rem, 2.2vw, 1.85rem)/1.15 var(--display); }
.article-content p { margin: 0 0 24px; }
.article-content ul, .article-content ol { margin: 24px 0 34px; padding: 0; display: grid; gap: 12px; list-style: none; counter-reset: article-list; }
.article-content li { padding: 15px 18px 15px 48px; position: relative; border: 1px solid rgba(8,197,216,.16); border-radius: 17px; background: linear-gradient(135deg, #f7feff, #edfafa); }
.article-content ul li::before { content: '✓'; position: absolute; left: 18px; top: 14px; color: var(--cyan); font-weight: 800; }
.article-content ol li { counter-increment: article-list; }
.article-content ol li::before { content: counter(article-list, decimal-leading-zero); position: absolute; left: 13px; top: 16px; color: var(--teal); font: 800 .72rem/1 var(--display); }
.article-content a { color: var(--teal); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(44,165,160,.35); text-underline-offset: .18em; }
.article-content strong { color: var(--ink); }
.article-sidebar { position: sticky; top: 28px; display: grid; gap: 28px; }
.article-toc, .article-help { padding: 30px; overflow: hidden; border: 1px solid rgba(8,197,216,.18); border-radius: 28px; background: linear-gradient(145deg, #f7feff, #e5f9fa); box-shadow: 0 22px 60px rgba(16,41,61,.08); }
.article-toc { display: grid; gap: 0; }
.article-toc > span { margin-bottom: 15px; color: var(--teal); font: 800 .7rem/1 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.article-toc a { padding: 12px 0; color: var(--muted); border-top: 1px solid rgba(16,41,61,.1); font-size: .86rem; line-height: 1.35; }
.article-toc a:hover { color: var(--teal); }
.article-help { padding: 32px; color: #fff; background: linear-gradient(145deg, var(--ink), #17637b 66%, var(--teal)); }
.article-help .eyebrow { margin-bottom: 18px; color: #fff; background: rgba(255,255,255,.12); -webkit-text-fill-color: #fff; }
.article-help h2 { margin: 0; font: 800 2rem/1.05 var(--display); }
.article-help p { margin: 18px 0 28px; color: rgba(255,255,255,.82); font-size: .94rem; line-height: 1.55; }
.article-help .button { min-height: 48px; padding-inline: 18px; font-size: .68rem; }
.article-help .button::after { width: 48px; height: 48px; right: -46px; }
.article-next { padding: 95px 0 110px; background: var(--mist); }
.article-next__panel { min-height: 245px; padding: 48px 54px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 45px; overflow: hidden; border: 1px solid rgba(8,197,216,.2); border-radius: 34px; background: linear-gradient(120deg, #fff, #dff8f8); box-shadow: 0 26px 70px rgba(16,41,61,.09); }
.article-next__panel span { color: var(--teal); font: 800 .72rem/1 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.article-next__panel h2 { max-width: 850px; margin: 14px 0 0; font: 800 clamp(2rem, 4vw, 3.8rem)/1 var(--display); }
.inner-page .contact-panel { box-shadow: 0 32px 90px rgba(16,41,61,.16); }
.contact-reassurance { padding: 0 0 105px; background: #fff; }
.contact-reassurance__grid { overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(8,197,216,.2); border-radius: 30px; background: linear-gradient(135deg, #f7feff, #e4f9fa); box-shadow: 0 24px 65px rgba(16,41,61,.08); }
.contact-reassurance article { min-height: 150px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.contact-reassurance article + article { border-left: 1px solid rgba(16,41,61,.1); }
.contact-reassurance strong { font: 800 clamp(1.5rem, 2.4vw, 2.35rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
.contact-reassurance span { margin-top: 12px; color: var(--muted); }

/* Websites overview: visual story, process and route guidance */
@media (min-width: 1001px) {
  .websites-page .choice-card__top h2 { max-width: none; white-space: nowrap; }
}

.websites-centre__visual { isolation: isolate; background: linear-gradient(145deg, #167d81 0%, var(--teal) 48%, var(--cyan) 100%); }
.websites-centre__visual::before { z-index: 0; }
.websites-centre__visual::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(7,45,60,.94) 0%, rgba(8,55,68,.76) 48%, rgba(5,71,79,.3) 78%); pointer-events: none; }
.websites-centre__art { width: 116%; height: 116%; position: absolute; right: -12%; top: -8%; z-index: 1; object-fit: contain; object-position: right center; opacity: .72; filter: saturate(.68) brightness(.76) contrast(1.02); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 17%, #000 44%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 17%, #000 44%); }
.websites-centre__copy { max-width: 470px; position: relative; z-index: 3; }
.websites-centre__copy h3 { margin: 0; }

.websites-process .process-card { isolation: isolate; color: #fff; border: 0; box-shadow: 0 28px 70px rgba(16,41,61,.14); transition: transform .3s ease, box-shadow .3s ease; }
.websites-process .process-card:nth-child(1) { background: linear-gradient(145deg, var(--ink) 0%, #17637b 72%, #268f91 100%); }
.websites-process .process-card:nth-child(2) { background: linear-gradient(145deg, #138f91 0%, var(--teal) 48%, var(--cyan) 100%); }
.websites-process .process-card:nth-child(3) { background: linear-gradient(145deg, #1886aa 0%, #35b6d8 52%, #168b8d 100%); }
.websites-process .process-card:hover { transform: translateY(-6px); box-shadow: 0 34px 80px rgba(16,41,61,.2); }
.websites-process .process-card::before { position: relative; z-index: 2; color: var(--ink); background: rgba(255,255,255,.9); -webkit-text-fill-color: var(--ink); }
.websites-process .process-card h3, .websites-process .process-card p { position: relative; z-index: 2; }
.websites-process .process-card p { color: rgba(255,255,255,.84); }
.process-card__watermark { width: 220px; height: 220px; position: absolute; right: -30px; top: -34px; z-index: 0; object-fit: contain; opacity: .24; filter: saturate(.72) drop-shadow(0 18px 24px rgba(5,35,48,.2)); transform: rotate(7deg); }
.websites-process .process-card:nth-child(2) .process-card__watermark { width: 235px; height: 235px; right: -38px; top: -42px; transform: rotate(-6deg); }
.websites-process .process-card:nth-child(3) .process-card__watermark { width: 245px; height: 245px; right: -38px; top: -45px; transform: rotate(5deg); }

.websites-fit { overflow: hidden; isolation: isolate; color: var(--ink); background: linear-gradient(145deg, #f8feff 0%, var(--mist) 58%, #e2f7f8 100%); }
.websites-fit::before { content: ''; width: 420px; height: 420px; position: absolute; right: -235px; bottom: -260px; z-index: -1; border: 62px solid rgba(8,197,216,.06); border-radius: 50%; box-shadow: 0 0 0 58px rgba(8,215,198,.03); }
.websites-fit__layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(60px, 6.5vw, 100px); align-items: center; }
.websites-fit__visual { min-height: 520px; position: relative; overflow: hidden; border: 1px solid rgba(8,197,216,.2); border-radius: 38px; background: linear-gradient(145deg, #dff7f8, #bfeaec); box-shadow: 0 28px 70px rgba(16,41,61,.12); }
.websites-fit__visual::after { content: ''; width: 72px; height: 72px; position: absolute; right: 8%; top: 9%; border: 15px solid rgba(255,255,255,.38); border-radius: 50%; }
.websites-fit__visual img { width: 108%; height: 108%; position: absolute; left: -4%; bottom: -4%; z-index: 2; object-fit: contain; object-position: center; filter: drop-shadow(0 24px 28px rgba(16,41,61,.2)); }
.websites-fit__orbit { width: 72%; aspect-ratio: 1; position: absolute; left: 14%; top: 14%; border: 1px dashed rgba(16,41,61,.2); border-radius: 50%; }
.websites-fit__orbit::before, .websites-fit__orbit::after { content: ''; width: 15px; height: 15px; position: absolute; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 20px rgba(75,200,237,.42); }
.websites-fit__orbit::before { left: 3%; top: 28%; }
.websites-fit__orbit::after { right: 5%; bottom: 20%; }
.websites-fit__intro { max-width: 690px; margin-bottom: 38px; }
.websites-fit__intro h2 { margin: 20px 0 16px; font: 800 clamp(2.8rem, 5vw, 5rem)/.98 var(--display); letter-spacing: var(--heading-tracking); }
.websites-fit__intro p { max-width: 640px; margin: 0; color: var(--muted); }
.websites-fit__ribbon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.websites-fit__ribbon a { min-width: 0; min-height: 150px; padding: 25px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(8,197,216,.2); border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 18px 42px rgba(16,41,61,.08); transition: transform .25s ease, box-shadow .25s ease; }
.websites-fit__ribbon a:hover { transform: translateY(-5px); box-shadow: 0 25px 55px rgba(16,41,61,.14); }
.websites-fit__ribbon strong { color: transparent; background: linear-gradient(90deg, var(--teal), var(--aqua)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 800 clamp(1.65rem, 2.35vw, 2.55rem)/.95 var(--display); letter-spacing: var(--heading-tracking); }
.websites-fit__ribbon span { margin-top: 12px; color: var(--ink); font: 800 .95rem/1.15 var(--display); }

.journey-prompt--compact { padding: 0 0 72px; background: linear-gradient(180deg, var(--mist), #fff); }
.websites-page #website-routes { padding-bottom: 58px; }
.journey-prompt--compact .journey-prompt__panel { min-height: 170px; padding: 30px 38px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; border-radius: 30px; }
.journey-prompt--compact .journey-prompt__icon { --clay-disc-size: 64px; --clay-icon-size: 78px; }
.journey-prompt--compact h2 { margin: 0 0 7px; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.journey-prompt--compact p { font-size: .96rem; }

@media (max-width: 1000px) {
  .inner-page main > .section { padding-block: 82px; }
  .inner-page .inner-story .visual-panel { min-height: 420px; }
  .inner-page .inner-cards .feature-card { min-height: 280px; }
  .journey-prompt { padding-bottom: 82px; }
  .journey-prompt__panel { grid-template-columns: auto 1fr; padding: 40px; }
  .journey-prompt .button { grid-column: 2; justify-self: start; }
  .service-proof__grid { grid-template-columns: 1fr; gap: 42px; }
  .contact-reassurance { padding-bottom: 82px; }
  .websites-fit__layout { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: 38px; }
  .websites-fit__visual { min-height: 460px; }
  .websites-centre__art { width: 110%; right: -7%; }
  .package-switcher__inner { min-height: 102px; gap: 28px; }
  .package-switcher__links a { min-height: 58px; padding-inline: 16px; }
  .package-story-panel { min-height: 440px; }
  .fact-band__grid.package-pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "copy rates"; column-gap: 38px; }
  .package-inclusions__grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 42px; }
  .package-inclusions__intro { position: static; }
  .package-inclusions__note { grid-column: auto; margin: 30px 0 0; }
  .social-story .feature-split { grid-template-columns: 1fr; }
  .social-story .feature-copy { max-width: 760px; }
  .social-network { width: min(100%, 540px); justify-self: center; }
  .social-support__grid { grid-template-columns: 1fr; }
  .social-support__grid .feature-card { min-height: 280px; }
  .social-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-intro__grid, .seo-progress__grid { grid-template-columns: 1fr; }
  .seo-intro__visual { width: min(100%, 620px); justify-self: center; }
  .ads-intro__grid { grid-template-columns: 1fr; }
  .ads-intro__visual { width: min(100%, 620px); justify-self: center; }
  .ads-route-grid { grid-template-columns: 1fr; }
  .ads-route-card { min-height: 290px; }
  .ads-process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-budget__grid { grid-template-columns: 1fr; gap: 38px; }
  .ads-focus__grid { grid-template-columns: 1fr; gap: 36px; }
  .seo-factor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-route { width: min(100%, 680px); justify-self: center; }
  .article-hero { min-height: 0; padding: 185px 0 78px; }
  .article-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .article-hero__visual { width: min(100%, 700px); }
  .article-layout { grid-template-columns: 1fr; gap: 60px; }
  .article-content { max-width: 820px; }
  .article-sidebar { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .inner-page main > .section { padding-block: 70px; }
  .inner-page .inner-story .feature-split { gap: 38px; }
  .inner-page .inner-story .visual-panel { min-height: 360px; }
  .inner-page .inner-cards .section-heading { margin-bottom: 38px; }
  .inner-page .inner-cards .feature-card { min-height: 270px; padding: 28px; }
  .inner-page .inner-process .process-grid { gap: 18px; }
  .inner-page .inner-process .process-card { min-height: 270px; padding: 28px; }
  .journey-prompt { padding: 0 0 70px; }
  .journey-prompt__panel { min-height: 0; padding: 32px 28px 36px; grid-template-columns: 1fr; gap: 22px; border-radius: 28px; }
  .journey-prompt__icon { --clay-disc-size: 68px; --clay-icon-size: 82px; }
  .journey-prompt .button { grid-column: auto; justify-self: start; }
  .service-proof__quote { min-height: 0; padding: 46px 30px 38px 62px; border-radius: 28px; }
  .inner-page .inner-closing { padding: 70px 0 88px; }
  .inner-page .blog-card { --blog-card-padding: 28px; min-height: 320px; padding: var(--blog-card-padding); }
  .contact-reassurance { padding-bottom: 70px; }
  .contact-reassurance__grid { grid-template-columns: 1fr; border-radius: 24px; }
  .contact-reassurance article { min-height: 125px; }
  .websites-centre__art { width: 122%; height: 122%; right: -20%; top: -11%; }
  .websites-process .process-card { min-height: 290px; }
  .process-card__watermark { width: 190px; height: 190px; }
  .websites-fit__layout { grid-template-columns: 1fr; gap: 42px; }
  .websites-fit__visual { min-height: 420px; }
  .websites-fit__intro { margin-bottom: 34px; }
  .websites-fit__ribbon { grid-template-columns: 1fr; gap: 12px; }
  .websites-fit__ribbon a { min-height: 112px; padding: 20px 14px; }
  .journey-prompt--compact { padding-bottom: 58px; }
  .websites-page #website-routes { padding-bottom: 44px; }
  .journey-prompt--compact .journey-prompt__panel { padding: 28px; grid-template-columns: 1fr; gap: 18px; }
  .journey-prompt--compact .button { grid-column: auto; }
  .contact-reassurance article + article { border-left: 0; border-top: 1px solid rgba(16,41,61,.1); }
  .package-switcher__inner { min-height: 0; padding-block: 25px; grid-template-columns: 1fr; gap: 16px; }
  .package-switcher__label { text-align: center; }
  .package-switcher__links { gap: 7px; }
  .package-switcher__links a { min-height: 50px; padding: 0 10px; justify-content: center; gap: 7px; font-size: .88rem; }
  .package-switcher__links a span { display: none; }
  .package-story-panel { min-height: 390px; }
  .package-story-panel__art { width: 124%; height: 124%; right: -35%; bottom: -10%; opacity: .72; }
  .package-story-panel--standard .package-story-panel__art { width: 132%; right: -20%; }
  .package-story-panel--micro .package-story-panel__art { width: 120%; right: -29%; }
  .package-story-panel__copy { max-width: 80%; padding: 28px; }
  .package-story-panel__copy h3 { font-size: 2.25rem; }
  .package-card__watermark, .package-benefits .feature-card:nth-child(n) .package-card__watermark { width: 205px; height: 205px; right: -34px; top: -34px; }
  .fact-band__grid.package-pricing__grid { grid-template-columns: 1fr; grid-template-areas: "copy" "rates"; gap: 26px; }
  .seo-intro__visual { border-radius: 28px; }
  .seo-intro__chip { left: 18px; bottom: 18px; }
  .seo-factor-grid { grid-template-columns: 1fr; gap: 16px; }
  .seo-factor-card { min-height: 230px; padding: 22px; }
  .seo-factor-card > img { width: 165px; height: 165px; right: -28px; top: -30px; }
  .seo-factor-card > span { font-size: 2.15rem; }
  .seo-factor-card h3 { margin-bottom: 9px; }
  .seo-route { min-height: 0; padding: 26px; border-radius: 28px; }
  .seo-route__line { left: 70px; top: 70px; bottom: 70px; }
  .seo-route article, .seo-route article:nth-of-type(even) { min-height: 145px; margin-left: 0; padding: 20px 20px 20px 90px; }
  .seo-route article > img { width: 75px; height: 75px; left: 7px; }
  .seo-foundations .fact-band__grid { grid-template-columns: 1fr; gap: 32px; }
  .package-pricing .fact-band__items { gap: 12px; }
  .package-pricing .fact-band__items article { min-height: 112px; padding: 18px 12px; border-radius: 22px; }
  .package-pricing .fact-band__items article:nth-child(-n+2) { min-height: 142px; }
  .package-pricing .fact-band__items article:nth-child(-n+2) strong { font-size: clamp(2.35rem, 13vw, 4rem); }
  .package-inclusions__list { grid-template-columns: 1fr; border-radius: 24px; }
  .package-inclusions__list article { min-height: 145px; padding: 25px; border-right: 0; border-bottom: 1px solid rgba(16,41,61,.1); }
  .package-inclusions__list article:nth-child(n+5) { border-bottom: 1px solid rgba(16,41,61,.1); }
  .package-inclusions__list article:last-child { border-bottom: 0; }
  .package-inclusions__note { margin: 30px 0 0; padding: 22px; }
  .package-process__icon, .package-page .package-process .process-card:nth-child(n) .package-process__icon { width: 205px; height: 205px; right: -35px; top: -38px; }
  .ads-intro__visual { border-radius: 28px; }
  .ads-intro__chip { left: 18px; bottom: 18px; max-width: calc(100% - 36px); }
  .ads-process__grid { grid-template-columns: 1fr; }
  .ads-process__grid article { min-height: 280px; }
  .ads-budget__cards { grid-template-columns: 1fr; }
  .ads-budget__cards article { min-height: 205px; }
  .ads-focus__items article { min-height: 150px; }
  .article-hero { padding: 165px 0 62px; }
  .article-hero::before { width: 420px; height: 420px; right: -250px; top: 200px; }
  .article-hero h1 { font-size: clamp(2.45rem, 12vw, 3.65rem); }
  .article-hero__grid { gap: 36px; }
  .article-hero__visual { border-radius: 26px; transform: none; }
  .article-section { padding: 70px 0 82px; }
  .article-layout { gap: 48px; }
  .article-content { font-size: 1rem; }
  .article-content h2 { margin-top: 55px; }
  .article-content li { padding: 14px 15px 14px 43px; }
  .article-sidebar { grid-template-columns: 1fr; }
  .article-next { padding: 70px 0 85px; }
  .article-next__panel { min-height: 0; padding: 34px 28px; grid-template-columns: 1fr; gap: 30px; border-radius: 28px; }
  .article-next__panel .button { justify-self: start; }
}

.section-heading { max-width: 820px; margin-bottom: 48px; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading h2 { margin: 0; font: 800 clamp(2.65rem, 5vw, 5rem)/1 var(--display); letter-spacing: var(--heading-tracking); text-wrap: balance; }
.section-heading p { max-width: 720px; margin: 22px 0 0; color: var(--muted); }
.section-heading--center p { margin-inline: auto; }
.section-heading--split { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(44px, 5vw, 76px); align-items: end; }
.section-heading--split > * { min-width: 0; }
.section-heading--split h2 { width: 100%; max-width: none; text-wrap: initial; }
.section-heading--split p { margin: 0 0 8px; }
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.feature-split--reverse > :first-child { order: 2; }
.feature-copy h2 { margin: 0 0 24px; font: 800 clamp(2.55rem, 4.6vw, 4.75rem)/1 var(--display); letter-spacing: var(--heading-tracking); text-wrap: balance; }
.feature-copy h3 { margin: 34px 0 14px; font: 800 1.45rem/1.18 var(--display); }
.feature-copy p { margin: 0 0 18px; color: var(--muted); }
.feature-copy .button { margin-top: 15px; }
.visual-panel { min-height: 500px; padding: 42px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 38px; color: #fff; background: linear-gradient(145deg, var(--ink-2), var(--ink)); box-shadow: var(--shadow); }
.visual-panel::before { content: ''; width: 380px; height: 380px; position: absolute; right: -105px; top: -110px; border: 62px solid rgba(75,200,237,.12); border-radius: 50%; box-shadow: 0 0 0 58px rgba(8,215,198,.06); }
.visual-panel--aqua { background: linear-gradient(145deg, var(--teal), var(--cyan)); }
.visual-panel--light { color: var(--ink); background: linear-gradient(145deg, #fff, var(--mist)); border: 1px solid rgba(8,197,216,.2); }
.visual-panel__icon { --clay-disc-size: 96px; --clay-icon-size: 118px; position: relative; z-index: 1; }
.visual-panel h3 { max-width: 440px; margin: auto 0 0; position: relative; z-index: 1; font: 800 clamp(2rem, 3.5vw, 3.4rem)/1.05 var(--display); letter-spacing: var(--heading-tracking); }
.visual-panel p { max-width: 480px; margin: 18px 0 0; position: relative; z-index: 1; color: rgba(255,255,255,.78); }
.visual-panel--light p { color: var(--muted); }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-grid--four { grid-template-columns: repeat(4, 1fr); }
.feature-card { min-height: 300px; padding: 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(8,197,216,.18); border-radius: 28px; background: #fff; box-shadow: 0 22px 60px rgba(16,41,61,.07); }
.feature-card::after { content: ''; width: 155px; height: 155px; position: absolute; right: -73px; top: -72px; border: 30px solid rgba(8,215,198,.09); border-radius: 50%; }
.feature-card:nth-child(3n+2) { color: #fff; background: linear-gradient(145deg, var(--teal), var(--cyan)); }
.feature-card:nth-child(3n+3) { color: #fff; background: var(--ink); }
.feature-card__icon { --clay-disc-size: 58px; --clay-icon-size: 70px; position: relative; z-index: 1; }
.feature-card h3 { margin: auto 0 14px; position: relative; z-index: 1; font: 800 1.55rem/1.12 var(--display); letter-spacing: var(--heading-tracking); }
.feature-card p { margin: 0; position: relative; z-index: 1; color: var(--muted); line-height: 1.55; }
.feature-card:nth-child(3n+2) p, .feature-card:nth-child(3n+3) p { color: rgba(255,255,255,.8); }
.feature-card--plain:nth-child(n) { color: var(--ink); background: #fff; }
.feature-card--plain:nth-child(n) p { color: var(--muted); }

.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: process; }
.process-card { min-height: 270px; padding: 34px; position: relative; overflow: hidden; border: 1px solid rgba(8,197,216,.18); border-radius: 28px; background: #fff; counter-increment: process; }
.process-card::before { content: counter(process, decimal-leading-zero); display: block; margin-bottom: 70px; color: transparent; background: linear-gradient(90deg, var(--teal), var(--aqua)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 800 3.1rem/.9 var(--display); letter-spacing: -.06em; }
.process-card h3 { margin: 0 0 13px; font: 800 1.45rem/1.12 var(--display); }
.process-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.feature-split > .process-grid { grid-template-columns: 1fr; }
.feature-split > .process-grid .process-card { min-height: 0; }
.feature-split > .process-grid .process-card::before { margin-bottom: 24px; }

.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.choice-card { min-height: 540px; padding: 24px; display: flex; flex-direction: column; border: 1px solid rgba(75,200,237,.32); border-radius: 30px; background: #fff; box-shadow: 0 24px 70px rgba(16,41,61,.08); }
.choice-card__top { min-height: 230px; padding: 28px; position: relative; overflow: hidden; color: #fff; border-radius: 24px; background: linear-gradient(140deg, var(--teal), var(--cyan)); }
.choice-card--standard .choice-card__top { background: linear-gradient(140deg, var(--ink), #17637b 68%, var(--aqua)); }
.choice-card--bespoke .choice-card__top { background: linear-gradient(140deg, var(--cyan), var(--turquoise) 58%, var(--teal)); }
.choice-card__top::after { content: ''; width: 180px; height: 180px; position: absolute; right: -54px; bottom: -86px; border: 34px solid rgba(255,255,255,.12); border-radius: 50%; }
.choice-card__icon { --clay-disc-size: 68px; --clay-icon-size: 84px; position: relative; z-index: 1; }
.choice-card__top h2 { max-width: 250px; margin: 42px 0 0; position: relative; z-index: 1; font: 800 2.15rem/1 var(--display); letter-spacing: var(--heading-tracking); }
.choice-card__top p { margin: 12px 0 0; position: relative; z-index: 1; color: rgba(255,255,255,.82); font-weight: 700; }
.choice-card__body { padding: 24px 8px 10px; display: flex; flex: 1; flex-direction: column; }
.choice-card__body p { margin: 0 0 20px; color: var(--muted); }
.choice-card ul, .check-list { margin: 0 0 28px; padding: 0; list-style: none; }
.choice-card li, .check-list li { padding: 9px 0 9px 26px; position: relative; border-bottom: 1px solid rgba(16,41,61,.09); color: var(--muted); line-height: 1.4; }
.choice-card li::before, .check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--cyan); font-weight: 800; }
.choice-card .button { width: calc(100% - 52px); margin-top: auto; }

.fact-band { overflow: hidden; color: #fff; background: linear-gradient(120deg, var(--ink), var(--teal) 48%, var(--cyan)); }
.fact-band__grid { display: grid; grid-template-columns: .85fr 1.4fr; gap: 70px; align-items: center; }
.fact-band h2 { margin: 0; font: 800 clamp(2.6rem, 5vw, 5rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
.fact-band p { color: rgba(255,255,255,.8); }
.fact-band__items { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border-radius: 30px; background: #fff; box-shadow: var(--shadow); }
.fact-band__items article { min-height: 190px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact-band__items article:nth-child(2n) { border-right: 0; }
.fact-band__items article:nth-child(n+3) { border-bottom: 0; }
.fact-band__items strong { color: transparent; background: linear-gradient(90deg, var(--teal), var(--aqua)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 800 clamp(2rem, 3.8vw, 3.8rem)/1 var(--display); letter-spacing: -.055em; }
.fact-band__items span { margin-top: 13px; font: 800 1rem/1.2 var(--display); }

.page-cta { padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; overflow: hidden; color: #fff; border-radius: 38px; background: radial-gradient(circle at 88% 18%, rgba(75,200,237,.26), transparent 26%), linear-gradient(120deg, var(--ink), var(--teal)); box-shadow: var(--shadow); }
.page-cta .eyebrow { color: #fff; background: rgba(255,255,255,.14); -webkit-text-fill-color: #fff; }
.page-cta h2 { margin: 0; font: 800 clamp(2.5rem, 4.6vw, 4.5rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
.page-cta p { max-width: 720px; margin: 18px 0 0; color: rgba(255,255,255,.76); }
.page-cta .button { white-space: nowrap; }

.faq-list { max-width: 980px; margin: 0 auto; display: grid; gap: 14px; }
.faq-list details { padding: 0 26px; border: 1px solid rgba(8,197,216,.2); border-radius: 22px; background: #fff; }
.faq-list summary { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font: 800 1.1rem/1.25 var(--display); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--mist); font-size: 1.35rem; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details p { margin: -4px 0 25px; color: var(--muted); }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card { --blog-card-padding: 30px; min-height: 380px; padding: var(--blog-card-padding); position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(8,197,216,.2); border-radius: 28px; background: #fff; box-shadow: 0 22px 60px rgba(16,41,61,.07); }
.blog-card::before { content: ''; height: 8px; position: absolute; inset: 0 0 auto; background: linear-gradient(90deg, var(--teal), var(--turquoise), var(--aqua)); }
.blog-card__media { aspect-ratio: 3 / 2; margin: calc(var(--blog-card-padding) * -1) calc(var(--blog-card-padding) * -1) 0; overflow: hidden; background: linear-gradient(145deg, #c9f2f3, #8bdfe5); }
.blog-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.blog-card:hover .blog-card__media img { transform: scale(1.035); }
.blog-card__tag { width: fit-content; margin: 22px 0 22px; padding: 9px 13px; border-radius: 999px; color: var(--teal); background: var(--mist); font: 800 10px/1 var(--display); letter-spacing: .055em; text-transform: uppercase; }
.blog-card h2 { margin: 0 0 17px; font: 800 1.45rem/1.16 var(--display); letter-spacing: var(--heading-tracking); }
.blog-card p { margin: 0 0 26px; color: var(--muted); line-height: 1.55; }
.blog-card small { margin-top: auto; color: var(--teal); font: 700 12px/1.4 var(--display); }
.contact-details { display: grid; gap: 14px; }
.contact-detail { padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.contact-detail:last-child { border-bottom: 0; }
.contact-detail strong { display: block; margin-bottom: 6px; color: var(--aqua); font: 800 12px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.contact-detail a, .contact-detail span { color: #fff; font: 700 1.15rem/1.45 var(--display); }

/* Contact page */
.contact-page .page-hero--split { --inner-hero-art-inset: -5% -13% -4%; }
.contact-page .page-hero__art {
  transform: translate(var(--inner-hero-art-shift), 30px) scale(1.1);
  transform-origin: center bottom;
}
.contact-page .page-hero__orbit {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(480px, 100%);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.contact-conversation { padding: 105px 0; background: linear-gradient(180deg, #fff 0%, #f1fbfc 58%, #e4f8fa 100%); }
.contact-conversation__heading { width: 100%; max-width: none; margin-bottom: 48px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(44px, 5vw, 76px); align-items: end; }
.contact-conversation__heading h2 { max-width: 690px; }
.contact-conversation__heading p { max-width: 560px; margin: 0 0 8px; justify-self: end; }
.contact-page .contact-panel { grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr); position: relative; isolation: isolate; background: linear-gradient(120deg, #0d2b3d 0%, var(--ink) 54%, #123d50 100%); box-shadow: 0 34px 90px rgba(16,41,61,.17); }
.contact-page .contact-panel::after { content: ''; width: 430px; height: 430px; position: absolute; right: -235px; bottom: -270px; z-index: -1; border: 52px solid rgba(8,197,216,.055); border-radius: 50%; box-shadow: 0 0 0 55px rgba(75,200,237,.025); }
.contact-page .contact-panel__copy { padding: 58px 52px; background: radial-gradient(circle at 5% 5%, rgba(75,200,237,.22), transparent 38%), linear-gradient(150deg, rgba(44,165,160,.2), transparent 72%); }
.contact-panel__intro { max-width: 360px; margin: -1px 0 14px; color: rgba(255,255,255,.72); line-height: 1.6; }
.contact-page .callback-form { padding: 58px 58px 54px; align-content: start; gap: 17px; }
.contact-page .field label { color: rgba(255,255,255,.9); }
.contact-page .field input, .contact-page .field select, .contact-page .field textarea { border-radius: 15px; background-color: rgba(255,255,255,.075); }
.contact-page .field textarea { min-height: 145px; resize: vertical; }
.contact-page .callback-form .button { width: calc(100% - 52px); justify-content: center; }
.contact-page .contact-reassurance { margin-top: 24px; padding: 0; }
.contact-page .contact-reassurance__grid { gap: 18px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
.contact-page .contact-reassurance article { min-height: 135px; border: 1px solid rgba(8,197,216,.2); border-radius: 24px; background: rgba(255,255,255,.82); box-shadow: 0 20px 50px rgba(16,41,61,.07); }
.contact-page .contact-reassurance article + article { border-left: 1px solid rgba(8,197,216,.2); }
.contact-route { padding: 110px 0 125px; overflow: hidden; background: linear-gradient(180deg, #e4f8fa 0%, #f3fcfd 52%, #fff 100%); }
.contact-route .section-heading { width: 100%; max-width: none; margin-bottom: 52px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(44px, 5vw, 76px); align-items: end; }
.contact-route .section-heading h2 { max-width: 760px; }
.contact-route .section-heading p { max-width: 520px; margin: 0 0 8px; justify-self: end; }
.contact-route__grid { gap: 20px; }
.contact-route__grid .process-card { min-height: 330px; padding: 38px 36px; overflow: hidden; isolation: isolate; color: #fff; border: 0; background: linear-gradient(145deg, var(--ink), #17637b 70%, var(--teal)); box-shadow: 0 24px 65px rgba(16,41,61,.13); }
.contact-route__grid .process-card:nth-child(2) { background: linear-gradient(145deg, var(--teal), var(--cyan)); }
.contact-route__grid .process-card:nth-child(3) { background: linear-gradient(145deg, #278fac, var(--aqua) 58%, var(--teal)); }
.contact-route__grid .process-card::after { display: none; }
.contact-route__grid .process-card::before { color: var(--ink); background: rgba(255,255,255,.94); -webkit-text-fill-color: var(--ink); }
.contact-route__grid .process-card h3 { max-width: 285px; position: relative; z-index: 2; }
.contact-route__grid .process-card p { max-width: 300px; position: relative; z-index: 2; color: rgba(255,255,255,.84); }
.contact-route__icon { width: 245px; height: 245px; position: absolute; right: -38px; top: -38px; z-index: -1; object-fit: contain; opacity: .4; filter: saturate(.9) drop-shadow(0 18px 20px rgba(5,35,48,.18)); transform: rotate(5deg); }
.contact-route__grid .process-card:nth-child(2) .contact-route__icon { width: 230px; height: 230px; right: -28px; top: -32px; transform: rotate(-7deg); }
.contact-route__grid .process-card:nth-child(3) .contact-route__icon { width: 250px; height: 250px; right: -45px; top: -45px; transform: rotate(7deg); }

/* 404 page */
.error-hero { min-height: 760px; padding: 190px 0 105px; overflow: hidden; position: relative; color: #fff; background: radial-gradient(circle at 82% 26%, rgba(111,201,196,.48), transparent 31%), linear-gradient(125deg, var(--ink) 0%, #17637b 50%, var(--turquoise) 100%); }
.error-hero::after { content: ''; width: 580px; height: 580px; position: absolute; right: -160px; top: 35px; border: 70px solid rgba(255,255,255,.055); border-radius: 50%; box-shadow: 0 0 0 76px rgba(255,255,255,.025); }
.error-hero__grid { min-height: 465px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(440px, .88fr); gap: clamp(34px, 4vw, 64px); align-items: center; }
.error-hero__copy, .error-hero__visual { min-width: 0; position: relative; z-index: 1; }
.error-hero .eyebrow { color: #fff; background: rgba(255,255,255,.14); -webkit-text-fill-color: #fff; }
.error-hero__code { margin: 22px 0 -4px; color: rgba(255,255,255,.18); font: 800 clamp(5.5rem, 10vw, 9.5rem)/.8 var(--display); letter-spacing: -.06em; }
.error-hero h1 { max-width: 820px; margin: 0; font: 800 clamp(3.5rem, 5.65vw, 6.25rem)/.93 var(--display); letter-spacing: var(--heading-tracking); text-wrap: balance; }
.error-hero__copy > p:not(.error-hero__code) { max-width: 630px; margin: 25px 0 0; color: rgba(255,255,255,.82); font-size: 1.08rem; line-height: 1.65; }
.error-hero__actions { margin-top: 33px; display: flex; flex-wrap: wrap; gap: 13px; }
.error-hero .button--outline { color: #fff; border-color: rgba(255,255,255,.34); }
.error-hero__visual { min-height: 500px; display: grid; place-items: center; }
.error-hero__visual img { width: min(138%, 820px); max-width: none; max-height: 700px; position: relative; z-index: 2; object-fit: contain; filter: drop-shadow(0 35px 45px rgba(4,32,45,.3)); animation: error-float 5s ease-in-out infinite; }
.error-hero__orbit { width: 455px; height: 455px; position: absolute; border: 1px dashed rgba(255,255,255,.34); border-radius: 50%; animation: orbit 20s linear infinite; }
.error-hero__dot { width: 18px; height: 18px; position: absolute; z-index: 3; border-radius: 50%; background: #fff; box-shadow: 0 0 25px rgba(255,255,255,.65); }
.error-hero__dot--one { left: 10%; top: 24%; }
.error-hero__dot--two { right: 8%; bottom: 24%; background: var(--aqua); }
.error-hero__note { padding: 14px 18px; position: absolute; right: 0; top: 12%; z-index: 3; color: var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(4,32,45,.2); font: 800 11px/1.2 var(--display); transform: rotate(4deg); }
.error-routes { padding: 110px 0 120px; background: linear-gradient(180deg, #e4f8fa, #fff); }
.error-routes .section-heading { margin-bottom: 52px; }
.error-routes__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.error-route-card { min-height: 285px; padding: 32px 29px; overflow: hidden; position: relative; display: flex; flex-direction: column; color: #fff; border-radius: 28px; background: linear-gradient(145deg, var(--ink), #17637b); box-shadow: 0 24px 65px rgba(16,41,61,.12); transition: transform .3s ease, box-shadow .3s ease; }
.error-route-card:nth-child(2) { background: linear-gradient(145deg, var(--teal), var(--cyan)); }
.error-route-card:nth-child(3) { color: var(--ink); background: #fff; border: 1px solid rgba(8,197,216,.22); }
.error-route-card:nth-child(4) { background: linear-gradient(145deg, #278fac, var(--teal)); }
.error-route-card::after { content: ''; width: 170px; height: 170px; position: absolute; right: -92px; top: -86px; border: 28px solid rgba(255,255,255,.09); border-radius: 50%; }
.error-route-card:nth-child(3)::after { border-color: rgba(8,197,216,.08); }
.error-route-card:hover, .error-route-card:focus-visible { transform: translateY(-7px); box-shadow: 0 30px 75px rgba(16,41,61,.17); }
.error-route-card > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.92); font: 800 12px/1 var(--display); }
.error-route-card:nth-child(3) > span { color: #fff; background: linear-gradient(135deg, var(--teal), var(--aqua)); }
.error-route-card h3 { margin: auto 0 13px; font: 800 clamp(1.65rem, 2.4vw, 2.35rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
.error-route-card p { margin: 0 0 24px; color: rgba(255,255,255,.76); line-height: 1.5; }
.error-route-card:nth-child(3) p { color: var(--muted); }
.error-route-card strong { font: 800 11px/1.2 var(--display); letter-spacing: .045em; text-transform: uppercase; }
.error-contact { padding-top: 0; background: #fff; }
.error-contact .page-cta { background: radial-gradient(circle at 88% 18%, rgba(75,200,237,.2), transparent 25%), linear-gradient(120deg, var(--ink), #17637b 54%, var(--teal)); }
@keyframes error-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
.legal-copy { max-width: 850px; }
.legal-copy h2 { margin-top: 46px; font: 800 1.7rem var(--display); }
.legal-page .page-hero {
  padding-bottom: 72px;
  background:
    radial-gradient(circle at 75% 30%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(125deg, #1398a7 0%, #178b98 50%, #176b77 100%);
}
.legal-page .page-hero .container { max-width: 850px; }
.legal-page .page-hero + .section { padding-top: 68px; }
.legal-page .legal-copy > :first-child { margin-top: 0; }

/* Footer */
.site-footer { padding: 82px 0 28px; color: rgba(255,255,255,.68); background: #0a1d2b; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 45px; }
.footer-brand img { width: 220px; }
.site-footer h3 { margin: 0 0 18px; color: #fff; font: 800 15px var(--display); text-transform: uppercase; letter-spacing: var(--heading-tracking); }
.site-footer p { font-size: 15px; }
.site-footer nav a { margin: 8px 0; font-size: 15px; }
.footer-links a { display: flex; align-items: center; gap: 9px; width: fit-content; transition: color .2s ease, transform .2s ease; }
.footer-links a::before { content: ''; width: 14px; height: 14px; flex: 0 0 14px; background: linear-gradient(135deg, var(--mint), var(--aqua)); mask: var(--footer-icon) center / contain no-repeat; -webkit-mask: var(--footer-icon) center / contain no-repeat; }
.footer-links a:hover { color: #fff; transform: translateX(2px); }
.footer-links--quick { --footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.1-.1l-2 2a5 5 0 0 0 7.1 7.1l1.1-1.1'/%3E%3C/svg%3E"); }
.footer-links--useful { --footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h6'/%3E%3C/svg%3E"); }
.footer-links--friends { --footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21s-7-4.35-9.33-8.4C.87 9.48 2.04 5.5 5.5 4.4A5.1 5.1 0 0 1 12 7a5.1 5.1 0 0 1 6.5-2.6c3.46 1.1 4.63 5.08 2.83 8.2C19 16.65 12 21 12 21z'/%3E%3C/svg%3E"); }
.footer-bottom { margin-top: 58px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }

/* Motion */
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes hero-orbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ticker { to { transform: translateX(-33.333%); } }
@keyframes solar-orbit { from { transform: rotate(var(--orbit-start)); } to { transform: rotate(calc(var(--orbit-start) + 360deg)); } }
@keyframes solar-counter { from { transform: translate(-50%, -50%) rotate(calc(0deg - var(--orbit-start))); } to { transform: translate(-50%, -50%) rotate(calc(-360deg - var(--orbit-start))); } }
@keyframes feedback-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes about-pulse { 0%, 100% { transform: scale(.92); opacity: .6; } 50% { transform: scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .section-reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Responsive layouts */
/* Laptop layout: retain the desktop narrative, with tablet-scale artwork and spacing. */
@media (min-width: 1001px) and (max-width: 1180px) {
  .container { width: min(100% - 52px, 1180px); }
  .section { padding-block: 96px; }

  .brand img { width: 185px; }
  .main-nav__surface, .main-nav__links { gap: 4px; }
  .main-nav a { padding-inline: 7px; font-size: 10px; white-space: nowrap; }
  .header-cta { min-height: 50px; margin-right: 48px; padding-inline: 19px; white-space: nowrap; }
  .header-cta::after { width: 50px; height: 50px; right: -48px; }

  .hero { min-height: 790px; padding: 205px 0 90px; }
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); gap: 34px; }
  .hero h1 { font-size: clamp(3.75rem, 7.2vw, 5.35rem); }
  .hero-visual { min-height: 500px; transform: translateX(-55px); }

  .two-col { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 44px; }
  .section--who .who-visual { min-height: 470px; }

  .service-showcase-grid { height: 395px; gap: 16px; }
  .service-showcase-card { width: 104px; flex-basis: 104px; }
  .service-showcase-card.is-active { width: calc(100% - 360px); flex-basis: calc(100% - 360px); }
  .service-showcase-toggle { font-size: 1.45rem; }

  .marketing-overview__grid { grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); gap: 30px; }
  .marketing-overview__copy { max-width: 620px; }
  .marketing-overview__copy::before { inset: -30px -18px -30px -28px; border-radius: 34px 100px 100px 34px; }
  .marketing-overview__copy h2 { font-size: clamp(3rem, 5.8vw, 4.35rem); }
  .marketing-system { width: min(100%, 470px); justify-self: end; }
  .marketing-system__centre { width: 150px; padding: 20px; }
  .marketing-system__centre strong { font-size: 1.75rem; }
  .marketing-system__planet--web { --orbit-radius: 185px; }
  .marketing-system__planet--seo { --orbit-radius: 150px; }
  .marketing-system__planet--social { --orbit-radius: 116px; }
  .marketing-system__planet--ads { --orbit-radius: 170px; }
  .marketing-system__planet--team { --orbit-radius: 90px; }
  .marketing-system__planet--engagement { --orbit-radius: 132px; }
  .marketing-system__planet--target { --orbit-radius: 200px; }
  .marketing-system__node { width: 82px; height: 82px; padding: 10px; }
  .marketing-system__node--icon { --clay-icon-size: 46px; padding: 13px; }

  .website-options__grid { gap: 16px; }
  .website-plan { padding: 16px; }
  .website-plan__header h3 { max-width: none; padding-right: 52px; font-size: 1.18rem; white-space: nowrap; }
  .website-plan__features summary { min-height: 46px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(8,197,216,.22); border-radius: 999px; color: var(--ink); background: #f4fcfd; cursor: pointer; font: 800 12px/1 var(--display); letter-spacing: .035em; text-transform: uppercase; }
  .website-plan__features summary::after { content: '+'; color: var(--cyan); font-size: 1.25rem; }
  .website-plan__features[open] summary::after { content: '−'; }
  .website-plan__features ul { margin-top: 10px; }

  .feedback-stage { grid-template-columns: minmax(0, 1.3fr) minmax(290px, .7fr); gap: 36px; }
  .feedback-visual { width: min(100%, 330px); }

  .impact-highlights__grid { grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); column-gap: 20px; row-gap: 24px; }
  .impact-highlights__intro { grid-column: 1 / -1; padding: 0 0 6px; }
  .impact-highlights__visual { height: 360px; }
  .impact-highlights__orbit { width: 270px; height: 270px; }
  .impact-highlights__stats { min-height: 360px; margin-left: 0; padding-left: 0; }
  .impact-highlights__stats article { min-height: 180px; padding: 24px 18px; }

  .contact-panel { grid-template-columns: .82fr 1.18fr; }
  .contact-panel__copy, .callback-form { padding: 44px; }
}

@media (max-width: 1000px) {
  .header-cta, .site-header__bar { display: none; }
  .site-header__main { position: relative; z-index: 32; background: #fff; backdrop-filter: none; }
  .site-header__main .container { min-height: 82px; }
  .brand, .menu-toggle { position: relative; z-index: 3; }
  .menu-toggle { display: grid; place-items: center; }
  .main-nav { display: block; position: fixed; inset: 82px 0 0; z-index: 2; color: var(--ink); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-16px); transition: visibility 0s linear .45s, opacity .3s ease, transform .45s cubic-bezier(.2,.75,.2,1); }
  .main-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
  .main-nav__surface { min-height: 100%; padding: 28px max(24px, calc((100vw - 720px) / 2)) 34px; display: grid; grid-template-rows: auto auto 1fr; align-items: start; gap: 14px; position: relative; overflow-x: hidden; overflow-y: auto; isolation: isolate; background: radial-gradient(circle at 88% 82%, rgba(255,255,255,.55), transparent 24%), linear-gradient(145deg, #f8ffff 0%, #daf8f7 48%, #a9efeb 100%); }
  .main-nav__surface::before { content: ''; width: 330px; height: 330px; position: absolute; right: -175px; top: 13%; z-index: -2; border: 55px solid rgba(8,197,216,.11); border-radius: 50%; box-shadow: 0 0 0 52px rgba(44,165,160,.065); }
  .main-nav__surface::after { content: ''; width: 230px; height: 230px; position: absolute; left: -135px; bottom: -80px; z-index: -2; border-radius: 50%; background: rgba(16,41,61,.08); }
  .mobile-nav__intro { display: grid; gap: 7px; position: relative; z-index: 1; }
  .mobile-nav__intro span { width: fit-content; padding: 9px 13px; border: 1px solid rgba(8,197,216,.22); border-radius: 999px; color: var(--teal); background: rgba(255,255,255,.94); box-shadow: 0 8px 22px rgba(16,41,61,.08); font: 800 10px/1 var(--display); letter-spacing: .055em; text-transform: uppercase; }
  .mobile-nav__intro strong { font: 800 clamp(2rem, 7vw, 3rem)/1 var(--display); letter-spacing: var(--heading-tracking); }
  .main-nav__links { display: grid; align-items: stretch; gap: 0; position: relative; z-index: 1; counter-reset: mobile-nav; }
  .main-nav__links a { min-height: 46px; padding: 11px 4px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid rgba(16,41,61,.12); border-radius: 0; font: 800 clamp(1.25rem, 5.4vw, 1.7rem)/1 var(--display); letter-spacing: -.035em; text-transform: none; transition: padding .25s ease, color .25s ease; counter-increment: mobile-nav; }
  .main-nav__links a::before { content: counter(mobile-nav, decimal-leading-zero); width: 25px; flex: 0 0 25px; color: var(--teal); font: 800 9px/1 var(--display); letter-spacing: .08em; }
  .main-nav__links a::after { content: '↗'; margin-left: auto; color: var(--teal); font-size: .9rem; opacity: 0; transform: translate(-7px, 7px); transition: opacity .2s ease, transform .2s ease; }
  .main-nav__links a:hover, .main-nav__links a:focus-visible, .main-nav__links a[aria-current='page'] { padding-left: 12px; color: var(--teal); background: transparent; }
  .section-heading--split { grid-template-columns: 1fr; gap: 22px; }
  .main-nav__links a:focus-visible { outline: 0; box-shadow: inset 4px 0 0 var(--aqua); }
  .main-nav__links a:hover::after, .main-nav__links a:focus-visible::after, .main-nav__links a[aria-current='page']::after { opacity: 1; transform: none; }
  .mobile-nav__footer { align-self: end; padding-top: 16px; display: grid; gap: 12px; position: relative; z-index: 2; }
  .mobile-nav__footer p { margin: 0; color: var(--muted); font-weight: 700; }
  .main-nav .mobile-nav__footer .mobile-nav__cta { width: fit-content; min-height: 48px; padding: 0 3px 0 18px; display: inline-flex; align-items: center; gap: 14px; border-radius: 999px; color: var(--ink); background: linear-gradient(90deg, var(--teal), var(--turquoise), var(--cyan)); font: 800 11px/1 var(--display); letter-spacing: .045em; text-transform: uppercase; }
  .mobile-nav__cta span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.42); font-size: 1rem; }
  .mobile-nav__social { display: flex; gap: 15px; }
  .mobile-nav__social a { padding: 0; color: var(--muted); font: 800 9px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
  .mobile-nav__art { width: min(52vw, 420px); display: block; position: absolute; right: -5%; bottom: -5%; z-index: 0; opacity: .3; pointer-events: none; filter: saturate(.85); }
  .mobile-nav__art img { width: 100%; filter: drop-shadow(0 24px 40px rgba(16,41,61,.14)); }
  .hero { min-height: auto; padding-top: 170px; }
  .about-hero { min-height: auto; }
  .about-hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .about-hero__visual { min-height: 390px; }
  .hero-grid, .two-col, .section-title, .contact-panel { grid-template-columns: 1fr; }
  .marketing-copy, .marketing-story .story-steps { grid-template-columns: 1fr; }
  .marketing-overview__grid { grid-template-columns: 1fr; gap: 35px; }
  .marketing-overview__copy { max-width: 720px; }
  .marketing-system { width: min(100%, 620px); min-height: 0; margin: 0 auto; }
  .feedback-stage { grid-template-columns: 1fr; gap: 28px; }
  .feedback-intro h2 { white-space: normal; }
  .feedback-visual { width: min(100%, 410px); justify-self: center; }
  .testimonial-carousel { padding-top: 0; }
  .testimonial-carousel__controls { position: static; }
  .service-showcase-grid { height: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .service-showcase-card, .service-showcase-card.is-active { width: auto; height: 360px; }
  .service-showcase-toggle { display: none; }
  .service-showcase-panel { opacity: 1; transform: none; }
  .service-showcase-card .service-card-art { width: 112%; height: 128%; right: -14%; top: -14%; object-position: center; opacity: .76; transform: translateX(-20px); transform-origin: center; -webkit-mask-image: none; mask-image: none; }
  .service-showcase-card--ads .service-card-art { transform: translateX(-20px) scale(1.15); }
  .service-showcase-panel::after { inset: 8% 0 0; background: linear-gradient(180deg, transparent 0%, rgba(16,41,61,.28) 32%, rgba(7,28,43,.92) 100%); }
  .service-showcase-content { left: 26px; right: 26px; bottom: 26px; }
  .service-showcase-icon { display: none; }
  .service-showcase-content h3 { font-size: 2rem; }
  .website-options__intro { grid-template-columns: 1fr; gap: 24px; }
  .website-options__grid { grid-template-columns: 1fr 1fr; }
  .website-plan--bespoke { grid-column: 1 / -1; }
  .website-plan__summary { min-height: 0; }
  .website-plan__features summary { min-height: 46px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(8,197,216,.22); border-radius: 999px; color: var(--ink); background: #f4fcfd; cursor: pointer; font: 800 12px/1 var(--display); letter-spacing: .035em; text-transform: uppercase; }
  .website-plan__features summary::after { content: '+'; color: var(--cyan); font-size: 1.25rem; }
  .website-plan__features[open] summary::after { content: '−'; }
  .website-plan__features ul { margin-top: 10px; }
  .about-values__grid { grid-template-columns: 1fr; }
  .about-values__grid article { min-height: 250px; }
  .about-cta { grid-template-columns: 1fr; gap: 32px; }
  .about-cta .button { justify-self: start; }
  .hero-visual { min-height: 480px; }
  .hero .hero-visual { transform: none; }
  .hero .hero-team-art { transform: scale(1.1); }
  .hero .floating-note { translate: none; }
  .section-title { gap: 18px; }
  .impact-highlights__grid { grid-template-columns: 1fr; gap: 18px; }
  .impact-highlights__intro { padding: 0 0 27px; }
  .impact-highlights__visual, .impact-highlights__stats { border-radius: 30px; }
  .impact-highlights__stats { margin-left: 0; padding-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .service-journey-cta { align-items: flex-start; }
  .page-hero--split { --inner-hero-height: auto; --inner-hero-grid-height: auto; --inner-hero-visual-height: 430px; --inner-hero-art-inset: -6% -15% -4%; --inner-hero-art-shift: -60px; padding: 190px 0 72px; }
  .page-hero--blog { --inner-hero-art-inset: -3% -10% -2%; }
  .page-hero__grid, .feature-split, .fact-band__grid { grid-template-columns: 1fr; }
  .page-hero__grid { gap: 32px; }
  .page-hero__copy { max-width: 760px; }
  .page-hero__copy h1 { max-width: 760px; }
  .feature-split--reverse > :first-child { order: 0; }
  .feature-grid--four { grid-template-columns: 1fr 1fr; }
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .choice-card--bespoke { grid-column: 1 / -1; }
  .page-cta { grid-template-columns: 1fr; gap: 30px; }
  .page-cta .button { justify-self: start; }
  .about-values .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .about-values .section-heading .eyebrow { grid-column: auto; margin-bottom: 0; }
  .about-values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-values__grid .feature-card, .about-values__grid .feature-card:first-child { min-height: 350px; }
  .about-page .about-process__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .about-process__grid::before { display: none; }
  .about-process__arrow { display: none; }
  .about-process__grid .process-card, .about-process__grid .process-card:nth-child(n) { min-height: 330px; transform: none; }
  .about-process__grid .process-card:hover, .about-process__grid .process-card:nth-child(n):hover { transform: translateY(-5px); }
  .about-marketing-map__grid { grid-template-columns: 1fr; }
  .about-page .about-marketing-map__steps { grid-template-columns: repeat(3, 1fr); }
  .about-page .about-marketing-map__steps .process-card { min-height: 280px; }
  .about-facts__ribbon { grid-template-columns: repeat(2, 1fr); }
  .about-facts__ribbon article:nth-child(3) { border-left: 0; border-top: 1px solid rgba(16,41,61,.12); }
  .about-facts__ribbon article:nth-child(4) { border-top: 1px solid rgba(16,41,61,.12); }
  .about-facts__layout { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: 38px; }
  .about-facts__visual { min-height: 460px; }
  .contact-conversation__heading, .contact-route .section-heading { grid-template-columns: 1fr; gap: 20px; }
  .contact-conversation__heading p, .contact-route .section-heading p { justify-self: start; }
  .contact-page .contact-panel { grid-template-columns: 1fr; }
  .contact-page .contact-panel__copy, .contact-page .callback-form { padding: 46px; }
  .error-hero { min-height: 0; padding: 175px 0 85px; }
  .error-hero__grid { min-height: 0; grid-template-columns: 1fr; }
  .error-hero__copy { max-width: 760px; }
  .error-hero__visual { min-height: 430px; }
  .error-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 681px) and (max-width: 1000px) {
  .main-nav__surface { padding-top: 46px; grid-template-columns: 1.15fr .85fr; grid-template-rows: auto 1fr; column-gap: 70px; }
  .mobile-nav__intro { grid-column: 1 / -1; }
  .main-nav__links { grid-column: 1; }
  .mobile-nav__footer { grid-column: 2; grid-row: 2; align-self: start; padding: 28px; border-radius: 28px; background: rgba(255,255,255,.58); box-shadow: 0 24px 60px rgba(16,41,61,.08); }
  .mobile-nav__art { width: min(58vw, 520px); right: -4%; bottom: -8%; }
  /* Keep one-column tablet heroes visually rich without letting artwork become a full-width wall. */
  .hero-grid { gap: 10px; }
  .hero .hero-visual { width: min(72vw, 540px); min-height: 370px; margin-top: -16px; justify-self: end; }
  .page-hero--split { --inner-hero-visual-height: 360px; --inner-hero-art-inset: -3% -8%; --inner-hero-art-shift: 0px; padding-bottom: 58px; }
  .page-hero__grid { gap: 18px; }
  .page-hero__visual { width: min(72vw, 540px); justify-self: end; margin-top: -12px; }
  .page-hero--blog .page-hero__visual { width: min(80vw, 600px); }
  .page-hero--about .page-hero__art { width: min(470px, 96%); }
  .page-hero--about .page-hero__orbit { width: min(460px, 94%); }

  /* Keep supporting homepage artwork compact once the desktop grids begin to stack. */
  .section--who .two-col { grid-template-columns: minmax(270px, .82fr) minmax(0, 1.18fr); gap: 34px; align-items: center; }
  .section--who .who-visual { min-height: 340px; aspect-ratio: auto; border-radius: 30px; }
  .section--who .who-visual > img { width: 132%; max-width: none; height: 116%; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .section--who .who-experience { padding: 14px 17px; border-radius: 18px; }
  .section--who .who-experience strong { font-size: 3rem; }
  .section--who { padding-bottom: 76px; }
  .service-showcase { padding-top: 76px; }

  .marketing-system { width: min(65vw, 480px); }
  .marketing-system__centre { width: 155px; padding: 21px; }
  .marketing-system__centre strong { font-size: 1.8rem; }
  .marketing-system__planet--web { --orbit-radius: 182px; }
  .marketing-system__planet--seo { --orbit-radius: 150px; }
  .marketing-system__planet--social { --orbit-radius: 118px; }
  .marketing-system__planet--ads { --orbit-radius: 168px; }
  .marketing-system__planet--team { --orbit-radius: 92px; }
  .marketing-system__planet--engagement { --orbit-radius: 133px; }
  .marketing-system__planet--target { --orbit-radius: 195px; }
  .marketing-system__node { width: 82px; height: 82px; padding: 10px; }
  .marketing-system__node--icon { --clay-icon-size: 46px; padding: 13px; }

  .feedback-stage { grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); gap: 28px; }
  .feedback-visual { width: min(100%, 290px); }
  .feedback-visual__bubble { padding: 9px 12px; font-size: 9px; }
  .section--feedback .quote-card { padding: 36px 34px 34px 64px; }
  .section--feedback .quote-card p { font-size: .98rem; line-height: 1.55; }

  .impact-highlights__grid { grid-template-columns: minmax(270px, .86fr) minmax(0, 1.14fr); column-gap: 18px; row-gap: 20px; }
  .impact-highlights__intro { grid-column: 1 / -1; padding: 0 0 8px; }
  .impact-highlights__visual { height: 340px; }
  .impact-highlights__art { inset: 0; }
  .impact-highlights__orbit { width: 255px; height: 255px; }
  .impact-highlights__stats { min-height: 340px; }
  .impact-highlights__stats article { min-height: 170px; padding: 22px 16px; }
  .impact-highlights__stats h3 { margin-top: 12px; font-size: 1rem; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .container { width: min(100% - 28px, 1180px); }
  /* Image-overlay labels are decorative and create unnecessary mobile height. */
  .floating-note,
  .about-hero__note,
  .feedback-visual__bubble,
  .seo-intro__chip,
  .ads-intro__chip,
  .error-hero__note { display: none; }
  .brand img { width: 185px; }
  .menu-toggle { width: 52px; height: 52px; }
  .main-nav__surface { padding: 36px 22px 28px; }
  .mobile-nav__intro { margin-bottom: 10px; }
  .mobile-nav__intro strong { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .main-nav__links a { min-height: 43px; padding-block: 9px; }
  .mobile-nav__footer { padding-top: 11px; }
  .mobile-nav__footer p { font-size: .9rem; }
  .mobile-nav__art { width: 74vw; right: -27%; bottom: -3%; opacity: .19; }
  .hero { padding: 125px 0 60px; }
  .hero-grid { gap: 24px; }
  .hero h1 { font-size: clamp(3.15rem, 15vw, 4.6rem); }
  .hero-visual { min-height: 330px; }
  .hero-team-art { inset: 0 -2% -4%; }
  .marquee { margin-inline: 0; transform: none; }
  .who-visual { min-height: 0; aspect-ratio: 1; }
  .who-experience { bottom: 14px; padding: 13px 15px; border-radius: 17px; }
  .who-experience strong { font-size: 2.6rem; }
  .floating-note--one { left: 0; }
  .floating-note--two { right: 0; }
  .section { padding: 78px 0; }
  .contact-conversation { padding: 72px 0 54px; }
  .contact-conversation__heading { margin-bottom: 34px; }
  .contact-page .contact-panel { border-radius: 28px; }
  .contact-page .contact-panel__copy, .contact-page .callback-form { padding: 32px 26px; }
  .contact-page .callback-form .button { width: calc(100% - 52px); }
  .contact-page .contact-reassurance { margin-top: 18px; padding-bottom: 0; }
  .contact-page .contact-reassurance article { min-height: 112px; }
  .contact-route { padding: 78px 0 88px; }
  .contact-route .section-heading { margin-bottom: 36px; }
  .contact-route__grid .process-card { min-height: 280px; }
  .contact-route__icon { width: 200px; height: 200px; }
  .error-hero { padding: 130px 0 70px; }
  .error-hero__code { margin-top: 18px; }
  .error-hero h1 { font-size: clamp(3.05rem, 13vw, 4.5rem); }
  .error-hero__copy > p:not(.error-hero__code) { font-size: 1rem; }
  .error-hero__visual { min-height: 330px; }
  .error-hero__visual img { width: auto; max-width: min(105%, 410px); max-height: 410px; }
  .error-hero__orbit { width: 300px; height: 300px; }
  .error-hero__note { right: 2%; top: 7%; }
  .error-routes { padding: 78px 0 88px; }
  .error-routes__grid { grid-template-columns: 1fr; }
  .error-route-card { min-height: 245px; }
  .section--feedback { padding-top: 66px; padding-bottom: 88px; }
  .feedback-visual { width: min(100%, 320px); margin: 30px auto 0; }
  .section--feedback .quote-card { min-height: 0; padding: 30px 24px 26px 52px; }
  .section--feedback .quote-card::before { left: 18px; top: 16px; font-size: 4rem; }
  .section--feedback .quote-card p { margin-bottom: 20px; font-size: .9rem; line-height: 1.45; }
  .section--feedback .quote-card:nth-child(2) { margin-left: 0; }
  .testimonial-carousel__controls { justify-content: flex-start; }
  .section-title { margin-bottom: 38px; }
  .marketing-copy, .marketing-story .story-step { padding: 28px; }
  .marketing-system { width: 100%; min-height: 0; aspect-ratio: 1; }
  .marketing-overview { padding-block: 66px; }
  .marketing-overview__copy::before { inset: -22px -14px; border-radius: 28px; }
  .marketing-system::before { inset: 5%; }
  .marketing-system__centre { width: 120px; padding: 15px; }
  .marketing-system__centre strong { font-size: 1.65rem; }
  .marketing-overview__copy h2 { font-size: clamp(2.75rem, 13vw, 4rem); }
  .marketing-system__planet--web { --orbit-radius: 128px; }
  .marketing-system__planet--seo { --orbit-radius: 110px; }
  .marketing-system__planet--social { --orbit-radius: 100px; }
  .marketing-system__planet--ads { --orbit-radius: 120px; }
  .marketing-system__planet--team { --orbit-radius: 82px; }
  .marketing-system__planet--engagement { --orbit-radius: 92px; }
  .marketing-system__planet--target { --orbit-radius: 138px; }
  .marketing-system__node { width: 74px; height: 74px; padding: 8px; }
  .marketing-system__node--icon { --clay-icon-size: 40px; padding: 12px; }
  .marketing-system__node strong { font-size: 10px; }
  .service-showcase-grid { grid-template-columns: 1fr; }
  .service-showcase-card, .service-showcase-card.is-active { height: 300px; }
  .website-options__intro { margin-bottom: 38px; }
  .website-options__grid { grid-template-columns: 1fr; }
  .website-plan--bespoke { grid-column: auto; }
  .website-plan { padding: 16px; border-radius: 24px; }
  .website-plan__header { height: 195px; min-height: 195px; padding: 20px 22px; }
  .website-plan__number { right: 20px; top: 20px; }
  .website-plan__best-for { min-height: 0; margin-top: 14px; }
  .website-plan__summary { min-height: 0; margin-block: 12px; }
  .website-plan__features { margin-bottom: 16px; }
  .impact-highlights { padding: 68px 0; }
  .impact-highlights__visual { height: 255px; }
  .impact-highlights__orbit { width: 220px; height: 220px; }
  .impact-highlights__art { inset: 2% -4% -2%; }
  .impact-highlights__stats { min-height: 0; }
  .impact-highlights__stats article { min-height: 118px; padding: 16px 12px; }
  .impact-highlights__stats strong { font-size: clamp(1.7rem, 9vw, 2.5rem); }
  .impact-highlights__stats h3 { margin-top: 10px; font-size: .9rem; }
  .blog-grid, .callback-form { grid-template-columns: 1fr; }
  .proof-card, .contact-panel__copy, .callback-form, .quote-card { padding: 32px; }
  .field--full { grid-column: auto; }
  .page-hero { padding: 170px 0 75px; }
  .page-hero h1 { font-size: 3.1rem; }
  .about-hero__visual { min-height: 330px; }
  .about-hero__logo { width: 76%; padding: 24px; }
  .about-hero__logo img { width: 170px; }
  .about-hero__note--one { left: 2%; }
  .about-hero__note--two { right: 0; }
  .about-highlights { padding: 82px 0; }
  .about-cta { padding: 34px; border-radius: 28px; }
  .footer-grid { grid-template-columns: 1fr; }
  .social-network { width: 100%; min-height: 0; border-radius: 28px; }
  .social-network::before { width: 330px; height: 330px; }
  .social-network__centre { width: 100px; height: 100px; }
  .social-network__centre img { width: 38px; }
  .social-network__centre strong { font-size: .82rem; }
  .social-network__node { width: 58px; height: 58px; padding: 5px; }
  .social-network__node img { width: 31px; height: 31px; }
  .social-network__node b { font-size: .43rem; }
  .social-network__node--words b { font-size: .46rem; }
  .social-network__planet--facebook { --orbit-radius: 136px; }
  .social-network__planet--instagram { --orbit-radius: 118px; }
  .social-network__planet--linkedin { --orbit-radius: 139px; }
  .social-network__planet--meta { --orbit-radius: 88px; }
  .social-network__planet--targeting { --orbit-radius: 108px; }
  .social-network__planet--reporting { --orbit-radius: 72px; }
  .social-network__planet--engagement { --orbit-radius: 98px; }
  .social-network__planet--creative { --orbit-radius: 126px; }
  .social-support__grid .feature-card { min-height: 260px; }
  .social-support__watermark { width: 205px; height: 205px; }
  .social-projects__grid { display: block; }
  .social-project--featured { height: 288px; margin-bottom: 20px; }
  .social-projects__rail { margin-inline: calc(50% - 50vw); padding: 2px max(22px, calc((100vw - 100%) / 2)) 24px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(22px, calc((100vw - 100%) / 2)); scrollbar-width: none; overscroll-behavior-inline: contain; }
  .social-projects__rail::-webkit-scrollbar { display: none; }
  .social-projects__rail .social-project { height: 172px; flex: 0 0 min(82vw, 310px); scroll-snap-align: start; }
  .social-projects__swipe-hint { margin: -2px 0 0; display: flex; align-items: center; gap: 8px; color: var(--teal); font: 800 .75rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
  .social-projects__swipe-hint span { font-size: 1.2rem; }
  .service-journey-cta { padding: 24px; flex-direction: column; gap: 20px; }
  .page-hero--split { --inner-hero-visual-height: 330px; --inner-hero-art-inset: -3% -11%; --inner-hero-art-shift: -25px; padding: 170px 0 60px; }
  .page-hero--blog { --inner-hero-art-inset: 0 -8%; }
  .about-intro { padding: 72px 0 86px; }
  .about-intro__grid { gap: 42px; }
  .about-intro .who-visual { min-height: 420px; transform: none; }
  .about-values, .about-process, .about-marketing-map, .about-importance { padding-block: 82px; }
  .about-values .section-heading { margin-bottom: 38px; }
  .about-values__grid { grid-template-columns: 1fr; }
  .about-values__grid .feature-card, .about-values__grid .feature-card:first-child { min-height: 310px; padding: 30px; }
  .about-process .section-heading { margin-bottom: 42px; }
  .about-page .about-process__grid .process-card { min-height: 300px; }
  .about-page .about-process__grid { grid-template-columns: 1fr; gap: 0; }
  .about-process__arrow { margin: -13px auto; display: block; transform: rotate(90deg); }
  .about-marketing-map__copy > .feature-copy { padding: 28px; }
  .about-page .about-marketing-map__steps { grid-template-columns: 1fr; }
  .about-page .about-marketing-map__steps .process-card { min-height: 260px; }
  .about-importance .visual-panel { min-height: 410px; transform: none; }
  .about-facts { padding-block: 82px; }
  .about-facts__layout { grid-template-columns: 1fr; gap: 42px; }
  .about-facts__visual { min-height: 420px; }
  .about-facts__intro { margin-bottom: 34px; }
  .about-facts__ribbon { grid-template-columns: 1fr 1fr; border-radius: 24px; }
  .about-facts__ribbon article { min-height: 135px; padding: 22px 14px; }
  .about-reviews { padding-top: 76px; padding-bottom: 90px; }
  .about-closing { padding: 72px 0 88px; }
  .feature-grid, .feature-grid--four, .process-grid, .choice-grid { grid-template-columns: 1fr; }
  .choice-card--bespoke { grid-column: auto; }
  .feature-card { min-height: 260px; }
  .visual-panel { min-height: 410px; padding: 32px; border-radius: 30px; }
  .fact-band__items article { min-height: 150px; padding: 22px 16px; }
  .fact-band__items strong { font-size: clamp(1.65rem, 9vw, 2.5rem); }
  .page-cta { padding: 34px; border-radius: 28px; }
  .blog-card { min-height: 330px; }
}

/* Inner-page responsive framework
   Keeps content, artwork and vertical rhythm consistent without changing the homepage. */
@media (min-width: 1001px) and (max-width: 1180px) {
  .inner-page .page-hero--split {
    --inner-hero-height: 760px;
    --inner-hero-grid-height: 470px;
    --inner-hero-visual-height: 450px;
    padding: 190px 0 70px;
  }
  .inner-page .page-hero__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr);
    gap: 30px;
  }
  .inner-page .page-hero__copy h1 { font-size: clamp(3.15rem, 5.7vw, 4.65rem); }
  .inner-page main > .section { padding-block: 90px; }
  .inner-page .inner-story .visual-panel,
  .inner-page .package-story-panel,
  .inner-page .websites-fit__visual,
  .inner-page .about-facts__visual { min-height: 440px; }
  .inner-page .feature-split,
  .inner-page .package-inclusions__grid,
  .inner-page .websites-fit__layout { gap: 42px; }
  .article-hero { min-height: 700px; padding: 185px 0 72px; }
  .article-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: 42px;
  }
  .error-hero { min-height: 710px; padding: 175px 0 80px; }
  .error-hero__grid {
    min-height: 455px;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
    gap: 34px;
  }
  .error-hero__visual { min-height: 455px; }
  .error-hero__visual img { width: min(126%, 680px); max-height: 590px; }
  .error-hero__orbit { width: 410px; height: 410px; }
}

@media (min-width: 681px) and (max-width: 1000px) {
  .inner-page .page-hero--split {
    --inner-hero-visual-height: 320px;
    --inner-hero-art-inset: -3% -7%;
    --inner-hero-art-shift: 0px;
    padding: 160px 0 48px;
  }
  .inner-page .page-hero__grid { gap: 10px; }
  .inner-page .page-hero__visual {
    width: min(68vw, 510px);
    margin-top: -4px;
  }
  .inner-page .page-hero--blog .page-hero__visual {
    width: min(75vw, 570px);
    height: 380px;
    min-height: 380px;
  }
  .inner-page main > .section { padding-block: 72px; }
  .inner-page .inner-story .visual-panel,
  .inner-page .package-story-panel { min-height: 360px; }
  .inner-page .websites-fit__visual,
  .inner-page .about-facts__visual { min-height: 380px; }
  .inner-page .about-intro .who-visual { min-height: 390px; }
  .inner-page .about-importance .visual-panel { min-height: 350px; }
  .inner-page .inner-cards .feature-card,
  .inner-page .inner-process .process-card { min-height: 250px; }
  .inner-page .package-story-panel__copy { padding: 34px; }
  .inner-page .social-network { width: min(66vw, 500px); }
  .inner-page .seo-intro__visual,
  .inner-page .ads-intro__visual { width: min(62vw, 470px); }
  .inner-page #google-ads .feature-copy { order: 1; }
  .inner-page #google-ads .ads-intro__visual { order: 2; }
  .article-hero { padding: 160px 0 58px; }
  .article-hero__grid { gap: 28px; }
  .article-hero__visual { width: min(78vw, 620px); justify-self: end; }
  .error-hero { padding: 145px 0 58px; }
  .error-hero__grid { gap: 18px; }
  .error-hero__visual { height: 340px; min-height: 340px; overflow: hidden; }
  .error-hero__visual img { width: auto; max-width: min(112%, 520px); max-height: 430px; }
  .error-hero__orbit { width: 320px; height: 320px; }
}

@media (max-width: 680px) {
  .inner-page .page-hero--split {
    --inner-hero-visual-height: 295px;
    --inner-hero-art-inset: -2% -8%;
    --inner-hero-art-shift: -18px;
    padding: 148px 0 48px;
  }
  .inner-page .page-hero__grid { gap: 18px; }
  .inner-page .page-hero__visual { width: 100%; }
  .inner-page .page-hero--blog .page-hero__visual {
    height: 315px;
    min-height: 315px;
  }
  .inner-page main > .section { padding-block: 62px; }
  .inner-page .inner-story .visual-panel,
  .inner-page .package-story-panel,
  .inner-page .websites-fit__visual,
  .inner-page .about-facts__visual { min-height: 325px; }
  .inner-page .about-intro .who-visual { min-height: 340px; }
  .inner-page .about-importance .visual-panel { min-height: 325px; }
  .inner-page .inner-cards .feature-card,
  .inner-page .inner-process .process-card { min-height: 240px; }
  .inner-page .package-story-panel__copy { max-width: 86%; padding: 26px; }
  .inner-page .package-story-panel__copy h3 { font-size: 2.05rem; }
  .inner-page .social-network,
  .inner-page .seo-intro__visual,
  .inner-page .ads-intro__visual { width: min(100%, 360px); justify-self: center; }
  .inner-page #google-ads .feature-copy { order: 1; }
  .inner-page #google-ads .ads-intro__visual { order: 2; }
  .article-hero { padding: 148px 0 52px; }
  .article-hero__grid { gap: 26px; }
  .article-hero__visual { width: 100%; }
  .error-hero { padding: 125px 0 52px; }
  .error-hero__grid { gap: 16px; }
  .error-hero__visual { height: 300px; min-height: 300px; overflow: hidden; }
  .error-hero__visual img { max-width: min(112%, 390px); max-height: 350px; }
  .error-hero__orbit { width: 270px; height: 270px; }
}