/* ============================================================================
   TEST: dark theme for everything AROUND the deck (page, header, tab strip, bottom bar,
   progress, margin notes, Clutch badge). The slides and their content stay light.
   To undo: delete the <link rel="stylesheet" href="css/dark-chrome.css"> line in index.html.
   ============================================================================ */
:root {
  --page: #2e3135; --tray: #3b3f44; --chip: #4b4f55; --line: #50545a; --dot: #5a5e64;
  --ink: #ececec; --muted: #b3b6bb; --faint: #8c8f94;
  color-scheme: dark;
}
/* the deck keeps its original light tokens (also the section-travel ribbon, which holds copies of slides) */
.shell__body, .ribbon, .peek {
  --page: #fcfcfc; --tray: #f7f7f7; --chip: #ededed; --line: #e5e5e5; --dot: #dbdbdb;
  --ink: #333333; --muted: #6b6b6b; --faint: #a1a1a1;
  color-scheme: light;
}
.stage { --ink: #131415; }

/* page + background guide lines */
body { background: var(--page); }
.guides i { background: rgba(255,255,255,.05); }

/* header: wordmark turns white, the orange CTA stays */
.logo__word { filter: brightness(0) invert(1); }

/* the frame around the deck */
.shell { background: var(--tray); border-color: #4c5056; box-shadow: 0 2px 0 .4px rgba(255,255,255,.12);   /* the lift edge is a light line here, not a dark one */ }
.tab, .bar-btn, .crumb a, .crumb span { color: var(--ink); }
.kbd { background: var(--chip); color: rgba(236,236,236,.5); }
.shell__progress > span { background: #4b4f55; }
.shell__progress > span.is-on { background: var(--accent); }
.bar-btn:not(:disabled):hover .icon-tile { background: #4b4f55; }
.bar-btn .icon-tile img, .strip-nav img { filter: invert(1); }
.bar-btn.is-confirm .icon-tile { background: color-mix(in srgb, var(--accent) 24%, #3b3f44); }
.bar-btn.is-confirm .icon-tile img { filter: invert(33%) sepia(98%) saturate(2400%) hue-rotate(4deg) brightness(110%); }

/* Clutch badge */
.clutch { background: #3b3f44; border-color: #50545a; color: #f1f1f1; }

/* margin notes (hand-written hints) */
.note { color: #b3b6bb; }   /* 6.4:1 on the page */

/* "Book a call": inverted so the pill reads on the dark page */
.cta { background: #fff; color: #131415; border-color: #fff; }
.cta img { filter: invert(1); }

/* Clutch favicon: lighter variant (navy C turns light, white ring drops out) */
.clutch img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
/* "use <- -> keys" hint when it is orange: a lighter orange so it keeps 5:1 contrast on the charcoal */
.note--right.is-hot { color: #ff6b2c; }
/* "5/5" in the badge: lighter orange for contrast on the lighter badge */
.clutch b { color: #ff7d54; }

/* tints follow the charcoal-grey palette everywhere */
.tab .kbd, .kbd { color: rgba(236,236,236,.55); }
/* top tab bar: labels and icons a step brighter and tinted to the palette (inactive tabs were at 50%) */
.tab__label { opacity: .72; }
.tab:hover .tab__label { opacity: .95; }
.tab[aria-current="page"] .tab__label { opacity: 1; }
.tab__icon { color: #d0d3d8; opacity: .8; }
.tab[aria-current="page"] .tab__icon { color: #fff; opacity: 1; }
.crumb a { opacity: .75; }
/* the pen scribble under the Clutch badge: barely there on the dark page */
.swirl path { opacity: .2; }
.swirl .swirl__echo { opacity: .1; }

/* bottom progress slider: every state is a step of the same charcoal-grey (the light-mode "stone" greys are replaced) */
.shell__progress > span { background: #4b4f55; }
.shell__progress > span.is-on { background: #80848b; opacity: 1; }
.shell__progress > span.is-on.is-cur { background: #c7cacf; }
.shell__progress > span.is-seen { opacity: 1; }
.shell__progress > span.is-timer::after { background: #c7cacf; }

/* the deck's own 1px frame (slides, walls, case pages) used the light-mode hairline, which showed as a bright stroke against the dark frame */
.shell__body .viewport, .shell__body .wall, .shell__body .casepage, .shell__body .tcar, .shell__body .case-card, .shell__body .carousel__intro,
.ribbon .viewport, .ribbon .wall, .ribbon .casepage, .ribbon .tcar, .ribbon .case-card, .ribbon .carousel__intro { border-color: var(--tray-dark, #3b3f44); }   /* same colour as the frame behind it, so no light edge shows around the deck (also in the section-travel copies) */

/* ---- more chrome elements adapted to the dark frame ---- */
/* "Go back" close icon (was a 50% black stroke) and the arrows in the strip */
.strip-nav .icon-tile svg { stroke: #ececec; stroke-opacity: .85; }
.strip-nav:not(:disabled):hover .icon-tile { background: #5a5e64; }
.kbd { color: rgba(236,236,236,.75); }
/* breadcrumb chevron, compact section picker chevron */
.crumb-tail img, .tabsel img { filter: invert(1); opacity: .6; }
.tabsel__label { color: var(--ink); }
/* "Scroll to view more" hint icon in the bar */
.icon-tile--hint { color: #ececec; }
.icon-tile--hint svg { opacity: .7; }
/* badge "5/5" */
.clutch b { color: #ff7a45; }

/* active-tab dot: lighter orange (the brand orange was ~2.5:1 on the dark strip) with a faint glow so a 4px dot still reads */
.tab::before { background: #ff6b2c; box-shadow: 0 0 7px rgba(255,107,44,.65); }

/* the same lift on the Book-a-call pill and Clutch badge: light instead of dark */
.cta { filter: drop-shadow(0 1.5px .75px rgba(255,255,255,.14)); }
.cta:hover { filter: drop-shadow(0 1.5px .75px rgba(255,255,255,.14)) brightness(1.06); }

/* orange on dark: one saturated orange (#ff6b2c for shapes and hints, #ff7a45 for small bold text) instead of the pastel one */
.bar-btn.is-confirm { color: #ff7a45; }
/* "Read case study" / "Open case" / "Open service" pills and the testimonial's case button take the page background colour */
.cur__in, .tslide__case { background: #2e3135; }
.cur__in { box-shadow: 0 6px 20px rgba(0,0,0,.3), 0 0 0 1px #4c5056; }
.tslide__case:hover { background: #3b3f44; }

.logo__hand { color: #b3b6bb; }

/* ghost button on the dark page */
.cta--ghost { background: transparent; color: #ececec; border-color: rgba(236,236,236,.55); filter: none; }
.cta--ghost:hover { background: rgba(255,255,255,.08); border-color: #ececec; filter: none; }

.site-header__actions .cta { border-color: transparent; }
.site-header__actions .cta--ghost { border-color: rgba(236,236,236,.75); }
.site-header__actions .cta--ghost:hover { border-color: #ececec; }

/* the Clutch badge is part of the deck now: it keeps the light look */
.shell__body .clutch, .ribbon .clutch { background: #f9f9f9; border-color: #f5f5f5; color: #000; }   /* (.ribbon: the copies of the slide that travel when jumping between sections) */
.shell__body .clutch b, .ribbon .clutch b { color: var(--accent); }
.shell__body .clutch img, .ribbon .clutch img { filter: none; mix-blend-mode: normal; }

/* the intro cards that sit on a white slide (How we work, What clients say) have no outline at all */
.shell__body .howintro .carousel__intro, .shell__body .tcar .carousel__intro { border: 0; box-shadow: none; }   /* no outline on a card that already sits on the white slide */
/* phone "Close" button */
.m-close { background: #4b4f55; border-color: #5f636a; color: #ececec; }
.m-close span { opacity: .85; }

/* phone menu: dark panel to match the frame */
.mmenu__panel { background: #3b3f44; border-color: #50545a; }
.mmenu__item[aria-current]::after { background: #ff6b2c; }

.mmenu__close { background: #3b3f44; border-color: #50545a; color: #ececec; }
@media (max-width: 780px) { .site-header__actions .cta--ghost { border-color: rgba(236,236,236,.75); } }