/* ══════════════════════════════════════════════════════════════════════════════════
   MESAscale · light theme · /services
   Section logic (dark page → light page):
     hero ............ pearl glass slabs on white (the dark slabs, re-lit), ink split button
     services list ... open on white, hairlines, big names keep the difference-blend trick (it inverts itself on white)
     why ............. white, hairlines, accent washes at 7%, accent text darkened so it clears AA
     approach ........ ink on white, the shared ink pill + underline link
     process ......... soft gray card (supporting surface); tonal ladder white < gray < black island
     fit / the offer . white, like the page: a supporting gray card (who it is for) beside a lifted white offer card with the one ember button; a hairline signature across the offer
     faq ............. outline tabs, white cards with a hairline
   ══════════════════════════════════════════════════════════════════════════════════ */

/* ───── hero ───── */
html[data-theme="light"] .sh { background: #fff; color: var(--lt-ink); }
html[data-theme="light"] .sh-bg { background: #fff; }
html[data-theme="light"] .sh-slab {
  background: linear-gradient(162deg, #fbfbfc 0%, #e9e9ed 24%, #cfcfd6 46%, #ececf0 58%, #fbfbfc 74%, #d9d9df 100%);
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, .10), inset 0 2px 0 rgba(255, 255, 255, 1), 0 60px 120px rgba(14, 14, 14, .16);
}
html[data-theme="light"] .sh-slab::after { background: linear-gradient(112deg, transparent 32%, rgba(14, 14, 14, .045) 46%, rgba(14, 14, 14, .012) 51%, transparent 64%); }
html[data-theme="light"] .sh-veil { background: radial-gradient(55% 50% at 50% 48%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .5) 62%, rgba(255, 255, 255, .2) 100%); }
html[data-theme="light"] .sh-h { color: var(--lt-ink); }
html[data-theme="light"] .sh-sub { color: #0d0d0d; font-family: 'Archivo', 'Mona Sans', sans-serif; font-size: 15.7px; font-weight: 400; line-height: 1.54; letter-spacing: .02em; }
html[data-theme="light"] .sh-btn { color: #fff; }
html[data-theme="light"] .sh-btn-l, html[data-theme="light"] .sh-btn-ar { background: var(--lt-ink); }
html[data-theme="light"] .sh-btn:hover .sh-btn-l, html[data-theme="light"] .sh-btn:hover .sh-btn-ar { background: #2b2b2e; }
html[data-theme="light"] .sh-btn:active .sh-btn-l, html[data-theme="light"] .sh-btn:active .sh-btn-ar { background: #000; }
html[data-theme="light"] .sh-btn:focus-visible { outline-color: var(--lt-ink); }

/* ───── services list ───── */
html[data-theme="light"] .svl-sec { background: #fff; color: var(--lt-ink); }
html[data-theme="light"] .svl-tast { color: var(--lt-ink); }
html[data-theme="light"] .svl-track span { color: var(--lt-meta); }
html[data-theme="light"] .svl-h .l1 { color: var(--lt-ink); }
/* the same ink-to-grey ramp on the other big two-tone heading ("Paid media / services"): one slice per letter */
html[data-theme="light"] .svl-h .l2 { color: #5e5e64; }
html[data-theme="light"] .svl-h .l2 mm-c { -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text; }
html[data-theme="light"] .svl-h .l2 mm-c:nth-of-type(1) { background-image: linear-gradient(90deg, #2c2c30, #38383c); }
html[data-theme="light"] .svl-h .l2 mm-c:nth-of-type(2) { background-image: linear-gradient(90deg, #38383c, #444448); }
html[data-theme="light"] .svl-h .l2 mm-c:nth-of-type(3) { background-image: linear-gradient(90deg, #444448, #4f4f54); }
html[data-theme="light"] .svl-h .l2 mm-c:nth-of-type(4) { background-image: linear-gradient(90deg, #4f4f54, #5b5b60); }
html[data-theme="light"] .svl-h .l2 mm-c:nth-of-type(5) { background-image: linear-gradient(90deg, #5b5b60, #67676c); }
html[data-theme="light"] .svl-h .l2 mm-c:nth-of-type(6) { background-image: linear-gradient(90deg, #67676c, #727278); }
html[data-theme="light"] .svl-h .l2 mm-c:nth-of-type(7) { background-image: linear-gradient(90deg, #727278, #7e7e84); }
html[data-theme="light"] .svl-h .l2 mm-c:nth-of-type(8) { background-image: linear-gradient(90deg, #7e7e84, #8a8a90); }
html[data-theme="light"] .svl-btn { background: var(--lt-ink); color: #fff; }
html[data-theme="light"] .svl-btn:focus-visible { outline-color: var(--lt-ink); }
html[data-theme="light"] .svl-item { border-top-color: var(--lt-line); }
html[data-theme="light"] .svl-row:focus-visible { outline-color: var(--lt-ink); }
html[data-theme="light"] .svl-num { color: var(--lt-meta); }
html[data-theme="light"] .svl-tag { color: var(--lt-meta); border-color: var(--lt-line-2); }
html[data-theme="light"] .svl-desc { color: #0d0d0d; }   /* the services copy on darkroomagency.com/services is rgb(13,13,13) */
html[data-theme="light"] .svl-row:hover .svl-num, html[data-theme="light"] .svl-item.is-open .svl-num,
html[data-theme="light"] .svl-row:hover .svl-desc, html[data-theme="light"] .svl-item.is-open .svl-desc { color: var(--lt-ink); }
/* the big names stay as authored: mix-blend-mode:difference over white turns rgb(128) into mid grey and rgb(244) into near-ink, and keeps working over the trailing photo */
html[data-theme="light"] .svl-plus { border-color: var(--lt-line-2); }
html[data-theme="light"] .svl-plus i { background: var(--lt-ink); }
html[data-theme="light"] .svl-item.is-open .svl-plus { border-color: rgba(14, 14, 14, .42); }
html[data-theme="light"] .svl-body p { color: #0d0d0d; }
html[data-theme="light"] .svl-note { border-top-color: var(--lt-line); color: var(--lt-meta); }
html[data-theme="light"] .svl-pr-k { color: var(--lt-body); }
html[data-theme="light"] .svl-pr-k::after { background: rgba(14, 14, 14, .24); }
html[data-theme="light"] .svl-pr-list li + li { border-top-color: var(--lt-line); }
html[data-theme="light"] .svl-pr-n { color: var(--lt-ink); }
html[data-theme="light"] .svl-pr-v { color: var(--lt-ink); }
html[data-theme="light"] .svl-pr-v small { color: var(--lt-body); }
@media (max-width: 900px) {
  /* phones drop the blend (mix-blend-mode:normal), so the names need real ink */
  html[data-theme="light"] .svl-name,
  html[data-theme="light"] .svl-item.is-open .svl-name,
  html[data-theme="light"] .svl-row:hover .svl-name { color: var(--lt-ink); }
  html[data-theme="light"] .svl-num { color: var(--lt-meta); }
  html[data-theme="light"] .svl-desc { color: #0d0d0d; }
}

/* ───── why ───── */
html[data-theme="light"] .jw-sec { background: #fff; border-top-color: var(--lt-line); }
html[data-theme="light"] .jw-eyebrow { color: var(--lt-meta); }
html[data-theme="light"] .jw-h2 { color: var(--lt-ink); }
html[data-theme="light"] .jw-sub { color: #2b2b31; font-size: 17px; }
html[data-theme="light"] .svl-ticker.jw-ticker .svl-tast { color: var(--lt-ink); }
html[data-theme="light"] .jw-lines i { border-right-color: color-mix(in srgb, var(--acc) 20%, transparent); }
html[data-theme="light"] .jw-lines i:first-child { border-left-color: color-mix(in srgb, var(--acc) 20%, transparent); }
html[data-theme="light"] .jw-shot,
html[data-theme="light"] .jw-card,
html[data-theme="light"] .jg-stage { box-shadow: 0 26px 60px rgba(14, 14, 14, .20), 0 0 0 1px rgba(14, 14, 14, .06); }
html[data-theme="light"] .jw-row { border-top-color: var(--lt-line); }
html[data-theme="light"] .jw-row:last-child { border-bottom-color: var(--lt-line); }
html[data-theme="light"] .jw-row.is-on { background: color-mix(in srgb, var(--a) 8%, transparent); }   /* translucent, as in the dark theme: the visual floats under the band, so the band must not cover it */
html[data-theme="light"] .jw-t { color: var(--lt-ink); }
html[data-theme="light"] .jw-t:hover { color: color-mix(in srgb, var(--a) 60%, #0e0e0e); }
html[data-theme="light"] .jw-row.is-on .jw-t:hover { color: var(--lt-ink); }
html[data-theme="light"] .jw-body p { color: var(--lt-body); }
html[data-theme="light"] .jw-link { color: color-mix(in srgb, var(--a) 58%, #0e0e0e); background: color-mix(in srgb, var(--a) 11%, transparent); }
html[data-theme="light"] .jw-link:hover { background: color-mix(in srgb, var(--a) 20%, transparent); }

/* the four visuals in "why": a pearl stage with the point's own hue as a corner glow, a faint dotted grid, and a hairline in the accent across the top; the frosted card is
   white and its pills are tinted for white (amber to warn, green to pass). Rendered against a washed-photo version (muddy grey) and a flat paper-and-grid version (cold):
   the pearl wash with the grid kept is the one that reads as part of this page. */
html[data-theme="light"] .jg-stage { --ink-a: color-mix(in srgb, var(--a) 52%, #0e0e0e); }
html[data-theme="light"] .jg-bg { display: none; }
html[data-theme="light"] .jg-stage {
  background-color: #fcfcfd;
  background-image: radial-gradient(rgba(14, 14, 14, .075) 1px, transparent 1.2px), linear-gradient(160deg, color-mix(in srgb, var(--a) 12%, #fff) 0%, #fcfcfd 46%, color-mix(in srgb, var(--a) 8%, #f2f2f5) 100%);
  background-size: 18px 18px, 100% 100%;
  border: 1px solid color-mix(in srgb, var(--a) 26%, rgba(14, 14, 14, .08));
  box-shadow: 0 30px 70px -28px rgba(14, 14, 14, .28), inset 0 1px 0 rgba(255, 255, 255, .8);
}
html[data-theme="light"] .jg-stage::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--a) 85%, #0e0e0e), transparent); }
html[data-theme="light"] .jg-veil { background: radial-gradient(70% 62% at 88% 0%, color-mix(in srgb, var(--a) 22%, transparent), transparent 64%); }
html[data-theme="light"] .jg-card { background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--lt-ink); border: 1px solid rgba(14, 14, 14, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 22px 46px -22px rgba(14, 14, 14, .26); }
html[data-theme="light"] .jg-head span, html[data-theme="light"] .jg-op small, html[data-theme="light"] .jg-l small, html[data-theme="light"] .jg-r small { color: #55555c; }
html[data-theme="light"] .jg-row { border-top-color: rgba(14, 14, 14, .09); }
html[data-theme="light"] .jg-r b { color: var(--lt-ink); }
html[data-theme="light"] .jg-r.ok b { color: #0b7a57; }
html[data-theme="light"] .jg-r.warm b { color: #a14a06; }
html[data-theme="light"] .jg-pill { background: rgba(14, 14, 14, .07); color: var(--lt-ink); }
html[data-theme="light"] .jg-pill.ok { background: #e1f4ea; color: #0b6b49; }
html[data-theme="light"] .jg-pill.hot { background: #fdebd6; color: #92400e; }
html[data-theme="light"] .jg-face { color: var(--lt-ink); background: radial-gradient(70% 66% at 30% 20%, color-mix(in srgb, var(--a) 30%, transparent), transparent 62%), rgba(14, 14, 14, .04); box-shadow: inset 0 0 0 1px rgba(14, 14, 14, .14); }
html[data-theme="light"] .jg-face svg { color: var(--lt-ink); }
html[data-theme="light"] .jg-check { color: var(--ink-a); }

/* ───── approach (statement) ───── */
html[data-theme="light"] .st { background: #fff; }
html[data-theme="light"] .st-h { color: var(--lt-ink); }
html[data-theme="light"] .st-g { color: #8d8d8d; }
html[data-theme="light"] .st-p { color: var(--lt-body); }
html[data-theme="light"] .st .u-pill { color: var(--lt-ink); }
html[data-theme="light"] .st .u-btn { background: var(--lt-ink); color: #fff; }
html[data-theme="light"] .st .u-btn:hover { background: #2b2b2e; }
html[data-theme="light"] .st .u-btn:active { background: #000; }
html[data-theme="light"] .st .u-link { color: var(--lt-ink); }
html[data-theme="light"] .st .u-link::before { background: rgba(112, 112, 112, .5); }
html[data-theme="light"] .st .u-link::after { background: var(--lt-ink); }
html[data-theme="light"] .st .u-btn:focus-visible, html[data-theme="light"] .st .u-link:focus-visible { outline-color: var(--lt-ink); }

/* ───── process: a soft gray card ─────
   Tonal ladder down the page: white (neutral) < gray card (supporting, this) < black island (the offer). Margins and radii come from the base rules, so the
   tablet and phone breakpoints keep working. */
html[data-theme="light"] .hw { background: #f4f4f6; color: var(--lt-ink); box-shadow: none; }
html[data-theme="light"] .hw .u-pill { color: var(--lt-ink); }
html[data-theme="light"] .hw-h { color: var(--lt-ink); }
html[data-theme="light"] .hw-step::before { background: #d4d4d9; }
html[data-theme="light"] .hw-step::after { border-color: var(--lt-ink); background: #f6f6f8; }
html[data-theme="light"] .hw-ico svg { stroke: var(--lt-ink); }
html[data-theme="light"] .hw-ico .hw-k { fill: #f6f6f8; }
html[data-theme="light"] .hw-n { color: var(--lt-meta); }
html[data-theme="light"] .hw-n::after { background: #c9c9ce; }
html[data-theme="light"] .hw-tag { color: var(--lt-meta); }
html[data-theme="light"] .hw-t { color: var(--lt-ink); }
html[data-theme="light"] .hw-p { color: var(--lt-body); }
@media (max-width: 700px) {
  html[data-theme="light"] .hw-step::before, html[data-theme="light"] .hw-step:nth-child(2n)::before { background: #d4d4d9; }
}

/* ───── the offer: white, with one lifted card ─────
   Variants rendered on the real page: A two white hairline cards (flat, no hierarchy); B gray supporting + white lifted offer (chosen); C both gray (reads as one slab);
   D = B + a hairline signature across the offer and ember checks (chosen on top of B: ties the checks to the button, nothing else on the card is coloured). */
html[data-theme="light"] .fit-sec { background: #fff; color: var(--lt-ink); }
html[data-theme="light"] .fit-tast { color: var(--lt-ink); }
html[data-theme="light"] .fit-track span { color: var(--lt-meta); }
html[data-theme="light"] .fit-h .l1 { color: var(--lt-ink); }
html[data-theme="light"] .fit-h .l2 { color: var(--lt-ink); }
/* the grain and the white sheen are made for a dark card */
html[data-theme="light"] .fit-card::before, html[data-theme="light"] .fit-card::after { display: none; }
html[data-theme="light"] .fit-rule { background: rgba(14, 14, 14, .14); }
html[data-theme="light"] .fit-left { background: #f6f6f8; }
html[data-theme="light"] .fit-right { background: #fff; box-shadow: 0 0 0 1px rgba(14, 14, 14, .10), 0 34px 70px -34px rgba(14, 14, 14, .30); }
html[data-theme="light"] .fit-right::before {
  display: block; content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(14, 14, 14, .55) 30%, rgba(204, 64, 13, .9) 70%, transparent);
}
html[data-theme="light"] .fit-mono { color: var(--lt-ink); font-size: max(12.5px, calc(13.5px * var(--s))); font-weight: 500; letter-spacing: .3px; }
html[data-theme="light"] .fit-mono i { color: var(--lt-cta); }
html[data-theme="light"] .fit-checks li { color: var(--lt-ink); font-size: max(14.5px, calc(16.25px * var(--s))); line-height: 1.3; }
html[data-theme="light"] .fit-checks svg { color: var(--lt-cta); }
html[data-theme="light"] .fit-small { color: var(--lt-body); font-size: max(12.5px, calc(13.5px * var(--s))); line-height: 1.4; }
html[data-theme="light"] .fit-avs img { border-color: #fff; }
html[data-theme="light"] .fit-proof-t p { color: var(--lt-body); font-size: max(14px, calc(16px * var(--s))); }
html[data-theme="light"] .fit-proof-t p:first-child { color: var(--lt-ink); font-weight: 500; }
html[data-theme="light"] .fit-guar { color: var(--lt-body); font-size: max(14px, calc(16px * var(--s))); }
html[data-theme="light"] .fit-guar span { color: var(--lt-ink); }
html[data-theme="light"] .fit-num { color: var(--lt-ink); }
html[data-theme="light"] .fit-per { color: var(--lt-body); font-size: max(13px, calc(14px * var(--s))); }
html[data-theme="light"] .fit-lines li { font-size: max(14.5px, calc(16.25px * var(--s))); line-height: 1.3; }
html[data-theme="light"] .fit-lines b { color: var(--lt-ink); font-weight: 600; }
html[data-theme="light"] .fit-lines span { color: var(--lt-body); }
html[data-theme="light"] .fit-cta { background: var(--lt-cta); color: var(--lt-cta-fg); box-shadow: var(--lt-cta-sh); }
html[data-theme="light"] .fit-cta:hover { background: var(--lt-cta-hover); box-shadow: var(--lt-cta-sh-h); }
html[data-theme="light"] .fit-cta:active { background: var(--lt-cta-active); }
html[data-theme="light"] .fit-cta:focus-visible { outline-color: var(--lt-ink); }

/* ───── faq ───── */
html[data-theme="light"] #faq { color: var(--lt-meta); }
html[data-theme="light"] .pill { background: rgba(14, 14, 14, .06); color: var(--lt-meta); }
html[data-theme="light"] .pill::before { background: var(--lt-ink); }
html[data-theme="light"] .pill.pill-tick { color: var(--lt-meta); background: none; }
html[data-theme="light"] .pill-ast { color: var(--lt-ink); }
html[data-theme="light"] .split-hdr h2 { color: var(--lt-ink); }
html[data-theme="light"] .split-hdr h2 span { color: var(--lt-meta); }
html[data-theme="light"] .split-hdr h2 .l1, html[data-theme="light"] .split-hdr h2 .l1 span { color: var(--lt-ink); }
html[data-theme="light"] .split-hdr h2 .l2, html[data-theme="light"] .split-hdr h2 .l2 span { color: var(--lt-meta); }
html[data-theme="light"] .split-hdr p { color: var(--lt-meta); }
html[data-theme="light"] .faq-tab { border-color: var(--lt-line-2); color: var(--lt-body); }
html[data-theme="light"] .faq-tab::before { background: rgba(14, 14, 14, .16); }
html[data-theme="light"] .faq-tab[aria-selected="true"]::before { background: var(--lt-accent-ink); }
html[data-theme="light"] .faq-tab-c { color: var(--lt-meta); }
html[data-theme="light"] .faq-tab[aria-selected="true"] .faq-tab-c { color: var(--lt-ink); }
html[data-theme="light"] .faq-tab:hover { color: var(--lt-ink); background: rgba(14, 14, 14, .04); }
html[data-theme="light"] .faq-tab[aria-selected="true"] { background: rgba(14, 14, 14, .05); border-color: rgba(14, 14, 14, .42); color: var(--lt-ink); }
html[data-theme="light"] .faq-tab:focus-visible, html[data-theme="light"] .faq-q:focus-visible { outline-color: rgba(14, 14, 14, .55); }
html[data-theme="light"] .faq-card { background: #fff; box-shadow: 0 0 0 1px var(--lt-line); }
html[data-theme="light"] .faq-got h3 { color: var(--lt-ink); }
html[data-theme="light"] .faq-got p { color: var(--lt-meta); }
html[data-theme="light"] .faq-got a { color: var(--lt-body); }
html[data-theme="light"] .faq-got a:hover { color: var(--lt-ink); }
html[data-theme="light"] .faq-item.is-open { background: linear-gradient(135deg, #f6f6f8 0%, #fff 60%); }
html[data-theme="light"] .faq-q { color: var(--lt-ink); }
html[data-theme="light"] .faq-chev { background: rgba(14, 14, 14, .05); color: var(--lt-meta); }
html[data-theme="light"] .faq-q:hover .faq-chev { background: rgba(14, 14, 14, .09); }
html[data-theme="light"] .faq-a p { color: var(--lt-body); }

/* faq (second pass): answers, the sub line, the count chips and the "can't find what you're looking for" card were body/meta grey at 14px; now near-black, a size up */
html[data-theme="light"] .split-hdr p { color: #2b2b31; font-size: 17px; line-height: 1.5; }
html[data-theme="light"] .split-hdr h2 .l2, html[data-theme="light"] .split-hdr h2 .l2 span { color: #55555c; }
html[data-theme="light"] .faq-tab { color: #1c1c20; }
html[data-theme="light"] .faq-tab-c { color: #3f3f46; }
html[data-theme="light"] .faq-got p { color: #26262b; font-size: 15px; max-width: 230px; }
html[data-theme="light"] .faq-got a { color: var(--lt-ink); font-size: 15px; font-weight: 500; }
html[data-theme="light"] .faq-got a:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="light"] .faq-a p { color: #26262b; font-size: 15px; line-height: 1.6; }