/* ==========================================================================
   CREATIVE MARTIN STUDIOS — DESIGN SYSTEM (cms.css)
   --------------------------------------------------------------------------
   Loads last. New and rebuilt templates use ONLY the `cms-` classes below;
   legacy pages keep style.css/theme.css until they are migrated.

   1. Tokens          5. Header & navigation    9. Cards
   2. Base            6. Footer additions      10. Shop
   3. Layout          7. Breadcrumb/pagination 11. Ad slots
   4. Buttons/badges  8. Forms/alerts/states   12. Motion & utilities
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Neutrals — warm, never cool grey */
  --c-surface: #ffffff;
  --c-surface-warm: #f7f5f1;
  --c-surface-sunken: #efece6;
  --c-line: #e7e3dc;
  --c-line-strong: #d4cec4;
  --c-ink: #141412;          /* headings, primary buttons */
  --c-text: #3a3733;         /* body copy */
  --c-muted: #6f6a63;        /* ≥ 4.5:1 on white */
  --c-faint: #a39d94;        /* placeholders, disabled */

  /* Accents — green is a FILL (ink text on it); deep green is for text */
  --c-accent: #2cdd9b;
  --c-accent-hover: #24c98b;
  --c-accent-soft: #e3f8ef;
  --c-accent-text: #0f7a55;  /* links/eyebrows on white, ≈ 5.3:1 */
  --c-warm: #f2b64a;         /* sale / highlight badges, ink text */
  --c-warm-soft: #fcf0d8;

  /* Status */
  --c-success: #0f7a55;
  --c-success-soft: #e3f8ef;
  --c-error: #b42318;
  --c-error-soft: #fdecea;
  --c-warning: #8a5a00;
  --c-warning-soft: #fdf3dc;
  --c-info: #1d4f91;
  --c-info-soft: #e8eff9;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: .75rem;     /* 12 */
  --fs-sm: .875rem;    /* 14 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.25rem;    /* 20 */
  --fs-2xl: 1.5rem;    /* 24 */
  --fs-3xl: clamp(1.625rem, 1.3rem + 1.2vw, 1.875rem);   /* 26→30 */
  --fs-4xl: clamp(1.875rem, 1.4rem + 2vw, 2.375rem);     /* 30→38 */
  --fs-5xl: clamp(2.25rem, 1.5rem + 3vw, 3rem);          /* 36→48 */
  --fs-6xl: clamp(2.5rem, 1.6rem + 4vw, 3.75rem);        /* 40→60 */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --tracking-tight: -0.02em;

  /* Spacing — 4px base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Layout */
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: 16px;
  --header-h: 68px;
  --section-y: clamp(48px, 7vw, 96px);

  /* Shape */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-sm: 0 4px 14px rgba(20, 20, 18, .06);
  --shadow-md: 0 16px 40px rgba(20, 20, 18, .10);

  /* Controls */
  --ctl-sm: 36px;
  --ctl-md: 44px;
  --ctl-lg: 52px;
  --focus-ring: 0 0 0 3px #fff, 0 0 0 5px var(--c-ink);

  /* Motion */
  --t-fast: 150ms;
  --t-base: 250ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Stacking */
  --z-header: 1040;
  --z-drawer: 1095;   /* above the chat widget, below the cookie dialog (1100) */
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --header-h: 72px; }
}

/* 2. BASE ------------------------------------------------------------------ */
.cms-skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 2000;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-ink);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
}
.cms-skip-link:focus { top: var(--sp-3); color: #fff; }

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

/* One visible focus treatment for every interactive element in cms- components */
:where([class*="cms-"]) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
:is(a, button, input, select, textarea, summary)[class*="cms-"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* Scroll-reveal never hides content unless JS has opted in (see header). */
[data-reveal] { opacity: 1; transform: none; }
.js-reveal [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(16px); }

.cms-prose { color: var(--c-text); font-size: var(--fs-lg); line-height: 1.7; }
.cms-prose > * + * { margin-top: 1em; }
.cms-prose h2 { font-size: var(--fs-3xl); margin-top: 1.8em; }
.cms-prose h3 { font-size: var(--fs-2xl); margin-top: 1.5em; }
.cms-prose a { color: var(--c-accent-text); text-underline-offset: 3px; }
.cms-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }

/* 3. LAYOUT ---------------------------------------------------------------- */
.cms-container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.cms-container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

.cms-section { padding-block: var(--section-y); }
.cms-section--warm { background: var(--c-surface-warm); }
.cms-section--tight { padding-block: clamp(32px, 5vw, 56px); }

.cms-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.cms-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent-text);
  margin-bottom: var(--sp-2);
}
.cms-h1, .cms-h2, .cms-h3, .cms-h4 {
  font-family: var(--font-sans);
  color: var(--c-ink);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.cms-h1 { font-size: var(--fs-5xl); font-weight: 800; line-height: var(--lh-tight); }
.cms-h2 { font-size: var(--fs-4xl); font-weight: 800; line-height: var(--lh-tight); }
.cms-h3 { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-snug); }
.cms-h4 { font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-snug); }
.cms-lead { font-size: var(--fs-lg); color: var(--c-muted); line-height: var(--lh-body); max-width: 60ch; margin: var(--sp-3) 0 0; }

.cms-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.cms-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.cms-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* Compact inner-page header (replaces the tall dark photo banner on rebuilt pages) */
.cms-page-head {
  padding-block: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-warm);
}
.cms-page-head .cms-breadcrumb { margin-bottom: var(--sp-4); }

/* 4. BUTTONS & BADGES ------------------------------------------------------ */
.cms-btn {
  --btn-h: var(--ctl-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: 600 var(--fs-sm)/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cms-btn--sm { --btn-h: var(--ctl-sm); padding: 0 14px; font-size: var(--fs-xs); }
.cms-btn--lg { --btn-h: var(--ctl-lg); padding: 0 28px; font-size: var(--fs-md); }
.cms-btn--block { width: 100%; }

.cms-btn--primary { background: var(--c-ink); color: #fff; }
.cms-btn--primary:hover { background: #2b2a27; color: #fff; }
.cms-btn--accent { background: var(--c-accent); color: var(--c-ink); }
.cms-btn--accent:hover { background: var(--c-accent-hover); color: var(--c-ink); }
.cms-btn--secondary { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line-strong); }
.cms-btn--secondary:hover { border-color: var(--c-ink); color: var(--c-ink); }
.cms-btn--ghost { background: transparent; color: var(--c-ink); }
.cms-btn--ghost:hover { background: var(--c-surface-sunken); color: var(--c-ink); }

.cms-btn:disabled, .cms-btn[aria-disabled="true"] {
  background: var(--c-surface-sunken);
  border-color: var(--c-line);
  color: var(--c-faint);
  cursor: not-allowed;
}
.cms-btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.cms-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-color: #fff #fff transparent transparent;
  border-radius: 50%;
  animation: cms-spin .7s linear infinite;
}
.cms-btn--secondary[aria-busy="true"]::after, .cms-btn--accent[aria-busy="true"]::after { border-color: var(--c-ink) var(--c-ink) transparent transparent; }

.cms-link { color: var(--c-accent-text); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.cms-link:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

.cms-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font: 600 11px/1 var(--font-sans);
  letter-spacing: .02em;
  background: var(--c-surface-sunken);
  color: var(--c-text);
  white-space: nowrap;
}
.cms-badge--free { background: var(--c-accent); color: var(--c-ink); }
.cms-badge--sale { background: var(--c-warm); color: var(--c-ink); }
.cms-badge--dark { background: var(--c-ink); color: #fff; }
.cms-badge--outline { background: #fff; border: 1px solid var(--c-line-strong); }

.cms-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-sm);
  padding: 0 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--c-text);
  font: 500 var(--fs-sm)/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.cms-chip:hover { border-color: var(--c-ink); color: var(--c-ink); }
.cms-chip[aria-current="page"], .cms-chip[aria-pressed="true"], .cms-chip.is-active {
  background: var(--c-ink); border-color: var(--c-ink); color: #fff;
}

/* 5. HEADER & NAVIGATION --------------------------------------------------- */
.cms-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--c-line);
  backdrop-filter: saturate(140%) blur(8px);
}
.cms-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--header-h);
}
.cms-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.cms-header__logo img { height: 36px; width: auto; display: block; }

.cms-nav { display: none; margin-inline: auto; }
.cms-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.cms-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-text);
  font: 500 var(--fs-sm)/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.cms-nav__link:hover, .cms-nav__item.is-open > .cms-nav__link { background: var(--c-surface-sunken); color: var(--c-ink); }
.cms-nav__link[aria-current="page"], .cms-nav__link.is-active { color: var(--c-ink); font-weight: 650; }
.cms-nav__link[aria-current="page"]::after, .cms-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
}
.cms-nav__link .fa-chevron-down { font-size: 11px; transition: transform var(--t-fast); }
.cms-nav__item.is-open .fa-chevron-down { transform: rotate(180deg); }

.cms-nav__item { position: relative; }
.cms-nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 90vw);
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-5);
}
.cms-nav__panel[hidden] { display: none; }
.cms-nav__panel-label { grid-column: 1 / -1; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.cms-nav__panel a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.cms-nav__panel a small { display: block; margin-top: 2px; font-weight: 400; color: var(--c-muted); font-size: var(--fs-xs); line-height: 1.4; }
.cms-nav__panel a:hover { background: var(--c-surface-warm); }
.cms-nav__panel-foot { grid-column: 1 / -1; display: flex; gap: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); margin-top: var(--sp-2); }
.cms-nav__panel-foot a { display: inline-flex; padding: 6px 0; color: var(--c-accent-text); }
.cms-nav__panel-foot a:hover { background: none; color: var(--c-ink); }

.cms-header__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.cms-header__enquire { display: none; }

.cms-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--c-ink);
  font-size: 20px;
  text-decoration: none;
}
.cms-cart-link:hover { background: var(--c-surface-sunken); color: var(--c-ink); }
.cms-cart-link__count {
  position: absolute;
  top: 4px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-ink);
  font: 700 11px/18px var(--font-sans);
  text-align: center;
}
.cms-cart-link__count[data-count="0"] { display: none; }

.cms-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--c-ink);
  font-size: 22px;
  cursor: pointer;
}

/* Mobile drawer */
.cms-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  justify-content: flex-end;
  background: rgba(20, 20, 18, .45);
}
.cms-drawer[hidden] { display: none; }
.cms-drawer__panel {
  width: min(380px, 100%);
  height: 100%;
  overflow-y: auto;
  background: #fff;
  padding: var(--sp-4) var(--gutter) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cms-drawer__top { display: flex; align-items: center; justify-content: space-between; }
.cms-drawer__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.cms-drawer__list > li { border-bottom: 1px solid var(--c-line); }
.cms-drawer__link, .cms-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--c-ink);
  font: 600 var(--fs-md)/1 var(--font-sans);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.cms-drawer__link[aria-current="page"] { color: var(--c-accent-text); }
.cms-drawer__sub { list-style: none; margin: 0 0 var(--sp-3); padding: 0 0 0 var(--sp-3); }
.cms-drawer__sub a { display: block; padding: 10px 4px; color: var(--c-text); font-size: var(--fs-sm); text-decoration: none; }
.cms-drawer__toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
body.cms-drawer-open { overflow: hidden; }

@media (min-width: 1100px) {
  .cms-nav { display: block; }
  .cms-menu-toggle { display: none; }
  .cms-header__enquire { display: inline-flex; }
  .cms-header__actions { margin-left: 0; }
}

/* 6. FOOTER ADDITIONS ------------------------------------------------------- */
.cms-footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* 7. BREADCRUMB & PAGINATION ----------------------------------------------- */
.cms-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.cms-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--c-faint); }
.cms-breadcrumb a { color: var(--c-muted); text-decoration: none; }
.cms-breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; }
.cms-breadcrumb [aria-current="page"] { color: var(--c-ink); font-weight: 500; }

.cms-pagination { display: flex; justify-content: center; margin-top: var(--sp-7); }
.cms-pagination ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cms-pagination a, .cms-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  color: var(--c-ink); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.cms-pagination a:hover { border-color: var(--c-ink); }
.cms-pagination [aria-current="page"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.cms-pagination .is-disabled { color: var(--c-faint); border-color: var(--c-line); }

/* 8. FORMS, ALERTS, STATES ------------------------------------------------- */
.cms-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.cms-label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.cms-label .cms-optional { font-weight: 400; color: var(--c-muted); }
.cms-hint { font-size: var(--fs-xs); color: var(--c-muted); }
.cms-input, .cms-select, .cms-textarea {
  width: 100%;
  min-height: var(--ctl-md);
  padding: 10px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--c-ink);
  font: 400 var(--fs-md)/1.4 var(--font-sans);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cms-textarea { min-height: 120px; resize: vertical; }
.cms-input::placeholder, .cms-textarea::placeholder { color: var(--c-faint); }
.cms-input:hover, .cms-select:hover, .cms-textarea:hover { border-color: var(--c-muted); }
.cms-input:focus, .cms-select:focus, .cms-textarea:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(20, 20, 18, .12); }
.cms-field.has-error .cms-input, .cms-field.has-error .cms-select, .cms-field.has-error .cms-textarea,
.cms-input[aria-invalid="true"], .cms-select[aria-invalid="true"] { border-color: var(--c-error); }
.cms-error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-error); }
.cms-error::before { content: "!"; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--c-error); color: #fff; font: 700 11px/16px var(--font-sans); text-align: center; }
.cms-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-text); }
.cms-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-ink); }

.cms-qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); overflow: hidden; }
.cms-qty button { width: 40px; height: 40px; border: 0; background: #fff; color: var(--c-ink); font-size: 18px; cursor: pointer; }
.cms-qty button:hover { background: var(--c-surface-sunken); }
.cms-qty input { width: 44px; height: 40px; border: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; }
.cms-qty input::-webkit-outer-spin-button, .cms-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cms-alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-bottom: var(--sp-4);
}
.cms-alert > i { font-size: 18px; line-height: 1.2; }
.cms-alert--info { background: var(--c-info-soft); border-color: #c9d8ee; color: var(--c-info); }
.cms-alert--success { background: var(--c-success-soft); border-color: #bfe9d6; color: var(--c-success); }
.cms-alert--warning { background: var(--c-warning-soft); border-color: #f1dfaf; color: var(--c-warning); }
.cms-alert--error { background: var(--c-error-soft); border-color: #f5c6c1; color: var(--c-error); }
.cms-alert strong { color: inherit; }

.cms-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
  background: var(--c-surface-warm);
}
.cms-empty i { font-size: 32px; color: var(--c-muted); }
.cms-empty p { margin: 0; max-width: 46ch; color: var(--c-muted); }

.cms-skeleton { background: linear-gradient(90deg, var(--c-surface-sunken) 25%, var(--c-surface-warm) 50%, var(--c-surface-sunken) 75%); background-size: 200% 100%; animation: cms-shimmer 1.4s infinite; border-radius: var(--r-sm); }

/* 9. CARDS ------------------------------------------------------------------ */
.cms-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.cms-card:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-sm); }
.cms-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--c-surface-sunken);
  overflow: hidden;
}
.cms-card--post .cms-card__media { aspect-ratio: 16 / 10; }
.cms-card--physical .cms-card__media { aspect-ratio: 1 / 1; }
.cms-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-base) var(--ease);
}
.cms-card:hover .cms-card__media img { transform: scale(1.02); }
.cms-card__badges { position: absolute; top: var(--sp-3); left: var(--sp-3); display: flex; gap: 6px; flex-wrap: wrap; }
.cms-card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); flex: 1; }
.cms-card__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-xs); color: var(--c-muted); }
.cms-card__meta > * + *::before { content: "·"; margin-right: 10px; color: var(--c-faint); }
.cms-card__title { margin: 0; font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-snug); color: var(--c-ink); letter-spacing: -0.01em; }
.cms-card__title a { color: inherit; text-decoration: none; }
/* Whole card is clickable via the title link; keeps one link per card for screen readers */
.cms-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cms-card__excerpt { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cms-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-2); }
.cms-card__foot .cms-btn, .cms-card__foot a:not(.cms-card__title a) { position: relative; z-index: 2; }

/* 10. SHOP ----------------------------------------------------------------- */
.cms-price { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 700; color: var(--c-ink); font-size: var(--fs-md); }
.cms-price__was { font-weight: 500; font-size: var(--fs-sm); color: var(--c-muted); text-decoration: line-through; }
.cms-price__alt { font-weight: 500; font-size: var(--fs-xs); color: var(--c-muted); }
.cms-price--lg { font-size: var(--fs-3xl); letter-spacing: var(--tracking-tight); }

.cms-filterbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.cms-filterbar__chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.cms-filterbar__tools { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cms-search { position: relative; }
.cms-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; }
.cms-search .cms-input { padding-left: 40px; border-radius: var(--r-pill); min-width: 220px; }
.cms-select--pill { border-radius: var(--r-pill); width: auto; padding-right: 36px; }

.cms-pdp { display: grid; gap: var(--sp-6); }
@media (min-width: 992px) { .cms-pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-7); align-items: start; } .cms-pdp__buy { position: sticky; top: calc(var(--header-h) + 24px); } }

.cms-gallery__main { position: relative; aspect-ratio: 4 / 3; background: var(--c-surface-sunken); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.cms-gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cms-gallery__zoom { position: absolute; right: var(--sp-3); bottom: var(--sp-3); }
.cms-gallery__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); overflow-x: auto; list-style: none; padding: 2px; }
.cms-gallery__thumbs button { flex: none; width: 76px; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); background: var(--c-surface-sunken); overflow: hidden; cursor: pointer; }
.cms-gallery__thumbs button[aria-current="true"] { border-color: var(--c-ink); }
.cms-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cms-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); background: rgba(20, 20, 18, .92); }
.cms-lightbox[hidden] { display: none; }
.cms-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cms-lightbox__close { position: absolute; top: var(--sp-4); right: var(--sp-4); }

.cms-option-group { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.cms-option-group legend { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); margin-bottom: var(--sp-2); }
.cms-option-group__items { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cms-option input { position: absolute; opacity: 0; pointer-events: none; }
.cms-option span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; background: #fff; }
.cms-option input:checked + span { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.cms-option input:focus-visible + span { box-shadow: var(--focus-ring); }
.cms-option input:disabled + span { color: var(--c-faint); text-decoration: line-through; cursor: not-allowed; background: var(--c-surface-warm); }

.cms-spec { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cms-spec th, .cms-spec td { padding: 10px 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.cms-spec th { width: 40%; color: var(--c-muted); font-weight: 500; }
.cms-spec td { color: var(--c-ink); }

.cms-panel { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-5); }
.cms-panel--warm { background: var(--c-surface-warm); }

.cms-stock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 500; }
.cms-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cms-stock--in { color: var(--c-success); }
.cms-stock--low { color: var(--c-warning); }
.cms-stock--out { color: var(--c-error); }

.cms-steps { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-6); font-size: var(--fs-sm); color: var(--c-muted); flex-wrap: wrap; }
.cms-steps li { display: flex; align-items: center; gap: var(--sp-2); }
.cms-steps li + li::before { content: ""; width: 24px; height: 1px; background: var(--c-line-strong); }
.cms-steps [aria-current="step"] { color: var(--c-ink); font-weight: 600; }

.cms-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cms-table th { text-align: left; font-weight: 600; color: var(--c-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; padding: 0 var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--c-line); }
.cms-table td { padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--c-line); vertical-align: middle; }

/* 11. AD SLOTS (blog articles only) ---------------------------------------- */
.cms-ad {
  display: block;
  margin: var(--sp-6) 0;
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-warm);
  text-align: center;
}
.cms-ad__label { display: block; margin-bottom: var(--sp-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.cms-ad--inline .cms-ad__unit { min-height: 280px; }   /* reserve space → no layout shift */
.cms-ad--sidebar { margin: 0 0 var(--sp-5); }
.cms-ad--sidebar .cms-ad__unit { min-height: 600px; }
@media (max-width: 1199.98px) { .cms-ad--sidebar { display: none; } }

/* 12. MOTION & UTILITIES ---------------------------------------------------- */
@keyframes cms-spin { to { transform: rotate(360deg); } }
@keyframes cms-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  [class*="cms-"], [class*="cms-"]::before, [class*="cms-"]::after { transition: none !important; animation: none !important; }
  .js-reveal [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
}

.cms-stack > * + * { margin-top: var(--sp-4); }
.cms-muted { color: var(--c-muted); }
.cms-text-sm { font-size: var(--fs-sm); }
.cms-mt-0 { margin-top: 0 !important; }
.cms-mb-0 { margin-bottom: 0 !important; }

/* 13. LEGACY INNER-PAGE BANNER → compact page head ------------------------------
   breadcrumb.php keeps its markup, H1 and BreadcrumbList schema; only the
   presentation changes: no dark photo band, trail above a strong ink title.
   `html` prefix outranks the route-specific rules in style.css/theme.css. */
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb {
  display: block;
  min-height: 0;
  margin: 0;
  padding: clamp(28px, 4vw, 48px) 0 clamp(24px, 3vw, 36px);
  background: var(--c-surface-warm);
  background-image: none;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
}
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb .inner-breadcrumb-shell {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb .inner-breadcrumb-layout {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--sp-4);
  text-align: left;
}
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb h1 {
  margin: 0;
  max-width: 22ch;
  color: var(--c-ink);
  font-size: var(--fs-5xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-shadow: none;
}
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb p.inner-breadcrumb-kicker {
  margin: 0 0 var(--sp-2);
  color: var(--c-accent-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
}
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb .inner-breadcrumb-trail .breadcrumb {
  margin: 0;
  padding: 0;
  background: none;
  font-size: var(--fs-sm);
}
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb .inner-breadcrumb-trail :is(.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.is-x) {
  color: var(--c-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb .inner-breadcrumb-trail .breadcrumb-item a:hover {
  color: var(--c-ink);
  text-decoration: underline;
}
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb .inner-breadcrumb-trail .breadcrumb-item.active {
  color: var(--c-ink);
}
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb .inner-breadcrumb-trail .breadcrumb-item + .breadcrumb-item::before {
  color: var(--c-faint);
}

/* Blog article featured image (moved out of the old photo banner) */
.cms-article-hero { margin: 0 0 var(--sp-5); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-sunken); aspect-ratio: 16 / 9; }
.cms-article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-chip[aria-current="page"] .cms-muted { color: inherit; opacity: .7; }

/* 14. COOKIE BANNER — compact corner card instead of a full-width dark slab.
   "Necessary only" and "Accept all" get equal weight. */
html body .studio-cookie-banner {
  left: 16px;
  right: 16px;
  bottom: 16px;
  transform: none;
  width: auto;
  max-width: 420px;
}
html body .studio-cookie-banner .studio-cookie-card {
  display: block;
  padding: var(--sp-4);
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
html body .studio-cookie-banner .studio-cookie-card .studio-cookie-title {
  margin: 0 0 4px;
  color: var(--c-ink);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
html body .studio-cookie-banner .studio-cookie-card p {
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
html body .studio-cookie-banner .studio-cookie-card .studio-cookie-kicker { display: none; }
html body .studio-cookie-banner .studio-cookie-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
html body .studio-cookie-banner .studio-cookie-btn {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--c-ink);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--c-ink);
  font: 600 var(--fs-sm)/1 var(--font-sans);
}
html body .studio-cookie-banner .studio-cookie-btn[data-cookie-action="accept"] { background: var(--c-ink); color: #fff; }
html body .studio-cookie-banner .studio-cookie-btn[data-cookie-settings] {
  grid-column: 1 / -1;
  order: 3;
  min-height: 32px;
  border: 0;
  background: none;
  color: var(--c-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body .studio-cookie-banner .studio-cookie-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Above-the-fold hero never waits for the scroll-reveal observer. */
.js-reveal .studio-hero-card[data-reveal] { opacity: 1; transform: none; }

/* Mobile: filter tools in a tidy grid; cookie card clears the chat button. */
@media (max-width: 575.98px) {
  .cms-filterbar__tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px; width: 100%; }
  .cms-filterbar__tools .cms-search { grid-column: 1 / -1; }
  .cms-filterbar__tools .cms-search .cms-input { min-width: 0; }
  .cms-filterbar__tools > label:not(.cms-search) .cms-select { width: 100%; padding-left: 12px; padding-right: 24px; font-size: var(--fs-sm); }
  .cms-filterbar__tools > .cms-btn { grid-column: 1 / -1; }
  html body .studio-cookie-banner { bottom: 88px; }
}

/* Shop & resource routes sit on the design-system surface, not the legacy cool grey. */
body:is(.route-shop, .route-resources, .route-cart, .route-checkout, .route-order, .route-download) { background: var(--c-surface); }

/* 15. CONTRAST — legacy labels/links that render brand green (#2cdd9b, ≈1.8:1)
   as text on light surfaces use the deep green text tone instead (≈5.3:1).
   List built by scanning every public template for green text on light
   backgrounds; dark sections keep the bright green. */
html body.page-public :is(
  .svc-content-label, .svc-clean-link, .svc-related-sub, .services-work-card > span,
  .section-title, .studio-eyebrow, .career-eyebrow, .legal-kicker, .pricing-kicker, .aw-kicker,
  .studio-cookie-dialog .studio-cookie-kicker, .job-meta-row small, .form-label .req,
  .vq-group-num, .vq-step-num, .shopify-toc-card a.is-active
) {
  color: var(--c-accent-text) !important;
}

/* Page head must survive route rules that force `background: transparent !important`. */
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb {
  background: var(--c-surface-warm) !important;
  border-bottom: 1px solid var(--c-line) !important;
}
/* Warm-neutral system: the site base is white, never the legacy cool grey. */
html body.page-public { background-color: var(--c-surface); }

/* ==========================================================================
   16. CONTENT-FIRST SHELL (GraphicBurger-style layout, Creative Martin brand)
   Warm light-grey page, white content panels and cards, a utility row, the
   main nav row and a topic bar. Applies to every public page.
   ========================================================================== */
:root {
  --c-page: #f4f3f1;
  --card-shadow: 0 1px 2px rgba(20, 20, 18, .06), 0 1px 1px rgba(20, 20, 18, .04);
  --card-shadow-hover: 0 10px 28px rgba(20, 20, 18, .10);
}
html body.page-public,
html body:is(.route-shop, .route-resources, .route-cart, .route-checkout, .route-order, .route-download) { background-color: var(--c-page); }

/* Utility row (scrolls away; the header below stays sticky) */
.cms-utility { background: #fff; border-bottom: 1px solid var(--c-line); font-size: var(--fs-xs); }
.cms-utility__inner { display: flex; align-items: center; justify-content: space-between; min-height: 32px; gap: var(--sp-4); }
.cms-utility__note { color: var(--c-muted); }
.cms-utility__links { display: flex; gap: 2px; }
.cms-utility__links a { padding: 6px 10px; color: var(--c-muted); text-decoration: none; }
.cms-utility__links a + a { border-left: 1px solid var(--c-line); }
.cms-utility__links a:hover { color: var(--c-ink); }
@media (max-width: 767.98px) { .cms-utility { display: none; } }

/* Topic bar */
.cms-topics { background: #fff; border-top: 1px solid var(--c-line); }
.cms-topics__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 46px; }
.cms-topics__list { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.cms-topics__list::-webkit-scrollbar { display: none; }
.cms-topics__link {
  position: relative; flex: none; padding: 13px 12px; color: var(--c-text);
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.cms-topics__link:hover { color: var(--c-ink); }
.cms-topics__link[aria-current="page"] { color: var(--c-ink); font-weight: 650; }
.cms-topics__link[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--c-accent); border-radius: 3px 3px 0 0; }
.cms-topics__search { display: flex; align-items: center; flex: none; width: 260px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface); overflow: hidden; }
.cms-topics__search input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 0; background: transparent; font-size: var(--fs-sm); color: var(--c-ink); }
.cms-topics__search input:focus { outline: none; }
.cms-topics__search:focus-within { border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(20, 20, 18, .12); }
.cms-topics__search button { width: 38px; height: 34px; border: 0; background: none; color: var(--c-ink); cursor: pointer; }
@media (max-width: 767.98px) { .cms-topics__search { display: none; } }
.cms-header { background: #fff; backdrop-filter: none; }

/* Page title area sits on the grey page, like a content index — no band. */
.cms-page-head,
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: clamp(24px, 3.5vw, 40px) 0 clamp(8px, 1.5vw, 16px) !important;
}
.cms-page-head .cms-h1, html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb h1 { font-size: var(--fs-4xl); }

/* Sections share the grey page; "warm" sections become quiet white panels. */
.cms-section--warm { background: transparent; }
.cms-section--warm > .cms-container { background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); padding: clamp(24px, 4vw, 48px); }

/* Cards: white, no outline, soft shadow, lift on hover */
.cms-card { border: 0; box-shadow: var(--card-shadow); border-radius: var(--r-sm); }
.cms-card:hover { box-shadow: var(--card-shadow-hover); border-color: transparent; }
.cms-card__media { background: #e9e7e3; }
.cms-card__body { padding: 14px 16px 16px; gap: 6px; }
.cms-card__title { font-size: 15px; }

/* Generic white panel for page content */
.cms-panel-page { background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); padding: clamp(20px, 4vw, 40px); }
.cms-card__media--none { aspect-ratio: auto !important; background: none !important; }

/* Home intro: centred tagline over the content grid */
.cms-home-intro { padding: clamp(32px, 5vw, 64px) 0 clamp(8px, 2vw, 16px); text-align: center; }
.cms-home-intro__title { max-width: 18ch; margin: 0 auto; color: var(--c-ink); font-size: var(--fs-5xl); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
.cms-home-intro__lead { max-width: 56ch; margin: var(--sp-3) auto 0; color: var(--c-muted); font-size: var(--fs-lg); }
.cms-home-intro__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.cms-home-links { display: flex; gap: var(--sp-4); font-size: var(--fs-sm); }

/* Service tiles (home + listings) */
.cms-service-tile { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); background: #fff; border-radius: var(--r-sm); box-shadow: var(--card-shadow); color: var(--c-text); text-decoration: none; transition: box-shadow var(--t-base) var(--ease); }
.cms-service-tile:hover { box-shadow: var(--card-shadow-hover); color: var(--c-text); }
.cms-service-tile > i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-text); font-size: 20px; }
.cms-service-tile strong { display: block; color: var(--c-ink); font-size: var(--fs-md); margin-bottom: 4px; }
.cms-service-tile small { display: block; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.5; }
html body.page-public section.cms-section, html body.page-public section.cms-home-intro { background-color: transparent !important; }

/* 17. DETAIL PAGES (work, services, articles): meta + pager bar, main column, sidebar */
.cms-detail__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cms-detail__meta { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.cms-detail__pager { display: flex; gap: var(--sp-2); }
.cms-detail__layout { display: grid; gap: var(--sp-5); }
@media (min-width: 992px) { .cms-detail__layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.cms-detail__gallery { display: grid; gap: var(--sp-3); padding: var(--sp-3); }
.cms-detail__gallery img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); background: var(--c-surface-sunken); }
.cms-detail__side { display: grid; gap: var(--sp-4); }
@media (min-width: 992px) { .cms-detail__side { position: sticky; top: calc(var(--header-h) + 64px); } }
.cms-side-box { padding: var(--sp-5); }
.cms-side-box__title { margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: 700; color: var(--c-ink); }
.cms-side-box--accent { border-top: 3px solid var(--c-accent); }
.cms-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.cms-side-list a { display: flex; gap: var(--sp-3); align-items: center; color: var(--c-text); text-decoration: none; }
.cms-side-list img { flex: none; width: 72px; height: 54px; object-fit: cover; border-radius: 4px; background: var(--c-surface-sunken); }
.cms-side-list strong { display: block; font-size: var(--fs-sm); color: var(--c-ink); line-height: 1.3; }
.cms-side-list small { color: var(--c-muted); font-size: var(--fs-xs); }
.cms-side-list a:hover strong { text-decoration: underline; }

/* 18. LEGACY DETAIL TEMPLATES → same panel language as the new detail pages.
   Service detail and blog article keep their markup; their main column and
   sidebar widgets become white panels on the grey page. */
html body.page-public :is(.svc-main-card, .shopify-article-card, .ark-detail-card) {
  background: #fff !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--card-shadow) !important;
  padding: clamp(20px, 3.5vw, 40px) !important;
}
html body.page-public :is(.svc-side-box, .ark-side-widget, .shopify-toc-card) {
  background: #fff !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--card-shadow) !important;
  padding: var(--sp-5) !important;
}
html body.page-public .svc-side-cta {
  background: #fff !important;
  background-image: none !important;
  color: var(--c-text) !important;
  border: 0 !important;
  border-top: 3px solid var(--c-accent) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--card-shadow) !important;
}
html body.page-public .svc-side-cta :is(h2, h3, h4, p, .svc-side-cta-eyebrow) { color: inherit !important; }
html body.page-public .svc-side-cta :is(h2, h3, h4) { color: var(--c-ink) !important; }
html body.page-public .svc-side-cta .btn { background: var(--c-ink) !important; color: #fff !important; border-color: var(--c-ink) !important; }
/* The page head already carries the service title; drop the repeated one. */
html body.page-public .svc-main-card > .svc-content-label:first-child,
html body.page-public .svc-main-card > .svc-main-title { display: none !important; }
html body.page-public :is(.svc-detail-section, .shopify-article-page, .ark-main-wrapper) { background: transparent !important; }

/* Legacy Bootstrap containers align with the header and page title width. */
@media (min-width: 1200px) {
  html body.page-public main .container { max-width: calc(var(--container) + 2 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* 19. LEGACY CONTENT PAGES → stacked white panels on the grey page.
   About, services, pricing, help, careers, start-project, legal and tool pages
   keep their markup; each top-level section becomes a contained panel, the
   same way GraphicBurger presents every page as panels on a light ground.
   New-system sections (.cms-section) and the detail templates are excluded. */
html body.page-public.page-inner main > :is(section, .legal-page-section, .project-inquiry-page):not(.cms-section):not(.svc-detail-section) {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--container);
  margin: 0 auto var(--sp-4) !important;
  background: #fff !important;
  border-radius: var(--r-md);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
html body.page-public.page-inner main > :is(section, .legal-page-section, .project-inquiry-page):not(.cms-section):not(.svc-detail-section) > :is(.container, .container-fluid) {
  max-width: 100%;
}
html body.page-public.page-inner main { padding-bottom: var(--sp-6); }
/* Legal pages and the enquiry form already use cards inside: flatten them into the panel. */
html body.page-public :is(.legal-content-card, .legal-side-card) { box-shadow: none !important; }

/* One heading scale everywhere: legacy display headings inside page panels
   follow the design-system h2 size instead of their poster-sized styles. */
html body.page-public.page-inner main h2:not([class*="cms-"]) {
  font-size: var(--fs-4xl) !important;
  font-weight: 800 !important;
  letter-spacing: var(--tracking-tight) !important;
  line-height: var(--lh-tight) !important;
}
html body.page-public.page-inner main :is(.cms-prose, .ck-content, .shopify-article-body, .legal-content-card) h2:not([class*="cms-"]) {
  font-size: var(--fs-3xl) !important;
  font-weight: 700 !important;
}

/* Footer: solid ink, no gradient; the project banner becomes a white panel. */
html body .studio-footer { background: var(--c-ink) !important; background-image: none !important; }
html body .studio-footer .studio-footer-banner {
  background: #fff !important;
  background-image: none !important;
  color: var(--c-ink) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}
html body .studio-footer .studio-footer-banner :is(span, h2) { color: var(--c-ink) !important; }
html body .studio-footer .studio-footer-banner span { color: var(--c-accent-text) !important; }
html body .studio-footer .studio-footer-banner .studio-footer-cta { background: var(--c-ink) !important; color: #fff !important; border-color: var(--c-ink) !important; }

/* 20. HOME SECTIONS */
.cms-home-intro .cms-eyebrow { margin-bottom: var(--sp-3); }
.cms-home-head { margin-bottom: var(--sp-5); }
.cms-home-head .cms-eyebrow { margin-bottom: 4px; }

/* Portfolio carousel: grid on tablet/desktop, swipe row on phones */
@media (max-width: 767.98px) {
  .cms-carousel {
    display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp-3);
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) var(--sp-3);
    scrollbar-width: none;
  }
  .cms-carousel::-webkit-scrollbar { display: none; }
  .cms-carousel > * { scroll-snap-align: start; }
}

/* Client logos */
.cms-logo-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.cms-logo-grid li { display: flex; align-items: center; justify-content: center; height: 88px; padding: var(--sp-3); background: var(--c-page); border-radius: var(--r-sm); }
.cms-logo-grid img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter var(--t-base), opacity var(--t-base); }
.cms-logo-grid li:hover img { filter: none; opacity: 1; }

/* FAQ */
.cms-faq { display: grid; gap: var(--sp-6); }
@media (min-width: 992px) { .cms-faq { grid-template-columns: 1fr 1.6fr; gap: var(--sp-8); } }
.cms-faq__list { display: grid; gap: var(--sp-2); }
.cms-faq__item { border: 1px solid var(--c-line); border-radius: var(--r-sm); background: #fff; }
.cms-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-4); cursor: pointer; list-style: none; font-weight: 600; color: var(--c-ink); }
.cms-faq__item summary::-webkit-details-marker { display: none; }
.cms-faq__item summary i { flex: none; transition: transform var(--t-fast); }
.cms-faq__item[open] summary i { transform: rotate(45deg); }
.cms-faq__item summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.cms-faq__answer { padding: 0 var(--sp-4) var(--sp-4); color: var(--c-text); line-height: 1.6; }

/* CTA panel */
.cms-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: clamp(24px, 4vw, 48px); background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); border-top: 4px solid var(--c-accent); }
.cms-cta > div:first-child { max-width: 60ch; }
.cms-cta__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* Dialog (book a call) */
.cms-dialog { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.cms-dialog::backdrop { background: rgba(20, 20, 18, .55); }
.cms-dialog__form { display: flex; flex-direction: column; max-height: inherit; }
.cms-dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--c-line); }
.cms-dialog__body { padding: var(--sp-4) var(--sp-5); overflow-y: auto; }
.cms-dialog__grid { display: grid; gap: 0 var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 576px) { .cms-dialog__grid { grid-template-columns: 1fr 1fr; } }
.cms-dialog__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) var(--sp-5); border-top: 1px solid var(--c-line); }
.cms-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body:has(.cms-dialog[open]) { overflow: hidden; }

/* 21. CARD SLIDER (home portfolio & blog) */
.cms-slider__track {
  display: grid; grid-auto-flow: column; gap: var(--sp-5);
  grid-auto-columns: calc((100% - 2 * var(--sp-5)) / 3);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 4px 4px var(--sp-3); margin: -4px -4px 0;
}
.cms-slider__track::-webkit-scrollbar { display: none; }
.cms-slider__track:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.cms-slider__slide { scroll-snap-align: start; min-width: 0; }
@media (max-width: 991.98px) { .cms-slider__track { grid-auto-columns: calc((100% - var(--sp-4)) / 2); gap: var(--sp-4); } }
@media (max-width: 575.98px) { .cms-slider__track { grid-auto-columns: 84%; gap: var(--sp-3); } }
@media (prefers-reduced-motion: reduce) { .cms-slider__track { scroll-behavior: auto; } }
.cms-slider__controls { display: flex; gap: var(--sp-2); }
.cms-slider__controls[hidden] { display: none; }
.cms-slider__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--c-line-strong); border-radius: 50%; background: #fff; color: var(--c-ink); cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.cms-slider__btn:hover:not(:disabled) { border-color: var(--c-ink); }
.cms-slider__btn:disabled { color: var(--c-faint); border-color: var(--c-line); cursor: default; }
.cms-slider__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cms-home-head__tools { display: flex; align-items: center; gap: var(--sp-4); }

/* ==========================================================================
   22. MENU + HERO + LOGO STRIP (agency hero layout)
   ========================================================================== */
:root {
  --c-brand: #0e5f47;        /* deep green: primary actions (≈7.6:1 with white) */
  --c-brand-hover: #0b4d39;
  --c-brand-soft: #e6f2ed;
}

/* Primary buttons everywhere use the deep brand green. */
.cms-btn--primary { background: var(--c-brand); color: #fff; }
.cms-btn--primary:hover { background: var(--c-brand-hover); color: #fff; }

/* Header: one clean row — logo, centred menu, actions */
.cms-header { border-bottom: 1px solid transparent; box-shadow: none; transition: border-color var(--t-base), box-shadow var(--t-base); }
.cms-header.is-scrolled { border-bottom-color: var(--c-line); box-shadow: 0 6px 18px rgba(20, 20, 18, .05); }
.cms-header__bar { height: 76px; }
.cms-nav { margin-inline: auto; }
.cms-nav__list { gap: 6px; }
.cms-nav__link { height: 40px; padding: 0 14px; font-size: 15px; font-weight: 500; color: var(--c-text); background: transparent; }
.cms-nav__link:hover, .cms-nav__item.is-open > .cms-nav__link { background: transparent; color: var(--c-brand); }
.cms-nav__link[aria-current="page"], .cms-nav__link.is-active { color: var(--c-brand); font-weight: 650; }
.cms-nav__link[aria-current="page"]::after, .cms-nav__link.is-active::after { display: none; }
.cms-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-ink); font-size: 18px; text-decoration: none; }
.cms-icon-link:hover, .cms-icon-link[aria-current="page"] { background: var(--c-surface-sunken); color: var(--c-ink); }

/* Pill CTA with a round icon on the left (header + hero) */
.cms-pill-cta, .cms-pill-ghost {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 22px 6px 6px;
  border-radius: var(--r-pill); font: 600 15px/1 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cms-pill-cta { background: var(--c-brand); border: 1.5px solid var(--c-brand); color: #fff; }
.cms-pill-cta:hover { background: var(--c-brand-hover); border-color: var(--c-brand-hover); color: #fff; }
.cms-pill-cta__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--c-brand); font-size: 15px; }
.cms-pill-ghost { padding: 6px 24px; background: #fff; border: 1.5px solid var(--c-brand); color: var(--c-ink); }
.cms-pill-ghost:hover { background: var(--c-brand-soft); color: var(--c-ink); }
.cms-pill-ghost i { color: var(--c-brand); font-size: 18px; }
.cms-pill-cta--lg { min-height: 56px; font-size: 16px; }
.cms-pill-cta--lg .cms-pill-cta__icon { width: 42px; height: 42px; }
:is(.cms-pill-cta, .cms-pill-ghost):focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cms-header .cms-pill-cta { min-height: 46px; font-size: 14px; }
.cms-header .cms-pill-cta .cms-pill-cta__icon { width: 32px; height: 32px; }

/* Hero */
.cms-hero { background: #fff; border-bottom: 1px solid var(--c-line); overflow: hidden; }
.cms-hero__inner { position: relative; padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(32px, 5vw, 56px); text-align: center; }
.cms-hero__badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-5); color: var(--c-muted); font-size: var(--fs-sm); }
.cms-hero__badge i { color: var(--c-warm); }
.cms-hero__title { margin: 0 auto; max-width: 15ch; color: var(--c-ink); font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; }
.cms-hero__line { display: block; }
@media (min-width: 768px) { .cms-hero__title { max-width: none; } }
.cms-hero__accent { position: relative; display: inline-flex; align-items: center; gap: .08em; color: var(--c-brand); white-space: nowrap; }
.cms-hero__doodle { width: .62em; height: .52em; color: var(--c-brand); transform: translateY(-.28em); }
.cms-hero__lead { max-width: 54ch; margin: var(--sp-5) auto 0; color: var(--c-muted); font-size: var(--fs-lg); line-height: 1.6; }
.cms-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* Floating role tags with pointer cursors (decorative, desktop only) */
.cms-hero__tag { position: absolute; display: none; align-items: center; gap: 4px; padding: 8px 18px; border-radius: var(--r-pill); background: var(--c-brand); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 8px 20px rgba(14, 95, 71, .2); }
.cms-hero__cursor { width: 20px; height: 20px; color: var(--c-brand); position: absolute; }
.cms-hero__tag--left { left: 5%; top: 52%; transform: rotate(-3deg); }
.cms-hero__tag--left .cms-hero__cursor { right: -18px; top: -16px; transform: rotate(80deg); }
.cms-hero__tag--right { right: 5%; top: 60%; transform: rotate(3deg); background: #1b8a60; }
.cms-hero__tag--right .cms-hero__cursor { left: -16px; top: -18px; color: #1b8a60; }
@media (min-width: 1100px) { .cms-hero__tag { display: inline-flex; } }
@media (prefers-reduced-motion: no-preference) {
  .cms-hero__tag { animation: cms-float 6s ease-in-out infinite; }
  .cms-hero__tag--right { animation-delay: -3s; }
}
@keyframes cms-float { 50% { translate: 0 -8px; } }

/* Client logo strip */
.cms-logos { margin-top: clamp(40px, 6vw, 72px); }
.cms-logos__label { margin: 0 0 var(--sp-5); color: var(--c-text); font-size: var(--fs-md); }
.cms-logos__label strong { color: var(--c-brand); font-weight: 650; }
.cms-logos__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cms-logos__track { display: flex; align-items: center; gap: clamp(32px, 5vw, 64px); width: max-content; margin: 0; padding: 0; list-style: none; animation: cms-marquee 40s linear infinite; }
.cms-logos__viewport:hover .cms-logos__track, .cms-logos__viewport:focus-within .cms-logos__track { animation-play-state: paused; }
.cms-logos__track li { flex: none; display: flex; align-items: center; height: 56px; }
.cms-logos__track img { max-height: 48px; max-width: 140px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.15); opacity: .85; transition: filter var(--t-base), opacity var(--t-base); }
.cms-logos__track li:hover img { filter: none; opacity: 1; }
@keyframes cms-marquee { to { transform: translateX(calc(-50% - clamp(16px, 2.5vw, 32px))); } }
@media (prefers-reduced-motion: reduce) {
  .cms-logos__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .cms-logos__track li[aria-hidden="true"] { display: none; }
  .cms-logos__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* The intro section from the previous home layout is no longer used */
.cms-home-intro { display: none; }
/* Below desktop the enquiry pill lives in the menu drawer, not the header bar. */
@media (max-width: 1099.98px) { .cms-header .cms-header__enquire { display: none; } }

/* 23. FLOW SECTIONS (process, studio, why us, testimonials) */
.cms-steps-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); counter-reset: step; }
.cms-step { position: relative; padding: var(--sp-5); border-radius: var(--r-md); background: var(--c-page); }
.cms-step__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--sp-4); border-radius: 50%; background: var(--c-brand); color: #fff; font-size: 20px; }
.cms-step h3 { margin-bottom: var(--sp-2); }
.cms-step p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.6; }
.cms-step__cta { margin-top: var(--sp-3); padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--fs-sm); color: var(--c-brand); }
@media (min-width: 992px) {
  .cms-step:not(:last-child)::after { content: ""; position: absolute; top: 46px; right: calc(-1 * var(--sp-4) + 2px); width: calc(var(--sp-4) - 4px); height: 2px; background: var(--c-line-strong); }
}

.cms-studio { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 992px) { .cms-studio { grid-template-columns: 1.3fr 1fr; gap: var(--sp-8); } }
.cms-studio .cms-lead { margin-bottom: var(--sp-5); }
.cms-people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.cms-person { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--c-page); }
.cms-person img, .cms-person__initials { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--c-brand-soft); }
.cms-person__initials { display: inline-flex; align-items: center; justify-content: center; color: var(--c-brand); font-weight: 700; font-size: 20px; }
.cms-person strong { display: block; color: var(--c-ink); }
.cms-person small { color: var(--c-muted); font-size: var(--fs-sm); }

.cms-why-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cms-why { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); background: #fff; border-radius: var(--r-sm); box-shadow: var(--card-shadow); }
.cms-why > i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-brand-soft); color: var(--c-brand); font-size: 20px; }
.cms-why h3 { margin-bottom: 4px; }
.cms-why p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; }

.cms-quote { height: 100%; margin: 0; padding: var(--sp-5); background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-4); }
.cms-quote blockquote { margin: 0; color: var(--c-ink); font-size: var(--fs-md); line-height: 1.6; }
.cms-quote figcaption strong { display: block; color: var(--c-ink); }
.cms-quote figcaption small { color: var(--c-muted); }
.cms-outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cms-outcomes li { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-md); background: var(--c-page); }
.cms-outcomes__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-brand); color: #fff; font-weight: 700; }
.cms-outcomes h3 { margin-bottom: 4px; }
.cms-outcomes p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.55; }

/* ==========================================================================
   24. VIVID CTAs — colourful mesh background with soft decorative shapes.
   Used for every call-to-action panel: book-a-call panel, footer banner,
   blog/portfolio closing bands and sidebar enquiry boxes. Text stays ink on
   light pastel tones (≥ 7:1); buttons keep the deep brand green.
   ========================================================================== */
:root {
  --vivid-cyan: #3ef0e2;
  --vivid-mint: #b8f3d8;
  --vivid-lemon: #fbf87a;
  --vivid-leaf: #19c7b4;
  --vivid-bg:
    radial-gradient(55% 140% at 0% 30%, rgba(62, 240, 226, .95) 0%, rgba(62, 240, 226, 0) 62%),
    radial-gradient(40% 90% at 72% 0%, rgba(251, 248, 122, .95) 0%, rgba(251, 248, 122, 0) 70%),
    radial-gradient(45% 120% at 100% 100%, rgba(184, 243, 216, .95) 0%, rgba(184, 243, 216, 0) 70%),
    linear-gradient(100deg, #8ff5ea 0%, #e9fdf8 38%, #fdfbd2 70%, #f3fbdc 100%);
}

:is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner, .cms-side-box--accent, .svc-side-cta) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--vivid-bg) !important;
  border: 0 !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  color: var(--c-ink) !important;
}

/* Leaf shape (left) and flower-like circle cluster (right) */
:is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::before,
:is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
:is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::before {
  left: -60px;
  bottom: -110px;
  width: 260px;
  height: 320px;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(160deg, rgba(25, 199, 180, .55), rgba(25, 199, 180, .15));
  transform: rotate(-28deg);
}
:is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::after {
  right: -50px;
  top: -40px;
  width: 300px;
  height: 300px;
  background:
    radial-gradient(circle at 30% 30%, rgba(196, 238, 120, .75) 0 24%, transparent 25%),
    radial-gradient(circle at 70% 26%, rgba(205, 245, 160, .7) 0 22%, transparent 23%),
    radial-gradient(circle at 30% 72%, rgba(184, 235, 196, .75) 0 24%, transparent 25%),
    radial-gradient(circle at 72% 70%, rgba(170, 230, 210, .7) 0 26%, transparent 27%),
    radial-gradient(circle at 50% 50%, rgba(214, 246, 170, .7) 0 30%, transparent 31%);
}
@media (max-width: 767.98px) {
  :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::after { width: 200px; height: 200px; right: -70px; top: -60px; opacity: .8; }
  :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::before { width: 180px; height: 220px; }
}

/* Typography on the vivid surface */
:is(.cms-cta, .cms-cta-band > .cms-container) .cms-h2,
.studio-footer .studio-footer-banner h2 {
  color: var(--c-ink) !important;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
}
:is(.cms-cta, .cms-cta-band > .cms-container) .cms-lead,
:is(.cms-cta, .cms-cta-band > .cms-container) p { color: #2b2a27 !important; }
:is(.cms-cta, .cms-cta-band > .cms-container) .cms-eyebrow,
.studio-footer .studio-footer-banner > div > span { color: #0b4d39 !important; }

/* Layout: big headline left, copy + action right (like a newsletter banner) */
.cms-cta { padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 72px); border-top: 0 !important; }
.cms-cta-band > .cms-container { padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px) !important; }
.cms-cta__actions .cms-btn--ghost { background: rgba(255, 255, 255, .7); color: var(--c-ink); }
.cms-cta__actions .cms-btn--ghost:hover { background: #fff; }

/* Footer banner buttons stay deep green on the colourful surface */
html body .studio-footer .studio-footer-banner .studio-footer-cta { background: var(--c-brand) !important; border-color: var(--c-brand) !important; color: #fff !important; }

/* Sidebar enquiry boxes: smaller, same palette, no decorative shapes */
:is(.cms-side-box--accent, .svc-side-cta) { border-top: 0 !important; }
:is(.cms-side-box--accent, .svc-side-cta) :is(h2, h3, h4, .cms-side-box__title) { color: var(--c-ink) !important; }
:is(.cms-side-box--accent, .svc-side-cta) :is(p, .cms-muted, .svc-side-cta-eyebrow) { color: #2b2a27 !important; }
html body.page-public .svc-side-cta .btn { background: var(--c-brand) !important; border-color: var(--c-brand) !important; }

@media (forced-colors: active) {
  :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner, .cms-side-box--accent, .svc-side-cta) { border: 2px solid CanvasText !important; }
}
.cms-cta-band > .cms-container { align-items: center; flex-wrap: wrap; height: auto !important; min-height: 0 !important; }
/* Override the earlier white footer-banner rule (same !important, higher specificity). */
html body .studio-footer .studio-footer-banner { background: var(--vivid-bg) !important; position: relative; isolation: isolate; overflow: hidden; }
html body .studio-footer .studio-footer-banner :is(span, h2) { position: relative; }
/* Decorative shapes overflow the CTA box; `clip` crops them without making the
   box scrollable (with `hidden`, focusing a link inside could scroll it). */
:is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner, .cms-side-box--accent, .svc-side-cta) { overflow: clip !important; }

/* ==========================================================================
   25. BRAND PALETTE — #2cdd9b green · #242b27 dark · #4dbcda cyan · #f5f5f5 light
   Green and cyan are too light for text on light backgrounds, so they are
   used as fills, highlights and gradients with #242b27 text on top
   (≈ 8.4:1 on green, ≈ 6.7:1 on cyan). Text and primary buttons are dark.
   Neutrals below are tints of #242b27 / #f5f5f5 only.
   ========================================================================== */
:root {
  --brand-green: #2cdd9b;
  --brand-dark: #242b27;
  --brand-cyan: #4dbcda;
  --brand-light: #f5f5f5;

  /* Neutrals */
  --c-ink: #242b27;
  --c-text: #2f3833;
  --c-muted: #5d6560;            /* 5.5:1 on #f5f5f5, 6:1 on white */
  --c-faint: #9aa19d;
  --c-page: #f5f5f5;
  --c-surface: #ffffff;
  --c-surface-warm: #f5f5f5;
  --c-surface-sunken: #ebedec;
  --c-line: #e1e4e2;
  --c-line-strong: #cbd0cd;

  /* Accents */
  --c-accent: #2cdd9b;
  --c-accent-hover: #26c98c;
  --c-accent-soft: rgba(44, 221, 155, .16);
  --c-accent-text: #242b27;      /* "accent" text is dark; green appears as marks/fills */
  --c-cyan: #4dbcda;
  --c-cyan-soft: rgba(77, 188, 218, .16);
  --c-warm: #4dbcda;             /* sale/highlight badges now use brand cyan */
  --c-warm-soft: rgba(77, 188, 218, .16);

  /* Primary actions: dark pill, green icon circle */
  --c-brand: #242b27;
  --c-brand-hover: #161b18;
  --c-brand-soft: rgba(44, 221, 155, .16);

  /* Status (functional colours kept for errors; success/info use the palette) */
  --c-success: #242b27;
  --c-success-soft: rgba(44, 221, 155, .16);
  --c-info: #242b27;
  --c-info-soft: rgba(77, 188, 218, .16);

  --focus-ring: 0 0 0 3px #fff, 0 0 0 5px #242b27;
  --card-shadow: 0 1px 2px rgba(36, 43, 39, .06), 0 1px 1px rgba(36, 43, 39, .04);
  --card-shadow-hover: 0 10px 28px rgba(36, 43, 39, .10);

  /* Legacy tokens (style.css / theme.css) */
  --cms-ink: #242b27; --studio-ink: #242b27; --studio-charcoal: #242b27; --dark: #242b27; --text-main: #242b27;
  --cms-text: #2f3833; --cms-muted: #5d6560; --text-muted: #5d6560;
  --cms-surface-soft: #f5f5f5; --cms-surface-sunken: #f5f5f5; --surface-soft: #f5f5f5; --studio-page: #f5f5f5; --studio-cream: #f5f5f5; --studio-sand: #f5f5f5;
  --cms-green: #2cdd9b; --brand: #2cdd9b; --primary: #2cdd9b; --studio-green: #2cdd9b;
  --cms-accent-solid: #4dbcda; --cms-yellow: #4dbcda;

  /* Colourful CTAs: brand cyan → green → light */
  --vivid-bg:
    radial-gradient(55% 140% at 0% 30%, rgba(77, 188, 218, .85) 0%, rgba(77, 188, 218, 0) 62%),
    radial-gradient(45% 110% at 75% 0%, rgba(44, 221, 155, .55) 0%, rgba(44, 221, 155, 0) 70%),
    radial-gradient(45% 120% at 100% 100%, rgba(44, 221, 155, .45) 0%, rgba(44, 221, 155, 0) 70%),
    linear-gradient(100deg, #9bdaeb 0%, #e9f6f9 36%, #f5f5f5 58%, #d5f7ea 100%);
}

/* Page + footer */
html body.page-public, body { background-color: var(--c-page); }
html body .studio-footer { background: var(--brand-dark) !important; }

/* Primary pill: dark with a green icon circle (header + hero + CTAs) */
.cms-pill-cta { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.cms-pill-cta:hover { background: var(--c-brand-hover); border-color: var(--c-brand-hover); color: #fff; }
.cms-pill-cta__icon { background: var(--brand-green); color: var(--brand-dark); }
.cms-pill-ghost { border-color: var(--brand-dark); }
.cms-pill-ghost i { color: var(--brand-dark); }
.cms-pill-ghost:hover { background: var(--c-accent-soft); }

/* Menu: active item dark + green underline */
.cms-nav__link:hover, .cms-nav__item.is-open > .cms-nav__link { color: var(--brand-dark); }
.cms-nav__link[aria-current="page"], .cms-nav__link.is-active { color: var(--brand-dark); }
.cms-nav__link[aria-current="page"]::after, .cms-nav__link.is-active::after {
  display: block; content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--brand-green);
}

/* Eyebrows & links: dark text with green marks */
.cms-eyebrow { color: var(--brand-dark); display: inline-flex; align-items: center; gap: 8px; }
.cms-eyebrow::before { content: none !important; display: none !important; }
.cms-link { color: var(--brand-dark); text-decoration: underline; text-decoration-color: var(--brand-green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cms-link:hover { text-decoration-color: var(--brand-cyan); color: var(--brand-dark); }
.cms-logos__label strong { color: var(--brand-dark); box-shadow: inset 0 -.45em 0 rgba(44, 221, 155, .45); }

/* Hero: highlighter on the accent word instead of light green text */
.cms-hero__accent { color: var(--brand-dark); }
.cms-hero__accent { background: linear-gradient(transparent 58%, rgba(44, 221, 155, .6) 58%, rgba(44, 221, 155, .6) 92%, transparent 92%); padding: 0 .06em; }
.cms-hero__doodle { color: var(--brand-green); }
.cms-hero__badge i { color: var(--brand-green); }
.cms-hero__tag { background: var(--brand-green); color: var(--brand-dark); box-shadow: 0 8px 20px rgba(36, 43, 39, .14); }
.cms-hero__tag .cms-hero__cursor { color: var(--brand-green); }
.cms-hero__tag--right { background: var(--brand-cyan); }
.cms-hero__tag--right .cms-hero__cursor { color: var(--brand-cyan); }

/* Icon circles: green / cyan fills with dark icons */
.cms-service-tile > i { background: var(--c-accent-soft); color: var(--brand-dark); }
.cms-why > i { background: var(--c-cyan-soft); color: var(--brand-dark); }
.cms-step__icon { background: var(--brand-green); color: var(--brand-dark); }
.cms-step:nth-child(2) .cms-step__icon { background: var(--brand-cyan); }
.cms-step__cta { color: var(--brand-dark); }
.cms-outcomes__num { background: var(--brand-green); color: var(--brand-dark); }
.cms-outcomes li:nth-child(even) .cms-outcomes__num { background: var(--brand-cyan); }
.cms-person__initials { background: var(--c-accent-soft); color: var(--brand-dark); }
.cms-cart-link__count { background: var(--brand-green); color: var(--brand-dark); }

/* Badges & chips */
.cms-badge--free { background: var(--brand-green); color: var(--brand-dark); }
.cms-badge--sale { background: var(--brand-cyan); color: var(--brand-dark); }
.cms-chip[aria-current="page"], .cms-chip[aria-pressed="true"], .cms-chip.is-active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.cms-topics__link[aria-current="page"]::after { background: var(--brand-green); }
.cms-card__media { background: var(--c-surface-sunken); }

/* Colourful CTA shapes in brand tints */
:is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::before {
  background: linear-gradient(160deg, rgba(77, 188, 218, .65), rgba(77, 188, 218, .15));
}
:is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::after {
  background:
    radial-gradient(circle at 30% 30%, rgba(44, 221, 155, .55) 0 24%, transparent 25%),
    radial-gradient(circle at 70% 26%, rgba(44, 221, 155, .4) 0 22%, transparent 23%),
    radial-gradient(circle at 30% 72%, rgba(77, 188, 218, .45) 0 24%, transparent 25%),
    radial-gradient(circle at 72% 70%, rgba(44, 221, 155, .35) 0 26%, transparent 27%),
    radial-gradient(circle at 50% 50%, rgba(77, 188, 218, .35) 0 30%, transparent 31%);
}
:is(.cms-cta, .cms-cta-band > .cms-container) :is(.cms-lead, p),
:is(.cms-side-box--accent, .svc-side-cta) :is(p, .cms-muted, .svc-side-cta-eyebrow) { color: var(--c-text) !important; }
:is(.cms-cta, .cms-cta-band > .cms-container) .cms-eyebrow,
.studio-footer .studio-footer-banner > div > span { color: var(--brand-dark) !important; }
.cms-cta__actions .cms-btn--ghost { background: rgba(255, 255, 255, .75); }
html body .studio-footer .studio-footer-banner .studio-footer-cta,
html body.page-public .svc-side-cta .btn { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; color: #fff !important; }

/* Ad slot + misc warm surfaces */
.cms-ad { background: var(--c-page); }
.cms-logo-grid li { background: var(--c-page); }

/* Legacy components brought onto the palette with readable contrast */
:root { --cms-faint: #6b726e; }
html body.page-public .btn-dark { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; color: #fff !important; }
html body.page-public .btn-dark:hover { background: var(--c-brand-hover) !important; }
html body.page-public .hero-note-text { color: var(--c-muted) !important; }

/* ==========================================================================
   26. TYPE PAIRING — display serif for headlines, Inter for everything else.
   "Camera Obscura" loads only when the licensed files are in assets/fonts/
   (see header.php); Fraunces is the free stand-in until then.
   ========================================================================== */
:root {
  --font-display: "Camera Obscura", "Fraunces", Georgia, "Times New Roman", serif;
}

/* Headlines */
.cms-h1, .cms-h2,
.cms-hero__title,
.cms-page-head .cms-h1,
html body.page-public.page-inner .breadcrumb-section.inner-breadcrumb h1,
html body.page-public.page-inner main h2:not([class*="cms-"]),
:is(.cms-cta, .cms-cta-band > .cms-container) .cms-h2,
.studio-footer .studio-footer-banner h2,
.cms-dialog .cms-h3#bookCallTitle,
.cms-empty .cms-h3 {
  font-family: var(--font-display) !important;
  font-optical-sizing: auto;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}
.cms-hero__title { font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.04; }
.cms-h2, :is(.cms-cta, .cms-cta-band > .cms-container) .cms-h2 { line-height: 1.08 !important; }

/* Article headings stay in Inter for long-form readability */
html body.page-public.page-inner main :is(.cms-prose, .ck-content, .shopify-article-body, .legal-content-card) h2 {
  font-family: var(--font-sans) !important;
  letter-spacing: -0.01em !important;
}

/* Inter stays on UI text: nav, buttons, cards, labels, forms */
.cms-card__title, .cms-h3, .cms-h4, .cms-eyebrow, .cms-btn, .cms-pill-cta, .cms-pill-ghost,
.cms-nav__link, .cms-chip, .cms-label, .cms-side-box__title { font-family: var(--font-sans); }

/* 404 */
.cms-notfound { text-align: left; }
.cms-notfound__code { display: block; margin-bottom: var(--sp-2); font-family: var(--font-display); font-size: clamp(4rem, 2rem + 8vw, 7rem); font-weight: 800; line-height: 1; color: var(--brand-dark); text-shadow: 6px 6px 0 var(--brand-green); }
.cms-notfound__search { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-5) 0; }
.cms-notfound__links { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.cms-notfound__links .cms-service-tile { box-shadow: none; background: var(--c-page); }

/* Legal pages: the document title uses the display face like other page headings */
html body.page-public.page-inner main .legal-content-card > h2:first-of-type { font-family: var(--font-display) !important; font-size: var(--fs-4xl) !important; font-weight: 700 !important; letter-spacing: -0.015em !important; }
html body.page-public.page-inner main .legal-content-card > h2:first-of-type { max-width: none !important; }

/* Child-page contrast fixes */
:root { --adobe-muted: #5d6560; }
html body.page-public main .pricing-detail-hero p.section-title { color: var(--brand-green) !important; }  /* on the dark card */
html body.page-public :is(.legal-content-card, .legal-side-card) a:not(.btn):not([class*="cms-btn"]) {
  color: var(--brand-dark) !important; text-decoration: underline; text-decoration-color: var(--brand-green); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
html body.page-public label b[aria-hidden="true"] { color: var(--brand-dark) !important; }
html body.page-public .careers-section p { color: var(--c-muted); }

/* CTA shapes: a real leaf (left) and an eight-petal star flower (right) */
:is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::before {
  left: -30px; bottom: -70px; top: auto; right: auto;
  width: 200px; height: 320px;
  border-radius: 0;
  background: url("../images/cta-leaf.svg") no-repeat center / contain;
  transform: rotate(-32deg);
}
:is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::after {
  right: -60px; top: -70px; left: auto; bottom: auto;
  width: 300px; height: 300px;
  background: url("../images/cta-flower.svg") no-repeat center / contain;
  opacity: 1;
}
@media (max-width: 767.98px) {
  :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::before { width: 130px; height: 210px; left: -40px; bottom: -60px; }
  :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::after { width: 190px; height: 190px; right: -70px; top: -70px; }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::after { animation: cms-spin-slow 60s linear infinite; }
}
@keyframes cms-spin-slow { to { transform: rotate(360deg); } }
:is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::before { left: -20px; bottom: -40px; width: 180px; height: 290px; transform: rotate(-24deg); }
.inquiry-next { margin: var(--sp-3) 0 var(--sp-5); padding-left: 1.2em; color: var(--c-text); font-size: var(--fs-sm); line-height: 1.6; }
.inquiry-next li + li { margin-top: 6px; }
.inquiry-next li::marker { color: var(--brand-dark); font-weight: 700; }

/* Mobile: legacy containers get one gutter (not margin + padding) and cards
   never exceed their column. */
@media (max-width: 991.98px) {
  html body.page-public main :is(.container, .studio-shell) { margin-left: auto !important; margin-right: auto !important; width: 100% !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
  html body.page-public main :is(.svc-main-card, .shopify-article-card, .ark-detail-card, .svc-side-box, .svc-side-cta, .ark-side-widget, .legal-content-card, .legal-side-card) { width: auto !important; max-width: 100% !important; }
}
/* Long URLs in legal text must wrap instead of widening the layout */
html body.page-public .legal-layout { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { html body.page-public .legal-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); } }
html body.page-public :is(.legal-content-card, .cms-prose, .ck-content) a { overflow-wrap: anywhere; }

/* ==========================================================================
   27. ART TOUCH — one thin hand-drawn swash for every highlight, paper grain
   and hand-drawn doodles on the hero and colourful CTAs (decorative only).
   ========================================================================== */

/* Highlighted words read as plain text: no underline swash, marker or box */
.cms-swash,
.cms-hero__accent,
.cms-logos__label strong {
  background: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
:is(.cms-swash, .cms-hero__accent, .cms-logos__label strong)::before,
:is(.cms-swash, .cms-hero__accent, .cms-logos__label strong)::after { content: none !important; display: none !important; }
.cms-hero__doodle { display: none; }
/* Links share the same thin, calm underline */
.cms-link { text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.cms-nav__link[aria-current="page"]::after, .cms-nav__link.is-active::after { height: 2px; }

/* Hero: clean white (no grain) with the hand-drawn sparkle and squiggle */
html body .cms-hero {
  background-color: #fff;
  background-image: none !important;
}
.cms-hero__inner::before,
.cms-hero__inner::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}
.cms-hero__inner::before { top: 18%; left: 14%; width: 34px; height: 34px; background-image: url("../images/doodle-sparkle.svg"); transform: rotate(-12deg); }
.cms-hero__inner::after { content: none !important; display: none !important; } /* squiggle doodle removed */
.cms-hero__inner > * { position: relative; z-index: 1; }
.cms-hero__inner > .cms-hero__tag { position: absolute; }
@media (max-width: 991.98px) {
  .cms-hero__inner::before { top: 6%; left: 4%; width: 24px; height: 24px; }
  .cms-hero__inner::after { display: none; }
}

/* Colourful CTAs: grain + sparkles layered over the brand gradient */
html body :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner) {
  background:
    url("../images/grain.svg") 0 0 / 180px 180px repeat,
    url("../images/doodle-sparkle.svg") 58% 16% / 26px 26px no-repeat,
    url("../images/doodle-sparkle.svg") 80% 82% / 16px 16px no-repeat,
    radial-gradient(55% 140% at 0% 30%, rgba(77, 188, 218, .85) 0%, rgba(77, 188, 218, 0) 62%),
    radial-gradient(45% 110% at 75% 0%, rgba(44, 221, 155, .55) 0%, rgba(44, 221, 155, 0) 70%),
    radial-gradient(45% 120% at 100% 100%, rgba(44, 221, 155, .45) 0%, rgba(44, 221, 155, 0) 70%),
    linear-gradient(100deg, #9bdaeb 0%, #e9f6f9 36%, #f5f5f5 58%, #d5f7ea 100%) !important;
}
/* Flat shapes: no rotation animation needed for a calm, printed look */
:is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::after { animation: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .cms-hero__inner::before { animation: cms-twinkle 3.2s ease-in-out infinite; }
}
@keyframes cms-twinkle { 50% { transform: rotate(-12deg) scale(.82); opacity: .75; } }

@media (forced-colors: active) {
  .cms-swash::after, .cms-hero__accent::after, .cms-logos__label strong::after { background: CanvasText; }
}
/* Doodles sit in the open space around the badge, clear of the headline */
.cms-hero__inner::before { top: clamp(28px, 5vw, 60px); left: 10%; }
.cms-hero__inner::after { top: clamp(24px, 4.5vw, 56px); right: 9%; }
@media (max-width: 991.98px) { .cms-hero__inner::before { top: 14px; left: 6%; } }

/* ==========================================================================
   28. OFFSET FOOTER CTA + TEAM CAROUSEL + STUDIO FACTS
   ========================================================================== */

/* The footer starts lower; its CTA rises 120px above the dark edge. */
html body .studio-footer { margin-top: 150px !important; padding-top: 0 !important; overflow: visible !important; }
html body .studio-footer .studio-footer-banner.cms-footer-cta {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) auto;
  align-items: center;
  gap: var(--sp-5) var(--sp-7);
  margin: -120px 0 clamp(40px, 6vw, 64px) !important;
  transform: none !important;
  padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px) !important;
  box-shadow: 0 24px 50px rgba(36, 43, 39, .18) !important;
}
html body .studio-footer .cms-footer-cta h2 { margin: 6px 0 0 !important; max-width: 18ch; }
.cms-footer-cta__lead { margin: var(--sp-3) 0 0; max-width: 52ch; color: var(--c-text); font-size: var(--fs-md); line-height: 1.55; }
.cms-footer-cta__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); }
html body .studio-footer .cms-footer-cta__alt { justify-content: center; background: rgba(255, 255, 255, .75) !important; color: var(--brand-dark) !important; }
html body .studio-footer .cms-footer-cta__alt:hover { background: #fff !important; }
@media (max-width: 767.98px) {
  html body .studio-footer { margin-top: 110px !important; }
  html body .studio-footer .studio-footer-banner.cms-footer-cta { grid-template-columns: 1fr; margin-top: -90px !important; }
}

/* Studio block: copy + real "at a glance" figures */
.cms-studio { grid-template-columns: 1fr; }
@media (min-width: 992px) { .cms-studio { grid-template-columns: 1.5fr 1fr; } }
.cms-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.cms-facts li { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--c-page); }
.cms-facts strong { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; color: var(--brand-dark); line-height: 1; }
.cms-facts span { color: var(--c-muted); font-size: var(--fs-sm); }

/* Team carousel cards */
.cms-member { height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); overflow: hidden; }
.cms-member__photo { position: relative; aspect-ratio: 4 / 5; background: var(--c-surface-sunken); overflow: hidden; }
.cms-member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform var(--t-base) var(--ease); }
.cms-member:hover .cms-member__photo img { transform: scale(1.03); }
.cms-member__initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 4rem; color: var(--brand-dark); background: var(--c-accent-soft); }
.cms-member__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.cms-member__name { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--brand-dark); }
.cms-member__role { margin: 4px 0 0; color: var(--c-muted); font-size: var(--fs-sm); }
.cms-member__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.cms-member__social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-page); color: var(--brand-dark); text-decoration: none; }
.cms-member__social a:hover { background: var(--brand-green); }
/* Stop the CTA's negative margin collapsing through the footer (keeps the offset). */
html body .studio-footer, html body .studio-footer > .studio-site-shell { display: flow-root; }

/* ==========================================================================
   29. FLAT CTA SHAPES — one-colour leaf (left) and rounded-petal flower
   (right), large and cropped by the panel edge. New filenames so cached
   detailed versions are never served.
   ========================================================================== */
html body :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::before {
  background: url("../images/cta-leaf-flat.svg") no-repeat center / contain !important;
  left: -30px; bottom: -60px; width: 270px; height: 370px; transform: rotate(-16deg);
}
html body :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::after {
  background: url("../images/cta-flower-flat.svg") no-repeat center / contain !important;
  right: -80px; top: -90px; width: 320px; height: 320px; opacity: 1; animation: none !important;
}
@media (max-width: 767.98px) {
  html body :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::before { width: 150px; height: 210px; left: -40px; bottom: -60px; }
  html body :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner)::after { width: 200px; height: 200px; right: -80px; top: -80px; }
}

/* ==========================================================================
   30. BLOG ARTICLE — contents rail, article typography, sidebar CTA and
   categories in the shared card/chip/pill styles.
   ========================================================================== */
.cms-read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; pointer-events: none; }
.cms-read-progress span { display: block; width: 0; height: 100%; background: var(--brand-green); }

.cms-post__grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "main" "side"; }
.cms-post__grid--no-toc { grid-template-areas: "main" "side"; }
.cms-post__toc { grid-area: toc; min-width: 0; }
.cms-post__main { grid-area: main; min-width: 0; padding: clamp(20px, 4vw, 48px); background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); }
.cms-post__side { grid-area: side; min-width: 0; }
@media (min-width: 992px) {
  .cms-post__grid { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "toc side" "main side"; grid-template-rows: auto 1fr; }
  .cms-post__grid--no-toc { grid-template-areas: "main side"; grid-template-rows: auto; }
  .cms-post__sticky { position: sticky; top: 100px; }
}
@media (min-width: 1200px) {
  .cms-post__grid { grid-template-columns: 240px minmax(0, 1fr) 300px; grid-template-areas: "toc main side"; grid-template-rows: auto; }
  .cms-post__grid--no-toc { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "main side"; }
  .cms-post__toc { position: sticky; top: 100px; align-self: start; }
}
.cms-post__sticky { display: grid; gap: var(--sp-4); }

/* Contents: white card, eyebrow label, green marker on the active entry */
.cms-toc { background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); }
.cms-toc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none; }
.cms-toc__head::-webkit-details-marker { display: none; }
.cms-toc__head .fa-chevron-down { color: var(--brand-dark); transition: transform var(--t-fast); }
.cms-toc[open] .cms-toc__head .fa-chevron-down { transform: rotate(180deg); }
.cms-toc__list { list-style: none; margin: 0; padding: 0 var(--sp-3) var(--sp-4); }
.cms-toc__list li { margin: 0; }
.cms-toc__list a { display: block; padding: 8px 12px; border: 0; border-radius: 10px; color: var(--c-muted); font: 500 14px/1.4 var(--font-sans); text-decoration: none; transition: background-color var(--t-fast), color var(--t-fast); }
.cms-toc__list .is-sub a { padding-left: 26px; font-size: 13px; }
.cms-toc__list a:hover { color: var(--brand-dark); background: var(--c-page); }
/* Active section: a soft green highlight, like the icon badges and chips */
.cms-toc__list a.is-active { color: var(--brand-dark); font-weight: 700; background: rgba(44, 221, 155, .18); }
@media (min-width: 1200px) {
  .cms-toc__head { cursor: default; padding-bottom: var(--sp-3); }
  .cms-toc__head .fa-chevron-down { display: none; }
  .cms-toc__list { padding-bottom: var(--sp-4); }
}

/* Article */
.cms-post__main .cms-article-hero { margin-bottom: var(--sp-4); }
.cms-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 var(--sp-5); padding: 0 0 var(--sp-4); list-style: none; border-bottom: 1px solid var(--c-border, #e6e8e7); color: var(--c-muted); font-size: var(--fs-sm); }
.cms-post__meta i { color: var(--brand-dark); margin-right: 4px; }
.cms-post__meta .cms-chip { min-height: 0; padding: 5px 12px; font-size: 13px; }
html body.page-public main .cms-post__body { max-width: 72ch; font-size: var(--fs-md, 17px); line-height: 1.75; color: var(--c-text); }
html body.page-public.page-inner main .cms-post__body :is(h2, h3) { font-family: var(--font-display) !important; color: var(--brand-dark); letter-spacing: -0.01em !important; line-height: 1.2; scroll-margin-top: 110px; }
html body.page-public.page-inner main .cms-post__body h2 { font-size: var(--fs-3xl) !important; margin-top: 1.8em; }
html body.page-public.page-inner main .cms-post__body h3 { font-size: var(--fs-2xl) !important; margin-top: 1.6em; }
html body.page-public.page-inner main .cms-post__body h4 { font: 700 var(--fs-xl)/1.25 var(--font-display) !important; letter-spacing: -0.005em; color: var(--brand-dark); margin-top: 1.5em; scroll-margin-top: 110px; }
.cms-post__body :is(ul, ol) { padding-left: 1.4em; }
.cms-post__body ul { list-style: disc; }
.cms-post__body ol { list-style: decimal; }
.cms-post__body li + li { margin-top: .4em; }
.cms-post__body li::marker { color: var(--brand-dark); }
.cms-post__body ul > li::marker { color: #14b87c; }
.cms-post__body a:not([class]) { color: var(--brand-dark); text-decoration: underline; text-decoration-color: var(--brand-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Quotes: a rounded grey card with a quote-mark badge (no side bar) */
html body.page-public main .cms-post__body blockquote {
  position: relative; margin: 1.8em 0; padding: 24px 26px 24px 84px;
  border: 0 !important; border-radius: var(--r-md); background: var(--c-page);
  font: 600 var(--fs-xl)/1.45 var(--font-display); font-style: normal !important; color: var(--brand-dark);
}
html body.page-public main .cms-post__body blockquote::before {
  content: "\f10d"; position: absolute; left: 24px; top: 22px;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(44, 221, 155, .18); color: var(--brand-dark);
  font: 900 15px/1 "Font Awesome 6 Free";
}
.cms-post__body blockquote p { margin: 0; }
.cms-post__body blockquote p + p { margin-top: .6em; }
@media (max-width: 575.98px) {
  html body.page-public main .cms-post__body blockquote { padding: 72px 20px 20px; }
  html body.page-public main .cms-post__body blockquote::before { left: 20px; top: 18px; }
}
.cms-post__body :is(table) { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cms-post__body :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--c-border, #e6e8e7); text-align: left; vertical-align: top; }
.cms-post__body th { background: var(--c-page); color: var(--brand-dark); font-weight: 700; }
.cms-post__body .cms-table-scroll { overflow-x: auto; margin: 1.4em 0; border-radius: var(--r-md); border: 1px solid var(--c-border, #e6e8e7); }
.cms-post__body img { border-radius: var(--r-md); }

/* Share row: round buttons like the footer socials */
html body .cms-post .cms-share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: var(--sp-6, 40px) 0 0; padding: var(--sp-4) 0 0; border: 0; border-top: 1px solid var(--c-border, #e6e8e7); background: none; }
html body .cms-post .cms-share-label { font: 700 13px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; color: var(--brand-dark); }
html body .cms-post .cms-share-buttons { display: flex; gap: 8px; }
html body .cms-post .cms-share-buttons :is(a, button) { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--c-page); color: var(--brand-dark); }
html body .cms-post .cms-share-buttons :is(a, button):hover { background: var(--brand-green); color: var(--brand-dark); }
.cms-post__comments { margin-top: var(--sp-6, 40px); }

/* Sidebar CTA: the colourful CTA panel in small, with the flat flower */
.cms-post-cta { position: relative; overflow: clip; padding: var(--sp-5); border-radius: var(--r-md); background: url("../images/grain.svg") 0 0 / 180px 180px repeat, var(--vivid-bg); box-shadow: var(--card-shadow); }
.cms-post-cta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 150px; height: 150px; background: url("../images/cta-flower-flat.svg") no-repeat center / contain; pointer-events: none; }
.cms-post-cta > * { position: relative; z-index: 1; }
.cms-post-cta__title { margin: var(--sp-2) 0 var(--sp-2); font: 700 var(--fs-2xl)/1.15 var(--font-display); color: var(--brand-dark); letter-spacing: -0.01em; }
.cms-post-cta p { margin: 0 0 var(--sp-4); color: var(--c-text); font-size: var(--fs-sm); line-height: 1.55; }

/* Sidebar categories as chips */
.cms-post-widget { padding: var(--sp-5); background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); }
.cms-post-widget__title { margin: 0 0 var(--sp-3); font: 700 var(--fs-xl)/1.2 var(--font-display); color: var(--brand-dark); }
.cms-post-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cms-post-cats .cms-chip { min-height: 0; padding: 6px 12px; font-size: 13px; }
.cms-post-cats .cms-muted { margin-left: 4px; font-size: 12px; }
.cms-grid--more { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
/* Article tables: one bordered scroll box, readable header row */
html body.page-public main .cms-post__body figure.table { margin: 1.4em 0 !important; padding: 0 !important; border: 0 !important; width: auto !important; float: none !important; }
html body.page-public main .cms-post__body .cms-table-scroll { margin: 1.4em 0; }
html body.page-public main .cms-post__body figure.table .cms-table-scroll { margin: 0; }
html body.page-public main .cms-post__body table { margin: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; min-width: 480px; }
html body.page-public main .cms-post__body :is(th, thead td) { background: var(--c-page) !important; color: var(--brand-dark) !important; font-weight: 700; }
html body.page-public main .cms-post__body :is(th, td) { border: 0 !important; border-bottom: 1px solid var(--c-border, #e6e8e7) !important; }
html body.page-public main .cms-post__body tr:last-child td { border-bottom: 0 !important; }
/* Footer CTA: the banner's eyebrow "span" rules must not reach the pill icon */
html body .studio-footer .studio-footer-banner .cms-pill-cta .cms-pill-cta__icon {
  display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important;
  border-radius: 50% !important; background: var(--brand-green) !important; color: var(--brand-dark) !important;
  font-size: 16px !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body .studio-footer .studio-footer-banner .cms-pill-cta .cms-pill-cta__icon i { font-size: 16px !important; line-height: 1 !important; color: var(--brand-dark) !important; }

/* ==========================================================================
   31. BLOG HOME — article grid with the shared sidebar (CTA, categories,
   most read). Chips above the grid only where the sidebar drops below.
   ========================================================================== */
.cms-blog-layout { display: grid; gap: var(--sp-6, 40px) var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.cms-blog-layout__main, .cms-blog-layout__side { min-width: 0; }
.cms-blog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.cms-blog-side-cats { display: none; }
@media (min-width: 992px) {
  .cms-blog-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .cms-blog-chips { display: none; }
  .cms-blog-side-cats { display: block; }
}
.cms-blog-popular { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.cms-blog-popular a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-3); align-items: center; text-decoration: none; color: var(--brand-dark); }
.cms-blog-popular img { width: 72px; height: 56px; object-fit: cover; border-radius: var(--r-sm, 8px); background: var(--c-surface-sunken); }
.cms-blog-popular strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 14px/1.35 var(--font-sans); }
.cms-blog-popular small { display: block; margin-top: 2px; color: var(--c-muted); font-size: 12px; }
.cms-blog-popular a:hover strong { text-decoration: underline; text-decoration-color: var(--brand-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Blog home sidebar stays pinned while the grid scrolls; never scrolls inside itself.
   A sidebar taller than the window is pinned by its bottom edge (sticky-fit.js). */
@media (min-width: 992px) {
  html body .cms-blog-layout { align-items: stretch; }
  html body .cms-blog-layout__main { align-self: start; }
  html body .cms-blog-layout__side .cms-post__sticky {
    position: sticky; top: 96px;
  }
}
/* Sidebars and the contents rail never show their own scrollbars */
html body :is(.cms-post__sticky, .cms-post__toc, .cms-toc, .cms-toc__list, .cms-blog-layout__side) { overflow: visible !important; max-height: none !important; }

/* ==========================================================================
   32. CTA STRIPS — compact calls to action between home sections.
   vivid: brand gradient + flat flower; dark: ink panel + flat leaf;
   light: white card with a green edge.
   ========================================================================== */
.cms-section--strip { padding-block: clamp(16px, 3vw, 28px); }
.cms-strip { position: relative; overflow: clip; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6, 40px); padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 48px); border-radius: var(--r-md); }
.cms-strip > * { position: relative; z-index: 1; }
.cms-strip__copy { flex: 1 1 420px; min-width: 0; }
.cms-strip__title { margin: 6px 0 0; font: 700 clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem)/1.12 var(--font-display); letter-spacing: -0.015em; color: var(--brand-dark); }
.cms-strip__text { margin: 8px 0 0; max-width: 58ch; font-size: var(--fs-md, 16px); line-height: 1.55; color: var(--c-text); }
.cms-strip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.cms-strip__link { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: 600 15px/1.2 var(--font-sans); color: var(--brand-dark); text-decoration: underline; text-decoration-color: var(--brand-green); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.cms-strip__link:hover { color: var(--brand-dark); text-decoration-thickness: 3px; }

.cms-strip--vivid { background: url("../images/grain.svg") 0 0 / 180px 180px repeat, var(--vivid-bg); }
.cms-strip--vivid::after { content: ""; position: absolute; right: -70px; top: -80px; width: 230px; height: 230px; background: url("../images/cta-flower-flat.svg") no-repeat center / contain; pointer-events: none; }

html body .cms-strip--dark { background: var(--brand-dark); }
.cms-strip--dark::before { content: ""; position: absolute; left: -30px; bottom: -80px; width: 170px; height: 240px; background: url("../images/cta-leaf-flat.svg") no-repeat center / contain; transform: rotate(-16deg); opacity: .7; pointer-events: none; }
html body .cms-strip--dark .cms-eyebrow { color: var(--brand-green); }
html body .cms-strip--dark :is(.cms-strip__title, .cms-strip__text) { color: #fff; }
html body .cms-strip--dark .cms-strip__text { color: rgba(255, 255, 255, .82); }
html body .cms-strip--dark .cms-pill-cta { background: var(--brand-green); border-color: var(--brand-green); color: var(--brand-dark); }
html body .cms-strip--dark .cms-pill-cta:hover { background: #fff; border-color: #fff; }
html body .cms-strip--dark .cms-pill-cta__icon { background: var(--brand-dark); color: var(--brand-green); }
html body .cms-strip--dark .cms-strip__link { color: #fff; }

.cms-strip--light { background: #fff; box-shadow: var(--card-shadow); border-left: 6px solid var(--brand-green); }

@media (max-width: 575.98px) {
  .cms-strip__actions { width: 100%; }
  .cms-strip__actions .cms-pill-cta { justify-content: flex-start; }
}

/* ==========================================================================
   33. SERVICE DETAIL — article card + sticky CTA sidebar (shared with blog),
   site FAQ panel, CTA strip and service tiles below.
   ========================================================================== */
html body.page-public main .cms-svc__intro { margin: 0 0 var(--sp-5); max-width: 60ch; font-size: var(--fs-xl); line-height: 1.5; color: var(--brand-dark); }
.cms-svc .cms-post__body > :first-child { margin-top: 0; }
.cms-svc__alt { margin: var(--sp-3) 0 0 !important; }
.cms-svc__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cms-svc__contact :is(a, button) { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-sm, 8px); background: none; color: var(--brand-dark); font: 500 14px/1.35 var(--font-sans); text-align: left; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.cms-svc__contact :is(a, button):hover { background: var(--c-page); }
.cms-svc__contact i { flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(44, 221, 155, .16); color: var(--brand-dark); }

/* ==========================================================================
   34. HELP CENTER, vCARD QR TOOL, HTML SITEMAP — shared cards, contents
   rail, FAQ panels, pills and the display serif.
   ========================================================================== */
/* Help: search card, sticky topics rail, one FAQ card per topic */
.cms-help__search { display: grid; gap: 10px; margin-bottom: var(--sp-5); padding: clamp(18px, 3vw, 28px); background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); }
.cms-help__field { position: relative; display: block; margin: 0; }
.cms-help__field i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--brand-dark); }
.cms-help__field input { width: 100%; min-height: 56px; padding: 0 20px 0 52px; border: 1.5px solid var(--c-border, #e6e8e7); border-radius: 999px; background: var(--c-page); font-size: var(--fs-md, 16px); color: var(--brand-dark); }
.cms-help__field input:focus { outline: 0; border-color: var(--brand-green); background: #fff; box-shadow: 0 0 0 4px rgba(44, 221, 155, .2); }
.cms-help__meta { margin: 0 4px; color: var(--c-muted); font-size: var(--fs-sm); }
.cms-help__layout { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
  .cms-help__layout { grid-template-columns: 250px minmax(0, 1fr); align-items: stretch; }
  .cms-help__topics .cms-toc { position: sticky; top: 96px; }
}
.cms-help__topics .cms-toc__head { cursor: default; }
.cms-help__topics .cms-toc__list a { display: flex; align-items: center; gap: 10px; }
.cms-help__topics .cms-toc__list a i { width: 18px; text-align: center; color: var(--brand-dark); }
.cms-help__topics .cms-help__count { margin-left: auto; }
.cms-help__count { color: var(--c-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 991.98px) {
  .cms-help__topics .cms-toc__list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--sp-4) var(--sp-4); }
  .cms-help__topics .cms-toc__list a { border: 1.5px solid var(--c-border, #e6e8e7); border-left-width: 1.5px; border-radius: 999px; padding: 7px 14px; }
  .cms-help__topics .cms-toc__list a.is-active { border-color: var(--brand-dark); }
}
.cms-help__main { display: grid; gap: var(--sp-5); min-width: 0; align-content: start; }
.cms-help__cat { scroll-margin-top: 100px; display: block !important; padding: clamp(20px, 3vw, 32px); background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); }
.cms-help__cat[hidden] { display: none !important; }
.cms-help__cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-4); }
.cms-help__cat-head h2 { margin: 0; font: 700 var(--fs-2xl)/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--brand-dark); }
.cms-help__cat-head .cms-help__count { margin-left: auto; }
.cms-help__cat-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: rgba(44, 221, 155, .16); color: var(--brand-dark); }
.cms-help__cat .hc-item[hidden] { display: none; }
.cms-help__empty { padding: clamp(32px, 6vw, 56px) 20px; text-align: center; background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); }
.cms-help__empty[hidden] { display: none; }
.cms-help__empty i { font-size: 1.8rem; color: var(--brand-dark); }
.cms-help__empty h2 { margin: 12px 0 6px; font: 700 var(--fs-xl)/1.2 var(--font-display); color: var(--brand-dark); }
.cms-help__empty p { margin: 0; color: var(--c-muted); }

/* vCard QR builder */
.vq-builder { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .vq-builder { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: stretch; } .vq-sticky { position: sticky; top: 96px; } }
.vq-sticky { display: grid; gap: var(--sp-3); }
.vq-card { overflow: hidden; background: #fff; border-radius: 20px; box-shadow: 0 18px 44px rgba(36, 43, 39, .12); }
.vq-card-band { position: relative; height: 84px; overflow: clip; background: url("../images/grain.svg") 0 0 / 180px 180px repeat, var(--vivid-bg); }
.vq-card-band::after { content: ""; position: absolute; right: -40px; top: -50px; width: 150px; height: 150px; background: url("../images/cta-flower-flat.svg") no-repeat center / contain; }
.vq-card-body { display: flex; flex-direction: column; gap: 18px; padding: 0 clamp(22px, 3vw, 28px) clamp(22px, 3vw, 28px); margin-top: -28px; position: relative; }
.vq-identity { display: flex; flex-direction: column; gap: 4px; min-height: 46px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(36, 43, 39, .08); }
.vq-name { font: 700 1.45rem/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--brand-dark); overflow-wrap: anywhere; }
.vq-role { color: var(--c-muted); font-size: .92rem; }
.vq-role b { color: var(--brand-dark); font-weight: 650; }
.vq-code { align-self: center; width: 100%; max-width: 240px; aspect-ratio: 1; display: grid; place-items: center; }
.vq-code :is(svg, canvas, img) { width: 100%; height: auto; }
.vq-caption { margin: 0; text-align: center; font: 700 11px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-dark); }
.vq-contactline { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 14px; border-top: 1px solid var(--c-border, #e6e8e7); }
.vq-contactline:empty { display: none; }
.vq-contactline span { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); font-size: .82rem; overflow-wrap: anywhere; }
.vq-contactline span i { color: var(--brand-dark); }
.vq-status { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--c-muted); font-size: .85rem; }
.vq-status i { color: #14855a; }
.vq-status.is-error, .vq-status.is-error i { color: #b02a37; }
.vq-downloads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vq-downloads :is(.cms-pill-cta, .cms-pill-ghost) { justify-content: center; width: 100%; }
.vq-downloads .cms-pill-cta { justify-content: flex-start; }
.vq-form { display: grid; gap: var(--sp-4); align-content: start; }
.vq-group { margin: 0; min-width: 0; padding: clamp(20px, 3vw, 28px); background: #fff; border: 0; border-radius: var(--r-md); box-shadow: var(--card-shadow); }
.vq-group-head { float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 0; font: 700 var(--fs-xl)/1.2 var(--font-display); color: var(--brand-dark); }
.vq-group-head + * { clear: both; }
.vq-group-num { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--brand-green); color: var(--brand-dark); font: 800 .85rem/1 var(--font-sans); }
.vq-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .vq-fields { grid-template-columns: 1fr; } }
.vq-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vq-field-wide { grid-column: 1 / -1; }
.vq-field label { color: var(--brand-dark); font-size: .85rem; font-weight: 650; }
.vq-field label em { color: var(--c-muted); font-style: normal; font-weight: 400; }
.vq-field label b { color: var(--brand-dark); }
.vq-field input { min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--c-border, #e6e8e7); border-radius: 12px; background: var(--c-page); font-size: .95rem; color: var(--brand-dark); }
.vq-field input:focus { outline: 0; border-color: var(--brand-green); background: #fff; box-shadow: 0 0 0 4px rgba(44, 221, 155, .2); }
.vq-field input.is-invalid { border-color: #b02a37; }
.vq-privacy { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--c-muted); font-size: .85rem; }
.vq-privacy i { color: var(--brand-dark); }

/* HTML sitemap: one card per section */
.cms-sitemap__total { margin: 0; align-self: end; }
.cms-sitemap__grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
.cms-sitemap__card { padding: clamp(20px, 3vw, 28px); background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); }
.cms-sitemap__title { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sp-3); font: 700 var(--fs-xl)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--brand-dark); }
.cms-sitemap__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: rgba(44, 221, 155, .16); font-size: 15px; }
.cms-sitemap__list { list-style: none; margin: 0; padding: 0; }
.cms-sitemap__list li + li { border-top: 1px solid var(--c-border, #e6e8e7); }
.cms-sitemap__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; color: var(--brand-dark); font-size: 15px; line-height: 1.4; text-decoration: none; }
.cms-sitemap__list a i { flex: 0 0 auto; font-size: 12px; opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast), transform var(--t-fast); }
.cms-sitemap__list a:hover { text-decoration: underline; text-decoration-color: var(--brand-green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cms-sitemap__list a:hover i, .cms-sitemap__list a:focus-visible i { opacity: 1; transform: none; }
.cms-sitemap__list .is-more a { font-weight: 700; }
.cms-sitemap__list .is-more a i { opacity: 1; transform: none; }

/* ==========================================================================
   35. SECTION BANDS — the page header is a white band; sections below
   alternate transparent (page grey) and white. CTA strips sit between
   bands and are not counted. On white bands, white cards switch to the
   grey fill so they still read as cards.
   ========================================================================== */
html body .cms-page-head { position: relative; background: #fff !important; }
html body .cms-page-head::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--c-border, #e6e8e7); }
html body.page-public main > .cms-section:nth-child(even of .cms-section:not(.cms-section--strip)) { background: #fff !important; }
/* Strips keep a little breathing room against white bands */
html body.page-public main > .cms-section--strip { background: transparent; }

/* Cards on white bands: grey fill, no shadow */
html body.page-public main > .cms-section:nth-child(even of .cms-section:not(.cms-section--strip)) :is(
  .cms-card, .cms-service-tile, .cms-step, .cms-faq__item, .cms-post-widget, .cms-toc,
  .cms-sitemap__card, .cms-help__search, .cms-help__cat, .cms-help__empty, .vq-group,
  .cms-member, .cms-facts li, .cms-post__main, .cms-why-card, .cms-testimonial, .cms-outcomes li
) { background-color: var(--c-page) !important; box-shadow: none !important; }
/* Panels that were white cards around a whole section merge into the white band */
html body.page-public main > .cms-section:nth-child(even of .cms-section:not(.cms-section--strip)) > .cms-container > .cms-panel-page {
  background: transparent !important; box-shadow: none !important; padding-left: 0; padding-right: 0;
}
/* Bands apply to every top-level section (older page markup too); the home hero keeps its own fill */
html body.page-public main > section:not(#cms-no-band):nth-child(odd of section:not(.cms-section--strip):not(.cms-hero)) { background: transparent !important; }
html body.page-public main > section:not(#cms-no-band):nth-child(even of section:not(.cms-section--strip):not(.cms-hero)) { background: #fff !important; }
html body.page-public main > section:nth-child(even of section:not(.cms-section--strip):not(.cms-hero)) :is(
  .cms-card, .cms-service-tile, .cms-step, .cms-faq__item, .cms-post-widget, .cms-toc,
  .cms-sitemap__card, .cms-help__search, .cms-help__cat, .cms-help__empty, .vq-group,
  .cms-member, .cms-facts li, .cms-post__main, .cms-why, .cms-outcomes li,
  .plan-card:not(.is-popular), .currency-switch, .plan-more-wrap, .job-card, .careers-filter
) { background-color: var(--c-page) !important; box-shadow: none !important; }
html body.page-public main > section:nth-child(even of section:not(.cms-section--strip):not(.cms-hero)) .currency-switch { background-color: var(--c-page) !important; }

/* ==========================================================================
   36. SHOP UX — save hearts, product actions, Saved page, cart drawer and
   a livelier card hover (marketplace patterns, in the brand style).
   ========================================================================== */
.cms-card__media { position: relative; }
.cms-fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--brand-dark);
  box-shadow: 0 2px 8px rgba(36, 43, 39, .14); cursor: pointer; font-size: 16px;
  transition: transform var(--t-fast), background-color var(--t-fast);
}
.cms-fav:hover { transform: scale(1.08); background: #fff; }
.cms-fav[aria-pressed="true"] { background: var(--brand-dark); color: var(--brand-green); }
.cms-fav.is-pop, .cms-pdp__action.is-pop { animation: cms-fav-pop .35s var(--ease, ease); }
@keyframes cms-fav-pop { 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cms-fav, .cms-fav.is-pop, .cms-pdp__action.is-pop { animation: none; transition: none; } }

/* Livelier product cards */
html body .cms-card--digital, html body .cms-card--physical { transition: transform var(--t-base) var(--ease, ease), box-shadow var(--t-base) var(--ease, ease); }
html body .cms-card--digital:hover, html body .cms-card--physical:hover { transform: translateY(-3px); }
html body :is(.cms-card--digital, .cms-card--physical):hover .cms-card__media img { transform: scale(1.05); }
html body :is(.cms-card--digital, .cms-card--physical) .cms-card__title a:hover { text-decoration: underline; text-decoration-color: var(--brand-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html body :is(.cms-card--digital, .cms-card--physical):hover { transform: none; } }

/* Product page: Save + Share */
.cms-pdp__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--sp-4); }
.cms-pdp__action { min-height: 42px; gap: 8px; padding: 6px 18px; font-size: 14px; }
.cms-pdp__action[aria-pressed="true"] { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.cms-pdp__action[aria-pressed="true"] i { color: var(--brand-green); }

/* Header: saved count badge only when something is saved */
.cms-saved-link { position: relative; }
.cms-saved-link .cms-cart-link__count[data-count="0"] { display: none; }

/* Saved page */
.cms-saved__note { margin: 0 0 var(--sp-4); }
.cms-saved__empty { display: grid; justify-items: center; gap: 10px; padding: clamp(32px, 6vw, 64px) 20px; text-align: center; background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); }
.cms-saved__empty[hidden] { display: none; }
.cms-saved__empty > i { font-size: 2rem; color: var(--brand-dark); }
.cms-saved__empty h2 { margin: 0; font: 700 var(--fs-2xl)/1.2 var(--font-display); color: var(--brand-dark); }
.cms-saved__empty p { margin: 0 0 8px; color: var(--c-muted); }

/* Cart drawer (native dialog sliding in from the right) */
.cms-cart-drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(420px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; background: #fff; color: var(--brand-dark); box-shadow: -18px 0 50px rgba(36, 43, 39, .18);
  display: none; flex-direction: column;
}
.cms-cart-drawer[open] { display: flex; animation: cms-drawer-in .28s var(--ease, ease); }
.cms-cart-drawer::backdrop { background: rgba(23, 29, 26, .45); }
@keyframes cms-drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cms-cart-drawer[open] { animation: none; } }
.cms-cart-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--c-border, #e6e8e7); }
.cms-cart-drawer__head h2 { margin: 0; font: 700 var(--fs-xl)/1.2 var(--font-display); }
.cms-cart-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--c-page); color: var(--brand-dark); cursor: pointer; }
.cms-cart-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 22px; }
.cms-cart-drawer__lines { list-style: none; margin: 0; padding: 0; }
.cms-cart-drawer__lines li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-border, #e6e8e7); }
.cms-cart-drawer__thumb { display: block; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--c-page); }
.cms-cart-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cms-cart-drawer__lines a { color: var(--brand-dark); text-decoration: none; }
.cms-cart-drawer__lines strong { display: block; font-size: 14px; line-height: 1.35; }
.cms-cart-drawer__lines small { display: block; margin-top: 2px; color: var(--c-muted); font-size: 12px; }
.cms-cart-drawer__lines span { font-weight: 700; font-size: 14px; white-space: nowrap; }
.cms-cart-drawer__error { margin: 16px 0; color: #b02a37; }
.cms-cart-drawer__foot { display: grid; gap: 10px; padding: 18px 22px 22px; border-top: 1px solid var(--c-border, #e6e8e7); }
.cms-cart-drawer__foot:empty { display: none; }
.cms-cart-drawer__subtotal { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: 15px; }
.cms-cart-drawer__foot :is(.cms-pill-cta, .cms-pill-ghost) { width: 100%; justify-content: center; }
.cms-cart-drawer__foot .cms-pill-cta { justify-content: flex-start; }
.cms-cart-drawer__foot .cms-strip__link { justify-self: center; }

/* ==========================================================================
   37. FEATURE CARDS — services, resources and key pages. Same family as the
   product/post cards: white, rounded, soft shadow, lift on hover; icon badge,
   serif title, muted text and an "explore" cue pinned to the bottom.
   ========================================================================== */
.cms-feature-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cms-feature-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: clamp(22px, 2.4vw, 30px); overflow: hidden;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow);
  color: var(--brand-dark); text-decoration: none;
  transition: transform var(--t-base) var(--ease, ease), box-shadow var(--t-base) var(--ease, ease), background-color var(--t-base);
}
.cms-feature-card:hover, .cms-feature-card:focus-visible { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); color: var(--brand-dark); }
.cms-feature-card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 8px;
  border-radius: 16px; background: rgba(44, 221, 155, .16); color: var(--brand-dark); font-size: 22px;
  transition: background-color var(--t-base), transform var(--t-base) var(--ease, ease);
}
.cms-feature-card:hover .cms-feature-card__icon { background: var(--brand-green); transform: rotate(-6deg); }
.cms-feature-card__title { margin: 0; font: 700 var(--fs-xl)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--brand-dark); }
.cms-feature-card__text { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.6; }
.cms-feature-card__more {
  display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px;
  font: 600 14px/1 var(--font-sans); color: var(--brand-dark);
}
.cms-feature-card__arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1.5px solid var(--brand-dark); border-radius: 50%; font-size: 12px;
  transition: background-color var(--t-base), color var(--t-base), transform var(--t-base) var(--ease, ease);
}
.cms-feature-card:hover .cms-feature-card__arrow { background: var(--brand-dark); color: #fff; transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .cms-feature-card, .cms-feature-card__icon, .cms-feature-card__arrow { transition: none; }
  .cms-feature-card:hover, .cms-feature-card:hover .cms-feature-card__icon, .cms-feature-card:hover .cms-feature-card__arrow { transform: none; }
}

/* On white bands: grey cards that turn white with a shadow on hover */
html body.page-public main > section:nth-child(even of section:not(.cms-section--strip):not(.cms-hero)) .cms-feature-card { background-color: var(--c-page); box-shadow: none; }
html body.page-public main > section:nth-child(even of section:not(.cms-section--strip):not(.cms-hero)) .cms-feature-card:hover { background-color: #fff; box-shadow: var(--card-shadow-hover); }

/* ==========================================================================
   38. PROJECT CAROUSEL — portfolio visuals in a swipeable 4:3 frame (whole
   design visible, never cropped), arrows, counter, thumbnails, lightbox.
   ========================================================================== */
html body .cms-detail__gallery.cms-pc { display: block; padding: var(--sp-3); }
.cms-pc__stage { position: relative; }
.cms-pc__track {
  display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  border-radius: var(--r-sm); background: var(--c-page);
}
.cms-pc__track::-webkit-scrollbar { display: none; }
.cms-pc__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 3; display: grid; place-items: center; }
html body .cms-pc__slide img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: transparent; }
.cms-pc__nav, .cms-pc__zoom, .cms-pc__count {
  position: absolute; z-index: 2; border: 0; color: var(--brand-dark); background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 10px rgba(36, 43, 39, .16);
}
.cms-pc__nav {
  top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 16px; transition: background-color var(--t-fast), opacity var(--t-fast);
}
.cms-pc__nav:hover { background: var(--brand-dark); color: #fff; }
.cms-pc__nav:disabled { opacity: 0; pointer-events: none; }
.cms-pc__nav--prev { left: 14px; }
.cms-pc__nav--next { right: 14px; }
.cms-pc__count { left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; font: 600 13px/1 var(--font-sans); }
.cms-pc__zoom { right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font: 600 13px/1 var(--font-sans); cursor: pointer; }
.cms-pc__zoom:hover { background: var(--brand-dark); color: #fff; }
.cms-pc__thumbs { display: flex; gap: 10px; margin: var(--sp-3) 0 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.cms-pc__thumbs button { display: block; width: 96px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--c-page); cursor: pointer; opacity: .65; transition: opacity var(--t-fast), border-color var(--t-fast); }
.cms-pc__thumbs button:hover { opacity: 1; }
.cms-pc__thumbs button[aria-current="true"] { opacity: 1; border-color: var(--brand-dark); }
html body .cms-pc__thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@media (max-width: 575.98px) {
  .cms-pc__nav { width: 38px; height: 38px; }
  .cms-pc__nav--prev { left: 8px; } .cms-pc__nav--next { right: 8px; }
  .cms-pc__thumbs button { width: 72px; }
}

/* Lightbox */
.cms-pc-lightbox { max-width: 94vw; max-height: 92vh; padding: 0; border: 0; border-radius: var(--r-md); background: #fff; overflow: auto; }
.cms-pc-lightbox::backdrop { background: rgba(23, 29, 26, .82); }
.cms-pc-lightbox img { display: block; max-width: 94vw; height: auto; }
.cms-pc-lightbox__close { position: sticky; top: 12px; float: right; margin: 12px 12px -58px 0; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--brand-dark); box-shadow: 0 2px 10px rgba(36, 43, 39, .2); cursor: pointer; }

/* ==========================================================================
   39. PRODUCT PAGE — buy box as a card, perks as icon rows, info and
   details cards, checklist, site FAQ style, sticky buy bar on phones.
   ========================================================================== */
.cms-pdp__card { padding: clamp(22px, 2.6vw, 32px); background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); }
.cms-pdp__card h1 { margin: 6px 0 8px; }
.cms-pdp__card .cms-lead { margin: 0; font-size: var(--fs-md); }
.cms-pdp__pricing { margin: var(--sp-4) 0 var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-border, #e6e8e7); }
.cms-pdp__price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cms-pdp__perks { list-style: none; margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--c-border, #e6e8e7); display: grid; gap: 12px; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-text); }
.cms-pdp__perks li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; }
.cms-pdp__perk-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(44, 221, 155, .18); color: var(--brand-dark); font-size: 14px; }
.cms-pdp__perks strong { color: var(--brand-dark); }
.cms-pdp__perks a { overflow-wrap: anywhere; }

/* Info + details */
.cms-pdp__box { padding: clamp(22px, 2.6vw, 32px); background: #fff; border-radius: var(--r-md); box-shadow: var(--card-shadow); align-self: start; }
.cms-pdp__heading { margin: 0 0 var(--sp-3); font: 700 var(--fs-xl)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--brand-dark); }
.cms-pdp__box > .cms-pdp__heading ~ .cms-pdp__heading { margin-top: var(--sp-6); }
.cms-pdp__box .cms-prose { font-size: var(--fs-md); }
.cms-pdp__included { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.cms-pdp__included li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--c-page); color: var(--brand-dark); font-weight: 500; font-size: var(--fs-sm); }
.cms-pdp__check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-green); color: var(--brand-dark); font-size: 11px; }
.cms-pdp__box .cms-faq__list { display: grid; gap: 10px; }
.cms-pdp__specs .cms-spec { width: 100%; }
@media (min-width: 992px) { .cms-pdp__specs { position: sticky; top: calc(var(--header-h, 72px) + 24px); } }

/* On the white band the cards turn grey, inner tiles white */
html body.page-public main > section:nth-child(even of section:not(.cms-section--strip):not(.cms-hero)) :is(.cms-pdp__box, .cms-pdp__card) { background: var(--c-page); box-shadow: none; }
html body.page-public main > section:nth-child(even of section:not(.cms-section--strip):not(.cms-hero)) .cms-pdp__included li { background: #fff; }

/* Sticky buy bar on phones */
.cms-pdp-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 999px; background: #fff;
  box-shadow: 0 10px 30px rgba(36, 43, 39, .22);
}
.cms-pdp-bar[hidden] { display: none; }
.cms-pdp-bar__info { min-width: 0; display: grid; }
.cms-pdp-bar__info strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--brand-dark); }
.cms-pdp-bar__info span { font: 700 15px/1.2 var(--font-sans); color: var(--brand-dark); }
.cms-pdp-bar .cms-pill-cta { flex: 0 0 auto; }
@media (min-width: 992px) { .cms-pdp-bar { display: none !important; } }
/* Lift the chat button above the sticky buy bar */
body.has-pdp-bar #cms-cw { bottom: 92px !important; transition: bottom var(--t-base); }
/* Portfolio carousel sits directly on the page: no white panel around it */
html body .cms-detail__gallery.cms-pc { padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0; }
html body .cms-detail__gallery.cms-pc .cms-pc__track { border-radius: var(--r-md); }

/* ==========================================================================
   40. CLEAN-UP — product info without grey cards, CTAs without shapes,
   product cards with one preview height.
   ========================================================================== */
/* Product info: open layout, no card fills; columns balanced 7 / 5 with a divider */
html body.page-public main .cms-pdp-info :is(.cms-pdp__box, .cms-pdp__specs) {
  background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0;
}
@media (min-width: 992px) {
  html body.page-public main .cms-pdp-info .cms-pdp { align-items: start; }
  html body.page-public main .cms-pdp-info .cms-pdp__specs { padding-left: var(--sp-6) !important; border-left: 1px solid var(--c-border, #e6e8e7); }
}
html body.page-public main .cms-pdp-info .cms-pdp__included li {
  background: transparent !important; border: 1.5px solid var(--c-border, #e6e8e7);
}
html body.page-public main .cms-pdp-info .cms-faq__item { background: var(--c-page) !important; }

/* CTA backgrounds: gradient only — no leaf, flower or sparkles */
html body :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner, .cms-post-cta)::before,
html body :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner, .cms-post-cta)::after { content: none !important; display: none !important; }
html body :is(.cms-cta, .cms-cta-band > .cms-container, .studio-footer .studio-footer-banner) {
  background:
    radial-gradient(55% 140% at 0% 30%, rgba(77, 188, 218, .85) 0%, rgba(77, 188, 218, 0) 62%),
    radial-gradient(45% 110% at 75% 0%, rgba(44, 221, 155, .55) 0%, rgba(44, 221, 155, 0) 70%),
    radial-gradient(45% 120% at 100% 100%, rgba(44, 221, 155, .45) 0%, rgba(44, 221, 155, 0) 70%),
    linear-gradient(100deg, #9bdaeb 0%, #e9f6f9 36%, #f5f5f5 58%, #d5f7ea 100%) !important;
}
html body .cms-post-cta { background: var(--vivid-bg) !important; }

/* Product cards: one 4:3 preview for digital and physical items */
html body .cms-card--physical .cms-card__media { aspect-ratio: 4 / 3; }

/* ==========================================================================
   41. FORM FOCUS — one clean line: the field's own border turns ink on
   focus (no glow ring, no extra outline). Errors keep their red border.
   ========================================================================== */
html body.page-public :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="color"]),
  select, textarea, .form-control, .form-select, .cms-input, .cms-select
):is(:focus, :focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--brand-dark) !important;
}
html body.page-public :is(input, select, textarea, .form-control, .form-select):is(.is-invalid, [aria-invalid="true"]):is(:focus, :focus-visible) { border-color: #b02a37 !important; }

/* Process steps: outlined cards, no fill (any band) */
html body.page-public main .cms-step:not(#cms-no-step),
html body.page-public main > section .cms-step:not(#cms-no-step) {
  background: transparent !important;
  box-shadow: none !important;
  border: 1.5px solid var(--c-border, #e6e8e7) !important;
  transition: border-color var(--t-base);
}
html body.page-public main .cms-step:not(#cms-no-step):hover { border-color: var(--brand-dark) !important; }

/* "Why us" and feature cards: outlined, no fill (any band) — same as the process steps */
html body.page-public main :is(.cms-why, .cms-feature-card):not(#cms-no-outline) {
  background: transparent !important;
  box-shadow: none !important;
  border: 1.5px solid var(--c-border, #e6e8e7) !important;
}
html body.page-public main :is(.cms-why, .cms-feature-card):not(#cms-no-outline):hover,
html body.page-public main .cms-feature-card:not(#cms-no-outline):focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  border-color: var(--brand-dark) !important;
}

/* Steps, "why us" and feature cards: white with a border on every band (never grey) */
html body.page-public main :is(.cms-step, .cms-why, .cms-feature-card):not(#cms-no-white),
html body.page-public main :is(.cms-why, .cms-feature-card):not(#cms-no-white):hover {
  background: #fff !important;
}
html body.page-public main > section .cms-step:not(#cms-no-white) { background: #fff !important; }

/* Card text areas: a little more breathing room (posts, products, saved) */
html body .cms-card__body { padding: 18px 20px 22px; gap: 8px; }
/* All cards: a touch more padding where they were tight */
html body.page-public :is(.cms-step, .cms-why, .cms-service-tile, .cms-post-widget, .cms-post-cta, .cms-side-box):not(#cms-no-pad) { padding: 28px !important; }
html body.page-public .cms-faq__item summary { padding: 18px 20px; }
html body.page-public .cms-faq__item .cms-faq__answer { padding-left: 20px; padding-right: 20px; }
@media (max-width: 575.98px) {
  html body.page-public :is(.cms-step, .cms-why, .cms-service-tile, .cms-post-widget, .cms-post-cta, .cms-side-box):not(#cms-no-pad) { padding: 22px !important; }
}

/* ==========================================================================
   42. PILL BUTTONS — outlined, no icon circle: ink border and text,
   filling ink on hover (header, hero, footer CTA, shop, drawer, etc.).
   ========================================================================== */
html body :is(.cms-pill-cta, .cms-pill-cta--lg):not(#cms-no-outline) {
  gap: 0; padding: 10px 24px !important;
  background: transparent !important;
  border: 1.5px solid var(--brand-dark) !important;
  color: var(--brand-dark) !important;
  box-shadow: none !important;
  justify-content: center;
}
html body :is(.cms-pill-cta, .cms-pill-cta--lg):not(#cms-no-outline):hover,
html body :is(.cms-pill-cta, .cms-pill-cta--lg):not(#cms-no-outline):focus-visible {
  background: var(--brand-dark) !important;
  color: #fff !important;
}
html body .cms-pill-cta .cms-pill-cta__icon { display: none !important; }
html body .studio-footer .studio-footer-banner .cms-pill-cta .cms-pill-cta__icon:not(#cms-no-icon) { display: none !important; }
/* Hero button pair: no arrow on the outlined "Our work" either */
html body .cms-hero .cms-pill-ghost > i { display: none !important; }
html body .cms-hero .cms-pill-ghost { padding: 10px 24px; }

/* ==========================================================================
   43. LEGAL PAGES — privacy, terms, licence, refunds on the blog layout.
   ========================================================================== */
html body.page-public main .cms-legal__body .cms-legal__intro { font-size: var(--fs-lg); line-height: 1.6; color: var(--brand-dark); margin-bottom: var(--sp-5); }
html body.page-public main .cms-legal__body h2:first-of-type { margin-top: 0; }
.cms-legal__updated { display: flex; align-items: center; gap: 8px; margin: var(--sp-6, 40px) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--c-border, #e6e8e7); color: var(--c-muted); font-size: var(--fs-sm); }
.cms-legal__links { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: 4px; }
.cms-legal__links a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--brand-dark); font-weight: 500; font-size: 15px; text-decoration: none; transition: background-color var(--t-fast); }
.cms-legal__links a:hover { background: var(--c-page); }
.cms-legal__links a[aria-current="page"] { background: rgba(44, 221, 155, .18); font-weight: 700; }
.cms-legal__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: rgba(44, 221, 155, .18); font-size: 13px; }
.cms-legal__links a[aria-current="page"] .cms-legal__icon { background: #fff; }
.cms-legal__cookies { width: 100%; justify-content: center; gap: 8px; min-height: 44px; font-size: 14px; }
.cms-legal__help p { margin: 0; color: var(--c-text); font-size: var(--fs-sm); line-height: 1.6; }
.cms-legal__help .cms-link { overflow-wrap: anywhere; }

/* ==========================================================================
   44. COOKIE SETTINGS — white dialog, serif title, outlined options,
   ink primary button (matches the banner and the rest of the site).
   ========================================================================== */
html body .studio-cookie-dialog {
  background: #fff !important; color: var(--brand-dark) !important;
  border: 1.5px solid var(--c-border, #e6e8e7); border-radius: 20px !important;
  box-shadow: 0 30px 70px rgba(36, 43, 39, .22) !important;
  padding: clamp(22px, 4vw, 32px) !important; max-width: 480px;
}
html body .studio-cookie-dialog .studio-cookie-kicker { display: none !important; }
html body .studio-cookie-dialog .studio-cookie-title {
  margin: 0 40px 8px 0 !important; color: var(--brand-dark) !important;
  font: 700 var(--fs-2xl)/1.15 var(--font-display) !important; letter-spacing: -0.015em;
}
html body .studio-cookie-dialog > p { margin: 0 0 var(--sp-4) !important; color: var(--c-text) !important; font-size: var(--fs-sm) !important; line-height: 1.6 !important; }
html body :is(.studio-cookie-dialog, .studio-cookie-card) p a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html body .studio-cookie-dialog .studio-cookie-options { display: grid; gap: 10px; }
html body .studio-cookie-dialog .studio-cookie-option {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px !important; background: #fff !important; border: 1.5px solid var(--c-border, #e6e8e7) !important; border-radius: 14px !important; cursor: pointer;
}
html body .studio-cookie-dialog .studio-cookie-option:hover { border-color: var(--brand-dark) !important; }
html body .studio-cookie-dialog .studio-cookie-option strong { display: block; color: var(--brand-dark) !important; font-size: 15px; }
html body .studio-cookie-dialog .studio-cookie-option small { display: block; margin-top: 2px; color: var(--c-muted) !important; font-size: 13px; line-height: 1.5; }
html body .studio-cookie-dialog .studio-cookie-close {
  background: #fff !important; border: 1.5px solid var(--c-border, #e6e8e7) !important; color: var(--brand-dark) !important; box-shadow: none !important;
}
html body .studio-cookie-dialog .studio-cookie-close:hover { border-color: var(--brand-dark) !important; }
html body .studio-cookie-dialog .studio-cookie-modal-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: var(--sp-4); }
html body .studio-cookie-dialog .studio-cookie-btn {
  min-height: 44px; padding: 10px 20px !important; border-radius: 999px !important; font: 600 14px/1 var(--font-sans) !important; box-shadow: none !important; cursor: pointer;
}
html body .studio-cookie-dialog .studio-cookie-btn-primary { background: var(--brand-dark) !important; border: 1.5px solid var(--brand-dark) !important; color: #fff !important; }
html body .studio-cookie-dialog .studio-cookie-btn-primary:hover { background: #343d38 !important; }
html body .studio-cookie-dialog .studio-cookie-btn-muted { background: #fff !important; border: 1.5px solid var(--brand-dark) !important; color: var(--brand-dark) !important; }
html body .studio-cookie-dialog .studio-cookie-btn-muted:hover { background: var(--c-page) !important; }
html body .studio-cookie-dialog .studio-cookie-btn-link { margin-right: auto; background: none !important; border: 0 !important; padding: 10px 4px !important; color: var(--brand-dark) !important; text-decoration: underline; text-decoration-color: var(--brand-green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 480px) {
  html body .studio-cookie-dialog .studio-cookie-modal-actions { justify-content: stretch; }
  html body .studio-cookie-dialog .studio-cookie-modal-actions .studio-cookie-btn:not(.studio-cookie-btn-link) { flex: 1 1 0; }
  html body .studio-cookie-dialog .studio-cookie-btn-link { width: 100%; order: 3; margin: 0; }
}

/* =========================================================================
   Placeholder-only forms: project enquiry (3 steps) and book-a-call dialog.
   Labels stay in the markup for screen readers (.cms-visually-hidden).
   ========================================================================= */
.pq .pq__step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.pq .pq__step[hidden] { display: none; }
.pq .pq__title { float: none; width: 100%; margin: 0 0 6px; padding: 0; font-family: var(--font-display, inherit); font-size: var(--fs-2xl); line-height: var(--lh-snug); color: var(--c-ink); }
.pq .cms-input, .pq .cms-textarea { width: 100%; min-height: 52px; font-size: var(--fs-md); }
.pq .cms-textarea { min-height: 160px; }
.pq .pq__row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pq .pq__row { grid-template-columns: 1fr 1fr; } }
.pq [aria-invalid="true"] { border-color: var(--c-error); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }

.pq__progress { display: grid; gap: 8px; margin-bottom: var(--sp-5); }
.pq__progress[hidden] { display: none; }
.pq__count { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.pq__bar { display: block; height: 4px; border-radius: var(--r-pill); background: var(--c-line); overflow: hidden; }
.pq__bar > span { display: block; height: 100%; width: 33.34%; background: var(--c-ink); border-radius: inherit; transition: width .25s ease; }

.pq__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pq__chip { appearance: none; border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-text); border-radius: var(--r-pill); padding: 8px 14px; font: 500 var(--fs-sm)/1.2 var(--font-sans); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.pq__chip:hover { border-color: var(--c-ink); color: var(--c-ink); }
.pq__chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.pq__chip:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

.pq__drop { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px; border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); color: var(--c-muted); font-size: var(--fs-sm); cursor: pointer; transition: border-color .15s, color .15s; }
.pq__drop:hover, .pq__drop:focus-within { border-color: var(--c-ink); color: var(--c-ink); }
.pq__drop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pq__error { margin: var(--sp-3) 0 0; color: var(--c-error); font-size: var(--fs-sm); font-weight: 600; }
.pq__error[hidden] { display: none; }
.pq__alert { margin-bottom: var(--sp-4); }
.pq__nav { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: var(--sp-5); }
.pq__nav [hidden] { display: none; }
.pq__nav > :last-child, .pq__nav [data-pq-next], .pq__nav [data-pq-submit] { margin-left: auto; }
.pq__nav .cms-btn--primary[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Book-a-call: placeholder select and contact-method segments */
.cms-select--ph:invalid { color: var(--c-faint); }
.cms-select--ph option { color: var(--c-ink); }
.cms-seg { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 var(--sp-4); min-width: 0; align-self: center; }
.cms-seg label { position: relative; display: inline-flex; cursor: pointer; }
.cms-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cms-seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); transition: border-color .15s, background-color .15s, color .15s; }
.cms-seg label:hover span { border-color: var(--c-ink); color: var(--c-ink); }
.cms-seg input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.cms-seg input:focus-visible + span { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.cms-dialog__grid > .cms-field:has(.cms-select--ph), .cms-dialog__grid > .cms-seg { grid-column: 1 / -1; }
/* Phones/tablets: the form comes first, the "what happens next" notes after it. */
@media (max-width: 991.98px) { .project-inquiry-grid > .project-inquiry-form { order: -1; } }

/* Home hero on phones: no sparkle doodle or location pin (the badge wraps). */
@media (max-width: 767.98px) {
  html body .cms-hero__inner::before { display: none; }
  html body .cms-hero__badge i { display: none; }
  html body .cms-hero__badge { justify-content: center; text-align: center; }
}

/* Footer on phones: clear space between the CTA card and the logo. */
@media (max-width: 767.98px) {
  html body .studio-footer .studio-footer-grid { padding-top: var(--sp-6); }
}

/* Start a project: no panel behind the page, only the white form card. */
html body.page-public.page-inner main > .project-inquiry-page:not(#cms-no-band) {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
html body.page-public .project-inquiry-page .project-inquiry-section { padding-block: var(--sp-7) var(--section-y); background: transparent; }
html body.page-public .project-inquiry-page .project-inquiry-section > .container { width: calc(100% - 2 * var(--gutter)); max-width: var(--container); padding-inline: 0; margin-inline: auto; }
html body.page-public .project-inquiry-page .project-inquiry-summary { padding: 0; }
html body.page-public .project-inquiry-page .project-inquiry-summary .inquiry-title { margin-top: 0; }
html body.page-public .project-inquiry-page .project-inquiry-form { background: #fff; }

/* Card meta: view count with an eye icon */
.cms-card__meta .cms-card__stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cms-card__meta .cms-card__stat i { font-size: .9em; opacity: .8; }
.cms-card__meta > .cms-card__stat { margin-left: auto; }
.cms-card__meta > .cms-card__stat::before { content: none; }

/* Start a project: "What happens next" as filled check circles; the two
   columns sit centred against each other on desktop. */
.inquiry-next--checks { list-style: none; padding-left: 0; display: grid; gap: 14px; font-size: var(--fs-md); }
.inquiry-next--checks li { position: relative; padding-left: 36px; }
.inquiry-next--checks li + li { margin-top: 0; }
.inquiry-next--checks li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-green, #2cdd9b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23242b27' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
@media (min-width: 992px) {
  html body.page-public .project-inquiry-page .project-inquiry-grid { align-items: center; }
  html body.page-public .project-inquiry-page .project-inquiry-summary { position: static; }
}

/* Article sidebar: related service, flat inside its widget (no card in a card). */
.cms-side-service { display: grid; gap: 10px; color: var(--c-text); text-decoration: none; }
.cms-side-service__head { display: flex; align-items: center; gap: 12px; }
.cms-side-service__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-accent-soft); color: var(--brand-dark); font-size: 17px; transition: background-color .15s; }
.cms-side-service__head strong { color: var(--c-ink); font-size: var(--fs-lg); line-height: 1.25; }
.cms-side-service__text { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cms-side-service__more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.cms-side-service__more i { transition: transform .15s; }
.cms-side-service:hover .cms-side-service__icon { background: var(--brand-green); }
.cms-side-service:hover .cms-side-service__more i { transform: translateX(3px); }
.cms-side-service:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* Card meta stays on one line: the category gives way (ellipsis) first. */
.cms-card__meta { flex-wrap: nowrap; align-items: center; min-width: 0; white-space: nowrap; }
.cms-card__meta > span { flex: none; }
.cms-card__meta > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inquiry-next--checks li::before {
  background: var(--brand-dark, #242b27) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* =========================================================================
   Article comments and reactions
   ========================================================================= */
.cmts { border-top: 1px solid var(--c-line); padding-top: var(--sp-6); }
.cmts__title { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-4); font: 700 var(--fs-2xl)/1.2 var(--font-display); color: var(--c-ink); }
.cmts__title span { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-pill); background: var(--c-surface-sunken); font: 600 var(--fs-sm)/1 var(--font-sans); color: var(--c-text); }
.cmts__form { display: grid; gap: 12px; margin-bottom: var(--sp-6); }
.cmts__form .cms-textarea { min-height: 120px; }
.cmts__row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cmts__row { grid-template-columns: 1fr 1fr; } }
.cmts__replying { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--c-text); }
.cmts__replying[hidden] { display: none; }
.cmts__replying strong { color: var(--c-ink); }
.cmts__cancel { border: 0; background: none; padding: 0; font: 600 var(--fs-sm)/1 var(--font-sans); color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cmts__captcha:empty { display: none; }
.cmts__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cmts__foot .cms-btn { margin-left: auto; }
.cmts__foot .cms-btn[aria-busy="true"] { opacity: .7; }
.cmts__msg { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.cmts__msg.is-error { color: var(--c-error); font-weight: 600; }
.cmts__msg.is-ok { color: var(--c-success); font-weight: 600; }
.cmts__empty { margin: 0; padding: var(--sp-5); border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); text-align: center; color: var(--c-muted); font-size: var(--fs-sm); }

.cmt-thread { padding: var(--sp-5) 0; border-top: 1px solid var(--c-line); }
.cmt-thread:first-child { border-top: 0; padding-top: 0; }
.cmt-replies { display: grid; gap: var(--sp-4); margin: var(--sp-4) 0 0 22px; padding-left: 26px; border-left: 2px solid var(--c-line); }
.cmt-replies:empty { display: none; }
.cmt { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; scroll-margin-top: 120px; }
.cmt--reply { grid-template-columns: 36px minmax(0, 1fr); }
.cmt__avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-surface-sunken); color: var(--c-ink); font: 700 var(--fs-md)/1 var(--font-sans); }
.cmt--reply .cmt__avatar { width: 36px; height: 36px; font-size: var(--fs-sm); }
.cmt--team .cmt__avatar { background: var(--brand-dark, #242b27); color: #fff; }
.cmt__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cmt__name { color: var(--c-ink); font-size: var(--fs-md); }
.cmt__badge { padding: 2px 8px; border-radius: var(--r-pill); background: var(--brand-green, #2cdd9b); color: var(--brand-dark, #242b27); font-size: var(--fs-xs); font-weight: 700; }
.cmt__date { color: var(--c-muted); font-size: var(--fs-sm); }
.cmt__to { margin: 2px 0 0; color: var(--c-muted); font-size: var(--fs-sm); }
.cmt__to i { font-size: .8em; margin-right: 2px; }
.cmt__body { margin-top: 6px; color: var(--c-text); line-height: 1.65; overflow-wrap: anywhere; }
.cmt__body p { margin: 0 0 .6em; }
.cmt__body p:last-child { margin-bottom: 0; }
.cmt__body ul, .cmt__body ol { margin: 0 0 .6em; padding-left: 1.3em; }
.cmt__body a { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--brand-green, #2cdd9b); text-underline-offset: 3px; }
.cmt__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.cmt__reacts { display: flex; flex-wrap: wrap; gap: 6px; }
.cmt-react { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 10px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: transparent; font-size: var(--fs-sm); line-height: 1; cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
.cmt-react:hover { border-color: var(--c-ink); }
.cmt-react:active { transform: scale(.94); }
.cmt-react:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.cmt-react b { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text); }
.cmt-react b[hidden] { display: none; }
.cmt-react.is-on { border-color: var(--c-ink); background: var(--c-ink); }
.cmt-react.is-on b { color: #fff; }
.cmt__reply { border: 0; background: none; padding: 4px 0; font: 600 var(--fs-sm)/1 var(--font-sans); color: var(--c-ink); cursor: pointer; }
.cmt__reply:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmt.is-new { animation: cmt-new 2.4s ease-out; border-radius: var(--r-md); }
@keyframes cmt-new { from { background: var(--c-accent-soft); box-shadow: 0 0 0 8px var(--c-accent-soft); } to { background: transparent; box-shadow: 0 0 0 8px transparent; } }
@media (max-width: 575.98px) {
  .cmt-replies { margin-left: 8px; padding-left: 14px; }
  .cmt { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
  .cmt__avatar { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .cmt.is-new { animation: none; } .cmt-react { transition: none; } }