/* ==========================================================================
   CREATIVE MARTIN STUDIOS — DESIGN CONSISTENCY LAYER
   --------------------------------------------------------------------------
   This file loads AFTER style.css and is the single source of truth for the
   shared component vocabulary. Every rule here is defined exactly once —
   if a component looks inconsistent somewhere, fix the token or rule HERE,
   never by adding another override elsewhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — one palette, one spacing rhythm, one radius scale.
   -------------------------------------------------------------------------- */
:root {
  /* ---- Neutral base — one warm-stone greyscale, nothing cool or blue. ---- */
  --cms-surface: #ffffff;
  --cms-surface-soft: #eef2f5;   /* warm off-white for sunken sections */
  --cms-surface-sunken: #f4f2ef;
  --cms-line: #e9e6e1;           /* hairline border */
  --cms-line-strong: #ddd9d2;
  --cms-ink: #1a1a18;            /* near-black — headings + primary buttons */
  --cms-text: #33312e;           /* body copy */
  --cms-muted: #7a756e;          /* secondary text, captions */
  --cms-faint: #a8a29a;          /* placeholders, disabled */

  /* ---- ONE accent: green, kept. Two tones only — a bright fill and a
          legible deep tone for text/icons on white. No second hue, ever. ---- */
  --cms-green: #2cdd9b;          /* ONE green — fills, eyebrows, kickers, icons, links */
  --cms-green-soft: rgba(44, 221, 155, .12);
  --cms-green-ring: rgba(44, 221, 155, .22);

  /* Accent surfaces keep the brand gradient (cyan -> green). Solid fallback
     first for old browsers, then the gradient. */
  --cms-accent-solid: #4dbcda;
  --cms-accent-gradient: linear-gradient(90deg, rgba(77, 188, 218, 1) 0%, rgba(44, 220, 157, 1) 100%);
  --cms-yellow: #4dbcda;         /* legacy alias */

  /* ---- Geometry: one radius scale, one soft shadow pair. ---- */
  --cms-radius-lg: 16px;
  --cms-radius-md: 12px;
  --cms-radius-sm: 8px;
  --cms-shadow-sm: 0 6px 20px rgba(26, 26, 24, .05);
  --cms-shadow-md: 0 18px 44px rgba(26, 26, 24, .07);
  --cms-page-gutter: 20px;
  --cms-section-pad: clamp(76px, 9vw, 136px);

  /* ---- Re-point the legacy style.css tokens (loaded earlier) onto the new
          system. Because theme.css loads last, these win, so every studio-*,
          bootstrap and legacy component re-skins from one place. ---- */
  --brand: #2cdd9b;
  --brand-dark: #20b989;
  --brand-soft: rgba(44, 221, 155, .12);
  --brand-ring: rgba(44, 221, 155, .22);
  --text-main: #1a1a18;
  --text-muted: #7a756e;
  --surface: #ffffff;
  --surface-soft: #eef2f5;
  --border: #e9e6e1;
  --shadow-sm: 0 6px 20px rgba(26, 26, 24, .05);
  --shadow-md: 0 18px 44px rgba(26, 26, 24, .07);
  --shadow-lg: 0 30px 70px rgba(26, 26, 24, .10);

  --primary: #2cdd9b;
  --primary-dark: #23b97f;
  --dark: #1a1a18;

  /* ---- The studio-* set (inner-page hero/breadcrumb + many section
          backgrounds) folds onto the neutral system and warms the cool page
          background. One green only — the stray amber/cyan solids collapse to
          the brand green (the accent gradient itself is defined above). ---- */
  --studio-ink: #1a1a18;
  --studio-ink-soft: #33312e;
  --studio-charcoal: #1a1a18;
  --studio-green: #2cdd9b;
  --studio-green-deep: #2cdd9b;
  --studio-mint: #bdeeda;
  --studio-amber: #2cdd9b;
  --studio-amber-soft: rgba(44, 221, 155, .14);
  --studio-yellow: #2cdd9b;
  --studio-cream: #eef2f5;
  --studio-sand: #f4f2ef;
  --studio-paper: #ffffff;
  --studio-page: #eef2f5;
  --studio-white: #ffffff;
  --studio-grey-button: #f9f9f9;
  /* One content measure, defined once here (style.css declares it 4x with
     conflicting values). This is the single source of truth. */
  --studio-content: 1240px;
  --studio-frame: 1480px;
  --studio-muted: #7a756e;
  --studio-line: rgba(26, 26, 24, .12);
  --studio-line-strong: #ddd9d2;

  /* Home-page section aliases (used by the flattened hero/support surfaces). */
  --home-green: #2cdd9b;
  --home-green-deep: #20b989;
  --home-dark-deep: #1a1a18;
}

/* --------------------------------------------------------------------------
   2. SECTION TITLES — the kicker/eyebrow + heading pattern, identical on
      every page. Covers the different class names already in the templates.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.section-title, .studio-eyebrow, .studio-kicker, .pricing-kicker, .career-eyebrow, .aw-kicker) {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--cms-green);
  display: inline-flex;
  font-size: .76rem;
  font-weight: 900;
  gap: .55rem;
  letter-spacing: .12em;
  line-height: 1;
  margin-bottom: 14px;
  padding: 0;
  text-transform: uppercase;
}

body.page-public :not(#cms) :is(.studio-title, .lg-title, .pricing-title, .careers-list-title, .aw-title, .category-heading) {
  color: var(--cms-ink);
  letter-spacing: -.045em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   3. CARDS — one card look: white surface, hairline border, soft radius.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.job-card, .sitemap-card, .studio-testimonial-card, .careers-empty, .filter-wrap, .project-inquiry-form, .mb-faq-item) {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-lg);
}

body.page-public :not(#cms) :is(.careers-open-pitch, .portfolio-detail-cta-inner, .help-contact-box) {
  background: var(--cms-surface-soft);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-lg);
}

/* --------------------------------------------------------------------------
   4. BUTTONS — primary is ink, hover green; ghost is outlined.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.btn-primary, .studio-button-primary, .filter-btn[type="submit"], .btn-mb) {
  background: var(--cms-ink);
  border: 1px solid var(--cms-ink);
  border-radius: 999px;
  box-shadow: none;
  color: #fff;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

body.page-public :not(#cms) :is(.btn-primary, .studio-button-primary, .filter-btn[type="submit"], .btn-mb):hover {
  background: var(--cms-green);
  border-color: var(--cms-green);
  color: var(--cms-ink);
  transform: translateY(-1px);
}

body.page-public :not(#cms) :is(.btn-outline-primary, .studio-button-ghost) {
  background: transparent;
  border: 1px solid var(--cms-ink);
  border-radius: 999px;
  color: var(--cms-ink);
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
}

body.page-public :not(#cms) :is(.btn-outline-primary, .studio-button-ghost):hover {
  background: var(--cms-ink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. ACCORDIONS — help, home FAQ, pricing FAQ, service FAQ share one look.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.cms-accordion-item, .studio-process-item, .accordion-item) {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-md);
  overflow: hidden;
}

body.page-public :not(#cms) :is(.cms-accordion-trigger, .accordion-button) {
  color: var(--cms-ink);
  font-weight: 650;
}

body.page-public :not(#cms) :is(.cms-accordion-trigger, .accordion-button):focus-visible {
  box-shadow: 0 0 0 4px var(--cms-green-soft);
  outline: 2px solid var(--cms-green);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   6. MOBILE GUTTERS — every page keeps the same breathing room at the
      edges. Wins over the legacy width-calc gutter attempts by loading last.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body.page-public.route-portfolio .portfolio-detail > .container,
  body.page-public.route-pricing_detail .pricing-detail-section > .container,
  body.page-public.route-services .svc-detail-section > .container,
  body.page-public.route-blog .shopify-article-page > .container {
    padding-left: var(--cms-page-gutter);
    padding-right: var(--cms-page-gutter);
    width: 100%;
  }

  /* Full-bleed sections keep content off the screen edge. */
  body.page-public :not(#cms) :is(.aw-section, .portfolio-detail-cta, .careers-open-pitch) {
    margin-left: 0;
    margin-right: 0;
  }

  body.page-public .studio-shell,
  body.page-public .inner-breadcrumb-shell {
    padding-left: var(--cms-page-gutter);
    padding-right: var(--cms-page-gutter);
  }

  /* Breadcrumb block: everything hard-left on mobile (the kicker carried
     a stray indent). */
  body.page-public :not(#cms) :is(.inner-breadcrumb-kicker) {
    margin-left: 0;
    margin-right: 0;
  }

  body.page-public :not(#cms) :is(.inner-breadcrumb-layout, .inner-breadcrumb-copy, .inner-breadcrumb-trail) {
    justify-content: flex-start;
    justify-items: start;
    text-align: left;
  }

  /* Breadcrumb trail: one line, long current-page titles truncate with an
     ellipsis instead of wrapping under the hero. */
  body.page-public .inner-breadcrumb-trail .breadcrumb {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: hidden;
  }

  body.page-public :not(#cms) :is(.inner-breadcrumb-trail .breadcrumb-item) {
    white-space: nowrap;
  }

  body.page-public :not(#cms) :is(.inner-breadcrumb-trail .breadcrumb-item.active) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Blog sidebar category lists read as a left-aligned column on mobile,
     never centered. */
  body.page-public :not(#cms) :is(.ark-cat-list, .ark-category-list) {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  body.page-public :not(#cms) :is(.ark-cat-link, .ark-cat-item) {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   7. ARTICLE META + SHARE BAR — blog detail furniture.
   -------------------------------------------------------------------------- */
.cms-article-meta {
  border-bottom: 1px solid var(--cms-line);
  color: var(--cms-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .86rem;
  gap: 8px 22px;
  margin-bottom: 26px;
  padding-bottom: 16px;
}

.cms-article-meta span {
  align-items: center;
  display: inline-flex;
  gap: .45rem;
}

.cms-article-meta i {
  color: var(--cms-green);
}

.cms-share-bar {
  align-items: center;
  border-top: 1px solid var(--cms-line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
  padding-top: 22px;
}

.cms-share-label {
  color: var(--cms-ink);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cms-share-buttons {
  display: flex;
  gap: 8px;
}

.cms-share-buttons a,
.cms-share-buttons button {
  align-items: center;
  background: var(--cms-surface-soft);
  border: 1px solid var(--cms-line);
  border-radius: 999px;
  color: var(--cms-ink);
  display: inline-flex;
  font-size: 1.05rem;
  height: 42px;
  justify-content: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  width: 42px;
}

.cms-share-buttons a:hover,
.cms-share-buttons button:hover {
  background: var(--cms-ink);
  border-color: var(--cms-ink);
  color: #fff;
}

.cms-share-copied {
  color: var(--cms-green);
  font-size: .84rem;
  font-weight: 600;
}

/* Service-detail sidebar: share actions use the same round chips as the
   blog share bar, and related-service rows sit on symmetric padding. */
body.page-public :not(#cms) :is(.svc-share-actions) {
  display: flex;
  gap: 8px;
}

body.page-public :not(#cms) :is(.svc-share-actions a, .svc-share-actions button) {
  align-items: center;
  background: var(--cms-surface-soft);
  border: 1px solid var(--cms-line);
  border-radius: 999px;
  color: var(--cms-ink);
  display: inline-flex;
  font-size: 1.05rem;
  height: 42px;
  justify-content: center;
  padding: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  width: 42px;
}

body.page-public :not(#cms) :is(.svc-share-actions a, .svc-share-actions button):hover {
  background: var(--cms-ink);
  border-color: var(--cms-ink);
  color: #fff;
}

body.page-public :not(#cms) :is(.svc-related-link) {
  padding: 10px 12px;
}

/* --------------------------------------------------------------------------
   8. MEGA MENU PROMO SLOT — the ad card in the Services menu. Four
      templates (minimal / dark / warm / image), managed from the dashboard.
   -------------------------------------------------------------------------- */
/* The promo takes the grid's "discover" slot: full-height left column on
   desktop (services + CTA stack on the right), first block in the stacked
   mobile menu. Without a promo the menu collapses to services + CTA. */
body.page-public .studio-mega-promo {
  grid-area: discover;
}

body.page-public .studio-mega-grid:not(.has-promo) {
  grid-template-areas:
    "services"
    "cta";
  grid-template-columns: 1fr;
}

.studio-mega-promo {
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  overflow: hidden;
  padding: 22px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.studio-mega-promo:hover {
  box-shadow: var(--cms-shadow-md);
  transform: translateY(-2px);
}

.studio-mega-promo-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.studio-mega-promo-copy small {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.studio-mega-promo-copy strong {
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.studio-mega-promo-body {
  font-size: .85rem;
  line-height: 1.5;
}

.studio-mega-promo-copy em {
  align-items: center;
  display: inline-flex;
  font-size: .84rem;
  font-style: normal;
  font-weight: 700;
  gap: .4rem;
  margin-top: 8px;
}

/* Any non-image template with a photo: photo as background under a dark
   linear overlay, copy overlaid in white. */
.studio-mega-promo.has-bg {
  background-image:
    linear-gradient(180deg, rgba(17, 26, 21, .28) 0%, rgba(17, 26, 21, .55) 45%, rgba(17, 26, 21, .94) 100%),
    var(--promo-image);
  background-position: center;
  background-size: cover;
  border: 0;
  color: #fff;
}

.studio-mega-promo.has-bg small,
.studio-mega-promo.has-bg em {
  color: var(--cms-green);
}

.studio-mega-promo.has-bg .studio-mega-promo-body {
  color: rgba(255, 255, 255, .78);
}

/* Template: minimal — white, hairline border. */
.studio-mega-promo-minimal {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  color: var(--cms-ink);
}

.studio-mega-promo-minimal small,
.studio-mega-promo-minimal em {
  color: var(--cms-green);
}

.studio-mega-promo-minimal .studio-mega-promo-body {
  color: var(--cms-muted);
}

/* Template: dark — ink surface, green accents. */
.studio-mega-promo-dark {
  background: var(--cms-ink);
  color: #fff;
}

.studio-mega-promo-dark small,
.studio-mega-promo-dark em {
  color: var(--cms-green);
}

.studio-mega-promo-dark .studio-mega-promo-body {
  color: rgba(255, 255, 255, .72);
}

/* Template: warm — the gradient highlight card. */
.studio-mega-promo-warm {
  background: var(--cms-accent-solid);
  background: var(--cms-accent-gradient);
  color: var(--cms-ink);
}

.studio-mega-promo-warm small,
.studio-mega-promo-warm em {
  color: var(--cms-ink);
}

.studio-mega-promo-warm .studio-mega-promo-body {
  color: rgba(17, 26, 21, .72);
}

/* Template: image — photo on top, caption below. */
.studio-mega-promo-image {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  color: var(--cms-ink);
  justify-content: flex-start;
  padding: 0;
}

.studio-mega-promo-media {
  aspect-ratio: 16 / 9;
  display: block;
  overflow: hidden;
}

.studio-mega-promo-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.studio-mega-promo-image .studio-mega-promo-copy {
  padding: 16px 18px 18px;
}

.studio-mega-promo-image small,
.studio-mega-promo-image em {
  color: var(--cms-green);
}

.studio-mega-promo-image .studio-mega-promo-body {
  color: var(--cms-muted);
}

/* --------------------------------------------------------------------------
   9. ACCENT SURFACES — every surface that used to be yellow now carries the
      brand gradient (cyan -> green). Solid fallback first for old browsers.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(
  .studio-footer-banner,
  .studio-mega-cta,
  .studio-feature-card-amber,
  .studio-hero-availability,
  .studio-journal-meta span:first-child,
  .studio-management-tile-dark i,
  .portfolio-category,
  .help-contact-box,
  .error-code-card,
  .ark-badge-cyan
) {
  background: var(--cms-accent-solid);
  background: var(--cms-accent-gradient);
  color: var(--cms-ink);
}

/* Pseudo-elements can't live inside :is(); the label underline gets the
   gradient separately. */
body.page-public .studio-mega-label::after {
  background: var(--cms-accent-solid);
  background: var(--cms-accent-gradient);
}

/* The CTA button stays ink so it reads against the gradient card. */
body.page-public :not(#cms) :is(.studio-mega-cta a) {
  background: var(--cms-ink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   10. QR STUDIO — the vCard QR tool: one form, one live code, downloads.
       Kept deliberately as quiet as the Help Center.
   -------------------------------------------------------------------------- */
/* Hero band is plain white — no cream fill, no boxed border, no circles. */
body.page-public.route-qrcode .qrcode-hero-section {
  background: var(--cms-surface);
}

body.page-public.route-qrcode .qrcode-hero-section > .container {
  border: 0;
  border-radius: 0;
}

body.page-public.route-qrcode .qrcode-hero-section::before,
body.page-public.route-qrcode .qrcode-hero-section::after {
  content: none;
}

body.page-public.route-qrcode :not(#cms) :is(.qr-studio-hero) {
  margin-inline: auto;
  max-width: 640px;
  padding-block: clamp(24px, 4vw, 48px) clamp(20px, 3vw, 36px);
  text-align: center;
}

body.page-public.route-qrcode :not(#cms) :is(.qr-studio-hero .section-title) {
  justify-content: center;
  width: 100%;
}

.qr-studio-section {
  padding-block: clamp(20px, 3vw, 40px) clamp(48px, 6vw, 80px);
}

/* Full container width so the form + code align with the other sections. */
.qr-studio {
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr);
  margin-inline: auto;
  max-width: none;
}

@media (max-width: 900px) {
  .qr-studio {
    grid-template-columns: 1fr;
  }
}

.qr-studio-form {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-lg);
  padding: clamp(22px, 3vw, 34px);
}

.qr-studio-heading {
  color: var(--cms-ink);
  font-size: 1.1rem;
  font-weight: 750;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}

.qr-studio-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 560px) {
  .qr-studio-grid {
    grid-template-columns: 1fr;
  }
}

.qr-studio-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qr-studio-field-wide {
  grid-column: 1 / -1;
}

.qr-studio-field span {
  color: var(--cms-ink);
  font-size: .82rem;
  font-weight: 650;
}

.qr-studio-field span b {
  color: var(--cms-green);
}

.qr-studio-field span em {
  color: var(--cms-muted);
  font-style: normal;
  font-weight: 400;
}

.qr-studio-field input {
  background: var(--cms-surface-soft);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-sm);
  font-size: .95rem;
  padding: 11px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.qr-studio-field input:focus {
  border-color: var(--cms-green);
  box-shadow: 0 0 0 4px var(--cms-green-soft);
  outline: 0;
}

.qr-studio-field input.is-invalid {
  border-color: #c94f4f;
}

.qr-studio-note {
  color: var(--cms-muted);
  font-size: .82rem;
  margin: 18px 0 0;
}

.qr-studio-output {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 100px;
}

.qr-studio-code-card {
  align-items: center;
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3vw, 32px);
}

.qr-studio-code {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 280px;
  width: 100%;
}

.qr-studio-code svg {
  height: auto;
  max-width: 280px;
  width: 100%;
}

.qr-studio-caption {
  color: var(--cms-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.qr-studio-status {
  align-items: center;
  color: var(--cms-muted);
  display: flex;
  font-size: .85rem;
  gap: .5rem;
  justify-content: center;
}

.qr-studio-status i {
  color: var(--cms-green);
}

.qr-studio-status.is-error,
.qr-studio-status.is-error i {
  color: #c94f4f;
}

.qr-studio-downloads {
  display: grid;
  gap: 10px;
}

.btn-download {
  align-items: center;
  background: transparent;
  border: 1px solid var(--cms-ink);
  border-radius: 999px;
  color: var(--cms-ink);
  display: inline-flex;
  font-weight: 700;
  gap: .45rem;
  justify-content: center;
  padding: 11px 22px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.btn-download-primary {
  background: var(--cms-ink);
  color: #fff;
}

.btn-download:hover {
  background: var(--cms-green);
  border-color: var(--cms-green);
  color: var(--cms-ink);
}

body.page-public.route-qrcode :not(#cms) :is(.qrcode-benefit-card) {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-lg);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   HELP CENTER — centered hero + search, topic cards, shared accordion.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.help-hero-centered) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-inline: auto;
  max-width: 640px;
  padding-block: clamp(24px, 4vw, 48px) clamp(20px, 3vw, 36px);
  padding-inline: 0;
  text-align: center;
}

body.page-public :not(#cms) :is(.help-hero-centered .section-title) {
  justify-content: center;
  width: 100%;
}

.help-hero-search {
  margin: 22px auto 0;
  max-width: 520px;
  position: relative;
}

.help-hero-search i {
  color: var(--cms-muted);
  left: 18px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

body.page-public :not(#cms) :is(.help-hero-search .search-box) {
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: 999px;
  font-size: 1rem;
  padding: 14px 22px 14px 46px;
}

body.page-public :not(#cms) :is(.help-hero-search .search-box):focus {
  border-color: var(--cms-green);
  box-shadow: 0 0 0 4px var(--cms-green-soft);
  outline: 0;
}

body.page-public :not(#cms) :is(.help-topic-cards) {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-inline: auto;
  max-width: 760px;
  padding-block: 10px 26px;
}

body.page-public :not(#cms) :is(.help-topic-card) {
  align-items: center;
  background: var(--cms-surface);
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-md);
  color: var(--cms-ink);
  display: flex;
  flex-direction: column;
  font-size: .92rem;
  font-weight: 700;
  gap: 10px;
  justify-content: center;
  min-height: 96px;
  padding: 18px 12px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.page-public :not(#cms) :is(.help-topic-card i) {
  color: var(--cms-green);
  font-size: 1.5rem;
}

body.page-public :not(#cms) :is(.help-topic-card):hover {
  border-color: var(--cms-green);
  box-shadow: var(--cms-shadow-sm);
  transform: translateY(-2px);
}

body.page-public :not(#cms) :is(.help-topic-card.active) {
  border-color: var(--cms-green);
  box-shadow: 0 0 0 4px var(--cms-green-soft);
}

/* --------------------------------------------------------------------------
   SITEMAP — quiet column index: group headings + plain links, no cards.
   -------------------------------------------------------------------------- */
.cms-sitemap-section {
  padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px);
}

.cms-sitemap-grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 48px);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.cms-sitemap-group h2 {
  color: var(--cms-ink);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -.01em;
  margin: 0 0 16px;
}

.cms-sitemap-group ul {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cms-sitemap-group a {
  color: var(--cms-muted);
  font-size: .95rem;
  line-height: 1.45;
  text-decoration: none;
  transition: color .18s ease;
}

.cms-sitemap-group a:hover {
  color: var(--cms-green);
}

/* --------------------------------------------------------------------------
   11. SERVICE / FEATURE ICONS — one icon treatment: brand-green disc,
       white glyph.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.studio-feature-icon, .svc-clean-icon, .svc-related-ico) {
  background: var(--cms-green);
  border: 0;
  border-radius: 999px;
  color: #fff;
}

body.page-public :not(#cms) :is(.studio-feature-icon i, .svc-clean-icon i, .svc-related-ico i) {
  color: #fff;
}

/* Chat agent photo: real person, round crop. */
.support-agent-photo {
  border-radius: 999px;
  height: 44px;
  object-fit: cover;
  width: 44px;
}

/* --------------------------------------------------------------------------
   12. COOKIE TOGGLES — consent checkboxes render as on/off switches.
   -------------------------------------------------------------------------- */
.studio-cookie-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background: #cbd5e1;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
  height: 26px;
  margin: 0;
  position: relative;
  transition: background .2s ease;
  width: 48px;
}

.studio-cookie-option input[type="checkbox"]::after {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
  content: "";
  height: 20px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform .2s ease;
  width: 20px;
}

.studio-cookie-option input[type="checkbox"]:checked {
  background: var(--cms-green);
}

.studio-cookie-option input[type="checkbox"]:checked::after {
  transform: translateX(22px);
}

.studio-cookie-option input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.studio-cookie-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cms-green);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   11. FOCUS VISIBILITY — one focus style everywhere.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(a, button, input, select, textarea, summary):focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--cms-green);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   12. PRICING FILTER TABS — match the portfolio filter buttons exactly:
       plain container, outlined pill, ink active state.
   -------------------------------------------------------------------------- */
body.page-public.route-pricing :not(#cms) :is(.pricing-tabs) {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  padding: 0;
}

body.page-public.route-pricing :not(#cms) :is(.pricing-tabs .tab-btn) {
  align-items: center;
  background: none;
  border: 2px solid var(--cms-line);
  border-radius: var(--cms-radius-sm);
  box-shadow: none;
  color: var(--cms-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 900;
  justify-content: center;
  line-height: 1;
  min-height: 44px;
  min-width: 92px;
  padding: 0 18px;
  text-align: center;
  width: auto;
}

body.page-public.route-pricing :not(#cms) :is(.pricing-tabs .tab-btn.is-active),
body.page-public.route-pricing :not(#cms) :is(.pricing-tabs .tab-btn:hover) {
  background: var(--cms-ink);
  border-color: var(--cms-ink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   13. FOOTER SOCIAL ICONS — no border, larger glyph.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(.studio-footer-socials a) {
  border: 0;
  font-size: 1rem;
}

body.page-public :not(#cms) :is(.studio-footer-socials a i) {
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   14. QR BENEFITS / FEATURES — no wrapping card, plain feature cards whose
       body text matches the site body copy.
   -------------------------------------------------------------------------- */
body.page-public.route-qrcode :not(#cms) :is(.qrcode-benefits-section > .container) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}

/* Centered content, height driven by content (no forced 390px square). */
body.page-public.route-qrcode :not(#cms) :is(.qrcode-benefit-card) {
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  text-align: center;
}

body.page-public.route-qrcode :not(#cms) :is(.qrcode-benefit-card p) {
  color: var(--cms-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   15. BREADCRUMB — minimal typography only. No box, no background, no pill:
       a small deep-green kicker, a calm page title, then a micro uppercase
       trail with faint slash separators. Nothing shouts.
   -------------------------------------------------------------------------- */
/* Kicker: small uppercase, in the brand green. */
body.page-public.page-inner .breadcrumb-section p.inner-breadcrumb-kicker {
  color: var(--cms-green);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Page title: confident, not loud — lighter weight, gentler tracking, capped
   size so headings never dominate the page. */
body.page-public.page-inner .breadcrumb-section h1 {
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.05;
}

/* Trail: strip Bootstrap's chrome to bare micro-labels. */
body.page-public.page-inner .breadcrumb-section .inner-breadcrumb-trail .breadcrumb {
  background: transparent;
  border: 0;
  gap: 0;
  margin: 0;
  padding: 0;
}

body.page-public.page-inner .breadcrumb-section .inner-breadcrumb-trail .breadcrumb-item,
body.page-public.page-inner .breadcrumb-section .inner-breadcrumb-trail .breadcrumb-item a,
body.page-public.page-inner .breadcrumb-section .inner-breadcrumb-trail .breadcrumb-item.active {
  color: var(--cms-muted);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

body.page-public.page-inner .breadcrumb-section .inner-breadcrumb-trail .breadcrumb-item a {
  transition: color .18s ease;
}

body.page-public.page-inner .breadcrumb-section .inner-breadcrumb-trail .breadcrumb-item a:hover,
body.page-public.page-inner .breadcrumb-section .inner-breadcrumb-trail .breadcrumb-item.active {
  color: var(--cms-ink);
}

/* Separator: a faint hairline slash — never the accent colour. */
body.page-public.page-inner .breadcrumb-section .inner-breadcrumb-trail .breadcrumb-item + .breadcrumb-item::before {
  color: var(--cms-faint);
  content: "/";
  padding: 0 .55rem;
}

/* --------------------------------------------------------------------------
   16. SECTION TITLES — one size for every in-page section heading. The site
       had per-route overrides that made the About page headings jump from
       ~52px to ~87px. The leading argument in :is() is a specificity anchor
       (raises the whole rule to match those route overrides) so this single
       size wins everywhere it applies — the page's own H1 stays the sole
       larger heading (set on the breadcrumb above).
   -------------------------------------------------------------------------- */
body.page-public.route-about :is(
  .about-intro-section .lg-title,   /* anchor: forces (0,2,0) inside :is() */
  .lg-title,
  .why-title,
  .how-flow-title,
  .team-headline,
  .adobe-heading,
  .category-heading
) {
  font-size: clamp(1.9rem, 3vw, 2.85rem);
  letter-spacing: -.03em;
  line-height: 1.12;
}

/* --------------------------------------------------------------------------
   17. WHITESPACE — sections breathe. `py-5` (Bootstrap, 48px) is the site's
       dominant section rhythm; lift it so content pages feel calm and open.
       Higher specificity + !important clears Bootstrap's own !important.
   -------------------------------------------------------------------------- */
body.page-public :is(section, .container-fluid).py-5 {
  padding-block: clamp(56px, 7vw, 104px) !important;
}

/* --------------------------------------------------------------------------
   18. BUTTONS — one silhouette. Every button variant shares the pill radius
       and smooth transition; the outline family (secondary) shares one look.
       Colours of context buttons (light/white on dark bands) are left alone.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(
  .btn-primary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark,
  .btn-light, .btn-white, .btn-muted, .btn-dark,
  .studio-button-primary, .studio-button-ghost, .studio-button-light,
  .adobe-btn, .btn-mb, .header-pitch-btn
) {
  border-radius: 999px;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

/* Every outline-style button reads as the one secondary treatment. */
body.page-public :not(#cms) :is(.btn-outline-secondary, .btn-outline-dark) {
  background: transparent;
  border: 1px solid var(--cms-ink);
  color: var(--cms-ink);
  font-weight: 700;
}

body.page-public :not(#cms) :is(.btn-outline-secondary, .btn-outline-dark):hover {
  background: var(--cms-ink);
  color: #fff;
}

/* Text button: quiet link with a green underline that inks on hover. */
body.page-public :not(#cms) :is(.btn-view-all, .btn-back, .btn-reply-link) {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--cms-ink);
  font-weight: 650;
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   19. CARDS — one radius across content cards. Each card keeps its own
       surface/border/content; only the corner scale is standardised so the
       grid reads as one family.
   -------------------------------------------------------------------------- */
body.page-public :not(#cms) :is(
  .adobe-card, .studio-feature-card, .why-card, .why-us-card,
  .svc-clean-card, .svc-program-card, .svc-main-card, .ptf-card, .aw-card,
  .pay-card, .plan-card, .pricing-side-card, .pricing-info-card,
  .legal-side-card, .legal-content-card, .career-apply-card,
  .summary-card, .team-card, .blog-card
) {
  border-radius: var(--cms-radius-lg);
}

/* --------------------------------------------------------------------------
   20. INNER-PAGE HERO — the breadcrumb band becomes a photo hero: a cover
       image under a dark vertical gradient, with a green kicker + white title
       + light trail sitting bottom-left. The image comes from
       --inner-hero-image (set per route inline in breadcrumb.php); the value
       here is the fallback. Higher specificity than the route-level
       `.breadcrumb-section { background: transparent }` rules.
   -------------------------------------------------------------------------- */
body.page-public.page-inner .breadcrumb-section.inner-breadcrumb {
  --inner-hero-image: url('../images/hero-1.jpg');
  align-items: flex-end;
  background-color: #14130f;
  background-image:
    linear-gradient(180deg, rgba(18, 17, 14, .30) 0%, rgba(18, 17, 14, .58) 46%, rgba(18, 17, 14, .90) 100%),
    var(--inner-hero-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0;
  display: flex;
  margin-bottom: 0;
  min-height: clamp(230px, 32vw, 360px);
  overflow: hidden;
  padding-block: clamp(38px, 6vw, 66px);
}

/* Title: calm size, white, faint shadow for legibility on any photo. */
body.page-public.page-inner .breadcrumb-section.inner-breadcrumb h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-shadow: 0 1px 24px rgba(0, 0, 0, .28);
}

body.page-public.page-inner .breadcrumb-section.inner-breadcrumb p.inner-breadcrumb-kicker {
  color: var(--cms-green);
}

body.page-public.page-inner .breadcrumb-section.inner-breadcrumb .inner-breadcrumb-trail :is(.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active) {
  color: rgba(255, 255, 255, .72);
}

body.page-public.page-inner .breadcrumb-section.inner-breadcrumb .inner-breadcrumb-trail .breadcrumb-item a:hover,
body.page-public.page-inner .breadcrumb-section.inner-breadcrumb .inner-breadcrumb-trail .breadcrumb-item.active {
  color: #fff;
}

body.page-public.page-inner .breadcrumb-section.inner-breadcrumb .inner-breadcrumb-trail .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, .45);
}

/* --------------------------------------------------------------------------
   21. SERVICES INTRO HEADING — centered eyebrow + title (the side paragraph
       was removed), overriding the two-column grid layout.
   -------------------------------------------------------------------------- */
body.page-public.route-services .services-grid-heading--center {
  display: block;
  margin-inline: auto;
  max-width: 720px;
  text-align: center;
}

body.page-public.route-services .services-grid-heading--center .svc-content-label {
  display: block;
}