/* =========================================================
   SALTY THEME — GLOBAL FOUNDATION
   assets/css/main.css
   ========================================================= */

/* =========================================================
   1. LOCAL GOOGLE FONTS & DESIGN TOKENS
   ========================================================= */

/* Cookie */
@font-face {
  font-family: "Cookie";
  src: url("../vendor/google-fonts/cookie.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Limelight */
@font-face {
  font-family: "Limelight";
  src: url("../vendor/google-fonts/limelight.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Manrope */
@font-face {
  font-family: "Manrope";
  src: url("../vendor/google-fonts/manrope.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

/* Noto Sans Mono */
@font-face {
  font-family: "Noto Sans Mono";
  src: url("../vendor/google-fonts/noto-sans-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #f4efe7;
  --paper: #fbf8f3;
  --white: #fffdf9;
  --ink: #39332e;
  --muted: #756d66;
  --line: #d8d0c6;

  --lav: #ddd3f6;
  --lav-2: #c9b7ef;
  --blush: #eed6d8;
  --peach: #f2d8c4;
  --sage: #dce6d9;
  --sage-2: #c9ddc3;
  --blue: #d7e4ea;
  --butter: #eee3b9;

  --announcement-h: 36px;
  --header-h: 76px;
  --container: 1500px;
  --gutter: clamp(20px, 3.2vw, 50px);
  --section-space: clamp(88px, 8vw, 132px);
  --section-tight: clamp(64px, 6vw, 96px);

  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;

  --font-sans: "Manrope", sans-serif;
  --font-display: "Limelight", serif;
  --font-script: "Cookie", cursive;
  --font-mono: "Noto Sans Mono", monospace;

  --border-soft: rgba(57, 51, 46, 0.07);
  --border-default: rgba(57, 51, 46, 0.1);
  --surface-glass: rgba(255, 253, 249, 0.58);

  --shadow-sm: 0 14px 34px rgba(57, 51, 46, 0.06);
  --shadow-md: 0 24px 60px rgba(57, 51, 46, 0.08);
  --shadow: 0 24px 70px rgba(57, 51, 46, 0.09);

  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 520ms;
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   2. RESET / DOCUMENT
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open,
body.loader-active {
  overflow: hidden;
}

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

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

button {
  color: inherit;
}

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

img {
  background: #ebe5dc;
}

::selection {
  background: var(--lav-2);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid rgba(93, 75, 119, 0.34);
  outline-offset: 3px;
}

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

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 6000;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--lav-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: none;
}

.shell {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-space);
}

.section--tight {
  padding-block: var(--section-tight);
}

section[id],
#top {
  scroll-margin-top: calc(var(--header-h) + 18px);
}

/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */
h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-script);
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3.55rem, 5.85vw, 6.75rem);
  line-height: 0.94;
}

h2 {
  font-size: clamp(2.5rem, 4.4vw, 4.8rem);
  line-height: 0.98;
}

h3 {
  font-size: clamp(1.55rem, 2.4vw, 2.6rem);
  line-height: 1;
}

p {
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.68;
  text-wrap: pretty;
}

.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  max-height: fit-content;
  max-width: fit-content;
  padding: 6px 12px;
  border: 1px solid rgba(57, 51, 46, 0.1);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.55);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

.section-eyebrow i {
  font-size: 9px;
  color: #8f72b7;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: clamp(34px, 6vw, 90px);
  align-items: end;
  margin-bottom: clamp(38px, 4.5vw, 58px);
}

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

.section-heading > p,
.section-heading__copy p {
  margin: 0;
  color: var(--muted);
}

.section-heading__copy p + p {
  margin-top: 14px;
}

/* =========================================================
   4. BUTTONS / SHARED ACTIONS
   ========================================================= */
.btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 19px;
  border: 1px solid rgba(57, 51, 46, 0.14);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.28s var(--ease),
    background 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

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

.btn--dark {
  background: linear-gradient(135deg, var(--lav-2), #d8c9f4);
  color: var(--ink);
  border-color: rgba(115, 89, 151, 0.18);
  box-shadow: 0 10px 26px rgba(133, 108, 168, 0.1);
}

.btn--dark:hover {
  background: linear-gradient(135deg, #d4c5f3, var(--sage-2));
}

.btn--light {
  background: rgba(255, 253, 249, 0.62);
}

.btn i {
  font-size: 11px;
  color: #7d63a0;
}

/* =========================================================
   5. REPEATING IN-VIEW MOTION
   JS toggles .is-visible every time an element enters/leaves.
   ========================================================= */
html.salty-js .reveal {
  --reveal-x: 0px;
  --reveal-y: 28px;
  --reveal-scale: 1;
  --reveal-blur: 0px;
  opacity: 0;
  transform: translate3d(var(--reveal-x), var(--reveal-y), 0)
    scale(var(--reveal-scale));
  filter: blur(var(--reveal-blur));
  transition:
    opacity 0.72s var(--ease),
    transform 0.78s var(--ease),
    filter 0.72s var(--ease);
  will-change: opacity, transform;
}

html.salty-js .reveal[data-reveal="left"],
html.salty-js .reveal.reveal--left {
  --reveal-x: -30px;
  --reveal-y: 0px;
}

html.salty-js .reveal[data-reveal="right"],
html.salty-js .reveal.reveal--right {
  --reveal-x: 30px;
  --reveal-y: 0px;
}

html.salty-js .reveal[data-reveal="scale"],
html.salty-js .reveal.reveal--scale {
  --reveal-y: 10px;
  --reveal-scale: 0.965;
}

html.salty-js .reveal[data-reveal="soft"],
html.salty-js .reveal.reveal--soft {
  --reveal-y: 16px;
  --reveal-blur: 5px;
}

html.salty-js .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

html.salty-js .reveal.is-visible.reveal-delay-1,
html.salty-js .reveal.is-visible[data-reveal-delay="1"] {
  transition-delay: 70ms;
}

html.salty-js .reveal.is-visible.reveal-delay-2,
html.salty-js .reveal.is-visible[data-reveal-delay="2"] {
  transition-delay: 140ms;
}

html.salty-js .reveal.is-visible.reveal-delay-3,
html.salty-js .reveal.is-visible[data-reveal-delay="3"] {
  transition-delay: 210ms;
}

html.salty-js .reveal:not(.is-visible) {
  transition-delay: 0ms;
}

/* =========================================================
   6. SCROLL PROGRESS
   ========================================================= */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2500;
  pointer-events: none;
}

.scroll-progress__bar {
  width: 0;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--lav-2), #aacaa2, var(--peach));
}

/* =========================================================
   7. LOADING SCREEN
   ========================================================= */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(221, 211, 246, 0.7),
      transparent 28%
    ),
    radial-gradient(
      circle at 80% 78%,
      rgba(201, 221, 195, 0.64),
      transparent 30%
    ),
    var(--paper);
  transition:
    opacity 0.55s var(--ease),
    visibility 0.55s ease;
  animation: loaderFallback 0s 4.2s forwards;
}

.site-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader__inner {
  width: min(720px, 92vw);
  text-align: center;
}

.site-loader__kicker {
  display: block;
  margin-bottom: 18px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.site-loader__wordmark {
  min-height: 1.08em;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-style: normal;
  font-weight: 600;
  line-height: 0.92;
}

.site-loader__caret {
  width: 2px;
  height: 0.72em;
  margin-left: 1px;
  background: currentColor;
  transform: translateY(0.05em);
  animation: loaderCaret 0.72s steps(1) infinite;
}

.site-loader__line {
  width: min(290px, 72vw);
  height: 2px;
  overflow: hidden;
  margin: 28px auto 0;
  border-radius: 999px;
  background: rgba(57, 51, 46, 0.09);
}

.site-loader__line span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lav-2), var(--sage-2), var(--peach));
  animation: loaderLine 1.15s var(--ease) infinite alternate;
}

@keyframes loaderCaret {
  50% {
    opacity: 0;
  }
}

@keyframes loaderLine {
  to {
    transform: translateX(138%);
  }
}

@keyframes loaderFallback {
  to {
    visibility: hidden;
    pointer-events: none;
  }
}

/* =========================================================
   8. ANNOUNCEMENT
   ========================================================= */
.announcement {
  position: relative;
  z-index: 1200;
  height: var(--announcement-h);
  background: #ddc7f3;
  border-bottom: 1px solid rgba(57, 51, 46, 0.08);
}

.announcement a {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding-inline: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}

.announcement strong {
  font-weight: 700;
}

.announcement i {
  font-size: 9px;
  transition: transform 0.22s ease;
}

.announcement a:hover i {
  transform: translateX(4px);
}

/* =========================================================
   9. HEADER
   Compact desktop structure:
   Agency | Expertise | Work | Pricing | Journal
   ========================================================= */
.site-header {
  position: absolute;
  top: var(--announcement-h);
  left: 0;
  right: 0;
  z-index: 1150;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--duration-base) ease,
    border-color var(--duration-base) ease,
    box-shadow var(--duration-base) ease,
    backdrop-filter var(--duration-base) ease;
}

.site-header.is-scrolled {
  position: fixed;
  top: 0;
  background: rgba(244, 239, 231, 0.88);
  border-bottom-color: rgba(57, 51, 46, 0.08);
  box-shadow: 0 9px 32px rgba(57, 51, 46, 0.045);
  backdrop-filter: blur(18px);
}

.nav {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-right: auto;
  white-space: nowrap;
}

.brand__wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.8vw, 1.88rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1;
}

.brand__dot {
  width: 0.36em;
  height: 0.36em;
  flex: 0 0 0.36em;
  border-radius: 50%;
  background: var(--lav-2);
  box-shadow: 0 0 0 4px rgba(201, 183, 239, 0.11);
  transform: translateY(-0.06em);
  animation: saltyDot 5.4s ease-in-out infinite;
}

@keyframes saltyDot {
  0%,
  100% {
    background: #b597e2;
    box-shadow: 0 0 0 4px rgba(181, 151, 226, 0.12);
  }

  33% {
    background: #91b58a;
    box-shadow: 0 0 0 4px rgba(145, 181, 138, 0.12);
  }

  66% {
    background: #d99d8f;
    box-shadow: 0 0 0 4px rgba(217, 157, 143, 0.12);
  }
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-item {
  position: relative;
}

.nav-item::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 30px;
}

.nav-link,
.nav-trigger {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.nav-link:hover,
.nav-link.is-active,
.nav-link[aria-current="page"],
.nav-trigger:hover,
.nav-trigger.is-active,
.nav-item.is-open > .nav-trigger {
  background: rgba(255, 253, 249, 0.48);
}

.nav-trigger i {
  font-size: 9px;
  color: #8b6fad;
  transition: transform 0.24s var(--ease);
}

.nav-item.is-open .nav-trigger i,
.nav-item:hover .nav-trigger i,
.nav-item:focus-within .nav-trigger i {
  transform: rotate(180deg);
}

.nav-item--expertise.is-current > .nav-trigger {
  color: #765b99;
}

/* Unified Expertise mega menu. */
.mega--expertise {
  position: fixed;
  top: calc(var(--announcement-h) + var(--header-h) + 8px);
  left: 50%;
  width: min(1160px, calc(100vw - (var(--gutter) * 2)));
  padding: 12px;
  border: 1px solid rgba(57, 51, 46, 0.1);
  border-radius: 28px;
  background: rgba(251, 248, 243, 0.97);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition:
    opacity 0.22s ease,
    transform 0.24s var(--ease),
    visibility 0.22s ease;
}

.site-header.is-scrolled .mega--expertise {
  top: calc(var(--header-h) + 8px);
}

.nav-item--expertise:hover .mega--expertise,
.nav-item--expertise:focus-within .mega--expertise,
.nav-item--expertise.is-open .mega--expertise {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.mega__categories {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.mega-category {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(57, 51, 46, 0.06);
  border-radius: 20px;
  background: var(--lav);
  transition:
    transform 0.24s var(--ease),
    border-color 0.24s ease;
}

.mega-category:nth-child(2) {
  background: var(--sage);
}

.mega-category:nth-child(3) {
  background: var(--peach);
}

.mega-category:nth-child(4) {
  background: var(--blue);
}

.mega-category:nth-child(5) {
  background: var(--butter);
}

.mega-category:hover,
.mega-category.is-current {
  transform: translateY(-2px);
  border-color: rgba(57, 51, 46, 0.13);
}

.mega-category__head {
  min-height: 104px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  gap: 11px;
  align-items: start;
  padding: 16px 14px 14px;
}

.mega-category__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(57, 51, 46, 0.08);
  border-radius: 12px;
  background: rgba(255, 253, 249, 0.58);
  color: #8b6fad;
  font-size: 13px;
}

.mega-category:nth-child(2) .mega-category__icon {
  color: #6f9475;
}

.mega-category:nth-child(3) .mega-category__icon {
  color: #b07a70;
}

.mega-category:nth-child(4) .mega-category__icon {
  color: #7194a6;
}

.mega-category:nth-child(5) .mega-category__icon {
  color: #9b8249;
}

.mega-category__copy {
  min-width: 0;
}

.mega-category__copy strong {
  display: block;
  font-size: 12px;
  line-height: 1.25;
}

.mega-category__copy small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.mega-category__arrow {
  margin-top: 4px;
  color: rgba(57, 51, 46, 0.48);
  font-size: 9px;
  transition: transform 0.22s var(--ease);
}

.mega-category__head:hover .mega-category__arrow {
  transform: translate(2px, -2px);
}

.mega-category__services {
  display: grid;
  gap: 1px;
  padding: 0 8px 8px;
}

.mega-category__services a {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 12px;
  color: rgba(57, 51, 46, 0.78);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s var(--ease);
}

.mega-category__services a i {
  flex: 0 0 auto;
  color: rgba(57, 51, 46, 0.38);
  font-size: 8px;
}

.mega-category__services a:hover {
  background: rgba(255, 253, 249, 0.52);
  color: var(--ink);
  transform: translateX(2px);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 40px;
  padding: 4px;
  border: 1px solid rgba(57, 51, 46, 0.12);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.42);
  backdrop-filter: blur(10px);
}

.language-switch__globe {
  display: grid;
  place-items: center;
  width: 28px;
  color: #8b6fad;
  font-size: 11px;
}

.language-switch a {
  min-width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
}

.language-switch a.is-active,
.language-switch a[aria-current="page"] {
  background: var(--lav-2);
  color: var(--ink);
}

.nav-cta {
  min-height: 44px;
  background: rgba(255, 253, 249, 0.78);
  color: #745f86;
}

.site-header.is-scrolled .nav-cta {
  background: var(--sage-2);
  color: var(--ink);
  border-color: rgba(91, 124, 94, 0.18);
}

.mobile-toggle,
.mobile-close {
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(57, 51, 46, 0.12);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.72);
  color: #8065a3;
  cursor: pointer;
}

.mobile-toggle {
  display: none;
}

.mobile-close {
  display: grid;
}

/* =========================================================
   10. MOBILE NAVIGATION
   Initial menu stays short; Expertise expands to categories.
   Category labels remain real links, with separate + controls.
   ========================================================= */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  transform: translateY(-102%);
  visibility: hidden;
  transition:
    transform 0.45s var(--ease),
    visibility 0.45s ease;
}

.mobile-menu.is-open {
  transform: none;
  visibility: visible;
}

.mobile-menu__top {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: rgba(244, 239, 231, 0.9);
  border-bottom: 1px solid rgba(57, 51, 46, 0.08);
  backdrop-filter: blur(16px);
}

.mobile-menu__body {
  padding: 24px 20px 32px;
}

.mobile-menu__intro {
  padding: 8px 0 24px;
}

.mobile-menu__intro h2 {
  margin: 12px 0 0;
  font-family: var(--font-script);
  font-size: clamp(2.6rem, 12vw, 4.6rem);
  line-height: 0.98;
}

.mobile-nav {
  border-top: 1px solid var(--line);
}

.mobile-nav__item,
.mobile-expertise {
  border-bottom: 1px solid var(--line);
}

.mobile-nav__head,
.mobile-expertise__head {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
}

.mobile-nav__head--link {
  color: inherit;
}

.mobile-nav__num {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
}

.mobile-nav__label,
.mobile-expertise__label {
  min-width: 0;
  font-family: var(--font-script);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1;
}

.mobile-nav__item.is-current .mobile-nav__label,
.mobile-expertise.is-current .mobile-expertise__label {
  color: #765b99;
}

.mobile-nav__icon,
.mobile-nav__disclosure,
.mobile-expertise__disclosure,
.mobile-expertise-category__disclosure {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  justify-self: end;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: #8065a3;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    background 0.25s ease,
    color 0.25s ease;
}

.mobile-expertise.is-open
  > .mobile-expertise__head
  .mobile-expertise__disclosure,
.mobile-expertise-category.is-open
  > .mobile-expertise-category__head
  .mobile-expertise-category__disclosure {
  transform: rotate(45deg);
  background: var(--lav);
  color: #866cab;
}

.mobile-expertise__panel,
.mobile-expertise-category__services {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 0.34s var(--ease),
    visibility 0.34s ease;
}

.mobile-expertise.is-open > .mobile-expertise__panel,
.mobile-expertise-category.is-open > .mobile-expertise-category__services {
  grid-template-rows: 1fr;
  visibility: visible;
}

.mobile-expertise__panel > div,
.mobile-expertise-category__services > div {
  min-height: 0;
  overflow: hidden;
}

.mobile-expertise__categories {
  display: grid;
  gap: 8px;
  padding: 0 0 18px 30px;
}

.mobile-expertise-category {
  overflow: hidden;
  border: 1px solid rgba(57, 51, 46, 0.08);
  border-radius: 18px;
  background: var(--lav);
}

.mobile-expertise-category:nth-child(2) {
  background: var(--sage);
}

.mobile-expertise-category:nth-child(3) {
  background: var(--peach);
}

.mobile-expertise-category:nth-child(4) {
  background: var(--blue);
}

.mobile-expertise-category:nth-child(5) {
  background: var(--butter);
}

.mobile-expertise-category__head {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 14px;
}

.mobile-expertise-category__link {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.mobile-expertise-category__link i {
  color: rgba(57, 51, 46, 0.42);
  font-size: 9px;
}

.mobile-expertise-category__services-inner {
  display: grid;
  gap: 2px;
  padding: 0 8px 8px;
}

.mobile-expertise-category__services a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 253, 249, 0.45);
  font-size: 11px;
  font-weight: 600;
}

.mobile-expertise-category__services a + a {
  margin-top: 2px;
}

.mobile-menu__footer {
  margin-top: 26px;
  display: grid;
  gap: 12px;
}

.mobile-menu__cta {
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--lav), var(--sage));
  color: var(--ink);
}

.mobile-menu__cta strong {
  display: block;
  margin: 9px 0 18px;
  font-family: var(--font-script);
  font-size: 2rem;
  line-height: 1;
}

.mobile-menu__cta .btn {
  width: 100%;
  background: rgba(255, 253, 249, 0.72);
  color: var(--ink);
}

.mobile-menu__language {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 6px;
}

/* =========================================================
   11. FOOTER — LOCKED DARK VISUAL SYSTEM
   ========================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  color: #f8f2eb;
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(201, 183, 239, 0.17),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 96%,
      rgba(201, 221, 195, 0.1),
      transparent 28%
    ),
    #302b32;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.018),
    transparent 44%,
    rgba(255, 255, 255, 0.025)
  );
}

.footer-shell {
  position: relative;
  z-index: 2;
  padding-top: clamp(58px, 7vw, 96px);
  padding-bottom: 24px;
}

.footer-brand-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: end;
  padding-bottom: clamp(44px, 6vw, 74px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(8px, 1vw, 14px);
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 5rem);
  font-weight: 600;
  line-height: 0.82;
  white-space: nowrap;
}

.footer-wordmark .brand__dot {
  width: 0.2em;
  height: 0.2em;
  flex-basis: 0.2em;
  transform: translateY(-0.08em);
}

.footer-intro {
  justify-self: end;
  margin: 0;
  color: rgba(248, 242, 235, 0.62);
  max-width: 90vw;
  font-size: 12px;
  line-height: 1.7;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) repeat(3, minmax(130px, 0.55fr));
  gap: clamp(32px, 5vw, 76px);
  padding: clamp(36px, 5vw, 62px) 0;
}

.footer-note strong {
  display: block;
  margin-bottom: 11px;
  font-family: var(--font-script);
  font-size: clamp(1.65rem, 2.35vw, 2.35rem);
  line-height: 1;
  font-weight: 600;
  color: #fff8f1;
}

.footer-note p {
  margin: 0;
  color: rgba(248, 242, 235, 0.5);
  font-size: 11px;
  line-height: 1.7;
}

.footer-group strong {
  display: block;
  margin-bottom: 15px;
  color: rgba(248, 242, 235, 0.42);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
}

.footer-group a {
  display: block;
  width: fit-content;
  padding: 5px 0;
  color: rgba(248, 242, 235, 0.82);
  font-size: 12px;
  font-weight: 600;
  transition:
    color 0.22s ease,
    transform 0.26s var(--ease);
}

.footer-group a:hover,
.footer-group a[aria-current="page"] {
  color: #fff;
  transform: translateX(4px);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  color: rgba(248, 242, 235, 0.4);
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
}

.footer-legal a {
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: rgba(248, 242, 235, 0.86);
}

.footer-language {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.footer-language a {
  min-width: 36px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(248, 242, 235, 0.44);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
}

.footer-language a:hover {
  color: rgba(248, 242, 235, 0.82);
}

.footer-language a.is-active,
.footer-language a[aria-current="page"] {
  background: rgba(221, 211, 246, 0.92);
  color: #45394f;
}

/* =========================================================
   12. FLOATING CONTROLS
   ========================================================= */
.floating-tools {
  position: fixed;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 1050;
  display: grid;
  gap: 8px;
}

.floating-btn {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(57, 51, 46, 0.13);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.88);
  box-shadow: 0 12px 32px rgba(57, 51, 46, 0.09);
  color: #8065a3;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s var(--ease),
    background 0.25s ease;
}

.floating-btn::before {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(5px);
  padding: 7px 9px;
  border-radius: 9px;
  background: var(--butter);
  color: #806c48;
  font-family: var(--font-mono);
  font-size: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.floating-btn:hover::before {
  opacity: 1;
  transform: translateY(-50%);
}

.back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* =========================================================
   13. RESPONSIVE — SHARED UI ONLY
   ========================================================= */
@media (max-width: 1240px) {
  .desktop-nav,
  .nav-actions > .language-switch,
  .nav-actions > .nav-cta {
    display: none;
  }

  .mobile-toggle {
    display: grid;
  }
}

@media (max-width: 900px) {
  .footer-brand-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .footer-intro {
    justify-self: start;
  }

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

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

@media (max-width: 760px) {
  :root {
    --gutter: 18px;
    --section-space: 78px;
    --section-tight: 62px;
    --header-h: 66px;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 34px;
  }
}

@media (max-width: 560px) {
  .footer-shell {
    padding-top: 54px;
  }

  .footer-brand-row {
    gap: 26px;
    padding-bottom: 38px;
  }
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 28px 22px;
    padding-block: 34px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column-reverse;
  }
}

@media (max-width: 520px) {
  .announcement a {
    font-size: 8px;
  }

  .brand__wordmark {
    font-size: 1.45rem;
  }

  .brand__dot {
    width: 0.32em;
    height: 0.32em;
    flex-basis: 0.32em;
  }

  .mobile-menu__body,
  .mobile-menu__top {
    padding-inline: 16px;
  }

  .mobile-expertise__categories {
    padding-left: 0;
  }

  .floating-tools {
    right: 12px;
    bottom: 12px;
  }

  .floating-btn {
    width: 46px;
    height: 46px;
  }
}

/* =========================================================
   14. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  html.salty-js .reveal,
  html.salty-js .reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* =========================================================
   SALTY THEME — PAGE HOME
   ========================================================= */

/* =========================================================
   15. HERO
   ========================================================= */
.hero {
  position: relative;
  height: calc(100svh - var(--announcement-h));
  max-height: calc(100svh - var(--announcement-h));
  overflow: hidden;
  border-bottom: 1px solid rgba(57, 51, 46, 0.08);
  background:
    radial-gradient(
      circle at 83% 15%,
      rgba(255, 255, 255, 0.58),
      transparent 21%
    ),
    radial-gradient(
      circle at 14% 92%,
      rgba(221, 211, 246, 0.28),
      transparent 26%
    ),
    linear-gradient(135deg, #eef5e9 0%, #dce8d7 48%, #e7efdc 100%);
}

.hero::before {
  content: "";
  position: absolute;
  left: -15vw;
  bottom: -420px;
  width: 82vw;
  height: 720px;
  border: 1px solid rgba(57, 51, 46, 0.1);
  border-radius: 50%;
  transform: rotate(13deg);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: -170px;
  top: -160px;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.hero-layout {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(500px, 0.97fr);
  gap: clamp(50px, 6vw, 100px);
  align-items: center;
  padding-top: calc(var(--header-h) + 28px);
  padding-bottom: 38px;
}

.hero-copy {
  min-width: 0;
}

.hero-eyebrows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.hero-pill {
  min-height: 33px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border: 1px solid rgba(57, 51, 46, 0.11);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.62);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.hero-pill--lav {
  background: rgba(221, 211, 246, 0.7);
}

.hero-title {
  margin: 0;
}

.hero-title span {
  color: #756d66;
}

.hero-positioning {
  margin: 22px 0 0;
  max-width: 650px;
  color: #695f58;
  font-size: clamp(0.92rem, 1vw, 1.02rem);
  line-height: 1.5;
  font-weight: 700;
}

.hero-lead {
  margin: 14px 0 0;
  font-size: clamp(1.16rem, 1.42vw, 1.42rem);
  line-height: 1.5;
  font-weight: 600;
}

.hero-body {
  margin: 11px 0 0;
  color: var(--muted);
}

.hero-body strong {
  color: var(--ink);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 27px;
}

.hero-primary {
  padding-right: 7px;
  background: linear-gradient(135deg, var(--lav-2), #d7c9f2);
  color: var(--ink);
  border-color: rgba(122, 92, 158, 0.16);
  box-shadow: 0 12px 28px rgba(118, 93, 151, 0.1);
}

.hero-primary__icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--butter);
  color: #7e68a0;
}

.hero-secondary {
  background: rgba(255, 253, 249, 0.38);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 20px;
  padding-top: 25px;
  margin-top: 29px;
  border-top: 1px solid rgba(57, 51, 46, 0.11);
}

.hero-trust__item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #615a54;
  font-size: 11px;
  font-weight: 600;
}

.hero-trust__icon {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.72);
  border: 1px solid rgba(57, 51, 46, 0.08);
  color: #719274;
  font-size: 7px;
}

.hero-visual {
  position: relative;
  min-height: min(61vh, 565px);
  width: 100%;
  perspective: 1000px;
  overflow: clip;
  padding: 2px;
}

.hero-photo {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 55%;
  height: 73%;
  overflow: hidden;
  border: 1px solid rgba(57, 51, 46, 0.1);
  border-radius: 28px;
  background: var(--sage);
  box-shadow: var(--shadow);
  z-index: 3;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 27%;
}

.hero-photo__heart {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--butter);
  color: #a16f7d;
  border: 1px solid rgba(57, 51, 46, 0.08);
  font-size: 10px;
}

.hero-photo__label {
  position: absolute;
  right: 14px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(221, 201, 245, 0.92);
  border: 1px solid rgba(57, 51, 46, 0.09);
  font-size: 9px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.hero-service-card {
  position: absolute;
  right: 2%;
  top: 2%;
  width: 38%;
  min-height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(21px, 2.2vw, 29px);
  border: 1px solid rgba(57, 51, 46, 0.1);
  border-radius: 28px;
  background: rgba(255, 253, 249, 0.91);
  box-shadow: 0 23px 60px rgba(57, 51, 46, 0.08);
  z-index: 4;
  backdrop-filter: blur(10px);
}

.hero-service-card small {
  color: var(--muted);
}

.hero-service-card h2 {
  margin: 10px 0 0;
  font-size: clamp(1rem, 2vw, 2rem);
}

.hero-service-card ul {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 22px 0 0;
  padding: 0;
}

.hero-service-card li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 7px;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 600;
}

.hero-service-card li i {
  margin-top: 1px;
  font-size: 11px;
  color: #6f9876;
}

.hero-metric-card {
  position: absolute;
  right: 2%;
  bottom: 4%;
  width: 38%;
  min-height: 112px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 19px;
  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 22px;
  background: #d3e3d6;
  box-shadow: 0 18px 42px rgba(57, 51, 46, 0.07);
  z-index: 4;
}

.hero-metric-card strong {
  display: block;
  font-size: clamp(2rem, 2.8vw, 2.8rem);
  line-height: 0.9;
}

.hero-metric-card span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
}

.hero-bars {
  height: 60px;
  display: flex;
  align-items: end;
  gap: 4px;
}

.hero-bars span {
  width: 9px;
  min-height: 10px;
  border-radius: 4px 4px 1px 1px;
  background: #6d9875;
}

.hero-bars span:nth-child(1) {
  height: 32%;
}

.hero-bars span:nth-child(2) {
  height: 48%;
  background: #7fa881;
}

.hero-bars span:nth-child(3) {
  height: 66%;
  background: #97bb8d;
}

.hero-bars span:nth-child(4) {
  height: 84%;
  background: #b4dc9d;
}

/* =========================================================
   16. APPROACH
   ========================================================= */
.approach-section {
  background: linear-gradient(
    180deg,
    rgba(251, 248, 243, 0.96),
    rgba(246, 241, 234, 0.98)
  );
  border-bottom: 1px solid rgba(57, 51, 46, 0.06);
}

.approach-layout {
  display: grid;
  grid-template-columns: minmax(330px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(58px, 7vw, 118px);
  align-items: start;
}

.approach-copy {
  position: sticky;
  top: 112px;
  padding-bottom: 60px;
}

.approach-copy h2 {
  margin: 18px 0 25px;
  white-space: pre-line;
}

.approach-copy p {
  margin-bottom: 16px;
  color: var(--muted);
}

.approach-copy p strong {
  color: var(--ink);
}

.approach-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(57, 51, 46, 0.1);
  color: var(--ink);
}

.approach-note i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--butter);
  color: #8b70ad;
}

.approach-note p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.approach-stack {
  position: relative;
  display: block;
  padding-left: 40px;
  padding-bottom: 120px;
}

.approach-stack::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 0;
  bottom: 82px;
  width: 1px;
  background: linear-gradient(var(--line), rgba(216, 208, 198, 0.15));
}

.approach-card {
  --card-bg: var(--lav);
  --dot: #9f86c7;
  position: sticky;
  top: 116px;
  z-index: 1;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(26px, 3vw, 38px);
  margin-bottom: 26px;
  border: 1px solid rgba(57, 51, 46, 0.08);
  border-radius: 30px;
  background: var(--card-bg);
  box-shadow: 0 18px 54px rgba(57, 51, 46, 0.045);
  transition:
    box-shadow 0.32s ease,
    filter 0.32s ease,
    transform 0.32s var(--ease);
}

.approach-card:nth-child(1) {
  --card-bg: var(--lav);
  --dot: #9a7fbe;
  top: 116px;
  z-index: 1;
}

.approach-card:nth-child(2) {
  --card-bg: var(--sage);
  --dot: #74967a;
  top: 134px;
  z-index: 2;
}

.approach-card:nth-child(3) {
  --card-bg: var(--peach);
  --dot: #bd8678;
  top: 152px;
  z-index: 3;
}

.approach-card:nth-child(4) {
  --card-bg: var(--blue);
  --dot: #7a9cae;
  top: 170px;
  z-index: 4;
  margin-bottom: 0;
}

.approach-card::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--dot);
  transform: translateY(-50%);
  box-shadow: 0 0 0 6px rgba(251, 248, 243, 0.9);
  transition:
    transform 0.28s var(--ease),
    background 0.28s ease,
    box-shadow 0.28s ease;
}

.approach-card.is-active {
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(57, 51, 46, 0.08);
  filter: saturate(1.03);
}

.approach-card.is-active::before {
  transform: translateY(-50%) scale(1.22);
  background: var(--dot);
  box-shadow: 0 0 0 7px rgba(251, 248, 243, 0.96);
}

.approach-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.approach-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 253, 249, 0.54);
  border: 1px solid rgba(57, 51, 46, 0.07);
  color: var(--dot);
  font-size: 15px;
}

.approach-index {
  color: rgba(57, 51, 46, 0.52);
}

.approach-card h3 {
  margin: 22px 0 11px;
  font-size: clamp(2rem, 3vw, 3.25rem);
}

.approach-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

/* =========================================================
   17. EXPERTISE
   ========================================================= */
.expertise-section {
  position: relative;
  overflow: clip;
  padding-bottom: 0;
  background: var(--bg);
  border-block: 1px solid var(--border-soft);
}

.expertise-section .section-heading {
  margin-bottom: clamp(42px, 5vw, 64px);
}

.expertise-bands {
  border-top: 1px solid var(--border-default);
}

.expertise-band {
  --band-bg: var(--lav);
  --band-accent: #8267a4;
  --band-icon-bg: rgba(255, 253, 249, 0.58);
  position: relative;
  overflow: clip;
  background: var(--band-bg);
  border-bottom: 1px solid var(--border-default);
  isolation: isolate;
  transition:
    background var(--duration-base) ease,
    box-shadow var(--duration-base) ease;
}

.expertise-band:nth-child(2) {
  --band-bg: var(--sage);
  --band-accent: #66886c;
}

.expertise-band:nth-child(3) {
  --band-bg: var(--peach);
  --band-accent: #a66f65;
}

.expertise-band:nth-child(4) {
  --band-bg: var(--blue);
  --band-accent: #668a9a;
}

.expertise-band:nth-child(5) {
  --band-bg: var(--butter);
  --band-accent: #9b8249;
}

.expertise-band::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--band-accent);
  transition: width var(--duration-base) var(--ease);
  z-index: 2;
  pointer-events: none;
}

.expertise-band::after {
  content: "";
  position: absolute;
  right: clamp(-120px, -7vw, -50px);
  top: 50%;
  width: clamp(190px, 18vw, 330px);
  aspect-ratio: 1;
  border: 1px solid rgba(57, 51, 46, 0.07);
  border-radius: 50%;
  transform: translateY(-50%) scale(0.82);
  opacity: 0.38;
  pointer-events: none;
  transition:
    transform var(--duration-slow) var(--ease),
    opacity var(--duration-base) ease;
  z-index: -1;
}

.expertise-band__inner {
  position: relative;
  min-height: 218px;
  display: grid;
  grid-template-columns:
    38px 86px minmax(240px, 0.82fr) minmax(320px, 1.18fr)
    46px;
  gap: clamp(18px, 2.5vw, 38px);
  align-items: center;
  padding-top: 28px;
  padding-bottom: 28px;
  transition: grid-template-columns var(--duration-slow) var(--ease);
}

.expertise-band__trigger {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.expertise-band__trigger:focus-visible {
  outline: 0;
}

.expertise-band:focus-within {
  box-shadow: inset 0 0 0 3px rgba(130, 103, 164, 0.24);
}

.expertise-band__index {
  position: relative;
  z-index: 3;
  align-self: start;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: rgba(57, 51, 46, 0.54);
}

.expertise-band__icon {
  position: relative;
  z-index: 3;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 21px;
  background: var(--band-icon-bg);
  box-shadow: var(--shadow-sm);
  color: var(--band-accent);
  font-size: 21px;
  transform-origin: center;
  transition:
    transform var(--duration-slow) var(--ease),
    border-radius var(--duration-base) ease,
    background var(--duration-base) ease,
    box-shadow var(--duration-base) ease;
}

.expertise-band__title {
  position: relative;
  z-index: 3;
  min-width: 0;
  transition: transform var(--duration-base) var(--ease);
}

.expertise-band__title h3 {
  margin: 0;
  font-size: clamp(2rem, 3.25vw, 3.8rem);
  line-height: 0.98;
}

.expertise-band__title p {
  margin: 11px 0 0;
  color: rgba(57, 51, 46, 0.66);
  font-size: 11px;
  line-height: 1.5;
}

.expertise-band__content {
  position: relative;
  z-index: 3;
  min-width: 0;
  min-height: 154px;
  display: grid;
  align-items: center;
}

.expertise-band__preview,
.expertise-band__detail {
  grid-area: 1/1;
  min-width: 0;
  transition:
    opacity var(--duration-base) ease,
    transform var(--duration-slow) var(--ease),
    visibility var(--duration-base) ease;
}

.expertise-band__preview {
  display: grid;
  gap: 12px;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.expertise-band__preview-label {
  color: rgba(57, 51, 46, 0.5);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.expertise-band__preview-tools,
.expertise-band__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.expertise-band__preview-tools span,
.expertise-band__tools span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.4);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.expertise-band__detail {
  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
}

.expertise-band__statement strong {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(1rem, 1.28vw, 1.25rem);
  line-height: 1.36;
}

.expertise-band__statement p {
  margin: 0;
  color: rgba(57, 51, 46, 0.66);
  font-size: 11px;
  line-height: 1.55;
}

.expertise-band__link {
  position: relative;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 10px;
  font-weight: 700;
}

.expertise-band__link i {
  font-size: 9px;
  transition: transform 0.2s ease;
}

.expertise-band__link:hover i {
  transform: translateX(3px);
}

.expertise-band__tools {
  margin-top: 15px;
}

.expertise-band__arrow {
  position: relative;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.55);
  color: var(--band-accent);
  pointer-events: none;
  transition:
    transform var(--duration-base) var(--ease),
    background var(--duration-base) ease,
    box-shadow var(--duration-base) ease;
}

.expertise-band.is-active {
  box-shadow: inset 0 18px 42px rgba(255, 255, 255, 0.08);
}

.expertise-band.is-active::before {
  width: 6px;
}

.expertise-band.is-active::after {
  opacity: 0.7;
  transform: translateY(-50%) scale(1);
}

.expertise-band.is-active .expertise-band__icon {
  transform: rotate(-4deg) scale(1.08);
  border-radius: 26px;
  background: rgba(255, 253, 249, 0.72);
  box-shadow: 0 18px 40px rgba(57, 51, 46, 0.08);
}

.expertise-band:nth-child(even).is-active .expertise-band__icon {
  transform: rotate(4deg) scale(1.08);
}

.expertise-band.is-active .expertise-band__title {
  transform: translateX(5px);
}

.expertise-band.is-active .expertise-band__preview {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-18px);
}

.expertise-band.is-active .expertise-band__detail {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.expertise-band.is-active .expertise-band__arrow {
  transform: rotate(45deg);
  background: rgba(255, 253, 249, 0.82);
  box-shadow: 0 10px 26px rgba(57, 51, 46, 0.06);
}

@media (hover: hover) and (pointer: fine) {
  .expertise-band:not(.is-active):hover .expertise-band__title {
    transform: translateX(5px);
  }

  .expertise-band:not(.is-active):hover .expertise-band__icon {
    transform: translateY(-3px);
    background: rgba(255, 253, 249, 0.7);
  }

  .expertise-band:not(.is-active):hover .expertise-band__arrow {
    background: rgba(255, 253, 249, 0.78);
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .expertise-band__inner {
    grid-template-columns:
      32px 70px minmax(210px, 0.9fr) minmax(280px, 1.1fr)
      42px;
    gap: 18px;
    min-height: 208px;
  }

  .expertise-band__icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
  }

  .expertise-band__title h3 {
    font-size: clamp(1.8rem, 3.4vw, 3rem);
  }
}

@media (max-width: 900px) {
  .expertise-band {
    overflow: hidden;
  }

  .expertise-band__inner {
    min-height: 0;
    grid-template-columns: 30px 58px minmax(0, 1fr) 40px;
    gap: 12px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .expertise-band__index {
    margin-top: 7px;
  }

  .expertise-band__icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    font-size: 17px;
  }

  .expertise-band.is-active .expertise-band__icon,
  .expertise-band:nth-child(even).is-active .expertise-band__icon {
    transform: none;
  }

  .expertise-band__title h3 {
    font-size: clamp(1.55rem, 5.6vw, 2.35rem);
  }

  .expertise-band__title p {
    margin-top: 6px;
    font-size: 10px;
  }

  .expertise-band__content {
    grid-column: 2/-1;
    min-height: 0;
    display: block;
    overflow: hidden;
  }

  .expertise-band__preview {
    display: none;
  }

  .expertise-band__detail {
    position: static;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-8px);
    transition:
      max-height var(--duration-slow) var(--ease),
      opacity var(--duration-base) ease,
      transform var(--duration-base) var(--ease),
      margin var(--duration-slow) var(--ease),
      visibility var(--duration-base) ease;
  }

  .expertise-band.is-active .expertise-band__detail {
    max-height: 430px;
    margin-top: 16px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .expertise-band__statement strong {
    font-size: 1rem;
  }

  .expertise-band__statement p {
    font-size: 11px;
  }

  .expertise-band__arrow {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 560px) {
  .expertise-section .section-heading {
    margin-bottom: 30px;
  }

  .expertise-band__inner {
    grid-template-columns: 26px 48px minmax(0, 1fr) 36px;
    gap: 10px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .expertise-band__icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 15px;
  }

  .expertise-band__title h3 {
    font-size: clamp(1.45rem, 7.6vw, 2rem);
  }

  .expertise-band__title p {
    font-size: 9px;
  }

  .expertise-band__content {
    grid-column: 2/-1;
  }

  .expertise-band__tools span {
    font-size: 7px;
    min-height: 28px;
    padding: 6px 9px;
  }
}

/* =========================================================
   18. GOAL DECK
   ========================================================= */
.goal-deck-section {
  position: relative;
  overflow: clip;
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(221, 211, 246, 0.26),
      transparent 26%
    ),
    linear-gradient(180deg, #fffdf9 0%, var(--paper) 100%);
}

.goal-deck-section::before,
.goal-deck-section::after {
  content: "";
  position: absolute;
  width: 320px;
  aspect-ratio: 1;
  border: 1px solid rgba(57, 51, 46, 0.055);
  border-radius: 50%;
  pointer-events: none;
}

.goal-deck-section::before {
  left: -190px;
  top: 24%;
}

.goal-deck-section::after {
  right: -210px;
  bottom: 6%;
}

.goal-deck__header {
  width: min(760px, 100%);
  margin: 0 auto;
  text-align: center;
}

.goal-deck__header .section-eyebrow {
  margin-inline: auto;
}

.goal-deck__header h2 {
  margin: 18px 0;
  font-size: clamp(2.65rem, 4.6vw, 5.15rem);
  line-height: 0.96;
  white-space: pre-line;
}

.goal-deck__header p {
  margin: 0 auto;
  color: var(--muted);
}

.goal-deck__stage {
  position: relative;
  width: min(1180px, 100%);
  height: clamp(390px, 39vw, 540px);
  margin: clamp(42px, 5vw, 72px) auto 0;
  perspective: 1400px;
  isolation: isolate;
}

.goal-card {
  --deck-x: 0%;
  --deck-y: 0px;
  --deck-r: 0deg;
  --deck-delay: 0ms;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: clamp(190px, 20.5vw, 304px);
  aspect-ratio: 0.79;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(57, 51, 46, 0.1);
  border-radius: clamp(22px, 2.2vw, 32px);
  background: #ded7ce;
  box-shadow: 0 26px 64px rgba(57, 51, 46, 0.12);
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transform: translate(-50%, -50%) translateX(var(--deck-x))
    translateY(var(--deck-y)) rotate(var(--deck-r));
  transform-origin: 50% 88%;
  transition:
    transform 520ms var(--ease),
    box-shadow 380ms ease,
    filter 380ms ease,
    opacity 380ms ease;
  will-change: transform;
}

.goal-card:nth-child(1) {
  --deck-x: -126%;
  --deck-y: 30px;
  --deck-r: -10deg;
  --deck-delay: 0ms;
  z-index: 1;
}

.goal-card:nth-child(2) {
  --deck-x: -64%;
  --deck-y: 2px;
  --deck-r: -5deg;
  --deck-delay: 70ms;
  z-index: 2;
}

.goal-card:nth-child(3) {
  --deck-x: 0%;
  --deck-y: -12px;
  --deck-r: 0deg;
  --deck-delay: 140ms;
  z-index: 3;
}

.goal-card:nth-child(4) {
  --deck-x: 64%;
  --deck-y: 2px;
  --deck-r: 5deg;
  --deck-delay: 210ms;
  z-index: 4;
}

.goal-card:nth-child(5) {
  --deck-x: 126%;
  --deck-y: 30px;
  --deck-r: 10deg;
  --deck-delay: 280ms;
  z-index: 5;
}

.goal-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #ded7ce;
  transform: scale(1.015);
  transition:
    transform 760ms var(--ease),
    filter 420ms ease;
}

.goal-card__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(25, 22, 19, 0.08) 0%,
    rgba(25, 22, 19, 0.02) 45%,
    rgba(25, 22, 19, 0.74) 100%
  );
  transition: background 380ms ease;
}

.goal-card__top,
.goal-card__label {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
}

.goal-card__top {
  top: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
}

.goal-card__top i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(8px);
  transition:
    transform 320ms var(--ease),
    background 320ms ease;
}

.goal-card__label {
  bottom: 18px;
}

.goal-card__label small {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.74;
}

.goal-card__label strong {
  display: block;
  font-size: clamp(1rem, 1.55vw, 1.38rem);
  line-height: 1.08;
}

.goal-card:hover,
.goal-card:focus-visible,
.goal-card.is-active {
  z-index: 20;
  transform: translate(-50%, -50%) translateX(var(--deck-x))
    translateY(calc(var(--deck-y) - 24px)) rotate(var(--deck-r)) scale(1.045);
  box-shadow: 0 34px 90px rgba(57, 51, 46, 0.18);
}

.goal-card:hover img,
.goal-card:focus-visible img,
.goal-card.is-active img {
  transform: scale(1.065);
}

.goal-card:hover .goal-card__top i,
.goal-card:focus-visible .goal-card__top i,
.goal-card.is-active .goal-card__top i {
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.2);
}

.goal-card:focus-visible {
  outline: 3px solid rgba(130, 103, 164, 0.34);
  outline-offset: 5px;
}

.goal-deck__stage.is-visible .goal-card {
  animation: goalDeckDeal 760ms var(--ease) both;
  animation-delay: var(--deck-delay);
}

@keyframes goalDeckDeal {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(0) translateY(44px) rotate(0deg)
      scale(0.91);
  }
}

.goal-deck__detail {
  position: relative;
  z-index: 4;
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: 86px minmax(250px, 1fr) minmax(280px, 0.9fr) auto;
  gap: clamp(18px, 2.5vw, 34px);
  align-items: center;
  margin: 4px auto 0;
  padding: 20px 22px;
  border: 1px solid var(--border-default);
  border-radius: 24px;
  background: rgba(255, 253, 249, 0.74);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}

.goal-deck__detail-index {
  display: grid;
  gap: 3px;
  padding-right: 20px;
  border-right: 1px solid var(--border-default);
}

.goal-deck__detail-index .mono {
  color: var(--muted);
  font-size: 8px;
}

.goal-deck__detail-index strong {
  font-size: 29px;
  line-height: 1;
}

.goal-deck__detail-copy h3 {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: clamp(1.18rem, 1.6vw, 1.45rem);
  line-height: 1.12;
}

.goal-deck__detail-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.goal-deck__detail-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.goal-deck__detail-tools span {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 6px 9px;
  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 999px;
  background: rgba(221, 211, 246, 0.42);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}

.goal-deck__cta {
  white-space: nowrap;
  background: var(--sage);
}

@media (max-width: 1100px) {
  .goal-deck__stage {
    height: 460px;
  }

  .goal-card {
    width: clamp(176px, 22vw, 246px);
  }

  .goal-deck__detail {
    grid-template-columns: 72px minmax(0, 1fr) minmax(250px, 0.8fr);
  }

  .goal-deck__cta {
    grid-column: 2/-1;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .goal-deck-section {
    padding-bottom: clamp(72px, 12vw, 96px);
  }

  .goal-deck__header {
    text-align: left;
  }

  .goal-deck__header .section-eyebrow {
    margin-inline: 0;
  }

  .goal-deck__header h2 {
    font-size: clamp(2.35rem, 11vw, 4rem);
  }

  .goal-deck__stage {
    width: calc(100% + (var(--gutter) * 2));
    height: auto;
    display: flex;
    gap: 12px;
    margin-left: calc(var(--gutter) * -1);
    padding: 14px var(--gutter) 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    perspective: none;
  }

  .goal-deck__stage::-webkit-scrollbar {
    display: none;
  }

  .goal-card,
  .goal-card:hover,
  .goal-card:focus-visible,
  .goal-card.is-active {
    position: relative;
    left: auto;
    top: auto;
    z-index: auto;
    flex: 0 0 min(76vw, 310px);
    width: auto;
    transform: none;
    scroll-snap-align: center;
  }

  .goal-deck__stage.is-visible .goal-card {
    animation: none;
  }

  .goal-card.is-active {
    box-shadow: 0 26px 70px rgba(57, 51, 46, 0.14);
  }

  .goal-deck__detail {
    grid-template-columns: 58px 1fr;
    gap: 16px;
    margin-top: 6px;
    padding: 18px;
  }

  .goal-deck__detail-index {
    padding-right: 14px;
  }

  .goal-deck__detail-tools,
  .goal-deck__cta {
    grid-column: 2;
  }

  .goal-deck__cta {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .goal-deck__header p {
    font-size: 0.96rem;
  }

  .goal-card {
    flex-basis: min(82vw, 292px);
  }

  .goal-deck__detail {
    grid-template-columns: 1fr;
  }

  .goal-deck__detail-index {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }

  .goal-deck__detail-tools,
  .goal-deck__cta {
    grid-column: 1;
  }
}

/* =========================================================
   19. WHY CHOOSE US
   ========================================================= */
.why-layout {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 16px;
}

.why-intro {
  min-height: 470px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(30px, 4vw, 54px);
  border: 1px solid rgba(57, 51, 46, 0.08);
  border-radius: 30px;
  background: var(--butter);
}

.why-intro h2 {
  margin: 16px 0 20px;
}

.why-intro p {
  margin-bottom: 0;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.why-card {
  min-height: 226px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 23px;
  border: 1px solid rgba(57, 51, 46, 0.08);
  border-radius: 26px;
  transition: transform 0.3s var(--ease);
}

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

.why-card:nth-child(1) {
  background: var(--lav);
}

.why-card:nth-child(2) {
  background: var(--sage);
}

.why-card:nth-child(3) {
  background: var(--peach);
}

.why-card:nth-child(4) {
  background: var(--blue);
}

.why-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.why-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.54);
  border: 1px solid rgba(57, 51, 46, 0.08);
  color: #8a6cad;
}

.why-card:nth-child(2) .why-icon {
  color: #6f9475;
}

.why-card:nth-child(3) .why-icon {
  color: #b07a70;
}

.why-card:nth-child(4) .why-icon {
  color: #7194a6;
}

.why-card h3 {
  margin: 0 0 8px;
  font-size: 21px;
}

.why-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #5c554f;
}

.why-intro__lead {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 600;
}

/* =========================================================
   20. MID-PAGE CTA
   ========================================================= */
.mid-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 7vw, 108px);
  background:
    radial-gradient(
      circle at 92% 16%,
      rgba(255, 255, 255, 0.45),
      transparent 20%
    ),
    linear-gradient(110deg, var(--lav) 0%, #e8dff0 38%, var(--sage) 100%);
  border-block: 1px solid rgba(57, 51, 46, 0.06);
}

.mid-cta::before {
  content: "";
  position: absolute;
  left: -80px;
  top: 50%;
  width: 240px;
  height: 240px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 34px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.mid-cta__card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(390px, 0.8fr);
  gap: clamp(50px, 7vw, 100px);
  align-items: center;
}

.mid-cta__copy h2 {
  margin: 16px 0 18px;
  font-size: clamp(2.8rem, 4.5vw, 5rem);
}

.mid-cta__copy p {
  margin: 0;
}

.mid-cta__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.52);
  font-size: 10px;
  font-weight: 700;
}

.flow-chip i {
  color: #8b6fac;
}

.flow-chip:nth-of-type(2) i {
  color: #6d9374;
}

.flow-chip:nth-of-type(3) i {
  color: #b27a70;
}

.flow-chip:nth-of-type(4) i {
  color: #7093a5;
}

.flow-chip:nth-of-type(5) i {
  color: #9b8249;
}

.flow-arrow {
  color: rgba(57, 51, 46, 0.32);
  font-size: 10px;
}

.mid-cta__button {
  width: 100%;
  margin-top: 13px;
  justify-content: center;
  background: rgba(255, 253, 249, 0.65);
  border-color: rgba(57, 51, 46, 0.09);
}

/* =========================================================
   21. WORK / PROJECTS
   ========================================================= */
.work-section {
  background: var(--paper);
  overflow: hidden;
}

.projects {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 30px);
  align-items: start;
}

.project {
  display: block;
  min-width: 0;
  transform-style: preserve-3d;
  transition: transform 0.32s var(--ease);
}

.project:nth-child(1) {
  grid-column: 1 / span 8;
}

.project:nth-child(2) {
  grid-column: 9 / span 4;
  margin-top: 90px;
}

.project:nth-child(3) {
  grid-column: 1 / span 4;
  margin-top: 34px;
}

.project:nth-child(4) {
  grid-column: 5 / span 8;
  margin-top: 34px;
}

.project img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 28px;
  background: var(--sage);
  box-shadow: 0 24px 60px rgba(57, 51, 46, 0.1);
  object-position: top right;
  transition:
    transform 0.65s var(--ease),
    filter 0.35s ease;
}

.project:nth-child(1) img {
  aspect-ratio: 1.48;
}

.project:nth-child(2) img {
  aspect-ratio: 0.84;
}

.project:nth-child(3) img {
  aspect-ratio: 0.92;
}

.project:nth-child(4) img {
  aspect-ratio: 1.5;
}

.project:hover img {
  transform: scale(1.018);
  filter: saturate(1.03);
}

.project__meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px 4px 0;
}

.project__meta h3 {
  margin: 0 0 5px;
  font-size: clamp(1.45rem, 2.2vw, 2.45rem);
}

.project__meta p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.project__arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--lav);
  color: #8368a6;
  transition:
    transform 0.28s var(--ease),
    background 0.28s ease;
}

.project:nth-child(2) .project__arrow {
  background: var(--sage);
  color: #6f9274;
}

.project:nth-child(3) .project__arrow {
  background: var(--peach);
  color: #ad786e;
}

.project:nth-child(4) .project__arrow {
  background: var(--blue);
  color: #6e92a4;
}

.project:hover .project__arrow {
  transform: translate(3px, -3px) rotate(-5deg);
}

.work-footer {
  display: flex;
  justify-content: center;
  margin-top: 38px;
}

.work-footer .btn {
  background: var(--butter);
  border-color: rgba(57, 51, 46, 0.08);
}

/* =========================================================
   22. PROOF / METRICS
   ========================================================= */
.proof-section {
  background:
    radial-gradient(
      circle at 92% 16%,
      rgba(255, 255, 255, 0.45),
      transparent 20%
    ),
    linear-gradient(110deg, var(--peach) 0%, #f0ddd2 42%, var(--sage) 100%);
}

.proof-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(50px, 7vw, 100px);
  align-items: start;
}

.proof-copy h2 {
  margin: 16px 0 24px;
}

.proof-copy p {
  margin-bottom: 15px;
  color: var(--muted);
}

.proof-copy strong {
  color: var(--ink);
}

.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.metric {
  min-height: 206px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 249, 0.18);
}

.metric__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--paper);
  border: 1px solid rgba(57, 51, 46, 0.08);
  color: #8a6cad;
  font-size: 13px;
}

.metric:nth-child(2) .metric__icon {
  color: #6f9475;
}

.metric:nth-child(3) .metric__icon {
  color: #b07a70;
}

.metric:nth-child(4) .metric__icon {
  color: #7194a6;
}

.metric__value {
  font-family: var(--font-script);
  font-size: clamp(2.7rem, 4.7vw, 5.2rem);
  line-height: 0.9;
  font-weight: 600;
}

.metric p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

/* =========================================================
   23. PRICING
   ========================================================= */
.pricing-heading-copy__intro {
  margin: 0;
  color: var(--muted);
}

.pricing-heading-copy__strong {
  margin: 8px 0 0;
}

.pricing-section {
  border-block: 1px solid rgba(57, 51, 46, 0.07);
  background: linear-gradient(180deg, var(--bg), #eee8df);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.price-card {
  position: relative;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(57, 51, 46, 0.1);
  border-radius: 27px;
  transition:
    transform 0.32s var(--ease),
    box-shadow 0.32s ease;
}

.price-card:nth-child(1) {
  background: var(--white);
}

.price-card:nth-child(2) {
  background: var(--lav);
}

.price-card:nth-child(3) {
  background: var(--sage);
}

.price-card:nth-child(4) {
  background: var(--peach);
}

.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.price-card--featured {
  transform: translateY(-12px);
  box-shadow: 0 24px 60px rgba(57, 51, 46, 0.1);
}

.price-card--featured:hover {
  transform: translateY(-17px);
}

.price-card__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border: 1px solid rgba(57, 51, 46, 0.07);
  border-radius: 16px;
  background: rgba(255, 253, 249, 0.58);
  color: #8a6cad;
  font-size: 16px;
}

.price-card:nth-child(1) .price-card__icon {
  color: #6e9575;
  background: var(--sage);
}

.price-card:nth-child(2) .price-card__icon {
  color: #8468aa;
  background: rgba(255, 253, 249, 0.48);
}

.price-card:nth-child(3) .price-card__icon {
  color: #aa796f;
  background: var(--peach);
}

.price-card:nth-child(4) .price-card__icon {
  color: #7193a4;
  background: var(--blue);
}

.price-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 7px 9px;
  border-radius: 999px;
  background: var(--butter);
  color: #806b45;
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
}

.price-card h3 {
  margin: 0 0 8px;
  font-size: 23px;
}

.price-desc {
  margin: 0;
  min-height: 62px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.price {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 17px;
}

.price__currency {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
}

.price__value {
  font-family: var(--font-script);
  font-size: clamp(3.25rem, 4.1vw, 4.55rem);
  line-height: 0.9;
  font-weight: 600;
}

.price__suffix {
  align-self: end;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 9px;
}

.price__custom {
  margin-top: 20px;
  font-family: var(--font-script);
  font-size: clamp(2.25rem, 3.3vw, 3.6rem);
  line-height: 0.95;
  font-weight: 600;
}

.price-divider {
  height: 1px;
  margin: 21px 0 18px;
  background: rgba(57, 51, 46, 0.12);
}

.price-features {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 34px;
  padding: 0;
}

.price-features li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 7px;
  align-items: start;
  font-size: 11px;
  line-height: 1.45;
}

.price-features i {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.55);
  color: #6f9475;
  font-size: 8px;
}

.price-card .btn {
  width: 100%;
  margin-top: auto;
}

.pricing-note {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-top: 19px;
  margin-top: 23px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.pricing-note strong {
  color: var(--ink);
}

/* =========================================================
   24. TESTIMONIALS
   ========================================================= */
.testimonials-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(255, 255, 255, 0.46),
      transparent 19%
    ),
    radial-gradient(
      circle at 9% 90%,
      rgba(209, 226, 204, 0.25),
      transparent 25%
    ),
    linear-gradient(128deg, #d9caf4 0%, #e8ddf2 50%, #ead7d7 100%);
  border-block: 1px solid rgba(57, 51, 46, 0.06);
}

.testimonials-section::before {
  content: "";
  position: absolute;
  right: -110px;
  top: -125px;
  width: 390px;
  aspect-ratio: 1;
  border: 52px solid rgba(255, 255, 255, 0.27);
  border-radius: 50%;
  pointer-events: none;
}

.testimonial-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(330px, 0.68fr);
  gap: 16px;
}

.testimonial-feature {
  padding: clamp(28px, 3.5vw, 48px);
  border: 1px solid rgba(57, 51, 46, 0.08);
  border-radius: 30px;
  background: rgba(255, 253, 249, 0.92);
  box-shadow: 0 24px 60px rgba(77, 59, 83, 0.07);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
}

.testimonial-feature__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.testimonial-feature__signal {
  display: flex;
  align-items: center;
  gap: 10px;
}

.testimonial-feature__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--lav);
  color: #7b609d;
  border: 1px solid rgba(57, 51, 46, 0.07);
}

.testimonial-feature__label {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
}

.testimonial-stars {
  display: flex;
  gap: 3px;
  margin-top: 4px;
  color: #9d7d45;
  font-size: 8px;
}

.testimonial-counter {
  color: var(--muted);
  white-space: nowrap;
}

.testimonial-progress {
  height: 2px;
  overflow: hidden;
  margin-top: 20px;
  border-radius: 999px;
  background: rgba(57, 51, 46, 0.08);
}

.testimonial-progress span {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9677bf, #7fa881);
  transition: width var(--duration-base) var(--ease);
}

.testimonial-slides {
  position: relative;
  min-height: 350px;
}

.testimonial-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.28s ease,
    transform 0.34s var(--ease);
}

.testimonial-slide.is-active {
  opacity: 1;
  transform: none;
}

.testimonial-slide[hidden] {
  display: none !important;
}

.testimonial-quote-stage {
  position: relative;
  display: grid;
  align-items: center;
}

.testimonial-quote {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 2rem);
  line-height: 1.12;
  font-weight: 500;
  text-wrap: pretty;
  transition:
    opacity 0.24s ease,
    transform 0.28s var(--ease);
}

.testimonial-feature__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(57, 51, 46, 0.08);
}

.testimonial-feature__bottom--controls {
  justify-content: flex-end;
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.testimonial-person img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(205, 185, 235, 0.58);
}

.testimonial-person strong {
  display: block;
  font-size: 12px;
  line-height: 1.2;
}

.testimonial-person span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.testimonial-controls {
  display: flex;
  gap: 8px;
}

.testimonial-control {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 50%;
  background: var(--sage);
  color: #66836b;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    background 0.25s ease;
}

.testimonial-control:nth-child(2) {
  background: var(--peach);
  color: #9b6b62;
}

.testimonial-control:hover {
  transform: translateY(-2px) rotate(-2deg);
  background: var(--lav);
  color: #7b609d;
}

.testimonial-side {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
}

.testimonial-next-card {
  position: relative;
  min-height: 310px;
  padding: clamp(24px, 2.7vw, 34px);
  border: 1px solid rgba(57, 51, 46, 0.08);
  border-radius: 28px;
  background: rgba(255, 253, 249, 0.38);
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  display: grid;
  grid-template-rows: auto 1fr auto;
  transition:
    transform 0.3s var(--ease),
    background 0.3s ease;
}

.testimonial-next-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -95px;
  width: 210px;
  aspect-ratio: 1;
  border: 28px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  pointer-events: none;
}

.testimonial-next-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 253, 249, 0.53);
}

.testimonial-next__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.testimonial-next__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(216, 199, 245, 0.8);
  color: #765d96;
}

.testimonial-next__quote {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin: 16px 0;
  font-size: clamp(1.2rem, 1.65vw, 1.6rem);
  line-height: 1.25;
  text-wrap: pretty;
}

.testimonial-next__person {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--muted);
  font-size: 9px;
}

.testimonial-next__person strong {
  display: block;
  color: var(--ink);
  font-size: 11px;
  margin-bottom: 3px;
}

.testimonial-proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.testimonial-proof-card {
  min-height: 156px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(57, 51, 46, 0.07);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  overflow: hidden;
}

.testimonial-proof-card:nth-child(1) {
  background: rgba(209, 226, 204, 0.92);
}

.testimonial-proof-card:nth-child(2) {
  background: rgba(244, 210, 191, 0.92);
}

.testimonial-proof-card__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 253, 249, 0.56);
  border: 1px solid rgba(57, 51, 46, 0.06);
}

.testimonial-proof-card:nth-child(1) .testimonial-proof-card__icon {
  color: #65836b;
}

.testimonial-proof-card:nth-child(2) .testimonial-proof-card__icon {
  color: #9e6b60;
}

.testimonial-proof-card strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-script);
  font-size: clamp(1.45rem, 2vw, 2.1rem);
  line-height: 0.98;
  font-weight: 600;
}

.testimonial-proof-card p {
  margin: 0;
  color: rgba(57, 51, 46, 0.7);
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .testimonial-layout {
    grid-template-columns: 1fr;
  }

  .testimonial-side {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: auto;
  }

  .testimonial-proof-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-feature {
    min-height: 500px;
  }

  .testimonial-quote-stage {
    min-height: 300px;
  }
}

@media (max-width: 620px) {
  .testimonial-feature {
    min-height: 480px;
    padding: 22px 20px;
    border-radius: 25px;
  }

  .testimonial-feature__signal {
    align-items: flex-start;
  }

  .testimonial-feature__icon {
    width: 38px;
    height: 38px;
  }

  .testimonial-slides {
    min-height: 350px;
  }

  .testimonial-quote-stage {
    min-height: 285px;
  }

  .testimonial-quote {
    max-width: none;
    font-size: clamp(1.38rem, 6vw, 1rem);
    line-height: 1.18;
  }

  .testimonial-feature__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .testimonial-controls {
    align-self: flex-end;
  }

  .testimonial-side {
    grid-template-columns: 1fr;
  }

  .testimonial-next-card {
    min-height: 250px;
  }

  .testimonial-next__quote {
    font-size: clamp(1.15rem, 5.2vw, 1.45rem);
  }

  .testimonial-proof-grid {
    grid-template-columns: 1fr 1fr;
  }

  .testimonial-proof-card {
    min-height: 145px;
    padding: 15px;
  }

  .testimonial-proof-card strong {
    font-size: clamp(1.25rem, 6vw, 1.7rem);
  }
}

/* =========================================================
   25. JOURNAL
   ========================================================= */
.journal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
  gap: 16px;
}

.journal-feature,
.journal-card {
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: transparent;
  transition: transform 0.3s var(--ease);
  box-shadow: 0 24px 60px rgba(57, 51, 46, 0.1);
}

.journal-feature:hover,
.journal-card:hover {
  transform: translateY(-4px);
}

.journal-feature img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.journal-feature:hover img,
.journal-card:hover img {
  transform: scale(1.025);
}

.journal-feature__body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding: 24px;
}

.journal-feature h3 {
  margin: 11px 0 8px;
  font-size: clamp(1.8rem, 2.8vw, 3rem);
}

.journal-feature p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.journal-arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lav);
  color: #8469a7;
}

.journal-side {
  display: grid;
  gap: 16px;
}

.journal-card {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 247px;
}

.journal-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.journal-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.journal-card h3 {
  margin: 10px 0 8px;
  font-size: 19px;
}

.journal-card p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.journal-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
}

.journal-footer {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

/* =========================================================
   26. FAQ
   ========================================================= */
.faq-section {
  border-block: 1px solid rgba(57, 51, 46, 0.07);
  background:
    radial-gradient(circle at 12% 18%, rgb(95 65 177 / 34%), transparent 28%),
    radial-gradient(circle at 88% 82%, rgb(184 215 174 / 34%), transparent 28%),
    var(--bg);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(50px, 7vw, 104px);
  align-items: start;
}

.faq-copy {
  position: sticky;
  top: 116px;
}

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

.faq-copy p {
  color: var(--muted);
}

.faq-mini-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding: 17px;
  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 20px;
  background: rgba(255, 253, 249, 0.58);
}

.faq-mini-cta__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 14px;
  background: var(--lav);
  color: #8367a7;
  font-size: 14px;
}

.faq-mini-cta strong {
  display: block;
  font-size: 12px;
}

.faq-mini-cta div > span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.faq-mini-cta__arrow {
  margin-left: auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage);
  color: #66836b;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-category {
  display: grid;
  gap: 10px;
}

.faq-category + .faq-category {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.faq-category__head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0 4px 6px;
}

.faq-category__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--lav);
  color: #8066a3;
  font-size: 12px;
}

.faq-category:nth-child(2n) .faq-category__icon {
  background: var(--sage);
  color: #66836b;
}

.faq-category:nth-child(3n) .faq-category__icon {
  background: var(--peach);
  color: #9b6b62;
}

.faq-category__head h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.15;
}

.faq-category__count {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
}

.faq-item {
  overflow: clip;
  border: 1px solid rgba(57, 51, 46, 0.1);
  border-radius: 22px;
  background: rgba(255, 253, 249, 0.38);
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.4s var(--ease),
    transform 0.35s var(--ease);
}

.faq-item:hover {
  transform: translateY(-2px);
  border-color: rgba(57, 51, 46, 0.16);
  background: rgba(255, 253, 249, 0.62);
}

.faq-item[open],
.faq-item.is-animating-open {
  background: rgba(255, 253, 249, 0.9);
  border-color: rgba(130, 103, 164, 0.22);
  box-shadow: 0 18px 46px rgba(57, 51, 46, 0.065);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
  min-height: 88px;
  padding: 10px 14px 10px 18px;
  user-select: none;
}

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

.faq-item summary:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 3px rgba(126, 101, 163, 0.22);
  border-radius: 20px;
}

.faq-num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  transition:
    color 0.28s ease,
    transform 0.3s var(--ease);
}

.faq-question {
  font-size: clamp(1.06rem, 1.45vw, 1.38rem);
  line-height: 1.32;
  font-weight: 650;
  transition:
    color 0.28s ease,
    transform 0.35s var(--ease);
}

.faq-plus {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(57, 51, 46, 0.12);
  border-radius: 50%;
  color: #8065a3;
  background: rgba(255, 253, 249, 0.66);
  transition:
    transform 0.45s var(--ease),
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.faq-plus i {
  transition: transform 0.45s var(--ease);
}

.faq-item[open] .faq-num,
.faq-item.is-animating-open .faq-num {
  color: #8065a3;
  transform: translateX(2px);
}

.faq-item[open] .faq-question,
.faq-item.is-animating-open .faq-question {
  color: #4f4457;
  transform: translateX(3px);
}

.faq-item[open] .faq-plus,
.faq-item.is-animating-open .faq-plus {
  transform: rotate(45deg);
  background: var(--sage);
  border-color: rgba(109, 145, 114, 0.18);
  color: #6d9172;
}

.faq-answer {
  overflow: hidden;
  padding: 0 72px 26px;
  color: var(--muted);
  will-change: height, opacity;
}

.faq-answer p {
  margin: 0;
  font-size: 13px;
  line-height: 1.72;
}

.faq-answer p + p {
  margin-top: 10px;
}

.faq-answer ul {
  margin: 12px 0 0;
  padding-left: 19px;
  color: var(--muted);
}

.faq-answer li {
  margin: 5px 0;
  font-size: 12px;
  line-height: 1.55;
}

/* =========================================================
   27. FINAL CTA
   ========================================================= */
.final-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(82px, 8vw, 130px);
  background:
    radial-gradient(
      circle at 84% 18%,
      rgba(255, 255, 255, 0.44),
      transparent 20%
    ),
    linear-gradient(115deg, #eadff8 0%, #f0ddd6 52%, #eee4bd 100%);
  border-top: 1px solid rgba(57, 51, 46, 0.06);
}

.final-cta::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -170px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 62px solid rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.final-cta__card {
  position: relative;
  z-index: 2;
}

.final-cta__content {
  max-width: 1180px;
}

.final-cta h2 {
  margin: 16px 0 20px;
  font-size: clamp(3rem, 5.3vw, 6rem);
}

.final-cta p {
  margin: 0 0 7px;
}

.final-cta .btn {
  margin-top: 22px;
  background: var(--sage-2);
  border-color: rgba(91, 124, 94, 0.12);
}

/* =========================================================
   28. RESPONSIVE — HOME PAGE
   ========================================================= */
@media (max-width: 1240px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(440px, 0.9fr);
    gap: 44px;
  }

  .hero-title {
    font-size: clamp(3.6rem, 6.4vw, 5.7rem);
  }

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

  .price-card--featured {
    transform: none;
  }

  .price-card--featured:hover {
    transform: translateY(-6px);
  }
}

@media (max-width: 1020px) {
  .hero {
    height: auto;
    max-height: none;
    min-height: 0;
    padding: 145px 30px 84px;
  }

  .hero-layout {
    height: auto;
    grid-template-columns: 1fr;
    gap: 54px;
    padding: 0;
  }

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

  .hero-visual {
    min-height: 620px;
    width: min(100%, 820px);
    margin-inline: auto;
    overflow: hidden;
  }

  .approach-layout,
  .proof-layout,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .approach-copy,
  .faq-copy {
    position: relative;
    top: auto;
    padding-bottom: 0;
  }

  .approach-stack {
    margin-top: 44px;
  }

  .approach-card:nth-child(1) {
    top: 86px;
  }

  .approach-card:nth-child(2) {
    top: 102px;
  }

  .approach-card:nth-child(3) {
    top: 118px;
  }

  .approach-card:nth-child(4) {
    top: 134px;
  }

  .why-layout {
    grid-template-columns: 1fr;
  }

  .mid-cta__card {
    grid-template-columns: 1fr;
  }

  .mid-cta__flow {
    justify-content: flex-start;
    max-width: 760px;
  }

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

  .project:nth-child(n) {
    grid-column: auto;
    margin-top: 0;
  }

  .project:nth-child(1) img,
  .project:nth-child(4) img {
    aspect-ratio: 1.25;
  }

  .project:nth-child(2) img,
  .project:nth-child(3) img {
    aspect-ratio: 1;
  }

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

  .journal-side {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .hero {
    padding: 134px 0 86px;
  }

  .hero > .shell {
    padding-left: 30px;
    padding-right: 30px;
  }

  .hero-title {
    font-size: clamp(3.1rem, 13.5vw, 5rem);
  }

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

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

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

  .hero-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero-visual {
    min-height: 690px;
    width: 100%;
    margin-inline: auto;
    padding-inline: 8px;
  }

  .hero-photo {
    left: 8px;
    width: 66%;
    height: 57%;
  }

  .hero-service-card {
    right: 8px;
    width: 47%;
    min-height: 42%;
    padding: 18px;
  }

  .hero-service-card h2 {
    font-size: 1.7rem;
  }

  .hero-service-card li {
    font-size: 9px;
  }

  .hero-metric-card {
    right: 8px;
    width: 47%;
    bottom: 11%;
  }

  .approach-stack {
    padding-left: 34px;
    padding-bottom: 80px;
  }

  .approach-stack::before {
    left: 11px;
  }

  .approach-card::before {
    left: -30px;
  }

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

  .projects {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .project:nth-child(n) {
    grid-column: 1;
  }

  .project:nth-child(n) img {
    aspect-ratio: 1.25;
  }

  .project:nth-child(2) img,
  .project:nth-child(3) img {
    aspect-ratio: 1.05;
  }

  .project__meta {
    padding-top: 14px;
  }

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

  .pricing-grid {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 0 18px 18px;
    margin-inline: -18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .pricing-grid::-webkit-scrollbar {
    display: none;
  }

  .price-card {
    flex: 0 0 min(84vw, 390px);
    min-height: 535px;
    scroll-snap-align: center;
  }

  .pricing-note {
    display: block;
  }

  .pricing-note span {
    display: block;
    margin-top: 6px;
  }

  .journal-side {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .hero > .shell {
    padding-left: 26px;
    padding-right: 26px;
  }

  .hero-eyebrows {
    margin-bottom: 20px;
  }

  .hero-pill {
    font-size: 8px;
  }

  .hero-title {
    font-size: clamp(2.95rem, 15.4vw, 4.45rem);
  }

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

  .hero-photo {
    left: 6px;
    width: 70%;
    height: 54%;
    border-radius: 23px;
  }

  .hero-photo__label {
    left: 10px;
    right: 10px;
    bottom: 10px;
    justify-content: center;
    font-size: 8px;
  }

  .hero-service-card {
    right: 6px;
    top: 7%;
    width: 49%;
    min-height: 40%;
    border-radius: 22px;
  }

  .hero-service-card small {
    font-size: 8px;
  }

  .hero-service-card ul {
    margin-top: 16px;
    gap: 7px;
  }

  .hero-service-card li {
    grid-template-columns: 13px 1fr;
    gap: 5px;
  }

  .hero-service-card li i {
    font-size: 9px;
  }

  .hero-metric-card {
    right: 6px;
    width: 49%;
    min-height: 98px;
    bottom: 10%;
    padding: 14px;
  }

  .hero-bars span {
    width: 7px;
  }

  .approach-stack {
    padding-left: 0;
    padding-bottom: 0;
  }

  .approach-stack::before,
  .approach-card::before {
    display: none;
  }

  .approach-card,
  .approach-card:nth-child(n) {
    position: relative;
    top: auto;
    min-height: 250px;
    margin-bottom: 14px;
  }

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

  .flow-arrow {
    display: none;
  }

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

  .metric {
    min-height: 165px;
  }

  .journal-feature img {
    height: 320px;
  }

  .journal-feature__body {
    grid-template-columns: 1fr;
  }

  .journal-arrow {
    display: none;
  }

  .journal-card {
    grid-template-columns: 1fr;
  }

  .journal-card img {
    height: 220px;
  }

  .faq-item summary {
    grid-template-columns: 30px 1fr 38px;
    min-height: 78px;
  }

  .faq-answer {
    padding-left: 42px;
    padding-right: 0;
  }
}

/* =========================================================
   29. REDUCED MOTION — HOME PAGE
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-visual [data-depth],
  .project[data-tilt],
  .goal-card,
  .expertise-band,
  .approach-card,
  .testimonial-slide,
  .testimonial-next-card {
    transform: none !important;
  }
}

/* =========================================================
   SALTY THEME — AGENCY PAGE 
   ========================================================= */

/* =========================================================
   30. AGENCY — HEADER OVER IMAGE HERO
   ========================================================= */

/*
 * :has() gives us the correct initial state before footer JS runs.
 * JS then keeps the light header active while it overlaps the hero.
 */
body:has(.agency-cover-hero) .site-header:not(.is-scrolled),
body.agency-header-over-hero .site-header {
  color: #fffaf5;
}

body.agency-header-over-hero .site-header.is-scrolled {
  background: rgba(31, 27, 30, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  backdrop-filter: blur(15px);
}

body:has(.agency-cover-hero) .site-header:not(.is-scrolled) .nav-link,
body:has(.agency-cover-hero) .site-header:not(.is-scrolled) .nav-trigger,
body.agency-header-over-hero .site-header .nav-link,
body.agency-header-over-hero .site-header .nav-trigger,
body.agency-header-over-hero .site-header .brand {
  color: #fffaf5;
}

body:has(.agency-cover-hero) .site-header:not(.is-scrolled) .nav-link:hover,
body:has(.agency-cover-hero) .site-header:not(.is-scrolled) .nav-link.is-active,
body:has(.agency-cover-hero)
  .site-header:not(.is-scrolled)
  .nav-link[aria-current="page"],
body:has(.agency-cover-hero) .site-header:not(.is-scrolled) .nav-trigger:hover,
body:has(.agency-cover-hero)
  .site-header:not(.is-scrolled)
  .nav-item.is-open
  > .nav-trigger,
body.agency-header-over-hero .site-header .nav-link:hover,
body.agency-header-over-hero .site-header .nav-link.is-active,
body.agency-header-over-hero .site-header .nav-link[aria-current="page"],
body.agency-header-over-hero .site-header .nav-trigger:hover,
body.agency-header-over-hero .site-header .nav-item.is-open > .nav-trigger {
  background: rgba(255, 255, 255, 0.1);
}

body:has(.agency-cover-hero) .site-header:not(.is-scrolled) .nav-trigger i,
body.agency-header-over-hero .site-header .nav-trigger i {
  color: #e8dcff;
}

body:has(.agency-cover-hero) .site-header:not(.is-scrolled) .language-switch,
body.agency-header-over-hero .site-header .language-switch {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(24, 21, 23, 0.2);
}

body:has(.agency-cover-hero)
  .site-header:not(.is-scrolled)
  .language-switch__globe,
body.agency-header-over-hero .site-header .language-switch__globe {
  color: #eee4ff;
}

body:has(.agency-cover-hero) .site-header:not(.is-scrolled) .language-switch a,
body.agency-header-over-hero .site-header .language-switch a {
  color: rgba(255, 250, 245, 0.82);
}

body:has(.agency-cover-hero)
  .site-header:not(.is-scrolled)
  .language-switch
  a.is-active,
body:has(.agency-cover-hero)
  .site-header:not(.is-scrolled)
  .language-switch
  a[aria-current="page"],
body.agency-header-over-hero .site-header .language-switch a.is-active,
body.agency-header-over-hero
  .site-header
  .language-switch
  a[aria-current="page"] {
  background: rgba(221, 211, 246, 0.94);
  color: var(--ink);
}

body:has(.agency-cover-hero) .site-header:not(.is-scrolled) .nav-cta,
body.agency-header-over-hero .site-header .nav-cta {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 253, 249, 0.92);
  color: var(--ink);
}

body:has(.agency-cover-hero) .site-header:not(.is-scrolled) .mobile-toggle,
body.agency-header-over-hero .site-header .mobile-toggle {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(24, 21, 23, 0.24);
  color: #fffaf5;
}

/*
 * Mega menu always remains a light Salty surface.
 */
body.agency-header-over-hero .site-header .mega--expertise,
body:has(.agency-cover-hero) .site-header:not(.is-scrolled) .mega--expertise {
  color: var(--ink);
}

/* =========================================================
   31. AGENCY — PAGE FOUNDATION
   ========================================================= */

.agency-reference-page {
  overflow: clip;
  background: var(--paper);
}

/* =========================================================
   32. AGENCY — IMAGE HERO
   ========================================================= */

.agency-cover-hero {
  position: relative;
  isolation: isolate;

  height: 75svh;
  min-height: 440px;
  max-height: 690px;

  overflow: hidden;

  color: #fffaf5;
  background: #302b32;
}

.agency-cover-hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.agency-cover-hero__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 42%;

  filter: saturate(0.92) contrast(1.02);

  transform: scale(1.01);
}

.agency-cover-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  background: linear-gradient(
    180deg,
    rgba(26, 23, 25, 0.72) 0%,
    rgba(26, 23, 25, 0.33) 24%,
    rgba(26, 23, 25, 0.12) 48%,
    rgba(26, 23, 25, 0.52) 100%
  );
}

.agency-cover-hero::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background: linear-gradient(
    90deg,
    rgba(25, 22, 24, 0.7) 0%,
    rgba(25, 22, 24, 0.46) 37%,
    rgba(25, 22, 24, 0.08) 70%,
    transparent 100%
  );
}

.agency-cover-hero__inner {
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding-top: calc(var(--header-h) + 40px);

  padding-bottom: clamp(28px, 4.2vw, 52px);
}

.agency-cover-hero__copy {
  width: min(760px, 67%);
}

.agency-cover-hero__eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  min-height: 30px;

  padding: 6px 10px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;

  background: rgba(25, 22, 24, 0.24);

  backdrop-filter: blur(10px);

  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
}

.agency-cover-hero__eyebrow i {
  color: #d8c8f4;
}

.agency-cover-hero__title {
  margin: 16px 0 15px;

  color: #fffaf5;

  font-size: clamp(3rem, 5vw, 5.8rem);

  line-height: 0.92;
}

.agency-cover-hero__lead {
  max-width: 690px;

  margin: 0;

  color: rgba(255, 250, 245, 0.88);

  font-size: clamp(1.02rem, 1.3vw, 1.24rem);

  line-height: 1.5;
  font-weight: 550;
}

.agency-cover-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 16px;

  margin-top: 21px;
}

.agency-cover-hero__primary {
  min-height: 45px;

  background: rgba(255, 253, 249, 0.96);
  color: var(--ink);

  border-color: rgba(255, 255, 255, 0.34);
}

.agency-cover-hero__secondary {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  padding: 10px 0 8px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.4);

  color: #fffaf5;

  font-size: 10px;
  font-weight: 700;
}

.agency-cover-hero__secondary i {
  font-size: 9px;

  transition: transform 0.25s var(--ease);
}

.agency-cover-hero__secondary:hover i {
  transform: translate(3px, -3px);
}

.agency-cover-hero__meta {
  display: flex;
  flex-wrap: wrap;

  gap: 10px 24px;

  margin-top: 24px;
  padding-top: 17px;

  border-top: 1px solid rgba(255, 255, 255, 0.18);

  color: rgba(255, 250, 245, 0.68);
}

.agency-cover-hero__meta span {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 600;
  text-transform: uppercase;
}

.agency-cover-hero__meta i {
  color: #dacbf2;
}

/* =========================================================
   33. AGENCY — ABOUT / IMAGE TRIPTYCH
   ========================================================= */

.agency-about {
  background: linear-gradient(180deg, var(--paper), #f5efe7);

  border-bottom: 1px solid var(--border-soft);
}

.agency-about__gallery {
  min-height: 470px;

  display: grid;

  grid-template-columns: repeat(12, minmax(0, 1fr));

  gap: clamp(12px, 1.8vw, 26px);

  align-items: start;

  margin-bottom: clamp(68px, 8vw, 112px);
}

.agency-about__image {
  margin: 0;

  overflow: hidden;

  border-radius: 26px;

  background: #e7e0d8;

  box-shadow: var(--shadow-sm);
}

.agency-about__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.65s var(--ease),
    filter 0.35s ease;
}

.agency-about__image:hover img {
  transform: scale(1.018);
  filter: saturate(1.04);
}

.agency-about__image--1 {
  grid-column: 1 / span 6;

  height: 440px;
}

.agency-about__image--2 {
  grid-column: 7 / span 3;

  height: 340px;

  margin-top: 54px;
}

.agency-about__image--3 {
  grid-column: 10 / span 3;

  height: 390px;

  margin-top: 12px;
}

.agency-about__copy {
  display: grid;

  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);

  gap: clamp(50px, 8vw, 124px);

  align-items: start;
}

.agency-about__heading h2 {
  margin: 18px 0 0;
}

.agency-about__text {
  max-width: 760px;
}

.agency-about__lead {
  color: var(--ink);

  font-size: clamp(1.14rem, 1.5vw, 1.42rem);

  line-height: 1.54;
  font-weight: 650;
}

.agency-about__text > p:not(.agency-about__lead) {
  color: var(--muted);
}

.agency-about__principle {
  display: grid;

  grid-template-columns: 50px minmax(0, 1fr);

  gap: 16px;

  margin-top: 30px;
  padding-top: 23px;

  border-top: 1px solid var(--line);
}

.agency-about__principle > span {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 16px;

  background: var(--lav);
  color: #8065a3;

  font-size: 14px;
}

.agency-about__principle strong {
  display: block;

  margin-bottom: 7px;

  font-family: var(--font-script);

  font-size: clamp(1.7rem, 2.4vw, 2.6rem);

  line-height: 1;
}

.agency-about__principle p {
  margin: 0;

  color: var(--muted);

  font-size: 11px;
}

.agency-about__origin {
  display: grid;

  grid-template-columns: 30px minmax(0, 1fr);

  gap: 12px;

  margin-top: 22px;
  padding-top: 18px;

  border-top: 1px solid var(--line);

  color: var(--muted);
}

.agency-about__origin > i {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--blue);
  color: #6f91a1;

  font-size: 9px;
}

.agency-about__origin p {
  margin: 0;

  font-size: 10px;
  line-height: 1.55;
}

.agency-about__origin strong {
  color: var(--ink);
}

/* =========================================================
   34. AGENCY — PRINCIPLES
   ========================================================= */

.agency-principles {
  background: linear-gradient(115deg, #efe5bd, #f2e9ca);

  border-bottom: 1px solid var(--border-soft);
}

.agency-principles__grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  border-top: 1px solid rgba(57, 51, 46, 0.16);

  border-bottom: 1px solid rgba(57, 51, 46, 0.16);
}

.agency-principle {
  min-height: 340px;

  display: flex;
  flex-direction: column;

  padding: clamp(24px, 3vw, 38px);

  border-right: 1px solid rgba(57, 51, 46, 0.16);

  transition:
    background 0.3s ease,
    padding 0.3s var(--ease);
}

.agency-principle:nth-child(1) {
  background: var(--lav);
}

.agency-principle:nth-child(2) {
  background: var(--sage);
}

.agency-principle:nth-child(3) {
  background: var(--blue);
}

.agency-principle:nth-child(4) {
  background: var(--peach);
}

.agency-principle:last-child {
  border-right: 0;
}

.agency-principle:hover {
  background: rgba(255, 253, 249, 0.24);

  padding-top: clamp(20px, 2.5vw, 32px);
}

.agency-principle__top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;
}

.agency-principle__icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(57, 51, 46, 0.08);

  border-radius: 15px;

  background: rgba(255, 253, 249, 0.48);

  color: #8166a4;

  font-size: 14px;

  transition: transform 0.3s var(--ease);
}

.agency-principle:nth-child(2) .agency-principle__icon {
  color: #6e9274;
}

.agency-principle:nth-child(3) .agency-principle__icon {
  color: #aa756b;
}

.agency-principle:nth-child(4) .agency-principle__icon {
  color: #6e90a1;
}

.agency-principle:hover .agency-principle__icon {
  transform: rotate(-4deg) translateY(-2px);
}

.agency-principle h3 {
  margin: auto 0 10px;

  font-size: clamp(1.8rem, 2.55vw, 2.8rem);
}

.agency-principle p {
  margin: 0;

  color: rgba(57, 51, 46, 0.68);

  font-size: 11px;
  line-height: 1.58;
}

/* =========================================================
   35. AGENCY — SANDY / HUMAN FEATURE
   ========================================================= */

.agency-founder-reference {
  background:
    radial-gradient(
      circle at 90% 12%,
      rgba(221, 211, 246, 0.25),
      transparent 22%
    ),
    var(--paper);

  border-bottom: 1px solid var(--border-soft);
}

.agency-founder-reference__layout {
  display: grid;

  grid-template-columns: minmax(0, 1.03fr) minmax(390px, 0.97fr);

  gap: clamp(54px, 8vw, 120px);

  align-items: center;
}

.agency-founder-reference__copy h2 {
  margin: 18px 0 20px;
}

.agency-founder-reference__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  gap: 7px 12px;

  margin-bottom: 19px;
  padding-bottom: 18px;

  border-bottom: 1px solid var(--line);
}

.agency-founder-reference__identity strong {
  font-size: 12px;
}

.agency-founder-reference__identity span {
  color: var(--muted);

  font-size: 9px;
}

.agency-founder-reference__lead {
  color: var(--ink);

  font-size: clamp(1.08rem, 1.42vw, 1.3rem);

  font-weight: 650;
}

.agency-founder-reference__copy > p:not(.agency-founder-reference__lead) {
  color: var(--muted);
}

.agency-founder-reference blockquote {
  display: grid;

  grid-template-columns: 40px minmax(0, 1fr);

  gap: 13px;

  margin: 26px 0 0;

  padding-top: 22px;

  border-top: 1px solid var(--line);
}

.agency-founder-reference blockquote i {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: var(--lav);
  color: #8065a3;

  font-size: 11px;
}

.agency-founder-reference blockquote p {
  margin: 0;

  font-family: var(--font-script);

  font-size: clamp(1.65rem, 2.3vw, 2.45rem);

  line-height: 1.05;
}

.agency-founder-reference__facts {
  display: flex;
  flex-wrap: wrap;

  gap: 8px 16px;

  margin-top: 24px;
  padding-top: 19px;

  border-top: 1px solid var(--line);
}

.agency-founder-reference__facts span {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  color: var(--muted);

  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 600;

  text-transform: uppercase;
}

.agency-founder-reference__facts i {
  color: #8065a3;
}

.agency-founder-reference__media {
  position: relative;

  min-height: 610px;

  margin: 0;

  overflow: hidden;

  border-radius: 28px;

  background: #e4ddd5;

  box-shadow: var(--shadow-md);
}

.agency-founder-reference__media::before {
  content: "";

  position: absolute;
  inset: 14px;

  z-index: 2;

  border: 1px solid rgba(255, 255, 255, 0.28);

  border-radius: 19px;

  pointer-events: none;
}

.agency-founder-reference__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 25%;
}

/* =========================================================
   36. AGENCY — SCROLL-DRIVEN METHOD
   ========================================================= */

.agency-method {
  --agency-method-bg: #302b32;
  --agency-method-text: #f8f2eb;
  --agency-method-muted: rgba(248, 242, 235, 0.58);

  position: relative;

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(201, 183, 239, 0.16),
      transparent 26%
    ),
    radial-gradient(
      circle at 8% 94%,
      rgba(201, 221, 195, 0.09),
      transparent 25%
    ),
    var(--agency-method-bg);

  color: var(--agency-method-text);
}

.agency-method .section-eyebrow {
  color: rgba(248, 242, 235, 0.8);

  border-color: rgba(255, 255, 255, 0.1);

  background: rgba(255, 255, 255, 0.05);
}

.agency-method__head {
  margin-bottom: clamp(46px, 6vw, 76px);
}

.agency-method__head h2 {
  margin: 15px 0;

  color: #fff8f1;
}

.agency-method__head p {
  margin: 0;

  color: var(--agency-method-muted);
}

.agency-method__timeline-wrap {
  position: sticky;

  top: var(--header-h);

  z-index: 8;

  margin-bottom: 35px;

  padding: 14px 0;
  backdrop-filter: blur(16px);

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.agency-method__timeline {
  position: relative;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  align-items: start;
}

.agency-method__line {
  position: absolute;

  left: 12.5%;
  right: 12.5%;
  top: 24px;

  height: 2px;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.12);

  z-index: 0;
}

.agency-method__line span {
  display: block;

  width: 0;
  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, #b69adb, #9fc598, #e0ac9d, #8fb0be);

  transition: width 0.42s var(--ease);
}

.agency-method__marker {
  position: relative;

  z-index: 1;

  display: grid;
  justify-items: center;

  gap: 6px;

  padding: 0 8px;

  border: 0;

  background: transparent;
  color: inherit;

  cursor: pointer;
}

.agency-method__dot {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 50%;

  background: var(--agency-method-bg);

  color: rgba(248, 242, 235, 0.52);

  font-size: 11px;

  transition:
    transform 0.3s var(--ease),
    background 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.agency-method__marker.is-active .agency-method__dot {
  transform: translateY(-2px) scale(1.08);

  background: var(--lav);
  color: #755b96;

  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.agency-method__marker--2.is-active .agency-method__dot {
  background: var(--sage);
  color: #648069;
}

.agency-method__marker--3.is-active .agency-method__dot {
  background: var(--peach);
  color: #a46c61;
}

.agency-method__marker--4.is-active .agency-method__dot {
  background: var(--blue);
  color: #668a9b;
}

.agency-method__marker .mono {
  color: rgba(248, 242, 235, 0.38);

  font-size: 7px;
}

.agency-method__marker strong {
  color: rgba(248, 242, 235, 0.62);

  font-size: 9px;
  font-weight: 650;

  transition: color 0.25s ease;
}

.agency-method__marker.is-active strong {
  color: #fff8f1;
}

.agency-method__layout {
  display: grid;

  grid-template-columns: minmax(270px, 0.34fr) minmax(0, 0.66fr);

  gap: clamp(44px, 7vw, 108px);

  align-items: start;
}

.agency-method__visual {
  position: sticky;

  top: calc(var(--header-h) + 120px);

  min-height: 420px;

  display: flex;
  align-items: center;
}

.agency-method-visual {
  position: relative;

  width: 100%;

  padding: 10px 0 10px 32px;

  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.agency-method-visual[hidden] {
  display: none;
}

.agency-method-visual__icon {
  width: 74px;
  height: 74px;

  display: grid;
  place-items: center;

  margin-bottom: 44px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 24px;

  background: rgba(221, 211, 246, 0.12);

  color: #d4c1f0;

  font-size: 22px;
}

.agency-method-visual h3 {
  margin: 7px 0 10px;

  color: #fff8f1;

  font-size: clamp(2.8rem, 4.8vw, 5.2rem);
}

.agency-method-visual p {
  margin: 0;

  color: var(--agency-method-muted);

  font-size: clamp(1rem, 1.2vw, 1.12rem);
}

.agency-method__steps {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.agency-method-step {
  min-height: 62vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: clamp(54px, 7vw, 90px) 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  opacity: 0.58;

  transition:
    opacity 0.35s ease,
    transform 0.4s var(--ease);
}

.agency-method-step.is-active {
  opacity: 1;

  transform: translateX(-4px);
}

.agency-method-step__head {
  display: flex;
  align-items: center;

  gap: 15px;

  margin-bottom: 22px;
}

.agency-method-step__icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  flex: 0 0 48px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 15px;

  background: rgba(255, 255, 255, 0.05);

  color: #d5c3ee;
}

.agency-method-step:nth-child(2) .agency-method-step__icon {
  color: #a9c9a4;
}

.agency-method-step:nth-child(3) .agency-method-step__icon {
  color: #e0ac9d;
}

.agency-method-step:nth-child(4) .agency-method-step__icon {
  color: #9dbdca;
}

.agency-method-step__head h3 {
  margin: 3px 0 0;

  color: #fff8f1;

  font-size: clamp(2rem, 3.1vw, 3.35rem);
}

.agency-method-step__summary {
  margin: 0 0 19px;

  color: rgba(248, 242, 235, 0.9);

  font-size: clamp(1.08rem, 1.4vw, 1.3rem);

  line-height: 1.55;
  font-weight: 600;
}

.agency-method-step__paragraphs p {
  margin-bottom: 12px;

  color: var(--agency-method-muted);

  font-size: 12px;
}

.agency-method-step__details {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(28px, 5vw, 70px);

  margin-top: 32px;
  padding-top: 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.agency-method-step__details > div > .mono {
  color: rgba(248, 242, 235, 0.42);

  font-size: 7px;
}

.agency-method-step__details ul {
  list-style: none;

  display: grid;

  gap: 10px;

  margin: 16px 0 0;

  padding: 0;
}

.agency-method-step__details li {
  display: grid;

  grid-template-columns: 18px 1fr;

  gap: 8px;

  color: rgba(248, 242, 235, 0.7);

  font-size: 10px;
  line-height: 1.45;
}

.agency-method-step__details li i {
  margin-top: 3px;

  color: #bba3da;

  font-size: 8px;
}

/* =========================================================
   37. AGENCY — CLIENT FIT
   ========================================================= */

.agency-fit-reference {
  background:
    radial-gradient(
      circle at 8% 88%,
      rgba(221, 211, 246, 0.22),
      transparent 24%
    ),
    linear-gradient(135deg, #e0ebdc, #edf0e2);

  border-bottom: 1px solid var(--border-soft);
}

.agency-fit-reference__head {
  margin-bottom: clamp(42px, 6vw, 78px);
}

.agency-fit-reference__head h2 {
  margin: 14px 0;
}

.agency-fit-reference__head p {
  margin: 0;

  color: rgba(57, 51, 46, 0.68);
}

.agency-fit-reference__layout {
  display: grid;

  grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr);

  gap: clamp(42px, 7vw, 100px);

  align-items: center;
}

.agency-fit-reference__media {
  position: relative;

  min-height: 520px;

  margin: 0;

  overflow: hidden;

  border-radius: 27px;

  background: #d9d5ce;

  box-shadow: var(--shadow-sm);
}

.agency-fit-reference__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.agency-fit-reference__media figcaption {
  position: absolute;

  left: 13px;
  right: 13px;
  bottom: 13px;

  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}

.agency-fit-reference__media figcaption span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  min-height: 32px;

  padding: 6px 9px;

  border: 1px solid rgba(57, 51, 46, 0.08);

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.88);

  backdrop-filter: blur(9px);

  font-family: var(--font-mono);

  font-size: 6.5px;
  font-weight: 600;

  text-transform: uppercase;
}

.agency-fit-reference__media figcaption i {
  color: #8065a3;
}

.agency-fit-reference__signals {
  list-style: none;

  margin: 0;
  padding: 0;

  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

.agency-fit-reference__signals li {
  display: grid;

  grid-template-columns: 30px 1fr;

  gap: 11px;

  align-items: start;

  padding: 17px 0;

  border-bottom: 1px solid rgba(57, 51, 46, 0.14);

  font-size: 12px;
  line-height: 1.55;
}

.agency-fit-reference__signals i {
  width: 26px;
  height: 26px;

  display: grid;
  place-items: center;

  margin-top: 1px;

  border-radius: 50%;

  background: rgba(255, 253, 249, 0.5);

  color: #66886c;

  font-size: 8px;
}

.agency-fit-reference__audiences {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 30px;
}

.agency-fit-reference__audiences span {
  display: inline-flex;
  align-items: center;

  min-height: 31px;

  padding: 6px 10px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.38);

  font-size: 9px;
  font-weight: 650;
}

/* =========================================================
   38. AGENCY — FINAL CTA
   ========================================================= */

.agency-final-reference {
  position: relative;

  overflow: hidden;

  padding-block: clamp(82px, 8vw, 128px);

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(255, 255, 255, 0.48),
      transparent 20%
    ),
    linear-gradient(115deg, var(--lav) 0%, #ebdde8 46%, var(--sage) 100%);
}

.agency-final-reference::after {
  content: "";

  position: absolute;

  right: -130px;
  top: -175px;

  width: 455px;

  aspect-ratio: 1;

  border: 56px solid rgba(255, 255, 255, 0.27);

  border-radius: 50%;

  pointer-events: none;
}

.agency-final-reference__layout {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);

  gap: clamp(50px, 8vw, 110px);

  align-items: end;
}

.agency-final-reference h2 {
  margin: 18px 0 17px;

  font-size: clamp(2.8rem, 4.7vw, 5.3rem);
}

.agency-final-reference p {
  margin: 0;
}

.agency-final-reference__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  gap: 9px;
}

/* =========================================================
   39. AGENCY — TABLET
   ========================================================= */

@media (max-width: 1020px) {
  .agency-cover-hero {
    height: 61svh;
    min-height: 500px;
  }

  .agency-cover-hero__copy {
    width: min(760px, 78%);
  }

  .agency-about__gallery {
    min-height: 420px;
  }

  .agency-about__image--1 {
    height: 390px;
  }

  .agency-about__image--2 {
    height: 300px;
  }

  .agency-about__image--3 {
    height: 350px;
  }

  .agency-about__copy,
  .agency-founder-reference__layout,
  .agency-fit-reference__layout,
  .agency-final-reference__layout {
    grid-template-columns: 1fr;
  }

  .agency-about__heading {
    max-width: 760px;
  }

  .agency-principles__grid {
    grid-template-columns: 1fr 1fr;
  }

  .agency-principle:nth-child(2) {
    border-right: 0;
  }

  .agency-principle:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(57, 51, 46, 0.16);
  }

  .agency-founder-reference__copy {
    max-width: 760px;
  }

  .agency-founder-reference__media {
    width: min(100%, 760px);
    min-height: 570px;
  }

  .agency-method__head {
    grid-template-columns: 1fr;
  }

  .agency-method__layout {
    grid-template-columns: minmax(220px, 0.3fr) minmax(0, 0.7fr);

    gap: 45px;
  }

  .agency-fit-reference__head {
    grid-template-columns: 1fr;
  }

  .agency-fit-reference__head > div {
    max-width: 760px;
  }

  .agency-fit-reference__media {
    width: min(100%, 760px);
  }

  .agency-final-reference__actions {
    justify-content: flex-start;
  }
}

/* =========================================================
   40. AGENCY — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .agency-cover-hero {
    height: 64svh;
    min-height: 520px;
    max-height: 700px;
  }

  .agency-cover-hero__media img {
    object-position: 60% center;
  }

  .agency-cover-hero::after {
    background: linear-gradient(
      90deg,
      rgba(25, 22, 24, 0.7) 0%,
      rgba(25, 22, 24, 0.38) 72%,
      rgba(25, 22, 24, 0.18) 100%
    );
  }

  .agency-cover-hero__inner {
    padding-bottom: 28px;
  }

  .agency-cover-hero__copy {
    width: 100%;
  }

  .agency-cover-hero__title {
    font-size: clamp(3rem, 13.8vw, 4.75rem);
  }

  .agency-cover-hero__lead {
    max-width: 92%;

    font-size: 1.03rem;
  }

  .agency-cover-hero__actions {
    align-items: flex-start;
    flex-direction: column;

    gap: 10px;
  }

  .agency-cover-hero__primary {
    width: 100%;
  }

  .agency-cover-hero__meta {
    gap: 8px 14px;

    margin-top: 18px;
    padding-top: 13px;
  }

  .agency-about__gallery {
    min-height: 0;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
  }

  .agency-about__image--1 {
    grid-column: 1 / -1;

    height: 330px;
  }

  .agency-about__image--2,
  .agency-about__image--3 {
    grid-column: auto;

    height: 230px;

    margin-top: 0;
  }

  .agency-about__image {
    border-radius: 21px;
  }

  .agency-about__principle {
    grid-template-columns: 44px 1fr;
  }

  .agency-about__principle > span {
    width: 42px;
    height: 42px;

    border-radius: 14px;
  }

  .agency-principles__grid {
    grid-template-columns: 1fr;
  }

  .agency-principle {
    min-height: 245px;

    border-right: 0;

    border-bottom: 1px solid rgba(57, 51, 46, 0.16);
  }

  .agency-principle:last-child {
    border-bottom: 0;
  }

  .agency-founder-reference__media {
    min-height: 470px;

    border-radius: 22px;
  }

  .agency-founder-reference__facts {
    display: grid;

    grid-template-columns: 1fr 1fr;
  }

  .agency-method {
    padding-bottom: 78px;
  }

  .agency-method__timeline-wrap {
    top: 0;

    margin-inline: calc(var(--gutter) * -1);

    padding-inline: var(--gutter);

    overflow-x: auto;

    overscroll-behavior-inline: contain;

    scrollbar-width: none;
  }

  .agency-method__timeline-wrap::-webkit-scrollbar {
    display: none;
  }

  .agency-method__timeline {
    min-width: 500px;
  }

  .agency-method__layout {
    display: block;
  }

  .agency-method__visual {
    display: none;
  }

  .agency-method__steps {
    border-top: 0;
  }

  .agency-method-step {
    min-height: 0;

    padding: 58px 0;

    opacity: 1;

    transform: none;
  }

  .agency-method-step__summary {
    font-size: 1.1rem;
  }

  .agency-method-step__details {
    grid-template-columns: 1fr;

    gap: 28px;
  }

  .agency-fit-reference__media {
    min-height: 390px;

    border-radius: 22px;
  }

  .agency-final-reference__actions {
    display: grid;

    grid-template-columns: 1fr;
  }

  .agency-final-reference__actions .btn {
    width: 100%;
  }
}

/* =========================================================
   41. AGENCY — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .agency-cover-hero {
    min-height: 500px;
  }

  .agency-cover-hero__title {
    font-size: clamp(2.85rem, 14.8vw, 4.3rem);
  }

  .agency-cover-hero__lead {
    max-width: 100%;

    font-size: 0.98rem;
  }

  /*
   * Keep the mobile hero clean rather than squeezing
   * three metadata items under the CTA.
   */
  .agency-cover-hero__meta span:nth-child(2) {
    display: none;
  }

  .agency-about__image--1 {
    height: 300px;
  }

  .agency-about__image--2,
  .agency-about__image--3 {
    height: 195px;
  }

  .agency-founder-reference__media {
    min-height: 420px;
  }

  .agency-founder-reference__facts {
    grid-template-columns: 1fr;
  }

  .agency-method__timeline {
    min-width: 440px;
  }

  .agency-method__marker strong {
    font-size: 8px;
  }

  .agency-method-step__head {
    align-items: flex-start;
  }

  .agency-fit-reference__media {
    min-height: 340px;
  }
}

/* =========================================================
   42. AGENCY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .agency-about__gallery [data-depth],
  .agency-founder-reference__media [data-depth],
  .agency-about__image img,
  .agency-principle__icon,
  .agency-method__dot,
  .agency-method-step,
  .agency-cover-hero__secondary i {
    transform: none !important;
  }
}

/* =========================================================
   SALTY THEME — SERVICE CATEGORY SYSTEM
   ========================================================= */

/* =========================================================
   43. SERVICE CATEGORY — SHARED FOUNDATION
   ========================================================= */

.service-category-page {
  overflow: clip;
  background: var(--paper);
}

.service-category-page h1,
.service-category-page h2,
.service-category-page h3 {
  text-wrap: balance;
}

.service-detail-section {
  scroll-margin-top: calc(var(--header-h) + 76px);
}

/* =========================================================
   44. SERVICE CATEGORY — HERO
   ========================================================= */

.service-category-hero {
  position: relative;
  overflow: hidden;

  min-height: clamp(620px, 76svh, 780px);

  padding: calc(var(--header-h) + clamp(60px, 7vw, 96px)) 0
    clamp(66px, 7vw, 100px);

  border-bottom: 1px solid var(--border-soft);

  background:
    radial-gradient(
      circle at 86% 9%,
      rgba(255, 255, 255, 0.72),
      transparent 23%
    ),
    radial-gradient(
      circle at 8% 91%,
      rgba(221, 211, 246, 0.28),
      transparent 27%
    ),
    linear-gradient(135deg, #f2eee7 0%, #eee8df 47%, #e1e9df 100%);
}

.service-category-hero::before {
  content: "";

  position: absolute;
  right: -130px;
  top: -170px;

  width: 430px;
  aspect-ratio: 1;

  border: 48px solid rgba(255, 255, 255, 0.24);

  border-radius: 50%;

  pointer-events: none;
}

.service-category-hero__layout {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.86fr)
    minmax(480px, 1.14fr);

  gap: clamp(48px, 7vw, 112px);

  align-items: center;
}

.service-category-hero__title {
  margin: 19px 0 22px;

  font-size: clamp(3.4rem, 5.8vw, 6.5rem);

  line-height: 0.91;
}

.service-category-hero__lead {
  max-width: 650px;

  margin: 0;

  font-size: clamp(1.1rem, 1.45vw, 1.36rem);

  line-height: 1.53;
  font-weight: 620;
}

.service-category-hero__actions {
  margin-top: 27px;
}

.service-category-hero__visual {
  position: relative;

  width: min(100%, 720px);

  min-height: 500px;

  justify-self: end;

  perspective: 1200px;
}

.service-category-hero__image {
  position: absolute;

  left: 3%;
  top: 4%;

  width: 88%;
  height: 84%;

  overflow: hidden;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 28px;

  background: #d9ddd5;

  box-shadow: 0 30px 75px rgba(57, 51, 46, 0.14);

  transform: rotate(-1deg);
}

.service-category-hero__image::before {
  content: "";

  position: absolute;
  inset: 11px;

  z-index: 2;

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 19px;

  pointer-events: none;
}

.service-category-hero__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.service-category-hero__note {
  position: absolute;

  right: 0;
  bottom: 3%;

  z-index: 4;

  max-width: 265px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 13px 15px;

  border: 1px solid rgba(57, 51, 46, 0.08);

  border-radius: 17px;

  background: rgba(221, 211, 246, 0.94);

  box-shadow: var(--shadow-sm);

  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;

  transform: rotate(2deg);
}

.service-category-hero__note i {
  color: #8065a3;
}

/* =========================================================
   45. SERVICE CATEGORY — STICKY SERVICE INDEX
   ========================================================= */

.service-category-index {
  position: sticky;
  top: var(--header-h);

  z-index: 880;

  border-bottom: 1px solid rgba(57, 51, 46, 0.08);

  background: rgba(251, 248, 243, 0.92);

  box-shadow: 0 8px 24px rgba(57, 51, 46, 0.035);

  backdrop-filter: blur(16px);
}

.service-category-index__inner {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-category-index__link {
  min-width: 0;
  min-height: 66px;

  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr);

  gap: 8px;

  align-items: center;

  padding: 10px 18px;

  border-right: 1px solid rgba(57, 51, 46, 0.08);

  color: var(--muted);

  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.service-category-index__link:last-child {
  border-right: 0;
}

.service-category-index__link .mono {
  color: rgba(57, 51, 46, 0.36);

  font-size: 7px;
}

.service-category-index__link strong {
  min-width: 0;

  overflow: hidden;

  font-size: 10px;
  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-category-index__link:hover,
.service-category-index__link.is-active {
  background: rgba(221, 211, 246, 0.28);

  color: #745c94;
}

/* =========================================================
   46. WEB & APPS — CATEGORY INTRO
   ========================================================= */

.webapps-intro {
  background: var(--paper);

  border-bottom: 1px solid var(--border-soft);
}

.webapps-intro__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(390px, 0.98fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.webapps-intro__copy h2 {
  margin: 18px 0 20px;
}

.webapps-intro__lead {
  color: var(--ink);

  font-size: clamp(1.12rem, 1.45vw, 1.36rem);

  font-weight: 640;
  line-height: 1.52;
}

.webapps-intro__copy > p:not(.webapps-intro__lead) {
  color: var(--muted);
}

.webapps-intro__signals {
  display: flex;
  flex-wrap: wrap;

  gap: 8px 16px;

  margin-top: 27px;
  padding-top: 20px;

  border-top: 1px solid var(--line);
}

.webapps-intro__signals span {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 7px;
  font-weight: 600;

  text-transform: uppercase;
}

.webapps-intro__signals i {
  color: #8065a3;
}

.webapps-intro__media {
  min-height: 560px;

  margin: 0;

  overflow: hidden;

  border-radius: 28px;

  background: #e3ddd5;

  box-shadow: var(--shadow-sm);
}

.webapps-intro__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* =========================================================
   47. WEB & APPS — SHARED SERVICE SECTION LANGUAGE
   ========================================================= */

.service-detail-section {
  position: relative;
  overflow: hidden;

  border-bottom: 1px solid var(--border-soft);
}

.service-detail-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: clamp(42px, 5vw, 68px);

  padding-bottom: 18px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.13);
}

.service-detail-section__identity {
  display: flex;
  align-items: center;

  gap: 11px;
}

.service-detail-section__number {
  color: var(--muted);

  font-size: 8px;
}

.service-detail-section__icon {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(57, 51, 46, 0.08);

  border-radius: 13px;

  background: rgba(255, 253, 249, 0.52);

  color: #8065a3;

  font-size: 12px;
}

.service-detail-section__identity strong {
  font-size: 11px;
}

.service-detail-section__eyebrow {
  color: var(--muted);

  font-size: 7px;
  text-align: right;
}

.service-detail-section__copy h2 {
  margin: 0 0 18px;
}

.service-detail-section__lead {
  color: var(--ink);

  font-size: clamp(1.08rem, 1.4vw, 1.3rem);

  font-weight: 640;
  line-height: 1.52;
}

.service-detail-section__copy > p:not(.service-detail-section__lead) {
  color: var(--muted);
}

.service-detail-section__capabilities {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 28px;
}

.service-detail-section__capabilities span {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  min-height: 32px;

  padding: 6px 10px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.42);

  font-size: 8px;
  font-weight: 650;
}

.service-detail-section__capabilities i {
  color: #719176;

  font-size: 7px;
}

.service-detail-section__capabilities--stacked {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0;

  margin-top: 26px;

  border-top: 1px solid var(--line);
}

.service-detail-section__capabilities--stacked span {
  min-height: 44px;

  padding: 10px 4px;

  border: 0;
  border-bottom: 1px solid var(--line);

  border-radius: 0;

  background: transparent;
}

.service-detail-section__capabilities--stacked span:nth-child(odd) {
  padding-right: 14px;

  border-right: 1px solid var(--line);
}

.service-detail-section__capabilities--stacked span:nth-child(even) {
  padding-left: 14px;
}

.service-detail-section__cta {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  margin-top: 28px;
  padding-bottom: 7px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.3);

  font-size: 10px;
  font-weight: 700;
}

.service-detail-section__cta i {
  font-size: 9px;

  transition: transform 0.25s var(--ease);
}

.service-detail-section__cta:hover i {
  transform: translateX(4px);
}

/* =========================================================
   48. WEB & APPS — BUSINESS WEBSITES
   ========================================================= */

.service-detail-section--split {
  background: linear-gradient(180deg, #f6f1e9, var(--paper));
}

.service-detail-split__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(430px, 1.1fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.service-detail-split__media {
  position: relative;

  min-height: 590px;

  margin: 0;

  overflow: hidden;

  border-radius: 28px;

  background: #ded9d1;

  box-shadow: var(--shadow-md);
}

.service-detail-split__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.service-detail-split__media figcaption {
  position: absolute;

  left: 14px;
  bottom: 14px;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  min-height: 34px;

  padding: 7px 11px;

  border: 1px solid rgba(57, 51, 46, 0.08);

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.88);

  backdrop-filter: blur(10px);

  font-family: var(--font-mono);

  font-size: 7px;
  font-weight: 600;

  text-transform: uppercase;
}

.service-detail-split__media figcaption i {
  color: #719176;
}

/* =========================================================
   49. WEB & APPS — E-COMMERCE
   ========================================================= */

.service-detail-section--commerce {
  --commerce-text: #f8f2eb;

  color: var(--commerce-text);

  background:
    radial-gradient(
      circle at 91% 10%,
      rgba(238, 214, 216, 0.15),
      transparent 25%
    ),
    radial-gradient(
      circle at 7% 92%,
      rgba(221, 211, 246, 0.13),
      transparent 26%
    ),
    #302b32;
}

.service-detail-section--commerce .service-detail-section__header {
  border-color: rgba(255, 255, 255, 0.12);
}

.service-detail-section--commerce .service-detail-section__number,
.service-detail-section--commerce .service-detail-section__eyebrow {
  color: rgba(248, 242, 235, 0.45);
}

.service-detail-section--commerce .service-detail-section__icon {
  border-color: rgba(255, 255, 255, 0.1);

  background: rgba(255, 255, 255, 0.06);

  color: #dfc8f4;
}

.service-detail-section--commerce .service-detail-section__identity strong {
  color: #fff8f1;
}

.webapps-commerce__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(420px, 1.1fr);

  gap: clamp(50px, 8vw, 118px);

  align-items: center;
}

.service-detail-section--commerce .service-detail-section__copy h2 {
  color: #fff8f1;
}

.service-detail-section--commerce .service-detail-section__lead {
  color: rgba(248, 242, 235, 0.9);
}

.service-detail-section--commerce
  .service-detail-section__copy
  > p:not(.service-detail-section__lead) {
  color: rgba(248, 242, 235, 0.58);
}

.service-detail-section--commerce .service-detail-section__cta {
  border-color: rgba(255, 255, 255, 0.35);

  color: #fff8f1;
}

.webapps-commerce__visual {
  min-height: 500px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 27px;

  background: #3a343b;

  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22);
}

.webapps-commerce__visual img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.webapps-commerce__flow {
  position: relative;

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 0;

  margin-top: clamp(52px, 7vw, 84px);

  border-top: 1px solid rgba(255, 255, 255, 0.13);

  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.webapps-commerce__flow > div {
  position: relative;

  min-height: 128px;

  display: grid;
  align-content: center;

  gap: 9px;

  padding: 18px 22px;

  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.webapps-commerce__flow > div:last-child {
  border-right: 0;
}

.webapps-commerce__flow > div > span {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: rgba(238, 214, 216, 0.12);

  color: #efcdd2;
}

.webapps-commerce__flow strong {
  color: #fff8f1;

  font-size: 9px;
}

.webapps-commerce__flow-arrow {
  position: absolute;

  right: -5px;
  top: 50%;

  z-index: 2;

  color: rgba(248, 242, 235, 0.32);

  font-size: 8px;

  transform: translateY(-50%);
}

.service-detail-section--commerce .service-detail-section__capabilities {
  margin-top: 30px;
}

.service-detail-section--commerce .service-detail-section__capabilities span {
  border-color: rgba(255, 255, 255, 0.1);

  background: rgba(255, 255, 255, 0.05);

  color: rgba(248, 242, 235, 0.7);
}

/* =========================================================
   50. WEB & APPS — APPLICATION DEVELOPMENT
   ========================================================= */

.service-detail-section--devices {
  background:
    radial-gradient(
      circle at 88% 13%,
      rgba(255, 255, 255, 0.58),
      transparent 23%
    ),
    linear-gradient(135deg, #dce9ee 0%, #e4eceb 45%, #e5e8f0 100%);
}

.webapps-devices__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.87fr)
    minmax(470px, 1.13fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.webapps-devices__visual {
  position: relative;

  min-height: 610px;
}

.webapps-devices__desktop {
  position: absolute;

  left: 0;
  top: 7%;

  width: 84%;
  height: 72%;

  margin: 0;

  overflow: hidden;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 26px;

  background: #dde0e2;

  box-shadow: var(--shadow-md);
}

.webapps-devices__desktop img,
.webapps-devices__mobile img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.webapps-devices__mobile {
  position: absolute;

  right: 2%;
  bottom: 4%;

  z-index: 3;

  width: 29%;

  margin: 0;

  overflow: hidden;

  border: 7px solid #302b32;

  border-radius: 27px;

  background: black;

  box-shadow: 0 24px 55px rgba(57, 51, 46, 0.2);
}

.webapps-devices__mobile::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 50%;
  transform: translateX(50%);
  border-radius: 50px;
  width: 50px;
  height: 12px;
  z-index: 2;
  pointer-events: none;
  background: black;
}

.webapps-devices__notes {
  position: absolute;

  left: 2%;
  right: 28%;
  bottom: 2%;

  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}

.webapps-devices__notes span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  min-height: 32px;

  padding: 6px 9px;

  border: 1px solid rgba(57, 51, 46, 0.08);

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.86);

  box-shadow: var(--shadow-sm);

  font-family: var(--font-mono);

  font-size: 6.5px;
  font-weight: 600;

  text-transform: uppercase;
}

.webapps-devices__notes i {
  color: #6e91a0;
}

/* =========================================================
   51. WEB & APPS — REDESIGN / BEFORE-AFTER
   ========================================================= */

.service-detail-section--compare {
  background: linear-gradient(180deg, #f4eee6, #eee9df);
}

.webapps-redesign__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(480px, 1.18fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.webapps-compare {
  --webapps-compare-position: 52%;

  position: relative;
}

.webapps-compare__stage {
  position: relative;

  min-height: 440px;

  overflow: hidden;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 27px;

  background: #d8d4ce;

  box-shadow: var(--shadow-md);
}

.webapps-compare__before,
.webapps-compare__after {
  position: absolute;
  inset: 0;
}

.webapps-compare__before img,
.webapps-compare__after img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.webapps-compare__after {
  clip-path: inset(0 calc(100% - var(--webapps-compare-position)) 0 0);
}

.webapps-compare__before {
  filter: grayscale(0.48) brightness(0.78);
}

.webapps-compare__before > span,
.webapps-compare__after > span {
  position: absolute;

  top: 14px;

  min-height: 30px;

  display: inline-flex;
  align-items: center;

  padding: 5px 9px;

  border: 1px solid rgba(57, 51, 46, 0.08);

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.88);

  font-family: var(--font-mono);

  font-size: 7px;
  font-weight: 600;

  text-transform: uppercase;

  backdrop-filter: blur(9px);
}

.webapps-compare__before > span {
  right: 14px;
}

.webapps-compare__after > span {
  left: 14px;
}

.webapps-compare__divider {
  position: absolute;
  left: var(--webapps-compare-position);
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 253, 249, 0.9);
  box-shadow: 10px -7px 7px 10px rgb(57 51 46 / 37%);
  transform: translateX(-50%);
}

.webapps-compare__divider span {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 50%;

  background: rgba(255, 253, 249, 0.94);

  color: #8065a3;

  box-shadow: var(--shadow-sm);

  transform: translate(-50%, -50%);
}

.webapps-compare__range {
  width: 100%;
  accent-color: transparent;
  cursor: ew-resize;
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  color: #8065a3;
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* =========================================================
   52. WEB & APPS — SIGNATURE BUILD PATH
   ========================================================= */

.webapps-signature {
  --signature-progress: 0%;

  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(255, 255, 255, 0.5),
      transparent 20%
    ),
    linear-gradient(115deg, var(--lav) 0%, #e4dfeb 50%, var(--sage) 100%);

  border-bottom: 1px solid var(--border-soft);
}

.webapps-signature__path {
  --signature-progress: 0%;

  position: relative;

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: clamp(10px, 2vw, 26px);

  padding-top: 52px;
}

.webapps-signature__line {
  position: absolute;
  left: 0;
  top: 21px;
  transform: translate(-0%, -50%);
  width: 100%;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
}

.webapps-signature__line span {
  display: block;

  width: var(--signature-progress);

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, #8e70b3, #729778);

  transition: width 0.38s var(--ease);
}

.webapps-signature-step {
  position: relative;
  padding-right: 8px;
  opacity: 0.52;
  transition:
    opacity 0.28s ease,
    transform 0.28s var(--ease);
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.webapps-signature-step.is-active {
  opacity: 1;

  transform: translateY(-3px);
}

.webapps-signature-step__dot {
  position: absolute;
  top: -49px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(57, 51, 46, 0.1);
  border-radius: 50%;
  background: rgb(239 234 242);
  color: #8065a3;
  font-size: 11px;
  transition:
    transform 0.28s var(--ease),
    background 0.28s ease;
}

.webapps-signature-step.is-active .webapps-signature-step__dot {
  background: var(--paper);

  transform: scale(1.08);
}

.webapps-signature-step > .mono {
  color: var(--muted);

  font-size: 7px;
}

.webapps-signature-step h3 {
  margin: 7px 0 8px;

  font-size: clamp(1.45rem, 2vw, 2.05rem);
}

.webapps-signature-step p {
  margin: 0;

  color: rgba(57, 51, 46, 0.67);

  font-size: 9px;
  line-height: 1.5;
}

/* =========================================================
   53. WEB & APPS — QUALITY FOUNDATION
   ========================================================= */

.webapps-quality {
  background: var(--paper);

  border-bottom: 1px solid var(--border-soft);
}

.webapps-quality__layout {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.72fr)
    minmax(0, 1.28fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: start;
}

.webapps-quality__heading {
  position: sticky;

  top: calc(var(--header-h) + 92px);
}

.webapps-quality__heading h2 {
  margin: 18px 0 16px;
}

.webapps-quality__heading p {
  margin: 0;

  color: var(--muted);
}

.webapps-quality__list {
  border-top: 1px solid var(--line);
}

.webapps-quality__item {
  display: grid;

  grid-template-columns:
    42px
    44px
    minmax(0, 1fr);

  gap: 14px;

  align-items: start;

  padding: 22px 2px;

  border-bottom: 1px solid var(--line);

  transition:
    padding 0.28s var(--ease),
    background 0.28s ease;
}

.webapps-quality__item:hover {
  padding-inline: 12px;

  background: rgba(221, 211, 246, 0.12);
}

.webapps-quality__item > .mono {
  padding-top: 12px;

  color: var(--muted);

  font-size: 7px;
}

.webapps-quality__item > i {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: var(--lav);

  color: #8065a3;

  font-size: 12px;
}

.webapps-quality__item:nth-child(2n) > i {
  background: var(--sage);
  color: #68866c;
}

.webapps-quality__item:nth-child(3n) > i {
  background: var(--peach);
  color: #a26c62;
}

.webapps-quality__item h3 {
  margin: 0 0 6px;

  font-size: clamp(1.5rem, 2vw, 2.05rem);
}

.webapps-quality__item p {
  margin: 0;

  color: var(--muted);

  font-size: 10px;
}

/* =========================================================
   54. SERVICE CATEGORY — FINAL CTA
   ========================================================= */

.service-category-final {
  position: relative;
  overflow: hidden;

  padding-block: clamp(82px, 8vw, 128px);

  background:
    radial-gradient(
      circle at 90% 12%,
      rgba(255, 255, 255, 0.5),
      transparent 21%
    ),
    linear-gradient(115deg, var(--lav) 0%, var(--peach) 52%, var(--butter) 100%);
}

.service-category-final::after {
  content: "";

  position: absolute;

  right: -130px;
  top: -175px;

  width: 455px;
  aspect-ratio: 1;

  border: 56px solid rgba(255, 255, 255, 0.28);

  border-radius: 50%;

  pointer-events: none;
}

.service-category-final__layout {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.14fr)
    minmax(300px, 0.86fr);

  gap: clamp(50px, 8vw, 110px);

  align-items: end;
}

.service-category-final h2 {
  margin: 18px 0 17px;

  font-size: clamp(2.8rem, 4.7vw, 5.3rem);
}

.service-category-final p {
  margin: 0;
}

.service-category-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  gap: 9px;
}

/* =========================================================
   55. SERVICE CATEGORY — TABLET
   ========================================================= */

@media (max-width: 1020px) {
  .service-category-hero {
    min-height: 690px;
  }

  .service-category-hero__layout {
    grid-template-columns:
      minmax(0, 0.86fr)
      minmax(410px, 1.14fr);

    gap: 40px;
  }

  .service-category-index__link {
    padding-inline: 12px;
  }

  .webapps-intro__layout,
  .service-detail-split__layout,
  .webapps-commerce__layout,
  .webapps-devices__layout,
  .webapps-redesign__layout,
  .webapps-quality__layout,
  .service-category-final__layout {
    grid-template-columns: 1fr;
  }

  .webapps-intro__copy,
  .service-detail-section__copy,
  .webapps-quality__heading {
    max-width: 760px;
  }

  .webapps-intro__media,
  .service-detail-split__media,
  .webapps-commerce__visual,
  .webapps-compare {
    width: min(100%, 760px);
  }

  .webapps-quality__heading {
    position: relative;
    top: auto;
  }

  .service-category-final__actions {
    justify-content: flex-start;
  }
}

/* =========================================================
   56. SERVICE CATEGORY — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .service-category-hero {
    min-height: 0;

    padding-top: calc(var(--header-h) + 74px);
  }

  .service-category-hero__layout {
    grid-template-columns: 1fr;
  }

  .service-category-hero__title {
    font-size: clamp(3rem, 13.6vw, 4.9rem);
  }

  .service-category-hero__visual {
    min-height: 470px;

    justify-self: center;
  }

  .service-category-hero__image {
    left: 0;

    width: 92%;
    height: 84%;
  }

  .service-category-hero__note {
    right: 0;
    bottom: 2%;

    max-width: 235px;
  }

  .service-category-index {
    top: 0;

    overflow-x: auto;

    scrollbar-width: none;
  }

  .service-category-index::-webkit-scrollbar {
    display: none;
  }

  .service-category-index__inner {
    min-width: 660px;
  }

  .service-category-index__link {
    min-height: 58px;
  }

  .webapps-intro__media {
    min-height: 390px;

    border-radius: 22px;
  }

  .service-detail-section {
    scroll-margin-top: 72px;
  }

  .service-detail-section__header {
    align-items: flex-start;
    flex-direction: column;

    gap: 10px;
  }

  .service-detail-section__eyebrow {
    text-align: left;
  }

  .service-detail-section__capabilities--stacked {
    grid-template-columns: 1fr;
  }

  .service-detail-section__capabilities--stacked span:nth-child(odd),
  .service-detail-section__capabilities--stacked span:nth-child(even) {
    padding-inline: 4px;
    border-right: 0;
  }

  .service-detail-split__media,
  .webapps-commerce__visual,
  .webapps-compare__stage {
    min-height: 390px;

    border-radius: 22px;
  }

  .webapps-commerce__flow {
    grid-template-columns: 1fr;

    border-bottom: 0;
  }

  .webapps-commerce__flow > div {
    min-height: 74px;

    grid-template-columns:
      38px
      minmax(0, 1fr);

    align-items: center;

    padding: 12px 4px;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .webapps-commerce__flow > div > span {
    width: 34px;
    height: 34px;
  }

  .webapps-commerce__flow-arrow {
    display: none;
  }

  .webapps-devices__visual {
    min-height: 500px;
  }

  .webapps-devices__desktop {
    width: 89%;
    height: 68%;
  }

  .webapps-devices__mobile {
    width: 31%;
    height: 52%;
  }

  .webapps-devices__notes {
    right: 22%;
  }

  .webapps-compare__stage {
    min-height: 420px;
  }

  .webapps-signature__path {
    grid-template-columns: 1fr;

    gap: 28px;

    padding: 0 0 0 58px;
  }

  .webapps-signature__line {
    left: 20px;
    right: auto;
    top: 20px;
    bottom: 20px;

    width: 2px;
    height: auto;
  }

  .webapps-signature__line span {
    width: 100%;
    height: var(--signature-progress);

    transition: height 0.38s var(--ease);
  }

  .webapps-signature-step {
    min-height: 94px;
  }

  .webapps-signature-step__dot {
    left: -58px;
    top: -2px;
  }

  .webapps-quality__item {
    grid-template-columns:
      32px
      40px
      minmax(0, 1fr);

    gap: 10px;
  }

  .webapps-quality__item > i {
    width: 38px;
    height: 38px;
  }

  .service-category-final__actions {
    display: grid;

    grid-template-columns: 1fr;
  }

  .service-category-final__actions .btn {
    width: 100%;
  }
}

/* =========================================================
   57. SERVICE CATEGORY — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .service-category-hero__visual {
    min-height: 410px;
  }

  .service-category-hero__image {
    width: 94%;
    height: 79%;

    border-radius: 22px;
  }

  .service-category-hero__note {
    max-width: 215px;

    font-size: 8px;
  }

  .webapps-intro__media,
  .service-detail-split__media,
  .webapps-commerce__visual,
  .webapps-compare__stage {
    min-height: 330px;
  }

  .webapps-devices__visual {
    min-height: 430px;
  }

  .webapps-devices__mobile {
    width: 34%;

    border-width: 5px;

    border-radius: 21px;
  }

  .webapps-devices__notes {
    right: 10%;
    bottom: 0;
  }

  .webapps-devices__notes span:nth-child(n + 3) {
    display: none;
  }

  .webapps-compare__divider span {
    width: 42px;
    height: 42px;
  }
}

/* =========================================================
   58. SERVICE CATEGORY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .service-category-hero [data-depth],
  .webapps-devices__visual [data-depth],
  .service-category-index__link,
  .service-detail-section__cta i,
  .webapps-signature-step,
  .webapps-signature-step__dot,
  .webapps-quality__item {
    transform: none !important;
  }
}

/* =========================================================
   59. VISIBILITY & GROWTH — HERO
   ========================================================= */

.service-category-page--visibility-growth .service-category-hero {
  min-height: clamp(590px, 65svh, 730px);

  background:
    radial-gradient(
      circle at 87% 8%,
      rgba(255, 255, 255, 0.68),
      transparent 23%
    ),
    radial-gradient(
      circle at 7% 92%,
      rgba(238, 227, 185, 0.32),
      transparent 28%
    ),
    linear-gradient(135deg, #e6eddf 0%, #edf0df 45%, #eee1cd 100%);
}

.service-category-page--visibility-growth .service-category-hero__image {
  background: #e5e1d6;

  transform: rotate(0.8deg);
}

.service-category-page--visibility-growth .service-category-hero__note {
  background: rgba(238, 227, 185, 0.95);

  color: #7f6b3d;

  transform: rotate(-1.6deg);
}

.service-category-page--visibility-growth .service-category-hero__note i {
  color: #927735;
}

/* =========================================================
  60. VISIBILITY & GROWTH — SERVICE INDEX / PAGE CHANGES
   ========================================================= */

.service-category-page--visibility-growth .service-category-index__link:hover,
.service-category-page--visibility-growth
  .service-category-index__link.is-active {
  background: rgba(220, 230, 217, 0.52);

  color: #5f7f66;
}

/* =========================================================
   61. VISIBILITY & GROWTH — INTRO
   ========================================================= */

.service-category-page--visibility-growth .webapps-intro {
  background:
    radial-gradient(
      circle at 90% 12%,
      rgba(215, 228, 234, 0.2),
      transparent 24%
    ),
    var(--paper);
}

.service-category-page--visibility-growth .webapps-intro__signals i {
  color: #76927b;
}

.service-category-page--visibility-growth .webapps-intro__media {
  background: #e2dfd6;
}

/* =========================================================
   62. VISIBILITY & GROWTH — SEO
   ========================================================= */

.service-category-page--visibility-growth .service-detail-section--index-1 {
  background: linear-gradient(180deg, #f5f1e9, #eef3eb);
}

.service-category-page--visibility-growth
  .service-detail-section--index-1
  .service-detail-section__icon {
  background: var(--sage);

  color: #64836a;
}

.service-category-page--visibility-growth
  .service-detail-section--index-1
  .service-detail-split__media
  figcaption {
  background: rgba(220, 230, 217, 0.92);
}

.service-category-page--visibility-growth
  .service-detail-section--index-1
  .service-detail-split__media
  figcaption
  i {
  color: #64836a;
}

/* =========================================================
   63. VISIBILITY & GROWTH — PAID ACQUISITION
   ========================================================= */

.service-category-page--visibility-growth .service-detail-section--index-2 {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(238, 214, 216, 0.17),
      transparent 25%
    ),
    radial-gradient(
      circle at 7% 92%,
      rgba(238, 227, 185, 0.08),
      transparent 27%
    ),
    #312c31;
}

.service-category-page--visibility-growth
  .service-detail-section--index-2
  .service-detail-section__icon {
  color: #edc2c8;
}

.service-category-page--visibility-growth
  .service-detail-section--index-2
  .webapps-commerce__flow
  > div
  > span {
  background: rgba(238, 214, 216, 0.13);

  color: #f0c6cc;
}

.service-category-page--visibility-growth
  .service-detail-section--index-2
  .webapps-commerce__flow
  > div:nth-child(2)
  > span {
  background: rgba(238, 227, 185, 0.12);

  color: #e9d996;
}

.service-category-page--visibility-growth
  .service-detail-section--index-2
  .webapps-commerce__flow
  > div:nth-child(3)
  > span {
  background: rgba(215, 228, 234, 0.12);

  color: #b3d0dc;
}

.service-category-page--visibility-growth
  .service-detail-section--index-2
  .webapps-commerce__flow
  > div:nth-child(4)
  > span {
  background: rgba(220, 230, 217, 0.12);

  color: #b9d2b6;
}

.service-category-page--visibility-growth
  .service-detail-section--index-2
  .webapps-commerce__flow
  > div:nth-child(5)
  > span {
  background: rgba(201, 183, 239, 0.13);

  color: #d5c2ef;
}

/* =========================================================
   64. VISIBILITY & GROWTH — TRACKING & CRO
   ========================================================= */

.service-category-page--visibility-growth .service-detail-section--index-3 {
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(255, 255, 255, 0.58),
      transparent 22%
    ),
    linear-gradient(135deg, #d9e7eb 0%, #e2e9e5 52%, #e8e1d3 100%);
}

.service-category-page--visibility-growth
  .service-detail-section--index-3
  .service-detail-section__icon {
  background: var(--blue);

  color: #668998;
}

.service-category-page--visibility-growth .webapps-devices__desktop {
  background: #dbe1e2;
}

.service-category-page--visibility-growth .webapps-devices__notes span {
  background: rgba(255, 253, 249, 0.91);
}

/* =========================================================
   65. VISIBILITY & GROWTH — ACQUISITION STRATEGY
   ========================================================= */

.service-category-page--visibility-growth .service-detail-section--index-4 {
  background:
    radial-gradient(
      circle at 9% 90%,
      rgba(221, 211, 246, 0.2),
      transparent 25%
    ),
    linear-gradient(180deg, #f4eee6, #eee8dd);
}

.service-category-page--visibility-growth
  .service-detail-section--index-4
  .service-detail-section__icon {
  background: var(--butter);

  color: #8b753f;
}

.service-category-page--visibility-growth .webapps-compare__divider span {
  color: #738a69;

  background: rgba(255, 253, 249, 0.96);
}

/* =========================================================
   66. VISIBILITY & GROWTH — GROWTH LOOP
   ========================================================= */

.service-category-page--visibility-growth .webapps-signature {
  --growth-loop-text: #f8f2eb;
  --growth-loop-muted: rgba(248, 242, 235, 0.58);

  color: var(--growth-loop-text);

  background:
    radial-gradient(
      circle at 88% 9%,
      rgba(238, 214, 216, 0.13),
      transparent 25%
    ),
    radial-gradient(
      circle at 9% 92%,
      rgba(220, 230, 217, 0.1),
      transparent 26%
    ),
    #302b32;

  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.service-category-page--visibility-growth .webapps-signature .section-eyebrow {
  color: rgba(248, 242, 235, 0.8);

  border-color: rgba(255, 255, 255, 0.11);

  background: rgba(255, 255, 255, 0.05);
}

.service-category-page--visibility-growth
  .webapps-signature
  .section-heading
  h2 {
  color: #fff8f1;
}

.service-category-page--visibility-growth
  .webapps-signature
  .section-heading
  > p {
  color: var(--growth-loop-muted);
}

.service-category-page--visibility-growth .webapps-signature__line {
  background: rgba(255, 255, 255, 0.12);
}

.service-category-page--visibility-growth .webapps-signature__line span {
  background: linear-gradient(
    90deg,
    #b49bd4 0%,
    #dda8a1 25%,
    #d7ca8b 50%,
    #8daebc 74%,
    #97bb92 100%
  );
}

.service-category-page--visibility-growth .webapps-signature-step {
  opacity: 0.38;
}

.service-category-page--visibility-growth .webapps-signature-step.is-active {
  opacity: 1;
}

.service-category-page--visibility-growth .webapps-signature-step__dot {
  border-color: rgba(255, 255, 255, 0.12);

  background: #302b32;

  color: rgba(248, 242, 235, 0.56);
}

.service-category-page--visibility-growth
  .webapps-signature-step:nth-of-type(1)
  .webapps-signature-step__dot {
  color: #d3c0eb;
}

.service-category-page--visibility-growth
  .webapps-signature-step:nth-of-type(2)
  .webapps-signature-step__dot {
  color: #e6b0b0;
}

.service-category-page--visibility-growth
  .webapps-signature-step:nth-of-type(3)
  .webapps-signature-step__dot {
  color: #e1ce84;
}

.service-category-page--visibility-growth
  .webapps-signature-step:nth-of-type(4)
  .webapps-signature-step__dot {
  color: #a8c7d3;
}

.service-category-page--visibility-growth
  .webapps-signature-step:nth-of-type(5)
  .webapps-signature-step__dot {
  color: #afd0aa;
}

.service-category-page--visibility-growth
  .webapps-signature-step.is-active
  .webapps-signature-step__dot {
  background: rgb(255 253 249);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.service-category-page--visibility-growth .webapps-signature-step > .mono {
  color: rgba(248, 242, 235, 0.35);
}

.service-category-page--visibility-growth .webapps-signature-step h3 {
  color: #fff8f1;
}

.service-category-page--visibility-growth .webapps-signature-step p {
  color: var(--growth-loop-muted);
}

/* =========================================================
   67. VISIBILITY & GROWTH — MEASUREMENT PRINCIPLES
   ========================================================= */

.service-category-page--visibility-growth .webapps-quality {
  background: linear-gradient(135deg, #f2e9c8 0%, #f2ecda 47%, #e6ede1 100%);
}

.service-category-page--visibility-growth .webapps-quality__list {
  border-top-color: rgba(57, 51, 46, 0.16);
}

.service-category-page--visibility-growth .webapps-quality__item {
  border-bottom-color: rgba(57, 51, 46, 0.15);
}

.service-category-page--visibility-growth .webapps-quality__item:hover {
  background: rgba(255, 253, 249, 0.28);
}

.service-category-page--visibility-growth
  .webapps-quality__item:nth-child(1)
  > i {
  background: var(--sage);

  color: #66836b;
}

.service-category-page--visibility-growth
  .webapps-quality__item:nth-child(2)
  > i {
  background: var(--blue);

  color: #668a9b;
}

.service-category-page--visibility-growth
  .webapps-quality__item:nth-child(3)
  > i {
  background: var(--peach);

  color: #a16d63;
}

.service-category-page--visibility-growth
  .webapps-quality__item:nth-child(4)
  > i {
  background: var(--lav);

  color: #8065a3;
}

.service-category-page--visibility-growth
  .webapps-quality__item:nth-child(5)
  > i {
  background: var(--butter);

  color: #8c753f;
}

.service-category-page--visibility-growth
  .webapps-quality__item:nth-child(6)
  > i {
  background: var(--sage);

  color: #66836b;
}

/* =========================================================
   68. VISIBILITY & GROWTH — FINAL CTA
   ========================================================= */

.service-category-page--visibility-growth .service-category-final {
  background:
    radial-gradient(
      circle at 89% 11%,
      rgba(255, 255, 255, 0.5),
      transparent 21%
    ),
    linear-gradient(115deg, #dce7d8 0%, #eee4bd 48%, #eed6d8 100%);
}

/* =========================================================
   69. VISIBILITY & GROWTH — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .service-category-page--visibility-growth .service-category-hero {
    min-height: 0;
  }

  .service-category-page--visibility-growth .webapps-signature__path {
    padding-left: 58px;
  }

  .service-category-page--visibility-growth .webapps-signature__line {
    background: rgba(255, 255, 255, 0.12);
  }

  .service-category-page--visibility-growth .webapps-signature-step {
    opacity: 0.48;
  }

  .service-category-page--visibility-growth .webapps-signature-step.is-active {
    opacity: 1;
  }

  .service-category-page--visibility-growth
    .service-detail-section--index-2
    .webapps-commerce__flow {
    border-top-color: rgba(255, 255, 255, 0.12);
  }
}

/* =========================================================
   70. VISIBILITY & GROWTH — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .service-category-page--visibility-growth .service-category-hero__title {
    font-size: clamp(2.9rem, 14vw, 4.45rem);
  }

  .service-category-page--visibility-growth .service-category-hero__note {
    max-width: 225px;
  }
}

/* =========================================================
   71. VISIBILITY & GROWTH — PAGE TONE
   ========================================================= */

.service-category-page--visibility-growth .service-category-hero {
  min-height: clamp(580px, 64svh, 720px);

  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(255, 255, 255, 0.7),
      transparent 23%
    ),
    radial-gradient(
      circle at 8% 92%,
      rgba(238, 227, 185, 0.34),
      transparent 27%
    ),
    linear-gradient(135deg, #e5eddf 0%, #edf0e3 45%, #eee1cf 100%);
}

.service-category-page--visibility-growth .service-category-hero__image {
  background: #e1ddd3;
  transform: rotate(0.7deg);
}

.service-category-page--visibility-growth .service-category-hero__note {
  background: rgba(238, 227, 185, 0.95);
  color: #7d683b;
  transform: rotate(-1.4deg);
}

.service-category-page--visibility-growth .service-category-hero__note i {
  color: #927735;
}

.service-category-page--visibility-growth .service-category-index__link:hover,
.service-category-page--visibility-growth
  .service-category-index__link.is-active {
  background: rgba(220, 230, 217, 0.55);
  color: #5f7e64;
}

.service-category-page--visibility-growth .service-category-intro {
  background:
    radial-gradient(
      circle at 91% 12%,
      rgba(215, 228, 234, 0.22),
      transparent 24%
    ),
    var(--paper);
}

.service-category-page--visibility-growth .webapps-intro__signals i {
  color: #6d8b72;
}

/* =========================================================
   72. SEO — SEARCH → ARCHITECTURE
   ========================================================= */

.service-detail-section--search-architecture {
  background:
    radial-gradient(
      circle at 91% 10%,
      rgba(255, 255, 255, 0.52),
      transparent 22%
    ),
    linear-gradient(180deg, #f4f0e8, #edf3ea);
}

.service-detail-section--search-architecture .service-detail-section__icon {
  background: var(--sage);
  color: #648169;
}

.growth-seo__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(460px, 1.14fr);
  gap: clamp(52px, 8vw, 120px);
  align-items: center;
}

.growth-seo__visual {
  position: relative;
  min-height: 650px;
}

.growth-seo__image {
  position: absolute;
  inset: 0 7% 11% 0;

  margin: 0;
  overflow: hidden;

  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 28px;

  background: #ddd9d0;
  box-shadow: var(--shadow-md);
}

.growth-seo__image::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(255, 253, 249, 0.03),
    rgba(37, 34, 31, 0.18)
  );

  pointer-events: none;
}

.growth-seo__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.growth-seo__search {
  position: absolute;

  left: 5%;
  right: 12%;
  top: 7%;

  z-index: 3;

  padding: 12px;

  border: 1px solid rgba(57, 51, 46, 0.08);
  border-radius: 17px;

  background: rgba(255, 253, 249, 0.91);

  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}

.growth-seo__search-bar {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);

  gap: 7px;
  align-items: center;

  min-height: 42px;

  padding: 7px 11px;

  border: 1px solid rgba(57, 51, 46, 0.1);
  border-radius: 999px;

  background: #fff;

  font-size: 9px;
}

.growth-seo__search-bar i {
  color: #67816b;
}

.growth-seo__query {
  display: inline-flex;

  margin: 8px 5px 0 0;
  padding: 6px 8px;

  border-radius: 999px;

  background: rgba(220, 230, 217, 0.58);

  color: var(--muted);
  font-size: 7px;
}

.growth-seo__query.is-active {
  background: var(--sage);
  color: #58725d;
}

.growth-seo__architecture {
  position: absolute;

  right: 0;
  bottom: 0;

  z-index: 4;

  width: min(310px, 56%);

  padding: 17px;

  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 19px;

  background: rgba(255, 253, 249, 0.94);

  box-shadow: var(--shadow-sm);
}

.growth-seo__architecture > .mono {
  display: block;

  margin-bottom: 12px;

  color: var(--muted);
  font-size: 7px;
}

.growth-seo__node {
  --seo-depth: 0;

  display: flex;
  align-items: center;

  gap: 8px;

  min-height: 34px;

  margin-left: calc(var(--seo-depth) * 17px);
  padding-left: 11px;

  border-left: 1px solid rgba(57, 51, 46, 0.13);

  color: var(--muted);
  font-size: 8px;
}

.growth-seo__node i {
  color: #729078;
  font-size: 7px;
}

.growth-seo__pillars {
  position: absolute;

  left: 3%;
  bottom: 4%;

  z-index: 5;

  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  max-width: 48%;
}

.growth-seo__pillars span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  min-height: 31px;

  padding: 6px 9px;

  border: 1px solid rgba(57, 51, 46, 0.08);
  border-radius: 999px;

  background: rgba(255, 253, 249, 0.9);

  box-shadow: var(--shadow-sm);

  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 600;

  text-transform: uppercase;
}

.growth-seo__pillars i {
  color: #68866d;
}

/* =========================================================
   73. PAID ACQUISITION — CAMPAIGN SYSTEM
   ========================================================= */

.service-detail-section--campaign-system {
  color: #f8f2eb;

  background:
    radial-gradient(
      circle at 92% 9%,
      rgba(238, 214, 216, 0.15),
      transparent 24%
    ),
    radial-gradient(
      circle at 8% 91%,
      rgba(238, 227, 185, 0.07),
      transparent 26%
    ),
    #302b32;
}

.service-detail-section--campaign-system .service-detail-section__header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.service-detail-section--campaign-system .service-detail-section__number,
.service-detail-section--campaign-system .service-detail-section__eyebrow {
  color: rgba(248, 242, 235, 0.44);
}

.service-detail-section--campaign-system .service-detail-section__icon {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(238, 214, 216, 0.1);
  color: #ecc5ca;
}

.service-detail-section--campaign-system
  .service-detail-section__identity
  strong,
.service-detail-section--campaign-system .service-detail-section__copy h2 {
  color: #fff8f1;
}

.service-detail-section--campaign-system .service-detail-section__lead {
  color: rgba(248, 242, 235, 0.91);
}

.service-detail-section--campaign-system
  .service-detail-section__copy
  > p:not(.service-detail-section__lead) {
  color: rgba(248, 242, 235, 0.57);
}

.growth-campaign__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(500px, 1.22fr);

  gap: clamp(50px, 7vw, 100px);

  align-items: center;
}

.growth-campaign__system {
  min-height: 520px;

  display: grid;
  grid-template-columns: 170px 58px minmax(0, 1fr);

  align-items: center;
}

.growth-campaign__creatives {
  position: relative;
  z-index: 2;

  display: grid;
  gap: 10px;
}

.growth-campaign__creative {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);

  gap: 10px;
  align-items: center;

  min-height: 70px;

  padding: 11px 12px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.055);

  transition:
    transform 0.3s var(--ease),
    background 0.3s ease;
}

.growth-campaign__creative:nth-child(1) {
  transform: translateX(12px);
}

.growth-campaign__creative:nth-child(3) {
  transform: translateX(18px);
}

.growth-campaign__creative:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateX(5px);
}

.growth-campaign__creative > i {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: rgba(238, 214, 216, 0.12);
  color: #ecc4c9;
}

.growth-campaign__creative:nth-child(2) > i {
  background: rgba(221, 211, 246, 0.12);
  color: #d6c4ee;
}

.growth-campaign__creative:nth-child(3) > i {
  background: rgba(238, 227, 185, 0.11);
  color: #dfcf91;
}

.growth-campaign__creative strong {
  display: block;

  margin-bottom: 4px;

  color: #fff8f1;
  font-size: 9px;
}

.growth-campaign__creative .mono {
  color: rgba(248, 242, 235, 0.39);
  font-size: 6px;
}

.growth-campaign__connector {
  position: relative;

  height: 1px;
}

.growth-campaign__connector i {
  position: absolute;

  right: 40%;
  top: 50%;

  color: rgba(248, 242, 235, 0.4);
  font-size: 20px;

  transform: translateY(-50%);
}

.growth-campaign__landing {
  height: 500px;

  margin: 0;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 26px;

  background: #3a343b;

  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.22);
}

.growth-campaign__landing img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.growth-campaign__journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  margin-top: clamp(46px, 6vw, 72px);

  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.growth-campaign__journey > div {
  position: relative;

  min-height: 106px;

  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);

  gap: 9px;
  align-items: center;

  padding: 14px 18px;

  border-right: 1px solid rgba(255, 255, 255, 0.11);
}

.growth-campaign__journey > div:last-child {
  border-right: 0;
}

.growth-campaign__journey > div > span {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.06);
  color: #e9c7cb;
}

.growth-campaign__journey strong {
  color: #fff8f1;
  font-size: 9px;
}

.growth-campaign__journey-arrow {
  position: absolute;

  right: -5px;
  top: 50%;

  z-index: 2;

  color: rgba(248, 242, 235, 0.28);
  font-size: 8px;

  transform: translateY(-50%);
}

.growth-campaign__footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;

  gap: 18px 30px;
  align-items: center;

  margin-top: 24px;
}

.growth-campaign__metrics {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}

.growth-campaign__metrics span {
  display: inline-flex;
  align-items: center;

  min-height: 29px;

  padding: 5px 8px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;

  color: rgba(248, 242, 235, 0.55);
  font-size: 6px;
}

.service-detail-section--campaign-system .service-detail-section__capabilities {
  margin: 0;
}

.service-detail-section--campaign-system
  .service-detail-section__capabilities
  span {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(248, 242, 235, 0.62);
}

.service-detail-section--campaign-system .service-detail-section__cta {
  margin-top: 0;

  border-color: rgba(255, 255, 255, 0.3);
  color: #fff8f1;
}

/* =========================================================
   74. TRACKING & CRO — CONVERSION FUNNEL
   ========================================================= */

.service-detail-section--conversion-funnel {
  background:
    radial-gradient(
      circle at 90% 9%,
      rgba(255, 255, 255, 0.56),
      transparent 23%
    ),
    linear-gradient(135deg, #dbe8ed 0%, #e3ebe7 48%, #e8e3d9 100%);
}

.service-detail-section--conversion-funnel .service-detail-section__icon {
  background: var(--blue);
  color: #668a9a;
}

.growth-funnel__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(470px, 1.18fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.growth-funnel__visual {
  padding: clamp(22px, 3vw, 34px);

  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 27px;

  background: rgba(255, 253, 249, 0.64);

  box-shadow: var(--shadow-sm);

  backdrop-filter: blur(8px);
}

.growth-funnel__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 26px;
}

.growth-funnel__topline > .mono {
  color: var(--muted);
  font-size: 7px;
}

.growth-funnel__topline figure {
  width: 112px;
  height: 72px;

  margin: 0;

  overflow: hidden;

  border-radius: 12px;

  background: #dfe2e2;
}

.growth-funnel__topline img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.growth-funnel__steps {
  display: grid;
  gap: 15px;
}

.growth-funnel-step__label {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;

  gap: 8px;
  align-items: center;

  margin-bottom: 7px;
}

.growth-funnel-step__label > i {
  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background: rgba(215, 228, 234, 0.76);
  color: #628796;

  font-size: 7px;
}

.growth-funnel-step__label strong {
  font-size: 9px;
}

.growth-funnel-step__label code {
  padding: 4px 6px;

  border-radius: 7px;

  background: rgba(57, 51, 46, 0.055);
  color: var(--muted);

  font-family: var(--font-mono);
  font-size: 6px;
}

/*
 * These widths are purely illustrative visual stages.
 * They are NOT client metrics.
 */
.growth-funnel-step--xl {
  --funnel-width: 100%;
}

.growth-funnel-step--lg {
  --funnel-width: 80%;
}

.growth-funnel-step--md {
  --funnel-width: 61%;
}

.growth-funnel-step--sm {
  --funnel-width: 44%;
}

.growth-funnel-step--xs {
  --funnel-width: 30%;
}

.growth-funnel-step__bar {
  display: block;

  width: 0;
  height: 16px;

  border-radius: 0 999px 999px 0;

  background: linear-gradient(90deg, #93b2be, #bad0d8);

  transition: width 0.72s var(--ease);

  transition-delay: calc(var(--funnel-index) * 85ms);
}

.growth-funnel__visual.is-animated .growth-funnel-step__bar {
  width: var(--funnel-width);
}

.growth-funnel-step:nth-child(2) .growth-funnel-step__bar {
  background: linear-gradient(90deg, #9ebbb2, #c2d5ce);
}

.growth-funnel-step:nth-child(3) .growth-funnel-step__bar {
  background: linear-gradient(90deg, #c5b6db, #ded3ec);
}

.growth-funnel-step:nth-child(4) .growth-funnel-step__bar {
  background: linear-gradient(90deg, #dab4a7, #ead0c7);
}

.growth-funnel-step:nth-child(5) .growth-funnel-step__bar {
  background: linear-gradient(90deg, #c8b56f, #e0d293);
}

.growth-funnel__insight {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);

  gap: 12px;
  align-items: start;

  margin-top: 27px;
  padding-top: 22px;

  border-top: 1px solid rgba(57, 51, 46, 0.1);
}

.growth-funnel__insight > i {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: var(--butter);
  color: #8b743f;
}

.growth-funnel__insight strong {
  display: block;

  margin-bottom: 5px;

  font-size: 9px;
}

.growth-funnel__insight p {
  margin: 0;

  color: var(--muted);

  font-size: 9px;
  line-height: 1.52;
}

/* =========================================================
   75. ACQUISITION STRATEGY — CHANNEL MATRIX
   ========================================================= */

.service-detail-section--channel-strategy {
  background:
    radial-gradient(
      circle at 8% 91%,
      rgba(221, 211, 246, 0.22),
      transparent 25%
    ),
    linear-gradient(180deg, #f3eee4, #efe7d8);
}

.service-detail-section--channel-strategy .service-detail-section__icon {
  background: var(--butter);
  color: #8b743d;
}

.growth-strategy__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(500px, 1.22fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.growth-strategy__matrix {
  position: relative;

  min-height: 560px;

  margin: 20px 12px 28px 34px;

  border-left: 1px solid rgba(57, 51, 46, 0.18);
  border-bottom: 1px solid rgba(57, 51, 46, 0.18);

  background:
    linear-gradient(
      90deg,
      transparent 49.8%,
      rgba(57, 51, 46, 0.08) 50%,
      transparent 50.2%
    ),
    linear-gradient(
      180deg,
      transparent 49.8%,
      rgba(57, 51, 46, 0.08) 50%,
      transparent 50.2%
    );
}

.growth-strategy__axis {
  position: absolute;

  display: flex;
  align-items: center;

  gap: 6px;

  color: var(--muted);

  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 600;

  text-transform: uppercase;
}

.growth-strategy__axis--y {
  left: -31px;
  top: 0;

  flex-direction: column-reverse;

  writing-mode: vertical-rl;

  transform: rotate(180deg);
}

.growth-strategy__axis--y i {
  transform: rotate(180deg);
}

.growth-strategy__axis--x {
  right: 0;
  bottom: -28px;
}

.growth-strategy__zone {
  position: absolute;
  padding: 10px;
}

.growth-strategy__zone .mono {
  color: rgba(57, 51, 46, 0.28);
  font-size: 6px;
}

.growth-strategy__zone--prioritise {
  left: 0;
  top: 0;
}

.growth-strategy__zone--invest {
  right: 0;
  top: 0;
}

.growth-strategy__zone--test {
  left: 0;
  bottom: 0;
}

.growth-strategy__zone--later {
  right: 0;
  bottom: 0;
}

.growth-strategy__channel {
  position: absolute;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  min-height: 36px;

  padding: 7px 10px;

  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 999px;

  background: rgba(255, 253, 249, 0.9);

  box-shadow: var(--shadow-sm);

  font-size: 8px;
  font-weight: 650;

  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s ease;
}

.growth-strategy__channel:hover {
  transform: translateY(-3px);

  box-shadow: 0 15px 30px rgba(57, 51, 46, 0.1);
}

.growth-strategy__channel i {
  color: #7a6497;
}

.growth-strategy__channel--1 {
  left: 17%;
  top: 16%;
}

.growth-strategy__channel--2 {
  left: 32%;
  top: 31%;
}

.growth-strategy__channel--3 {
  right: 14%;
  top: 16%;
}

.growth-strategy__channel--4 {
  right: 24%;
  top: 36%;
}

.growth-strategy__channel--5 {
  left: 18%;
  bottom: 20%;
}

.growth-strategy__channel--6 {
  right: 15%;
  bottom: 17%;
}

.growth-strategy__channel--prioritise {
  background: rgba(220, 230, 217, 0.94);
}

.growth-strategy__channel--invest {
  background: rgba(221, 211, 246, 0.94);
}

.growth-strategy__channel--test {
  background: rgba(238, 227, 185, 0.94);
}

.growth-strategy__channel--later {
  background: rgba(215, 228, 234, 0.94);
}

.growth-strategy__roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-top: clamp(50px, 6vw, 76px);

  border-top: 1px solid rgba(57, 51, 46, 0.14);
  border-bottom: 1px solid rgba(57, 51, 46, 0.14);
}

.growth-strategy__roadmap > div {
  min-height: 210px;

  padding: 24px clamp(18px, 2.5vw, 34px);

  border-right: 1px solid rgba(57, 51, 46, 0.14);
}

.growth-strategy__roadmap > div:last-child {
  border-right: 0;
}

.growth-strategy__roadmap .mono {
  color: var(--muted);
  font-size: 7px;
}

.growth-strategy__roadmap strong {
  display: block;

  margin: 10px 0 17px;

  font-family: var(--font-script);
  font-size: clamp(1.6rem, 2vw, 2.1rem);
}

.growth-strategy__roadmap ul {
  list-style: none;

  display: grid;
  gap: 9px;

  margin: 0;
  padding: 0;
}

.growth-strategy__roadmap li {
  position: relative;

  padding-left: 14px;

  color: var(--muted);
  font-size: 9px;
}

.growth-strategy__roadmap li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.62em;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #7c956f;
}

/* =========================================================
   76. SPECIAL SECTION — THE GROWTH SYSTEM

   Desktop behaviour:
   - Left visual remains sticky.
   - Right stages provide the scroll distance.
   - Active stage updates the circular system.
   - Sticky parent MUST NOT use overflow:hidden.
   ========================================================= */

.growth-system {
  position: relative;

  /*
   * IMPORTANT:
   * Do not use overflow:hidden here.
   * It prevents the sticky map from behaving correctly.
   *
   * overflow:clip keeps decorative overflow contained
   * without creating a scroll container.
   */
  overflow: clip;

  background:
    radial-gradient(
      circle at 90% 9%,
      rgba(255, 255, 255, 0.53),
      transparent 22%
    ),
    radial-gradient(
      circle at 7% 93%,
      rgba(238, 227, 185, 0.24),
      transparent 25%
    ),
    linear-gradient(130deg, #e3d9f0 0%, #e7e2df 46%, #dce8d9 100%);

  border-bottom: 1px solid var(--border-soft);
}

/* =========================================================
   Growth System — heading
   ========================================================= */

.growth-system__head {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.32fr)
    minmax(0, 0.68fr);

  gap: clamp(34px, 7vw, 100px);

  align-items: start;

  margin-bottom: clamp(56px, 7vw, 94px);
}

.growth-system__head h2 {
  margin: 0 0 16px;
}

.growth-system__head p {
  margin: 0;

  color: rgba(57, 51, 46, 0.68);
}

/* =========================================================
   Growth System — two-column scroll layout
   ========================================================= */

.growth-system__layout {
  display: grid;

  grid-template-columns:
    minmax(420px, 0.92fr)
    minmax(0, 1.08fr);

  gap: clamp(64px, 8vw, 130px);

  align-items: start;
}

/* =========================================================
   Growth System — sticky visual
   ========================================================= */

.growth-system__map {
  --growth-system-progress: 0%;

  position: sticky;

  top: calc(var(--header-h) + 95px);

  align-self: start;

  width: min(100%, 540px);

  aspect-ratio: 1;

  margin-inline: auto;

  /*
   * Prevent an old reveal transform from interfering
   * with sticky positioning.
   */
  transform: none;
}

/* =========================================================
   Growth System — orbit
   ========================================================= */

.growth-system__orbit {
  position: absolute;

  inset: 9%;

  border-radius: 50%;

  background: conic-gradient(
    #8065a3 0%,
    #87a783 var(--growth-system-progress),
    rgba(57, 51, 46, 0.1) var(--growth-system-progress),
    rgba(57, 51, 46, 0.1) 100%
  );
}

.growth-system__orbit::after {
  content: "";

  position: absolute;

  inset: 3px;

  border-radius: 50%;

  background: #e5e1e4;
}

.growth-system__orbit-progress {
  display: none;
}

/* =========================================================
   Growth System — centre
   ========================================================= */

.growth-system__core {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 3;

  width: 150px;
  height: 150px;

  display: grid;

  place-items: center;
  align-content: center;

  gap: 5px;

  border-radius: 50%;

  background: #302b32;

  color: #fff8f1;

  box-shadow: 0 24px 60px rgba(57, 51, 46, 0.18);

  transform: translate(-50%, -50%);
}

.growth-system__core i {
  margin-bottom: 3px;

  color: #cbb4e7;

  font-size: 18px;
}

.growth-system__core strong {
  font-family: var(--font-script);

  font-size: 2rem;

  line-height: 1;
}

.growth-system__core span {
  color: rgba(255, 248, 241, 0.54);

  font-family: var(--font-mono);

  font-size: 6px;

  text-transform: uppercase;
}

/* =========================================================
   Growth System — orbit nodes
   ========================================================= */

.growth-system-node {
  position: absolute;

  z-index: 5;

  width: 104px;

  display: grid;

  justify-items: center;

  gap: 7px;

  text-align: center;

  opacity: 0.38;

  transition:
    opacity 0.32s ease,
    transform 0.34s var(--ease);
}

.growth-system-node > span {
  width: 47px;
  height: 47px;

  display: grid;

  place-items: center;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 50%;

  background: rgba(255, 253, 249, 0.82);

  color: #8065a3;

  box-shadow: var(--shadow-sm);

  transition:
    background 0.32s ease,
    color 0.32s ease,
    box-shadow 0.32s ease,
    transform 0.32s var(--ease);
}

.growth-system-node strong {
  font-size: 8px;

  transition: color 0.32s ease;
}

/* Individual positions */

.growth-system-node--1 {
  left: 50%;
  top: 0;

  transform: translateX(-50%);
}

.growth-system-node--2 {
  right: 0;
  top: 25%;
}

.growth-system-node--3 {
  right: 2%;
  bottom: 21%;
}

.growth-system-node--4 {
  left: 50%;
  bottom: 0;

  transform: translateX(-50%);
}

.growth-system-node--5 {
  left: 1%;
  bottom: 21%;
}

.growth-system-node--6 {
  left: 0;
  top: 25%;
}

/* Active node */

.growth-system-node.is-active {
  opacity: 1;

  transform: scale(1.07);
}

.growth-system-node--1.is-active,
.growth-system-node--4.is-active {
  transform: translateX(-50%) scale(1.07);
}

.growth-system-node.is-active > span {
  background: var(--paper);

  color: #6b8b70;

  box-shadow: 0 15px 35px rgba(57, 51, 46, 0.12);

  transform: scale(1.08);
}

/* =========================================================
   Growth System — scrolling stages
   ========================================================= */

.growth-system__stages {
  position: relative;

  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

/*
 * This is what gives the sticky visual enough time
 * to actually remain on screen while the story changes.
 */
.growth-system-stage {
  min-height: min(62vh, 560px);

  display: grid;

  grid-template-columns:
    38px
    48px
    minmax(0, 1fr);

  gap: 15px;

  align-content: center;
  align-items: center;

  padding: clamp(54px, 7vw, 92px) 4px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.14);

  opacity: 0.38;

  transition:
    opacity 0.34s ease,
    padding 0.34s var(--ease);
}

.growth-system-stage.is-active {
  opacity: 1;

  padding-left: 15px;
}

/* Stage number */

.growth-system-stage > .mono {
  color: var(--muted);

  font-size: 7px;
}

/* Stage icon */

.growth-system-stage__icon {
  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  border: 1px solid rgba(57, 51, 46, 0.07);

  border-radius: 14px;

  background: rgba(255, 253, 249, 0.46);

  color: #8065a3;

  transition:
    transform 0.32s var(--ease),
    background 0.32s ease,
    color 0.32s ease;
}

.growth-system-stage:nth-child(2) .growth-system-stage__icon {
  color: #a16d63;
}

.growth-system-stage:nth-child(3) .growth-system-stage__icon {
  color: #8b743f;
}

.growth-system-stage:nth-child(4) .growth-system-stage__icon {
  color: #668a9b;
}

.growth-system-stage:nth-child(5) .growth-system-stage__icon {
  color: #6d8c72;
}

.growth-system-stage:nth-child(6) .growth-system-stage__icon {
  color: #8065a3;
}

.growth-system-stage.is-active .growth-system-stage__icon {
  background: rgba(255, 253, 249, 0.92);

  transform: rotate(-3deg) scale(1.08);
}

/* Stage copy */

.growth-system-stage h3 {
  margin: 0 0 7px;

  font-size: clamp(1.8rem, 2.5vw, 2.65rem);
}

.growth-system-stage p {
  margin: 0;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.55;
}

/* =========================================================
   Growth System — closing statement
   ========================================================= */

.growth-system__closing {
  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr);

  gap: 12px;

  align-items: center;

  max-width: 760px;

  margin: clamp(54px, 7vw, 86px) 0 0 auto;

  padding-top: 20px;

  border-top: 1px solid rgba(57, 51, 46, 0.14);

  font-size: 11px;

  font-weight: 650;
}

.growth-system__closing i {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--sage);

  color: #67846c;
}

/* =========================================================
   Growth System — tablet
   ========================================================= */

@media (max-width: 1020px) {
  .growth-system__layout {
    grid-template-columns:
      minmax(350px, 0.86fr)
      minmax(0, 1.14fr);

    gap: 48px;
  }

  .growth-system__map {
    width: min(100%, 460px);

    top: calc(var(--header-h) + 84px);
  }

  .growth-system__core {
    width: 130px;
    height: 130px;
  }

  .growth-system-node {
    width: 90px;
  }

  .growth-system-stage {
    min-height: 56vh;
  }
}

/* =========================================================
   Growth System — mobile

   The circular visual disappears on mobile because sticky
   side-by-side storytelling becomes worse on narrow screens.

   Instead the scroll state is shown through a vertical line
   and highlighted stages.
   ========================================================= */

@media (max-width: 760px) {
  .growth-system {
    overflow: clip;
  }

  .growth-system__head {
    grid-template-columns: 1fr;
  }

  .growth-system__layout {
    display: block;
  }

  .growth-system__map {
    display: none;
  }

  .growth-system__stages {
    position: relative;

    padding-left: 34px;

    border-top: 0;
  }

  .growth-system__stages::before {
    content: "";

    position: absolute;

    left: 11px;
    top: 28px;
    bottom: 28px;

    width: 2px;

    border-radius: 999px;

    background: linear-gradient(
      180deg,
      #9274b6,
      #c9948c,
      #c4af62,
      #7d9eaa,
      #789977
    );
  }

  .growth-system-stage {
    position: relative;

    min-height: 46svh;

    grid-template-columns:
      30px
      42px
      minmax(0, 1fr);

    gap: 10px;

    padding: 42px 0;

    opacity: 0.52;
  }

  .growth-system-stage::before {
    content: "";

    position: absolute;

    left: -28px;
    top: 50%;

    width: 12px;
    height: 12px;

    border: 3px solid #e5e1e4;

    border-radius: 50%;

    background: #9b7aba;

    transform: translateY(-50%);

    transition:
      transform 0.3s var(--ease),
      background 0.3s ease;
  }

  .growth-system-stage.is-active {
    padding-left: 10px;

    opacity: 1;
  }

  .growth-system-stage.is-active::before {
    background: #6e906f;

    transform: translateY(-50%) scale(1.3);
  }

  .growth-system__closing {
    margin-left: 34px;
  }
}

/* =========================================================
   Growth System — small mobile
   ========================================================= */

@media (max-width: 520px) {
  .growth-system-stage {
    min-height: 42svh;

    grid-template-columns:
      27px
      39px
      minmax(0, 1fr);
  }

  .growth-system-stage__icon {
    width: 39px;
    height: 39px;

    border-radius: 12px;
  }

  .growth-system-stage h3 {
    font-size: clamp(1.65rem, 8vw, 2.15rem);
  }
}

/* =========================================================
   Growth System — reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .growth-system__map,
  .growth-system-node,
  .growth-system-node.is-active,
  .growth-system-stage,
  .growth-system-stage.is-active,
  .growth-system-stage__icon,
  .growth-system-stage::before {
    transition: none !important;
  }

  .growth-system-node--1,
  .growth-system-node--4,
  .growth-system-node--1.is-active,
  .growth-system-node--4.is-active {
    transform: translateX(-50%) !important;
  }
}

/* =========================================================
   VISIBILITY & GROWTH — COMPACT GROWTH SYSTEM

   - Smaller overall composition
   - Less scroll distance
   - Passed nodes remain active
   - Current node receives stronger emphasis
   ========================================================= */

/* =========================================================
   Growth System — tighter overall rhythm
   ========================================================= */

.growth-system__head {
  margin-bottom: clamp(38px, 5vw, 62px);
}

.growth-system__layout {
  grid-template-columns:
    minmax(340px, 0.82fr)
    minmax(0, 1.18fr);

  gap: clamp(48px, 7vw, 96px);
}

/* =========================================================
   Growth System — smaller sticky visual
   ========================================================= */

.growth-system__map {
  width: min(100%, 410px);

  top: calc(var(--header-h) + 86px);
}

/* Centre */

.growth-system__core {
  width: 112px;
  height: 112px;
}

.growth-system__core i {
  font-size: 14px;
}

.growth-system__core strong {
  font-size: 1.65rem;
}

/* =========================================================
   Growth System — smaller orbit nodes
   ========================================================= */

.growth-system-node {
  width: 82px;

  gap: 5px;

  opacity: 0.3;
}

.growth-system-node > span {
  width: 39px;
  height: 39px;

  font-size: 9px;
}

.growth-system-node strong {
  font-size: 7px;
}

/* =========================================================
   Passed nodes

   Once a stage has been passed, its icon remains coloured.
   ========================================================= */

.growth-system-node.is-passed {
  opacity: 0.78;
}

.growth-system-node.is-passed > span {
  background: var(--sage);

  color: #64816a;

  box-shadow: 0 8px 20px rgba(57, 51, 46, 0.07);
}

/* =========================================================
   Current node

   Stronger than completed nodes.
   ========================================================= */

.growth-system-node.is-active {
  opacity: 1;
}

.growth-system-node.is-active > span {
  background: #302b32;

  color: #fff8f1;

  box-shadow: 0 11px 26px rgba(57, 51, 46, 0.15);

  transform: scale(1.08);
}

.growth-system-node.is-active strong {
  color: var(--ink);
}

/* Keep the top / bottom nodes correctly centred */

.growth-system-node--1.is-passed,
.growth-system-node--4.is-passed {
  transform: translateX(-50%);
}

.growth-system-node--1.is-active,
.growth-system-node--4.is-active {
  transform: translateX(-50%) scale(1.04);
}

/* =========================================================
   Growth System — shorter scrolling stages
   ========================================================= */

.growth-system-stage {
  min-height: clamp(250px, 36vh, 340px);

  grid-template-columns:
    32px
    42px
    minmax(0, 1fr);

  gap: 12px;

  padding: clamp(34px, 4vw, 54px) 2px;
}

.growth-system-stage.is-active {
  padding-left: 10px;
}

.growth-system-stage__icon {
  width: 40px;
  height: 40px;

  border-radius: 12px;
}

.growth-system-stage h3 {
  font-size: clamp(1.55rem, 2vw, 2.15rem);
}

.growth-system-stage p {
  font-size: 9px;
}

/* =========================================================
   Growth System — tighter closing
   ========================================================= */

.growth-system__closing {
  margin-top: clamp(38px, 5vw, 58px);
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1020px) {
  .growth-system__layout {
    grid-template-columns:
      minmax(300px, 0.78fr)
      minmax(0, 1.22fr);

    gap: 38px;
  }

  .growth-system__map {
    width: min(100%, 360px);
  }

  .growth-system__core {
    width: 100px;
    height: 100px;
  }

  .growth-system-node {
    width: 72px;
  }

  .growth-system-node > span {
    width: 36px;
    height: 36px;
  }

  .growth-system-stage {
    min-height: clamp(230px, 34vh, 310px);
  }
}

/* =========================================================
   Mobile

   Keep the mobile version compact too.
   ========================================================= */

@media (max-width: 760px) {
  .growth-system-stage {
    min-height: clamp(220px, 34svh, 300px);

    padding: 32px 0;
  }

  .growth-system-stage.is-active {
    padding-left: 8px;
  }

  /*
   * Previous mobile dots stay completed as the user passes.
   */
  .growth-system-stage.is-passed::before {
    background: #8ca889;
  }

  .growth-system-stage.is-active::before {
    background: #302b32;
  }
}

/* =========================================================
   77. VISIBILITY & GROWTH — MEASUREMENT PRINCIPLES
   ========================================================= */

.service-category-page--visibility-growth .service-category-quality {
  background: linear-gradient(135deg, #f0e7c6 0%, #f3eddb 48%, #e5ede1 100%);
}

.service-category-page--visibility-growth .webapps-quality__item:hover {
  background: rgba(255, 253, 249, 0.3);
}

.service-category-page--visibility-growth
  .webapps-quality__item:nth-child(1)
  > i {
  background: var(--sage);
  color: #67836c;
}

.service-category-page--visibility-growth
  .webapps-quality__item:nth-child(2)
  > i {
  background: var(--blue);
  color: #668a9b;
}

.service-category-page--visibility-growth
  .webapps-quality__item:nth-child(3)
  > i {
  background: var(--peach);
  color: #a16d63;
}

.service-category-page--visibility-growth
  .webapps-quality__item:nth-child(4)
  > i {
  background: var(--lav);
  color: #8065a3;
}

.service-category-page--visibility-growth
  .webapps-quality__item:nth-child(5)
  > i {
  background: var(--butter);
  color: #8c753f;
}

.service-category-page--visibility-growth
  .webapps-quality__item:nth-child(6)
  > i {
  background: var(--sage);
  color: #67836c;
}

.service-category-page--visibility-growth .service-category-final {
  background:
    radial-gradient(
      circle at 89% 11%,
      rgba(255, 255, 255, 0.52),
      transparent 21%
    ),
    linear-gradient(115deg, #dce7d8 0%, #eee4bd 48%, #eed6d8 100%);
}

/* =========================================================
   78. VISIBILITY & GROWTH — TABLET
   ========================================================= */

@media (max-width: 1020px) {
  .growth-seo__layout,
  .growth-campaign__layout,
  .growth-funnel__layout,
  .growth-strategy__layout,
  .growth-system__layout {
    grid-template-columns: 1fr;
  }

  .growth-seo__visual,
  .growth-campaign__system,
  .growth-funnel__visual,
  .growth-strategy__matrix,
  .growth-system__map {
    width: min(100%, 760px);
  }

  .growth-seo__visual,
  .growth-campaign__system,
  .growth-funnel__visual,
  .growth-strategy__matrix {
    margin-inline: auto;
  }

  .growth-system__map {
    position: relative;
    top: auto;
  }

  .growth-system__stages {
    max-width: 760px;
    margin-inline: auto;
  }
}

/* =========================================================
   79. VISIBILITY & GROWTH — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .service-category-page--visibility-growth .service-category-hero {
    min-height: 0;
  }

  .growth-seo__visual {
    min-height: 540px;
  }

  .growth-seo__image {
    inset: 0 3% 16% 0;
    border-radius: 22px;
  }

  .growth-seo__search {
    left: 4%;
    right: 7%;
  }

  .growth-seo__architecture {
    width: 64%;
  }

  .growth-seo__pillars {
    max-width: 43%;
  }

  .growth-campaign__system {
    min-height: 500px;

    grid-template-columns:
      128px
      40px
      minmax(0, 1fr);
  }

  .growth-campaign__creative {
    grid-template-columns: 34px minmax(0, 1fr);

    min-height: 61px;

    padding: 9px;
  }

  .growth-campaign__creative > i {
    width: 32px;
    height: 32px;
  }

  .growth-campaign__landing {
    height: 410px;
    border-radius: 22px;
  }

  .growth-campaign__journey {
    grid-template-columns: 1fr;
  }

  .growth-campaign__journey > div {
    min-height: 64px;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  }

  .growth-campaign__journey > div:last-child {
    border-bottom: 0;
  }

  .growth-campaign__journey-arrow {
    display: none;
  }

  .growth-campaign__footer {
    grid-template-columns: 1fr;
  }

  .growth-funnel__visual {
    padding: 20px;
    border-radius: 22px;
  }

  .growth-funnel-step__label {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .growth-funnel-step__label code {
    grid-column: 2;
    width: fit-content;
  }

  .growth-strategy__matrix {
    min-height: 470px;
    margin-left: 28px;
  }

  .growth-strategy__channel {
    font-size: 7px;
  }

  .growth-strategy__channel--1 {
    left: 11%;
  }

  .growth-strategy__channel--2 {
    left: 24%;
    top: 34%;
  }

  .growth-strategy__channel--3 {
    right: 8%;
  }

  .growth-strategy__channel--4 {
    right: 14%;
    top: 38%;
  }

  .growth-strategy__roadmap {
    grid-template-columns: 1fr;
  }

  .growth-strategy__roadmap > div {
    min-height: 0;

    border-right: 0;
    border-bottom: 1px solid rgba(57, 51, 46, 0.14);
  }

  .growth-strategy__roadmap > div:last-child {
    border-bottom: 0;
  }

  .growth-system__head {
    grid-template-columns: 1fr;
  }

  /*
   * Circular Growth System becomes a clearer vertical
   * journey on mobile.
   */
  .growth-system__map {
    display: none;
  }

  .growth-system__stages {
    position: relative;

    padding-left: 34px;

    border-top: 0;
  }

  .growth-system__stages::before {
    content: "";

    position: absolute;

    left: 11px;
    top: 24px;
    bottom: 24px;

    width: 2px;

    border-radius: 999px;

    background: linear-gradient(180deg, #a889ce, #8fae8c);
  }

  .growth-system-stage {
    position: relative;

    min-height: 145px;

    grid-template-columns:
      30px
      42px
      minmax(0, 1fr);

    padding: 22px 0;

    opacity: 0.72;
  }

  .growth-system-stage::before {
    content: "";

    position: absolute;

    left: -28px;
    top: 50%;

    width: 12px;
    height: 12px;

    border: 3px solid #e3dfe1;
    border-radius: 50%;

    background: #8065a3;

    transform: translateY(-50%);

    transition:
      transform 0.3s var(--ease),
      background 0.3s ease;
  }

  .growth-system-stage.is-active::before {
    background: #6f906f;

    transform: translateY(-50%) scale(1.25);
  }

  .growth-system-stage.is-active {
    padding-inline: 10px;
  }

  .growth-system__closing {
    margin-left: 34px;
  }
}

/* =========================================================
   80. VISIBILITY & GROWTH — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .growth-seo__visual {
    min-height: 480px;
  }

  .growth-seo__search {
    right: 3%;
  }

  .growth-seo__query:nth-of-type(n + 3) {
    display: none;
  }

  .growth-seo__architecture {
    width: 72%;
    padding: 13px;
  }

  .growth-seo__pillars {
    left: 1%;
    max-width: 37%;
  }

  .growth-seo__pillars span:nth-child(n + 3) {
    display: none;
  }

  .growth-campaign__system {
    min-height: 430px;

    grid-template-columns:
      104px
      28px
      minmax(0, 1fr);
  }

  .growth-campaign__creative {
    min-height: 56px;
    grid-template-columns: 1fr;
  }

  .growth-campaign__creative > i {
    display: none;
  }

  .growth-campaign__landing {
    height: 350px;
  }

  .growth-strategy__matrix {
    min-height: 420px;
  }

  .growth-strategy__channel {
    min-height: 31px;
    padding: 5px 8px;
  }

  .growth-strategy__channel--2 {
    left: 17%;
  }

  .growth-strategy__channel--4 {
    right: 8%;
  }

  .growth-system-stage {
    grid-template-columns:
      26px
      38px
      minmax(0, 1fr);

    gap: 9px;
  }

  .growth-system-stage__icon {
    width: 38px;
    height: 38px;

    border-radius: 12px;
  }
}

/* =========================================================
   81. VISIBILITY & GROWTH — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .growth-campaign__creative,
  .growth-funnel-step__bar,
  .growth-strategy__channel,
  .growth-system-node,
  .growth-system-stage,
  .growth-system-stage::before {
    transition: none !important;
    transform: none !important;
  }

  .growth-system-node--1,
  .growth-system-node--4,
  .growth-system-node--1.is-active,
  .growth-system-node--4.is-active {
    transform: translateX(-50%) !important;
  }

  .growth-funnel-step__bar {
    width: var(--funnel-width) !important;
  }
}

/* =========================================================
   SALTY THEME — CONTENT & BRAND

   Category identity:
   - editorial
   - tactile
   - visual
   - brand-led
   - less technical than previous service categories

   Native service sections:
   - brand-system
   - social-ecosystem
   - production-board
   - email-lifecycle
   ========================================================= */

/* =========================================================
   82. CONTENT & BRAND — CATEGORY TONE
   ========================================================= */

.service-category-page--content-brand .service-category-hero {
  min-height: clamp(580px, 64svh, 720px);

  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(255, 255, 255, 0.62),
      transparent 22%
    ),
    radial-gradient(
      circle at 7% 91%,
      rgba(238, 214, 216, 0.32),
      transparent 27%
    ),
    linear-gradient(135deg, #eee0d8 0%, #eee3df 44%, #ded6eb 100%);
}

.service-category-page--content-brand .service-category-hero__image {
  transform: rotate(-0.7deg);
}

.service-category-page--content-brand .service-category-hero__note {
  background: rgba(238, 214, 216, 0.94);
  color: #8d615f;
}

.service-category-page--content-brand .service-category-index__link:hover,
.service-category-page--content-brand .service-category-index__link.is-active {
  background: rgba(238, 214, 216, 0.42);
  color: #986a68;
}

/* =========================================================
   83. BRAND STRATEGY
   ========================================================= */

.service-detail-section--brand-system {
  background: linear-gradient(135deg, #f4eee7, #eee6ea);
}

.brand-strategy__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(470px, 1.18fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.brand-strategy__visual {
  position: relative;

  min-height: 620px;
}

.brand-strategy__image {
  position: absolute;

  inset: 0 12% 5% 0;

  margin: 0;

  overflow: hidden;

  border-radius: 27px;

  background: #ded7d2;

  box-shadow: var(--shadow-md);
}

.brand-strategy__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.brand-strategy__core {
  position: absolute;

  left: 7%;
  top: 9%;

  z-index: 4;

  width: min(330px, 56%);

  padding: 18px;

  border-radius: 18px;

  background: #302b32;

  color: #fff8f1;

  box-shadow: var(--shadow-md);
}

.brand-strategy__core .mono {
  color: rgba(255, 248, 241, 0.48);
  font-size: 6px;
}

.brand-strategy__core strong {
  display: block;

  margin-top: 8px;

  font-family: var(--font-script);
  font-size: clamp(1.6rem, 2vw, 2.15rem);
  line-height: 1.05;
}

.brand-strategy__layers {
  position: absolute;

  right: 0;
  bottom: 0;

  z-index: 5;

  width: min(340px, 62%);

  display: grid;
  gap: 7px;
}

.brand-strategy-layer {
  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr);

  gap: 10px;

  align-items: center;

  padding: 11px;

  border: 1px solid rgba(57, 51, 46, 0.08);
  border-radius: 16px;

  background: rgba(255, 253, 249, 0.94);

  box-shadow: var(--shadow-sm);

  transition: transform 0.3s var(--ease);
}

.brand-strategy-layer:hover {
  transform: translateX(-5px);
}

.brand-strategy-layer > span {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: var(--lav);
  color: #8065a3;
}

.brand-strategy-layer:nth-child(2) > span {
  background: var(--blush);
  color: #9d6a68;
}

.brand-strategy-layer:nth-child(3) > span {
  background: var(--butter);
  color: #8c753f;
}

.brand-strategy-layer:nth-child(4) > span {
  background: var(--sage);
  color: #66836b;
}

.brand-strategy-layer strong {
  display: block;

  margin-bottom: 3px;

  font-size: 8px;
}

.brand-strategy-layer p {
  margin: 0;

  color: var(--muted);

  font-size: 7px;
}

/* =========================================================
   84. SOCIAL MEDIA — CONTENT ECOSYSTEM
   ========================================================= */

.service-detail-section--social-ecosystem {
  background:
    radial-gradient(
      circle at 91% 10%,
      rgba(255, 255, 255, 0.47),
      transparent 23%
    ),
    linear-gradient(135deg, #dfd4ef, #eddbdc 52%, #eedfcf);
}

.social-ecosystem__layout {
  display: grid;

  grid-template-columns:
    minmax(480px, 1.14fr)
    minmax(0, 0.86fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.social-ecosystem__visual {
  position: relative;
}

.social-ecosystem__grid {
  position: relative;

  min-height: 620px;
}

.social-ecosystem__post {
  position: absolute;

  margin: 0;

  overflow: hidden;

  border: 7px solid var(--paper);
  border-radius: 23px;

  background: #ddd6d1;

  box-shadow: 0 22px 48px rgba(57, 51, 46, 0.12);

  transition: transform 0.35s var(--ease);
}

.social-ecosystem__post:hover {
  z-index: 8;

  transform: translateY(-5px) rotate(0deg);
}

.social-ecosystem__post img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.social-ecosystem__post > span {
  position: absolute;

  right: 10px;
  top: 10px;

  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(255, 253, 249, 0.89);

  font-size: 10px;
}

.social-ecosystem__post--1 {
  left: 1%;
  top: 5%;

  width: 44%;
  height: 54%;

  transform: rotate(-3deg);
}

.social-ecosystem__post--2 {
  right: 3%;
  top: 0;

  width: 44%;
  height: 46%;

  transform: rotate(2.4deg);
}

.social-ecosystem__post--3 {
  right: 10%;
  bottom: 2%;

  width: 49%;
  height: 47%;

  transform: rotate(-1.3deg);
}

.social-ecosystem__statement {
  position: absolute;

  left: 8%;
  bottom: 7%;

  z-index: 5;

  width: 34%;

  padding: 15px;

  border-radius: 17px;

  background: #302b32;

  color: #fff8f1;

  transform: rotate(1.5deg);
}

.social-ecosystem__statement .mono {
  color: rgba(255, 248, 241, 0.46);
  font-size: 6px;
}

.social-ecosystem__statement strong {
  display: block;

  margin-top: 7px;

  font-family: var(--font-script);
  font-size: 1.55rem;
  line-height: 1;
}

.social-ecosystem__pillars {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 18px;
}

.social-ecosystem__pillars span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 7px 9px;

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.65);

  font-family: var(--font-mono);
  font-size: 6px;
}

.social-ecosystem__calendar {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  margin-top: clamp(50px, 6vw, 76px);

  border-top: 1px solid rgba(57, 51, 46, 0.14);
  border-bottom: 1px solid rgba(57, 51, 46, 0.14);
}

.social-ecosystem__calendar > div {
  padding: 20px;

  border-right: 1px solid rgba(57, 51, 46, 0.14);
}

.social-ecosystem__calendar > div:last-child {
  border-right: 0;
}

.social-ecosystem__calendar .mono {
  color: var(--muted);
  font-size: 6px;
}

.social-ecosystem__calendar strong {
  display: block;

  margin-top: 8px;

  font-size: 9px;
}

/* =========================================================
   85. CONTENT PRODUCTION
   ========================================================= */

.service-detail-section--production-board {
  background: linear-gradient(180deg, #f4efe7, #eee8df);
}

.content-production__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(480px, 1.2fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.content-production__board {
  position: relative;

  min-height: 590px;
}

.content-production__image {
  position: absolute;

  inset: 0 0 8% 7%;

  margin: 0;

  overflow: hidden;

  border-radius: 27px;

  background: #dfd7cd;

  box-shadow: var(--shadow-md);
}

.content-production__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.content-production__formats {
  position: absolute;

  left: 0;
  bottom: 0;

  z-index: 4;

  max-width: 52%;

  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}

.content-production__formats span {
  padding: 7px 9px;

  border: 1px solid rgba(57, 51, 46, 0.08);
  border-radius: 999px;

  background: rgba(255, 253, 249, 0.94);

  box-shadow: var(--shadow-sm);

  font-size: 6px;
}

.content-production__steps {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  margin-top: clamp(54px, 7vw, 86px);

  border-top: 1px solid rgba(57, 51, 46, 0.14);
  border-bottom: 1px solid rgba(57, 51, 46, 0.14);
}

.content-production__steps > div {
  position: relative;

  min-height: 125px;

  display: grid;
  align-content: center;

  gap: 7px;

  padding: 17px 20px;

  border-right: 1px solid rgba(57, 51, 46, 0.14);
}

.content-production__steps > div:last-child {
  border-right: 0;
}

.content-production__step-icon {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: var(--peach);
  color: #9f6c63;
}

.content-production__steps > div:nth-child(2) .content-production__step-icon {
  background: var(--butter);
  color: #89743f;
}

.content-production__steps > div:nth-child(3) .content-production__step-icon {
  background: var(--lav);
  color: #8065a3;
}

.content-production__steps > div:nth-child(4) .content-production__step-icon {
  background: var(--blue);
  color: #668997;
}

.content-production__steps > div:nth-child(5) .content-production__step-icon {
  background: var(--sage);
  color: #68866d;
}

.content-production__steps .mono {
  color: var(--muted);
  font-size: 6px;
}

.content-production__steps strong {
  font-size: 9px;
}

.content-production__step-arrow {
  position: absolute;

  right: -5px;
  top: 50%;

  z-index: 2;

  color: rgba(57, 51, 46, 0.25);

  font-size: 8px;
}

/* =========================================================
   86. EMAIL MARKETING
   ========================================================= */

.service-detail-section--email-lifecycle {
  color: #f8f2eb;

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(221, 211, 246, 0.15),
      transparent 25%
    ),
    radial-gradient(
      circle at 8% 90%,
      rgba(238, 214, 216, 0.11),
      transparent 26%
    ),
    #302b32;
}

.service-detail-section--email-lifecycle .service-detail-section__header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.service-detail-section--email-lifecycle .service-detail-section__number,
.service-detail-section--email-lifecycle .service-detail-section__eyebrow {
  color: rgba(248, 242, 235, 0.43);
}

.service-detail-section--email-lifecycle .service-detail-section__icon {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(221, 211, 246, 0.1);
  color: #d2beeb;
}

.service-detail-section--email-lifecycle
  .service-detail-section__identity
  strong,
.service-detail-section--email-lifecycle h2 {
  color: #fff8f1;
}

.service-detail-section--email-lifecycle .service-detail-section__lead {
  color: rgba(248, 242, 235, 0.91);
}

.service-detail-section--email-lifecycle
  .service-detail-section__copy
  > p:not(.service-detail-section__lead) {
  color: rgba(248, 242, 235, 0.58);
}

.service-detail-section--email-lifecycle
  .service-detail-section__capabilities--stacked
  span {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(248, 242, 235, 0.68);
}

.service-detail-section--email-lifecycle
  .service-detail-section__capabilities--stacked
  span:nth-child(odd) {
  border-right-color: rgba(255, 255, 255, 0.1);
}

.service-detail-section--email-lifecycle .service-detail-section__cta {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff8f1;
}

.email-lifecycle__layout {
  display: grid;

  grid-template-columns:
    minmax(480px, 1.15fr)
    minmax(0, 0.85fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.email-lifecycle__window {
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 25px;

  background: #3a343b;

  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.23);
}

.email-lifecycle__window-bar {
  min-height: 43px;

  display: flex;
  align-items: center;

  gap: 6px;

  padding: 10px 13px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.email-lifecycle__window-bar > span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.2);
}

.email-lifecycle__window-bar strong {
  margin-left: auto;

  color: rgba(248, 242, 235, 0.38);
  font-size: 6px;
}

.email-lifecycle__window figure {
  height: 455px;
  margin: 0;
}

.email-lifecycle__window img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.email-lifecycle__signals {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 13px;
}

.email-lifecycle__signals span {
  padding: 6px 9px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;

  color: rgba(248, 242, 235, 0.5);

  font-size: 6px;
}

.email-lifecycle__flow {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  margin-top: clamp(56px, 7vw, 86px);

  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.email-lifecycle__flow article {
  position: relative;

  min-height: 155px;

  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr);

  gap: 10px;

  align-content: center;
  align-items: start;

  padding: 20px;

  border-right: 1px solid rgba(255, 255, 255, 0.11);
}

.email-lifecycle__flow article:last-child {
  border-right: 0;
}

.email-lifecycle__flow article > span {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: rgba(221, 211, 246, 0.12);
  color: #d4c0ed;
}

.email-lifecycle__flow strong {
  display: block;

  margin-bottom: 5px;

  color: #fff8f1;
  font-size: 9px;
}

.email-lifecycle__flow p {
  margin: 0;

  color: rgba(248, 242, 235, 0.5);

  font-size: 8px;
}

.email-lifecycle__arrow {
  position: absolute;

  right: -5px;
  top: 50%;

  color: rgba(248, 242, 235, 0.28);

  font-size: 8px;
}

/* =========================================================
   87. SPECIAL SECTION — ONE BRAND, MANY EXPRESSIONS
   ========================================================= */

.brand-expression {
  background:
    radial-gradient(
      circle at 91% 10%,
      rgba(255, 255, 255, 0.49),
      transparent 23%
    ),
    linear-gradient(130deg, #f0dfd5 0%, #e8dcec 48%, #e1e9dc 100%);
}

.brand-expression__head {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.32fr)
    minmax(0, 0.68fr);

  gap: clamp(40px, 7vw, 100px);

  margin-bottom: clamp(50px, 6vw, 76px);
}

.brand-expression__head h2 {
  margin: 0 0 16px;
}

.brand-expression__head p {
  margin: 0;

  color: var(--muted);
}

.brand-expression__canvas {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.76fr)
    minmax(0, 1.24fr);

  gap: clamp(40px, 7vw, 96px);

  align-items: center;
}

.brand-expression__core {
  position: relative;

  padding: clamp(28px, 4vw, 48px);

  border-radius: 26px;

  background: #302b32;

  color: #fff8f1;

  box-shadow: var(--shadow-md);
}

.brand-expression__core::after {
  content: "";

  position: absolute;

  right: -20px;
  top: 50%;

  width: 20px;
  height: 1px;

  background: rgba(57, 51, 46, 0.22);
}

.brand-expression__core > .mono {
  color: rgba(255, 248, 241, 0.43);
  font-size: 6px;
}

.brand-expression__core h3 {
  margin: 12px 0 25px;

  color: #fff8f1;

  font-size: clamp(2rem, 3.2vw, 3.4rem);
}

.brand-expression__core > div {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}

.brand-expression__core > div span {
  padding: 6px 8px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;

  color: rgba(255, 248, 241, 0.66);

  font-family: var(--font-mono);
  font-size: 6px;
}

.brand-expression__touchpoints {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

.brand-expression-card {
  min-height: 165px;

  display: grid;

  grid-template-columns:
    43px
    minmax(0, 1fr);

  gap: 12px;

  align-content: center;

  padding: 20px;

  border-right: 1px solid rgba(57, 51, 46, 0.14);
  border-bottom: 1px solid rgba(57, 51, 46, 0.14);

  opacity: 0.62;

  cursor: default;

  transition:
    opacity 0.3s ease,
    background 0.3s ease,
    padding 0.3s var(--ease);
}

.brand-expression-card:nth-child(even) {
  border-right: 0;
}

.brand-expression-card:hover,
.brand-expression-card:focus-visible,
.brand-expression-card.is-active {
  padding-left: 27px;

  background: rgba(255, 253, 249, 0.28);

  opacity: 1;
}

.brand-expression-card > span {
  width: 41px;
  height: 41px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: rgba(255, 253, 249, 0.62);
  color: #8065a3;
}

.brand-expression-card:nth-child(2) > span,
.brand-expression-card:nth-child(5) > span {
  color: #a06c65;
}

.brand-expression-card:nth-child(3) > span,
.brand-expression-card:nth-child(6) > span {
  color: #68866d;
}

.brand-expression-card strong {
  display: block;

  margin-bottom: 5px;

  font-family: var(--font-script);
  font-size: 1.55rem;
  line-height: 1;
}

.brand-expression-card p {
  margin: 0;

  color: var(--muted);

  font-size: 8px;
  line-height: 1.5;
}

.brand-expression__closing {
  max-width: 760px;

  display: grid;

  grid-template-columns:
    39px
    minmax(0, 1fr);

  gap: 11px;

  align-items: center;

  margin: clamp(45px, 6vw, 70px) 0 0 auto;

  padding-top: 18px;

  border-top: 1px solid rgba(57, 51, 46, 0.14);

  font-weight: 650;
}

.brand-expression__closing i {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--lav);
  color: #8065a3;
}

/* =========================================================
   88. CONTENT & BRAND — QUALITY + CTA
   ========================================================= */

.service-category-page--content-brand .service-category-quality {
  background: linear-gradient(135deg, #f5eee7, #eee6e9 48%, #e8eee4);
}

.service-category-page--content-brand .service-category-final {
  background:
    radial-gradient(
      circle at 88% 9%,
      rgba(255, 255, 255, 0.5),
      transparent 22%
    ),
    linear-gradient(115deg, #eed6d8 0%, #ddd3f6 52%, #eee3b9 100%);
}

/* =========================================================
   89. CONTENT & BRAND — TABLET
   ========================================================= */

@media (max-width: 1020px) {
  .brand-strategy__layout,
  .social-ecosystem__layout,
  .content-production__layout,
  .email-lifecycle__layout,
  .brand-expression__canvas {
    grid-template-columns: 1fr;
  }

  .brand-strategy__visual,
  .social-ecosystem__visual,
  .content-production__board,
  .email-lifecycle__visual {
    width: min(100%, 760px);
  }

  .social-ecosystem__visual {
    order: 2;
  }

  .brand-expression__core {
    max-width: 560px;
  }

  .brand-expression__core::after {
    display: none;
  }
}

/* =========================================================
   90. CONTENT & BRAND — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .brand-strategy__visual {
    min-height: 520px;
  }

  .brand-strategy__image {
    inset: 0 6% 9% 0;
  }

  .brand-strategy__core {
    width: 62%;
  }

  .brand-strategy__layers {
    width: 68%;
  }

  .social-ecosystem__grid {
    min-height: 520px;
  }

  .social-ecosystem__statement {
    width: 40%;
  }

  .social-ecosystem__calendar {
    grid-template-columns: 1fr;
  }

  .social-ecosystem__calendar > div {
    display: grid;

    grid-template-columns:
      36px
      minmax(0, 1fr);

    align-items: center;

    min-height: 58px;

    border-right: 0;
    border-bottom: 1px solid rgba(57, 51, 46, 0.14);
  }

  .content-production__board {
    min-height: 450px;
  }

  .content-production__steps {
    grid-template-columns: 1fr;
  }

  .content-production__steps > div {
    min-height: 65px;

    grid-template-columns:
      38px
      28px
      minmax(0, 1fr);

    align-items: center;

    border-right: 0;
    border-bottom: 1px solid rgba(57, 51, 46, 0.14);
  }

  .content-production__step-arrow {
    display: none;
  }

  .email-lifecycle__window figure {
    height: 360px;
  }

  .email-lifecycle__flow {
    grid-template-columns: 1fr;
  }

  .email-lifecycle__flow article {
    min-height: 100px;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  }

  .email-lifecycle__arrow {
    display: none;
  }

  .brand-expression__head {
    grid-template-columns: 1fr;
  }

  .brand-expression__touchpoints {
    grid-template-columns: 1fr;
  }

  .brand-expression-card,
  .brand-expression-card:nth-child(even) {
    min-height: 120px;

    border-right: 0;
  }
}

/* =========================================================
   91. CONTENT & BRAND — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .brand-strategy__visual {
    min-height: 465px;
  }

  .brand-strategy__core {
    width: 68%;

    padding: 14px;
  }

  .brand-strategy__layers {
    width: 76%;
  }

  .brand-strategy-layer {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    padding: 8px;
  }

  .brand-strategy-layer > span {
    width: 32px;
    height: 32px;
  }

  .social-ecosystem__grid {
    min-height: 455px;
  }

  .social-ecosystem__statement {
    width: 46%;
  }

  .content-production__board {
    min-height: 390px;
  }

  .content-production__formats {
    max-width: 65%;
  }

  .brand-expression__core h3 {
    font-size: 2rem;
  }
}

/* =========================================================
   SALTY THEME — AI & AUTOMATION

   Service-native modules:
   - AI Strategy          → opportunity portfolio
   - AI Agents            → agent workflow
   - Business Automation  → orchestration workflow
   - Training / Visibility→ two-track adoption system
   - Signature            → AI Readiness
   ========================================================= */

/* =========================================================
   92. AI & AUTOMATION — CATEGORY TONE
   ========================================================= */

.service-category-page--ai-automation .service-category-hero {
  min-height: clamp(580px, 64svh, 720px);

  background:
    radial-gradient(
      circle at 88% 9%,
      rgba(255, 255, 255, 0.6),
      transparent 23%
    ),
    radial-gradient(
      circle at 7% 92%,
      rgba(215, 228, 234, 0.32),
      transparent 27%
    ),
    linear-gradient(135deg, #ded8e8 0%, #e6e7e5 48%, #d9e6e3 100%);
}

.service-category-page--ai-automation .service-category-hero__image {
  transform: rotate(0.55deg);
}

.service-category-page--ai-automation .service-category-hero__note {
  background: rgba(215, 228, 234, 0.95);

  color: #557986;
}

.service-category-page--ai-automation .service-category-hero__note i {
  color: #648a98;
}

.service-category-page--ai-automation .service-category-index__link:hover,
.service-category-page--ai-automation .service-category-index__link.is-active {
  background: rgba(215, 228, 234, 0.52);

  color: #5f8391;
}

/* =========================================================
   93. AI STRATEGY — OPPORTUNITY PORTFOLIO
   ========================================================= */

.service-detail-section--ai-opportunity-map {
  background: linear-gradient(135deg, #f3eee7, #e9ecea);
}

.ai-opportunity__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(500px, 1.2fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.ai-opportunity__visual {
  position: relative;

  padding-top: 90px;
}

.ai-opportunity__image {
  position: absolute;

  right: 0;
  top: 0;

  width: 42%;
  height: 155px;

  margin: 0;

  overflow: hidden;

  border-radius: 18px;

  background: #dce0df;

  box-shadow: var(--shadow-sm);
}

.ai-opportunity__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.ai-opportunity__table {
  position: relative;
  z-index: 2;

  overflow: hidden;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 22px;

  background: rgba(255, 253, 249, 0.91);

  box-shadow: var(--shadow-sm);
}

.ai-opportunity__table-head,
.ai-opportunity-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1.8fr)
    0.58fr
    0.7fr
    0.58fr;

  gap: 8px;

  align-items: center;
}

.ai-opportunity__table-head {
  min-height: 46px;

  padding: 9px 14px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.09);

  background: rgba(57, 51, 46, 0.035);

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 6px;

  text-transform: uppercase;
}

.ai-opportunity-row {
  min-height: 72px;

  padding: 11px 14px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.08);
}

.ai-opportunity-row:last-child {
  border-bottom: 0;
}

.ai-opportunity-row > div > .mono {
  display: block;

  margin-bottom: 4px;

  color: var(--muted);

  font-size: 5.5px;
}

.ai-opportunity-row > div > strong {
  font-size: 8px;
  line-height: 1.35;
}

.ai-opportunity-score {
  display: inline-flex;

  width: fit-content;

  padding: 5px 7px;

  border-radius: 999px;

  background: rgba(57, 51, 46, 0.05);

  font-family: var(--font-mono);
  font-size: 5.5px;

  text-transform: uppercase;
}

.ai-opportunity-score--high {
  background: var(--sage);

  color: #638269;
}

.ai-opportunity-score--medium {
  background: var(--butter);

  color: #88733f;
}

.ai-opportunity-score--low {
  background: var(--blue);

  color: #658897;
}

.ai-opportunity-score--risk-high {
  background: var(--blush);

  color: #9e6565;
}

.ai-opportunity-score--risk-medium {
  background: var(--butter);

  color: #88733f;
}

.ai-opportunity-score--risk-low {
  background: var(--sage);

  color: #638269;
}

.ai-opportunity__legend {
  display: flex;
  flex-wrap: wrap;

  gap: 8px 16px;

  margin-top: 13px;
}

.ai-opportunity__legend-item {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 6px;
}

.ai-opportunity__legend-item i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--line);
}

.ai-opportunity__legend-item--prioritise i {
  background: #789c7b;
}

.ai-opportunity__legend-item--test i {
  background: #b4a062;
}

.ai-opportunity__legend-item--control i {
  background: #ad7375;
}

/* =========================================================
   94. AI AGENTS — WORKFLOW
   ========================================================= */

.service-detail-section--agent-workflow {
  color: #f8f2eb;

  background:
    radial-gradient(
      circle at 91% 8%,
      rgba(215, 228, 234, 0.15),
      transparent 25%
    ),
    radial-gradient(
      circle at 8% 92%,
      rgba(221, 211, 246, 0.12),
      transparent 27%
    ),
    #302b32;
}

.service-detail-section--agent-workflow .service-detail-section__header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.service-detail-section--agent-workflow .service-detail-section__number,
.service-detail-section--agent-workflow .service-detail-section__eyebrow {
  color: rgba(248, 242, 235, 0.42);
}

.service-detail-section--agent-workflow .service-detail-section__icon {
  border-color: rgba(255, 255, 255, 0.1);

  background: rgba(215, 228, 234, 0.1);

  color: #b8d0db;
}

.service-detail-section--agent-workflow
  .service-detail-section__identity
  strong,
.service-detail-section--agent-workflow h2 {
  color: #fff8f1;
}

.service-detail-section--agent-workflow .service-detail-section__lead {
  color: rgba(248, 242, 235, 0.91);
}

.service-detail-section--agent-workflow
  .service-detail-section__copy
  > p:not(.service-detail-section__lead) {
  color: rgba(248, 242, 235, 0.56);
}

.service-detail-section--agent-workflow
  .service-detail-section__capabilities--stacked
  span {
  border-color: rgba(255, 255, 255, 0.1);

  color: rgba(248, 242, 235, 0.67);
}

.service-detail-section--agent-workflow
  .service-detail-section__capabilities--stacked
  span:nth-child(odd) {
  border-right-color: rgba(255, 255, 255, 0.1);
}

.service-detail-section--agent-workflow .service-detail-section__cta {
  border-color: rgba(255, 255, 255, 0.3);

  color: #fff8f1;
}

.ai-agent__layout {
  display: grid;

  grid-template-columns:
    minmax(520px, 1.18fr)
    minmax(0, 0.82fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.ai-agent__visual {
  position: relative;

  min-height: 610px;
}

.ai-agent__image {
  position: absolute;

  inset: 4% 9% 10% 4%;

  margin: 0;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.09);

  border-radius: 27px;

  background: #39343b;

  opacity: 0.55;
}

.ai-agent__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.ai-agent__workflow {
  position: relative;
  z-index: 3;

  display: grid;
  gap: 7px;

  width: min(88%, 540px);

  margin: 30px auto 0;
}

.ai-agent-step {
  position: relative;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr);

  gap: 11px;

  align-items: center;

  min-height: 66px;

  padding: 10px 13px;

  border: 1px solid rgba(255, 255, 255, 0.09);

  border-radius: 15px;

  background: rgba(48, 43, 50, 0.82);

  opacity: 0.48;

  backdrop-filter: blur(10px);

  transition:
    opacity 0.28s ease,
    transform 0.28s var(--ease),
    background 0.28s ease;
}

.ai-agent-step.is-active,
.ai-agent-step.is-passed {
  opacity: 1;
}

.ai-agent-step.is-active {
  background: rgba(84, 76, 87, 0.92);

  transform: translateX(7px);
}

.ai-agent-step__icon {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: rgba(215, 228, 234, 0.1);

  color: #b8d0db;
}

.ai-agent-step.is-passed .ai-agent-step__icon {
  background: rgba(220, 230, 217, 0.12);

  color: #b5d0b2;
}

.ai-agent-step strong {
  display: block;

  margin-bottom: 3px;

  color: #fff8f1;

  font-size: 8px;
}

.ai-agent-step p {
  margin: 0;

  color: rgba(248, 242, 235, 0.45);

  font-size: 7px;
}

.ai-agent-step__arrow {
  position: absolute;

  left: 20px;
  bottom: -8px;

  z-index: 3;

  color: rgba(248, 242, 235, 0.26);

  font-size: 6px;

  transform: rotate(90deg);
}

.ai-agent__tools {
  position: absolute;

  right: 0;
  bottom: 0;

  z-index: 5;

  max-width: 54%;

  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  padding: 10px;

  border: 1px solid rgba(255, 255, 255, 0.09);

  border-radius: 15px;

  background: rgba(48, 43, 50, 0.91);

  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.ai-agent__tools > .mono {
  width: 100%;

  color: rgba(248, 242, 235, 0.34);

  font-size: 5.5px;
}

.ai-agent__tools > span:not(.mono) {
  padding: 5px 7px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);

  color: rgba(248, 242, 235, 0.65);

  font-size: 6px;
}

/* =========================================================
   95. BUSINESS AUTOMATION
   ========================================================= */

.service-detail-section--automation-orchestration {
  background:
    radial-gradient(
      circle at 90% 9%,
      rgba(255, 255, 255, 0.58),
      transparent 23%
    ),
    linear-gradient(135deg, #dce8e4, #e6ebe3 48%, #e8e2d7);
}

.automation-orchestration__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(480px, 1.18fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.automation-orchestration__visual {
  position: relative;

  min-height: 600px;
}

.automation-orchestration__image {
  position: absolute;

  inset: 6% 0 8% 12%;

  margin: 0;

  overflow: hidden;

  border-radius: 27px;

  background: #dfe3dd;

  opacity: 0.5;
}

.automation-orchestration__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.automation-flow {
  position: relative;
  z-index: 4;

  width: min(88%, 520px);

  margin: 0 auto;

  padding: 22px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 24px;

  background: rgba(255, 253, 249, 0.88);

  box-shadow: var(--shadow-md);

  backdrop-filter: blur(10px);
}

.automation-flow__trigger,
.automation-flow__outcome {
  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr);

  gap: 11px;

  align-items: center;

  padding: 12px;

  border-radius: 15px;

  background: rgba(215, 228, 234, 0.56);
}

.automation-flow__trigger > span {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: #fff;

  color: #658897;
}

.automation-flow__trigger strong,
.automation-flow__outcome strong {
  display: block;

  margin-bottom: 3px;

  font-size: 8px;
}

.automation-flow__trigger p,
.automation-flow__outcome p {
  margin: 0;

  color: var(--muted);

  font-size: 7px;
}

.automation-flow__down {
  display: block;

  width: fit-content;

  margin: 9px auto;

  color: rgba(57, 51, 46, 0.3);

  font-size: 8px;
}

.automation-flow__logic {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 7px;
}

.automation-flow__logic span,
.automation-flow__systems span {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 7px;

  border: 1px solid rgba(57, 51, 46, 0.08);

  border-radius: 12px;

  background: rgba(255, 253, 249, 0.7);

  font-size: 7px;
}

.automation-flow__logic i {
  color: #7f669e;
}

.automation-flow__systems {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 6px;

  margin: 13px 0;
}

.automation-flow__systems span {
  flex-direction: column;

  min-height: 62px;
}

.automation-flow__systems i {
  color: #68876e;
}

.automation-flow__outcome {
  background: rgba(220, 230, 217, 0.65);
}

.automation-flow__outcome > i {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: #fff;

  color: #68876d;
}

/* =========================================================
   96. AI TRAINING + VISIBILITY
   ========================================================= */

.service-detail-section--ai-adoption-visibility {
  background: linear-gradient(135deg, #f2ece4, #ebe2ec 50%, #e2ece7);
}

.ai-adoption__layout {
  display: grid;

  grid-template-columns:
    minmax(500px, 1.15fr)
    minmax(0, 0.85fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.ai-adoption__visual {
  position: relative;

  padding-top: 120px;
}

.ai-adoption__image {
  position: absolute;

  left: 9%;
  right: 9%;
  top: 0;

  height: 230px;

  margin: 0;

  overflow: hidden;

  border-radius: 22px;

  background: #ddd9dc;

  opacity: 0.62;
}

.ai-adoption__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.ai-adoption__tracks {
  position: relative;
  z-index: 3;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;
}

.ai-adoption-track {
  padding: 18px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 20px;

  background: rgba(255, 253, 249, 0.92);

  box-shadow: var(--shadow-sm);
}

.ai-adoption-track header {
  display: grid;

  grid-template-columns:
    43px
    minmax(0, 1fr);

  gap: 10px;

  align-items: center;

  margin-bottom: 18px;
}

.ai-adoption-track header > span {
  width: 41px;
  height: 41px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: var(--lav);

  color: #8065a3;
}

.ai-adoption-track--visibility header > span {
  background: var(--sage);

  color: #67866c;
}

.ai-adoption-track header small {
  display: block;

  margin-bottom: 4px;

  color: var(--muted);

  font-size: 5.5px;
}

.ai-adoption-track header strong {
  font-family: var(--font-script);

  font-size: 1.65rem;
}

.ai-adoption-track__steps {
  display: grid;
}

.ai-adoption-track__steps span {
  min-height: 47px;

  display: grid;

  grid-template-columns:
    30px
    minmax(0, 1fr);

  gap: 8px;

  align-items: center;

  border-top: 1px solid var(--line);

  font-size: 8px;
}

.ai-adoption-track__steps .mono {
  color: var(--muted);

  font-size: 5.5px;
}

.ai-adoption__bridge {
  position: relative;
  z-index: 4;

  max-width: 480px;

  display: flex;
  align-items: center;

  gap: 8px;

  margin: 13px auto 0;

  padding: 9px 12px;

  border-radius: 999px;

  background: #302b32;

  color: rgba(255, 248, 241, 0.73);

  font-size: 7px;
}

.ai-adoption__bridge i {
  color: #c9b7ef;
}

/* =========================================================
   97. SPECIAL SECTION — AI READINESS
   ========================================================= */

.ai-readiness {
  background:
    radial-gradient(
      circle at 89% 10%,
      rgba(255, 255, 255, 0.52),
      transparent 22%
    ),
    linear-gradient(130deg, #dce7e5, #e7e3ea 50%, #ece5d8);
}

.ai-readiness__head {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.32fr)
    minmax(0, 0.68fr);

  gap: clamp(40px, 7vw, 100px);

  margin-bottom: clamp(46px, 6vw, 72px);
}

.ai-readiness__head h2 {
  margin: 0 0 16px;
}

.ai-readiness__head p {
  margin: 0;

  color: var(--muted);
}

.ai-readiness__system {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.7fr)
    minmax(0, 1.3fr);

  gap: clamp(40px, 7vw, 90px);

  align-items: center;
}

.ai-readiness__core {
  padding: clamp(27px, 4vw, 44px);

  border-radius: 25px;

  background: #302b32;

  color: #fff8f1;

  box-shadow: var(--shadow-md);
}

.ai-readiness__core > i {
  width: 47px;
  height: 47px;

  display: grid;
  place-items: center;

  margin-bottom: 19px;

  border-radius: 15px;

  background: rgba(215, 228, 234, 0.11);

  color: #b8d1db;

  font-size: 15px;
}

.ai-readiness__core h3 {
  margin: 0 0 9px;

  color: #fff8f1;

  font-size: clamp(2rem, 3vw, 3rem);
}

.ai-readiness__core p {
  margin: 0;

  color: rgba(248, 242, 235, 0.54);
}

.ai-readiness__dimensions {
  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

.ai-readiness-card {
  display: grid;

  grid-template-columns:
    33px
    43px
    minmax(0, 1fr);

  gap: 12px;

  align-items: center;

  min-height: 98px;

  padding: 15px 5px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.14);

  opacity: 0.53;

  cursor: default;

  transition:
    opacity 0.28s ease,
    padding 0.28s var(--ease),
    background 0.28s ease;
}

.ai-readiness-card:hover,
.ai-readiness-card:focus-visible,
.ai-readiness-card.is-active {
  padding-inline: 14px;

  background: rgba(255, 253, 249, 0.28);

  opacity: 1;
}

.ai-readiness-card__number {
  color: var(--muted);

  font-size: 6px;
}

.ai-readiness-card__icon {
  width: 41px;
  height: 41px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: var(--blue);

  color: #668997;
}

.ai-readiness-card:nth-child(2) .ai-readiness-card__icon {
  background: var(--sage);
  color: #67856c;
}

.ai-readiness-card:nth-child(3) .ai-readiness-card__icon {
  background: var(--lav);
  color: #8065a3;
}

.ai-readiness-card:nth-child(4) .ai-readiness-card__icon {
  background: var(--butter);
  color: #88733e;
}

.ai-readiness-card:nth-child(5) .ai-readiness-card__icon {
  background: var(--peach);
  color: #a16c62;
}

.ai-readiness-card h3 {
  margin: 0 0 4px;

  font-size: clamp(1.4rem, 1.9vw, 1.9rem);
}

.ai-readiness-card p {
  margin: 0;

  color: var(--muted);

  font-size: 8px;
}

.ai-readiness__closing {
  max-width: 760px;

  display: grid;

  grid-template-columns:
    39px
    minmax(0, 1fr);

  gap: 11px;

  align-items: center;

  margin: clamp(42px, 5vw, 62px) 0 0 auto;

  padding-top: 18px;

  border-top: 1px solid rgba(57, 51, 46, 0.14);

  font-weight: 650;
}

.ai-readiness__closing i {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--sage);

  color: #68866d;
}

/* =========================================================
   98. AI & AUTOMATION — QUALITY / CTA
   ========================================================= */

.service-category-page--ai-automation .service-category-quality {
  background: linear-gradient(135deg, #f1eee7, #e6ece9 48%, #e8e4ed);
}

.service-category-page--ai-automation .service-category-final {
  background:
    radial-gradient(
      circle at 89% 10%,
      rgba(255, 255, 255, 0.52),
      transparent 21%
    ),
    linear-gradient(115deg, #d7e4ea, #ddd3f6 50%, #dce6d9);
}

/* =========================================================
   99. AI & AUTOMATION — TABLET
   ========================================================= */

@media (max-width: 1020px) {
  .ai-opportunity__layout,
  .ai-agent__layout,
  .automation-orchestration__layout,
  .ai-adoption__layout,
  .ai-readiness__system {
    grid-template-columns: 1fr;
  }

  .ai-opportunity__visual,
  .ai-agent__visual,
  .automation-orchestration__visual,
  .ai-adoption__visual {
    width: min(100%, 760px);
  }

  .ai-agent__visual,
  .ai-adoption__visual {
    order: 2;
  }

  .ai-readiness__core {
    max-width: 560px;
  }
}

/* =========================================================
   100. AI & AUTOMATION — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .ai-opportunity__visual {
    padding-top: 0;
  }

  .ai-opportunity__image {
    position: relative;

    width: 100%;
    height: 180px;

    margin-bottom: 14px;
  }

  .ai-opportunity__table-head,
  .ai-opportunity-row {
    grid-template-columns:
      minmax(0, 1fr)
      58px;
  }

  .ai-opportunity__table-head span:nth-child(3),
  .ai-opportunity__table-head span:nth-child(4),
  .ai-opportunity-row > span:nth-child(3),
  .ai-opportunity-row > span:nth-child(4) {
    display: none;
  }

  .ai-agent__visual {
    min-height: 560px;
  }

  .ai-agent__workflow {
    width: 92%;
  }

  .automation-orchestration__visual {
    min-height: 530px;
  }

  .automation-flow {
    width: 94%;
  }

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

  .ai-adoption__visual {
    padding-top: 0;
  }

  .ai-adoption__image {
    position: relative;

    left: auto;
    right: auto;
    top: auto;

    width: 100%;
    height: 220px;

    margin-bottom: 12px;
  }

  .ai-adoption__tracks {
    grid-template-columns: 1fr;
  }

  .ai-readiness__head {
    grid-template-columns: 1fr;
  }

  .ai-readiness-card {
    min-height: 90px;

    grid-template-columns:
      28px
      39px
      minmax(0, 1fr);
  }

  .ai-readiness-card__icon {
    width: 38px;
    height: 38px;
  }
}

/* =========================================================
   101. AI & AUTOMATION — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .ai-agent__visual {
    min-height: 530px;
  }

  .ai-agent-step {
    grid-template-columns:
      36px
      minmax(0, 1fr);

    min-height: 61px;
  }

  .ai-agent-step__icon {
    width: 34px;
    height: 34px;
  }

  .ai-agent__tools {
    max-width: 70%;
  }

  .automation-orchestration__visual {
    min-height: 500px;
  }

  .automation-flow {
    padding: 15px;
  }

  .ai-readiness__core {
    padding: 24px;
  }
}

/* =========================================================
   SALTY THEME — CARE & SUPPORT

   Native service modules:
   - Managed Hosting          → infrastructure stack
   - Website Maintenance      → recurring care rhythm
   - Technical Support        → diagnosis / intervention
   - Continuous Optimization  → improvement pulse
   - Signature                → care coverage timeline
   ========================================================= */

/* =========================================================
   102. CARE & SUPPORT — CATEGORY TONE
   ========================================================= */

.service-category-page--care-support .service-category-hero {
  min-height: clamp(580px, 64svh, 720px);

  background:
    radial-gradient(
      circle at 88% 9%,
      rgba(255, 255, 255, 0.63),
      transparent 23%
    ),
    radial-gradient(
      circle at 7% 92%,
      rgba(220, 230, 217, 0.34),
      transparent 27%
    ),
    linear-gradient(135deg, #e2e8df 0%, #ebe9e1 47%, #e2e8e9 100%);
}

.service-category-page--care-support .service-category-hero__image {
  transform: rotate(-0.45deg);
}

.service-category-page--care-support .service-category-hero__note {
  background: rgba(220, 230, 217, 0.96);

  color: #5e7d64;
}

.service-category-page--care-support .service-category-hero__note i {
  color: #64856a;
}

.service-category-page--care-support .service-category-index__link:hover,
.service-category-page--care-support .service-category-index__link.is-active {
  background: rgba(220, 230, 217, 0.56);

  color: #5f7f65;
}

/* =========================================================
   103. MANAGED HOSTING — INFRASTRUCTURE
   ========================================================= */

.service-detail-section--managed-infrastructure {
  background: linear-gradient(135deg, #f3eee7, #e6ece9);
}

.care-hosting__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(480px, 1.18fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.care-hosting__visual {
  position: relative;

  min-height: 610px;
}

.care-hosting__image {
  position: absolute;

  inset: 4% 0 8% 16%;

  margin: 0;

  overflow: hidden;

  border-radius: 27px;

  background: #dce2de;

  opacity: 0.58;

  box-shadow: var(--shadow-sm);
}

.care-hosting__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.care-hosting__status {
  position: absolute;

  right: 3%;
  top: 3%;

  z-index: 5;

  min-width: 170px;

  padding: 12px 14px;

  border: 1px solid rgba(57, 51, 46, 0.08);

  border-radius: 15px;

  background: rgba(255, 253, 249, 0.93);

  box-shadow: var(--shadow-sm);
}

.care-hosting__status > span {
  display: flex;
  align-items: center;

  gap: 6px;

  margin-bottom: 4px;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 5.5px;
}

.care-hosting__status > span i {
  color: #719276;

  font-size: 6px;
}

.care-hosting__status strong {
  font-size: 8px;
}

.care-hosting__stack {
  position: absolute;

  left: 0;
  top: 50%;

  z-index: 4;

  width: min(390px, 70%);

  display: grid;

  gap: 7px;

  transform: translateY(-50%);
}

.care-hosting-layer {
  position: relative;

  display: grid;

  grid-template-columns:
    39px
    minmax(0, 1fr)
    auto;

  gap: 10px;

  align-items: center;

  min-height: 64px;

  padding: 10px 12px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 15px;

  background: rgba(255, 253, 249, 0.94);

  box-shadow: var(--shadow-sm);
}

.care-hosting-layer__icon {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: var(--blue);

  color: #668997;
}

.care-hosting-layer:nth-child(2) .care-hosting-layer__icon {
  background: var(--sage);

  color: #67866c;
}

.care-hosting-layer:nth-child(3) .care-hosting-layer__icon {
  background: var(--lav);

  color: #8065a3;
}

.care-hosting-layer:nth-child(4) .care-hosting-layer__icon {
  background: var(--butter);

  color: #89743f;
}

.care-hosting-layer:nth-child(5) .care-hosting-layer__icon {
  background: var(--peach);

  color: #9f6d62;
}

.care-hosting-layer strong {
  font-size: 8px;
}

.care-hosting-layer__status {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  color: #66856b;

  font-family: var(--font-mono);

  font-size: 5.5px;

  text-transform: uppercase;
}

.care-hosting-layer__arrow {
  position: absolute;

  left: 28px;
  bottom: -8px;

  z-index: 4;

  color: rgba(57, 51, 46, 0.25);

  font-size: 6px;
}

/* =========================================================
   104. WEBSITE MAINTENANCE — RHYTHM
   ========================================================= */

.service-detail-section--maintenance-rhythm {
  color: #f8f2eb;

  background:
    radial-gradient(
      circle at 91% 9%,
      rgba(220, 230, 217, 0.14),
      transparent 24%
    ),
    #302b32;
}

.service-detail-section--maintenance-rhythm .service-detail-section__header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.service-detail-section--maintenance-rhythm .service-detail-section__number,
.service-detail-section--maintenance-rhythm .service-detail-section__eyebrow {
  color: rgba(248, 242, 235, 0.43);
}

.service-detail-section--maintenance-rhythm .service-detail-section__icon {
  border-color: rgba(255, 255, 255, 0.1);

  background: rgba(220, 230, 217, 0.1);

  color: #b8d1b6;
}

.service-detail-section--maintenance-rhythm
  .service-detail-section__identity
  strong,
.service-detail-section--maintenance-rhythm h2 {
  color: #fff8f1;
}

.service-detail-section--maintenance-rhythm .service-detail-section__lead {
  color: rgba(248, 242, 235, 0.91);
}

.service-detail-section--maintenance-rhythm
  .service-detail-section__copy
  > p:not(.service-detail-section__lead) {
  color: rgba(248, 242, 235, 0.57);
}

.service-detail-section--maintenance-rhythm
  .service-detail-section__capabilities--stacked
  span {
  border-color: rgba(255, 255, 255, 0.1);

  color: rgba(248, 242, 235, 0.67);
}

.service-detail-section--maintenance-rhythm
  .service-detail-section__capabilities--stacked
  span:nth-child(odd) {
  border-right-color: rgba(255, 255, 255, 0.1);
}

.service-detail-section--maintenance-rhythm .service-detail-section__cta {
  border-color: rgba(255, 255, 255, 0.3);

  color: #fff8f1;
}

.care-maintenance__layout {
  display: grid;

  grid-template-columns:
    minmax(500px, 1.18fr)
    minmax(0, 0.82fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.care-maintenance__rhythms {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;
}

.care-maintenance-rhythm {
  min-height: 170px;

  padding: 17px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.045);
}

.care-maintenance-rhythm header {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 15px;
}

.care-maintenance-rhythm header > span {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: rgba(220, 230, 217, 0.1);

  color: #b9d0b7;
}

.care-maintenance-rhythm strong {
  color: #fff8f1;

  font-size: 8px;
}

.care-maintenance-rhythm > div {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}

.care-maintenance-rhythm > div span {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding: 5px 7px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.055);

  color: rgba(248, 242, 235, 0.58);

  font-size: 6px;
}

.care-maintenance-rhythm > div i {
  color: #9dbe9b;
}

.care-maintenance__checklist {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  margin-top: 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.11);

  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.care-maintenance__checklist > div {
  min-height: 76px;

  display: grid;
  align-content: center;

  gap: 5px;

  padding: 12px;

  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.care-maintenance__checklist > div:last-child {
  border-right: 0;
}

.care-maintenance__checklist .mono {
  color: rgba(248, 242, 235, 0.35);

  font-size: 5.5px;
}

.care-maintenance__checklist strong {
  color: #fff8f1;

  font-size: 7px;
}

.care-maintenance__checklist i {
  color: #9fbd9c;

  font-size: 7px;
}

/* =========================================================
   105. TECHNICAL SUPPORT
   ========================================================= */

.service-detail-section--support-triage {
  background: linear-gradient(135deg, #f2ede5, #e5ece9);
}

.care-support__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(490px, 1.2fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.care-support__cases {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;
}

.care-support-case {
  min-height: 145px;

  padding: 14px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 17px;

  background: rgba(255, 253, 249, 0.78);
}

.care-support-case > span {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  margin-bottom: 13px;

  border-radius: 12px;

  background: var(--blush);

  color: #9e6a69;
}

.care-support-case:nth-child(2) > span {
  background: var(--butter);

  color: #88743f;
}

.care-support-case:nth-child(3) > span {
  background: var(--blue);

  color: #668a99;
}

.care-support-case strong {
  display: block;

  margin-bottom: 5px;

  font-size: 8px;
}

.care-support-case p {
  margin: 0;

  color: var(--muted);

  font-size: 7px;
}

.care-support__connector {
  display: block;

  width: fit-content;

  margin: 13px auto;

  color: rgba(57, 51, 46, 0.28);

  font-size: 8px;
}

.care-support__workflow {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 19px;

  background: rgba(255, 253, 249, 0.8);
}

.care-support__workflow > div {
  position: relative;

  min-height: 150px;

  padding: 15px;

  border-right: 1px solid rgba(57, 51, 46, 0.09);
}

.care-support__workflow > div:last-child {
  border-right: 0;
}

.care-support__workflow-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  margin-bottom: 12px;

  border-radius: 11px;

  background: var(--sage);

  color: #67866c;
}

.care-support__workflow .mono {
  display: block;

  margin-bottom: 6px;

  color: var(--muted);

  font-size: 5.5px;
}

.care-support__workflow strong {
  display: block;

  margin-bottom: 5px;

  font-size: 8px;
}

.care-support__workflow p {
  margin: 0;

  color: var(--muted);

  font-size: 7px;
}

.care-support__workflow-arrow {
  position: absolute;

  right: -5px;
  top: 50%;

  z-index: 3;

  color: rgba(57, 51, 46, 0.28);

  font-size: 7px;
}

/* =========================================================
   106. CONTINUOUS OPTIMIZATION
   ========================================================= */

.service-detail-section--optimization-pulse {
  background:
    radial-gradient(
      circle at 90% 9%,
      rgba(255, 255, 255, 0.54),
      transparent 23%
    ),
    linear-gradient(135deg, #dde7da, #e9e8df 50%, #e6e0eb);
}

.care-optimization__layout {
  display: grid;

  grid-template-columns:
    minmax(500px, 1.16fr)
    minmax(0, 0.84fr);

  gap: clamp(52px, 8vw, 120px);

  align-items: center;
}

.care-optimization__areas {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 9px;
}

.care-optimization-area {
  min-height: 170px;

  padding: 16px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 18px;

  background: rgba(255, 253, 249, 0.68);
}

.care-optimization-area header {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 15px;
}

.care-optimization-area header > span {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: var(--sage);

  color: #67866c;
}

.care-optimization-area:nth-child(2) header > span {
  background: var(--peach);

  color: #9f6d63;
}

.care-optimization-area:nth-child(3) header > span {
  background: var(--blue);

  color: #668997;
}

.care-optimization-area:nth-child(4) header > span {
  background: var(--lav);

  color: #8065a3;
}

.care-optimization-area header strong {
  font-size: 8px;
}

.care-optimization-area > div {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}

.care-optimization-area > div span {
  padding: 5px 7px;

  border-radius: 999px;

  background: rgba(57, 51, 46, 0.045);

  color: var(--muted);

  font-size: 6px;
}

.care-optimization__cycle {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  margin-top: 15px;

  border-top: 1px solid rgba(57, 51, 46, 0.12);

  border-bottom: 1px solid rgba(57, 51, 46, 0.12);
}

.care-optimization__cycle > div {
  position: relative;

  min-height: 85px;

  display: grid;
  align-content: center;

  gap: 6px;

  padding: 12px 14px;

  border-right: 1px solid rgba(57, 51, 46, 0.11);
}

.care-optimization__cycle > div:last-child {
  border-right: 0;
}

.care-optimization__cycle > div > span {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: rgba(255, 253, 249, 0.75);

  color: #6b876f;
}

.care-optimization__cycle strong {
  font-size: 7px;
}

.care-optimization__cycle-arrow {
  position: absolute;

  right: -5px;
  top: 50%;

  z-index: 3;

  color: rgba(57, 51, 46, 0.28);

  font-size: 7px;
}

/* =========================================================
   107. SPECIAL SECTION — AFTER LAUNCH / CARE COVERAGE
   ========================================================= */

.care-coverage {
  background:
    radial-gradient(
      circle at 90% 9%,
      rgba(255, 255, 255, 0.52),
      transparent 22%
    ),
    linear-gradient(130deg, #e0e9dc, #ebe8df 49%, #e3e7eb);
}

.care-coverage__head {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.32fr)
    minmax(0, 0.68fr);

  gap: clamp(40px, 7vw, 100px);

  margin-bottom: clamp(46px, 6vw, 70px);
}

.care-coverage__head h2 {
  margin: 0 0 16px;
}

.care-coverage__head p {
  margin: 0;

  color: var(--muted);
}

.care-coverage__board {
  overflow: hidden;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 23px;

  background: rgba(255, 253, 249, 0.63);
}

.care-coverage__periods {
  display: grid;

  grid-template-columns:
    230px
    repeat(4, 1fr);

  min-height: 54px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.1);

  background: rgba(57, 51, 46, 0.025);
}

.care-coverage__periods > * {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px;

  border-right: 1px solid rgba(57, 51, 46, 0.08);
}

.care-coverage__periods > *:last-child {
  border-right: 0;
}

.care-coverage__periods strong {
  color: var(--muted);

  font-size: 5.5px;

  text-transform: uppercase;
}

.care-coverage-lane {
  display: grid;

  grid-template-columns:
    230px
    minmax(0, 1fr)
    260px;

  min-height: 105px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.1);

  opacity: 0.62;

  transition:
    opacity 0.28s ease,
    background 0.28s ease;
}

.care-coverage-lane:last-child {
  border-bottom: 0;
}

.care-coverage-lane:hover,
.care-coverage-lane:focus-visible,
.care-coverage-lane.is-active {
  background: rgba(255, 253, 249, 0.42);

  opacity: 1;
}

.care-coverage-lane__label {
  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr);

  gap: 10px;

  align-items: center;

  padding: 15px;

  border-right: 1px solid rgba(57, 51, 46, 0.09);
}

.care-coverage-lane__label > span {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: var(--sage);

  color: #67866c;
}

.care-coverage-lane:nth-child(2) .care-coverage-lane__label > span {
  background: var(--blue);

  color: #668a98;
}

.care-coverage-lane:nth-child(3) .care-coverage-lane__label > span {
  background: var(--peach);

  color: #9f6d63;
}

.care-coverage-lane:nth-child(4) .care-coverage-lane__label > span {
  background: var(--lav);

  color: #8065a3;
}

.care-coverage-lane__label strong {
  display: block;

  margin-bottom: 3px;

  font-size: 8px;
}

.care-coverage-lane__label small {
  color: var(--muted);

  font-size: 5.5px;
}

.care-coverage-lane__timeline {
  position: relative;

  display: grid;
  align-items: center;

  padding: 0 20px;

  border-right: 1px solid rgba(57, 51, 46, 0.09);

  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(25% - 1px),
    rgba(57, 51, 46, 0.07) 25%
  );
}

.care-coverage-lane__activity {
  display: block;

  height: 17px;

  border-radius: 999px;

  background: linear-gradient(90deg, #83a47f, #b8d1b4);
}

.care-coverage-lane--always .care-coverage-lane__activity {
  width: 100%;
}

.care-coverage-lane--regular .care-coverage-lane__activity {
  width: 72%;

  background: repeating-linear-gradient(
    90deg,
    #799baa 0 14%,
    transparent 14% 20%
  );
}

.care-coverage-lane--ondemand .care-coverage-lane__activity {
  width: 62%;

  margin-left: 24%;

  background: repeating-linear-gradient(
    90deg,
    #d6a69a 0 8%,
    transparent 8% 24%
  );
}

.care-coverage-lane--iterative .care-coverage-lane__activity {
  width: 82%;

  margin-left: 10%;

  background: linear-gradient(90deg, rgba(128, 101, 163, 0.18), #9b7cba);
}

.care-coverage-lane > p {
  display: flex;
  align-items: center;

  margin: 0;

  padding: 15px;

  color: var(--muted);

  font-size: 7px;
  line-height: 1.5;
}

.care-coverage__closing {
  max-width: 760px;

  display: grid;

  grid-template-columns:
    39px
    minmax(0, 1fr);

  gap: 11px;

  align-items: center;

  margin: clamp(42px, 5vw, 62px) 0 0 auto;

  padding-top: 18px;

  border-top: 1px solid rgba(57, 51, 46, 0.14);

  font-weight: 650;
}

.care-coverage__closing i {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--sage);

  color: #68866d;
}

/* =========================================================
   108. CARE & SUPPORT — QUALITY + CTA
   ========================================================= */

.service-category-page--care-support .service-category-quality {
  background: linear-gradient(135deg, #f2eee7, #e5ece7 49%, #e9e5dc);
}

.service-category-page--care-support .service-category-final {
  background:
    radial-gradient(
      circle at 89% 10%,
      rgba(255, 255, 255, 0.52),
      transparent 21%
    ),
    linear-gradient(115deg, #dce6d9, #d7e4ea 50%, #eee3b9);
}

/* =========================================================
   109. CARE & SUPPORT — TABLET
   ========================================================= */

@media (max-width: 1020px) {
  .care-hosting__layout,
  .care-maintenance__layout,
  .care-support__layout,
  .care-optimization__layout {
    grid-template-columns: 1fr;
  }

  .care-hosting__visual,
  .care-maintenance__visual,
  .care-support__visual,
  .care-optimization__visual {
    width: min(100%, 760px);
  }

  .care-maintenance__visual,
  .care-optimization__visual {
    order: 2;
  }

  .care-coverage__periods {
    grid-template-columns:
      190px
      repeat(4, 1fr);
  }

  .care-coverage-lane {
    grid-template-columns:
      190px
      minmax(0, 1fr)
      210px;
  }
}

/* =========================================================
   110. CARE & SUPPORT — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .care-hosting__visual {
    min-height: 560px;
  }

  .care-hosting__stack {
    width: 78%;
  }

  .care-hosting-layer {
    grid-template-columns:
      36px
      minmax(0, 1fr);
  }

  .care-hosting-layer__status {
    grid-column: 2;
  }

  .care-maintenance__rhythms {
    grid-template-columns: 1fr;
  }

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

  .care-support__cases {
    grid-template-columns: 1fr;
  }

  .care-support-case {
    min-height: 95px;

    display: grid;

    grid-template-columns:
      40px
      minmax(0, 1fr);

    gap: 10px;

    align-items: center;
  }

  .care-support-case > span {
    margin-bottom: 0;
  }

  .care-support__workflow {
    grid-template-columns: 1fr;
  }

  .care-support__workflow > div {
    min-height: 105px;

    display: grid;

    grid-template-columns:
      38px
      30px
      minmax(0, 1fr);

    gap: 8px;

    align-items: center;

    border-right: 0;
    border-bottom: 1px solid rgba(57, 51, 46, 0.09);
  }

  .care-support__workflow > div:last-child {
    border-bottom: 0;
  }

  .care-support__workflow p {
    grid-column: 3;
  }

  .care-support__workflow-arrow {
    display: none;
  }

  .care-optimization__areas {
    grid-template-columns: 1fr;
  }

  .care-optimization__cycle {
    grid-template-columns: 1fr;
  }

  .care-optimization__cycle > div {
    min-height: 62px;

    grid-template-columns:
      34px
      minmax(0, 1fr);

    align-items: center;

    border-right: 0;
    border-bottom: 1px solid rgba(57, 51, 46, 0.1);
  }

  .care-optimization__cycle-arrow {
    display: none;
  }

  .care-coverage__head {
    grid-template-columns: 1fr;
  }

  .care-coverage__periods {
    display: none;
  }

  .care-coverage__board {
    border-radius: 19px;
  }

  .care-coverage-lane {
    grid-template-columns: 1fr;

    padding: 15px;

    gap: 13px;
  }

  .care-coverage-lane__label {
    padding: 0 0 10px;

    border-right: 0;
    border-bottom: 1px solid rgba(57, 51, 46, 0.09);
  }

  .care-coverage-lane__timeline {
    min-height: 37px;

    padding: 10px 0;

    border-right: 0;

    background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(25% - 1px),
      rgba(57, 51, 46, 0.07) 25%
    );
  }

  .care-coverage-lane > p {
    padding: 0;
  }
}

/* =========================================================
   111. CARE & SUPPORT — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .care-hosting__visual {
    min-height: 520px;
  }

  .care-hosting__stack {
    width: 86%;
  }

  .care-hosting__status {
    min-width: 145px;
  }

  .care-maintenance__checklist {
    grid-template-columns: 1fr;
  }

  .care-maintenance__checklist > div {
    min-height: 58px;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* =========================================================
   SALTY THEME — SERVICE CATEGORY PRICING

   Shared pricing renderer for all five service categories.

   Pricing content is managed independently through:
   data/pricing/service-category-pricing.json
   ========================================================= */

/* =========================================================
   112. PRICING — SECTION
   ========================================================= */

.service-pricing {
  position: relative;

  overflow: clip;

  background:
    radial-gradient(
      circle at 90% 9%,
      rgba(221, 211, 246, 0.17),
      transparent 23%
    ),
    radial-gradient(
      circle at 7% 93%,
      rgba(220, 230, 217, 0.14),
      transparent 25%
    ),
    var(--paper);

  border-bottom: 1px solid var(--border-soft);
}

/* =========================================================
   Pricing — heading
   ========================================================= */

.service-pricing__head {
  display: grid;

  grid-template-columns:
    minmax(0, 0.58fr)
    minmax(300px, 0.42fr);

  gap: clamp(40px, 8vw, 120px);

  align-items: end;

  margin-bottom: clamp(46px, 6vw, 72px);
}

.service-pricing__head h2 {
  margin: 14px 0 0;
}

.service-pricing__intro {
  display: grid;

  gap: 14px;

  padding-bottom: 5px;
}

.service-pricing__intro p {
  margin: 0;

  color: var(--muted);

  line-height: 1.7;
}

.service-pricing__billing {
  width: fit-content;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  min-height: 31px;

  padding: 6px 10px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.64);

  color: var(--muted);

  font-size: 6px;

  text-transform: uppercase;
}

/* =========================================================
   Pricing — cards
   ========================================================= */

.service-pricing__grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  border-top: 1px solid rgba(57, 51, 46, 0.14);

  border-bottom: 1px solid rgba(57, 51, 46, 0.14);
}

.service-pricing-card {
  position: relative;

  min-height: 550px;

  display: flex;

  flex-direction: column;

  padding: clamp(24px, 2.6vw, 36px);

  border-right: 1px solid rgba(57, 51, 46, 0.14);

  background: rgba(255, 253, 249, 0.2);

  transition:
    background 0.28s ease,
    transform 0.28s var(--ease);
}

.service-pricing-card:last-child {
  border-right: 0;
}

.service-pricing-card:hover {
  background: rgba(255, 253, 249, 0.48);
}

/* =========================================================
   Pricing — featured
   ========================================================= */

.service-pricing-card--featured {
  color: #fff8f1;

  background: #302b32;

  transform: translateY(-12px);

  box-shadow: 0 24px 60px rgba(57, 51, 46, 0.13);
}

.service-pricing-card--featured:hover {
  background: #353037;
}

.service-pricing-card--featured .service-pricing-card__head .mono,
.service-pricing-card--featured .service-pricing-card__prefix,
.service-pricing-card--featured .service-pricing-card__description {
  color: rgba(248, 242, 235, 0.55);
}

.service-pricing-card--featured .service-pricing-card__price strong,
.service-pricing-card--featured .service-pricing-card__price span,
.service-pricing-card--featured .service-pricing-card__head h3 {
  color: #fff8f1;
}

.service-pricing-card--featured .service-pricing-card__features {
  border-top-color: rgba(255, 255, 255, 0.11);
}

.service-pricing-card--featured .service-pricing-card__features li {
  border-bottom-color: rgba(255, 255, 255, 0.09);

  color: rgba(248, 242, 235, 0.7);
}

.service-pricing-card--featured .service-pricing-card__features i {
  color: #b9d3b6;
}

.service-pricing-card--featured .btn--dark {
  background: #fff8f1;

  color: #302b32;
}

/* =========================================================
   Pricing — card header
   ========================================================= */

.service-pricing-card__head {
  min-height: 59px;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;
}

.service-pricing-card__head .mono {
  display: block;

  margin-bottom: 7px;

  color: var(--muted);

  font-size: 6px;
}

.service-pricing-card__head h3 {
  margin: 0;

  font-family: var(--font-script);

  font-size: clamp(1.8rem, 2.3vw, 2.35rem);

  line-height: 1;
}

.service-pricing-card__badge {
  display: inline-flex;

  align-items: center;

  min-height: 27px;

  padding: 5px 8px;

  border-radius: 999px;

  background: var(--lav);

  color: #6f568f;

  font-family: var(--font-mono);

  font-size: 5px;

  font-weight: 600;

  text-transform: uppercase;
}

/* =========================================================
   Pricing — amount
   ========================================================= */

.service-pricing-card__price {
  min-height: 112px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  margin: 20px 0 18px;
}

.service-pricing-card__prefix {
  display: block;

  margin-bottom: 3px;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 6px;

  text-transform: uppercase;
}

.service-pricing-card__price > div {
  display: flex;
  font-family: var(--font-script);
  align-items: flex-end;

  gap: 5px;
}

.service-pricing-card__price strong {
  font-size: clamp(2.6rem, 4.2vw, 4.7rem);

  font-weight: 600;

  line-height: 0.92;
}

.service-pricing-card__price > div > span {
  padding-bottom: 5px;

  font-size: 1rem;

  font-weight: 700;
}

.service-pricing-card__price small {
  padding-bottom: 6px;

  color: var(--muted);

  font-size: 12px;
}

.service-pricing-card__custom-price {
  font-family: var(--font-script);

  font-size: clamp(2.2rem, 3.4vw, 3.6rem);

  line-height: 1;
}

/* =========================================================
   Pricing — description
   ========================================================= */

.service-pricing-card__description {
  min-height: 78px;

  margin: 0 0 22px;

  color: var(--muted);

  font-size: 9px;

  line-height: 1.58;
}

/* =========================================================
   Pricing — features
   ========================================================= */

.service-pricing-card__features {
  list-style: none;

  flex: 1;

  margin: 0 0 26px;

  padding: 0;

  border-top: 1px solid rgba(57, 51, 46, 0.1);
}

.service-pricing-card__features li {
  display: grid;

  grid-template-columns:
    18px
    minmax(0, 1fr);

  gap: 7px;

  align-items: start;

  padding: 10px 0;

  border-bottom: 1px solid rgba(57, 51, 46, 0.08);

  color: var(--muted);

  font-size: 8px;

  line-height: 1.45;
}

.service-pricing-card__features i {
  padding-top: 2px;

  color: #6f8e72;

  font-size: 7px;
}

/* =========================================================
   Pricing — CTA
   ========================================================= */

.service-pricing-card__cta:not(.btn) {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  min-height: 43px;

  padding: 8px 0;

  border-top: 1px solid rgba(57, 51, 46, 0.13);

  color: var(--ink);

  font-size: 8px;

  font-weight: 700;
}

.service-pricing-card__cta:not(.btn) i {
  transition: transform 0.25s var(--ease);
}

.service-pricing-card__cta:not(.btn):hover i {
  transform: translateX(4px);
}

/* =========================================================
   Pricing — note
   ========================================================= */

.service-pricing__note {
  max-width: 880px;

  display: grid;

  grid-template-columns:
    36px
    minmax(0, 1fr);

  gap: 11px;

  align-items: center;

  margin: clamp(32px, 4vw, 48px) 0 0 auto;

  color: var(--muted);

  font-size: 8px;

  line-height: 1.55;
}

.service-pricing__note i {
  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--butter);

  color: #89733f;
}

/* =========================================================
   113. PRICING — CATEGORY ACCENTS
   ========================================================= */

.service-category-page--web-apps .service-pricing-card--featured {
  box-shadow: 0 24px 60px rgba(128, 101, 163, 0.15);
}

.service-category-page--visibility-growth .service-pricing-card__badge {
  background: var(--sage);

  color: #5f7e64;
}

.service-category-page--content-brand .service-pricing-card__badge {
  background: var(--blush);

  color: #936260;
}

.service-category-page--ai-automation .service-pricing-card__badge {
  background: var(--blue);

  color: #587c89;
}

.service-category-page--care-support .service-pricing-card__badge {
  background: var(--sage);

  color: #5f7e64;
}

/* =========================================================
   114. PRICING — TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .service-pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-pricing-card {
    min-height: 520px;

    border-bottom: 1px solid rgba(57, 51, 46, 0.14);
  }

  .service-pricing-card:nth-child(2) {
    border-right: 0;
  }

  .service-pricing-card:nth-child(3),
  .service-pricing-card:nth-child(4) {
    border-bottom: 0;
  }

  .service-pricing-card--featured {
    transform: none;
  }
}

/* =========================================================
   115. PRICING — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .service-pricing__head {
    grid-template-columns: 1fr;

    gap: 24px;
  }

  .service-pricing__grid {
    display: grid;

    grid-template-columns: 1fr;

    border-top: 0;
  }

  .service-pricing-card {
    min-height: 0;

    padding: 28px 20px;

    border: 1px solid rgba(57, 51, 46, 0.12);

    border-bottom: 0;
  }

  .service-pricing-card:first-child {
    border-radius: 20px 20px 0 0;
  }

  .service-pricing-card:last-child {
    border-bottom: 1px solid rgba(57, 51, 46, 0.12);

    border-radius: 0 0 20px 20px;
  }

  .service-pricing-card--featured {
    transform: none;

    border-color: #302b32;
  }

  .service-pricing-card__price {
    min-height: 88px;
  }

  .service-pricing-card__description {
    min-height: 0;
  }

  .service-pricing__note {
    margin-left: 0;
  }
}

/* =========================================================
   SALTY THEME — WORK / RÉALISATIONS

   Searchable/filterable project directory.
   Projects remain entirely JSON-driven.
   ========================================================= */

/* =========================================================
   116. WORK — HERO
   ========================================================= */

.work-hero {
  position: relative;

  padding: clamp(170px, 18vw, 245px) 0 clamp(85px, 9vw, 125px);

  overflow: clip;

  background:
    radial-gradient(
      circle at 91% 9%,
      rgba(221, 211, 246, 0.32),
      transparent 25%
    ),
    radial-gradient(
      circle at 8% 91%,
      rgba(238, 214, 216, 0.25),
      transparent 26%
    ),
    var(--bg);

  border-bottom: 1px solid var(--border-soft);
}

.work-hero__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    260px;

  gap: clamp(50px, 9vw, 140px);

  align-items: end;
}

.work-hero__copy h1 {
  margin: 17px 0 22px;

  font-size: clamp(4rem, 7.8vw, 8.4rem);

  line-height: 0.88;
}

.work-hero__lead {
  margin: 0;

  color: var(--muted);

  font-size: clamp(1rem, 1.25vw, 1.15rem);

  line-height: 1.72;
}

.work-hero__side {
  padding-bottom: 10px;
}

.work-hero__index {
  display: block;

  margin-bottom: 8px;

  color: #8065a3;

  font-size: clamp(2rem, 4vw, 4rem);

  line-height: 1;
}

.work-hero__side p {
  margin: 0 0 22px;

  color: var(--muted);

  font-size: 9px;
}

.work-hero__line {
  display: block;

  width: 100%;
  height: 1px;

  background: rgba(57, 51, 46, 0.17);
}

/* =========================================================
   117. WORK — DIRECTORY
   ========================================================= */

.work-directory {
  background: var(--paper);
}

.work-directory__head {
  display: grid;

  grid-template-columns:
    minmax(0, 0.62fr)
    minmax(300px, 0.38fr);

  gap: clamp(45px, 8vw, 120px);

  align-items: end;

  margin-bottom: clamp(42px, 6vw, 70px);
}

.work-directory__head h2 {
  margin: 14px 0 0;
}

.work-directory__head > p {
  margin: 0;

  color: var(--muted);

  line-height: 1.7;
}

/* =========================================================
   118. WORK — SEARCH + FILTERS
   ========================================================= */

.work-controls {
  display: grid;

  grid-template-columns:
    minmax(260px, 0.33fr)
    minmax(0, 0.67fr);

  gap: 22px;

  align-items: center;

  padding: 18px 0;

  border-top: 1px solid rgba(57, 51, 46, 0.14);

  border-bottom: 1px solid rgba(57, 51, 46, 0.14);
}

/* Search */

.work-search {
  position: relative;

  min-height: 48px;

  display: grid;

  grid-template-columns:
    28px
    minmax(0, 1fr)
    32px;

  align-items: center;

  gap: 6px;

  padding: 4px 8px 4px 13px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.7);
}

.work-search > i {
  color: var(--muted);

  font-size: 11px;
}

.work-search input {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--ink);

  font: inherit;

  font-size: 9px;
}

.work-search input::placeholder {
  color: rgba(117, 109, 102, 0.7);
}

.work-search__clear {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: rgba(57, 51, 46, 0.06);

  color: var(--ink);

  cursor: pointer;
}

/* Filters */

.work-filters {
  display: flex;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 6px;
}

.work-filter {
  min-height: 37px;

  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 7px 11px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 999px;

  background: transparent;

  color: var(--muted);

  font: inherit;

  font-size: 7px;
  font-weight: 650;

  cursor: pointer;

  transition:
    color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.work-filter i {
  font-size: 7px;
}

.work-filter:hover {
  color: var(--ink);

  transform: translateY(-1px);
}

.work-filter.is-active {
  border-color: #302b32;

  background: #302b32;

  color: #fff8f1;
}

/* =========================================================
   119. WORK — RESULT COUNT
   ========================================================= */

.work-directory__status {
  display: flex;
  align-items: baseline;

  gap: 7px;

  padding: 24px 0 17px;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 6px;

  text-transform: uppercase;
}

.work-directory__status strong {
  color: var(--ink);

  font-size: 8px;
}
/* =========================================================
   120. WORK — PROJECT GRID
   ========================================================= */

.work-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: clamp(18px, 2vw, 28px);
}

.work-project-card,
.work-project-card--wide,
.work-project-card--tall {
  min-width: 0;

  grid-column: auto;
}

/*
 * Hidden is controlled by filtering JS.
 */
.work-project-card[hidden] {
  display: none !important;
}

/* =========================================================
   121. PROJECT CARD
   ========================================================= */

.work-project-card__link {
  height: 100%;

  display: flex;
  flex-direction: column;

  color: inherit;

  text-decoration: none;
}

.work-project-card__media,
.work-project-card--wide .work-project-card__media,
.work-project-card--tall .work-project-card__media {
  position: relative;

  overflow: hidden;

  width: 100%;

  min-height: 380px;

  border-radius: 24px;

  background: #ddd8d0;
}

.work-project-card__media img {
  width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  object-fit: cover;

  transition: transform 0.7s var(--ease-smooth);
}

.work-project-card:hover .work-project-card__media img {
  transform: scale(1.025);
}

/* Fallback */

.work-project-card__placeholder {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(221, 211, 246, 0.55),
      transparent 32%
    ),
    linear-gradient(135deg, var(--sage), var(--peach));
}

.work-project-card__placeholder span {
  font-family: var(--font-display);

  font-size: clamp(4rem, 10vw, 9rem);

  opacity: 0.32;
}

/* Shade */

.work-project-card__shade {
  position: absolute;
  inset: 0;

  background: linear-gradient(180deg, transparent 48%, rgba(34, 30, 27, 0.4));

  pointer-events: none;
}

/* Year */

.work-project-card__year {
  position: absolute;

  left: 14px;
  top: 14px;

  padding: 6px 8px;

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.85);

  color: var(--ink);

  font-size: 6px;

  backdrop-filter: blur(10px);
}

/* View action */

.work-project-card__action {
  position: absolute;

  right: 14px;
  bottom: 14px;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  min-height: 34px;

  padding: 6px 10px;

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.9);

  color: var(--ink);

  font-size: 7px;
  font-weight: 700;

  opacity: 0;

  transform: translateY(6px);

  transition:
    opacity 0.28s ease,
    transform 0.28s var(--ease);
}

.work-project-card:hover .work-project-card__action,
.work-project-card__link:focus-visible .work-project-card__action {
  opacity: 1;

  transform: none;
}

/* =========================================================
   122. PROJECT CARD — COPY
   ========================================================= */

.work-project-card__body {
  padding: 17px 4px 27px;
}

.work-project-card__top {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;
}

.work-project-card__top .mono {
  display: block;

  margin-bottom: 5px;

  color: var(--muted);

  font-size: 5.5px;

  text-transform: uppercase;
}

.work-project-card h3 {
  margin: 0;

  font-size: clamp(1.55rem, 2vw, 2.25rem);

  line-height: 1.05;
}

.work-project-card__arrow {
  flex: 0 0 auto;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  margin-top: 2px;

  border: 1px solid rgba(57, 51, 46, 0.11);

  border-radius: 50%;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s var(--ease);
}

.work-project-card:hover .work-project-card__arrow {
  background: #302b32;

  color: #fff8f1;

  transform: rotate(-10deg);
}

.work-project-card__body > p {
  margin: 12px 0 0;

  color: var(--muted);

  font-size: 8px;

  line-height: 1.55;
}

.work-project-card__services {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 14px;
}

.work-project-card__services span {
  padding: 5px 8px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 999px;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 5.5px;
}

/* =========================================================
   123. WORK — EMPTY STATE
   ========================================================= */

.work-empty {
  max-width: 570px;

  margin: clamp(60px, 9vw, 120px) auto;

  text-align: center;
}

.work-empty[hidden] {
  display: none;
}

.work-empty > span {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  margin: 0 auto 18px;

  border-radius: 50%;

  background: var(--lav);

  color: #8065a3;
}

.work-empty h3 {
  margin: 0 0 10px;

  font-size: clamp(2rem, 4vw, 3rem);
}

.work-empty p {
  margin: 0 0 22px;

  color: var(--muted);
}

/* =========================================================
   124. WORK — FINAL CTA
   ========================================================= */

.work-final {
  padding: var(--section-tight) 0;

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(255, 255, 255, 0.52),
      transparent 22%
    ),
    linear-gradient(115deg, var(--lav), var(--peach) 52%, var(--butter));
}

.work-final__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: clamp(40px, 8vw, 120px);

  align-items: end;
}

.work-final h2 {
  margin: 14px 0 14px;
}

.work-final p {
  margin: 0;

  color: rgba(57, 51, 46, 0.68);
}

.work-final__actions {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 9px;
}

/* =========================================================
   125. WORK — TABLET
   ========================================================= */

@media (max-width: 1020px) {
  .work-hero__layout {
    grid-template-columns:
      minmax(0, 1fr)
      190px;
  }

  .work-controls {
    grid-template-columns: 1fr;
  }

  .work-filters {
    justify-content: flex-start;
  }

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

  .work-project-card__media,
  .work-project-card--wide .work-project-card__media,
  .work-project-card--tall .work-project-card__media {
    min-height: 420px;
  }
}

/* =========================================================
   126. WORK — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .work-hero {
    padding: 155px 0 76px;
  }

  .work-hero__layout,
  .work-directory__head,
  .work-final__inner {
    grid-template-columns: 1fr;
  }

  .work-hero__copy h1 {
    font-size: clamp(3.7rem, 17vw, 5.8rem);
  }

  .work-hero__side {
    display: flex;

    align-items: baseline;

    gap: 12px;

    padding: 0;
  }

  .work-hero__side p {
    margin: 0;
  }

  .work-hero__line {
    flex: 1;
  }

  .work-controls {
    gap: 15px;
  }

  .work-filters {
    flex-wrap: nowrap;

    overflow-x: auto;

    margin-inline: calc(var(--gutter) * -1);

    padding-inline: var(--gutter);

    padding-bottom: 5px;

    scrollbar-width: none;
  }

  .work-filters::-webkit-scrollbar {
    display: none;
  }

  .work-filter {
    flex: 0 0 auto;
  }

  .work-grid {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .work-project-card__media,
  .work-project-card--wide .work-project-card__media,
  .work-project-card--tall .work-project-card__media {
    min-height: clamp(360px, 110vw, 520px);
  }

  .work-project-card__action {
    opacity: 1;

    transform: none;
  }

  .work-final__actions {
    justify-content: flex-start;
  }
}

/* =========================================================
   127. WORK — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .work-project-card__media,
  .work-project-card--wide .work-project-card__media,
  .work-project-card--tall .work-project-card__media {
    min-height: 365px;

    border-radius: 20px;
  }

  .work-project-card__body {
    padding-top: 14px;
  }
}

/* =========================================================
   128. WORK — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .work-project-card__media img,
  .work-project-card__action,
  .work-project-card__arrow,
  .work-filter {
    transition: none !important;

    transform: none !important;
  }
}

/* =========================================================
   SALTY THEME — FULL PRICING / POLICY PAGE
   ========================================================= */

/* =========================================================
   129. PRICING PAGE — HERO
   ========================================================= */

.pricing-hero {
  padding: clamp(170px, 18vw, 245px) 0 clamp(82px, 9vw, 120px);

  background:
    radial-gradient(
      circle at 91% 8%,
      rgba(221, 211, 246, 0.37),
      transparent 24%
    ),
    radial-gradient(
      circle at 7% 91%,
      rgba(238, 227, 185, 0.27),
      transparent 26%
    ),
    var(--bg);

  border-bottom: 1px solid var(--border-soft);
}

.pricing-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr);
  gap: clamp(50px, 9vw, 140px);
  align-items: end;
}

.pricing-hero h1 {
  margin: 17px 0 22px;

  font-size: clamp(3.8rem, 7vw, 7.8rem);
  line-height: 0.9;
}

.pricing-hero__lead {
  margin: 0;

  color: var(--muted);
  line-height: 1.72;
}

.pricing-hero__terms {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 13px;
  align-items: center;

  padding: 20px;

  border: 1px solid rgba(57, 51, 46, 0.1);
  border-radius: 20px;

  background: rgba(255, 253, 249, 0.58);
}

.pricing-hero__terms > div {
  text-align: center;
}

.pricing-hero__terms .mono {
  display: block;

  color: #8065a3;
  font-size: 1.45rem;
}

.pricing-hero__terms strong {
  display: block;

  margin-top: 5px;

  font-size: 7px;
}

.pricing-hero__terms > i {
  color: var(--muted);
  font-size: 8px;
}

/* =========================================================
   130. PRICING SUMMARY
   ========================================================= */

.pricing-summary {
  background: linear-gradient(135deg, #f4eee7, #e8ede7);
}

.pricing-summary__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.72fr)
    minmax(480px, 1.28fr);

  gap: clamp(55px, 8vw, 120px);

  align-items: start;
}

.pricing-summary__copy h2 {
  margin: 14px 0;
}

.pricing-summary__copy p {
  margin: 0;

  color: var(--muted);
}

.pricing-summary__principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  border-top: 1px solid rgba(57, 51, 46, 0.13);
}

.pricing-summary__principles article {
  min-height: 170px;

  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);

  gap: 12px;

  padding: 22px;

  border-right: 1px solid rgba(57, 51, 46, 0.13);
  border-bottom: 1px solid rgba(57, 51, 46, 0.13);
}

.pricing-summary__principles article:nth-child(even) {
  border-right: 0;
}

.pricing-summary__principles article > i {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: var(--lav);
  color: #8065a3;
}

.pricing-summary__principles article:nth-child(2) > i {
  background: var(--sage);
  color: #658069;
}

.pricing-summary__principles article:nth-child(3) > i {
  background: var(--butter);
  color: #88733e;
}

.pricing-summary__principles article:nth-child(4) > i {
  background: var(--peach);
  color: #9e6d64;
}

.pricing-summary__principles strong {
  display: block;

  margin-bottom: 6px;

  font-size: 9px;
}

.pricing-summary__principles p {
  margin: 0;

  color: var(--muted);

  font-size: 8px;
}

/* =========================================================
   131. QUICK PRICING NAV
   ========================================================= */

.pricing-jump {
  position: sticky;

  top: var(--header-h);

  z-index: 20;

  border-bottom: 1px solid rgba(57, 51, 46, 0.1);

  background: rgba(251, 248, 243, 0.9);

  backdrop-filter: blur(14px);
}

.pricing-jump__inner {
  min-height: 58px;

  display: flex;
  align-items: center;

  gap: 6px;

  overflow-x: auto;

  scrollbar-width: none;
}

.pricing-jump__inner::-webkit-scrollbar {
  display: none;
}

.pricing-jump a {
  flex: 0 0 auto;

  padding: 7px 10px;

  border-radius: 999px;

  color: var(--muted);

  font-size: 7px;
  font-weight: 650;

  text-decoration: none;
}

.pricing-jump a:hover {
  background: rgba(57, 51, 46, 0.06);
  color: var(--ink);
}

/* =========================================================
   132. CATEGORY PRICING PAGE VARIATION
   ========================================================= */

.pricing-page-category--web-apps {
  background: var(--paper);
}

.pricing-page-category--visibility-growth {
  background: #e9efe5;
}

.pricing-page-category--content-brand {
  background: #f0e2e1;
}

.pricing-page-category--ai-automation {
  background: #e5e7ee;
}

.pricing-page-category--care-support {
  background: #e5ede2;
}

/* =========================================================
   133. MAINTENANCE PACKAGE META
   ========================================================= */

.service-pricing-card__meta {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin: -5px 0 17px;
}

.service-pricing-card__meta span {
  padding: 5px 7px;

  border-radius: 999px;

  background: rgba(57, 51, 46, 0.055);

  color: var(--muted);

  font-family: var(--font-mono);
  font-size: 5.5px;
}

.service-pricing-card--featured .service-pricing-card__meta span {
  background: rgba(255, 255, 255, 0.07);

  color: rgba(248, 242, 235, 0.63);
}

/* =========================================================
   134. INTERVENTION RATES
   ========================================================= */

.pricing-interventions {
  color: #f8f2eb;

  background:
    radial-gradient(
      circle at 90% 9%,
      rgba(221, 211, 246, 0.15),
      transparent 24%
    ),
    #302b32;
}

.pricing-interventions__head {
  display: grid;

  grid-template-columns:
    minmax(0, 0.62fr)
    minmax(300px, 0.38fr);

  gap: clamp(40px, 8vw, 110px);

  margin-bottom: clamp(45px, 6vw, 70px);
}

.pricing-interventions__head h2 {
  margin: 14px 0 0;

  color: #fff8f1;
}

.pricing-interventions__head > p {
  margin: 0;

  color: rgba(248, 242, 235, 0.55);
}

.pricing-interventions__rates {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pricing-interventions__rates article {
  min-height: 125px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;

  gap: 30px;

  align-items: center;

  padding: 20px 4px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pricing-interventions__rates article strong {
  color: #fff8f1;
}

.pricing-interventions__rates article p {
  margin: 6px 0 0;

  color: rgba(248, 242, 235, 0.48);

  font-size: 8px;
}

.pricing-interventions__amount {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;

  gap: 4px;
}

.pricing-interventions__amount strong {
  font-size: clamp(2.6rem, 4vw, 4.3rem);
  line-height: 1;
}

.pricing-interventions__amount span {
  font-size: 1rem;
}

.pricing-interventions__amount small {
  color: rgba(248, 242, 235, 0.5);
}

.pricing-interventions__minimum {
  width: fit-content;

  display: flex;
  align-items: center;

  gap: 9px;

  margin: 24px 0 0 auto;

  padding: 9px 12px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);

  color: rgba(248, 242, 235, 0.6);

  font-size: 7px;
}

.pricing-interventions__minimum strong {
  color: #fff8f1;
}

/* =========================================================
   135. MAINTENANCE SCOPE
   ========================================================= */

.pricing-maintenance-scope {
  background: linear-gradient(135deg, #f3eee6, #e6ede3);
}

.pricing-maintenance-scope__head {
  max-width: 850px;

  margin-bottom: clamp(42px, 6vw, 68px);
}

.pricing-maintenance-scope__head h2 {
  margin: 14px 0 0;
}

.pricing-maintenance-scope__columns {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;
}

.pricing-maintenance-scope__columns > div {
  padding: clamp(25px, 4vw, 42px);

  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 22px;

  background: rgba(255, 253, 249, 0.66);
}

.pricing-maintenance-scope__columns h3 {
  display: flex;
  align-items: center;

  gap: 9px;

  margin: 0 0 22px;

  font-size: 1.75rem;
}

.pricing-maintenance-scope__included h3 i {
  color: #68866d;
}

.pricing-maintenance-scope__excluded h3 i {
  color: #a07066;
}

.pricing-maintenance-scope__columns ul {
  list-style: none;

  display: grid;

  gap: 12px;

  margin: 0;
  padding: 0;
}

.pricing-maintenance-scope__columns li {
  position: relative;

  padding-left: 16px;

  color: var(--muted);

  font-size: 9px;
  line-height: 1.55;
}

.pricing-maintenance-scope__columns li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.68em;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #789579;
}

.pricing-maintenance-scope__excluded li::before {
  background: #c48d80;
}

.pricing-maintenance-conditions {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  margin-top: 42px;

  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

.pricing-maintenance-conditions > div {
  min-height: 145px;

  padding: 20px;

  border-right: 1px solid rgba(57, 51, 46, 0.13);
  border-bottom: 1px solid rgba(57, 51, 46, 0.13);
}

.pricing-maintenance-conditions > div:nth-child(3n) {
  border-right: 0;
}

.pricing-maintenance-conditions .mono {
  color: var(--muted);

  font-size: 6px;
}

.pricing-maintenance-conditions p {
  margin: 10px 0 0;

  color: var(--muted);

  font-size: 8px;
}

/* =========================================================
   136. PRICING POLICY
   ========================================================= */

.pricing-policy {
  background: var(--paper);
}

.pricing-policy__head {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.3fr)
    minmax(0, 0.7fr);

  gap: clamp(40px, 8vw, 110px);

  margin-bottom: 30px;
}

.pricing-policy__head h2 {
  margin: 0 0 15px;
}

.pricing-policy__head p {
  margin: 0;

  color: var(--muted);
}

.pricing-policy__disclaimer {
  max-width: 900px;

  display: grid;

  grid-template-columns: 38px minmax(0, 1fr);

  gap: 11px;

  align-items: center;

  margin: 0 0 55px auto;

  padding: 15px;

  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 15px;

  background: var(--butter);

  color: #766639;

  font-size: 8px;
}

.pricing-policy__disclaimer i {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.38);
}

/* Policy layout */

.pricing-policy__layout {
  display: grid;

  grid-template-columns:
    260px
    minmax(0, 1fr);

  gap: clamp(55px, 8vw, 110px);

  align-items: start;
}

/* Sticky navigation */

.pricing-policy__nav {
  position: sticky;

  top: calc(var(--announcement-h) + var(--header-h) + 85px);

  display: grid;
}

.pricing-policy__nav > .mono {
  margin-bottom: 13px;

  color: var(--muted);

  font-size: 6px;
}

.pricing-policy__nav a {
  display: grid;

  grid-template-columns:
    29px
    minmax(0, 1fr);

  gap: 8px;

  padding: 10px 5px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.09);

  color: var(--muted);

  font-size: 7px;

  text-decoration: none;

  transition:
    color 0.2s ease,
    padding 0.2s var(--ease);
}

.pricing-policy__nav a .mono {
  font-size: 5.5px;
}

.pricing-policy__nav a:hover,
.pricing-policy__nav a.is-active {
  padding-left: 10px;

  color: var(--ink);
}

/* Policy sections */

.pricing-policy__content {
  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

.pricing-policy-section {
  scroll-margin-top: calc(var(--announcement-h) + var(--header-h) + 90px);

  padding: clamp(42px, 6vw, 70px) 0;

  border-bottom: 1px solid rgba(57, 51, 46, 0.14);
}

.pricing-policy-section > header {
  display: grid;

  grid-template-columns:
    50px
    minmax(0, 1fr);

  gap: 17px;

  margin-bottom: 27px;
}

.pricing-policy-section > header > .mono {
  color: #8065a3;

  font-size: 7px;
}

.pricing-policy-section h3 {
  margin: 0 0 8px;

  font-size: clamp(2rem, 3vw, 3.2rem);
}

.pricing-policy-section > header p {
  margin: 0;

  color: var(--muted);
}

.pricing-policy-section > ul {
  list-style: none;

  max-width: 820px;

  display: grid;

  gap: 0;

  margin: 0 0 0 67px;
  padding: 0;
}

.pricing-policy-section > ul li {
  display: grid;

  grid-template-columns:
    23px
    minmax(0, 1fr);

  gap: 8px;

  padding: 12px 0;

  border-bottom: 1px solid rgba(57, 51, 46, 0.08);

  color: var(--muted);

  font-size: 9px;
  line-height: 1.58;
}

.pricing-policy-section > ul li:last-child {
  border-bottom: 0;
}

.pricing-policy-section > ul i {
  padding-top: 4px;

  color: #6b896f;

  font-size: 7px;
}

/* Definitions */

.pricing-policy-definitions {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 9px;

  margin: 0 0 30px 67px;
}

.pricing-policy-definitions > div {
  padding: 18px;

  border: 1px solid rgba(57, 51, 46, 0.09);
  border-radius: 17px;

  background: rgba(244, 239, 231, 0.65);
}

.pricing-policy-definitions > div > span {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 13px;

  color: #8065a3;

  font-family: var(--font-mono);
  font-size: 6px;

  text-transform: uppercase;
}

.pricing-policy-definitions strong {
  display: block;

  margin-bottom: 8px;

  font-size: 9px;
}

.pricing-policy-definitions p {
  margin: 0;

  color: var(--muted);

  font-size: 8px;
  line-height: 1.55;
}

/* =========================================================
   137. PRICING FINAL CTA
   ========================================================= */

.pricing-final {
  padding: var(--section-space) 0;

  background:
    radial-gradient(
      circle at 89% 10%,
      rgba(255, 255, 255, 0.52),
      transparent 22%
    ),
    linear-gradient(115deg, var(--lav), var(--peach) 50%, var(--sage));
}

.pricing-final__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: clamp(45px, 8vw, 110px);

  align-items: end;
}

.pricing-final h2 {
  margin: 14px 0;
}

.pricing-final p {
  margin: 0;

  color: rgba(57, 51, 46, 0.68);
}

.pricing-final__actions {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}

/* =========================================================
   138. PRICING PAGE — TABLET
   ========================================================= */

@media (max-width: 1020px) {
  .pricing-hero__layout,
  .pricing-summary__layout,
  .pricing-policy__head,
  .pricing-interventions__head {
    grid-template-columns: 1fr;
  }

  .pricing-policy__layout {
    grid-template-columns: 200px minmax(0, 1fr);

    gap: 45px;
  }

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

  .pricing-maintenance-conditions > div:nth-child(3n) {
    border-right: 1px solid rgba(57, 51, 46, 0.13);
  }

  .pricing-maintenance-conditions > div:nth-child(2n) {
    border-right: 0;
  }
}

/* =========================================================
   139. PRICING PAGE — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .pricing-hero {
    padding: 155px 0 78px;
  }

  .pricing-hero__terms {
    max-width: 460px;
  }

  .pricing-summary__principles,
  .pricing-maintenance-scope__columns,
  .pricing-policy-definitions,
  .pricing-final__inner {
    grid-template-columns: 1fr;
  }

  .pricing-summary__principles article {
    border-right: 0;
  }

  .pricing-maintenance-conditions {
    grid-template-columns: 1fr;
  }

  .pricing-maintenance-conditions > div,
  .pricing-maintenance-conditions > div:nth-child(2n),
  .pricing-maintenance-conditions > div:nth-child(3n) {
    border-right: 0;
  }

  .pricing-interventions__rates article {
    grid-template-columns: 1fr;

    gap: 17px;
  }

  .pricing-interventions__amount {
    justify-content: flex-start;
  }

  .pricing-policy__layout {
    grid-template-columns: 1fr;
  }

  .pricing-policy__nav {
    position: relative;
    top: auto;

    grid-template-columns: repeat(2, 1fr);

    margin-bottom: 25px;

    border-top: 1px solid rgba(57, 51, 46, 0.1);
  }

  .pricing-policy__nav > .mono {
    grid-column: 1 / -1;

    margin: 15px 0 5px;
  }

  .pricing-policy-section > ul,
  .pricing-policy-definitions {
    margin-left: 0;
  }

  .pricing-policy-section > header {
    grid-template-columns: 37px minmax(0, 1fr);
  }

  .pricing-final__actions {
    justify-content: flex-start;
  }
}

/* =========================================================
   140. PRICING PAGE — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .pricing-policy__nav {
    grid-template-columns: 1fr;
  }

  .pricing-policy-definitions > div {
    padding: 15px;
  }

  .pricing-hero__terms {
    grid-template-columns: 1fr;

    text-align: left;
  }

  .pricing-hero__terms > i {
    transform: rotate(90deg);

    margin-inline: auto;
  }
}

/* =========================================================
   141. JOURNAL / INSIGHTS — HERO
   ========================================================= */

.journal-hero {
  padding: clamp(100px, 10vw, 140px) 0 clamp(80px, 9vw, 118px);

  overflow: clip;

  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(221, 211, 246, 0.34),
      transparent 24%
    ),
    radial-gradient(
      circle at 8% 92%,
      rgba(220, 230, 217, 0.25),
      transparent 27%
    ),
    var(--bg);

  border-bottom: 1px solid var(--border-soft);
}

.journal-hero__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    260px;

  gap: clamp(52px, 9vw, 135px);

  align-items: end;
}

.journal-hero h1 {
  margin: 17px 0 22px;

  font-size: clamp(4rem, 7.2vw, 7.8rem);

  line-height: 0.9;
}

.journal-hero__lead {
  margin: 0;

  color: var(--muted);

  font-size: clamp(1rem, 1.22vw, 1.14rem);

  line-height: 1.72;
}

.journal-hero__note {
  padding: 20px 0 8px;

  border-top: 1px solid rgba(57, 51, 46, 0.16);
}

.journal-hero__note .mono {
  display: block;

  margin-bottom: 8px;

  color: #8065a3;

  font-size: 1.3rem;
}

.journal-hero__note p {
  margin: 0;

  color: var(--muted);

  font-size: 8px;

  line-height: 1.55;
}

/* =========================================================
   142. JOURNAL — SECTION LABEL
   ========================================================= */

.journal-section-label {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 27px;

  padding-bottom: 13px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.13);
}

.journal-section-label .mono {
  color: var(--muted);

  font-size: 6px;
}

.journal-section-label strong {
  font-size: 8px;

  text-transform: uppercase;
}

/* =========================================================
   143. JOURNAL — FEATURED ARTICLE
   ========================================================= */

.journal-featured {
  background: linear-gradient(135deg, #f4eee7, #ebe6ed 54%, #e6ece4);
}

.journal-featured-card {
  display: grid;

  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(360px, 0.84fr);

  gap: clamp(35px, 6vw, 85px);

  align-items: center;
}

.journal-featured-card__media {
  position: relative;

  min-height: 570px;

  overflow: hidden;

  border-radius: 28px;

  background: #ddd8d1;
}

.journal-featured-card__media img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.65s var(--ease-smooth);
}

.journal-featured-card__media:hover img {
  transform: scale(1.025);
}

.journal-featured-card__copy h2 {
  margin: 16px 0 15px;

  font-size: clamp(2.7rem, 4.2vw, 5rem);

  line-height: 0.96;
}

.journal-featured-card__copy h2 a,
.journal-card h3 a {
  color: inherit;

  text-decoration: none;
}

.journal-featured-card__copy > p {
  margin: 0 0 23px;

  color: var(--muted);

  font-size: 9px;

  line-height: 1.68;
}

.journal-read-link {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  min-height: 42px;

  color: var(--ink);

  font-size: 8px;

  font-weight: 700;
}

.journal-read-link i {
  transition: transform 0.25s var(--ease);
}

.journal-read-link:hover i {
  transform: translateX(4px);
}

/* =========================================================
   144. JOURNAL — CARD META
   ========================================================= */

.journal-card-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 6px 12px;

  align-items: center;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 5.7px;

  text-transform: uppercase;
}

.journal-card-meta > * {
  position: relative;
}

.journal-card-meta > *:not(:last-child)::after {
  content: "";

  position: absolute;

  right: -7px;
  top: 50%;

  width: 2px;
  height: 2px;

  border-radius: 50%;

  background: rgba(57, 51, 46, 0.35);
}

/* =========================================================
   145. JOURNAL — SEARCH + FILTERS
   ========================================================= */

.journal-archive {
  background: var(--paper);
}

.journal-controls {
  display: grid;

  grid-template-columns:
    minmax(270px, 0.34fr)
    minmax(0, 1fr)
    auto;

  gap: 14px;

  align-items: center;

  margin-bottom: 28px;
}

.journal-search {
  min-height: 48px;

  display: grid;

  grid-template-columns:
    28px
    minmax(0, 1fr)
    34px;

  align-items: center;

  gap: 5px;

  padding: 4px 7px 4px 13px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.76);
}

.journal-search > i {
  color: var(--muted);

  font-size: 10px;
}

.journal-search input {
  min-width: 0;

  width: 100%;

  border: 0;

  outline: 0;

  background: transparent;

  color: var(--ink);

  font: inherit;

  font-size: 8px;
}

.journal-search label {
  word-wrap: normal !important;
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-break: normal !important;
}

.journal-search button {
  width: 32px;
  height: 32px;

  display: grid;

  place-items: center;

  border: 0;

  border-radius: 50%;

  background: #302b32;

  color: #fff8f1;

  cursor: pointer;
}

.journal-categories {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}

.journal-category-link,
.journal-clear {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  min-height: 36px;

  padding: 7px 10px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 999px;

  color: var(--muted);

  font-size: 7px;

  font-weight: 650;

  text-decoration: none;
}

.journal-category-link:hover,
.journal-category-link.is-active {
  border-color: #302b32;

  background: #302b32;

  color: #fff8f1;
}

.journal-clear {
  white-space: nowrap;

  border-color: transparent;
}

/* =========================================================
   146. JOURNAL — ARTICLE GRID
   ========================================================= */

.journal-grid,
.journal-related__grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: clamp(26px, 4vw, 50px) clamp(18px, 3vw, 38px);
}

.journal-card__media {
  position: relative;

  display: block;

  min-height: 390px;

  overflow: hidden;

  border-radius: 22px;

  background: #ddd8d1;
}

.journal-card__media img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.55s var(--ease-smooth);
}

.journal-card:hover .journal-card__media img {
  transform: scale(1.025);
}

.journal-card-placeholder {
  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  background:
    radial-gradient(
      circle at 78% 17%,
      rgba(221, 211, 246, 0.65),
      transparent 31%
    ),
    linear-gradient(135deg, var(--sage), var(--peach));
}

.journal-card-placeholder i {
  color: rgba(57, 51, 46, 0.28);

  font-size: 2rem;
}

.journal-card__arrow {
  position: absolute;

  right: 14px;
  bottom: 14px;

  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: rgba(255, 253, 249, 0.91);

  color: var(--ink);

  transform: rotate(-8deg);

  transition:
    transform 0.25s var(--ease),
    background 0.25s ease,
    color 0.25s ease;
}

.journal-card:hover .journal-card__arrow {
  transform: rotate(0deg);

  background: #302b32;

  color: #fff8f1;
}

.journal-card__body {
  padding: 16px 16px 8px;
}

.journal-card h3 {
  margin: 10px 0 9px;

  font-size: clamp(1.9rem, 2.7vw, 3rem);

  line-height: 1;
}

.journal-card__body > p {
  margin: 0;

  color: var(--muted);

  font-size: 8px;

  line-height: 1.58;
}

/* =========================================================
   147. JOURNAL — PAGINATION / EMPTY
   ========================================================= */

.journal-pagination {
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 5px;

  margin-top: clamp(50px, 7vw, 85px);
}

.journal-pagination .page-numbers {
  min-width: 38px;
  height: 38px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  padding: 0 10px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 999px;

  color: var(--muted);

  font-size: 7px;

  text-decoration: none;
}

.journal-pagination .page-numbers.current {
  border-color: #302b32;

  background: #302b32;

  color: #fff8f1;
}

.journal-empty {
  max-width: 570px;

  margin: clamp(55px, 8vw, 100px) auto 0;

  text-align: center;
}

.journal-empty > span {
  width: 58px;
  height: 58px;

  display: grid;

  place-items: center;

  margin: 0 auto 17px;

  border-radius: 50%;

  background: var(--lav);

  color: #8065a3;
}

.journal-empty h3 {
  margin: 0 0 10px;

  font-size: clamp(2rem, 4vw, 3rem);
}

.journal-empty p {
  margin: 0 0 22px;

  color: var(--muted);
}

/* =========================================================
   148. JOURNAL — FINAL CTA
   ========================================================= */

.journal-final {
  padding: var(--section-space) 0;

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(255, 255, 255, 0.48),
      transparent 22%
    ),
    linear-gradient(115deg, var(--lav), var(--sage) 52%, var(--butter));
}

.journal-final__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: clamp(45px, 8vw, 110px);

  align-items: end;
}

.journal-final h2 {
  margin: 14px 0;
}

.journal-final p {
  margin: 0;

  color: rgba(57, 51, 46, 0.68);
}

.journal-final__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}

/* =========================================================
   149. SINGLE ARTICLE — HERO / PROGRESS
   ========================================================= */

.journal-reading-progress {
  position: fixed;

  left: 0;
  right: 0;
  top: 0;

  z-index: 120;

  height: 3px;

  pointer-events: none;
}

.journal-reading-progress span {
  display: block;

  width: 0;
  height: 100%;

  background: linear-gradient(90deg, #8065a3, #789879);
}

.journal-single-hero {
  padding: clamp(165px, 17vw, 225px) 0 clamp(55px, 7vw, 90px);

  background:
    radial-gradient(
      circle at 89% 9%,
      rgba(221, 211, 246, 0.31),
      transparent 24%
    ),
    var(--bg);
}

.journal-single-hero__inner {
  max-width: 1080px;
}

.journal-single-back {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  margin-bottom: clamp(45px, 6vw, 75px);

  color: var(--muted);

  font-size: 7px;

  font-weight: 650;

  text-decoration: none;
}

.journal-single-hero h1 {
  margin: 19px 0 20px;

  font-size: clamp(3.7rem, 7.1vw, 7.6rem);

  line-height: 0.91;
}

.journal-single-hero__excerpt {
  margin: 0;

  color: var(--muted);

  font-size: clamp(1rem, 1.3vw, 1.18rem);

  line-height: 1.7;
}

.journal-single-hero__dates {
  display: flex;

  flex-wrap: wrap;

  gap: 9px 22px;

  margin-top: 30px;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 5.7px;

  text-transform: uppercase;
}

.journal-single-hero__dates time {
  color: var(--ink);
}

.journal-single-cover {
  margin-bottom: clamp(58px, 8vw, 110px);
}

.journal-single-cover img {
  width: 100%;

  max-height: 760px;

  object-fit: cover;

  border-radius: 28px;
}

/* =========================================================
   150. SINGLE ARTICLE — CONTENT
   ========================================================= */

.journal-article {
  padding-bottom: var(--section-space);

  background: var(--paper);
}

.journal-article__layout {
  display: grid;

  grid-template-columns:
    190px
    minmax(0, 760px);

  gap: clamp(45px, 8vw, 110px);

  justify-content: center;

  align-items: start;
}

.journal-article__aside {
  position: sticky;

  top: calc(var(--announcement-h) + var(--header-h) + 45px);
}

.journal-share {
  display: grid;

  gap: 10px;
}

.journal-share > .mono {
  color: var(--muted);

  font-size: 5.7px;

  text-transform: uppercase;
}

.journal-share button {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  width: fit-content;

  padding: 8px 10px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 999px;

  background: transparent;

  color: var(--ink);

  font: inherit;

  font-size: 7px;

  cursor: pointer;
}

.journal-article__content {
  min-width: 0;

  font-size: clamp(1rem, 1.05vw, 1.08rem);

  line-height: 1.86;
}

.journal-article__content > *:first-child {
  margin-top: 0;
}

.journal-article__content p,
.journal-article__content li {
  color: #554e48;
}

.journal-article__content h2,
.journal-article__content h3,
.journal-article__content h4 {
  scroll-margin-top: calc(var(--announcement-h) + var(--header-h) + 35px);

  color: var(--ink);
}

.journal-article__content h2 {
  margin: 2.1em 0 0.7em;

  font-size: clamp(2.3rem, 3.4vw, 3.7rem);

  line-height: 1.02;
}

.journal-article__content h3 {
  margin: 1.8em 0 0.65em;

  font-size: clamp(1.8rem, 2.5vw, 2.6rem);

  line-height: 1.05;
}

.journal-article__content a {
  color: #705695;

  text-decoration-thickness: 1px;

  text-underline-offset: 3px;
}

.journal-article__content blockquote {
  margin: 2.2em 0;

  padding: 20px 0 20px 25px;

  border-left: 3px solid #8065a3;

  color: var(--ink);

  font-family: var(--font-script);

  font-size: clamp(1.7rem, 2.7vw, 2.7rem);

  line-height: 1.15;
}

.journal-article__content figure {
  margin: 2.2em 0;
}

.journal-article__content img {
  max-width: 100%;

  height: auto;

  border-radius: 18px;
}

.journal-article__content figcaption {
  margin-top: 8px;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 5.8px;
}

.journal-article__content pre,
.journal-article__content code {
  font-family: var(--font-mono);
}

.journal-article__content pre {
  overflow-x: auto;

  padding: 18px;

  border-radius: 15px;

  background: #302b32;

  color: #fff8f1;

  font-size: 0.82rem;
}

.journal-article__content table {
  width: 100%;

  border-collapse: collapse;

  margin: 2em 0;

  font-size: 0.9rem;
}

.journal-article__content th,
.journal-article__content td {
  padding: 10px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.12);

  text-align: left;
}

/* =========================================================
   151. SINGLE ARTICLE — RELATED
   ========================================================= */

.journal-related {
  background: linear-gradient(135deg, #f3eee7, #e9ede5);
}

.journal-related__head {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.32fr)
    minmax(0, 0.68fr);

  gap: 40px;

  align-items: end;

  margin-bottom: 42px;
}

.journal-related__head h2 {
  margin: 0;
}

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

.journal-related .journal-card__media {
  min-height: 300px;
}

.journal-related .journal-card h3 {
  font-size: clamp(1.65rem, 2.1vw, 2.3rem);
}

/* =========================================================
   152. JOURNAL — TABLET
   ========================================================= */

@media (max-width: 1020px) {
  .journal-featured-card {
    grid-template-columns: 1fr;
  }

  .journal-featured-card__media {
    min-height: 500px;
  }

  .journal-controls {
    grid-template-columns: 1fr;
  }

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

/* =========================================================
   153. JOURNAL — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .journal-hero,
  .journal-single-hero {
    padding-top: 155px;
  }

  .journal-hero__layout,
  .journal-final__inner,
  .journal-related__head,
  .journal-article__layout {
    grid-template-columns: 1fr;
  }

  .journal-hero__note {
    max-width: 330px;
  }

  .journal-featured-card__media {
    min-height: clamp(360px, 105vw, 500px);
  }

  .journal-categories {
    flex-wrap: nowrap;

    overflow-x: auto;

    margin-inline: calc(var(--gutter) * -1);

    padding-inline: var(--gutter);

    padding-bottom: 5px;

    scrollbar-width: none;
  }

  .journal-categories::-webkit-scrollbar {
    display: none;
  }

  .journal-category-link {
    flex: 0 0 auto;
  }

  .journal-grid,
  .journal-related__grid {
    grid-template-columns: 1fr;
  }

  .journal-card__media,
  .journal-related .journal-card__media {
    min-height: clamp(340px, 100vw, 480px);
  }

  .journal-final__actions {
    justify-content: flex-start;
  }

  .journal-single-cover img {
    border-radius: 20px;
  }

  .journal-article__aside {
    position: static;
  }

  .journal-share {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 17px;

    border-bottom: 1px solid rgba(57, 51, 46, 0.1);
  }
}

/* =========================================================
   154. JOURNAL — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .journal-featured-card__media img,
  .journal-card__media img,
  .journal-card__arrow,
  .journal-read-link i {
    transition: none !important;

    transform: none !important;
  }
}

/* =========================================================
   155. JOURNAL STORY — ARTICLE EXPERIENCE
   ========================================================= */

/* =========================================================
   Reading progress
   ========================================================= */

.journal-story-progress {
  position: fixed;

  z-index: 200;

  top: 0;
  left: 0;
  right: 0;

  height: 3px;

  pointer-events: none;
}

.journal-story-progress span {
  display: block;

  width: 0;
  height: 100%;

  background: linear-gradient(90deg, #8065a3, #bb8681, #789579);

  transform-origin: left center;
}

/* =========================================================
   156. ARTICLE HERO
   ========================================================= */

.journal-story-hero {
  position: relative;

  overflow: clip;

  padding: clamp(165px, 16vw, 220px) 0 clamp(78px, 8vw, 112px);

  background:
    radial-gradient(
      circle at 87% 12%,
      rgba(221, 211, 246, 0.42),
      transparent 27%
    ),
    radial-gradient(
      circle at 9% 92%,
      rgba(220, 230, 217, 0.26),
      transparent 24%
    ),
    var(--bg);

  border-bottom: 1px solid var(--border-soft);
}

.journal-story-hero__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(230px, 310px);

  gap: clamp(55px, 9vw, 145px);

  align-items: end;
}

/* Back */

.journal-story-back {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  margin-bottom: clamp(40px, 5vw, 65px);

  color: var(--muted);

  font-size: 7px;

  font-weight: 700;

  text-decoration: none;
}

.journal-story-back i {
  transition: transform 0.22s var(--ease);
}

.journal-story-back:hover i {
  transform: translateX(-4px);
}

/* Metadata */

.journal-story-meta {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 7px 17px;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 5.8px;

  text-transform: uppercase;
}

.journal-story-meta > * {
  position: relative;
}

.journal-story-meta > *:not(:last-child)::after {
  content: "";

  position: absolute;

  right: -10px;
  top: 50%;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: rgba(57, 51, 46, 0.35);
}

.journal-story-meta__category {
  color: #765994;

  font-weight: 700;
}

/* Title */

.journal-story-hero h1 {
  margin: 18px 0 21px;

  font-size: clamp(3.65rem, 6.5vw, 7rem);

  line-height: 0.91;
}

/* Standfirst */

.journal-story-standfirst {
  margin: 0;

  color: var(--muted);

  font-size: clamp(1.05rem, 1.35vw, 1.24rem);

  line-height: 1.72;
}

/* Dates */

.journal-story-dates {
  display: flex;

  flex-wrap: wrap;

  gap: 10px 28px;

  margin-top: 31px;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 5.7px;

  text-transform: uppercase;
}

.journal-story-dates span {
  display: flex;

  gap: 6px;
}

.journal-story-dates strong {
  color: var(--ink);

  font-weight: 600;
}

/* =========================================================
   157. ARTICLE STAMP
   ========================================================= */

.journal-story-stamp {
  align-self: end;

  padding: clamp(23px, 3vw, 34px);

  border: 1px solid rgba(57, 51, 46, 0.11);

  border-radius: 24px;

  background: rgba(255, 253, 249, 0.57);

  box-shadow: 0 18px 50px rgba(57, 51, 46, 0.045);

  backdrop-filter: blur(14px);
}

.journal-story-stamp__number {
  display: flex;

  align-items: flex-end;

  gap: 8px;
}

.journal-story-stamp__number strong {
  font-size: clamp(3.7rem, 5vw, 5.4rem);

  font-weight: 550;

  line-height: 0.82;
}

.journal-story-stamp__number span {
  padding-bottom: 4px;

  color: #8065a3;

  font-size: 6px;
}

.journal-story-stamp__line {
  width: 100%;
  height: 1px;

  margin: 24px 0 18px;

  background: rgba(57, 51, 46, 0.12);
}

.journal-story-stamp__info {
  display: grid;

  gap: 6px;
}

.journal-story-stamp__info .mono {
  color: var(--muted);

  font-size: 5.5px;

  text-transform: uppercase;
}

.journal-story-stamp__info strong {
  font-size: 8px;
}

.journal-story-stamp__info > span:last-child {
  color: var(--muted);

  font-size: 7px;
}

/* =========================================================
   158. EDITORIAL COVER
   ========================================================= */

.journal-story-cover {
  padding: clamp(46px, 6vw, 76px) 0 clamp(75px, 9vw, 125px);

  background: var(--paper);
}

.journal-story-cover__shell {
  max-width: min(var(--container), 1680px);
}

.journal-story-cover__figure {
  margin: 0;
}

.journal-story-cover__image {
  position: relative;

  overflow: hidden;

  aspect-ratio: 16 / 8.2;

  min-height: 500px;

  border-radius: clamp(22px, 3vw, 36px);

  background: #ddd8d1;
}

.journal-story-cover__image::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.journal-story-cover__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.journal-story-cover figcaption {
  max-width: 760px;

  margin: 10px 0 0 auto;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 5.5px;

  line-height: 1.55;
}

/* =========================================================
   159. ARTICLE LAYOUT
   ========================================================= */

.journal-story-body {
  padding: 0 0 var(--section-space);

  background: var(--paper);
}

.journal-story-layout {
  display: grid;

  grid-template-columns:
    minmax(180px, 220px)
    minmax(0, 780px);

  gap: clamp(55px, 8vw, 115px);

  justify-content: center;

  align-items: start;
}

/* =========================================================
   160. READING RAIL
   ========================================================= */

.journal-story-rail {
  position: sticky;

  top: calc(var(--announcement-h) + var(--header-h) + 38px);

  display: grid;

  gap: 35px;

  align-self: start;
}

/* TOC */

.journal-story-toc {
  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

.journal-story-toc[hidden] {
  display: none;
}

.journal-story-toc summary {
  list-style: none;

  padding: 15px 0;

  color: var(--ink);

  font-size: 8px;

  font-weight: 700;

  cursor: pointer;
}

.journal-story-toc summary::-webkit-details-marker {
  display: none;
}

.journal-story-toc summary i {
  display: none;
}

.journal-story-toc ol {
  list-style: none;

  display: grid;

  margin: 0;
  padding: 0;
}

.journal-story-toc li {
  border-bottom: 1px solid rgba(57, 51, 46, 0.08);
}

.journal-story-toc a {
  display: grid;

  grid-template-columns:
    27px
    minmax(0, 1fr);

  gap: 7px;

  padding: 10px 2px;

  color: var(--muted);

  font-size: 7px;

  line-height: 1.35;

  text-decoration: none;

  transition:
    color 0.2s ease,
    padding 0.2s var(--ease);
}

.journal-story-toc a::before {
  content: attr(data-index);

  color: rgba(57, 51, 46, 0.43);

  font-family: var(--font-mono);

  font-size: 5.4px;
}

.journal-story-toc a:hover,
.journal-story-toc a.is-active {
  padding-left: 7px;

  color: var(--ink);
}

.journal-story-toc a.is-active::before {
  color: #8065a3;
}

/* Share */

.journal-story-share {
  display: grid;

  gap: 7px;
}

.journal-story-share > .mono {
  margin-bottom: 4px;

  color: var(--muted);

  font-size: 5.5px;

  text-transform: uppercase;
}

.journal-story-share button {
  width: 100%;

  min-height: 38px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 7px 10px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 10px;

  background: transparent;

  color: var(--muted);

  font: inherit;

  font-size: 6.5px;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.journal-story-share button:hover {
  background: rgba(57, 51, 46, 0.045);

  color: var(--ink);
}

/* =========================================================
   161. ARTICLE TYPOGRAPHY
   ========================================================= */

.journal-story-content {
  min-width: 0;

  color: #504944;

  font-size: clamp(1rem, 1.08vw, 1.095rem);

  line-height: 1.87;
}

/*
 * The opening paragraph gets editorial emphasis
 * without requiring special Gutenberg markup.
 */
.journal-story-content > p:first-of-type {
  margin-top: 0;

  color: var(--ink);

  font-size: clamp(1.2rem, 1.55vw, 1.43rem);

  line-height: 1.66;
}

/* Paragraph rhythm */

.journal-story-content p {
  margin: 0 0 1.4em;
}

/* Headings */

.journal-story-content h2,
.journal-story-content h3,
.journal-story-content h4 {
  color: var(--ink);

  scroll-margin-top: calc(var(--announcement-h) + var(--header-h) + 55px);
}

.journal-story-content h2 {
  margin: 2.15em 0 0.65em;

  padding-top: 0.25em;

  font-size: clamp(2.5rem, 3.5vw, 3.8rem);

  line-height: 1;
}

.journal-story-content h3 {
  margin: 1.85em 0 0.62em;

  font-size: clamp(1.9rem, 2.5vw, 2.7rem);

  line-height: 1.03;
}

.journal-story-content h4 {
  margin: 1.65em 0 0.55em;

  font-size: 1.15rem;
}

/* Links */

.journal-story-content a {
  color: #705695;

  text-decoration-line: underline;

  text-decoration-thickness: 1px;

  text-underline-offset: 4px;

  text-decoration-color: rgba(112, 86, 149, 0.42);
}

/* =========================================================
   Lists
   ========================================================= */

.journal-story-content ul,
.journal-story-content ol {
  display: grid;

  gap: 9px;

  margin: 1.5em 0 1.8em;

  padding-left: 1.4em;
}

.journal-story-content li {
  padding-left: 4px;
}

.journal-story-content li::marker {
  color: #8065a3;
}

/* =========================================================
   Blockquote
   ========================================================= */

.journal-story-content blockquote {
  position: relative;

  margin: clamp(42px, 7vw, 72px) clamp(-40px, -3vw, -18px);

  padding: clamp(28px, 4vw, 42px);

  border: 0;

  border-radius: 22px;

  background: linear-gradient(135deg, var(--lav), #e9e1ef);

  color: var(--ink);
}

.journal-story-content blockquote::before {
  content: "“";

  position: absolute;

  left: 20px;
  top: 5px;

  color: rgba(128, 101, 163, 0.25);

  font-family: Georgia, serif;

  font-size: 5rem;

  line-height: 1;
}

.journal-story-content blockquote p {
  position: relative;

  margin: 0;

  font-family: var(--font-script);

  font-size: clamp(2rem, 3.2vw, 3.3rem);

  line-height: 1.08;
}

/* =========================================================
   Images and figures
   ========================================================= */

.journal-story-content figure {
  margin: clamp(38px, 6vw, 65px) 0;
}

.journal-story-content img {
  width: auto;

  max-width: 100%;
  height: auto;

  border-radius: 17px;
}

.journal-story-content figcaption {
  margin: 9px 0 0;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 5.5px;

  line-height: 1.55;
}

/*
 * Gutenberg wide media can break outside the body column.
 */
.journal-story-content .alignwide {
  width: min(1040px, calc(100vw - 2 * var(--gutter)));

  max-width: none;

  margin-left: 50%;

  transform: translateX(-50%);
}

.journal-story-content .alignfull {
  width: min(1280px, calc(100vw - 2 * var(--gutter)));

  max-width: none;

  margin-left: 50%;

  transform: translateX(-50%);
}

/* =========================================================
   Gutenberg separators
   ========================================================= */

.journal-story-content hr,
.journal-story-content .wp-block-separator {
  width: 100%;

  margin: clamp(45px, 7vw, 70px) 0;

  border: 0;

  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

/* =========================================================
   Code
   ========================================================= */

.journal-story-content code,
.journal-story-content pre {
  font-family: var(--font-mono);
}

.journal-story-content :not(pre) > code {
  padding: 2px 5px;

  border-radius: 5px;

  background: rgba(128, 101, 163, 0.09);

  font-size: 0.86em;
}

.journal-story-content pre {
  overflow-x: auto;

  margin: 2em 0;

  padding: clamp(18px, 3vw, 27px);

  border-radius: 18px;

  background: #302b32;

  color: #f8f2eb;

  font-size: 0.82rem;

  line-height: 1.65;
}

/* =========================================================
   Tables
   ========================================================= */

.journal-story-content .wp-block-table {
  overflow-x: auto;

  margin: 2.2em 0;
}

.journal-story-content table {
  width: 100%;

  border-collapse: collapse;

  font-size: 0.9rem;
}

.journal-story-content th,
.journal-story-content td {
  padding: 12px 10px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.12);

  text-align: left;
}

.journal-story-content th {
  color: var(--ink);

  font-weight: 700;
}

/* =========================================================
   Details
   ========================================================= */

.journal-story-content details {
  margin: 18px 0;

  padding: 16px 18px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 14px;

  background: rgba(244, 239, 231, 0.55);
}

.journal-story-content summary {
  color: var(--ink);

  font-weight: 700;

  cursor: pointer;
}

/* =========================================================
   162. ARTICLE END
   ========================================================= */

.journal-story-end {
  margin-top: clamp(70px, 10vw, 110px);

  padding-top: 10px;
}

.journal-story-end__rule {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  gap: 10px;

  align-items: center;
}

.journal-story-end__rule span {
  height: 1px;

  background: rgba(57, 51, 46, 0.14);
}

.journal-story-end__rule i {
  color: #8065a3;

  font-size: 5px;
}

.journal-story-end > .mono {
  margin: 13px 0 0;

  color: var(--muted);

  font-size: 5.5px;

  text-align: center;

  text-transform: uppercase;
}

/* Tags */

.journal-story-tags {
  display: grid;

  grid-template-columns:
    90px
    minmax(0, 1fr);

  gap: 18px;

  margin-top: 45px;

  padding-top: 20px;

  border-top: 1px solid rgba(57, 51, 46, 0.1);
}

.journal-story-tags > .mono {
  padding-top: 6px;

  color: var(--muted);

  font-size: 5.5px;

  text-transform: uppercase;
}

.journal-story-tags > div {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}

.journal-story-tags > div span {
  padding: 6px 9px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 999px;

  color: var(--muted);

  font-size: 6px;
}

/* =========================================================
   163. ARTICLE CTA
   ========================================================= */

.journal-story-cta {
  padding: 0 0 var(--section-space);

  background: var(--paper);
}

.journal-story-cta__card {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: clamp(42px, 8vw, 120px);

  align-items: end;

  padding: clamp(32px, 5vw, 58px);

  border-radius: clamp(22px, 3vw, 31px);

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(255, 255, 255, 0.44),
      transparent 24%
    ),
    linear-gradient(115deg, var(--lav), var(--peach) 52%, var(--sage));
}

.journal-story-cta h2 {
  margin: 14px 0;
}

.journal-story-cta p {
  margin: 0;

  color: rgba(57, 51, 46, 0.67);
}

.journal-story-cta__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}

/* =========================================================
   164. RELATED STORIES
   ========================================================= */

.journal-story-related {
  background: linear-gradient(135deg, #f3eee7, #e8ece5);
}

.journal-story-related__head {
  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 35px;

  margin-bottom: clamp(35px, 5vw, 55px);
}

.journal-story-related__head h2 {
  margin: 0;

  font-size: clamp(2.7rem, 4vw, 4.5rem);
}

.journal-story-related__grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: clamp(17px, 2.5vw, 32px);
}

.journal-story-related .journal-card__media {
  min-height: 310px;
}

.journal-story-related .journal-card h3 {
  font-size: clamp(1.7rem, 2.1vw, 2.35rem);
}

/* =========================================================
   165. TABLET
   ========================================================= */

@media (max-width: 1050px) {
  .journal-story-hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      220px;

    gap: 50px;
  }

  .journal-story-layout {
    grid-template-columns:
      180px
      minmax(0, 720px);

    gap: 45px;
  }

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

/* =========================================================
   166. MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .journal-story-hero {
    padding: 150px 0 62px;
  }

  .journal-story-hero__grid {
    grid-template-columns: 1fr;

    gap: 38px;
  }

  .journal-story-hero h1 {
    font-size: clamp(3.5rem, 15vw, 5.4rem);
  }

  .journal-story-stamp {
    width: 100%;

    display: grid;

    grid-template-columns:
      auto
      1px
      minmax(0, 1fr);

    gap: 20px;

    align-items: center;
  }

  .journal-story-stamp__line {
    width: 1px;
    height: 70px;

    margin: 0;
  }

  .journal-story-cover {
    padding: 28px 0 70px;
  }

  .journal-story-cover__image {
    min-height: 0;

    aspect-ratio: 4 / 3;

    border-radius: 20px;
  }

  .journal-story-layout {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  /* Rail becomes normal flow */

  .journal-story-rail {
    position: static;

    gap: 18px;
  }

  /* Mobile TOC */

  .journal-story-toc {
    border: 1px solid rgba(57, 51, 46, 0.1);

    border-radius: 14px;

    background: rgba(244, 239, 231, 0.55);
  }

  .journal-story-toc summary {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 13px 15px;
  }

  .journal-story-toc summary i {
    display: block;

    transition: transform 0.2s ease;
  }

  .journal-story-toc[open] summary i {
    transform: rotate(180deg);
  }

  .journal-story-toc nav {
    padding: 0 14px 12px;
  }

  /* Share becomes horizontal */

  .journal-story-share {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
  }

  .journal-story-share > .mono {
    width: 100%;
  }

  .journal-story-share button {
    width: auto;
  }

  .journal-story-content > p:first-of-type {
    font-size: 1.16rem;
  }

  .journal-story-content blockquote {
    margin: 40px 0;

    border-radius: 18px;
  }

  .journal-story-content .alignwide,
  .journal-story-content .alignfull {
    width: 100%;

    max-width: 100%;

    margin-left: 0;

    transform: none;
  }

  .journal-story-tags {
    grid-template-columns: 1fr;
  }

  .journal-story-cta__card {
    grid-template-columns: 1fr;
  }

  .journal-story-cta__actions {
    justify-content: flex-start;
  }

  .journal-story-related__head {
    display: block;
  }

  .journal-story-related__head .section-eyebrow {
    margin-bottom: 13px;
  }

  .journal-story-related__grid {
    grid-template-columns: 1fr;
  }

  .journal-story-related .journal-card__media {
    min-height: clamp(330px, 100vw, 470px);
  }
}

/* =========================================================
   167. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .journal-story-stamp {
    padding: 18px;
  }

  .journal-story-stamp__number strong {
    font-size: 3.3rem;
  }

  .journal-story-cta__card {
    padding: 27px 20px;
  }
}

/* =========================================================
   168. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .journal-story-back i,
  .journal-story-toc a,
  .journal-story-toc summary i {
    transition: none !important;
  }
}

/* =========================================================
   169. CONTACT / CONTACTEZ-NOUS
   ========================================================= */

/* =========================================================
   CONTACT — HERO
   ========================================================= */

.contact-hero {
  position: relative;

  overflow: clip;

  padding: clamp(170px, 17vw, 230px) 0 clamp(80px, 9vw, 120px);

  background:
    radial-gradient(
      circle at 90% 9%,
      rgba(221, 211, 246, 0.39),
      transparent 25%
    ),
    radial-gradient(
      circle at 7% 91%,
      rgba(238, 214, 216, 0.27),
      transparent 26%
    ),
    var(--bg);

  border-bottom: 1px solid var(--border-soft);
}

.contact-hero__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(360px, 0.42fr);

  gap: clamp(50px, 9vw, 140px);

  align-items: end;
}

.contact-hero h1 {
  margin: 17px 0 22px;

  font-size: clamp(3.8rem, 6.8vw, 7.4rem);

  line-height: 0.91;
}

.contact-hero__lead {
  margin: 0;

  color: var(--muted);

  font-size: clamp(1rem, 1.28vw, 1.18rem);

  line-height: 1.72;
}

/* =========================================================
   CONTACT — HERO LINKS
   ========================================================= */

.contact-hero__side {
  display: grid;

  gap: 7px;
}

.contact-hero-link {
  display: grid;

  grid-template-columns:
    41px
    minmax(0, 1fr)
    24px;

  gap: 11px;

  align-items: center;

  min-height: 72px;

  padding: 10px 13px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 16px;

  background: rgba(255, 253, 249, 0.58);

  color: var(--ink);

  text-decoration: none;

  backdrop-filter: blur(12px);

  transition:
    background 0.22s ease,
    transform 0.22s var(--ease);
}

.contact-hero-link:hover {
  background: rgba(255, 253, 249, 0.86);

  transform: translateX(4px);
}

.contact-hero-link > span {
  width: 39px;
  height: 39px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background: var(--lav);

  color: #8065a3;
}

.contact-hero-link:nth-child(2) > span {
  background: var(--sage);

  color: #67856c;
}

.contact-hero-link small {
  display: block;

  margin-bottom: 4px;

  color: var(--muted);

  font-size: 5.5px;

  text-transform: uppercase;
}

.contact-hero-link strong {
  font-size: 8px;

  overflow-wrap: anywhere;
}

.contact-hero-link > i {
  color: var(--muted);

  font-size: 7px;
}

.contact-hero__availability {
  display: flex;

  align-items: center;

  gap: 7px;

  margin: 11px 3px 0;

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 5.7px;
}

/* =========================================================
   170. CONTACT — PROJECT FORM
   ========================================================= */

.contact-project {
  background: linear-gradient(135deg, #f4eee7, #ebe9e2);
}

.contact-project__head {
  display: grid;

  grid-template-columns:
    minmax(0, 0.62fr)
    minmax(300px, 0.38fr);

  gap: clamp(45px, 8vw, 110px);

  align-items: end;

  margin-bottom: clamp(50px, 7vw, 82px);
}

.contact-project__head h2 {
  margin: 14px 0 0;
}

.contact-project__head > p {
  margin: 0;

  color: var(--muted);

  line-height: 1.7;
}

.contact-project__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.28fr)
    minmax(340px, 0.72fr);

  gap: clamp(38px, 7vw, 95px);

  align-items: start;
}

/* =========================================================
   Contact form panel
   ========================================================= */

.contact-form-panel {
  padding: clamp(24px, 4vw, 44px);

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: clamp(22px, 3vw, 30px);

  background: rgba(255, 253, 249, 0.84);

  box-shadow: 0 24px 65px rgba(57, 51, 46, 0.06);
}

.contact-form-panel__head {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(240px, 0.42fr);

  gap: 30px;

  align-items: end;

  margin-bottom: 35px;

  padding-bottom: 24px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.1);
}

.contact-form-panel__head h3 {
  margin: 0;

  font-size: clamp(2.2rem, 3.2vw, 3.5rem);
}

.contact-form-panel__head p {
  margin: 0;

  color: var(--muted);

  font-size: 8px;

  line-height: 1.55;
}

/* =========================================================
   CF7 — Contact page integration
   ========================================================= */

.contact-form-panel .wpcf7 {
  margin: 0;
}

.contact-form-panel .wpcf7 form {
  margin: 0;
}

.contact-form-panel .nc-cf7-grid {
  display: grid;

  gap: 22px;
}

.contact-form-panel .nc-cf7-row {
  display: grid;

  gap: 16px;
}

.contact-form-panel .nc-cf7-row--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-form-panel .nc-cf7-field {
  min-width: 0;
}

.contact-form-panel .nc-cf7-field > label {
  display: block;

  margin-bottom: 8px;

  color: var(--ink);

  font-size: 7px;

  font-weight: 700;
}

.contact-form-panel .nc-cf7-required {
  color: #a56565;
}

.contact-form-panel
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-form-panel select,
.contact-form-panel textarea {
  width: 100%;

  border: 1px solid rgba(57, 51, 46, 0.11);

  border-radius: 12px;

  outline: 0;

  background: rgba(244, 239, 231, 0.56);

  color: var(--ink);

  font: inherit;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.contact-form-panel
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-form-panel select {
  min-height: 49px;

  padding: 10px 12px;
}

.contact-form-panel textarea {
  min-height: 155px;

  padding: 12px;

  resize: vertical;
}

.contact-form-panel input:focus,
.contact-form-panel select:focus,
.contact-form-panel textarea:focus {
  border-color: rgba(128, 101, 163, 0.56);

  background: #fffdf9;

  box-shadow: 0 0 0 3px rgba(128, 101, 163, 0.08);
}

.contact-form-panel .wpcf7-not-valid-tip {
  margin-top: 5px;

  color: #a65f5f;

  font-size: 6px;
}

.contact-form-panel .wpcf7-response-output {
  margin: 18px 0 0 !important;

  padding: 11px 13px !important;

  border: 1px solid rgba(57, 51, 46, 0.12) !important;

  border-radius: 12px;

  font-size: 7px;
}

/* =========================================================
   171. PROJECT GUIDE
   ========================================================= */

.contact-guide {
  position: sticky;

  top: calc(var(--announcement-h) + var(--header-h) + 40px);
}

.contact-guide__head {
  margin-bottom: 16px;
}

.contact-guide__head > .mono {
  display: block;

  margin-bottom: 10px;

  color: #8065a3;

  font-size: 5.5px;

  text-transform: uppercase;
}

.contact-guide__head h3 {
  margin: 0;

  font-size: clamp(2rem, 3vw, 3rem);

  line-height: 1;
}

.contact-guide__items {
  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

.contact-guide-item {
  display: grid;

  grid-template-columns:
    28px
    40px
    minmax(0, 1fr);

  gap: 10px;

  align-items: start;

  padding: 17px 3px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.11);
}

.contact-guide-item__number {
  padding-top: 12px;

  color: var(--muted);

  font-size: 5.4px;
}

.contact-guide-item__icon {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background: var(--lav);

  color: #8065a3;
}

.contact-guide-item:nth-child(2) .contact-guide-item__icon {
  background: var(--sage);

  color: #67856c;
}

.contact-guide-item:nth-child(3) .contact-guide-item__icon {
  background: var(--blue);

  color: #668997;
}

.contact-guide-item:nth-child(4) .contact-guide-item__icon {
  background: var(--butter);

  color: #88733f;
}

.contact-guide-item:nth-child(5) .contact-guide-item__icon {
  background: var(--peach);

  color: #9e6c63;
}

.contact-guide-item strong {
  display: block;

  margin: 7px 0 4px;

  font-size: 8px;
}

.contact-guide-item p {
  margin: 0;

  color: var(--muted);

  font-size: 7px;

  line-height: 1.5;
}

/* =========================================================
   172. ORIENTATION
   ========================================================= */

.contact-orientation {
  color: #f8f2eb;

  background:
    radial-gradient(
      circle at 90% 9%,
      rgba(221, 211, 246, 0.14),
      transparent 25%
    ),
    #302b32;
}

.contact-orientation__head {
  display: grid;

  grid-template-columns:
    minmax(230px, 0.31fr)
    minmax(0, 0.69fr);

  gap: clamp(40px, 8vw, 110px);

  margin-bottom: 45px;
}

.contact-orientation__head h2 {
  margin: 0 0 13px;

  color: #fff8f1;
}

.contact-orientation__head p {
  margin: 0;

  color: rgba(248, 242, 235, 0.54);
}

.contact-orientation__list {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-orientation-item {
  display: grid;

  grid-template-columns:
    37px
    45px
    minmax(0, 1fr)
    36px;

  gap: 13px;

  align-items: center;

  min-height: 105px;

  padding: 14px 4px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.11);

  color: inherit;

  text-decoration: none;

  transition:
    padding 0.25s var(--ease),
    background 0.25s ease;
}

.contact-orientation-item:hover {
  padding-inline: 13px;

  background: rgba(255, 255, 255, 0.035);
}

.contact-orientation-item > .mono {
  color: rgba(248, 242, 235, 0.34);

  font-size: 5.5px;
}

.contact-orientation-item__icon {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background: rgba(221, 211, 246, 0.1);

  color: #c9b7ef;
}

.contact-orientation-item strong {
  display: block;

  margin-bottom: 5px;

  color: #fff8f1;

  font-size: clamp(1.4rem, 2vw, 1.9rem);
}

.contact-orientation-item p {
  margin: 0;

  color: rgba(248, 242, 235, 0.48);

  font-size: 7px;
}

.contact-orientation-item__arrow {
  color: rgba(248, 242, 235, 0.42);

  transition: transform 0.25s var(--ease);
}

.contact-orientation-item:hover .contact-orientation-item__arrow {
  transform: translateX(5px);
}

/* =========================================================
   173. CALLBACK
   ========================================================= */

.contact-callback {
  padding: var(--section-tight) 0;

  background: var(--paper);
}

.contact-callback__inner {
  display: grid;

  grid-template-columns:
    65px
    minmax(0, 1fr)
    auto;

  gap: clamp(22px, 4vw, 45px);

  align-items: center;

  padding: clamp(28px, 4vw, 48px);

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 26px;

  background: linear-gradient(115deg, #e6eee2, #ebe6ef);
}

.contact-callback__icon {
  width: 62px;
  height: 62px;

  display: grid;

  place-items: center;

  border-radius: 19px;

  background: #302b32;

  color: #fff8f1;

  font-size: 17px;
}

.contact-callback h2 {
  margin: 10px 0 8px;

  font-size: clamp(2rem, 3.3vw, 3.5rem);
}

.contact-callback p {
  margin: 0;

  color: var(--muted);
}

/* =========================================================
   174. DIRECT CONTACT
   ========================================================= */

.contact-direct {
  padding: var(--section-tight) 0;

  border-top: 1px solid var(--border-soft);

  background: var(--bg);
}

.contact-direct__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 0.42fr)
    minmax(0, 0.58fr);

  gap: clamp(45px, 8vw, 120px);

  align-items: end;
}

.contact-direct h2 {
  margin: 13px 0 0;
}

.contact-direct__links {
  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

.contact-direct__links a {
  display: grid;

  grid-template-columns:
    100px
    minmax(0, 1fr)
    28px;

  gap: 15px;

  align-items: center;

  min-height: 78px;

  padding: 10px 3px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.13);

  color: var(--ink);

  text-decoration: none;

  transition: padding 0.22s var(--ease);
}

.contact-direct__links a:hover {
  padding-left: 10px;
}

.contact-direct__links small {
  color: var(--muted);

  font-size: 5.5px;

  text-transform: uppercase;
}

.contact-direct__links strong {
  font-size: clamp(1rem, 1.6vw, 1.35rem);

  overflow-wrap: anywhere;
}

.contact-direct__links a > i {
  color: var(--muted);
}

/* =========================================================
   175. CONTACT — TABLET
   ========================================================= */

@media (max-width: 1020px) {
  .contact-hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(290px, 0.4fr);
  }

  .contact-project__layout {
    grid-template-columns:
      minmax(0, 1fr)
      300px;

    gap: 38px;
  }

  .contact-guide-item {
    grid-template-columns:
      25px
      37px
      minmax(0, 1fr);
  }

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

/* =========================================================
   176. CONTACT — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .contact-hero {
    padding: 150px 0 72px;
  }

  .contact-hero__grid,
  .contact-project__head,
  .contact-project__layout,
  .contact-orientation__head,
  .contact-direct__inner {
    grid-template-columns: 1fr;
  }

  .contact-hero h1 {
    font-size: clamp(3.5rem, 15vw, 5.3rem);
  }

  .contact-hero__side {
    max-width: 520px;
  }

  .contact-guide {
    position: static;
  }

  .contact-form-panel {
    padding: 24px 18px;
  }

  .contact-form-panel .nc-cf7-row--two {
    grid-template-columns: 1fr;
  }

  .contact-orientation-item {
    grid-template-columns:
      29px
      40px
      minmax(0, 1fr)
      24px;

    min-height: 92px;
  }

  .contact-callback__inner {
    grid-template-columns: 55px minmax(0, 1fr);
  }

  .contact-callback__icon {
    width: 54px;
    height: 54px;
  }

  .contact-callback__inner > .btn {
    grid-column: 1 / -1;

    width: fit-content;

    margin-left: 68px;
  }
}

/* =========================================================
   177. CONTACT — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .contact-callback__inner {
    grid-template-columns: 1fr;
  }

  .contact-callback__inner > .btn {
    margin-left: 0;
  }

  .contact-direct__links a {
    grid-template-columns: 1fr 23px;

    gap: 5px;
  }

  .contact-direct__links small {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   SALTY THEME — CONTACT / CONTACTEZ-NOUS

   Exact integration for:
   - salty-contact-fr
   - salty-contact-en
   ========================================================= */

/* =========================================================
   169. CONTACT — HERO
   ========================================================= */

.contact-hero {
  position: relative;

  overflow: clip;

  padding: clamp(170px, 17vw, 230px) 0 clamp(82px, 9vw, 120px);

  border-bottom: 1px solid var(--border-soft);

  background:
    radial-gradient(
      circle at 91% 8%,
      rgba(221, 211, 246, 0.4),
      transparent 24%
    ),
    radial-gradient(
      circle at 6% 94%,
      rgba(220, 230, 217, 0.28),
      transparent 27%
    ),
    var(--bg);
}

.contact-hero__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(350px, 0.42fr);

  gap: clamp(55px, 9vw, 145px);

  align-items: end;
}

.contact-hero h1 {
  margin: 17px 0 22px;

  font-size: clamp(3.8rem, 6.9vw, 7.5rem);

  line-height: 0.91;
}

.contact-hero__lead {
  margin: 0;

  color: var(--muted);

  font-size: clamp(1rem, 1.28vw, 1.18rem);

  line-height: 1.72;
}

.contact-hero__availability {
  display: flex;

  align-items: center;

  gap: 7px;

  width: fit-content;

  margin: 28px 0 0;

  padding: 7px 10px;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 999px;

  background: rgba(255, 253, 249, 0.46);

  color: var(--muted);

  font-family: var(--font-mono);

  font-size: 5.7px;
}

/* =========================================================
   170. CONTACT — HERO CONTACT DETAILS
   ========================================================= */

.contact-hero__contacts {
  display: grid;

  gap: 7px;
}

.contact-hero-contact {
  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    24px;

  gap: 11px;

  align-items: center;

  min-height: 74px;

  padding: 11px 13px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 17px;

  background: rgba(255, 253, 249, 0.6);

  color: var(--ink);

  text-decoration: none;

  backdrop-filter: blur(12px);

  transition:
    background var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease);
}

.contact-hero-contact:hover {
  background: rgba(255, 253, 249, 0.88);

  transform: translateX(4px);
}

.contact-hero-contact__icon {
  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background: var(--lav);

  color: #8065a3;
}

.contact-hero-contact:nth-child(2) .contact-hero-contact__icon {
  background: var(--sage);

  color: #65806a;
}

.contact-hero-contact__copy {
  min-width: 0;
}

.contact-hero-contact__copy small {
  display: block;

  margin-bottom: 4px;

  color: var(--muted);

  font-size: 5.5px;

  text-transform: uppercase;
}

.contact-hero-contact__copy strong {
  display: block;

  overflow-wrap: anywhere;

  font-size: 8px;
}

.contact-hero-contact__arrow {
  color: var(--muted);

  font-size: 7px;
}

.contact-hero__signal {
  display: grid;

  grid-template-columns:
    10px
    minmax(0, 1fr);

  gap: 7px;

  align-items: start;

  margin-top: 8px;

  padding: 13px 4px;

  color: var(--muted);

  font-size: 7px;
}

.contact-hero__signal > span {
  padding-top: 2px;

  color: #759578;

  font-size: 6px;
}

.contact-hero__signal p {
  margin: 0;

  line-height: 1.55;
}

/* =========================================================
   171. CONTACT — PROJECT SECTION
   ========================================================= */

.contact-project {
  background: linear-gradient(135deg, #f4eee7, #ebe9e2);
}

.contact-project__head {
  display: grid;

  grid-template-columns:
    minmax(0, 0.62fr)
    minmax(300px, 0.38fr);

  gap: clamp(45px, 8vw, 115px);

  align-items: end;

  margin-bottom: clamp(48px, 7vw, 80px);
}

.contact-project__head h2 {
  margin: 14px 0 0;
}

.contact-project__head > p {
  margin: 0;

  color: var(--muted);

  line-height: 1.7;
}

.contact-project__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(320px, 0.7fr);

  gap: clamp(40px, 7vw, 95px);

  align-items: start;
}

/* =========================================================
   172. CONTACT FORM CARD
   ========================================================= */

.contact-form-card {
  overflow: hidden;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: clamp(22px, 3vw, 30px);

  background: rgba(255, 253, 249, 0.9);

  box-shadow: 0 24px 65px rgba(57, 51, 46, 0.055);
}

.contact-form-card__head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 25px;

  padding: clamp(24px, 4vw, 38px);

  border-bottom: 1px solid rgba(57, 51, 46, 0.09);
}

.contact-form-card__head .mono {
  display: block;

  margin-bottom: 7px;

  color: var(--muted);

  font-size: 5.5px;

  text-transform: uppercase;
}

.contact-form-card__head h3 {
  margin: 0;

  font-size: clamp(2.2rem, 3.1vw, 3.4rem);
}

.contact-form-card__marker {
  flex: 0 0 auto;

  width: 43px;
  height: 43px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--lav);

  color: #8065a3;
}

.contact-form-card__note {
  display: grid;

  grid-template-columns:
    22px
    minmax(0, 1fr);

  gap: 8px;

  align-items: start;

  margin: 0;

  padding: 15px clamp(24px, 4vw, 38px);

  border-bottom: 1px solid rgba(57, 51, 46, 0.08);

  background: rgba(238, 227, 185, 0.25);

  color: var(--muted);

  font-size: 7px;

  line-height: 1.55;
}

.contact-form-card__note i {
  padding-top: 2px;

  color: #88743f;
}

.contact-form-card__form {
  padding: clamp(25px, 4vw, 40px);
}

/* =========================================================
   173. CF7 — GRID
   ========================================================= */

.contact-form-card .nc-cf7-grid {
  display: grid;

  gap: clamp(20px, 3vw, 27px);
}

.contact-form-card .nc-cf7-row {
  display: grid;

  gap: 16px;
}

.contact-form-card .nc-cf7-row--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-form-card .nc-cf7-field {
  min-width: 0;
}

/* =========================================================
   174. CF7 — LABELS
   ========================================================= */

.contact-form-card .nc-cf7-field > label,
.contact-form-card .nc-cf7-field legend {
  display: block;

  margin: 0 0 8px;

  color: var(--ink);

  font-family: var(--font-sans);

  font-size: 7px;

  font-weight: 700;

  line-height: 1.4;
}

.contact-form-card .nc-cf7-field fieldset {
  min-width: 0;

  margin: 0;

  padding: 0;

  border: 0;
}

.contact-form-card .nc-cf7-required {
  color: #a45f5f;
}

.contact-form-card .nc-cf7-help {
  display: block;

  margin-top: 6px;

  color: var(--muted);

  font-size: 6px;
}

/* =========================================================
   175. CF7 — TEXT INPUTS
   ========================================================= */

.contact-form-card
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-form-card select,
.contact-form-card textarea {
  width: 100%;

  border: 1px solid rgba(57, 51, 46, 0.11);

  border-radius: 12px;

  outline: 0;

  background: rgba(244, 239, 231, 0.56);

  color: var(--ink);

  font-family: var(--font-sans);

  font-size: 8px;

  transition:
    border-color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}

.contact-form-card
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-form-card select {
  min-height: 50px;

  padding: 10px 12px;
}

.contact-form-card textarea {
  min-height: 175px;

  padding: 13px;

  resize: vertical;

  line-height: 1.55;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
  color: rgba(117, 109, 102, 0.67);
}

.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus {
  border-color: rgba(128, 101, 163, 0.52);

  background: #fffdf9;

  box-shadow: 0 0 0 3px rgba(128, 101, 163, 0.08);
}

/* =========================================================
   176. CF7 — SELECT
   ========================================================= */

.contact-form-card select {
  cursor: pointer;
}

.contact-form-card select:invalid {
  color: var(--muted);
}

/* =========================================================
   177. CF7 — SERVICE CHECKBOXES
   ========================================================= */

.contact-form-card .nc-cf7-field--choices .wpcf7-form-control {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 7px;
}

.contact-form-card .nc-cf7-field--choices .wpcf7-list-item {
  margin: 0;
}

.contact-form-card .nc-cf7-field--choices .wpcf7-list-item > label {
  position: relative;

  display: block;

  height: 100%;

  cursor: pointer;
}

.contact-form-card .nc-cf7-field--choices input[type="checkbox"] {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  opacity: 0;
}

.contact-form-card .nc-cf7-field--choices .wpcf7-list-item-label {
  min-height: 47px;

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 10px 12px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 12px;

  background: rgba(244, 239, 231, 0.45);

  color: var(--muted);

  font-size: 7px;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.contact-form-card .nc-cf7-field--choices .wpcf7-list-item-label::before {
  content: "";

  flex: 0 0 auto;

  width: 17px;
  height: 17px;

  border: 1px solid rgba(57, 51, 46, 0.2);

  border-radius: 6px;

  background: rgba(255, 253, 249, 0.8);

  box-shadow: inset 0 0 0 4px rgba(255, 253, 249, 1);
}

.contact-form-card
  .nc-cf7-field--choices
  input[type="checkbox"]:checked
  + .wpcf7-list-item-label {
  border-color: rgba(128, 101, 163, 0.38);

  background: rgba(221, 211, 246, 0.43);

  color: var(--ink);
}

.contact-form-card
  .nc-cf7-field--choices
  input[type="checkbox"]:checked
  + .wpcf7-list-item-label::before {
  background: #8065a3;
}

.contact-form-card
  .nc-cf7-field--choices
  input[type="checkbox"]:focus-visible
  + .wpcf7-list-item-label {
  outline: 2px solid rgba(128, 101, 163, 0.45);

  outline-offset: 2px;
}

/* =========================================================
   178. CF7 — CONSENT
   ========================================================= */

.contact-form-card .nc-cf7-field--consent {
  padding-top: 4px;
}

.contact-form-card .nc-cf7-field--consent .wpcf7-list-item {
  margin: 0;
}

.contact-form-card .nc-cf7-field--consent .wpcf7-list-item > label {
  display: grid;

  grid-template-columns:
    20px
    minmax(0, 1fr);

  gap: 9px;

  align-items: start;

  cursor: pointer;
}

.contact-form-card .nc-cf7-field--consent input[type="checkbox"] {
  width: 18px;
  height: 18px;

  margin-top: 1px;

  accent-color: #8065a3;
}

.contact-form-card .nc-cf7-field--consent .wpcf7-list-item-label {
  color: var(--muted);

  font-size: 7px;

  line-height: 1.55;
}

/* =========================================================
   179. CF7 — SUBMIT
   ========================================================= */

.contact-form-card .nc-cf7-row--submit {
  padding-top: 4px;
}

.contact-form-card .nc-cf7-row--submit .wpcf7-submit {
  min-width: min(100%, 280px);

  cursor: pointer;
}

.contact-form-card .wpcf7-spinner {
  margin: 0 0 0 10px;
}

/* =========================================================
   180. CF7 — VALIDATION / RESPONSE
   ========================================================= */

.contact-form-card .wpcf7-not-valid {
  border-color: rgba(174, 80, 80, 0.52) !important;

  background: rgba(238, 214, 216, 0.32) !important;
}

.contact-form-card .wpcf7-not-valid-tip {
  display: block;

  margin-top: 5px;

  color: #9f5858;

  font-size: 6px;
}

.contact-form-card .wpcf7-response-output {
  margin: 22px 0 0 !important;

  padding: 12px 14px !important;

  border: 1px solid rgba(57, 51, 46, 0.12) !important;

  border-radius: 12px;

  background: rgba(255, 253, 249, 0.65);

  color: var(--muted);

  font-size: 7px;

  line-height: 1.5;
}

.contact-form-card .wpcf7 form.sent .wpcf7-response-output {
  border-color: rgba(104, 134, 109, 0.3) !important;

  background: rgba(220, 230, 217, 0.43);

  color: #58715c;
}

.contact-form-card .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-card .wpcf7 form.failed .wpcf7-response-output {
  border-color: rgba(164, 95, 95, 0.25) !important;

  background: rgba(238, 214, 216, 0.35);

  color: #8b5555;
}

/* =========================================================
   181. PROJECT GUIDE
   ========================================================= */

.contact-guide__sticky {
  position: sticky;

  top: calc(var(--announcement-h) + var(--header-h) + 36px);
}

.contact-guide__head {
  margin-bottom: 16px;
}

.contact-guide__head > .mono {
  display: block;

  margin-bottom: 10px;

  color: #8065a3;

  font-size: 5.5px;

  text-transform: uppercase;
}

.contact-guide__head h3 {
  margin: 0;

  font-size: clamp(2rem, 3vw, 3rem);

  line-height: 1.02;
}

.contact-guide__list {
  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

.contact-guide-item {
  display: grid;

  grid-template-columns:
    26px
    40px
    minmax(0, 1fr);

  gap: 10px;

  align-items: start;

  padding: 17px 2px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.11);
}

.contact-guide-item__number {
  padding-top: 12px;

  color: var(--muted);

  font-size: 5.4px;
}

.contact-guide-item__icon {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background: var(--lav);

  color: #8065a3;
}

.contact-guide-item:nth-child(2) .contact-guide-item__icon {
  background: var(--sage);

  color: #648168;
}

.contact-guide-item:nth-child(3) .contact-guide-item__icon {
  background: var(--blue);

  color: #628494;
}

.contact-guide-item:nth-child(4) .contact-guide-item__icon {
  background: var(--butter);

  color: #8b763e;
}

.contact-guide-item:nth-child(5) .contact-guide-item__icon {
  background: var(--peach);

  color: #9d6c62;
}

.contact-guide-item strong {
  display: block;

  margin: 6px 0 4px;

  font-size: 8px;
}

.contact-guide-item p {
  margin: 0;

  color: var(--muted);

  font-size: 7px;

  line-height: 1.5;
}

/* =========================================================
   182. SERVICE ORIENTATION
   ========================================================= */

.contact-orientation {
  color: #f8f2eb;

  background:
    radial-gradient(
      circle at 91% 7%,
      rgba(221, 211, 246, 0.14),
      transparent 25%
    ),
    #302b32;
}

.contact-orientation__head {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.3fr)
    minmax(0, 0.7fr);

  gap: clamp(45px, 8vw, 110px);

  margin-bottom: 43px;
}

.contact-orientation__head h2 {
  margin: 0 0 13px;

  color: #fff8f1;
}

.contact-orientation__head p {
  margin: 0;

  color: rgba(248, 242, 235, 0.54);

  line-height: 1.65;
}

.contact-orientation__list {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-orientation-item {
  display: grid;

  grid-template-columns:
    38px
    45px
    minmax(0, 1fr)
    38px;

  gap: 13px;

  align-items: center;

  min-height: 105px;

  padding: 14px 4px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.11);

  color: inherit;

  text-decoration: none;

  transition:
    padding 0.25s var(--ease),
    background 0.25s ease;
}

.contact-orientation-item:hover {
  padding-inline: 14px;

  background: rgba(255, 255, 255, 0.035);
}

.contact-orientation-item__number {
  color: rgba(248, 242, 235, 0.34);

  font-size: 5.5px;
}

.contact-orientation-item__icon {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background: rgba(221, 211, 246, 0.1);

  color: #c9b7ef;
}

.contact-orientation-item:nth-child(2) .contact-orientation-item__icon {
  background: rgba(220, 230, 217, 0.1);

  color: #b6ceb3;
}

.contact-orientation-item:nth-child(3) .contact-orientation-item__icon {
  background: rgba(238, 214, 216, 0.1);

  color: #ddb7b8;
}

.contact-orientation-item:nth-child(4) .contact-orientation-item__icon {
  background: rgba(215, 228, 234, 0.1);

  color: #b7d0dc;
}

.contact-orientation-item:nth-child(5) .contact-orientation-item__icon {
  background: rgba(238, 227, 185, 0.1);

  color: #d9ca91;
}

.contact-orientation-item__copy strong {
  display: block;

  margin-bottom: 5px;

  color: #fff8f1;

  font-size: clamp(1.35rem, 1.8vw, 1.8rem);
}

.contact-orientation-item__copy p {
  margin: 0;

  color: rgba(248, 242, 235, 0.48);

  font-size: 7px;
}

.contact-orientation-item__arrow {
  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 50%;

  color: rgba(248, 242, 235, 0.52);

  transition:
    background 0.22s ease,
    color 0.22s ease,
    transform 0.22s var(--ease);
}

.contact-orientation-item:hover .contact-orientation-item__arrow {
  background: #fff8f1;

  color: #302b32;

  transform: translateX(4px);
}

/* =========================================================
   183. CALLBACK CTA
   ========================================================= */

.contact-callback {
  padding: var(--section-tight) 0;

  background: var(--paper);
}

.contact-callback__card {
  display: grid;

  grid-template-columns:
    145px
    minmax(0, 1fr)
    auto;

  gap: clamp(30px, 5vw, 70px);

  align-items: center;

  padding: clamp(30px, 5vw, 52px);

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: clamp(22px, 3vw, 29px);

  background: linear-gradient(115deg, #e5eee1, #ebe5ef);
}

.contact-callback__visual {
  min-height: 110px;

  display: grid;

  place-items: center;

  gap: 11px;
}

.contact-callback__visual > span {
  width: 63px;
  height: 63px;

  display: grid;

  place-items: center;

  border-radius: 20px;

  background: #302b32;

  color: #fff8f1;

  font-size: 17px;
}

.contact-callback__wave {
  display: flex;

  align-items: center;

  gap: 3px;

  height: 18px;
}

.contact-callback__wave i {
  display: block;

  width: 3px;

  border-radius: 999px;

  background: rgba(128, 101, 163, 0.46);
}

.contact-callback__wave i:nth-child(1) {
  height: 6px;
}

.contact-callback__wave i:nth-child(2) {
  height: 13px;
}

.contact-callback__wave i:nth-child(3) {
  height: 9px;
}

.contact-callback__wave i:nth-child(4) {
  height: 18px;
}

.contact-callback__wave i:nth-child(5) {
  height: 10px;
}

.contact-callback__wave i:nth-child(6) {
  height: 14px;
}

.contact-callback__wave i:nth-child(7) {
  height: 6px;
}

.contact-callback h2 {
  margin: 11px 0 9px;

  font-size: clamp(2rem, 3.2vw, 3.5rem);
}

.contact-callback p {
  margin: 0;

  color: var(--muted);

  line-height: 1.6;
}

/* =========================================================
   184. DIRECT CONTACT
   ========================================================= */

.contact-direct {
  padding: var(--section-tight) 0;

  border-top: 1px solid var(--border-soft);

  background: var(--bg);
}

.contact-direct__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.4fr)
    minmax(0, 0.6fr);

  gap: clamp(50px, 8vw, 120px);

  align-items: end;
}

.contact-direct__head h2 {
  margin: 13px 0 0;
}

.contact-direct__links {
  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

.contact-direct__links a {
  display: grid;

  grid-template-columns:
    100px
    minmax(0, 1fr)
    28px;

  gap: 15px;

  align-items: center;

  min-height: 80px;

  padding: 10px 3px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.13);

  color: var(--ink);

  text-decoration: none;

  transition: padding 0.22s var(--ease);
}

.contact-direct__links a:hover {
  padding-left: 10px;
}

.contact-direct__links .mono {
  color: var(--muted);

  font-size: 5.5px;

  text-transform: uppercase;
}

.contact-direct__links strong {
  overflow-wrap: anywhere;

  font-size: clamp(1rem, 1.5vw, 1.35rem);
}

.contact-direct__links i {
  color: var(--muted);
}

/* =========================================================
   185. CONTACT — TABLET
   ========================================================= */

@media (max-width: 1020px) {
  .contact-hero__layout {
    grid-template-columns:
      minmax(0, 1fr)
      300px;

    gap: 45px;
  }

  .contact-project__layout {
    grid-template-columns:
      minmax(0, 1fr)
      290px;

    gap: 35px;
  }

  .contact-guide-item {
    grid-template-columns:
      24px
      37px
      minmax(0, 1fr);
  }

  .contact-callback__card {
    grid-template-columns:
      100px
      minmax(0, 1fr);
  }

  .contact-callback__card > .btn {
    grid-column: 2;
    width: fit-content;
  }
}

/* =========================================================
   186. CONTACT — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .contact-hero {
    padding: 150px 0 72px;
  }

  .contact-hero__layout,
  .contact-project__head,
  .contact-project__layout,
  .contact-orientation__head,
  .contact-direct__layout {
    grid-template-columns: 1fr;
  }

  .contact-hero h1 {
    font-size: clamp(3.45rem, 15vw, 5.25rem);
  }

  .contact-hero__contacts {
    max-width: 520px;
  }

  .contact-guide__sticky {
    position: static;
  }

  .contact-form-card__form {
    padding: 24px 18px 27px;
  }

  .contact-form-card__head {
    padding: 25px 18px;
  }

  .contact-form-card__note {
    padding: 14px 18px;
  }

  .contact-form-card .nc-cf7-row--two {
    grid-template-columns: 1fr;
  }

  .contact-orientation-item {
    grid-template-columns:
      28px
      40px
      minmax(0, 1fr)
      34px;

    min-height: 94px;
  }

  .contact-callback__card {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .contact-callback__visual {
    width: fit-content;

    grid-template-columns:
      auto
      auto;

    min-height: 0;
  }

  .contact-callback__card > .btn {
    grid-column: auto;

    width: fit-content;
  }
}

/* =========================================================
   187. CONTACT — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .contact-form-card .nc-cf7-field--choices .wpcf7-form-control {
    grid-template-columns: 1fr;
  }

  .contact-orientation-item {
    grid-template-columns:
      35px
      minmax(0, 1fr)
      32px;

    gap: 10px;
  }

  .contact-orientation-item__number {
    display: none;
  }

  .contact-orientation-item__copy p {
    margin-top: 3px;
  }

  .contact-direct__links a {
    grid-template-columns:
      minmax(0, 1fr)
      24px;

    gap: 4px;
  }

  .contact-direct__links .mono {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   188. CONTACT — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .contact-hero-contact,
  .contact-orientation-item,
  .contact-orientation-item__arrow,
  .contact-direct__links a {
    transition: none !important;

    transform: none !important;
  }
}

/* =========================================================
   189. CALLBACK / REQUEST A CALL
   ========================================================= */

/* =========================================================
   CALLBACK — HERO
   ========================================================= */

.callback-hero {
  padding: clamp(170px, 17vw, 225px) 0 clamp(78px, 8vw, 110px);

  border-bottom: 1px solid var(--border-soft);

  background:
    radial-gradient(
      circle at 87% 10%,
      rgba(220, 230, 217, 0.45),
      transparent 27%
    ),
    radial-gradient(
      circle at 7% 92%,
      rgba(221, 211, 246, 0.27),
      transparent 26%
    ),
    var(--bg);
}

.callback-hero__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 360px);

  gap: clamp(55px, 9vw, 140px);

  align-items: end;
}

.callback-hero h1 {
  margin: 18px 0 22px;

  font-size: clamp(3.8rem, 6.6vw, 7.1rem);

  line-height: 0.91;
}

.callback-hero__lead {
  margin: 0;

  color: var(--muted);

  font-size: clamp(1rem, 1.3vw, 1.18rem);

  line-height: 1.72;
}

.callback-hero__note {
  display: grid;

  grid-template-columns:
    44px
    minmax(0, 1fr);

  gap: 13px;

  align-items: start;

  padding: 21px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 18px;

  background: rgba(255, 253, 249, 0.58);

  backdrop-filter: blur(12px);
}

.callback-hero__note-icon {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background: var(--sage);

  color: #607c65;
}

.callback-hero__note p {
  margin: 3px 0 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}

/* =========================================================
   190. CALLBACK — REQUEST FORM
   ========================================================= */

.callback-request {
  background: linear-gradient(135deg, #f4eee7, #ece9e3);
}

.callback-request__layout {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.42fr)
    minmax(0, 0.58fr);

  gap: clamp(50px, 8vw, 115px);

  align-items: start;
}

.callback-request__intro {
  position: sticky;

  top: calc(var(--announcement-h) + var(--header-h) + 40px);
}

.callback-request__intro h2 {
  margin: 14px 0 17px;
}

.callback-request__intro > p {
  margin: 0;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.7;
}

.callback-request__direct {
  display: grid;

  gap: 7px;

  margin-top: 30px;

  padding-top: 21px;

  border-top: 1px solid rgba(57, 51, 46, 0.12);
}

.callback-request__direct a {
  display: flex;

  align-items: center;

  gap: 10px;

  width: fit-content;

  color: var(--ink);

  font-size: 14px;

  font-weight: 650;

  text-decoration: none;
}

.callback-request__direct a i {
  width: 27px;

  color: #8065a3;
}

/* =========================================================
   191. CALLBACK — FORM CARD
   ========================================================= */

.callback-form-card {
  overflow: hidden;

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: clamp(22px, 3vw, 30px);

  background: rgba(255, 253, 249, 0.9);

  box-shadow: 0 24px 65px rgba(57, 51, 46, 0.06);
}

.callback-form-card__head {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  padding: clamp(24px, 4vw, 38px);

  border-bottom: 1px solid rgba(57, 51, 46, 0.09);
}

.callback-form-card__head .mono {
  display: block;

  margin-bottom: 7px;

  color: var(--muted);

  font-size: 11px;

  text-transform: uppercase;
}

.callback-form-card__head h3 {
  margin: 0;

  font-size: clamp(2rem, 3vw, 3.3rem);
}

.callback-form-card__icon {
  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border-radius: 15px;

  background: var(--sage);

  color: #617d66;
}

.callback-form-card__note {
  display: grid;

  grid-template-columns:
    22px
    minmax(0, 1fr);

  gap: 8px;

  margin: 0;

  padding: 14px clamp(24px, 4vw, 38px);

  border-bottom: 1px solid rgba(57, 51, 46, 0.08);

  background: rgba(221, 211, 246, 0.18);

  color: var(--muted);

  font-size: 13px;

  line-height: 1.55;
}

.callback-form-card__note i {
  padding-top: 2px;

  color: #8065a3;
}

.callback-form-card__form {
  padding: clamp(25px, 4vw, 40px);
}

/* =========================================================
   192. CALLBACK CF7 — GRID
   ========================================================= */

.callback-form-card .nc-cf7-grid {
  display: grid;

  gap: 24px;
}

.callback-form-card .nc-cf7-row {
  display: grid;

  gap: 16px;
}

.callback-form-card .nc-cf7-row--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.callback-form-card .nc-cf7-field {
  min-width: 0;
}

/* =========================================================
   CALLBACK CF7 — LABELS
   ========================================================= */

.callback-form-card .nc-cf7-field > label {
  display: block;

  margin-bottom: 8px;

  color: var(--ink);

  font-size: 14px;

  font-weight: 700;

  line-height: 1.4;
}

.callback-form-card .nc-cf7-required {
  color: #a35f5f;
}

/* =========================================================
   CALLBACK CF7 — INPUTS
   ========================================================= */

.callback-form-card input:not([type="submit"]):not([type="checkbox"]),
.callback-form-card select,
.callback-form-card textarea {
  width: 100%;

  border: 1px solid rgba(57, 51, 46, 0.12);

  border-radius: 12px;

  outline: none;

  background: rgba(244, 239, 231, 0.56);

  color: var(--ink);

  font-family: var(--font-sans);

  font-size: 14px;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.callback-form-card input:not([type="submit"]):not([type="checkbox"]),
.callback-form-card select {
  min-height: 50px;

  padding: 10px 12px;
}

.callback-form-card textarea {
  min-height: 125px;

  padding: 12px;

  resize: vertical;

  line-height: 1.55;
}

.callback-form-card input:focus,
.callback-form-card select:focus,
.callback-form-card textarea:focus {
  border-color: rgba(128, 101, 163, 0.52);

  background: #fffdf9;

  box-shadow: 0 0 0 3px rgba(128, 101, 163, 0.08);
}

/* =========================================================
   CALLBACK CF7 — CONSENT
   ========================================================= */

.callback-form-card .nc-cf7-field--consent .wpcf7-list-item {
  margin: 0;
}

.callback-form-card .nc-cf7-field--consent .wpcf7-list-item > label {
  display: grid;

  grid-template-columns:
    20px
    minmax(0, 1fr);

  gap: 9px;

  align-items: start;

  cursor: pointer;
}

.callback-form-card .nc-cf7-field--consent input[type="checkbox"] {
  width: 18px;
  height: 18px;

  margin-top: 2px;

  accent-color: #8065a3;
}

.callback-form-card .nc-cf7-field--consent .wpcf7-list-item-label {
  color: var(--muted);

  font-size: 13px;

  line-height: 1.55;
}

/* =========================================================
   CALLBACK CF7 — SUBMIT / MESSAGES
   ========================================================= */

.callback-form-card .nc-cf7-row--submit {
  padding-top: 5px;
}

.callback-form-card .wpcf7-submit {
  cursor: pointer;
}

.callback-form-card .wpcf7-not-valid {
  border-color: rgba(170, 78, 78, 0.52) !important;

  background: rgba(238, 214, 216, 0.3) !important;
}

.callback-form-card .wpcf7-not-valid-tip {
  display: block;

  margin-top: 6px;

  color: #995454;

  font-size: 12px;
}

.callback-form-card .wpcf7-response-output {
  margin: 20px 0 0 !important;

  padding: 12px 14px !important;

  border: 1px solid rgba(57, 51, 46, 0.12) !important;

  border-radius: 12px;

  font-size: 13px;

  line-height: 1.55;
}

.callback-form-card .wpcf7 form.sent .wpcf7-response-output {
  background: rgba(220, 230, 217, 0.45);

  color: #55705b;
}

/* =========================================================
   193. CALLBACK — STEPS
   ========================================================= */

.callback-steps {
  color: #f8f2eb;

  background:
    radial-gradient(
      circle at 91% 8%,
      rgba(221, 211, 246, 0.12),
      transparent 27%
    ),
    #302b32;
}

.callback-steps__head {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.3fr)
    minmax(0, 0.7fr);

  gap: clamp(45px, 8vw, 110px);

  margin-bottom: clamp(38px, 6vw, 65px);
}

.callback-steps__head h2 {
  margin: 0;

  color: #fff8f1;
}

.callback-steps__list {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.callback-step {
  display: grid;

  grid-template-columns:
    54px
    52px
    minmax(0, 1fr);

  gap: 18px;

  align-items: start;

  padding: 25px 4px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.callback-step__number {
  padding-top: 15px;

  color: rgba(248, 242, 235, 0.38);

  font-size: 11px;
}

.callback-step__icon {
  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  border-radius: 15px;

  background: rgba(221, 211, 246, 0.1);

  color: #c9b7ef;
}

.callback-step:nth-child(2) .callback-step__icon {
  background: rgba(215, 228, 234, 0.1);

  color: #bad1db;
}

.callback-step:nth-child(3) .callback-step__icon {
  background: rgba(220, 230, 217, 0.1);

  color: #bdd0b9;
}

.callback-step:nth-child(4) .callback-step__icon {
  background: rgba(238, 227, 185, 0.1);

  color: #ddd09d;
}

.callback-step h3 {
  margin: 5px 0 7px;

  color: #fff8f1;

  font-size: clamp(1.5rem, 2.1vw, 2rem);
}

.callback-step p {
  margin: 0;

  color: rgba(248, 242, 235, 0.52);

  font-size: 14px;

  line-height: 1.6;
}

/* =========================================================
   194. CALLBACK — ALTERNATIVE
   ========================================================= */

.callback-alternative {
  padding: var(--section-tight) 0;

  background: var(--paper);
}

.callback-alternative__card {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: clamp(40px, 8vw, 110px);

  align-items: end;

  padding: clamp(30px, 5vw, 52px);

  border-radius: clamp(22px, 3vw, 30px);

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(255, 255, 255, 0.46),
      transparent 24%
    ),
    linear-gradient(115deg, var(--lav), var(--sage));
}

.callback-alternative h2 {
  margin: 13px 0 12px;
}

.callback-alternative p {
  margin: 0;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.65;
}

/* =========================================================
   195. CALLBACK — DIRECT
   ========================================================= */

.callback-direct {
  padding: var(--section-tight) 0;

  border-top: 1px solid var(--border-soft);

  background: var(--bg);
}

.callback-direct__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.4fr)
    minmax(0, 0.6fr);

  gap: clamp(45px, 8vw, 120px);

  align-items: end;
}

.callback-direct__head h2 {
  margin: 13px 0 0;
}

.callback-direct__links {
  border-top: 1px solid rgba(57, 51, 46, 0.14);
}

.callback-direct__links a {
  display: grid;

  grid-template-columns:
    105px
    minmax(0, 1fr)
    28px;

  gap: 14px;

  align-items: center;

  min-height: 80px;

  padding: 11px 3px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.13);

  color: var(--ink);

  text-decoration: none;

  transition: padding 0.22s var(--ease);
}

.callback-direct__links a:hover {
  padding-left: 10px;
}

.callback-direct__links .mono {
  color: var(--muted);

  font-size: 11px;

  text-transform: uppercase;
}

.callback-direct__links strong {
  overflow-wrap: anywhere;

  font-size: clamp(1rem, 1.5vw, 1.35rem);
}

/* =========================================================
   196. CALLBACK — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .callback-hero {
    padding: 150px 0 70px;
  }

  .callback-hero__layout,
  .callback-request__layout,
  .callback-steps__head,
  .callback-alternative__card,
  .callback-direct__layout {
    grid-template-columns: 1fr;
  }

  .callback-hero h1 {
    font-size: clamp(3.45rem, 15vw, 5.25rem);
  }

  .callback-hero__note {
    max-width: 500px;
  }

  .callback-request__intro {
    position: static;
  }

  .callback-form-card__head {
    padding: 24px 18px;
  }

  .callback-form-card__note {
    padding: 14px 18px;
  }

  .callback-form-card__form {
    padding: 24px 18px 27px;
  }

  .callback-form-card .nc-cf7-row--two {
    grid-template-columns: 1fr;
  }

  .callback-step {
    grid-template-columns:
      38px
      48px
      minmax(0, 1fr);

    gap: 11px;
  }

  .callback-alternative__card .btn {
    width: fit-content;
  }
}

/* =========================================================
   197. CALLBACK — SMALL MOBILE
   ========================================================= */

@media (max-width: 500px) {
  .callback-step {
    grid-template-columns:
      45px
      minmax(0, 1fr);
  }

  .callback-step__number {
    display: none;
  }

  .callback-direct__links a {
    grid-template-columns:
      minmax(0, 1fr)
      24px;

    gap: 5px;
  }

  .callback-direct__links .mono {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   SALTY THEME — LEGAL DOCUMENTS

   Used by:
   - Mentions légales / Legal Notice
   - Politique de confidentialité / Privacy Policy
   ========================================================= */

/* =========================================================
   198. LEGAL — PAGE
   ========================================================= */

.legal-page {
  background: var(--paper);
}

/* =========================================================
   199. LEGAL — HERO
   ========================================================= */

.legal-page .legal-hero {
  position: relative;

  overflow: clip;

  padding: clamp(170px, 16vw, 220px) 0 clamp(72px, 8vw, 105px);

  border-bottom: 1px solid var(--border-soft);

  background:
    radial-gradient(
      circle at 91% 7%,
      rgba(221, 211, 246, 0.34),
      transparent 26%
    ),
    radial-gradient(
      circle at 8% 93%,
      rgba(220, 230, 217, 0.22),
      transparent 28%
    ),
    var(--bg);
}

.legal-page .legal-hero__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(250px, 330px);

  gap: clamp(50px, 9vw, 135px);

  align-items: end;
}

/* =========================================================
   Hero copy
   ========================================================= */

.legal-page .legal-hero h1 {
  max-width: 11ch;

  margin: 17px 0 20px;

  font-size: clamp(3.8rem, 6.5vw, 7rem);

  line-height: 0.91;

  letter-spacing: -0.035em;
}

.legal-page .legal-hero__lead {
  max-width: 63ch;

  margin: 0;

  color: var(--muted);

  font-size: clamp(1rem, 1.25vw, 1.16rem);

  line-height: 1.72;
}

/* =========================================================
   Hero meta
   ========================================================= */

.legal-page .legal-hero__meta {
  display: grid;

  grid-template-columns:
    46px
    minmax(0, 1fr);

  gap: 13px;

  align-items: center;

  padding: 18px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 17px;

  background: rgba(255, 253, 249, 0.56);

  backdrop-filter: blur(12px);
}

.legal-page .legal-hero__meta-icon {
  width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background: var(--lav);

  color: #765995;
}

.legal-page .legal-hero__meta .mono {
  display: block;

  margin-bottom: 4px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.3;

  text-transform: uppercase;

  letter-spacing: 0.045em;
}

.legal-page .legal-hero__meta strong {
  color: var(--ink);

  font-size: 14px;

  font-weight: 700;
}

/* =========================================================
   200. LEGAL — DOCUMENT SECTION
   ========================================================= */

.legal-page .legal-document-section {
  padding: var(--section-space) 0;

  background: var(--paper);
}

.legal-page .legal-document-layout {
  display: grid;

  grid-template-columns:
    minmax(190px, 225px)
    minmax(0, 820px);

  gap: clamp(55px, 9vw, 130px);

  justify-content: center;

  align-items: start;
}

/* =========================================================
   201. LEGAL — SIDEBAR
   ========================================================= */

.legal-page .legal-sidebar__sticky {
  position: sticky;

  top: calc(var(--announcement-h) + var(--header-h) + 36px);
}

.legal-page .legal-sidebar__label {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 13px;

  color: var(--muted);
}

.legal-page .legal-sidebar__label i {
  color: #8065a3;

  font-size: 12px;
}

.legal-page .legal-sidebar__label .mono {
  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.05em;
}

/* =========================================================
   Legal navigation
   ========================================================= */

.legal-page .legal-navigation {
  border-top: 1px solid rgba(57, 51, 46, 0.13);
}

.legal-page .legal-navigation a {
  display: grid;

  grid-template-columns:
    31px
    minmax(0, 1fr);

  gap: 8px;

  align-items: start;

  padding: 10px 2px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.09);

  color: var(--muted);

  text-decoration: none;

  transition:
    padding 0.2s var(--ease),
    color 0.2s ease;
}

.legal-page .legal-navigation a:hover {
  padding-left: 7px;

  color: var(--ink);
}

.legal-page .legal-navigation a .mono {
  padding-top: 1px;

  color: rgba(57, 51, 46, 0.42);

  font-size: 10px;
}

.legal-page .legal-navigation a strong {
  font-size: 12px;

  font-weight: 600;

  line-height: 1.4;
}

.legal-page .legal-document-section {
  overflow: visible;
}

.legal-page .legal-document-layout {
  display: grid;

  grid-template-columns:
    minmax(300px, 350px)
    minmax(0, 720px);

  gap: clamp(25px, 4vw, 70px);

  justify-content: center;

  align-items: start;

  overflow: visible;
}

/* The grid item itself is sticky */

.legal-page .legal-sidebar {
  position: sticky;

  top: calc(var(--announcement-h) + var(--header-h) + 28px);

  align-self: start;

  height: fit-content;

  max-height: calc(100vh - var(--announcement-h) - var(--header-h) - 55px);

  overscroll-behavior: contain;
}

/* Inner wrapper no longer needs sticky */

.legal-page .legal-sidebar__sticky {
  position: static;

  top: auto;
}

/* =========================================================
   202. LEGAL — DOCUMENT
   ========================================================= */

.legal-page .legal-document {
  min-width: 0;
}

/* =========================================================
   203. LEGAL — SECTION
   ========================================================= */

.legal-page .legal-section {
  scroll-margin-top: calc(var(--announcement-h) + var(--header-h) + 48px);

  padding-bottom: clamp(52px, 7vw, 80px);

  margin-bottom: clamp(52px, 7vw, 80px);

  border-bottom: 1px solid rgba(57, 51, 46, 0.11);
}

.legal-page .legal-section:last-of-type {
  margin-bottom: 0;
}

/* =========================================================
   Section heading
   ========================================================= */

.legal-page .legal-section__head {
  display: grid;

  grid-template-columns:
    63px
    minmax(0, 1fr);

  gap: 20px;

  align-items: start;

  margin-bottom: 28px;
}

.legal-page .legal-section__number {
  padding-top: 10px;

  color: #8065a3;

  font-size: 11px;

  font-weight: 600;
}

.legal-page .legal-section h2 {
  max-width: 15ch;

  margin: 0;

  color: var(--ink);

  font-size: clamp(2.25rem, 3.4vw, 3.6rem);

  line-height: 1;

  letter-spacing: -0.018em;
}

/* =========================================================
   204. LEGAL — BODY COPY
   ========================================================= */

.legal-page .legal-section__content {
  padding-left: 83px;
}

.legal-page .legal-section__content > p {
  max-width: 72ch;

  margin: 0 0 1.35em;

  color: #5f5750;

  font-size: clamp(15px, 1vw, 16px);

  line-height: 1.78;
}

.legal-page .legal-section__content > p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   205. LEGAL — LISTS
   ========================================================= */

.legal-page .legal-list {
  display: grid;

  gap: 10px;

  max-width: 69ch;

  margin: 20px 0 28px;

  padding-left: 22px;

  color: #5f5750;

  font-size: clamp(15px, 1vw, 16px);

  line-height: 1.7;
}

.legal-page .legal-list li {
  padding-left: 5px;
}

.legal-page .legal-list li::marker {
  color: #8065a3;
}

/* =========================================================
   206. LEGAL — FACTS
   ========================================================= */

.legal-page .legal-facts {
  margin: 25px 0 31px;

  border-top: 1px solid rgba(57, 51, 46, 0.13);
}

.legal-page .legal-fact {
  display: grid;

  grid-template-columns:
    minmax(150px, 0.35fr)
    minmax(0, 0.65fr);

  gap: 25px;

  align-items: start;

  padding: 15px 2px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.09);
}

.legal-page .legal-fact__label {
  color: var(--muted);

  font-size: 11px;

  line-height: 1.4;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}

.legal-page .legal-fact__value {
  min-width: 0;

  color: var(--ink);

  font-size: 14px;

  line-height: 1.55;

  overflow-wrap: anywhere;
}

.legal-page .legal-fact__value strong {
  font-weight: 700;
}

.legal-page .legal-fact__value a {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  max-width: 100%;

  color: var(--ink);

  font-weight: 700;

  text-decoration-line: underline;

  text-decoration-thickness: 1px;

  text-underline-offset: 3px;

  text-decoration-color: rgba(57, 51, 46, 0.24);
}

.legal-page .legal-fact__value a:hover {
  text-decoration-color: currentColor;
}

/* =========================================================
   207. LEGAL — SUBHEADING
   ========================================================= */

.legal-page .legal-subheading {
  max-width: 24ch;

  margin: clamp(38px, 5vw, 55px) 0 16px;

  color: var(--ink);

  font-family: var(--font-sans);

  font-size: clamp(1.2rem, 1.7vw, 1.45rem);

  font-weight: 750;

  line-height: 1.3;

  letter-spacing: -0.01em;
}

/* =========================================================
   208. LEGAL — NOTICE
   ========================================================= */

.legal-page .legal-notice-box {
  display: grid;

  grid-template-columns:
    39px
    minmax(0, 1fr);

  gap: 13px;

  margin: 23px 0 29px;

  padding: 18px 20px;

  border: 1px solid rgba(128, 101, 163, 0.17);

  border-radius: 15px;

  background: linear-gradient(
    120deg,
    rgba(221, 211, 246, 0.28),
    rgba(215, 228, 234, 0.18)
  );
}

.legal-page .legal-notice-box__icon {
  width: 37px;
  height: 37px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  background: rgba(128, 101, 163, 0.11);

  color: #765995;
}

.legal-page .legal-notice-box .mono {
  display: block;

  margin: 2px 0 5px;

  color: #765995;

  font-size: 11px;

  font-weight: 650;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}

.legal-page .legal-notice-box p {
  margin: 0;

  color: var(--ink);

  font-size: 14px;

  line-height: 1.65;
}

/* =========================================================
   209. LEGAL — INTERNAL LINK
   ========================================================= */

.legal-page .legal-inline-link {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  min-height: 42px;

  margin: 4px 0 17px;

  padding: 8px 12px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 999px;

  background: rgba(244, 239, 231, 0.5);

  color: var(--ink);

  font-size: 13px;

  font-weight: 700;

  text-decoration: none;

  transition:
    background 0.2s ease,
    padding 0.2s var(--ease);
}

.legal-page .legal-inline-link i {
  transition: transform 0.2s var(--ease);
}

.legal-page .legal-inline-link:hover {
  padding-inline: 15px;

  background: rgba(221, 211, 246, 0.32);
}

.legal-page .legal-inline-link:hover i {
  transform: translateX(4px);
}

/* =========================================================
   210. LEGAL — END MARKER
   ========================================================= */

.legal-page .legal-document-end {
  padding-top: 9px;

  text-align: center;
}

.legal-page .legal-document-end__rule {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  gap: 11px;

  align-items: center;

  margin-bottom: 13px;
}

.legal-page .legal-document-end__rule span {
  height: 1px;

  background: rgba(57, 51, 46, 0.12);
}

.legal-page .legal-document-end__rule i {
  color: #8065a3;

  font-size: 5px;
}

.legal-page .legal-document-end > .mono {
  color: var(--muted);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.06em;
}

/* =========================================================
   211. LEGAL — ACCESSIBILITY
   ========================================================= */

.legal-page .legal-navigation a:focus-visible,
.legal-page .legal-inline-link:focus-visible,
.legal-page .legal-fact__value a:focus-visible {
  outline: 2px solid rgba(128, 101, 163, 0.6);

  outline-offset: 3px;
}

/* =========================================================
   212. LEGAL — TABLET
   ========================================================= */

@media (max-width: 1020px) {
  .legal-page .legal-document-layout {
    grid-template-columns:
      190px
      minmax(0, 720px);

    gap: 50px;
  }

  .legal-page .legal-navigation a {
    grid-template-columns:
      27px
      minmax(0, 1fr);
  }

  .legal-page .legal-section__content {
    padding-left: 72px;
  }
}

/* =========================================================
   213. LEGAL — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .legal-page .legal-hero {
    padding: 150px 0 66px;
  }

  .legal-page .legal-hero__layout {
    grid-template-columns: 1fr;

    gap: 38px;
  }

  .legal-page .legal-hero h1 {
    font-size: clamp(3.45rem, 15vw, 5.25rem);
  }

  .legal-page .legal-hero__meta {
    max-width: 390px;
  }

  /* Document layout */

  .legal-page .legal-document-layout {
    grid-template-columns: 1fr;

    gap: 42px;
  }

  /* Sidebar becomes horizontal navigation */

  .legal-page .legal-sidebar__sticky {
    position: static;
  }

  .legal-page .legal-navigation {
    display: flex;

    gap: 6px;

    overflow-x: auto;

    margin-inline: calc(var(--gutter) * -1);

    padding-inline: var(--gutter);

    padding-bottom: 5px;

    border: 0;

    scrollbar-width: none;
  }

  .legal-page .legal-navigation::-webkit-scrollbar {
    display: none;
  }

  .legal-page .legal-navigation a {
    flex: 0 0 auto;

    display: flex;

    gap: 6px;

    min-height: 38px;

    align-items: center;

    padding: 7px 11px;

    border: 1px solid rgba(57, 51, 46, 0.1);

    border-radius: 999px;

    background: rgba(244, 239, 231, 0.55);
  }

  .legal-page .legal-navigation a:hover {
    padding: 7px 11px;

    background: var(--lav);
  }

  .legal-page .legal-navigation a strong {
    font-size: 12px;

    white-space: nowrap;
  }

  /* Heading */

  .legal-page .legal-section__head {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    gap: 10px;

    margin-bottom: 22px;
  }

  .legal-page .legal-section__number {
    padding-top: 8px;
  }

  .legal-page .legal-section h2 {
    font-size: clamp(2.15rem, 9vw, 3rem);
  }

  /* Body */

  .legal-page .legal-section__content {
    padding-left: 0;
  }

  .legal-page .legal-section__content > p,
  .legal-page .legal-list {
    font-size: 15px;
  }

  /* Facts */

  .legal-page .legal-fact {
    grid-template-columns: 1fr;

    gap: 5px;

    padding: 14px 2px;
  }

  /* Notice */

  .legal-page .legal-notice-box {
    grid-template-columns:
      35px
      minmax(0, 1fr);

    padding: 16px 15px;
  }

  .legal-page .legal-notice-box__icon {
    width: 33px;
    height: 33px;
  }
}

/* =========================================================
   214. LEGAL — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .legal-page .legal-section__head {
    grid-template-columns: 1fr;

    gap: 7px;
  }

  .legal-page .legal-section__number {
    padding-top: 0;
  }

  .legal-page .legal-notice-box {
    grid-template-columns: 1fr;
  }

  .legal-page .legal-inline-link {
    width: 100%;

    justify-content: space-between;

    border-radius: 13px;
  }
}

/* =========================================================
   215. LEGAL — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .legal-page .legal-navigation a,
  .legal-page .legal-inline-link,
  .legal-page .legal-inline-link i {
    transition: none !important;

    transform: none !important;
  }
}

/* =========================================================
   LEGAL — MOBILE
   Clean document layout
   ========================================================= */

@media (max-width: 760px) {
  /* =======================================================
     PAGE / HERO
     ======================================================= */

  .legal-page .legal-hero {
    padding: 128px 0 46px;

    background:
      linear-gradient(180deg, rgba(221, 211, 246, 0.18), transparent 48%),
      var(--bg);
  }

  .legal-page .legal-hero__layout {
    display: block;
  }

  .legal-page .legal-hero__copy {
    max-width: none;
  }

  .legal-page .legal-hero .section-eyebrow {
    margin-bottom: 14px;
  }

  .legal-page .legal-hero h1 {
    max-width: 8ch;

    margin: 0 0 17px;

    font-size: clamp(3rem, 13vw, 4.4rem);

    line-height: 0.94;

    letter-spacing: -0.035em;
  }

  .legal-page .legal-hero__lead {
    max-width: 34rem;

    font-size: 15px;

    line-height: 1.68;
  }

  /* =======================================================
     DATE
     ======================================================= */

  .legal-page .legal-hero__meta {
    display: flex;

    align-items: center;

    gap: 10px;

    max-width: none;

    margin-top: 27px;

    padding: 13px 0 0;

    border: 0;

    border-top: 1px solid rgba(57, 51, 46, 0.12);

    border-radius: 0;

    background: transparent;

    backdrop-filter: none;
  }

  .legal-page .legal-hero__meta-icon {
    width: 34px;
    height: 34px;

    border-radius: 10px;
  }

  .legal-page .legal-hero__meta .mono {
    margin-bottom: 2px;

    font-size: 10px;
  }

  .legal-page .legal-hero__meta strong {
    font-size: 13px;
  }

  /* =======================================================
     DOCUMENT
     ======================================================= */

  .legal-page .legal-document-section {
    padding: 54px 0 70px;
  }

  .legal-page .legal-document-layout {
    display: block;
  }

  /* =======================================================
     REMOVE DESKTOP NAVIGATION ON PHONE

     A 16-section sticky/horizontal menu is more annoying
     than useful on a phone.
     ======================================================= */

  .legal-page .legal-sidebar {
    display: none;
  }

  /* =======================================================
     SECTION
     ======================================================= */

  .legal-page .legal-section {
    scroll-margin-top: 90px;

    margin: 0;

    padding: 0 0 42px;

    border: 0;
  }

  .legal-page .legal-section + .legal-section {
    padding-top: 40px;

    border-top: 1px solid rgba(57, 51, 46, 0.11);
  }

  /* =======================================================
     SECTION HEADING

     Number sits ABOVE the title rather than beside it.
     ======================================================= */

  .legal-page .legal-section__head {
    display: block;

    margin-bottom: 21px;
  }

  .legal-page .legal-section__number {
    display: block;

    width: fit-content;

    margin-bottom: 8px;

    padding: 0;

    color: #8065a3;

    font-size: 10px;

    font-weight: 650;

    letter-spacing: 0.07em;
  }

  .legal-page .legal-section h2 {
    max-width: 17ch;

    margin: 0;

    font-size: clamp(1.9rem, 8vw, 2.65rem);

    line-height: 1.04;

    letter-spacing: -0.02em;
  }

  /* =======================================================
     BODY
     ======================================================= */

  .legal-page .legal-section__content {
    padding-left: 0;
  }

  .legal-page .legal-section__content > p {
    max-width: none;

    margin: 0 0 18px;

    color: #5f5750;

    font-size: 15px;

    line-height: 1.72;
  }

  /* =======================================================
     LISTS
     ======================================================= */

  .legal-page .legal-list {
    gap: 8px;

    max-width: none;

    margin: 17px 0 21px;

    padding-left: 19px;

    font-size: 15px;

    line-height: 1.62;
  }

  .legal-page .legal-list li {
    padding-left: 2px;
  }

  /* =======================================================
     FACTS
     ======================================================= */

  .legal-page .legal-facts {
    margin: 20px 0 24px;

    border-top: 1px solid rgba(57, 51, 46, 0.12);
  }

  .legal-page .legal-fact {
    display: block;

    padding: 13px 0;

    border-bottom: 1px solid rgba(57, 51, 46, 0.09);
  }

  .legal-page .legal-fact__label {
    display: block;

    margin-bottom: 4px;

    font-size: 10px;

    line-height: 1.35;

    letter-spacing: 0.045em;
  }

  .legal-page .legal-fact__value {
    font-size: 14px;

    line-height: 1.5;
  }

  .legal-page .legal-fact__value a {
    display: inline;

    overflow-wrap: anywhere;
  }

  .legal-page .legal-fact__value a i {
    margin-left: 4px;

    font-size: 10px;
  }

  /* =======================================================
     SUBHEADINGS
     ======================================================= */

  .legal-page .legal-subheading {
    max-width: none;

    margin: 30px 0 12px;

    font-size: 1.1rem;

    line-height: 1.35;
  }

  /* =======================================================
     NOTICE
     ======================================================= */

  .legal-page .legal-notice-box {
    display: block;

    margin: 20px 0 23px;

    padding: 15px;

    border-radius: 12px;
  }

  .legal-page .legal-notice-box__icon {
    width: 32px;
    height: 32px;

    margin-bottom: 11px;

    border-radius: 9px;
  }

  .legal-page .legal-notice-box .mono {
    margin-bottom: 5px;

    font-size: 10px;
  }

  .legal-page .legal-notice-box p {
    font-size: 13px;

    line-height: 1.6;
  }

  /* =======================================================
     INTERNAL LINK
     ======================================================= */

  .legal-page .legal-inline-link {
    width: auto;

    max-width: 100%;

    min-height: 0;

    margin: 3px 0 17px;

    padding: 10px 12px;

    border-radius: 10px;

    font-size: 13px;

    line-height: 1.4;
  }

  /* =======================================================
     DOCUMENT END
     ======================================================= */

  .legal-page .legal-document-end {
    padding-top: 42px;
  }

  .legal-page .legal-document-end__rule {
    margin-bottom: 10px;
  }

  .legal-page .legal-document-end > .mono {
    font-size: 10px;
  }
}

/* =========================================================
   SALTY THEME — SEARCH + 404
   ========================================================= */

/* =========================================================
   216. SHARED SEARCH FORM
   ========================================================= */

.salty-search-form {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 9px;

  align-items: center;
}

.salty-search-form__field {
  position: relative;
}

.salty-search-form__field > i {
  position: absolute;

  top: 50%;
  left: 17px;

  transform: translateY(-50%);

  color: var(--muted);

  font-size: 13px;

  pointer-events: none;
}

.salty-search-form input[type="search"] {
  width: 100%;

  min-height: 54px;

  padding: 12px 18px 12px 44px;

  border: 1px solid rgba(57, 51, 46, 0.12);

  border-radius: 999px;

  outline: none;

  background: rgba(255, 253, 249, 0.72);

  color: var(--ink);

  font-family: var(--font-sans);

  font-size: 14px;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.salty-search-form input[type="search"]::placeholder {
  color: rgba(117, 109, 102, 0.72);
}

.salty-search-form input[type="search"]:focus {
  border-color: rgba(128, 101, 163, 0.47);

  background: var(--white);

  box-shadow: 0 0 0 3px rgba(128, 101, 163, 0.08);
}

/* =========================================================
   217. SEARCH — HERO
   ========================================================= */

.search-page .search-hero {
  padding: clamp(170px, 16vw, 220px) 0 clamp(70px, 8vw, 100px);

  border-bottom: 1px solid var(--border-soft);

  background:
    radial-gradient(
      circle at 89% 7%,
      rgba(215, 228, 234, 0.4),
      transparent 27%
    ),
    radial-gradient(
      circle at 6% 92%,
      rgba(221, 211, 246, 0.21),
      transparent 25%
    ),
    var(--bg);
}

.search-page .search-hero__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(380px, 0.46fr);

  gap: clamp(55px, 9vw, 130px);

  align-items: end;
}

.search-page .search-hero h1 {
  margin: 16px 0 17px;

  font-size: clamp(3.8rem, 6.4vw, 6.9rem);

  line-height: 0.91;

  letter-spacing: -0.035em;
}

.search-page .search-hero__copy > p {
  max-width: 57ch;

  margin: 0;

  color: var(--muted);

  font-size: clamp(1rem, 1.2vw, 1.15rem);

  line-height: 1.7;
}

/* =========================================================
   218. SEARCH — RESULTS
   ========================================================= */

.search-page .search-results {
  padding: var(--section-space) 0;

  background: var(--paper);
}

.search-page .search-results__head {
  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 30px;

  margin-bottom: 34px;

  padding-bottom: 22px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.13);
}

.search-page .search-results__head h2 {
  margin: 11px 0 0;

  font-size: clamp(2.1rem, 3.5vw, 3.7rem);

  line-height: 1;
}

.search-page .search-results__head h2 span {
  color: #8065a3;
}

/* =========================================================
   Result count
   ========================================================= */

.search-page .search-results__count {
  flex: 0 0 auto;

  text-align: right;
}

.search-page .search-results__count strong {
  display: block;

  font-family: var(--font-display);

  font-size: clamp(2rem, 3vw, 3rem);

  line-height: 1;
}

.search-page .search-results__count .mono {
  display: block;

  margin-top: 5px;

  color: var(--muted);

  font-size: 10px;

  text-transform: uppercase;
}

/* =========================================================
   219. SEARCH — RESULT
   ========================================================= */

.search-page .search-results__list {
  border-top: 1px solid rgba(57, 51, 46, 0.11);
}

.search-page .search-result {
  display: grid;

  grid-template-columns:
    145px
    minmax(0, 1fr)
    46px;

  gap: 25px;

  align-items: center;

  padding: 28px 4px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.11);

  transition:
    padding 0.22s var(--ease),
    background 0.22s ease;
}

.search-page .search-result:hover {
  padding-inline: 12px;

  background: rgba(244, 239, 231, 0.42);
}

/* =========================================================
   Result meta
   ========================================================= */

.search-page .search-result__meta {
  display: grid;

  gap: 5px;

  color: var(--muted);

  font-size: 12px;
}

.search-page .search-result__meta .mono {
  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}

/* =========================================================
   Result copy
   ========================================================= */

.search-page .search-result__content h3 {
  margin: 0 0 7px;

  font-size: clamp(1.55rem, 2.3vw, 2.3rem);

  line-height: 1.08;
}

.search-page .search-result__content h3 a {
  color: var(--ink);

  text-decoration: none;
}

.search-page .search-result__content p {
  max-width: 65ch;

  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.62;
}

/* =========================================================
   Result arrow
   ========================================================= */

.search-page .search-result__open {
  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  border: 1px solid rgba(57, 51, 46, 0.11);

  border-radius: 50%;

  color: var(--ink);

  text-decoration: none;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s var(--ease);
}

.search-page .search-result:hover .search-result__open {
  background: #302b32;

  color: #fff8f1;

  transform: translateX(3px);
}

/* =========================================================
   220. PAGINATION
   ========================================================= */

.salty-pagination {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 6px;

  margin-top: 48px;
}

.salty-pagination .page-numbers {
  min-width: 40px;
  height: 40px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 0 11px;

  border: 1px solid rgba(57, 51, 46, 0.11);

  border-radius: 999px;

  color: var(--muted);

  font-size: 13px;

  text-decoration: none;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.salty-pagination .page-numbers:hover {
  background: var(--lav);

  color: var(--ink);
}

.salty-pagination .page-numbers.current {
  border-color: #302b32;

  background: #302b32;

  color: #fff8f1;
}

/* =========================================================
   221. SEARCH — EMPTY
   ========================================================= */

.search-page .search-empty {
  max-width: 620px;

  margin: 25px auto 40px;

  padding: clamp(35px, 6vw, 65px);

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 27px;

  background: linear-gradient(
    135deg,
    rgba(221, 211, 246, 0.23),
    rgba(220, 230, 217, 0.23)
  );

  text-align: center;
}

.search-page .search-empty__icon {
  width: 55px;
  height: 55px;

  display: grid;

  place-items: center;

  margin: 0 auto 20px;

  border-radius: 18px;

  background: #302b32;

  color: #fff8f1;
}

.search-page .search-empty h2 {
  margin: 13px 0 10px;

  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.search-page .search-empty p {
  max-width: 45ch;

  margin: 0 auto 24px;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.65;
}

/* =========================================================
   222. 404 — HERO
   ========================================================= */

.error-page .error-hero {
  position: relative;

  overflow: hidden;

  padding: clamp(175px, 17vw, 230px) 0 clamp(75px, 8vw, 110px);

  background:
    radial-gradient(
      circle at 85% 6%,
      rgba(238, 214, 216, 0.38),
      transparent 27%
    ),
    radial-gradient(
      circle at 8% 92%,
      rgba(221, 211, 246, 0.3),
      transparent 28%
    ),
    var(--bg);
}

.error-page .error-hero__layout {
  display: grid;

  grid-template-columns:
    minmax(270px, 0.4fr)
    minmax(0, 0.6fr);

  gap: clamp(45px, 8vw, 120px);

  align-items: center;
}

/* =========================================================
   Giant 404
   ========================================================= */

.error-page .error-hero__number {
  font-family: var(--font-display);

  font-size: clamp(8rem, 16vw, 15rem);

  line-height: 0.73;

  letter-spacing: -0.08em;

  color: rgba(57, 51, 46, 0.1);

  user-select: none;
}

/* =========================================================
   404 copy
   ========================================================= */

.error-page .error-hero h1 {
  max-width: 11ch;

  margin: 15px 0 16px;

  font-size: clamp(3rem, 5.4vw, 5.6rem);

  line-height: 0.94;

  letter-spacing: -0.03em;
}

.error-page .error-hero__copy > p {
  max-width: 53ch;

  margin: 0 0 26px;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.7;
}

.error-page .error-hero__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}

/* =========================================================
   223. 404 — TOOLS
   ========================================================= */

.error-page .error-tools {
  padding: var(--section-space) 0;

  border-top: 1px solid var(--border-soft);

  background: var(--paper);
}

.error-page .error-tools__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.48fr)
    minmax(0, 0.52fr);

  gap: clamp(50px, 9vw, 125px);

  align-items: start;
}

/* =========================================================
   404 search
   ========================================================= */

.error-page .error-search {
  padding: clamp(25px, 4vw, 38px);

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 23px;

  background: linear-gradient(
    135deg,
    rgba(215, 228, 234, 0.26),
    rgba(221, 211, 246, 0.2)
  );
}

.error-page .error-search .salty-search-form {
  grid-template-columns: 1fr;
}

.error-page .error-search .btn {
  width: fit-content;
}

/* =========================================================
   224. 404 — EXPLORE
   ========================================================= */

.error-page .error-explore header {
  margin-bottom: 20px;
}

.error-page .error-explore h2 {
  max-width: 12ch;

  margin: 12px 0 0;

  font-size: clamp(2rem, 3.4vw, 3.5rem);

  line-height: 1;
}

.error-page .error-explore__links {
  border-top: 1px solid rgba(57, 51, 46, 0.13);
}

.error-page .error-explore__links a {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  min-height: 58px;

  padding: 11px 2px;

  border-bottom: 1px solid rgba(57, 51, 46, 0.1);

  color: var(--ink);

  font-size: 14px;

  font-weight: 650;

  text-decoration: none;

  transition: padding 0.2s var(--ease);
}

.error-page .error-explore__links a:hover {
  padding-left: 9px;
}

.error-page .error-explore__links i {
  color: var(--muted);

  transition: transform 0.2s var(--ease);
}

.error-page .error-explore__links a:hover i {
  transform: translateX(4px);
}

/* =========================================================
   225. SEARCH + 404 — TABLET
   ========================================================= */

@media (max-width: 960px) {
  .search-page .search-hero__layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 0.44fr);

    gap: 45px;
  }

  .error-page .error-hero__layout {
    grid-template-columns:
      minmax(220px, 0.35fr)
      minmax(0, 0.65fr);
  }
}

/* =========================================================
   226. SEARCH + 404 — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  /* =======================================================
     SEARCH HERO
     ======================================================= */

  .search-page .search-hero {
    padding: 128px 0 50px;
  }

  .search-page .search-hero__layout {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .search-page .search-hero h1 {
    font-size: clamp(3.2rem, 14vw, 4.8rem);
  }

  .search-page .search-hero__copy > p {
    font-size: 15px;
  }

  /* Search form */

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

  .salty-search-form .btn {
    width: fit-content;
  }

  /* =======================================================
     SEARCH RESULTS
     ======================================================= */

  .search-page .search-results {
    padding: 55px 0 70px;
  }

  .search-page .search-results__head {
    align-items: start;

    margin-bottom: 25px;
  }

  .search-page .search-results__head h2 {
    font-size: clamp(1.9rem, 9vw, 2.75rem);
  }

  .search-page .search-results__count strong {
    font-size: 2rem;
  }

  /* Result */

  .search-page .search-result {
    grid-template-columns:
      minmax(0, 1fr)
      38px;

    gap: 13px;

    padding: 22px 2px;
  }

  .search-page .search-result:hover {
    padding-inline: 2px;

    background: transparent;
  }

  .search-page .search-result__meta {
    grid-column: 1 / -1;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
  }

  .search-page .search-result__content h3 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .search-page .search-result__content p {
    font-size: 14px;
  }

  .search-page .search-result__open {
    width: 36px;
    height: 36px;
  }

  /* =======================================================
     404 HERO
     ======================================================= */

  .error-page .error-hero {
    padding: 125px 0 56px;
  }

  .error-page .error-hero__layout {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .error-page .error-hero__number {
    font-size: clamp(6.8rem, 34vw, 10rem);

    line-height: 0.78;
  }

  .error-page .error-hero h1 {
    max-width: 13ch;

    font-size: clamp(2.6rem, 11vw, 4rem);
  }

  /* =======================================================
     404 TOOLS
     ======================================================= */

  .error-page .error-tools {
    padding: 58px 0 70px;
  }

  .error-page .error-tools__layout {
    grid-template-columns: 1fr;

    gap: 48px;
  }

  .error-page .error-search {
    padding: 20px;
  }

  .error-page .error-explore h2 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
}

/* =========================================================
   227. SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {
  .search-page .search-results__head {
    display: block;
  }

  .search-page .search-results__count {
    display: flex;

    align-items: baseline;

    gap: 6px;

    margin-top: 16px;

    text-align: left;
  }

  .search-page .search-results__count strong {
    font-size: 1.6rem;
  }

  .error-page .error-hero__actions {
    display: grid;

    justify-items: start;
  }
}

/* =========================================================
   228. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .search-page .search-result,
  .search-page .search-result__open,
  .error-page .error-explore__links a,
  .error-page .error-explore__links i {
    transition: none !important;

    transform: none !important;
  }
}

/* =========================================================
   229. JOURNAL — NATIVE ARCHIVES
   ========================================================= */

/* =========================================================
   ARCHIVE HERO
   ========================================================= */

.journal-archive-page .journal-archive-hero {
  padding: clamp(165px, 16vw, 220px) 0 clamp(70px, 8vw, 100px);

  border-bottom: 1px solid var(--border-soft);

  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(238, 227, 185, 0.31),
      transparent 25%
    ),
    radial-gradient(
      circle at 5% 92%,
      rgba(221, 211, 246, 0.23),
      transparent 26%
    ),
    var(--bg);
}

.journal-archive-page .journal-archive-hero__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(220px, 290px);

  gap: clamp(50px, 9vw, 130px);

  align-items: end;
}

/* =========================================================
   Archive copy
   ========================================================= */

.journal-archive-page .journal-archive-hero__type {
  display: block;

  width: fit-content;

  margin-top: 24px;

  color: #8065a3;

  font-size: 11px;

  font-weight: 650;

  text-transform: uppercase;

  letter-spacing: 0.055em;
}

.journal-archive-page .journal-archive-hero h1 {
  max-width: 13ch;

  margin: 10px 0 18px;

  font-size: clamp(3.7rem, 6.4vw, 6.8rem);

  line-height: 0.92;

  letter-spacing: -0.035em;
}

.journal-archive-page .journal-archive-hero__copy > p {
  max-width: 61ch;

  margin: 0;

  color: var(--muted);

  font-size: clamp(1rem, 1.2vw, 1.15rem);

  line-height: 1.7;
}

/* =========================================================
   Archive side
   ========================================================= */

.journal-archive-page .journal-archive-hero__side {
  display: grid;

  gap: 20px;

  justify-items: end;
}

.journal-archive-page .journal-archive-count {
  text-align: right;
}

.journal-archive-page .journal-archive-count strong {
  display: block;

  font-family: var(--font-display);

  font-size: clamp(3rem, 5vw, 5rem);

  line-height: 0.9;
}

.journal-archive-page .journal-archive-count .mono {
  display: block;

  margin-top: 6px;

  color: var(--muted);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.05em;
}

.journal-archive-page .journal-archive-back {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--ink);

  font-size: 13px;

  font-weight: 700;

  text-decoration: none;
}

.journal-archive-page .journal-archive-back i {
  transition: transform 0.2s var(--ease);
}

.journal-archive-page .journal-archive-back:hover i {
  transform: translateX(-4px);
}

/* =========================================================
   230. ARCHIVE RESULTS
   ========================================================= */

.journal-archive-page .journal-archive-results {
  padding: var(--section-space) 0;

  background: var(--paper);
}

.journal-archive-page .journal-archive-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: clamp(35px, 5vw, 65px) clamp(24px, 4vw, 45px);
}

/* =========================================================
   231. ARTICLE CARD
   ========================================================= */

.journal-archive-page .journal-archive-card {
  min-width: 0;
}

/* =========================================================
   Card media
   ========================================================= */

.journal-archive-page .journal-archive-card__media {
  position: relative;

  display: block;

  overflow: hidden;

  aspect-ratio: 16 / 10;

  margin-bottom: 21px;

  border-radius: clamp(16px, 2vw, 22px);

  background: linear-gradient(135deg, var(--lav), var(--sage));
}

.journal-archive-page .journal-archive-card__media img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 0.55s var(--ease);
}

.journal-archive-page
  .journal-archive-card:hover
  .journal-archive-card__media
  img {
  transform: scale(1.025);
}

/* =========================================================
   Placeholder
   ========================================================= */

.journal-archive-page .journal-archive-card__placeholder {
  width: 100%;
  height: 100%;

  display: grid;

  place-items: center;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.45),
      transparent 28%
    ),
    linear-gradient(135deg, var(--lav), var(--sage));

  color: rgba(57, 51, 46, 0.34);

  font-size: 28px;
}

/* =========================================================
   Card meta
   ========================================================= */

.journal-archive-page .journal-archive-card__meta {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 7px 13px;

  margin-bottom: 10px;

  color: var(--muted);

  font-size: 12px;
}

.journal-archive-page .journal-archive-card__meta .mono {
  color: #8065a3;

  font-size: 10px;

  font-weight: 650;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  text-decoration: none;
}

.journal-archive-page .journal-archive-card__meta time,
.journal-archive-page .journal-archive-card__meta > span {
  position: relative;
}

.journal-archive-page .journal-archive-card__meta time::before,
.journal-archive-page .journal-archive-card__meta > span::before {
  content: "";

  display: inline-block;

  width: 3px;
  height: 3px;

  margin: 0 8px 3px 0;

  border-radius: 50%;

  background: rgba(57, 51, 46, 0.28);
}

/* =========================================================
   Card copy
   ========================================================= */

.journal-archive-page .journal-archive-card h2 {
  max-width: 19ch;

  margin: 0 0 10px;

  font-size: clamp(2rem, 3vw, 3rem);

  line-height: 1.02;
}

.journal-archive-page .journal-archive-card h2 a {
  color: var(--ink);

  text-decoration: none;
}

.journal-archive-page .journal-archive-card__body > p {
  max-width: 59ch;

  margin: 0 0 17px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.65;
}

/* =========================================================
   Read link
   ========================================================= */

.journal-archive-page .journal-archive-card__link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--ink);

  font-size: 13px;

  font-weight: 700;

  text-decoration: none;
}

.journal-archive-page .journal-archive-card__link i {
  font-size: 11px;

  transition: transform 0.2s var(--ease);
}

.journal-archive-page .journal-archive-card__link:hover i {
  transform: translateX(4px);
}

/* =========================================================
   232. EMPTY ARCHIVE
   ========================================================= */

.journal-archive-page .journal-archive-empty {
  max-width: 620px;

  margin: 10px auto 40px;

  padding: clamp(35px, 6vw, 62px);

  border: 1px solid rgba(57, 51, 46, 0.09);

  border-radius: 27px;

  background: linear-gradient(
    135deg,
    rgba(238, 227, 185, 0.25),
    rgba(221, 211, 246, 0.21)
  );

  text-align: center;
}

.journal-archive-page .journal-archive-empty__icon {
  width: 54px;
  height: 54px;

  display: grid;

  place-items: center;

  margin: 0 auto 19px;

  border-radius: 17px;

  background: #302b32;

  color: #fff8f1;
}

.journal-archive-page .journal-archive-empty h2 {
  margin: 13px 0 9px;

  font-size: clamp(2.1rem, 4vw, 3.4rem);
}

.journal-archive-page .journal-archive-empty p {
  max-width: 44ch;

  margin: 0 auto 23px;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.65;
}

/* =========================================================
   233. ARCHIVE — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .journal-archive-page .journal-archive-hero {
    padding: 128px 0 50px;
  }

  .journal-archive-page .journal-archive-hero__layout {
    grid-template-columns: 1fr;

    gap: 28px;
  }

  .journal-archive-page .journal-archive-hero h1 {
    font-size: clamp(3rem, 13vw, 4.6rem);
  }

  .journal-archive-page .journal-archive-hero__copy > p {
    font-size: 15px;
  }

  .journal-archive-page .journal-archive-hero__side {
    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 20px;
  }

  .journal-archive-page .journal-archive-count {
    text-align: left;
  }

  .journal-archive-page .journal-archive-count strong {
    font-size: 2.8rem;
  }

  /* Results */

  .journal-archive-page .journal-archive-results {
    padding: 55px 0 70px;
  }

  .journal-archive-page .journal-archive-grid {
    grid-template-columns: 1fr;

    gap: 46px;
  }

  .journal-archive-page .journal-archive-card__media {
    margin-bottom: 18px;

    border-radius: 17px;
  }

  .journal-archive-page .journal-archive-card h2 {
    font-size: clamp(1.9rem, 8vw, 2.65rem);
  }

  .journal-archive-page .journal-archive-card__body > p {
    font-size: 14px;
  }
}

/* =========================================================
   234. ARCHIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {
  .journal-archive-page .journal-archive-hero__side {
    display: grid;

    justify-items: start;
  }

  .journal-archive-page .journal-archive-card__media {
    aspect-ratio: 4 / 3;
  }

  .journal-archive-page .journal-archive-card__meta {
    gap: 5px 8px;
  }
}

/* =========================================================
   235. ARCHIVE — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .journal-archive-page .journal-archive-card__media img,
  .journal-archive-page .journal-archive-card__link i,
  .journal-archive-page .journal-archive-back i {
    transition: none !important;

    transform: none !important;
  }
}

/* =========================================================
   236. VIRTUAL PROJECT — DETAIL PAGE
   ========================================================= */

.project-detail-page {
  background: var(--paper);
}

/* =========================================================
   237. PROJECT DETAIL — HERO
   ========================================================= */

.project-detail-hero {
  padding: clamp(150px, 14vw, 195px) 0 clamp(70px, 8vw, 105px);

  background:
    radial-gradient(
      circle at 8% 92%,
      rgba(238, 227, 185, 0.26),
      transparent 27%
    ),
    var(--bg);
}

.project-detail-hero__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.43fr)
    minmax(420px, 0.57fr);

  gap: clamp(55px, 8vw, 115px);

  align-items: center;
}

/* =========================================================
   Back
   ========================================================= */

.project-detail-back {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: clamp(45px, 6vw, 75px);

  color: var(--muted);

  font-size: 13px;

  font-weight: 650;

  text-decoration: none;
}

.project-detail-back i {
  font-size: 11px;

  transition: transform 0.2s var(--ease);
}

.project-detail-back:hover i {
  transform: translateX(-4px);
}

/* =========================================================
   Hero copy
   ========================================================= */

.project-detail-hero h1 {
  max-width: 10ch;

  margin: 15px 0 21px;

  font-size: clamp(4.3rem, 7.3vw, 8rem);

  line-height: 0.86;

  letter-spacing: -0.045em;
}

.project-detail-hero__lead {
  max-width: 48ch;

  margin: 0;

  color: var(--muted);

  font-size: clamp(1rem, 1.25vw, 1.17rem);

  line-height: 1.7;
}

/* =========================================================
   Hero metadata
   ========================================================= */

.project-detail-meta {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  margin-top: clamp(36px, 5vw, 56px);

  border-top: 1px solid rgba(57, 51, 46, 0.13);
}

.project-detail-meta > div {
  padding: 15px 16px 15px 0;

  border-bottom: 1px solid rgba(57, 51, 46, 0.1);
}

.project-detail-meta > div:nth-child(even) {
  padding-left: 16px;

  border-left: 1px solid rgba(57, 51, 46, 0.1);
}

.project-detail-meta .mono {
  display: block;

  margin-bottom: 5px;

  color: var(--muted);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.055em;
}

.project-detail-meta strong {
  display: block;

  font-size: 14px;

  line-height: 1.45;
}

/* =========================================================
   Hero image
   ========================================================= */

.project-detail-hero__media {
  position: relative;

  overflow: hidden;

  min-height: clamp(570px, 67vw, 850px);

  margin: 0;

  border-radius: clamp(24px, 3vw, 36px);

  background: var(--peach);

  box-shadow: 0 28px 70px rgba(57, 51, 46, 0.1);
}

.project-detail-hero__media::after {
  content: "";

  position: absolute;

  inset: 0;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: inherit;

  pointer-events: none;
}

.project-detail-hero__media img {
  width: 100%;
  height: 100%;

  position: absolute;

  inset: 0;

  display: block;

  object-fit: cover;
}

/* =========================================================
   238. PROJECT DETAIL — SERVICES
   ========================================================= */

.project-detail-services {
  padding: 28px 0;

  border-top: 1px solid rgba(57, 51, 46, 0.09);

  border-bottom: 1px solid rgba(57, 51, 46, 0.09);

  background: var(--white);
}

.project-detail-services__layout {
  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 28px 70px;
}

.project-detail-services__group {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 15px;
}

.project-detail-services__group > .mono {
  color: var(--muted);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.055em;
}

.project-detail-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}

.project-detail-tags span {
  display: inline-flex;

  align-items: center;

  min-height: 35px;

  padding: 6px 11px;

  border: 1px solid rgba(57, 51, 46, 0.1);

  border-radius: 999px;

  background: rgba(244, 239, 231, 0.55);

  color: var(--ink);

  font-size: 12px;

  font-weight: 650;
}

/* =========================================================
   239. PROJECT DETAIL — STORY
   ========================================================= */

.project-detail-story {
  padding: var(--section-space) 0;

  background: var(--paper);
}

.project-story-row {
  display: grid;

  grid-template-columns:
    65px
    minmax(240px, 0.37fr)
    minmax(0, 0.63fr);

  gap: clamp(25px, 5vw, 75px);

  align-items: start;

  padding: clamp(48px, 7vw, 75px) 0;

  border-top: 1px solid rgba(57, 51, 46, 0.12);
}

.project-story-row:last-child {
  border-bottom: 1px solid rgba(57, 51, 46, 0.12);
}

.project-story-row__index {
  padding-top: 7px;
}

.project-story-row__index .mono {
  color: rgba(57, 51, 46, 0.42);

  font-size: 11px;
}

.project-story-row__heading h2 {
  max-width: 9ch;

  margin: 11px 0 0;

  font-size: clamp(2.4rem, 4vw, 4.2rem);

  line-height: 0.98;
}

.project-story-row__copy {
  padding-top: 4px;
}

.project-story-row__copy p {
  max-width: 59ch;

  margin: 0;

  color: #5f5750;

  font-size: clamp(1rem, 1.2vw, 1.13rem);

  line-height: 1.82;
}

/* =========================================================
   240. PROJECT DETAIL — GALLERY
   ========================================================= */

.project-detail-gallery {
  padding: var(--section-space) 0;

  background: #302b32;

  color: #fff8f1;
}

.project-detail-gallery__head {
  display: grid;

  grid-template-columns:
    minmax(200px, 0.3fr)
    minmax(0, 0.7fr);

  gap: clamp(35px, 7vw, 100px);

  align-items: start;

  margin-bottom: clamp(38px, 6vw, 65px);
}

.project-detail-gallery__head .section-eyebrow {
  color: rgba(255, 248, 241, 0.55);
}

.project-detail-gallery__head h2 {
  max-width: 10ch;

  margin: 0;

  color: #fff8f1;

  font-size: clamp(2.8rem, 5vw, 5rem);

  line-height: 0.94;
}

/* =========================================================
   Gallery grid
   ========================================================= */

.project-gallery-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: clamp(16px, 2vw, 27px);
}

.project-gallery-item {
  overflow: hidden;

  margin: 0;
}

.project-gallery-item--wide {
  grid-column: 1 / -1;
}

.project-gallery-item img {
  width: 100%;
  height: auto;

  display: block;

  border-radius: clamp(16px, 2vw, 24px);
}

.project-gallery-item--normal img {
  aspect-ratio: 4 / 3;

  object-fit: cover;
}

.project-gallery-item--tall img {
  aspect-ratio: 4 / 5;

  object-fit: cover;
}

.project-gallery-item--wide img {
  width: 100%;

  max-height: 900px;

  object-fit: cover;
}

.project-gallery-item figcaption {
  max-width: 60ch;

  margin-top: 9px;

  color: rgba(255, 248, 241, 0.5);

  font-size: 12px;

  line-height: 1.55;
}

/* =========================================================
   241. PROJECT DETAIL — NEXT
   ========================================================= */

.project-detail-next {
  background: #302b32;
}

.project-detail-next__link {
  position: relative;

  isolation: isolate;

  min-height: clamp(400px, 48vw, 650px);

  display: flex;

  align-items: end;

  overflow: hidden;

  color: #fff8f1;

  text-decoration: none;
}

.project-detail-next__background {
  position: absolute;

  z-index: -3;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.75s var(--ease);
}

.project-detail-next__overlay {
  position: absolute;

  z-index: -2;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(25, 22, 26, 0.1),
    rgba(25, 22, 26, 0.72)
  );
}

.project-detail-next__link:hover .project-detail-next__background {
  transform: scale(1.025);
}

.project-detail-next__content {
  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 35px;

  padding-bottom: clamp(35px, 6vw, 70px);
}

.project-detail-next__content .mono {
  color: rgba(255, 248, 241, 0.62);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.055em;
}

.project-detail-next__content h2 {
  margin: 8px 0 0;

  color: #fff8f1;

  font-size: clamp(3.4rem, 7vw, 7.5rem);

  line-height: 0.88;
}

.project-detail-next__action {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding-bottom: 9px;

  font-size: 13px;

  font-weight: 700;
}

.project-detail-next__action i {
  transition: transform 0.2s var(--ease);
}

.project-detail-next__link:hover .project-detail-next__action i {
  transform: translateX(5px);
}

/* =========================================================
   242. PROJECT DETAIL — FINAL CTA
   ========================================================= */

.project-detail-cta {
  padding: var(--section-space) 0;

  background: var(--paper);
}

.project-detail-cta__card {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: clamp(40px, 8vw, 110px);

  align-items: end;

  padding: clamp(31px, 5vw, 58px);

  border-radius: clamp(23px, 3vw, 32px);

  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(255, 255, 255, 0.48),
      transparent 24%
    ),
    linear-gradient(115deg, var(--peach), var(--lav));
}

.project-detail-cta__copy h2 {
  max-width: 13ch;

  margin: 13px 0 13px;

  font-size: clamp(2.7rem, 4.8vw, 5rem);

  line-height: 0.95;
}

.project-detail-cta__copy p {
  max-width: 55ch;

  margin: 0;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.68;
}

.project-detail-cta__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  justify-content: flex-end;
}

/* =========================================================
   243. PROJECT DETAIL — TABLET
   ========================================================= */

@media (max-width: 960px) {
  .project-detail-hero__layout {
    grid-template-columns:
      minmax(0, 0.45fr)
      minmax(350px, 0.55fr);

    gap: 45px;
  }

  .project-story-row {
    grid-template-columns:
      45px
      minmax(190px, 0.35fr)
      minmax(0, 0.65fr);

    gap: 25px;
  }
}

/* =========================================================
   244. PROJECT DETAIL — MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .project-detail-hero {
    padding: 122px 0 55px;
  }

  .project-detail-hero__layout {
    grid-template-columns: 1fr;

    gap: 37px;
  }

  .project-detail-back {
    margin-bottom: 34px;
  }

  .project-detail-hero h1 {
    max-width: none;

    font-size: clamp(3.6rem, 16vw, 5.5rem);

    line-height: 0.88;
  }

  .project-detail-hero__lead {
    font-size: 15px;
  }

  .project-detail-meta {
    margin-top: 30px;
  }

  .project-detail-hero__media {
    min-height: 0;

    aspect-ratio: 4 / 5;

    border-radius: 20px;
  }

  /* =======================================================
     Services
     ======================================================= */

  .project-detail-services {
    padding: 24px 0;
  }

  .project-detail-services__layout,
  .project-detail-services__group {
    display: grid;

    justify-content: stretch;
  }

  .project-detail-services__layout {
    gap: 22px;
  }

  .project-detail-services__group {
    gap: 9px;
  }

  /* =======================================================
     Story
     ======================================================= */

  .project-detail-story {
    padding: 60px 0;
  }

  .project-story-row {
    grid-template-columns: 1fr;

    gap: 10px;

    padding: 38px 0;
  }

  .project-story-row__index {
    padding: 0;
  }

  .project-story-row__heading h2 {
    max-width: 12ch;

    font-size: clamp(2.15rem, 10vw, 3.1rem);
  }

  .project-story-row__copy {
    padding-top: 10px;
  }

  .project-story-row__copy p {
    font-size: 15px;

    line-height: 1.72;
  }

  /* =======================================================
     Gallery
     ======================================================= */

  .project-detail-gallery {
    padding: 64px 0;
  }

  .project-detail-gallery__head {
    grid-template-columns: 1fr;

    gap: 13px;

    margin-bottom: 35px;
  }

  .project-detail-gallery__head h2 {
    font-size: clamp(2.6rem, 12vw, 4rem);
  }

  .project-gallery-grid {
    grid-template-columns: 1fr;

    gap: 21px;
  }

  .project-gallery-item--wide {
    grid-column: auto;
  }

  .project-gallery-item--normal img,
  .project-gallery-item--wide img {
    aspect-ratio: auto;

    max-height: none;

    object-fit: contain;
  }

  /* =======================================================
     Next
     ======================================================= */

  .project-detail-next__link {
    min-height: 450px;
  }

  .project-detail-next__content {
    display: grid;

    gap: 21px;

    padding-bottom: 36px;
  }

  .project-detail-next__content h2 {
    font-size: clamp(3.2rem, 15vw, 5rem);
  }

  /* =======================================================
     CTA
     ======================================================= */

  .project-detail-cta {
    padding: 60px 0;
  }

  .project-detail-cta__card {
    grid-template-columns: 1fr;

    gap: 28px;

    padding: 28px 20px;
  }

  .project-detail-cta__copy h2 {
    max-width: 14ch;

    font-size: clamp(2.4rem, 11vw, 3.6rem);
  }

  .project-detail-cta__actions {
    justify-content: flex-start;
  }
}

/* =========================================================
   245. PROJECT DETAIL — SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {
  .project-detail-meta {
    grid-template-columns: 1fr;
  }

  .project-detail-meta > div,
  .project-detail-meta > div:nth-child(even) {
    padding: 12px 0;

    border-left: 0;
  }

  .project-detail-tags span {
    font-size: 11px;
  }

  .project-detail-next__link {
    min-height: 400px;
  }
}

/* =========================================================
   246. PROJECT DETAIL — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .project-detail-back i,
  .project-detail-next__background,
  .project-detail-next__action i {
    transition: none !important;

    transform: none !important;
  }
}

/* =========================================================
   HOME — FAQ FUNCTIONAL STATE
   ========================================================= */

.faq-item > summary {
  cursor: pointer;
  list-style: none;
}

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

.faq-item .faq-answer {
  display: block;
}

.faq-item:not([open]) .faq-answer {
  display: none;
}

.faq-item .faq-plus i {
  transition: transform var(--duration-base) var(--ease);
}

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