/* ══════════════════════════════════════
   Case-study pages (work/*.html)
   Sits on top of styles.css — reuses its tokens, .glass, .section,
   .section-head, .eyebrow, .tool-badge, nav and footer untouched.
══════════════════════════════════════ */

.cs-root { scroll-padding-top: 5.5rem; }
/* styles.css gives .section 5rem top and bottom; on these long pages that read as dead bands between blocks. */
.cs-root .section { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.cs-root .cs-related { padding-bottom: 5rem; }

/* ── Entrance: staggered rise, independent of the scroll-reveal observer ── */
@keyframes cs-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.cs-rise { animation: cs-rise 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
html.zoom-arrive .cs-rise { animation-delay: calc(var(--i, 0) * 90ms + 300ms); }

/* ══ Hero ══ */
.cs-hero {
  padding-top: 8rem; padding-bottom: 1rem;
  display: grid; gap: 3rem 4rem; align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .cs-hero { grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr); padding-top: 9rem; gap: 3rem 3rem; }
}
.cs-back {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1.1rem .55rem .8rem; margin-bottom: 1.8rem;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-fill);
  color: var(--text-muted); font-size: .88rem; font-weight: 500;
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.cs-back svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.cs-back:hover, .cs-back:focus-visible { color: var(--text); border-color: rgba(56,198,255,.7); }
.cs-back:hover svg, .cs-back:focus-visible svg { transform: translateX(-3px); }

.cs-hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  line-height: 1.04; letter-spacing: -.01em;
  margin-top: 1rem;
}
.cs-hero h1 em {
  font-style: italic; font-weight: 400;
  background: linear-gradient(100deg, var(--sea-bright) 10%, var(--sun) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-lead {
  margin-top: 1.5rem; max-width: 46ch;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--text-muted);
}
.cs-tools { margin-top: 1.8rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.cs-tools .tool-badge { width: 30px; height: 30px; }

/* facts strip */
.cs-facts {
  margin-top: 2.2rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1.4rem; padding: 1.4rem 1.6rem;
  border-radius: var(--radius-md);
}
@media (min-width: 640px) and (max-width: 999px) { .cs-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-facts div { min-width: 0; position: relative; z-index: 2; }
.cs-facts dt { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.cs-facts dd { margin-top: .3rem; font-size: .95rem; color: var(--text); line-height: 1.35; }

/* stage: the big hero visual */
.cs-stage { perspective: 1400px; min-width: 0; }
.cs-tilt {
  position: relative; border-radius: var(--radius-lg);
  transform-style: preserve-3d;
  transition: transform .35s var(--ease);
  --rx: 0deg; --ry: 0deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}
.cs-tilt::after {              /* cursor-following glare */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.16), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.cs-tilt:hover::after { opacity: 1; }
.cs-showcase {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--glass-border);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 40px -8px rgba(0,163,224,.35);
}
.cs-showcase img { display: block; width: 100%; height: auto; }

/* ══ Frames ══ */
.browser {
  border-radius: 12px; overflow: hidden;
  background: #0b111d; border: 1px solid var(--glass-border);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  position: relative; z-index: 2;
}
.browser-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem; background: rgba(255,255,255,.06);
  border-bottom: 1px solid var(--glass-border);
}
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); flex-shrink: 0; }
.browser-bar i:nth-child(1) { background: #ff5f57; } .browser-bar i:nth-child(2) { background: #febc2e; } .browser-bar i:nth-child(3) { background: #28c840; }
.browser-bar span {
  margin-left: .6rem; flex: 1; min-width: 0;
  padding: .12rem .8rem; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.35); color: var(--text-dim); font-size: .75rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser img { width: 100%; height: auto; display: block; }

.device {
  padding: 12px; border-radius: 26px; position: relative; z-index: 2;
  background: linear-gradient(160deg, #1b2333, #0a0f18);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.18);
}
.device img { width: 100%; height: auto; display: block; border-radius: 14px; }

/* ══ Content blocks ══ */
.cs-prose { max-width: 62ch; color: var(--text-muted); font-size: 1.04rem; }
.cs-prose p + p { margin-top: 1rem; }
.cs-prose strong { color: var(--text); font-weight: 600; }

.cs-cols { display: grid; gap: 2.4rem 3rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .cs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-cols--wide-left { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

.cs-panel {
  position: relative; padding: 1.5rem 1.6rem;
  background: var(--glass-fill); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  /* opacity + transform listed too: this replaces .reveal's transition (same specificity, later file), and the fade-in would otherwise snap. */
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.cs-panel:hover { border-color: rgba(56,198,255,.5); background: var(--glass-fill-hi); }
.cs-panel h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; margin-bottom: .45rem; }
.cs-panel p { color: var(--text-muted); font-size: .95rem; }
.cs-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: .9rem;
  font-size: .82rem; font-weight: 700; color: #04060b;
  background: linear-gradient(135deg, var(--sea-bright), var(--sun));
  box-shadow: 0 0 16px rgba(56,198,255,.5);
}
.cs-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 900px) {
  .cs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-grid--3 > :last-child:nth-child(3n + 2) { grid-column: span 2; }   /* five items: no orphaned empty cell */
}

.cs-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.cs-chip {
  padding: .45rem .95rem; border-radius: var(--radius-pill);
  background: var(--glass-fill); border: 1px solid var(--glass-border);
  font-size: .86rem; color: var(--text);
}

/* ══ Hach ══ */
.pin-wrap { position: relative; }
.pin {
  position: absolute; z-index: 4; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 700; color: #04060b; background: var(--sun);
  box-shadow: 0 0 0 3px rgba(4,6,11,.55), 0 0 14px 2px rgba(255,199,44,.7);
  transition: transform .35s var(--ease-liquid), box-shadow .35s var(--ease);
}
.pin.is-on { transform: scale(1.35); box-shadow: 0 0 0 3px rgba(4,6,11,.7), 0 0 26px 6px rgba(255,199,44,.95); }
.notes { display: grid; gap: .8rem; counter-reset: n; }
.note {
  display: grid; grid-template-columns: 34px 1fr; gap: .9rem; align-items: start;
  padding: 1rem 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border); background: var(--glass-fill);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.note.is-on { border-color: rgba(255,199,44,.7); background: var(--glass-fill-hi); }
.note .cs-num { margin: 0; width: 30px; height: 30px; background: var(--sun); box-shadow: 0 0 12px rgba(255,199,44,.5); }
.note h3 { font-size: 1rem; font-weight: 600; margin-bottom: .15rem; }
.note p { font-size: .92rem; color: var(--text-muted); }
.note { cursor: default; }

.swatches { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.swatch {
  display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; color: var(--text);
  border-radius: var(--radius-md); border: 1px solid var(--glass-border);
  background: var(--glass-fill); font-family: inherit;
  transition: transform .4s var(--ease-liquid), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.swatch:hover, .swatch:focus-visible { transform: translateY(-5px); border-color: rgba(56,198,255,.8); box-shadow: 0 16px 40px -16px rgba(0,163,224,.55); }
.swatch-chip { display: block; height: 92px; position: relative; }
.swatch-chip::after {
  content: 'Copy'; position: absolute; right: .6rem; bottom: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .15rem .55rem; border-radius: var(--radius-pill);
  background: rgba(4,6,11,.6); color: #fff; opacity: 0; transition: opacity .25s var(--ease);
}
.swatch:hover .swatch-chip::after, .swatch:focus-visible .swatch-chip::after { opacity: 1; }
.swatch.copied .swatch-chip::after { content: 'Copied'; opacity: 1; background: rgba(40,200,64,.85); }
.swatch-meta { display: block; flex: 1; padding: .8rem .95rem .95rem; }
.swatch-meta b { display: block; font-weight: 600; font-size: .95rem; }
.swatch-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--sea-bright); }
.swatch-meta small { display: block; margin-top: .2rem; font-size: .85rem; color: var(--text-dim); }

.specimens { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .specimens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.specimen { padding: 1.5rem 1.6rem; border-radius: var(--radius-md); background: var(--glass-fill); border: 1px solid var(--glass-border); overflow: hidden; }
.specimen small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .8rem; }
.specimen .sample { color: var(--text); line-height: 1.05; }
.specimen p { margin-top: .9rem; font-size: .86rem; color: var(--text-muted); }
.f-hubballi { font-family: 'Hubballi', var(--font-display); font-weight: 400; }
.f-inter { font-family: 'Inter', var(--font-display); font-weight: 700; }
.f-jura { font-family: 'Jura', var(--font-display); font-weight: 700; }

.legend-wrap { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .legend-wrap { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.legend-img { background: #fff; border-radius: var(--radius-md); padding: .5rem; max-width: 340px; }
.legend-img img { width: 100%; height: auto; border-radius: 10px; }
.states { display: grid; gap: .7rem; }
.state { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: var(--glass-fill); }
.state i { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.state b { font-weight: 600; font-size: .95rem; }
.state span { color: var(--text-muted); font-size: .9rem; }

/* ══ Kritek ══ */
.logo-pair { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.logo-tile { display: flex; align-items: center; justify-content: center; padding: 2.4rem 1.5rem; border-radius: var(--radius-md); min-height: 200px; border: 1px solid var(--glass-border); }
.logo-tile--light { background: #f4f8fb; }
.logo-tile--dark  { background: #0a0f18; }
.logo-tile img { width: min(100%, 300px); height: auto; }
.logo-tile figcaption { position: absolute; }

.filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.6rem; }
.filter {
  padding: .55rem 1.05rem; min-height: 44px; border-radius: var(--radius-pill);
  background: var(--glass-fill); border: 1px solid var(--glass-border); color: var(--text-muted);
  font-size: .88rem; font-weight: 500;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.filter b { font-weight: 700; color: var(--text-dim); margin-left: .35rem; font-size: .8rem; }
.filter:hover { color: var(--text); border-color: var(--glass-border-hi); }
.filter[aria-pressed="true"] { color: #04060b; background: linear-gradient(120deg, var(--sea-bright), var(--sun)); border-color: transparent; }
.filter[aria-pressed="true"] b { color: rgba(4,6,11,.65); }

.icon-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.icon-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem;
  padding: 1rem .7rem .85rem; border-radius: var(--radius-sm);
  background: var(--glass-fill); border: 1px solid var(--glass-border);
  transition: transform .4s var(--ease-liquid), border-color .3s var(--ease), background .3s var(--ease);
}
.icon-tile[hidden] { display: none; }
.icon-grid.is-collapsed { max-height: 27rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 68%, transparent); mask-image: linear-gradient(#000 68%, transparent); }
.icon-more { display: flex; justify-content: center; margin-top: 1.4rem; }
.icon-more[hidden] { display: none; }
.icon-tile:hover { transform: translateY(-4px); border-color: rgba(56,198,255,.7); background: var(--glass-fill-hi); }
.icon-tile .plate { width: 76px; height: 76px; border-radius: 14px; background: #f4f8fb; display: flex; align-items: center; justify-content: center; }
.icon-tile .plate--dark { background: linear-gradient(135deg, #0b3a63, #00539B); }   /* the weather marks are white line art */
.icon-tile img { width: 56px; height: 56px; object-fit: contain; }
.icon-tile b { font-weight: 500; font-size: .875rem; line-height: 1.25; }
.icon-tile small { font-size: .75rem; color: var(--text-dim); letter-spacing: .04em; }

.viewer-tabs { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.4rem; }
.viewer-tabs button {
  padding: .55rem 1.05rem; min-height: 44px; border-radius: var(--radius-pill);
  background: var(--glass-fill); border: 1px solid var(--glass-border); color: var(--text-muted);
  font-size: .88rem; font-weight: 500;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.viewer-tabs button:hover { color: var(--text); border-color: var(--glass-border-hi); }
.viewer-tabs button[aria-selected="true"] { color: #04060b; background: linear-gradient(120deg, var(--sea-bright), var(--sun)); border-color: transparent; }
.viewer-stack { display: grid; }
.viewer-stack > * { grid-area: 1 / 1; align-self: center; opacity: 0; transform: scale(.985) translateY(10px); visibility: hidden; transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
.viewer-stack > .on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.viewer-cap { margin-top: 1rem; color: var(--text-muted); font-size: .92rem; }
.viewer-cap b { color: var(--text); font-weight: 600; }

/* ══ Sports Authority process ══ */
.steps { display: grid; gap: .8rem; }
.step {
  text-align: left; width: 100%; display: grid; grid-template-columns: 38px 1fr; gap: .9rem; align-items: start;
  padding: 1.1rem 1.2rem; border-radius: var(--radius-md); font-family: inherit; color: var(--text);
  background: var(--glass-fill); border: 1px solid var(--glass-border);
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.step:hover { border-color: var(--glass-border-hi); }
.step .cs-num { margin: 0; width: 34px; height: 34px; background: var(--glass-fill-hi); color: var(--text-muted); box-shadow: none; }
.step h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }
.step p { margin-top: .25rem; font-size: .92rem; color: var(--text-muted); }
.step[aria-selected="true"] { border-color: rgba(56,198,255,.85); background: var(--glass-fill-hi); box-shadow: 0 0 24px -4px rgba(56,198,255,.55); transform: translateX(6px); }
.step[aria-selected="true"] .cs-num { color: #04060b; background: linear-gradient(135deg, var(--sea-bright), var(--sun)); box-shadow: 0 0 16px rgba(56,198,255,.5); }
.cs-bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); margin-top: 1rem; overflow: hidden; }
.cs-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sea-bright), var(--sun)); transition: width .8s var(--ease); }

/* ══ Snap live components ══
   A real, scoped copy of Snap's compiled CSS on a light "Arrow" surface.
   Tokens are the library's own; data-theme flips them like the original. */
.snap {
  --clr-gray:#353D40; --clr-gray-dark:#282E30; --clr-gray-mid:#495053;
  --clr-text:#676D6F; --clr-text-head:#353D40; --clr-border:#EAEBEC; --clr-bg:#F5F5F5; --clr-white:#FFFFFF;
  --clr-blue:#009DDC; --clr-blue-dk:#008bc3; --clr-blue-deep:#00539B; --clr-blue-lt:#72CDF4;
  --clr-green:#54B948; --clr-green-dk:#4ba740; --clr-red:#E31B23; --clr-gold:#FDBB30; --clr-orange:#F68A33; --clr-meta:#9A9E9F;
  font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.4;
  color: var(--clr-text); background: var(--clr-white);
  border-radius: 12px; overflow: hidden; text-align: left;
  border: 1px solid rgba(255,255,255,.18);
  transition: background .5s var(--ease), color .5s var(--ease);
  position: relative; z-index: 2;
}
.snap[data-theme="dark"] {
  --clr-white:#1e2225; --clr-bg:#2a2e31; --clr-text:#a8acae; --clr-text-head:#d4d8da; --clr-border:#3a3f42; --clr-meta:#686c6e;
}
.snap *, .snap *::before, .snap *::after { box-sizing: border-box; }
.snap h1, .snap h2, .snap h3, .snap h4, .snap h5 { margin: 0 0 .5em; color: var(--clr-text-head); font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1.2; letter-spacing: 0; }
.snap h1 { font-size: 30px; } .snap h2 { font-size: 24px; } .snap h3 { font-size: 18px; } .snap h4 { font-size: 15px; } .snap h5 { font-size: 14px; }
.snap p { margin: 0 0 1em; }
.snap a, .snap .snap-link { color: var(--clr-blue); }
.snap .snap-h { margin: 0 0 .5em; color: var(--clr-text-head); font-weight: bold; line-height: 1.2; }
.snap .snap-h1 { font-size: 30px; } .snap .snap-h2 { font-size: 24px; } .snap .snap-h3 { font-size: 18px; } .snap .snap-h4 { font-size: 15px; } .snap .snap-h5 { font-size: 14px; }
.snap-header {
  height: 56px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, #282E30 0 35%, #495053 35% 36%, #353D40 36% 100%);
}
.snap-header b { color: #fff; font-size: 22px; letter-spacing: -.5px; }
.snap-header ul { list-style: none; display: flex; gap: 24px; padding: 0; margin: 0; }
.snap-header li { color: #fff; opacity: .85; font-size: 12px; }
.snap-footer { height: 56px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #7C8183;
  background: linear-gradient(to bottom, #353D40 0 55%, #495053 55% 56%, #353D40 56% 100%); }
.snap-sec { padding: 28px 32px; border-bottom: 1px solid var(--clr-border); }
.snap-sec:last-of-type { border-bottom: 0; }
.snap-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--clr-meta); margin-bottom: 14px; }
.snap-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.snap-row:last-child { margin-bottom: 0; }
.snap button { font-family: inherit; }
.primary-button, .secondary-button, .tertiary-button, .cancel-button {
  border-radius: 4px; cursor: pointer; border: 1px solid transparent; font-size: 12px; padding: 5px 10px; line-height: 1.4; white-space: nowrap;
  transition: opacity .15s, background .15s;
}
.primary-button { background: var(--clr-green); border-color: var(--clr-green-dk); color: #fff; font-size: 14px; padding: 10px 20px; }
.primary-button:hover { background: var(--clr-green-dk); }
.secondary-button { background: var(--clr-blue); border-color: var(--clr-blue-dk); color: #fff; }
.secondary-button:hover { background: var(--clr-blue-dk); }
.tertiary-button { background: var(--clr-border); border-color: #dddee0; color: var(--clr-text); }
.snap[data-theme="dark"] .tertiary-button { background: #3a3f42; border-color: #4a5055; }
.cancel-button { background: transparent; border: 0; color: var(--clr-blue); padding-inline: 0; }
.snap[data-theme="dark"] .cancel-button { color: var(--clr-blue-lt); }
.cancel-button:hover { text-decoration: underline; }
.snap button:disabled { opacity: .5; cursor: not-allowed; }
.snap-badge { width: 2em; padding: 5px; border-radius: 4px; border: 1px solid var(--clr-border); background: var(--clr-white); color: var(--clr-text-head); font-size: 24px; text-align: center; text-transform: uppercase; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.snap-chip { width: 48px; height: 48px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08); display: block; }
.snap-chipgrp { text-align: center; font-size: 10px; }
.snap-chipgrp span { display: block; margin-top: 5px; }
.field-label { display: block; font-weight: bold; color: var(--clr-text-head); margin-bottom: 4px; font-size: 12px; }
.field-input { display: block; width: 100%; border: 1px solid var(--clr-border); border-radius: 4px; padding: 6px 8px; font: inherit; font-size: 12px; color: var(--clr-text-head); background: var(--clr-white); outline: none; transition: border-color .15s; }
.snap[data-theme="dark"] .field-input { background: #252a2e; }
.field-input:focus { border-color: var(--clr-blue); box-shadow: 0 0 0 2px rgba(0,157,220,.15); }
.snap label { cursor: pointer; }
.snap input[type=checkbox], .snap input[type=radio] { accent-color: var(--clr-blue); margin-right: 4px; }
.snap-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.snap-table th { background: var(--clr-bg); border: 1px solid var(--clr-border); font-weight: bold; padding: 8px 10px; text-align: left; color: var(--clr-text-head); white-space: nowrap; }
.snap-table td { border: 1px solid var(--clr-border); padding: 8px 10px; }
.snap-table tr:nth-child(even) td { background: color-mix(in srgb, var(--clr-bg) 45%, var(--clr-white)); }
.snap-box { border: 1px solid var(--clr-border); border-radius: 4px; padding: 16px; flex: 1; min-width: 200px; }
.snap-box.gray { background: var(--clr-bg); }
.snap-msg { border: 1px solid; border-radius: 4px; padding: 11px 14px; margin-bottom: 10px; }
.snap-msg:last-child { margin-bottom: 0; }
.snap-msg.success { background: #EEF8EC; border-color: #A9DCA3; color: #2d6b27; }
.snap-msg.error   { background: #FCE8E9; border-color: #f5b8ba; color: #8c1217; }
.snap-msg.warning { background: #FFF8EA; border-color: #FEDD97; color: #7a5a00; }
.snap-msg.info    { background: #E5F4FB; border-color: #82CFE9; color: #005f87; }
.snap[data-theme="dark"] .snap-msg.success { background: #1a3318; border-color: #2d5e27; color: #8fcc88; }
.snap[data-theme="dark"] .snap-msg.error   { background: #2e1415; border-color: #6b2225; color: #e8888b; }
.snap[data-theme="dark"] .snap-msg.warning { background: #2e2510; border-color: #6b5400; color: #e0b84c; }
.snap[data-theme="dark"] .snap-msg.info    { background: #0d2a3a; border-color: #1a5c7a; color: #5bc0e8; }
.snap-crumbs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0; font-size: 11px; }
.snap-crumbs li + li::before { content: '›'; margin: 0 5px; color: var(--clr-meta); font-size: 13px; }
.snap-tabs { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-end; padding: 0; margin: 0; border-bottom: 1px solid var(--clr-border); }
.snap-tab { background: var(--clr-bg); color: var(--clr-text); font-size: 12px; padding: 8px 14px; position: relative; top: 1px; margin-right: 3px; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; cursor: pointer; }
.snap-tab:hover { background: color-mix(in srgb, var(--clr-bg) 88%, #000); }
.snap-tab[aria-selected="true"] { background: var(--clr-white); border-color: var(--clr-border); color: var(--clr-blue); font-weight: bold; }
.snap-tabpanel { border: 1px solid var(--clr-border); border-top: 0; padding: 16px; }

.theme-toggle { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); border: 1px solid var(--glass-border); background: var(--glass-fill); gap: 2px; }
.theme-toggle button { min-height: 44px; padding: .4rem 1.1rem; border-radius: var(--radius-pill); color: var(--text-muted); background: transparent; border: 0; font-size: .86rem; font-weight: 600; transition: background .3s var(--ease), color .3s var(--ease); }
.theme-toggle button[aria-pressed="true"] { background: linear-gradient(120deg, var(--sea-bright), var(--sun)); color: #04060b; }

.token-list { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.token { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-radius: var(--radius-sm); background: var(--glass-fill); border: 1px solid var(--glass-border); font-size: .875rem; }
.token i { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.25); }
.token code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
.token span { margin-left: auto; color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ══ Related + next ══ */
.cs-related { padding-top: 4rem; }
.rel-grid { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* 3 across or 1 stacked, never 2 + a lone card */
.cs-rel { padding: 1.1rem; display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.cs-rel:hover, .cs-rel:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(56,198,255,.9);
  box-shadow: 0 30px 70px -22px rgba(0,0,0,.7), 0 0 18px 1px rgba(56,198,255,.85), 0 0 48px 4px rgba(0,163,224,.55);
}
.cs-rel .work-thumb img { transition: transform .8s var(--ease), opacity .6s var(--ease); }
.cs-rel:hover .work-thumb img, .cs-rel:focus-visible .work-thumb img { transform: scale(1.05); }
.cs-rel h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
.cs-rel p { color: var(--text-muted); font-size: .9rem; }
.cs-rel .work-card-top { position: relative; z-index: 2; }
.cs-rel-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .5rem; }
.cs-rel .work-thumb { position: relative; z-index: 2; }
.cs-rel:hover .work-arrow, .cs-rel:focus-visible .work-arrow { transform: rotate(45deg); background: var(--glass-fill-hi); }

.cs-next { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.cs-next .btn { gap: .7rem; }
.cs-next .btn svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
  .cs-hero { padding-top: 6.5rem; }
  .cs-next .btn { width: min(100%, 20rem); }
  .snap-sec { padding: 22px 18px; }
  .snap-header ul { display: none; }
  .pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-rise { animation: none; }
  .cs-tilt { transform: none !important; transition: none; }
  .viewer-stack > *, .pin, .note, .cs-back, .cs-back svg, .cs-bar i, .filter, .viewer-tabs button,
  .theme-toggle button, .snap, .step, .cs-tilt::after { transition: none; }
  .pin.is-on { transform: none; }
  .cs-panel, .swatch, .icon-tile, .step, .cs-rel { transition: none; }
  .cs-rel:hover, .cs-rel:focus-visible, .swatch:hover, .icon-tile:hover, .step[aria-selected="true"] { transform: none; }
}

/* ══════════════════════════════════════
   HDR text on the case-study pages (same technique as the index hero, see
   the "HDR text" block at the end of styles.css: a white gain-map swatch
   painted through the glyphs, brighter than #fff on an HDR display, plain
   white everywhere else). Last in the file on purpose so it wins ties. Each
   role has its own copy of the swatch file, as on the index. The gradient
   <em> in the h1 keeps its own fill (more specific rule).
══════════════════════════════════════ */
@media (dynamic-range: high) {
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .cs-hero h1 {
      background: url("../images/hdr/white-7.5x-cs-h1.jpg") center / 100% 100%, #fff;
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .cs-root .section-head h2 {
      background: url("../images/hdr/white-7.5x-cs-h2.jpg") center / 100% 100%, #fff;
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .cs-root .cs-panel h3, .cs-root .note h3, .cs-root .step h3, .cs-root .cs-rel h3 {
      background: url("../images/hdr/white-7.5x-cs-h3.jpg") center / 100% 100%, #fff;
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
  }
}

@media (max-width: 480px) {
  /* date ranges and roles were wrapping mid-phrase in the 2-column facts grid */
  .cs-facts { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
}

/* ══ Scroll stories (Hach notes, Sports Authority process) ══
   Desktop: the visual is pinned while its steps scroll past; the step nearest
   the middle of the screen lights up (and its pin / screen with it). Below
   900px it is the plain layout (tabs / stacked). */
.browser .pblur { --pblur-h: 28%; }

@media print {
  /* Same fix as the index's work gallery: the pinned scroll-story panels
     (Hach notes, Sports Authority/Kritek process steps, the Snap preview)
     rely on position:sticky inside an inflated-height container to stay in
     view while their steps scroll past. Printed as-is that produces the same
     blank-space problem. */
  .cs-pin { position: static !important; top: auto !important; }
  [data-story] .note, [data-story] .step { opacity: 1 !important; }
  [data-story] .note:not(.is-on), [data-story] .step:not([aria-selected="true"]) { background: transparent !important; border-color: #999 !important; }
}
@media (min-width: 900px) {
  .cs-cols[data-story] { align-items: start !important; }
  .cs-pin { position: sticky; top: 7rem; align-self: start; }
  [data-story] .notes { gap: 0; padding-bottom: 14vh; }
  [data-story] .note { min-height: 30vh; align-content: center; opacity: .38; transition: opacity .5s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
  [data-story] .note:not(.is-on), [data-story] .step:not([aria-selected="true"]) { background: transparent; border-color: transparent; }
  [data-story] .note.is-on { opacity: 1; }
  [data-story] .steps { gap: 0; padding-block: 8vh; }
  [data-story] .step { min-height: 24vh; align-content: center; margin-block: 3vh; opacity: .42; transition: opacity .5s var(--ease), border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); }
  [data-story] .step[aria-selected="true"] { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { [data-story] .note, [data-story] .step { transition: none; } }

/* Pinned live preview (Arrow story): stacked views that crossfade. */
.snap-preview { padding: clamp(.7rem, 1.6vw, 1rem); }
.story-views { display: grid; grid-template-columns: minmax(0, 1fr); }   /* minmax(0,…): the stacked views must not stretch the track to the widest one */
.story-views > .story-view { min-width: 0; }
.story-views > .story-view { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.story-views > .story-view.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.story-view .snap-sec { padding: 22px 26px; }
@media (prefers-reduced-motion: reduce) { .story-views > .story-view { transition: none; } }

/* ══ Hero showcase: slow one-time fly-in (motion after basepoint.health) ══
   The image starts small, tilted and shifted right/down, then settles flat.
   It plays once, when the image has loaded (js/case-study.js adds .is-in),
   never on scroll or hover. Hidden until then; no-JS and reduced-motion
   visitors just see it. */
.cs-showcase[data-fly] { opacity: 0; }
.cs-showcase[data-fly].is-in { animation: cs-fly 2.4s cubic-bezier(.16, 1, .3, 1) .25s both; }
html.zoom-arrive .cs-showcase[data-fly].is-in { animation-delay: .7s; }
@keyframes cs-fly {
  0%   { opacity: 0; transform: translate(0, 200px) scale(.2); filter: blur(8px); }
  30%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@media (max-width: 640px) {
  @keyframes cs-fly {
    0%   { opacity: 0; transform: translate(0, 140px) scale(.25); filter: blur(6px); }
    30%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .cs-showcase[data-fly] { opacity: 1; }
  .cs-showcase[data-fly].is-in { animation: none; }
}

/* ══════════════════════════════════════
   Arrow mobile app screens (work/arrow-electronics.html, "Mobile app" section)
   Generated from test/arrow-mobile/ with every class prefixed am- so nothing
   here can collide with the site's own .btn/.card/.status etc. Phones are
   drawn at 393x852 (current iPhone) and scaled to 72%.
══════════════════════════════════════ */
.am { --a-bg: #363c40; --a-head: #2d3537; --a-bar: #282828; --a-panel: #3e474a; --a-icon: #636a6c; --a-blue: #2a9fe0; --a-ink: #5b6468; --a-line: #d5dadd; --sea: var(--sea-bright, #38C6FF); --muted: var(--text-muted, #9AA7BD); }
.am-sub { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; margin: 0 0 .4rem; }
.am-subnote { color: var(--text-muted); font-size: .92rem; max-width: 62ch; margin: 0 0 2rem; line-height: 1.6; }
.am-grid + .am-sub { margin-top: 4rem; }
.am figure { margin: 0; }
.am-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(283px, 1fr)); gap: 3rem 1.5rem; justify-items: center; }.am figure { width: 283px; }.am figcaption { margin-top: 1rem; }.am figcaption b { display: block; font-weight: 500; font-size: 1rem; }.am figcaption span { display: block; color: var(--muted); font-size: .84rem; line-height: 1.5; margin-top: .25rem; }.am-tag { display: inline-block; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 99px; margin-bottom: .5rem; }.am-tag--orig { color: #04060b; background: var(--sun); }.am-tag--new { color: var(--sea); border: 1px solid color-mix(in srgb, var(--sea) 55%, transparent); }.am-phone { width: 283px; height: 613.4px; position: relative; }.am-phone__body {
    width: 393px; height: 852px; transform: scale(.72); transform-origin: 0 0;
    border-radius: 55px; background: #000; position: relative; overflow: hidden;
    box-shadow: 0 0 0 9px #17191c, 0 0 0 10.5px #3a3e44, 0 30px 60px rgba(0,0,0,.55), 0 0 60px rgba(56,198,255,.10);
    font-family: 'Inter', -apple-system, sans-serif; color: #fff;
  }.am-phone { margin: 8px; }.am-island { position: absolute; top: 11px; left: 50%; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; z-index: 5; }.am-status { position: absolute; inset: 0 0 auto 0; height: 54px; background: var(--a-bar); display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 38px; font-weight: 600; font-size: 16px; z-index: 4; }.am-status i { display: flex; gap: 6px; align-items: center; }.am-status svg { display: block; }.am-home-ind { position: absolute; bottom: 8px; left: 50%; width: 138px; height: 5px; margin-left: -69px; border-radius: 3px; background: rgba(255,255,255,.85); z-index: 6; }.am-screen { position: absolute; inset: 54px 0 0 0; background: var(--a-bg); display: flex; flex-direction: column; }.am-stripe { height: 5px; flex: none; background: linear-gradient(90deg,#e21b22 0 12%,#f68933 12% 20%,#fcba2f 20% 30%,#ffe412 30% 40%,#c1d72e 40% 48%,#53b847 48% 60%,#71cdf4 60% 68%,#009ddc 68% 80%,#00529b 80% 88%,#92278f 88% 100%); }.am-brand { background: var(--a-head); padding: 14px 0 12px; display: flex; justify-content: center; flex: none; }.am-logo { height: 27px; width: auto; display: block; margin: 2px 0; }.am-unit { background: var(--a-bar); text-align: center; font-size: 14.5px; color: #dfe4e6; padding: 12px 0; flex: none; }.am-body { flex: 1; padding: 34px 26px 0; display: flex; flex-direction: column; min-height: 0; }.am-foot { flex: none; display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 26px; font-size: 7.5px; color: #8c9599; }.am-foot b { font-size: 19px; font-weight: 600; color: #fff; letter-spacing: -.01em; }.am-foot b::before { content: 'V'; font-weight: 700; padding-right: 9px; margin-right: 9px; border-right: 1px solid #7d868a; }.am-foot b span { font-weight: 300; }.am-panel { background: var(--a-panel); border-radius: 4px; padding: 16px; }.am-card { background: #fff; color: var(--a-ink); border-radius: 4px; padding: 22px 18px 20px; }.am-card h3 { font-size: 19px; font-weight: 600; color: #4c5559; margin-bottom: 14px; }.am-card p { font-size: 13.5px; line-height: 1.45; }.am-card hr { border: 0; border-top: 1px solid var(--a-line); margin: 20px 0 22px; }.am label { display: block; font-size: 12px; font-weight: 600; margin: 0 0 5px; }.am-in { height: 32px; border: 1px solid #b9c0c4; border-radius: 3px; margin-bottom: 18px; background: #fff; font-size: 13px; color: #333; display: flex; align-items: center; padding: 0 10px; }.am-in--icon { height: 42px; border: 0; border-radius: 2px; padding: 0; margin-bottom: 14px; color: #555; }.am-in--icon i { width: 44px; align-self: stretch; background: #e3e6e8; display: grid; place-items: center; margin-right: 10px; border-radius: 2px 0 0 2px; }.am-btn { height: 46px; border-radius: 3px; background: var(--a-blue); color: #fff; font-size: 16px; font-weight: 500; display: grid; place-items: center; margin-top: 8px; }.am-btn--ghost { background: transparent; border: 1.5px solid var(--a-blue); color: var(--a-blue); }.am-lnk { color: var(--a-blue); font-weight: 600; }.am-ret { text-align: right; font-size: 12.5px; margin-top: 22px; }.am-small { font-size: 12.5px; line-height: 1.5; color: #d6dcde; }.am-center { text-align: center; }.am-rule { border: 0; border-top: 1px solid #4b5458; margin: 24px 0 18px; }.am-badge { width: 64px; height: 64px; border-radius: 50%; background: #e7f4fc; display: grid; place-items: center; margin: 4px auto 16px; }.am-code { display: flex; gap: 8px; margin: 6px 0 20px; }.am-code span { flex: 1; height: 46px; border: 1px solid #b9c0c4; border-radius: 3px; display: grid; place-items: center; font-size: 20px; font-weight: 600; color: #333; }.am-code span.am-on { border: 2px solid var(--a-blue); }.am-meter { display: flex; gap: 4px; margin: -8px 0 12px; }.am-meter i { flex: 1; height: 4px; border-radius: 2px; background: #d5dadd; }.am-meter i.am-g { background: #53b847; }.am-rules { list-style: none; padding: 0; font-size: 12px; line-height: 1.75; margin-bottom: 8px; }.am-rules li::before { content: '\2713'; color: #53b847; font-weight: 700; margin-right: 7px; }.am-rules li.am-no::before { content: '\25CB'; color: #9aa3a7; }.am-sel::after { content: ''; margin-left: auto; border: 5px solid transparent; border-top-color: #777; transform: translateY(3px); }.am-hello { font-size: 13px; color: #c9d0d3; }.am-hello b { display: block; font-size: 21px; color: #fff; font-weight: 600; margin-top: 2px; }.am-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 14px; }.am-tile { background: #fff; color: var(--a-ink); border-radius: 4px; padding: 12px 12px 11px; border-top: 3px solid var(--c, var(--a-blue)); }.am-tile b { display: block; font-size: 24px; color: #333; font-weight: 600; }.am-tile span { font-size: 11.5px; }.am-list { background: #fff; color: var(--a-ink); border-radius: 4px; }.am-list div { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; font-size: 12.5px; border-bottom: 1px solid #e6eaec; }.am-list div:last-child { border: 0; }.am-list b { color: #333; font-weight: 600; display: block; font-size: 13px; }.am-list em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: #e7f4fc; color: #1b7fba; }.am-list em.am-w { background: #fff3d6; color: #9a6b00; }.am-tabs { flex: none; display: flex; background: var(--a-head); padding: 9px 0 26px; }.am-tabs span { flex: 1; text-align: center; font-size: 10px; color: #97a0a4; }.am-tabs span.am-on { color: var(--a-blue); }.am-tabs svg { display: block; margin: 0 auto 3px; }
.am figcaption .am-tag { display: inline-block; margin-top: 0; }
.am figcaption .am-tag--orig { color: #04060b; }
.am figcaption .am-tag--new { color: var(--sea); }
.am-phone__body { line-height: normal; }