.marketing-service-page {
  --marketing-accent: #466a61;
  --marketing-deep: #143f3d;
  --marketing-lavender: #c9c6d8;
  --marketing-cream: #f3eee7;
  background: var(--marketing-cream);
}

.marketing-service-page em { color: var(--marketing-accent); }

/* Hero */
.marketing-hero {
  position: relative;
  min-height: min(960px, 100svh);
  overflow: hidden;
  padding: calc(var(--header-height) + var(--hero-space-top)) 0 var(--hero-space-bottom);
  background:
    radial-gradient(circle at 4% 34%, rgba(116, 145, 135, 0.2), transparent 28rem),
    radial-gradient(circle at 91% 8%, rgba(162, 156, 188, 0.2), transparent 31rem),
    linear-gradient(142deg, #f4f0ea 0%, #ebe8e4 57%, #dfe7e3 100%);
  isolation: isolate;
}

.marketing-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: linear-gradient(rgba(30, 31, 32, 0.034) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 31, 32, 0.034) 1px, transparent 1px);
  background-size: 5rem 5rem;
  content: "";
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 84%, transparent);
}

.marketing-hero-thread { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.marketing-hero-thread span { position: absolute; top: -27rem; right: -18rem; width: 54rem; aspect-ratio: 1; border: 1px solid rgba(70, 106, 97, 0.12); border-radius: 50%; box-shadow: 0 0 0 6rem rgba(70, 106, 97, 0.025), 0 0 0 12rem rgba(91, 82, 112, 0.018); }
.marketing-hero-thread span:nth-child(2) { top: auto; right: auto; bottom: -35rem; left: -28rem; width: 62rem; border-color: rgba(91, 82, 112, 0.1); }
.marketing-hero-thread i { position: absolute; top: 42%; left: 42%; width: 22rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(70, 106, 97, 0.3), transparent); transform: rotate(-22deg); }

.marketing-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-bottom: clamp(2.25rem, 3vw, 3rem); color: #62656a; font-size: var(--text-label); }
.marketing-breadcrumbs a { border-bottom: 1px solid transparent; }
.marketing-breadcrumbs a:hover { border-color: currentColor; color: var(--deep); }
.marketing-breadcrumbs span[aria-hidden] { color: rgba(30, 31, 32, 0.32); }
.marketing-hero-grid { display: grid; align-items: center; grid-template-columns: minmax(0, 0.88fr) minmax(30rem, 0.72fr); gap: clamp(3rem, 7vw, 8rem); }
.marketing-hero-copy h1 { max-width: 16ch; margin: 0; }
.marketing-hero-intro { max-width: 700px; margin: 1.55rem 0 0; color: #4c5153; font-size: clamp(1.02rem, 1.32vw, 1.2rem); line-height: 1.72; }
.marketing-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.1rem; }
.marketing-hero-channels { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.marketing-hero-channels li { padding: 0.52rem 0.82rem; border: 1px solid rgba(30, 31, 32, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.38); color: #555b5d; font-size: var(--text-label); font-weight: 520; }

.marketing-hero-map { position: relative; min-height: clamp(570px, 43vw, 690px); overflow: hidden; border: 1px solid rgba(30, 31, 32, 0.14); border-radius: clamp(1.8rem, 3.2vw, 3rem); background: rgba(250, 248, 245, 0.76); box-shadow: 0 2.8rem 7rem rgba(38, 48, 46, 0.14); backdrop-filter: blur(15px); }
.marketing-map-head { position: absolute; z-index: 5; top: 1.5rem; right: 1.7rem; left: 1.7rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #5e6464; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.05em; text-transform: uppercase; }
.marketing-map-head i { display: inline-flex; align-items: center; gap: 0.4rem; font-style: normal; }
.marketing-map-head i::before { width: 0.55rem; aspect-ratio: 1; border-radius: 50%; background: var(--marketing-accent); box-shadow: 0 0 0 0.28rem rgba(70, 106, 97, 0.12); content: ""; }
.marketing-map-route { position: absolute; inset: 11% 8% 8%; }
.marketing-map-route::before { position: absolute; top: 14%; right: 8%; bottom: 14%; left: 8%; border: 2px solid rgba(70, 106, 97, 0.22); border-left-color: transparent; border-radius: 48% 52% 46% 54%; content: ""; transform: rotate(13deg); }
.marketing-map-route i { position: absolute; width: 0.72rem; aspect-ratio: 1; border: 3px solid #f7f4f0; border-radius: 50%; background: var(--marketing-accent); box-shadow: 0 0 0 1px rgba(70, 106, 97, 0.3); }
.marketing-map-route i:first-child { top: 9%; left: 15%; }
.marketing-map-route i:nth-child(2) { top: 31%; right: 6%; }
.marketing-map-route i:nth-child(3) { right: 24%; bottom: 4%; }
.marketing-map-route i:last-child { bottom: 13%; left: 8%; }
.marketing-map-moment { position: absolute; z-index: 3; display: flex; min-height: 10rem; padding: 1.25rem 1.35rem; border: 1px solid rgba(30, 31, 32, 0.12); border-radius: 1.35rem; box-shadow: 0 1.5rem 3.2rem rgba(35, 45, 43, 0.15); flex-direction: column; animation: marketing-map-float 7s ease-in-out infinite; }
.marketing-map-moment > span, .marketing-map-moment > small { color: #626866; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.045em; text-transform: uppercase; }
.marketing-map-moment > strong { max-width: 11ch; margin-top: 1.1rem; font-size: clamp(1.35rem, 2.1vw, 2.2rem); font-weight: 560; letter-spacing: -0.04em; line-height: 1.04; }
.marketing-map-moment > small { margin-top: auto; padding-top: 1rem; }
.marketing-map-moment.is-ad { top: 12%; left: 6%; width: 45%; background: #6a6478; color: #fff; transform: rotate(-3deg); }
.marketing-map-moment.is-ad > span, .marketing-map-moment.is-ad > small, .marketing-map-moment.is-contact > span, .marketing-map-moment.is-contact > small { color: rgba(255, 255, 255, 0.68); }
.marketing-map-moment.is-landing { top: 39%; right: 5%; width: 51%; min-height: 12rem; background: #b7cbc3; color: #242b29; transform: rotate(2deg); animation-delay: -2.3s; }
.marketing-map-moment.is-contact { bottom: 7%; left: 10%; width: 49%; background: var(--marketing-deep); color: #f7f4ef; transform: rotate(-1deg); animation-delay: -4.6s; }
.marketing-map-signal { position: absolute; z-index: 6; top: 31%; right: 13%; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; border: 1px solid rgba(23, 73, 71, 0.15); border-radius: 999px; background: rgba(248, 246, 243, 0.92); color: var(--marketing-deep); box-shadow: 0 0.8rem 2rem rgba(30, 31, 32, 0.1); font-size: var(--text-label); }
.marketing-map-signal span { width: 0.6rem; aspect-ratio: 1; border-radius: 50%; background: var(--marketing-accent); animation: marketing-signal-pulse 2.4s ease-out infinite; }

/* Recognition and proof */
.marketing-recognition { padding: var(--section-space) 0; background: #f5f1eb; }
.marketing-recognition-layout { display: grid; align-items: start; grid-template-columns: minmax(330px, 0.76fr) minmax(0, 1.24fr); gap: clamp(3.5rem, 7vw, 7rem); }
.marketing-recognition-copy h2 { max-width: 18ch; margin: 0; }
.marketing-recognition-copy p { max-width: 560px; margin: 1.5rem 0 0; color: #5b6260; font-size: var(--text-support); line-height: 1.75; }
.marketing-recognition-list { margin: 0; padding: 0; border-top: 1px solid rgba(30, 31, 32, 0.16); list-style: none; }
.marketing-recognition-list li { display: grid; min-height: 5.5rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid rgba(30, 31, 32, 0.16); color: #373d3b; font-size: clamp(1rem, 1.35vw, 1.24rem); line-height: 1.45; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; }
.marketing-recognition-list li span { position: relative; width: 1.55rem; height: 1.55rem; border: 1px solid rgba(70, 106, 97, 0.34); border-radius: 50%; }
.marketing-recognition-list li span::after { position: absolute; top: 50%; left: 50%; width: 0.42rem; aspect-ratio: 1; border-radius: 50%; background: var(--marketing-accent); content: ""; transform: translate(-50%, -50%); }

.marketing-testimonial { position: relative; padding: var(--section-space-compact) 0; overflow: hidden; background: #dfe8e4; }
.marketing-testimonial-mark { position: absolute; top: -5rem; right: 4%; color: rgba(70, 106, 97, 0.065); font-size: clamp(16rem, 31vw, 34rem); font-weight: 600; letter-spacing: -0.12em; line-height: 1; pointer-events: none; }
.marketing-testimonial-layout { position: relative; display: grid; align-items: start; grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1.38fr); gap: clamp(3rem, 5.5vw, 5.5rem); }
.marketing-testimonial-intro h2 { max-width: 17ch; margin: 0; }
.marketing-testimonial-intro > p { max-width: 460px; margin: 1.2rem 0 0; color: #4f5d59; font-size: var(--text-action); line-height: 1.68; }
.marketing-testimonial-scene { position: relative; display: grid; grid-template-columns: minmax(250px, 0.72fr) minmax(340px, 1.1fr); gap: clamp(1.4rem, 2.5vw, 2.5rem); }
.marketing-testimonial-orbit { position: relative; min-height: 25rem; overflow: hidden; border: 1px solid rgba(20, 63, 61, 0.13); border-radius: 2rem; background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.78), transparent 31%), linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(70, 106, 97, 0.08)); }
.marketing-testimonial-orbit::before, .marketing-testimonial-orbit::after { position: absolute; top: 50%; left: 50%; width: 17rem; aspect-ratio: 1; border: 1px solid rgba(20, 63, 61, 0.12); border-radius: 50%; content: ""; transform: translate(-50%, -50%); }
.marketing-testimonial-orbit::after { width: 10.5rem; border-style: dashed; animation: marketing-review-orbit 22s linear infinite; }
.marketing-testimonial-core { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 7rem; aspect-ratio: 1; place-content: center; border-radius: 50%; background: var(--marketing-deep); color: #fff; box-shadow: 0 1.2rem 2.7rem rgba(20, 63, 61, 0.2); text-align: center; transform: translate(-50%, -50%); }
.marketing-testimonial-core span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; }
.marketing-testimonial-core strong { margin-top: 0.1rem; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em; }
.marketing-testimonial-effect { position: absolute; z-index: 3; max-width: 10rem; padding: 0.62rem 0.78rem; border: 1px solid rgba(20, 63, 61, 0.15); border-radius: 999px; background: rgba(250, 252, 250, 0.9); color: #3f5550; box-shadow: 0 0.7rem 1.5rem rgba(20, 63, 61, 0.08); font-size: var(--text-label); font-weight: 560; line-height: 1.3; }
.marketing-testimonial-effect::before { display: inline-block; width: 0.46rem; margin-right: 0.45rem; aspect-ratio: 1; border-radius: 50%; background: #6a6478; content: ""; }
.marketing-testimonial-effect.is-focus { top: 12%; left: 7%; }
.marketing-testimonial-effect.is-followup { top: 34%; right: 3%; }
.marketing-testimonial-effect.is-ideas { bottom: 10%; left: 8%; }
.marketing-testimonial blockquote { position: relative; align-self: center; margin: 0; padding: clamp(1.5rem, 2.8vw, 2.5rem); border: 1px solid rgba(20, 63, 61, 0.13); border-radius: 1.6rem; background: rgba(248, 251, 249, 0.76); box-shadow: 0 1.5rem 3rem rgba(20, 63, 61, 0.09); }
.marketing-testimonial blockquote::before { display: block; margin-bottom: 0.6rem; color: var(--marketing-accent); content: "“"; font-size: 3.4rem; font-weight: 500; line-height: 0.7; }
.marketing-testimonial blockquote > p { margin: 0; color: #34413d; font-size: clamp(1.02rem, 1.25vw, 1.17rem); letter-spacing: -0.012em; line-height: 1.62; }
.marketing-testimonial blockquote footer { display: grid; margin-top: 1.35rem; padding-top: 1rem; border-top: 1px solid rgba(30, 31, 32, 0.13); grid-template-columns: 1fr auto; gap: 0.3rem 1rem; }
.marketing-testimonial blockquote footer strong { font-size: var(--text-action); font-weight: 650; }
.marketing-testimonial blockquote footer span { align-self: center; color: #65716e; font-size: var(--text-label); }
.marketing-testimonial blockquote details { margin-top: 1rem; }
.marketing-testimonial blockquote summary { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.35rem 0; border-bottom: 1px solid rgba(20, 63, 61, 0.28); color: var(--marketing-deep); cursor: pointer; font-size: var(--text-action); font-weight: 560; list-style: none; }
.marketing-testimonial blockquote summary::-webkit-details-marker { display: none; }
.marketing-testimonial blockquote summary i { position: relative; width: 0.85rem; height: 0.85rem; }
.marketing-testimonial blockquote summary i::before, .marketing-testimonial blockquote summary i::after { position: absolute; top: 50%; left: 50%; width: 0.72rem; height: 1px; background: currentColor; content: ""; transform: translate(-50%, -50%); }
.marketing-testimonial blockquote summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 180ms ease; }
.marketing-testimonial blockquote details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.marketing-testimonial blockquote details > div { padding-top: 1rem; }
.marketing-testimonial blockquote details p { margin: 0 0 0.8rem; color: #4d5a56; font-size: var(--text-action); line-height: 1.65; }
.marketing-testimonial blockquote details p:last-child { margin-bottom: 0; }

/* Interactive diagnosis */
.marketing-diagnosis { position: relative; padding: var(--section-space) 0; overflow: hidden; background: var(--marketing-deep); color: #fff; isolation: isolate; }
.marketing-diagnosis::before { position: absolute; z-index: -1; top: -28rem; right: -20rem; width: 56rem; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 50%; box-shadow: 0 0 0 7rem rgba(255, 255, 255, 0.012), 0 0 0 14rem rgba(255, 255, 255, 0.009); content: ""; }
.marketing-diagnosis-heading { display: grid; align-items: end; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.55fr); gap: clamp(2.5rem, 7vw, 7rem); }
.marketing-diagnosis-heading h2 { max-width: 17ch; margin: 0; color: #fff; }
.marketing-diagnosis-heading h2 em { color: #c8d8d2; }
.marketing-diagnosis-heading > div > p { max-width: 690px; margin: 1.5rem 0 0; color: rgba(255, 255, 255, 0.7); font-size: var(--text-support); line-height: 1.72; }
.marketing-diagnosis-note { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.5rem; color: rgba(255, 255, 255, 0.72); font-size: var(--text-action); }
.marketing-diagnosis-note span { display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; color: #d9e6e1; }

.marketing-diagnosis-path { position: relative; display: grid; margin: clamp(3.5rem, 6vw, 5.5rem) 0 0; padding: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; }
.marketing-diagnosis-path::before { position: absolute; top: 0.47rem; right: 0; left: 0; height: 1px; background: rgba(255, 255, 255, 0.19); content: ""; }
.marketing-diagnosis-path li { position: relative; display: flex; padding-right: 1rem; color: rgba(255, 255, 255, 0.45); flex-direction: column; transition: color 220ms ease; }
.marketing-diagnosis-path li > span { position: relative; z-index: 1; width: 0.95rem; aspect-ratio: 1; border: 3px solid var(--marketing-deep); border-radius: 50%; background: #76918a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26); transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease; }
.marketing-diagnosis-path li > strong { margin-top: 1.1rem; font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 560; }
.marketing-diagnosis-path li > small { max-width: 15ch; margin-top: 0.24rem; font-size: var(--text-label); line-height: 1.45; }
.marketing-diagnosis-path li.is-selected { color: rgba(255, 255, 255, 0.78); }
.marketing-diagnosis-path li.is-selected > span { background: #c9c6d8; }
.marketing-diagnosis-path li.is-primary { color: #fff; }
.marketing-diagnosis-path li.is-primary > span { background: #fff; box-shadow: 0 0 0 0.45rem rgba(201, 198, 216, 0.16); transform: scale(1.12); }

.marketing-diagnosis-workspace { display: grid; margin-top: clamp(3rem, 5vw, 4.5rem); border-top: 1px solid rgba(255, 255, 255, 0.16); border-bottom: 1px solid rgba(255, 255, 255, 0.16); grid-template-columns: minmax(0, 1fr) minmax(380px, 0.82fr); }
.marketing-diagnosis-form { padding: clamp(2.2rem, 4vw, 4rem) clamp(2rem, 5vw, 5.5rem) clamp(2.2rem, 4vw, 4rem) 0; }
.marketing-diagnosis-form fieldset { margin: 0; padding: 0; border: 0; }
.marketing-diagnosis-form legend { margin-bottom: 1.6rem; color: #fff; font-size: clamp(1.25rem, 1.7vw, 1.6rem); font-weight: 560; }
.marketing-diagnosis-form label { position: relative; display: grid; min-height: 4.35rem; align-items: center; padding: 0.85rem 3.3rem 0.85rem 0; border-top: 1px solid rgba(255, 255, 255, 0.13); color: rgba(255, 255, 255, 0.72); cursor: pointer; font-size: var(--text-action); line-height: 1.45; transition: color 180ms ease, padding-left 180ms ease; }
.marketing-diagnosis-form label:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
.marketing-diagnosis-form label::after { position: absolute; top: 50%; right: 0.45rem; display: grid; width: 1.75rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0.45rem; content: ""; transform: translateY(-50%); transition: background 180ms ease, border-color 180ms ease; }
.marketing-diagnosis-form input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.marketing-diagnosis-form label:hover { color: #fff; padding-left: 0.35rem; }
.marketing-diagnosis-form label:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 4px; }
.marketing-diagnosis-form label:has(input:checked) { color: #fff; }
.marketing-diagnosis-form label:has(input:checked)::after { border-color: #c9c6d8; background: #c9c6d8; color: #143f3d; content: "✓"; font-size: 0.85rem; font-weight: 700; }
.marketing-diagnosis-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 2rem; }
.marketing-diagnosis-reset { display: inline-flex; min-height: 2.75rem; align-items: center; padding: 0.5rem 0; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.48); appearance: none; background: transparent; color: rgba(255, 255, 255, 0.82); -webkit-text-fill-color: currentColor; cursor: pointer; font-size: var(--text-action); font-weight: 520; line-height: 1.35; }
.marketing-diagnosis-reset:hover, .marketing-diagnosis-reset:focus-visible { border-color: #fff; background: transparent; color: #fff; -webkit-text-fill-color: #fff; }
.marketing-diagnosis-error { margin: 1rem 0 0; color: #eadde4; font-size: var(--text-action); }

.marketing-diagnosis-result { display: flex; min-height: 100%; align-items: center; padding: clamp(2.2rem, 4vw, 4rem) 0 clamp(2.2rem, 4vw, 4rem) clamp(2rem, 5vw, 5.5rem); border-left: 1px solid rgba(255, 255, 255, 0.16); }
.marketing-diagnosis-result h3 { max-width: 17ch; margin: 0; color: #fff; font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 430; letter-spacing: -0.045em; line-height: 1.08; }
.marketing-diagnosis-result p { max-width: 610px; margin: 1.2rem 0 0; color: rgba(255, 255, 255, 0.68); font-size: var(--text-support); line-height: 1.72; }
.marketing-diagnosis-empty > span { display: block; margin-bottom: 1.4rem; color: #c9c6d8; font-size: 2rem; }
.marketing-diagnosis-eyebrow { margin: 0 0 1rem !important; color: #c9c6d8 !important; font-family: var(--font-mono); font-size: var(--text-label) !important; letter-spacing: 0.06em; text-transform: uppercase; }
.marketing-diagnosis-result dl { display: grid; margin: 2rem 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.marketing-diagnosis-result dl div { display: grid; padding: 1.15rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); grid-template-columns: 9rem minmax(0, 1fr); gap: 1.2rem; }
.marketing-diagnosis-result dt { color: #c9c6d8; font-size: var(--text-action); font-weight: 560; }
.marketing-diagnosis-result dd { margin: 0; color: rgba(255, 255, 255, 0.76); font-size: var(--text-action); line-height: 1.55; }

/* What Webblix can do */
.marketing-help { padding: var(--section-space) 0 0; background: #f7f4ef; }
.marketing-help-heading { display: grid; align-items: end; padding-bottom: clamp(3.5rem, 6vw, 5.5rem); grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.58fr); gap: clamp(2.5rem, 7vw, 7rem); }
.marketing-help-heading h2 { max-width: 19ch; margin: 0; }
.marketing-help-heading > p { max-width: 560px; margin: 0 0 0.4rem; color: #5b6260; font-size: var(--text-support); line-height: 1.72; }
.marketing-help-list { border-top: 1px solid rgba(30, 31, 32, 0.15); }
.marketing-help-list article { border-bottom: 1px solid rgba(30, 31, 32, 0.15); transition: background 180ms ease; }
.marketing-help-list article:hover { background: #edf1ee; }
.marketing-help-row { display: grid; min-height: 13.5rem; align-items: center; padding-block: clamp(2rem, 3.5vw, 3.5rem); grid-template-columns: minmax(8rem, 0.34fr) minmax(330px, 1.1fr) minmax(250px, 0.62fr); gap: clamp(2rem, 5vw, 5rem); }
.marketing-help-row > strong { align-self: start; color: var(--marketing-accent); font-family: var(--font-mono); font-size: var(--text-label); font-weight: 560; letter-spacing: 0.06em; text-transform: uppercase; }
.marketing-help-row h3 { max-width: 24ch; margin: 0; }
.marketing-help-row p { max-width: 700px; margin: 0.9rem 0 0; color: #59615f; font-size: var(--text-support); line-height: 1.7; }
.marketing-help-row ul { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.marketing-help-row li { padding: 0.5rem 0.75rem; border: 1px solid rgba(70, 106, 97, 0.2); border-radius: 999px; color: #475652; font-size: var(--text-label); }

.marketing-channel-strip { padding: var(--section-space-compact) 0; background: var(--marketing-lavender); }
.marketing-channel-strip-layout { display: grid; align-items: center; grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr); gap: clamp(3rem, 8vw, 8rem); }
.marketing-channel-strip h2 { max-width: 17ch; margin: 0; }
.marketing-channel-strip h2 em { color: #4f4a60; }
.marketing-channel-strip p { max-width: 650px; margin: 1.4rem 0 0; color: rgba(30, 31, 32, 0.7); font-size: var(--text-support); line-height: 1.72; }
.marketing-channel-strip ul { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.marketing-channel-strip li { padding: 0.75rem 1rem; border: 1px solid rgba(30, 31, 32, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.22); color: #35343a; font-size: var(--text-action); font-weight: 540; }

/* SEO as the long-lived layer beside campaign work */
.marketing-seo-bridge { position: relative; overflow: hidden; padding: var(--section-space-feature) 0; background: #dfe9e5; isolation: isolate; }
.marketing-seo-bridge::before { position: absolute; z-index: -1; right: -0.08em; bottom: -0.22em; color: rgba(20, 63, 61, 0.035); content: "SÖK"; font-size: clamp(13rem, 29vw, 31rem); font-weight: 600; letter-spacing: -0.1em; line-height: 0.8; pointer-events: none; }
.marketing-seo-layout { display: grid; align-items: center; grid-template-columns: minmax(0, 0.78fr) minmax(32rem, 1fr); gap: clamp(3rem, 8vw, 9rem); }
.marketing-seo-copy h2 { max-width: 16ch; margin: 0; }
.marketing-seo-copy h2 em { color: var(--marketing-accent); }
.marketing-seo-copy p { max-width: 44rem; margin: 1.35rem 0 0; color: #53605c; font-size: var(--text-support); line-height: 1.72; }
.marketing-seo-copy .button { margin-top: 1.8rem; border-color: var(--marketing-deep); background: var(--marketing-deep); color: #fff; }
.marketing-seo-copy .button:hover { border-color: var(--coal); background: var(--coal); }
.marketing-seo-continuity { padding: clamp(1.4rem, 3vw, 2.5rem); border: 1px solid rgba(20, 63, 61, 0.15); border-radius: clamp(1.35rem, 2vw, 2rem); background: rgba(255, 255, 255, 0.68); box-shadow: 0 1.7rem 4rem rgba(20, 63, 61, 0.09); }
.marketing-seo-continuity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.marketing-seo-continuity-head > strong { max-width: 15rem; color: var(--marketing-deep); font-size: var(--type-card-title-small); font-weight: 430; line-height: 1.2; }
.marketing-seo-continuity-head > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.8rem; }
.marketing-seo-continuity-head span { display: inline-flex; align-items: center; gap: 0.45rem; color: #59635f; font-size: var(--text-label); font-weight: 500; }
.marketing-seo-continuity-head span::before { width: 0.65rem; aspect-ratio: 1; border-radius: 50%; background: var(--signal-color); content: ""; }
.marketing-seo-continuity-head .is-paid { --signal-color: #8b83ad; }
.marketing-seo-continuity-head .is-organic { --signal-color: #2f7369; }
.marketing-seo-chart { display: grid; height: clamp(14rem, 24vw, 20rem); align-items: end; margin-top: 2.2rem; padding: 1.2rem 0 0; border-bottom: 1px solid rgba(20, 63, 61, 0.2); background: repeating-linear-gradient(180deg, rgba(20, 63, 61, 0.075) 0 1px, transparent 1px 25%); grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(0.25rem, 0.7vw, 0.65rem); }
.marketing-seo-chart > span { display: flex; height: 100%; align-items: flex-end; justify-content: center; gap: 0.16rem; }
.marketing-seo-chart i,.marketing-seo-chart b { display: block; width: min(42%, 1.15rem); border-radius: 0.35rem 0.35rem 0 0; }
.marketing-seo-chart i { height: var(--paid-height); background: linear-gradient(180deg, #a29abd, #7f769f); }
.marketing-seo-chart b { height: var(--organic-height); background: linear-gradient(180deg, #4b8b80, #28675e); }
.marketing-seo-chart > span:nth-child(1) { --paid-height: 28%; --organic-height: 9%; }
.marketing-seo-chart > span:nth-child(2) { --paid-height: 62%; --organic-height: 13%; }
.marketing-seo-chart > span:nth-child(3) { --paid-height: 88%; --organic-height: 19%; }
.marketing-seo-chart > span:nth-child(4) { --paid-height: 72%; --organic-height: 27%; }
.marketing-seo-chart > span:nth-child(5) { --paid-height: 48%; --organic-height: 38%; }
.marketing-seo-chart > span:nth-child(6) { --paid-height: 22%; --organic-height: 50%; }
.marketing-seo-chart > span:nth-child(7) { --paid-height: 8%; --organic-height: 61%; }
.marketing-seo-chart > span:nth-child(8) { --paid-height: 4%; --organic-height: 69%; }
.marketing-seo-chart > span:nth-child(9) { --paid-height: 2%; --organic-height: 76%; }
.marketing-seo-chart > span:nth-child(10) { --paid-height: 0%; --organic-height: 82%; }
.marketing-seo-axis { display: flex; justify-content: space-between; margin-top: 0.65rem; color: #66716d; font-family: var(--font-mono); font-size: var(--text-label); }
.marketing-seo-continuity > p { max-width: 40rem; margin: 1.5rem 0 0; color: #53605c; font-size: var(--text-support); line-height: 1.65; }

.marketing-process { padding: var(--section-space) 0; background: #f3eee7; }
.marketing-process-heading { display: grid; align-items: end; grid-template-columns: minmax(0, 0.88fr) minmax(320px, 0.58fr); gap: clamp(2.5rem, 7vw, 7rem); }
.marketing-process-heading h2 { max-width: 15ch; margin: 0; }
.marketing-process-heading p { max-width: 590px; margin: 0 0 0.35rem; color: #5b6260; font-size: var(--text-support); line-height: 1.72; }
.marketing-process-steps { display: grid; margin: clamp(3.5rem, 6vw, 5.5rem) 0 0; padding: 0; border-top: 1px solid rgba(30, 31, 32, 0.16); border-bottom: 1px solid rgba(30, 31, 32, 0.16); grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.marketing-process-steps li { display: grid; min-height: 18rem; padding: clamp(2rem, 3.4vw, 3.5rem); border-right: 1px solid rgba(30, 31, 32, 0.16); grid-template-rows: auto 1fr; }
.marketing-process-steps li:first-child { padding-left: 0; }
.marketing-process-steps li:last-child { padding-right: 0; border-right: 0; }
.marketing-process-steps li > span { color: var(--marketing-accent); font-family: var(--font-mono); font-size: var(--text-label); }
.marketing-process-steps li > div { align-self: end; }
.marketing-process-steps h3 { margin: 0; }
.marketing-process-steps p { margin: 0.9rem 0 0; color: #5a615f; font-size: var(--text-support); line-height: 1.68; }
.marketing-process-cta { display: grid; align-items: center; margin-top: clamp(3rem, 5vw, 4.5rem); padding: clamp(2rem, 4vw, 3.6rem); border-radius: clamp(1.3rem, 2.4vw, 2.2rem); background: #dfe8e4; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; }
.marketing-process-cta h3 { margin: 0; }
.marketing-process-cta p { max-width: 650px; margin: 0.7rem 0 0; color: #52605c; font-size: var(--text-support); }

/* FAQ and related links */
.marketing-faq { padding: var(--section-space) 0; background: #f7f4ef; }
.marketing-faq-layout { display: grid; align-items: start; grid-template-columns: minmax(330px, 0.68fr) minmax(0, 1.32fr); gap: clamp(3.5rem, 6vw, 6rem); }
.marketing-faq-intro { position: sticky; top: calc(var(--header-height) + 3rem); }
.marketing-faq-intro h2 { max-width: 16ch; margin: 0; }
.marketing-faq-intro > p { max-width: 500px; margin: 1.4rem 0 0; color: #5c6361; font-size: var(--text-support); }
.marketing-faq-list { border-top: 1px solid rgba(30, 31, 32, 0.16); }
.marketing-faq-list details { border-bottom: 1px solid rgba(30, 31, 32, 0.16); }
.marketing-faq-list summary { display: flex; min-height: 5.8rem; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.2rem 0; cursor: pointer; font-size: clamp(1.05rem, 1.35vw, 1.25rem); font-weight: 560; list-style: none; }
.marketing-faq-list summary::-webkit-details-marker { display: none; }
.marketing-faq-list summary i { position: relative; flex: 0 0 auto; width: 2.7rem; aspect-ratio: 1; border: 1px solid rgba(23, 73, 71, 0.2); border-radius: 50%; }
.marketing-faq-list summary i::before, .marketing-faq-list summary i::after { position: absolute; top: 50%; left: 50%; width: 0.85rem; height: 1px; background: var(--marketing-deep); content: ""; transform: translate(-50%, -50%); }
.marketing-faq-list summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 180ms ease; }
.marketing-faq-list details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.marketing-faq-list details > p { max-width: 800px; margin: -0.3rem 4.5rem 0 0; padding: 0 0 1.7rem; color: #5b6260; font-size: var(--text-support); line-height: 1.75; }

.marketing-next { padding: clamp(3.5rem, 6vw, 5.5rem) 0; border-top: 1px solid rgba(30, 31, 32, 0.13); background: #e6e2dc; }
.marketing-next-inner { display: grid; align-items: center; grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr); gap: clamp(2.5rem, 7vw, 7rem); }
.marketing-next-inner > div { display: grid; gap: 0.3rem; }
.marketing-next-inner > div span { color: var(--marketing-accent); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.055em; text-transform: uppercase; }
.marketing-next-inner > div strong { max-width: 480px; font-size: clamp(1.5rem, 2vw, 2.15rem); font-weight: 550; letter-spacing: -0.03em; line-height: 1.14; }
.marketing-next nav { display: grid; border-top: 1px solid rgba(30, 31, 32, 0.15); }
.marketing-next nav a { display: flex; min-height: 3.9rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(30, 31, 32, 0.15); color: #3f4544; font-size: var(--text-action); font-weight: 600; }
.marketing-next nav a span { color: var(--marketing-accent); transition: transform 180ms ease; }
.marketing-next nav a:hover span { transform: translate(0.2rem, -0.2rem); }

@keyframes marketing-map-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.5rem; } }
@keyframes marketing-signal-pulse { 0% { box-shadow: 0 0 0 0 rgba(70, 106, 97, 0.35); } 70%, 100% { box-shadow: 0 0 0 0.8rem rgba(70, 106, 97, 0); } }
@keyframes marketing-review-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

.marketing-case-signal { padding: var(--section-space-feature) 0; background: #f5f1eb; }
.marketing-case-signal-grid { display: grid; align-items: center; grid-template-columns: minmax(0, .82fr) minmax(28rem, 1.18fr); gap: clamp(3rem, 8vw, 8rem); }
.marketing-case-signal-copy h2 { max-width: 16ch; margin: 0; font-size: var(--type-section-title); line-height: 1.07; letter-spacing: -.045em; }
.marketing-case-signal-copy h2 em { color: var(--marketing-accent); }
.marketing-case-signal-copy p { max-width: 42rem; margin: 1.35rem 0 0; color: var(--slate); font-size: var(--text-support); line-height: 1.72; }
.marketing-case-signal-copy a { display: inline-flex; align-items: center; gap: .65rem; margin-top: 1.45rem; border-bottom: 1px solid rgba(30,91,90,.34); color: var(--deep); font-size: var(--text-action); font-weight: 600; }
.marketing-case-signal-visual { position: relative; display: block; padding: 1rem; overflow: hidden; border: 1px solid rgba(30,31,32,.12); border-radius: 2rem; background: #202625; box-shadow: 0 1.7rem 4rem rgba(30,31,32,.12); transform: rotate(1deg); transition: transform 200ms ease; }
.marketing-case-signal-visual:hover { transform: rotate(0deg) translateY(-.25rem); }
.marketing-case-signal-visual img { display: block; width: 100%; height: auto; border-radius: 1.3rem; object-fit: contain; }
.marketing-case-signal-visual > span { position: absolute; right: 2rem; bottom: 2rem; left: 2rem; display: grid; min-height: 4.6rem; align-items: center; padding: .85rem 1.2rem; border: 1px solid rgba(255,255,255,.15); border-radius: 1.1rem; background: rgba(20,24,23,.9); color: #fff; backdrop-filter: blur(10px); grid-template-columns: 1fr auto 1fr; gap: 1rem; }
.marketing-case-signal-visual b { font-size: var(--text-action); font-weight: 550; }
.marketing-case-signal-visual b:last-child { text-align: right; }
.marketing-case-signal-visual i { color: #c9b8dd; font-style: normal; }

@media (max-width: 1080px) {
  .marketing-hero-grid, .marketing-recognition-layout, .marketing-testimonial-layout, .marketing-diagnosis-heading, .marketing-help-heading, .marketing-channel-strip-layout, .marketing-seo-layout, .marketing-process-heading, .marketing-faq-layout, .marketing-next-inner { grid-template-columns: 1fr; }
  .marketing-hero { min-height: 0; }
  .marketing-hero-copy h1 { max-width: 18ch; }
  .marketing-hero-map { width: min(100%, 720px); }
  .marketing-recognition-layout, .marketing-testimonial-layout, .marketing-faq-layout { gap: 3.5rem; }
  .marketing-testimonial-intro h2, .marketing-faq-intro h2 { max-width: 20ch; }
  .marketing-testimonial-scene { grid-template-columns: minmax(230px, 0.65fr) minmax(330px, 1fr); }
  .marketing-diagnosis-note { margin: 0; }
  .marketing-diagnosis-workspace { grid-template-columns: 1fr; }
  .marketing-diagnosis-form { padding-right: 0; }
  .marketing-diagnosis-result { min-height: 30rem; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); border-left: 0; }
  .marketing-help-row { grid-template-columns: 7rem minmax(0, 1fr); }
  .marketing-help-row ul { grid-column: 2; }
  .marketing-seo-continuity { max-width: 760px; }
  .marketing-faq-intro { position: relative; top: auto; }
}

@media (max-width: 760px) {
  .marketing-testimonial-scene { grid-template-columns: 1fr; }
  .marketing-testimonial-orbit { min-height: 20rem; }
  .marketing-diagnosis-path { overflow-x: auto; grid-template-columns: repeat(5, 9.5rem); scrollbar-width: thin; }
  .marketing-diagnosis-path::before { width: 38rem; }
  .marketing-help-row { min-height: 0; grid-template-columns: 1fr; gap: 1.4rem; }
  .marketing-help-row ul { grid-column: 1; }
  .marketing-process-steps { grid-template-columns: 1fr; }
  .marketing-process-steps li, .marketing-process-steps li:first-child, .marketing-process-steps li:last-child { min-height: 0; padding: 2.2rem 0; border-right: 0; border-bottom: 1px solid rgba(30, 31, 32, 0.16); }
  .marketing-process-steps li:last-child { border-bottom: 0; }
  .marketing-process-steps li > div { margin-top: 2.4rem; }
  .marketing-process-cta { align-items: start; grid-template-columns: 1fr; }
  .marketing-process-cta .button { width: 100%; }
}

@media (max-width: 620px) {
  .marketing-hero { padding-top: calc(var(--header-height) + var(--hero-space-top)); padding-bottom: var(--hero-space-bottom); }
  .marketing-breadcrumbs { margin-bottom: 2.5rem; }
  .marketing-hero-intro { font-size: 1rem; }
  .marketing-hero-actions { align-items: stretch; flex-direction: column; }
  .marketing-hero-actions .button { width: 100%; }
  .marketing-hero-channels { margin-top: 1.7rem; }
  .marketing-hero-map { min-height: 530px; border-radius: 1.4rem; }
  .marketing-map-head { top: 1rem; right: 1rem; left: 1rem; }
  .marketing-map-moment { min-height: 8.4rem; padding: 1rem; border-radius: 1rem; }
  .marketing-map-moment > strong { font-size: clamp(1.2rem, 5.8vw, 1.55rem); }
  .marketing-map-moment.is-ad { top: 13%; left: 4%; width: 62%; }
  .marketing-map-moment.is-landing { top: 39%; right: 3%; width: 66%; min-height: 9.4rem; }
  .marketing-map-moment.is-contact { bottom: 5%; left: 5%; width: 69%; }
  .marketing-map-signal { top: 32%; right: 3%; }
  .marketing-recognition, .marketing-diagnosis, .marketing-faq { padding-block: var(--section-space); }
  .marketing-testimonial { padding-block: var(--section-space-compact); }
  .marketing-recognition-layout, .marketing-testimonial-layout, .marketing-faq-layout { gap: 3rem; }
  .marketing-recognition-list li { min-height: 4.8rem; }
  .marketing-testimonial-mark { top: -2rem; font-size: 15rem; }
  .marketing-testimonial blockquote > p { font-size: var(--text-action); line-height: 1.68; }
  .marketing-testimonial blockquote footer { grid-template-columns: 1fr; }
  .marketing-diagnosis-workspace { margin-top: 2.7rem; }
  .marketing-diagnosis-heading h2,
  .marketing-help-heading h2,
  .marketing-channel-strip h2,
  .marketing-seo-copy h2,
  .marketing-process-heading h2,
  .marketing-case-signal-copy h2 {
    max-width: 100%;
    font-size: clamp(2.05rem, 8.5vw, 2.65rem);
    line-height: 1.04;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .marketing-help-row h3 { font-size: clamp(1.65rem, 7vw, 2rem); overflow-wrap: anywhere; }
  .marketing-diagnosis-path {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    margin-right: calc(var(--page-padding) * -1);
    padding: 0 var(--page-padding) 0.4rem 0;
    gap: 0.75rem;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .marketing-diagnosis-path::-webkit-scrollbar { display: none; }
  .marketing-diagnosis-path::before { display: none; }
  .marketing-diagnosis-path li {
    min-height: 8.6rem;
    flex: 0 0 min(67vw, 15rem);
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.045);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .marketing-diagnosis-path li > strong { margin-top: 0.85rem; }
  .marketing-diagnosis-path li > small { max-width: 19ch; }
  .marketing-diagnosis-form { padding-block: 2.4rem; }
  .marketing-diagnosis-form label { min-height: 4.7rem; }
  .marketing-diagnosis-actions { align-items: stretch; flex-direction: column; }
  .marketing-diagnosis-actions .button { width: 100%; }
  .marketing-diagnosis-reset { align-self: center; }
  .marketing-diagnosis-result { min-height: 0; padding-block: 2.7rem; }
  .marketing-diagnosis-result dl div { grid-template-columns: 1fr; gap: 0.5rem; }
  .marketing-diagnosis-result .button { width: 100%; }
  .marketing-help-heading { padding-bottom: 3.2rem; }
  .marketing-help-row { padding-block: 2.4rem; }
  .marketing-channel-strip ul { gap: 0.5rem; }
  .marketing-channel-strip li { padding: 0.62rem 0.8rem; }
  .marketing-seo-bridge::before { right: -0.03em; font-size: 16rem; }
  .marketing-seo-continuity { padding: 1.2rem; }
  .marketing-seo-continuity-head { flex-direction: column; }
  .marketing-seo-continuity-head > div { justify-content: flex-start; }
  .marketing-seo-chart { height: 13rem; gap: 0.2rem; }
  .marketing-seo-axis { gap: 1rem; }
  .marketing-seo-axis span:last-child { text-align: right; }
  .marketing-process-cta { padding: 1.5rem; }
  .marketing-faq-list summary { min-height: 5rem; gap: 1rem; }
  .marketing-faq-list summary i { width: 2.5rem; }
  .marketing-faq-list details > p { margin-right: 0; }
  .marketing-next { padding-block: 3.5rem; }
}

@media (max-width: 760px) {
  .marketing-case-signal-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 620px) {
  .marketing-case-signal { padding-block: var(--section-space); }
  .marketing-case-signal-copy h2 { font-size: clamp(2.05rem, 8.5vw, 2.65rem); }
  .marketing-case-signal-visual { padding: .65rem; border-radius: 1.4rem; transform: none; }
  .marketing-case-signal-visual img { border-radius: .95rem; }
  .marketing-case-signal-visual > span { right: 1.2rem; bottom: 1.2rem; left: 1.2rem; min-height: 3.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-map-moment, .marketing-map-signal span { animation: none; }
  .marketing-testimonial-orbit::after { animation: none; }
  .marketing-diagnosis-path li, .marketing-diagnosis-path li > span, .marketing-diagnosis-form label, .marketing-help-list article { transition: none; }
}