/* Final editorial surfaces and restrained motion for the current sections. */
.section-anchor { position: absolute; top: 0; left: 0; scroll-margin-top: 88px; pointer-events: none; }
html.case-preview #cases { display: block !important; }
.site-nav a { position: relative; text-decoration: none; transition: color 180ms ease, transform 180ms ease; }
.site-nav a::after { content: none; display: none; }
.site-header .site-nav a:not(.nav-contact):hover,
.site-header .site-nav a:not(.nav-contact):focus-visible {
  transform: scale(1.08);
  text-decoration: none;
}
@media (max-width: 860px) {
  .site-header .site-nav.is-open a:not(.nav-contact):hover,
  .site-header .site-nav.is-open a:not(.nav-contact):focus-visible {
    transform: none;
  }
}
.site-header .site-nav .nav-contact {
  background: var(--action);
  color: var(--action-ink);
  box-shadow: none;
}
.footer-cta-button {
  background: var(--action);
  color: var(--action-ink);
  border-color: var(--action);
  box-shadow: none;
}
.site-header .site-nav .nav-contact:hover,
.site-header .site-nav .nav-contact:focus-visible {
  background: var(--cta-hover, #3357d7);
  border-color: var(--cta-hover, #3357d7);
  color: var(--action-ink);
  box-shadow: none;
  filter: none;
}
.footer-cta-button:hover,
.footer-cta-button:focus-visible {
  background: var(--cta-hover, #3357d7);
  border-color: var(--cta-hover, #3357d7);
  color: var(--action-ink);
  box-shadow: none;
  filter: none;
}
html[data-skin="nocturne"] .site-header .site-nav .nav-contact:hover,
html[data-skin="nocturne"] .site-header .site-nav .nav-contact:focus-visible,
html[data-skin="nocturne"] .footer-cta-button:hover,
html[data-skin="nocturne"] .footer-cta-button:focus-visible {
  background: var(--cta-hover, #4087f7) !important;
  border-color: var(--cta-hover, #4087f7) !important;
  color: #061026 !important;
  box-shadow: none !important;
  filter: none !important;
}
@media (min-width: 861px) {
  #footer .footer-cta-button { display: none !important; }
  #footer .footer-cta-stack { margin-top: 18px; }
}
.section .eyebrow, .section h2 { text-wrap: balance; }
#studio-console.studio-console { z-index: auto; isolation: auto; background: transparent; padding-block: clamp(40px, 5vw, 72px); }
#studio-console .sc-frame {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 82px minmax(0, 1fr);
  height: clamp(540px, calc(100svh - 120px), 650px); min-height: 540px; padding: 0; overflow: hidden;
  border: 0; outline: 0; border-radius: 24px;
  background: var(--pack-card-bg, #eef0f3);
  box-shadow: none;
}
#studio-console .sc-main { grid-row: 2; padding: 28px 40px 36px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; min-height: 0; }
#studio-console .sc-stage { position: relative; display: grid; height: 100%; min-height: 480px; }
#studio-console .sc-panel { grid-area: 1 / 1; position: relative; inset: auto; height: auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #70849b55 transparent; }
#studio-console .sc-panel.is-active { visibility: visible; opacity: 1; }
#studio-console .sc-panel:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; z-index: 0; }
#studio-console .sc-rail { grid-row: 1; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 20px 40px 0; gap: 20px; }
#studio-console .sc-tabs { flex-direction: row; gap: 4px; padding: 4px; border: 0; border-radius: 30px; background: #e4eef60b; }
#studio-console .sc-tab { width: auto; min-height: 42px; padding: 10px 18px; font-size: .875rem; border: 0; border-radius: 24px; background: transparent; box-shadow: none; transform: none; }
#studio-console .sc-tab[aria-selected="true"] { background: linear-gradient(155deg, #e8f0f5, #cfdee8); color: #132b3c; box-shadow: 0 4px 14px #0002; transform: none; }
#studio-console .sc-signoff { position: static; border: 0; padding: 0; margin: 0; font-size: .65rem; letter-spacing: .13em; color: #9baebe; text-align: right; }
#studio-console .sc-signoff br { display: none; }
#studio-console .section-anchor { top: clamp(40px, 5vw, 72px); }
#studio-console .sc-kicker { font-size: var(--type-micro); color: var(--muted); }
#studio-console .sc-heading { max-width: 28ch; font-size: var(--type-studio); line-height: 1.08; color: var(--ink); }
#studio-console .sc-panel--testimonials { grid-template-columns: minmax(0, 1.45fr) minmax(220px, .85fr); column-gap: 32px; align-items: center; }
#studio-console .sc-quote {
  max-width: min(46rem, 100%);
  font-family: var(--body);
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.32;
}
#studio-console .sc-author strong {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  text-transform: none;
}
#studio-console .sc-author > div > span { font-size: .8rem; letter-spacing: 0; }
#studio-console .sc-visual { margin: 0; border-radius: 16px; min-height: 0; }
#studio-console .sc-visual::after { background: linear-gradient(90deg, #101e2b22, transparent 35%); }
#studio-console .sc-proof-visual { min-height: 0; }
#studio-console .sc-panel--faq > header,
#studio-console .sc-panel--faq .sc-heading { display: none; }
#studio-console .sc-panel--faq { grid-template-rows: minmax(0, 1fr); gap: 0; min-height: 0; }
#studio-console .sc-faq-board { min-height: 0; margin-top: 0; align-self: stretch; }
#studio-console .sc-faq-trigger { min-height: 38px; }
#studio-console .sc-faq-detail p:last-child { font-size: 1rem; }
#studio-console .sc-faq-item.is-active .sc-faq-trigger { background: #d1e3ef0e; box-shadow: inset 2px 0 #8caabf; }
#studio-console .sc-faq-board::before { opacity: .45; }
#studio-console .sc-proof-row { min-height: 0; }
#studio-console .sc-proof-num { color: #cfdfeb; }
.packs-clarity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0 26px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.packs-clarity span {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--paper) 92%, var(--ink));
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.35;
}
.packs-clarity strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
#packs .pack-rail-card-head { align-items: flex-start; }
#packs .pack-rail-card-head > div { min-width: 0; }
#packs .pack-rail-card-meta { display: block; margin-top: 8px; color: var(--muted); font: 500 var(--type-meta)/1.4 var(--mono); letter-spacing: .025em; }
@media (max-width: 899px) { .packs-clarity { grid-template-columns: 1fr; margin-bottom: 18px; } .packs-clarity span { padding: 12px 14px; } }
@media (max-width: 899px) {
  #studio-console .sc-frame { height: auto !important; min-height: 0 !important; grid-template-rows: auto auto !important; overflow: hidden !important; padding: 0; }
  #studio-console .sc-rail { padding: 18px 20px 0; justify-content: center; }
  #studio-console .sc-main { padding: 18px 24px 22px; height: auto !important; overflow: hidden !important; }
  #studio-console .sc-stage { position: relative; height: auto !important; min-height: 0; }
  #studio-console .sc-signoff { display: none; }
  #studio-console .sc-panel--testimonials {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 16px;
  }
  #studio-console .sc-panel--testimonials.is-active {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible;
  }
  #studio-console .sc-panel--testimonials:not(.is-active) {
    position: relative !important;
    inset: auto !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #studio-console .sc-visual,
  #studio-console .sc-visual img { display: none !important; }
  #studio-console .sc-quote {
    max-width: none;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
    line-height: 1.32;
  }
  #studio-console .sc-controls { display: none; }
  #studio-console .sc-proof-layout { grid-template-columns: 1fr; grid-template-rows: 170px auto; gap: 18px; }
  #studio-console .sc-proof-visual { height: 170px; aspect-ratio: auto; }
  #studio-console .sc-proof-row { padding: 12px 0; }
  #studio-console .sc-panel--faq { display: flex; }
  #studio-console .section-anchor { top: 40px; }
  #studio-console .sc-faq-board { margin-top: 0; }
}
@media (max-width: 560px) {
  /* 16px put the testimonial frame 2px inside the gutter every other card
     sits on; close enough to look like a mistake rather than a choice. */
  #studio-console .sc-wrap.container { padding-inline: var(--gutter); }
  #studio-console .sc-frame { border-radius: 20px; }
  #studio-console .sc-main { padding-inline: 20px; }
  #studio-console .sc-rail { padding-inline: 16px; }
  #studio-console .sc-tab { padding: 10px 13px; font-size: .8rem; }
  #studio-console .sc-tab-dot { width: 5px; height: 5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .editorial-reveal { opacity: 0; transform: translateY(14px); transition: opacity 650ms ease, transform 750ms cubic-bezier(.22,1,.36,1); transition-delay: var(--editorial-delay, 0ms); }
  .editorial-reveal.is-revealed { opacity: 1; transform: none; }
  .work-tile img { transition: transform 600ms cubic-bezier(.22,1,.36,1); }
  .work-tile:hover img { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) { .editorial-reveal { opacity: 1; transform: none; } }
@media (min-width: 981px) {
  #process-radial .pr-heading {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 80px);
    align-items: end;
  }
  #process-radial .pr-heading .eyebrow { grid-column: 1 / -1; }
  #process-radial .pr-heading h2 { max-width: 24ch; }
  #process-radial .pr-lede { margin: 0 0 4px; max-width: 43ch; }
  #process-radial .pr-board { max-width: clamp(740px, calc((100svh - 350px) * 1.6667), 1040px); min-height: 0; margin: -12px auto 0; }
  #process-radial .pr-svg-desk .pr-active,
  #process-radial .pr-svg-desk .pr-hover-seg { display: none; }
  #process-radial .pr-step[data-place="bl"] .pr-copy { left: -30px; right: auto; top: 50px; width: 170px; text-align: left; }
  #process-radial .pr-step[data-place="br"] .pr-copy { right: -30px; left: auto; top: 50px; width: 170px; text-align: right; }
  #process-radial .pr-well-copy { top: 92%; }
}
.pr-summary { margin: 0 0 24px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.pr-summary strong { color: var(--ink); font-weight: 600; }
#taste-stage .taste-card-motion { perspective: 1000px; }
#taste-stage .taste-card { transform-style: preserve-3d; transition: box-shadow 350ms ease, border-color 350ms ease; }
#taste-stage .taste-card::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(280px circle at var(--shine-x,30%) var(--shine-y,0%), #ffffff30, transparent 65%); opacity: 0; transition: opacity 300ms ease; }
#taste-stage .taste-card:hover::before { opacity: 1; }
#taste-stage .taste-card--pick { background: radial-gradient(ellipse at 10% 0, #31557680, transparent 58%), linear-gradient(145deg, #172d43, #0a1726 75%); border-color: #90b5d980; box-shadow: 0 3px 0 #081320, 0 5px 0 #658eb44d, 0 28px 48px #0b203b30, inset 0 1px 0 #d7eaff7a; }
#taste-stage .taste-card--pick .taste-card-label { color: #d4e7f8; width: fit-content; padding: 6px 9px; border: 1px solid #bddfff33; border-radius: 6px; background: #d3e9ff0d; letter-spacing: .13em; }
#taste-stage .taste-card--pick .taste-card-star { color: #94c4f6; text-shadow: 0 0 12px #70b5ff80; }
#taste-stage .taste-card--pick .taste-card-points { color: #e0e9f1; }
#taste-stage .taste-card--pick .taste-card-vs { color: #a2c6e8; }
#taste-stage .taste-card--pick::after { animation: none; opacity: .32; background: linear-gradient(140deg,#d5eaff14,transparent 38%,transparent 80%,#94bfee15); }
#taste-stage .taste-card--pick:hover { border-color: #b8d9f3; box-shadow: 0 3px 0 #081320, 0 5px 0 #82b8e566, 0 34px 58px #0b203b40, 0 0 30px #72a7d714, inset 0 1px 0 #e6f4ff99; }
#taste-stage .taste-plinth { filter: drop-shadow(8px 16px 12px rgb(var(--taste-cast) / .13)); }
#taste-stage .taste-plinth-cap { height: 23px; clip-path: polygon(0 100%,100% 100%,88% 0,12% 0); background: linear-gradient(155deg, var(--surface), color-mix(in srgb,var(--muted) 24%,var(--paper))); }
#taste-stage .taste-plinth-rise { background: linear-gradient(110deg, color-mix(in srgb,var(--muted) 25%,var(--paper)), var(--surface) 65%, color-mix(in srgb,var(--muted) 34%,var(--paper))); box-shadow: inset 0 1px #ffffff80, inset -10px 0 20px #12253b12; }
#taste-stage .taste-lane--pick .taste-plinth-cap { background: linear-gradient(155deg,#a9c0d5,#355574); }
#taste-stage .taste-lane--pick .taste-plinth-rise { background: linear-gradient(105deg,#183149,#42637f 65%,#172d43); border-color: #345777; box-shadow: inset 0 1px #bddfff99, inset 0 4px 12px #13223530; }
#taste-stage.taste-stage,
#packs.packs-outcomes,
#compare.compare-lite,
#process-radial.process-radial {
  background: transparent;
}
@media (prefers-reduced-motion: reduce) { #taste-stage .taste-card::before { display: none; } }
@media (min-width: 981px) {
  .pr-summary { position: absolute; left: 50%; top: 58%; width: 43%; max-width: 360px; margin: 0; padding: 10px 14px; transform: translate(-50%, -50%); text-align: center; font-size: clamp(.875rem,1.08vw,1rem); line-height: 1.6; background: var(--paper); box-shadow: 0 0 18px 8px var(--paper); border-radius: 12px; z-index: 2; }
}
html:not([data-skin="nocturne"]) .site-footer { --footer-night: #dcdce0; --dark-ink: var(--ink); background: transparent !important; color: var(--ink); }
html:not([data-skin="nocturne"]) .site-footer::after { background: linear-gradient(180deg, var(--paper), #dcdce0 65%, #d4d6da); }
html:not([data-skin="nocturne"]) .site-footer > .footer-stars { display: none; }
html[data-skin="nocturne"] .site-footer > .footer-stars[data-sky-owned="stage"] { display: none; }
html:not([data-skin="nocturne"]) .footer-brand .brand-mark { background: var(--ink) !important; }
html:not([data-skin="nocturne"]) .site-footer .footer-col a:hover,
html:not([data-skin="nocturne"]) .footer-email:hover { color: var(--accent); }
html:not([data-skin="nocturne"]) .footer-stage::before { display: none; }
@media (max-width: 860px) {
  .hero .hero-services { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .hero .hero-group { text-align: left; padding-inline: 12px; justify-self: stretch; }
  .hero .hero-mode { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; justify-items: start; justify-content: start; text-align: left; gap: 10px; min-height: 48px; padding: 8px 12px; border-right: 0; }
  .hero .hero-mode svg { width: 26px; height: 26px; }
  .hero .hero-mode span { transform: none; }
  .hero .hero-mode--left { grid-column: 1; }
  .hero .hero-mode--right { grid-column: 2; }
  .hero .hero-mode--video, .hero .hero-mode--3d { grid-row: 2; }
  .hero .hero-mode--ugc, .hero .hero-mode--configurator { grid-row: 3; }
  .hero .hero-mode--imagery, .hero .hero-mode--ar { grid-row: 4; }
  .hero .hero-mode:last-child { grid-column: 2; }
  .hero .hero-mode[aria-checked="true"], .hero .hero-scene.is-roulette .hero-mode[aria-checked="true"] { transform: none; border-radius: 8px; }
}

/* Consistent navy chassis, with page scrolling allowed at panel boundaries. */
#studio-console .sc-frame {--frame-x:18px;--frame-y:12px;position:relative;background:var(--pack-card-bg,#eef0f3);border-radius:24px;box-shadow:none;}
#studio-console .sc-panel {overscroll-behavior:auto;}
#studio-console .sc-frame::before,
#studio-console .sc-frame::after {
  position:absolute;left:var(--frame-x);right:var(--frame-x);height:1px;z-index:3;
  background:color-mix(in srgb,#fff 16%,transparent);content:"";pointer-events:none;
}
#studio-console .sc-frame::before {top:var(--frame-y);}
#studio-console .sc-frame::after {bottom:var(--frame-y);}
#studio-console .sc-frame > .outcomes-mark,
#studio-console .sc-frame > .outcomes-cross {z-index:4;}
#studio-console .sc-tab[aria-selected="true"] {background:#edf0f4;color:#0b1734;border-radius:14px;}
#studio-console .sc-tabs {border-radius:18px;}
#studio-console .sc-quote,#studio-console .sc-heading {color:var(--ink);}
#studio-console .sc-author strong {color:var(--ink);}
#studio-console .sc-author span {color:var(--muted);}
#packs.packs-outcomes .pack-rail-card,#packs.packs-outcomes .pack-rail-card.is-expanded,#packs.packs-outcomes .pack-rail-card:focus-within {border-radius:20px!important;overflow:hidden!important;clip-path:inset(0 round 20px);isolation:isolate;}
#packs .pack-rail-card-detail {border-radius:0 0 20px 20px;}
#process-radial .pr-lede {color:var(--muted);font-size:var(--type-body);line-height:1.85;max-width:43ch;}
@media(min-width:981px) {
 #process-radial .pr-board {margin-top:24px;}
 #process-radial .pr-copy p {opacity:0;transform:translateY(7px);transition:opacity 350ms ease,transform 450ms ease;}
 #process-radial .pr-step:is(.is-active,.is-focus) .pr-copy p {opacity:1;transform:none;}
 #process-radial .pr-copy strong {display:block;opacity:.55;transform-origin:center;transition:color 350ms,opacity 350ms,transform 350ms;}
 #process-radial .pr-step:is(.is-active,.is-focus) .pr-copy strong {opacity:1;color:var(--accent);transform:translateY(-2px) scale(1.06);}
}
#taste-stage .taste-stage-intro .taste-stage-led {position:relative;inset:auto;width:auto;max-width:520px;margin:18px auto;display:flex;align-items:center;justify-content:center;gap:9px;padding:0;border:0;box-shadow:none;background:none;}
#taste-stage .taste-stage-led-kicker {font:600 .8rem var(--body);white-space:nowrap;}
#taste-stage .taste-stage-led-copy {font-size:.8rem;}
#taste-stage .taste-planes {display:block;}
#taste-stage .taste-lane--pick {--plinth-h:100px;}
#taste-stage .taste-lane--agency {--plinth-h:62px;}
#taste-stage .taste-lane--diy {--plinth-h:28px;}
#taste-stage .taste-lane--pick::before {content:'';position:absolute;inset:-18% -28% 8%;z-index:-1;background:radial-gradient(ellipse at 50% 46%,#74b6ee66,transparent 66%);pointer-events:none;filter:blur(2px);}
#taste-stage .taste-lane--pick .taste-plinth {position:relative;}
#taste-stage .taste-lane--pick .taste-plinth::after {content:'';position:absolute;inset:-18% -12% -28%;z-index:-1;border-radius:40%;background:radial-gradient(ellipse at 50% 40%,#7ec2ff88,transparent 68%);filter:blur(10px);pointer-events:none;opacity:.85;animation:pick-plinth-glow 4.8s ease-in-out infinite;}
@keyframes pick-plinth-glow {0%,100%{opacity:.55;transform:scale(1);}50%{opacity:.95;transform:scale(1.04);}}
@media (prefers-reduced-motion:reduce) {#taste-stage .taste-lane--pick .taste-plinth::after {animation:none;}}
#taste-stage .taste-card--pick {box-shadow:0 1px 0 #c1e4ff,0 7px 0 #14283b,0 20px 36px #112b4a35,0 0 64px #6cb3ed33,inset 0 1px 0 #e1f2ff80;}
#taste-stage .taste-plinth {width:92%;filter:drop-shadow(9px 18px 15px #10233b29);}
#taste-stage .taste-plinth-cap {height:30px;clip-path:polygon(0 100%,100% 100%,91% 0,9% 0);background:linear-gradient(165deg,#f0f4f7,#99adbd);}
#taste-stage .taste-plinth-rise {border-radius:0 0 5px 5px;background:linear-gradient(90deg,#8498a9,#b8c6d0 12%,#d7e0e6 75%,#7d94a6 76%,#667f93);box-shadow:inset 0 1px #fff9,inset 0 -12px 20px #172d4320;}
#taste-stage .taste-lane--pick .taste-plinth-cap {background:linear-gradient(160deg,#c5dff1,#668bab);}
#taste-stage .taste-lane--pick .taste-plinth-rise {background:linear-gradient(90deg,#203c57,#3d617e 12%,#547994 75%,#203b53 76%,#142b41);box-shadow:inset 0 1px #d7efffcc,0 -8px 35px #7bb9ed25;}
#taste-stage .taste-podium-floor {opacity:1;left:3%;right:3%;bottom:2px;height:78px;z-index:1;pointer-events:none;}
#taste-stage .taste-podium-floor-cap {height:32px;clip-path:polygon(1% 100%,99% 100%,93% 0,7% 0);background:linear-gradient(180deg,#f4f4f6,#c5c5cc);border:1px solid #ffffffaa;box-shadow:inset 0 1px #fff,0 0 0 1px #0001;}
#taste-stage .taste-podium-floor-front {height:42px;background:linear-gradient(180deg,#b4b4bc 0%,#8e8e96 55%,#7a7a82);border:1px solid #00000014;box-shadow:inset 0 8px 14px #fff4,0 22px 36px #10101826;}
#taste-stage .taste-podium-floor::after {content:'';position:absolute;left:8%;right:8%;top:100%;height:22px;background:linear-gradient(180deg,#10101818,transparent);filter:blur(6px);}
html[data-skin="nocturne"] #taste-stage .taste-podium-floor-cap {background:linear-gradient(180deg,#4a5d72,#243140);border-color:#8aa4bc44;box-shadow:inset 0 1px #cfe4ff55;}
html[data-skin="nocturne"] #taste-stage .taste-podium-floor-front {background:linear-gradient(180deg,#2a3a4c,#141c26);border-color:#0006;box-shadow:inset 0 1px #9ec0dd33,0 22px 36px #0008;}
html[data-skin="nocturne"] #taste-stage .taste-podium-floor::after {background:linear-gradient(180deg,#7eb6e622,transparent);}
@media(max-width:860px) {#taste-stage .taste-stage-intro .taste-stage-led {flex-wrap:wrap;} #taste-stage .taste-lane--pick {--plinth-h:60px;} #taste-stage .taste-lane--agency {--plinth-h:38px;} #taste-stage .taste-lane--diy {--plinth-h:20px;}}
@media(prefers-reduced-motion:reduce) {#process-radial .pr-copy p,#process-radial .pr-copy strong {opacity:1!important;transform:none!important;}}

/* Compact editorial introduction and a coordinated navy podium. */
@media(min-width:861px){
 #taste-stage .taste-stage-intro {max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:8%;text-align:left;margin-bottom:10px;}
 #taste-stage .taste-stage-intro .eyebrow {grid-column:1;grid-row:1;justify-content:flex-start;}
 #taste-stage .taste-stage-intro h2 {grid-column:1;grid-row:2 / 5;margin:8px 0 0;}
 #taste-stage .taste-stage-sub {grid-column:2;grid-row:1 / 3;align-self:end;margin:0 0 10px;}
 #taste-stage .taste-stage-lede {grid-column:2;grid-row:3;margin:0;max-width:50ch;}
 #taste-stage .taste-stage-intro .taste-stage-led {grid-column:2;grid-row:4;justify-content:flex-start;margin:12px 0 0;}
 #taste-stage .taste-stage-tabs {display:flex;justify-content:center;margin:22px auto 0;}
}
#taste-stage .taste-led-path {display:none;}
#taste-stage .taste-planes {display:block;opacity:1;inset:8% 4% 8%;}
#taste-stage .taste-plane {border:1px solid #ffffff66;border-radius:18px;box-shadow:inset 0 1px #fff8, 8px 14px 28px #10101814;transform:none;}
#taste-stage .taste-plane--a {background:linear-gradient(145deg,#f3d9e4,#e8c4d4);}
#taste-stage .taste-plane--b {background:linear-gradient(145deg,#d5e4f4,#b9d0ea);}
#taste-stage .taste-plane--c {background:linear-gradient(145deg,#e7f0d8,#cfe0b8);}
#taste-stage .taste-plane--d {background:linear-gradient(145deg,#f7e6c8,#ecd4a8);}
#taste-stage .taste-plane--e {display:block;background:linear-gradient(145deg,#ddd4f0,#c8bce3);}
#taste-stage .taste-plane--f {background:linear-gradient(145deg,#d8f0ea,#b7ddd4);}
#taste-stage .taste-plane--g {background:linear-gradient(145deg,#f0d8d4,#e0bdb8);}
#taste-stage .taste-plane--h {background:linear-gradient(145deg,#dce6f2,#c5d2e4);}
html[data-skin="nocturne"] #taste-stage .taste-plane {border-color:#ffffff18;box-shadow:inset 0 1px #ffffff14, 8px 14px 28px #0006;}
html[data-skin="nocturne"] #taste-stage .taste-plane--a {background:linear-gradient(145deg,#3d2a36,#2a1c26);}
html[data-skin="nocturne"] #taste-stage .taste-plane--b {background:linear-gradient(145deg,#243448,#1a2636);}
html[data-skin="nocturne"] #taste-stage .taste-plane--c {background:linear-gradient(145deg,#2c3824,#1f2818);}
html[data-skin="nocturne"] #taste-stage .taste-plane--d {background:linear-gradient(145deg,#3a3020,#2a2318);}
html[data-skin="nocturne"] #taste-stage .taste-plane--e {background:linear-gradient(145deg,#2e2740,#211c30);}
html[data-skin="nocturne"] #taste-stage .taste-plane--f {background:linear-gradient(145deg,#1f3330,#172624);}
html[data-skin="nocturne"] #taste-stage .taste-plane--g {background:linear-gradient(145deg,#3a2826,#2a1d1c);}
html[data-skin="nocturne"] #taste-stage .taste-plane--h {background:linear-gradient(145deg,#243040,#1a2430);}
#taste-stage .taste-card {background:radial-gradient(ellipse at 10% 0%,#34496277,transparent 62%),linear-gradient(145deg,#18283d,#0c172a 85%);border-color:#7691ae44;color:#d5deea;box-shadow:inset 0 1px #b4cae344,0 4px 0 #071120,0 18px 32px #08142630;}
#taste-stage .taste-card-points {color:#d5deea;}
#taste-stage .taste-card-vs {color:#a8c6e8;}
#taste-stage .taste-card-label {width:100%;text-align:center;color:#e4ebf5;font:600 clamp(.85rem,1.2vw,1.1rem)/1.3 var(--body);letter-spacing:.06em;padding:5px 0 10px;}
#taste-stage .taste-card--pick .taste-card-label {display:flex;width:100%;justify-content:center;align-items:center;gap:8px;padding:5px 0 12px;background:none;border:0;border-radius:0;text-align:center;font:650 clamp(1.05rem,1.5vw,1.35rem)/1.3 var(--body);letter-spacing:.07em;color:#f4f8ff;}
#taste-stage .taste-card--pick {background:radial-gradient(ellipse at 45% 0%,#36567866,transparent 62%),linear-gradient(145deg,#142840,#080f21);box-shadow:inset 0 1px #c3dcf466,0 5px 0 #060d1b,0 22px 36px #06132555;}
#taste-stage .taste-lane--pick::before {opacity:var(--landing-glow,0);background:radial-gradient(ellipse at 50% 45%,#70a9e666,transparent 64%);transition:opacity 180ms linear;}
#taste-stage .taste-card--pick::after {opacity:calc(var(--landing-glow,0) * .4);}
#taste-stage .taste-card--pick:hover {box-shadow:inset 0 1px #d3e8ff99,0 5px 0 #060d1b,0 26px 44px #06132566;}
#taste-stage .taste-plinth-cap {background:linear-gradient(155deg,#465b73,#1e3049 70%,#10223b);border-color:#7994b13d;}
#taste-stage .taste-plinth-rise {background:linear-gradient(90deg,#0b172b,#24364d 12%,#1b2c43 75%,#0b172a 76%,#071123);box-shadow:inset 0 1px #a4bfd755,inset 0 -10px 15px #02091866;}
#taste-stage .taste-lane--pick .taste-plinth-cap {background:linear-gradient(155deg,#657e97,#293d56 70%,#12263e);}
#taste-stage .taste-lane--pick .taste-plinth-rise {background:linear-gradient(90deg,#091629,#2b4159 12%,#20334b 75%,#0b192d 76%,#060e20);box-shadow:inset 0 1px #c4def177,inset 0 -10px 20px #02071855;}

#taste-stage .taste-card-label {justify-content:center;}
#taste-stage .taste-planes {opacity:1;inset:14% 8% 14%;}
/* Unified surfaces and stable responsive geometry. */
:root {--studio-navy:#0b1734;}
html[data-skin="nocturne"] {--studio-navy:#101e3c;}
.page-stars {display:none!important;}
@media(min-width:861px){
 .hero .hero-services {position:absolute!important;inset:0 clamp(10px,5vw,92px)!important;height:auto!important;}
 .hero .hero-mode {position:absolute!important;}
 .hero .hero-mode--video,.hero .hero-mode--3d {top:20%!important;}
 .hero .hero-mode--ugc,.hero .hero-mode--configurator {top:46%!important;}
 .hero .hero-mode--imagery,.hero .hero-mode--ar {top:72%!important;}
 .hero .hero-mode--left {left:0!important;right:auto!important;}
 .hero .hero-mode--right {right:0!important;left:auto!important;}
}
@media(max-width:860px){
 /* The 2-column grid that used to live here fought the masonry in
    godly-pass.css with !important and forced every tile to 1/1 — plus a
    16/9 first card, which is the landscape shape this section dropped.
    The masonry handles both breakpoints now, so only the hidden-tile rule
    is still doing work. */
 #work .work-row {display:contents!important;}
 #work .work-tile[hidden] {display:none!important;}
}

/* A phone scrolls the whole grid in one column, so fourteen tiles is a long way
   down before anything else on the page appears. Three come out on mobile —
   chosen because each has a near neighbour in the same category still showing,
   so the range of work on display does not narrow. They are still there on a
   desktop, where the grid is four columns and the length costs nothing. */
@media (max-width: 860px) {
  /* The hiding itself is done in app.js, through the same `hidden` flag the
     filter uses, so the masonry packer never reserves a cell for these. This is
     only the no-JS fallback. */
  html:not(.js) #work .work-tile--phone-hide { display: none; }
}
#packs .outcomes-panel,#studio-console .sc-frame {background:radial-gradient(ellipse at 50% 0%,#ffffff09,transparent 60%),var(--studio-navy)!important;box-shadow:0 24px 50px #07132926;}
#studio-console {--sc-ivory:#edf1f7;--sc-muted:#aab8cc;}
#studio-console .sc-quote,#studio-console .sc-heading,#studio-console .sc-author strong,#studio-console .sc-proof-row strong,#studio-console .sc-proof-num {color:#edf1f7!important;}
#studio-console .sc-kicker,#studio-console .sc-author span,#studio-console .sc-signoff,#studio-console .sc-faq-trigger,#studio-console .sc-faq-detail,#studio-console .sc-proof-row p {color:#aab8cc!important;}
#studio-console .sc-tabs {background:#ffffff0b;}
#studio-console .sc-main {background:transparent!important;}
#studio-console .sc-tab {color:#bac7d8;}
#studio-console .sc-tab[aria-selected="true"] {color:#0b1734;background:#edf1f7;}
#taste-stage .taste-stage-intro .taste-stage-led {grid-column:2;grid-row:1/5;align-self:center;}
#taste-stage .taste-stage-intro h2 {grid-row:2;}
#taste-stage .taste-stage-arena {min-height:0;padding:10px 0 32px;}
#taste-stage .taste-lanes {gap:0;padding:30px 2% 0;}
#taste-stage .taste-lane {position:relative;}
#taste-stage .taste-plinth {width:100%;margin:0;filter:none;}
#taste-stage .taste-plinth-cap {height:18px;clip-path:polygon(0 100%,100% 100%,94% 0,6% 0);}
#taste-stage .taste-plinth-rise {border-radius:0;}
#taste-stage .taste-podium-floor {left:2%;right:2%;bottom:0;height:34px;}
#taste-stage .taste-podium-floor-cap {height:0;border:0;}
#taste-stage .taste-podium-floor-front {height:34px;border-radius:0 0 8px 8px;background:linear-gradient(#28364c,#101a2e)!important;border:0;}
@media (min-width: 861px) {
  #taste-stage .taste-card-motion {width:90%;}
}
#taste-stage .taste-card,#taste-stage .taste-card--pick {background:linear-gradient(145deg,#ffffff16,#ffffff04),rgba(11,23,52,.2)!important;backdrop-filter:blur(18px) saturate(.55);-webkit-backdrop-filter:blur(18px) saturate(.55);border:1px solid #ffffff99;box-shadow:inset 0 1px #ffffffcc,inset 0 -1px #10223b30,0 14px 32px #09182f24;}
#taste-stage .taste-card--pick {border-color:#ffffffee;box-shadow:inset 0 1px 2px #fff,0 16px 36px #07173333;}
#taste-stage .taste-card-label,#taste-stage .taste-card--pick .taste-card-label,#taste-stage .taste-card-points,#taste-stage .taste-card-vs {color:var(--ink);}
#taste-stage .taste-card-shot {border:1px solid #ffffff66;box-shadow:0 1px 0 #ffffff88;}
#taste-stage .taste-plane,html[data-skin="nocturne"] #taste-stage .taste-plane {background:linear-gradient(135deg,#ffffff18,#91a3bc12)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #93a4bb44;box-shadow:inset 0 1px #ffffff99,5px 9px 20px #07172d14;}
#taste-stage .taste-lane--pick .taste-plinth::after {animation:none;opacity:calc(var(--landing-glow,0)*.5);}
#taste-stage .taste-lane--pick::before {background:radial-gradient(ellipse,#97b9dc66,transparent 65%);}
@media(min-width:861px) and (min-height:700px){
 #taste-stage.taste-stage {overflow:visible;padding-bottom:72px;}
 #taste-stage .taste-stage-shell {position:sticky;top:var(--header, 72px);}
 #taste-stage .taste-card-shot {max-height:206px;min-height:0;aspect-ratio:4/5;}
 #taste-stage .taste-card--pick .taste-card-shot {max-height:252px;}
}
@media(max-width:860px){#taste-stage .taste-lanes{gap:12px;}#taste-stage .taste-card-motion{width:100%;}#taste-stage .taste-stage-intro .taste-stage-led{margin:16px auto;}#taste-stage .taste-podium-floor{display:none;} }

#taste-stage .taste-stage-tabs {
  display:flex;
  justify-content:center;
  position:relative;
  z-index:4;
  width:fit-content;
  margin:10px auto 0;
}
@media(max-width:860px){
  #taste-stage .taste-stage-tabs {margin-top:16px;}
}

/* Visual QA restorations after conflicting late patches. */
#studio-console .sc-frame {
  background: var(--pack-card-bg, #eef0f3) !important;
  box-shadow: none !important;
}
#studio-console .sc-quote,
#studio-console .sc-heading,
#studio-console .sc-author strong,
#studio-console .sc-proof-row strong,
#studio-console .sc-proof-num { color: var(--ink) !important; }
#studio-console .sc-kicker,
#studio-console .sc-author span,
#studio-console .sc-signoff,
#studio-console .sc-faq-trigger,
#studio-console .sc-faq-detail,
#studio-console .sc-proof-row p { color: var(--muted) !important; }
#studio-console .sc-tab { color: var(--muted); }
#studio-console .sc-tab[aria-selected="true"] { color:#0b1734; background:#edf1f7; }

#taste-stage .taste-plane,
html[data-skin="nocturne"] #taste-stage .taste-plane {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Decorative planes animate their own scale. */
}
#taste-stage .taste-plane--a { background: linear-gradient(145deg,#f3d9e4,#e8c4d4) !important; }
#taste-stage .taste-plane--b { background: linear-gradient(145deg,#d5e4f4,#b9d0ea) !important; }
#taste-stage .taste-plane--c { background: linear-gradient(145deg,#e7f0d8,#cfe0b8) !important; }
#taste-stage .taste-plane--d { background: linear-gradient(145deg,#f7e6c8,#ecd4a8) !important; }
#taste-stage .taste-plane--e { background: linear-gradient(145deg,#ddd4f0,#c8bce3) !important; }
#taste-stage .taste-plane--f { background: linear-gradient(145deg,#d8f0ea,#b7ddd4) !important; }
#taste-stage .taste-plane--g { background: linear-gradient(145deg,#f0d8d4,#e0bdb8) !important; }
#taste-stage .taste-plane--h { background: linear-gradient(145deg,#dce6f2,#c5d2e4) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--a { background: linear-gradient(145deg,#3d2a36,#2a1c26) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--b { background: linear-gradient(145deg,#243448,#1a2636) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--c { background: linear-gradient(145deg,#2c3824,#1f2818) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--d { background: linear-gradient(145deg,#3a3020,#2a2318) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--e { background: linear-gradient(145deg,#2e2740,#211c30) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--f { background: linear-gradient(145deg,#1f3330,#172624) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--g { background: linear-gradient(145deg,#3a2826,#2a1d1c) !important; }
html[data-skin="nocturne"] #taste-stage .taste-plane--h { background: linear-gradient(145deg,#243040,#1a2430) !important; }

#taste-stage .taste-podium-floor {
  left: 3%;
  right: 3%;
  bottom: 0;
  height: 86px !important;
  z-index: 1;
  opacity: 1;
}
#taste-stage .taste-podium-floor-cap {
  display: block;
  height: 34px !important;
  border: 1px solid #ffffffaa;
  clip-path: polygon(1% 100%,99% 100%,93% 0,7% 0);
  background: linear-gradient(180deg,#f4f4f6,#c5c5cc) !important;
  box-shadow: inset 0 1px #fff, 0 0 0 1px #0001;
}
#taste-stage .taste-podium-floor-front {
  height: 52px !important;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg,#b4b4bc 0%,#8e8e96 55%,#7a7a82) !important;
  border: 1px solid #00000014 !important;
  box-shadow: inset 0 8px 14px #fff4, 0 22px 36px #10101826;
}
html[data-skin="nocturne"] #taste-stage .taste-podium-floor-cap {
  background: linear-gradient(180deg,#4a5d72,#243140) !important;
  border-color: #8aa4bc44;
}
html[data-skin="nocturne"] #taste-stage .taste-podium-floor-front {
  background: linear-gradient(180deg,#2a3a4c,#141c26) !important;
}

html[data-skin="nocturne"] .hero-stars {
  display: block;
  z-index: 1;
}
.hero-sky-near-mask { z-index: 2 !important; }
html[data-skin="nocturne"] .page-stars { display: none !important; }
/* Quiet glass, with light confined to the material rather than floating over media. */
#packs .packs-head-led {display:grid;grid-template-columns:18px 1fr;gap:7px 12px;max-width:390px;background:none!important;filter:none!important;box-shadow:none!important;}
#packs .packs-head-led::before,#packs .packs-head-led::after {display:none!important;}
#packs .packs-head-led .taste-stage-led-kicker {font-size:1.12rem;white-space:nowrap;}
#packs .packs-head-led .taste-stage-led-copy {grid-column:2;font-size:1rem;line-height:1.5;}
#packs .outcomes-panel,#studio-console .sc-frame {background:linear-gradient(160deg,#ffffff0d,transparent 45%),color-mix(in srgb,var(--studio-navy) 94%,transparent)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #a9c4e32b;box-shadow:inset 0 1px #d9e9ff38,inset 0 -1px #02091e70,0 20px 45px #09152e26;}
#packs .pack-rail-card {backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px #ffffffbd,0 8px 18px #020a2117;}
#taste-stage .taste-card::before,#taste-stage .taste-card::after {display:none!important;}
#taste-stage .taste-card:hover {filter:none!important;box-shadow:inset 0 1px #ffffffb3,0 16px 34px #09182f26!important;}
#taste-stage .taste-card:hover .taste-card-shot img {transform:none!important;filter:inherit;}
#taste-stage .taste-card--pick,#taste-stage .taste-card--pick:hover {box-shadow:inset 0 1px #ffffffcc,0 14px 32px #0a17333b,0 0 26px #91b7e024!important;}
#taste-stage .taste-lane--pick::before {inset:2% -7% 12%;background:radial-gradient(ellipse,#a6c7e84d,transparent 70%);filter:blur(18px);}
#taste-stage .taste-lane--pick .taste-plinth::after {display:none;}
#taste-stage .taste-plane,html[data-skin="nocturne"] #taste-stage .taste-plane {background:linear-gradient(135deg,#d9e5f13d,#8098b01c)!important;border-color:#a5bcd16b;box-shadow:inset 0 1px #edf7ff99,0 12px 28px #08142a12;}
#taste-stage .taste-stage-intro .taste-stage-tabs {align-self:end;margin-bottom:4px;transform:translateY(18px);}
#taste-stage.is-settled .taste-card--pick {animation:pick-soft-float 6s ease-in-out infinite;}
@keyframes pick-soft-float {0%,100%{translate:0 0;}50%{translate:0 -5px;}}
.section-night-stars {position:absolute!important;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:none;}
html[data-skin="nocturne"] .section-night-stars {display:block;}
@media(prefers-reduced-motion:reduce){#taste-stage.is-settled .taste-card--pick {animation:none;}}
@media(max-width:860px){#taste-stage .taste-stage-intro .taste-stage-tabs {transform:none;margin:20px 0 0;}#packs .packs-head-led{max-width:100%;}}
#taste-stage .taste-card--pick .taste-card-points {color:var(--ink)!important;}
#taste-stage .taste-card--pick .taste-card-vs {color:var(--accent)!important;}
#taste-stage .taste-stage-tabs {margin-top:26px;}
#taste-stage .taste-plane {backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;}
#studio-console .sc-quote,#studio-console .sc-heading,#studio-console .sc-author strong,#studio-console .sc-proof-row strong,#studio-console .sc-proof-num {color:#edf1f7!important;}
#studio-console .sc-kicker,#studio-console .sc-author span,#studio-console .sc-signoff,#studio-console .sc-faq-trigger,#studio-console .sc-faq-detail,#studio-console .sc-proof-row p,#studio-console .sc-tab {color:#b8c6d8!important;}
#studio-console .sc-tab[aria-selected="true"] {color:#0b1734!important;}
.site-footer .footer-main {position:relative;z-index:6!important;}
.footer-stage::before {display:none!important;}
/* Avoid stacking multiple expensive backdrop filters on the same glass layers. */
#taste-stage .taste-plane {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
#packs .pack-rail-card {backdrop-filter:none;-webkit-backdrop-filter:none;}

/* Unified comparison materials: broad reflections, continuous stone faces. */
#taste-stage .taste-card,
#taste-stage .taste-card--pick {
  background:linear-gradient(145deg,#e8f1ff12,transparent 58%),#0b1734e8!important;
  color:#e7edf6; border:1px solid #a8bfd02e!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-radius:18px;isolation:isolate;transform-style:flat;backface-visibility:hidden;
  box-shadow:inset 0 1px #f0f6ff24,0 2px 3px #02091b26,0 14px 28px #07122430!important;
  animation:none!important;translate:none!important;
}
#taste-stage .taste-card:hover {
  box-shadow:inset 0 1px #f0f6ff30,0 18px 30px #07122438!important;
}
#taste-stage .taste-card--pick,#taste-stage .taste-card--pick:hover {
  background:radial-gradient(ellipse at 50% -35%,#9bbddd28,transparent 70%),#0b1734ed!important;
  border-color:#aec8e45c!important;
  box-shadow:inset 0 1px #e4f2ff40,0 8px 18px #020c2233,0 0 65px #91bce224!important;
}
#taste-stage .taste-card-label,#taste-stage .taste-card--pick .taste-card-points,
#taste-stage .taste-card-points {color:#dce5f1!important;}
#taste-stage .taste-card-shot {border:0!important;border-radius:10px;box-shadow:none!important;overflow:hidden;}
#taste-stage .taste-card-shot img {backface-visibility:hidden;}
#taste-stage .taste-lane--pick::before {filter:none!important;background:radial-gradient(ellipse at 50% 45%,#a6c7e82b,transparent 72%);inset:-5% -20% 0;}
#taste-stage .taste-plane,html[data-skin="nocturne"] #taste-stage .taste-plane {
  background:linear-gradient(145deg,#b9cbd622,#788fa612)!important;
  border:1px solid #9aafc52b!important;box-shadow:inset 0 1px #e1eefe1a,0 12px 24px #07152b0d!important;
  border-radius:20px;filter:none!important;
}
#taste-stage .taste-plinth-cap,#taste-stage .taste-lane--pick .taste-plinth-cap {
  background:linear-gradient(165deg,#46576c,#2c3e54 55%,#192b41)!important;
  box-shadow:none!important;border:0!important;height:16px;
  clip-path:polygon(0 100%,100% 100%,94% 0,6% 0);
}
#taste-stage .taste-plinth-rise,#taste-stage .taste-lane--pick .taste-plinth-rise {
  background:linear-gradient(105deg,#17283e,#26394e 35%,#1a2b41 72%,#101e33)!important;
  border:0!important;box-shadow:inset 0 1px #c4d5e51a,inset 0 -8px 14px #030b1824!important;
}
#taste-stage .taste-podium-floor {left:2%;right:2%;height:26px!important;bottom:5px;}
#taste-stage .taste-podium-floor-cap {display:none!important;}
#taste-stage .taste-podium-floor-front,html[data-skin="nocturne"] #taste-stage .taste-podium-floor-front {
  height:26px!important;border:0!important;border-radius:0 0 9px 9px;
  background:linear-gradient(#213348,#14243a)!important;
  box-shadow:inset 0 1px #b4c8dc12,0 16px 28px #020b1d28!important;
}
#taste-stage .taste-podium-floor::after {display:none!important;}
/* These almost opaque navy panels gain nothing from sampling the moving rain. */
#packs .outcomes-panel,#studio-console .sc-frame {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
/* One stage at a time: a ripple ring at the exact needle crossing. */
#process-radial .is-active .pr-node::after {content:'';position:absolute;inset:-7px;border:1px solid #75a4dd35;border-radius:50%;pointer-events:none;}
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after {animation-play-state:paused!important;}

#taste-stage .taste-plane,html[data-skin="nocturne"] #taste-stage .taste-plane{transform:scale(var(--plane-scale,1));}

/* Matte comparison: fixed lighting, square stepped podium and visible rear panels. */
#taste-stage .taste-card,#taste-stage .taste-card:hover,#taste-stage .taste-card--pick,#taste-stage .taste-card--pick:hover {
  background:#0b1734!important;filter:none!important;
  box-shadow:0 8px 22px #07122426!important;
}
#taste-stage .taste-card--pick,#taste-stage .taste-card--pick:hover {border-color:#8ba9cd66!important;box-shadow:0 8px 22px #07122426,0 0 48px #84a6cd24!important;}
#taste-stage .taste-card--diy .taste-card-shot img,#taste-stage .taste-card--diy:hover .taste-card-shot img {filter:saturate(.5) contrast(.9) brightness(1.06) grayscale(.12)!important;}
#taste-stage .taste-card--agency .taste-card-shot img,#taste-stage .taste-card--agency:hover .taste-card-shot img {filter:saturate(.86) contrast(.98)!important;}
#taste-stage .taste-card--pick .taste-card-shot img,#taste-stage .taste-card--pick:hover .taste-card-shot img {filter:saturate(1.06) contrast(1.06)!important;}
#taste-stage .taste-card .taste-stage-tabs {position:relative;inset:auto;margin:8px auto 0;transform:none;max-width:100%;background:#ffffff0a;border:1px solid #a5b8cf30;box-shadow:none;}
#taste-stage .taste-card .taste-stage-tabs button {color:#b9c7db;}
#taste-stage .taste-card .taste-stage-tabs button[aria-selected="true"] {color:#0b1734;background:#e9eef6;}
#taste-stage .taste-plane,html[data-skin="nocturne"] #taste-stage .taste-plane {background:#9eafc133!important;border-color:#8195af57!important;box-shadow:none!important;}
#taste-stage .taste-planes {inset:-28px 0 35px;}
#taste-stage .taste-plinth-cap,#taste-stage .taste-lane--pick .taste-plinth-cap {clip-path:none;height:7px;background:#34465d!important;border-radius:2px 2px 0 0;transform:none;}
#taste-stage .taste-plinth-rise,#taste-stage .taste-lane--pick .taste-plinth-rise {background:linear-gradient(#203148,#192a40)!important;box-shadow:none!important;}
#taste-stage .taste-lane--diy {--plinth-h:22px;}
#taste-stage .taste-lane--agency {--plinth-h:38px;}
#taste-stage .taste-lane--pick {--plinth-h:54px;}
#taste-stage .taste-card-motion {margin-bottom:0;}
#taste-stage .taste-podium-floor-front {box-shadow:0 14px 24px #020b1d22!important;}
#taste-stage .taste-stage-arena {padding-bottom:26px;}

/* Alternate editorial headers; align supporting copy with the title itself. */
.hero .hero-actions .hero-readout {top:-12px!important;}
.hero .hero-readout-desc {font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.4;white-space:normal;}
@media (max-width:860px) {
  .hero .hero-actions .hero-readout {top:-8px!important;}
  .hero .hero-readout-desc {min-height:calc(1.4em * 2);}
  html .hero.has-sky,
  html .hero.has-sky-fallback {
    min-height: 100svh;
    height: 100svh;
    padding-bottom: 16px;
  }
}
#packs .packs-head-led .taste-stage-led-kicker {font-size:clamp(1.25rem,1.55vw,1.45rem);line-height:1.25;}
#packs .packs-head-led .taste-stage-led-copy {font-size:clamp(1rem,1.2vw,1.1rem);}
@media (max-width:860px) {
  #packs .packs-head-copy .eyebrow,
  #packs .packs-head-copy h2 {text-align:right;justify-self:end;}
  #packs .packs-head-led {
    justify-self:end;margin-left:auto;width:max-content;max-width:100%;
  }
  #packs .packs-head-led .taste-stage-led-kicker {
    font-size:.8rem!important;line-height:1.2;white-space:nowrap;
  }
  #packs .packs-head-led .taste-stage-led-copy {
    font-size:.78rem!important;line-height:1.35;text-align:right;
  }
}
@media (min-width:981px) {
  #packs.packs-outcomes .packs-head {
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:0 clamp(32px,5vw,80px);
    align-items:center;
    margin-bottom:24px;
  }
  #packs .packs-head-copy {display:contents;}
  #packs .packs-head-copy .eyebrow {grid-column:2;grid-row:1;}
  #packs .packs-head-copy h2 {grid-column:2;grid-row:2;}
  #packs .packs-head-led {grid-column:1;grid-row:2;align-self:center;max-width:410px;margin:0;}
  #process-radial .pr-heading {align-items:center;}
  #process-radial .pr-lede {align-self:center;margin:0;}
  #work .work-head {grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;}
  #work .work-head-title {grid-column:2;grid-row:1;justify-self:end;}
  #work .work-head-title h2 {margin-block:0;}
  #work .work-head-side {grid-column:1;grid-row:1;min-width:0;padding-bottom:0;}
  #work .work-head-side .filter-bar {justify-content:flex-start;flex-wrap:wrap;}
}
/* Warm studio stage: fixed light and fine limestone grain, without animated gloss. */
@media(min-width:981px) {
  #packs .packs-head-copy .eyebrow,#packs .packs-head-copy h2 {text-align:right;justify-self:end;}
  #work .work-head-title {text-align:right;}
  #packs .outcomes-panel {--outcomes-panel-h:620px;}
  #packs.packs-outcomes .outcomes-rail,
  #packs.packs-outcomes.is-pack-hovering .outcomes-rail {padding-top:48px;padding-bottom:12px;}
}
/* transform:none!important used to live here to cancel the scale(1.015) the
   rail applied to an expanded card. The scale is gone — it grew the card's
   type along with the card — so this override outlived the thing it was
   fighting, and all it did was flatten the 2px lift that replaced it, and only
   on the focus-within half, so keyboard and pointer stopped agreeing. The
   border radius and clip reset are still doing real work and stay. */
#packs.packs-outcomes .pack-rail-card.is-expanded,
#packs.packs-outcomes .pack-rail-card:focus-within {border-radius:20px!important;clip-path:none;}
#packs.packs-outcomes:not(.is-coarse-pointer) .pack-rail-card.is-expanded .pack-rail-card-detail {
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
  overflow:visible;padding:0 4px 2px;border-radius:0;
}
#packs .pack-rail-card-stats,#packs .pack-controls {flex-shrink:0;}
#packs .pack-rail-card-cta {flex-shrink:0;margin-top:auto;}
#packs.packs-outcomes .pack-slider {padding-inline:4px;overflow:visible;}
#packs.packs-outcomes .pack-slider span {align-items:baseline;overflow:visible;}
#packs.packs-outcomes .pack-slider strong {
  flex:none;min-width:1.25em;padding-inline:2px;line-height:1.2;overflow:visible;
}
#packs.packs-outcomes .pack-slider input[type="range"] {
  width:calc(100% - 8px);margin-inline:4px;
}
#packs .pack-rail-card-cta,
#packs .pack-rail-card .pack-rail-card-cta.button--dark {
  background: var(--action);
  color: var(--action-ink);
  border-color: var(--action);
  box-shadow: none;
  filter: none;
}
#packs .pack-rail-card-cta:hover,
#packs .pack-rail-card-cta:focus-visible,
#packs .pack-rail-card .pack-rail-card-cta.button--dark:hover,
#packs .pack-rail-card .pack-rail-card-cta.button--dark:focus-visible {
  background: var(--cta-hover, #3357d7);
  border-color: var(--cta-hover, #3357d7);
  color: var(--action-ink);
  box-shadow: none;
  filter: none;
}
html[data-skin="nocturne"] #packs .pack-rail-card-cta,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta.button--dark {
  background:linear-gradient(180deg,#3b73e9 0%,#2961db 45%,#2250b4 100%);
  border:1px solid rgba(255,255,255,.28);
  color:#061026;
  box-shadow:inset 0 1px 0 rgb(204 230 255 / .18),inset 0 -1px 0 rgb(6 16 38 / .18);
}
html[data-skin="nocturne"] #packs .pack-rail-card-cta:hover,
html[data-skin="nocturne"] #packs .pack-rail-card-cta:focus-visible,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta.button--dark:hover,
html[data-skin="nocturne"] #packs .pack-rail-card .pack-rail-card-cta.button--dark:focus-visible {
  background: var(--cta-hover, #4087f7);
  border-color: var(--cta-hover, #4087f7);
  color: #061026;
  box-shadow: none;
  filter: none;
}
#packs .pack-rail-card-visual--grid img {min-height:0;max-height:100%;object-fit:cover;}
@media(prefers-reduced-motion:no-preference) {
  .editorial-reveal {transform:translateY(22px);transition:opacity 750ms ease,transform 950ms cubic-bezier(.16,1,.3,1);transition-delay:var(--editorial-delay,0ms);}
  .editorial-reveal.is-revealed {transform:none;}
  html.js #process-radial.is-pending .pr-heading > * {transform:translateY(22px);}
  html.js #process-radial.is-in .pr-heading > * {transition:opacity 750ms ease,transform 950ms cubic-bezier(.16,1,.3,1);}
}
#taste-stage {
  --stone-top:#7c8189;--stone-mid:#4e5359;--stone-base:#2c3036;
  --spotlight:#ffffff8c;--stone-grain:url('assets/ui/limestone.svg');
}
html[data-skin="nocturne"] #taste-stage {
  --stone-top:#5c6169;--stone-mid:#3a3e45;--stone-base:#1f2227;--spotlight:#aecaff1c;
}
#taste-stage .taste-stage-arena::before {
  content:'';position:absolute;inset:-180px -7% -70px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 20%,var(--spotlight),transparent 58%),radial-gradient(ellipse at 50% 90%,var(--spotlight),transparent 60%);
  filter:none!important;opacity:1;transform:none;
}
#taste-stage .taste-card,#taste-stage .taste-card:hover {
  background:radial-gradient(ellipse at 20% 0%,#31476888,transparent 65%),linear-gradient(160deg,#132341,#0b1734 75%)!important;
  border:1px solid #8aa5cb55!important;
  box-shadow:inset 0 1px #c4d8f02b,0 12px 24px #07122424!important;
}
#taste-stage .taste-card--pick,#taste-stage .taste-card--pick:hover {
  background:radial-gradient(ellipse at 50% -20%,#4673ad66,transparent 64%),linear-gradient(160deg,#14294b,#0b1734 75%)!important;
  border-color:#81a7e49c!important;
  box-shadow:inset 0 1px #c7deff77,0 10px 24px #07122433,0 0 36px #6d95da30!important;
}
#taste-stage .taste-lane--pick::before {background:radial-gradient(ellipse at 50% 32%,#9ebbf540,transparent 65%);}
#taste-stage .taste-plane,html[data-skin="nocturne"] #taste-stage .taste-plane {
  background:linear-gradient(140deg,#e9effc46,#ffffff0f)!important;border-color:#ffffff9c!important;
  box-shadow:inset 0 1px #fff5,0 8px 20px #1b27470a!important;
}
html[data-skin="nocturne"] #taste-stage .taste-plane {border-color:#aebeda35!important;background:linear-gradient(140deg,#a2b6d52b,#ffffff07)!important;}
#taste-stage .taste-plinth-cap,#taste-stage .taste-lane--pick .taste-plinth-cap {
  height:12px;clip-path:polygon(0 100%,100% 100%,97% 0,3% 0);border-radius:0;
  background:linear-gradient(170deg,var(--stone-top),var(--stone-mid))!important;
}
#taste-stage .taste-plinth-rise,#taste-stage .taste-lane--pick .taste-plinth-rise {
  background:var(--stone-grain),linear-gradient(105deg,var(--stone-mid),var(--stone-top) 40%,var(--stone-mid) 76%,var(--stone-base))!important;
  background-size:144px 144px,100% 100%!important;
  box-shadow:inset 0 1px #fff9,inset 0 -1px #64574733!important;
}
#taste-stage .taste-lane--diy {--plinth-h:50px;}
#taste-stage .taste-lane--agency {--plinth-h:66px;}
#taste-stage .taste-lane--pick {--plinth-h:94px;}
#taste-stage .taste-podium-floor {height:32px!important;bottom:0;}
#taste-stage .taste-podium-floor-front,html[data-skin="nocturne"] #taste-stage .taste-podium-floor-front {
  height:32px;border-radius:2px 2px 5px 5px!important;
  background:var(--stone-grain),linear-gradient(180deg,var(--stone-mid),var(--stone-base))!important;
  background-size:144px 144px,100% 100%!important;
  box-shadow:inset 0 1px var(--stone-top),0 18px 28px #3e332626!important;
}
#taste-stage .taste-stage-arena {padding-bottom:32px;}
#taste-stage .taste-stage-arena::before {mask-image:linear-gradient(transparent,#000 18%,#000 65%,transparent);}
@media(max-width:980px) {
  #packs.packs-outcomes.is-pack-hovering .outcomes-panel {height:auto!important;min-height:420px!important;max-height:none!important;}
  #packs.packs-outcomes.is-pack-hovering .outcomes-rail {height:auto!important;min-height:0!important;max-height:none!important;padding:28px 2px 16px;align-items:flex-start;}
  #packs.packs-outcomes .pack-rail-card.is-expanded {height:auto!important;min-height:0!important;max-height:none!important;align-self:flex-start;}
  #packs.packs-outcomes .pack-rail-card.is-expanded .pack-rail-card-detail {
    position:relative!important;inset:auto!important;display:grid;flex:0 0 auto;min-height:0;overflow:visible;
    opacity:1;transform:none;pointer-events:auto;padding:8px 0 4px;border-radius:0;
  }
  #packs.packs-outcomes .pack-rail-card.is-expanded .pack-rail-card-detail[hidden] {display:none!important;}
}

/* Rain sits in the midground (studio-polish.css owns the z-index scaffold),
   so opaque cards occlude it while transparent copy blocks let it through.
   A paper halo behind a heading punches a rain-free box, so drop them. */
#taste-stage .taste-stage-intro,
#packs .packs-head,
#work .work-head {
  background: transparent !important;
  box-shadow: none !important;
}

/* Client and industry ribbons share the page paper, not the grey surface — and
   they take it from the body rather than painting it, so the rain reads through
   the band. Filling the stack with --paper made it an opaque slab over a layer
   the rain was already falling in: the drops were there, hidden behind it. The
   body is --paper, so transparent is the same colour with the rain restored.
   The end fades stay painted; they are the mask that keeps logos from clipping
   at the edges, and their gradient reaches transparent well before the drops. */
.ribbon-stack { background: transparent; }
.ribbon { background: transparent; }
.ribbon::before { background: linear-gradient(90deg, var(--paper), transparent); }
.ribbon::after { background: linear-gradient(270deg, var(--paper), transparent); }

/* Dark grey rear glass — clearly readable against the beige page, still quieter
   than the cards. Kept transform-free so GSAP only ever animates scale. */
#taste-stage .taste-plane,
html[data-skin="nocturne"] #taste-stage .taste-plane {
  background: linear-gradient(145deg, rgba(58, 65, 74, 0.56), rgba(28, 33, 40, 0.44)) !important;
  border: 1px solid rgba(150, 163, 180, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(214, 226, 240, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    12px 22px 40px rgba(10, 16, 26, 0.2) !important;
  backdrop-filter: blur(12px) saturate(0.9) !important;
  -webkit-backdrop-filter: blur(12px) saturate(0.9) !important;
  opacity: 0.95;
}
html[data-skin="nocturne"] #taste-stage .taste-plane {
  background: linear-gradient(145deg, rgba(114, 126, 144, 0.4), rgba(34, 40, 49, 0.36)) !important;
  border-color: rgba(184, 198, 216, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(206, 222, 242, 0.12),
    12px 22px 40px rgba(0, 0, 0, 0.42) !important;
}
#taste-stage:not(.is-settled) .taste-plane {
  pointer-events: none;
}

/* Soften arena spotlight so it does not bleach rain in the lane. */
#taste-stage .taste-stage-arena::before {
  opacity: 0.45 !important;
}

/* Slabs, not sheets: stacked hard shadows read as the card's own edge, the
   inset pair as its lit top and shaded underside. Interaktive is the thickest. */
#taste-stage .taste-card--diy,
#taste-stage .taste-card--agency,
#taste-stage .taste-card--diy:hover,
#taste-stage .taste-card--agency:hover {
  background: linear-gradient(170deg, #1c2c40 0%, #111c2b 62%, #1a2939 100%) !important;
  border: 1px solid rgba(110, 130, 155, 0.22) !important;
  box-shadow:
    inset 0 2px 0 rgba(186, 206, 228, 0.18),
    0 2px 0 #0d1723,
    0 5px 0 #08101a,
    0 7px 0 #050a11,
    0 11px 14px rgba(7, 18, 36, 0.32),
    0 26px 36px rgba(7, 18, 36, 0.2) !important;
  filter: saturate(0.62) brightness(0.86) contrast(0.96) !important;
  opacity: 0.88;
}
#taste-stage .taste-card--diy .taste-card-label,
#taste-stage .taste-card--agency .taste-card-label,
#taste-stage .taste-card--diy .taste-card-points,
#taste-stage .taste-card--agency .taste-card-points {
  color: rgba(190, 202, 216, 0.88) !important;
}
#taste-stage .taste-card--pick,
#taste-stage .taste-card--pick:hover {
  background: linear-gradient(168deg, #1e3d64 0%, #0d1c3a 64%, #17294a 100%) !important;
  border: 1px solid rgba(126, 190, 255, 0.62) !important;
  filter: none !important;
  transform-style: preserve-3d;
  box-shadow:
    inset 0 2px 0 rgba(226, 242, 255, 0.55),
    0 2px 0 #0d1c33,
    0 5px 0 #091528,
    0 9px 0 #060f1e,
    0 13px 0 #040a14,
    0 18px 22px rgba(7, 22, 48, 0.45),
    0 40px 54px rgba(7, 22, 48, 0.28),
    0 0 0 1px rgba(122, 196, 255, 0.4),
    0 0 26px rgba(88, 176, 255, 0.45) !important;
}
/* The pointer tilt is wanted; the pointer-tracking glare was not. */
#taste-stage .taste-card--pick::before { display: none !important; }

/* Neon aura: a tight core hugging the card silhouette plus a wide, much softer
   falloff. Both live behind the card so nothing washes over its face. */
#taste-stage .taste-lane--pick .taste-card-motion::before {
  content: "";
  position: absolute;
  inset: -7px -9px -12px;
  z-index: -1;
  pointer-events: none;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(126, 208, 255, 0.9), rgba(72, 156, 255, 0.7) 46%, rgba(40, 104, 210, 0.34));
  filter: blur(10px);
  opacity: calc(var(--landing-glow, 0) * 0.9);
}
#taste-stage .taste-lane--pick::before {
  inset: -12% -24% -4%;
  z-index: -2;
  /* Blur is what keeps the wide falloff from banding into visible rings. */
  filter: blur(28px) !important;
  background: radial-gradient(ellipse at 50% 46%, rgba(74, 152, 250, 0.3), rgba(58, 122, 220, 0.1) 52%, transparent 74%);
  opacity: calc(var(--landing-glow, 0) * 0.9);
}

/* Hover: all three respond, side cards at roughly half the amplitude so the
   Interaktive card stays the loudest object on the stage. */
#taste-stage .taste-card--diy,
#taste-stage .taste-card--agency,
#taste-stage .taste-card--pick,
#taste-stage .taste-card--diy:hover,
#taste-stage .taste-card--agency:hover,
#taste-stage .taste-card--pick:hover {
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--card-lift, 0px)) !important;
  transition: transform 200ms ease-out, opacity 260ms ease, filter 260ms ease !important;
}
#taste-stage .taste-card--pick { --card-lift: -2px; }
#taste-stage.is-settled .taste-card--diy:hover,
#taste-stage.is-settled .taste-card--agency:hover {
  --card-lift: -5px;
  filter: saturate(0.74) brightness(0.94) contrast(0.97) !important;
  opacity: 0.95;
}
#taste-stage.is-settled .taste-card--pick:hover { --card-lift: -6px; }
@media (prefers-reduced-motion: reduce) {
  #taste-stage .taste-card--diy,
  #taste-stage .taste-card--agency,
  #taste-stage .taste-card--pick,
  #taste-stage.is-settled .taste-card--diy:hover,
  #taste-stage.is-settled .taste-card--agency:hover,
  #taste-stage.is-settled .taste-card--pick:hover {
    transform: none !important;
    transition: none !important;
  }
}

/* Taller cards, centred copy at a comfortable reading size. The card never
   clips: the media figure does its own clipping, so the slab need not. */
#taste-stage .taste-lanes {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr) minmax(0, 1fr);
}
#taste-stage .taste-lane--diy,
#taste-stage .taste-lane--agency { --card-w: 94%; --plinth-h: 34px; }
#taste-stage .taste-lane--pick { --card-w: 100%; --plinth-h: 54px; }
#taste-stage .taste-card {
  overflow: visible !important;
  padding: 14px 16px 18px !important;
  gap: 12px !important;
  text-align: center;
}
#taste-stage .taste-card--pick { padding: 16px 18px 22px !important; gap: 14px !important; }
/* Leave the slab's side wall clear of the plinth cap so the thickness reads. */
#taste-stage .taste-lane--diy .taste-card-motion,
#taste-stage .taste-lane--agency .taste-card-motion { margin-bottom: 8px; }
#taste-stage .taste-lane--pick .taste-card-motion { margin-bottom: 14px; }
#taste-stage .taste-card-points {
  justify-items: center;
  gap: 0.5em;
  text-align: center;
  font-size: clamp(0.92rem, 1.02vw, 1.04rem) !important;
  line-height: 1.42;
}
#taste-stage .taste-card--pick .taste-card-points {
  font-size: clamp(1rem, 1.12vw, 1.14rem) !important;
}
#taste-stage .taste-card--diy .taste-card-label,
#taste-stage .taste-card--agency .taste-card-label {
  font-size: clamp(0.95rem, 1.3vw, 1.18rem) !important;
}
#taste-stage .taste-card--pick .taste-card-label {
  font-size: clamp(1.16rem, 1.62vw, 1.46rem) !important;
}

/* Beauty / Street / Industrial live on the dark stone plinth face. */
#taste-stage .taste-lane--pick .taste-plinth-rise {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--plinth-h, 94px);
}
#taste-stage .taste-lane--pick .taste-stage-tabs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  margin: 0 !important;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 4px;
  border: 1px solid rgba(12, 16, 22, 0.28);
  border-radius: 999px;
  background: rgba(244, 246, 249, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(6, 10, 16, 0.32);
}
#taste-stage .taste-lane--pick .taste-stage-tabs button {
  color: color-mix(in srgb, #10151c 68%, transparent);
  font-size: 0.58rem;
}
#taste-stage .taste-lane--pick .taste-stage-tabs button[aria-selected="true"] {
  background: #10151c;
  color: #f4f6f9;
}
#taste-stage .taste-card .taste-stage-tabs {
  display: none !important;
}
@media (max-width: 860px) {
  #taste-stage .taste-lane--pick .taste-plinth-rise {
    min-height: 64px;
  }
  #taste-stage .taste-lane--pick .taste-stage-tabs {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 10px auto 0 !important;
    flex-wrap: nowrap;
  }
  #taste-stage .taste-lane--pick .taste-stage-tabs button {
    font-size: 0.5rem;
    white-space: nowrap;
  }
  /* The narrow card would otherwise wear the aura as a thick outline. */
  #taste-stage .taste-lane--pick .taste-card-motion::before {
    inset: -5px -6px -8px;
    filter: blur(8px);
    opacity: calc(var(--landing-glow, 0) * 0.7);
  }
}

/* Hold the landing for half a viewport before the page moves on. Native sticky
   over a padding spacer, so scrolling back up reverses without any hijacking.
   Sticky only resolves if no ancestor clips, hence the explicit overflow. */
#taste-stage .taste-stage-hold { height: 0; }
/* Only pin where the shell comfortably fits the viewport; below that it would
   be held in place with its base cropped. */
@media (min-width: 861px) and (min-height: 820px) and (prefers-reduced-motion: no-preference) {
  #taste-stage.taste-stage { overflow: visible; }
  #taste-stage .taste-stage-shell {
    position: sticky;
    top: clamp(20px, calc(50vh - 400px), 92px);
  }
  /* The hold has to be in-flow content, not padding: a sticky box is confined to
     its containing block's content box, so padding gives it nowhere to travel. */
  #taste-stage .taste-stage-hold { height: 50vh; }
}

/* ===========================================================================
   Process gauge pucks (#process-radial only) — appended block.
   Physical buttons: top-light gradient across the face, a continuous bevel
   ring on ::before, a hard side wall for real thickness, then a tight contact
   shadow plus a broad ambient so they sit on the rail. Light is fixed at
   top-left (145deg / hotspot at 30% 17%), matching the rail and the cards.
   =========================================================================== */
#process-radial .pr-node {
  border: 1px solid #9fb0c559;
  background:
    radial-gradient(58% 50% at 30% 17%, #ffffff 0%, #ffffffc4 40%, #ffffff00 74%),
    radial-gradient(74% 58% at 74% 97%, #ffffff5e 0%, #ffffff00 66%),
    linear-gradient(145deg, #fdfeff 0%, #f0f3f8 28%, #dfe5ee 62%, #c4cedc 100%);
  box-shadow:
    inset 0 1.5px 1px #ffffff,
    inset 1.5px 0 1.5px #ffffffa8,
    inset 0 -2px 2.5px #8698b03d,
    inset -1.5px 0 2px #8f9fb52e,
    0 1px 0 #ffffffc4,
    0 4px 0 #bcc7d5,
    0 5px 1px #8496ab33,
    0 8px 12px #16294a1c,
    0 17px 26px #16294a22;
}

#process-radial .pr-node::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(145deg, #ffffffeb 0%, #ffffff00 34%, #ffffff00 60%, #7f92aa5c 100%);
  -webkit-mask: radial-gradient(circle closest-side, #0000 calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(circle closest-side, #0000 calc(100% - 2.5px), #000 calc(100% - 2.5px));
}

#process-radial .pr-icon { position: relative; z-index: 2; }

#process-radial .pr-step.is-active .pr-node,
#process-radial .pr-step.is-focus .pr-node {
  border-color: #7ea6d97a;
  background:
    radial-gradient(58% 50% at 30% 17%, #ffffff 0%, #ffffffcf 40%, #ffffff00 74%),
    radial-gradient(74% 58% at 74% 97%, #dce9f96b 0%, #ffffff00 66%),
    linear-gradient(145deg, #fdfeff 0%, #eef4fb 28%, #dae5f2 62%, #bacde3 100%);
  box-shadow:
    inset 0 1.5px 1px #ffffff,
    inset 1.5px 0 1.5px #ffffffb0,
    inset 0 -2px 2.5px #6f8dae42,
    0 1px 0 #ffffffc4,
    0 4px 0 #a8bcd3,
    0 5px 1px #7590ad3d,
    0 9px 14px #1b3c6924,
    0 18px 30px #1b3c692b,
    0 0 22px #7ba5dd26;
}

html[data-skin="nocturne"] #process-radial .pr-node {
  border-color: #8fb0d642;
  background:
    radial-gradient(58% 50% at 30% 17%, #7e9cbe75 0%, #7e9cbe1f 45%, #7e9cbe00 76%),
    radial-gradient(74% 58% at 74% 97%, #4d76a52e 0%, #4d76a500 66%),
    linear-gradient(145deg, #3b4c66 0%, #2a3a52 30%, #1a2740 66%, #101c31 100%);
  box-shadow:
    inset 0 1.5px 1px #cfe4ff5c,
    inset 1.5px 0 1.5px #cfe4ff33,
    inset 0 -2px 3px #01070fa8,
    inset -1.5px 0 2px #01070f7a,
    0 1px 0 #b9d3f229,
    0 4px 0 #0b1425,
    0 5px 1px #00040c8f,
    0 9px 14px #00030a5c,
    0 18px 28px #00030a70;
}

html[data-skin="nocturne"] #process-radial .pr-node::before {
  background: linear-gradient(145deg, #d9ebff8f 0%, #d9ebff00 32%, #00060f00 58%, #00060f99 100%);
}

html[data-skin="nocturne"] #process-radial .pr-step.is-active .pr-node,
html[data-skin="nocturne"] #process-radial .pr-step.is-focus .pr-node {
  border-color: #8fb8e88f;
  background:
    radial-gradient(58% 50% at 30% 17%, #9dbde075 0%, #9dbde024 45%, #9dbde000 76%),
    radial-gradient(74% 58% at 74% 97%, #5b8cc23d 0%, #5b8cc200 66%),
    linear-gradient(145deg, #445c7c 0%, #2f4361 30%, #1c2d4a 66%, #122038 100%);
  box-shadow:
    inset 0 1.5px 1px #d7eaff70,
    inset 1.5px 0 1.5px #d7eaff40,
    inset 0 -2px 3px #01070fa8,
    0 1px 0 #c6dcf933,
    0 4px 0 #0c1729,
    0 5px 1px #00040c8f,
    0 10px 16px #00030a66,
    0 20px 32px #00030a78,
    0 0 24px #6ea3dd2e;
}
/* Both client rows show the page's own paper, including their edge fades — by
   letting it through, not by painting over the rain layer.

   The band is transparent in BOTH skins, and that is the whole point. It was
   scoped to light only, while site.css gives the nocturne band a fully opaque
   #030712. .ribbon-stack sits at z-index 3 and .cloud-rain is fixed at
   z-index 2, so in dark mode that opaque fill covered the drops completely —
   rain on light, no rain on dark. The two colours differ by a hair anyway
   (#030712 surface against #020617 paper), so letting the paper through costs
   nothing and is what the light skin already does.

   The per-row tints below stay light-only: in nocturne those rows are painted
   with color-mix(... / transparent) alphas that the rain still reads through,
   which is the contrast between the two rows doing its job. */
.ribbon-stack {background:transparent!important;}
html:not([data-skin="nocturne"]) .ribbon--clients,
html:not([data-skin="nocturne"]) .ribbon--industries {background:transparent!important;}
.footer-rain-canvas {position:absolute;inset:0;z-index:2;display:block;pointer-events:none;}

/* Studio panel: one overhead light, static elevation, no cursor-driven gloss. */
#studio-console .sc-shell {isolation:isolate;}
#studio-console .sc-shell::before {
  content:"";position:absolute;left:5%;right:5%;bottom:-26px;height:68px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,#332d3933,transparent 70%);filter:blur(6px);
}
#studio-console .sc-frame {
  background:linear-gradient(176deg,#26334f 0%,#17243f 46%,#0b1734 100%)!important;
  border:1px solid #e4edff1c;
  box-shadow:inset 0 1px #e5efff38,inset 0 -1px #040b1f99,
    0 2px 4px #14182c33,0 26px 44px -18px #14182c80,0 60px 90px -50px #14182c66!important;
}
/* The console gradient is tuned to read as a dark surface on the cream page.
   On the night page it was the lighter of the two, so the card floated as a
   washed-out blue slab. Same top-lit falloff, dropped to sit into the night. */
html[data-skin="nocturne"] #studio-console .sc-frame {
  background:linear-gradient(176deg,#141f36 0%,#0d1728 46%,#08101f 100%)!important;
  border-color:#e4edff17;
  box-shadow:inset 0 1px #e5efff24,inset 0 -1px #030918b3,
    0 2px 4px #05091933,0 26px 44px -18px #0509198c,0 60px 90px -50px #05091973!important;
}
#studio-console .sc-rail {justify-content:center;}
#studio-console .sc-tabs {
  background:#0b173480;
  box-shadow:inset 0 1px #dce8ff24,inset 0 -1px #02091f66,0 3px 6px #0a102c33;
}
html[data-skin="nocturne"] #studio-console .sc-tabs {
  background:#050d1f99;
  box-shadow:inset 0 1px #dce8ff18,inset 0 -1px #01061799,0 3px 6px #05091933;
}
#studio-console .sc-tab[aria-selected="true"] {
  background:linear-gradient(180deg,#f7f4ee,#dedbd5);
  box-shadow:inset 0 1px #fff9,inset 0 -1px #676b7833,0 2px 4px #03091d55;
}
/* The quote ran to within 41px of the card's left edge and the photo to within
   57px of its right, so both read as pushed up against the frame. Padding on
   the panel moves the whole row inward and keeps the two sides even. Only the
   desktop layout needs it — the phone rule further down sets its own. */
#studio-console .sc-panel--testimonials {padding:8px 40px 20px 32px;grid-template-rows:auto minmax(0,1fr) auto;}
@media (min-width: 900px) {
  #studio-console .sc-reviews {
    grid-row: 1 / 3;
    align-self: center;
    width: 100%;
  }
  #studio-console .sc-dots {
    grid-column:1;grid-row:3;align-self:end;justify-self:center;
    justify-content:center;width:100%;margin-top:0;
    padding:8px 8px 12px;
  }
  #studio-console .sc-visual {
    grid-row: 1 / -1;
    align-self: center;
    width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    transform: none;
  }
}
#studio-console .sc-visual {
  border:1px solid #e4edff2e;border-radius:16px;
  box-shadow:0 24px 34px -18px #050c21b3,0 6px 12px -4px #050c2199;
}
@media (min-width: 900px) {
  #studio-console .sc-visual { transform: none; }
}
#studio-console .sc-visual::after {
  background:none;border-radius:inherit;
  box-shadow:inset 0 1px #f0f5ff59,inset 0 -1px #02091f80;
}
#studio-console .sc-avatar,#studio-console .sc-nav-btn {
  box-shadow:inset 0 1px #e4edff30,inset 0 -1px #040b1f80,0 3px 6px #050c213d;
}
#studio-console .sc-progress {background:#060f25;box-shadow:inset 0 1px 2px #01071999,0 1px #e4edff20;}
@media(max-width:899px) {
  #studio-console .sc-panel--testimonials {padding:6px 8px 16px;}
  #studio-console .sc-visual {transform:translateY(-3px);}
}

/* Equal visual gaps between the primary sections; no hidden sticky spacer. */
:root {--section-rhythm:clamp(40px,4.5vw,64px);}
#taste-stage.taste-stage,#packs.packs-outcomes,#process-radial.process-radial,
#work.section,#studio-console.studio-console {padding-block:var(--section-rhythm);margin-block:0;}
#taste-stage .taste-stage-hold {height:0!important;}
#taste-stage .taste-stage-shell {position:relative;top:auto;}
@media (min-width: 861px) {
  #taste-stage .taste-stage-shell {
    position: sticky;
    top: var(--header, 72px);
  }
  #taste-stage .taste-stage-hold {
    height: 118vh !important;
    pointer-events: none;
  }
}

@media (max-width: 860px) {
  body.nav-open .site-header { z-index: 500; }

  /* Over the dark hero the masthead paints its controls in --dark-ink so they
     read against the sky. The open menu sheet is --paper — which in the light
     skin is that same cream — so the hamburger turned into a close control that
     was cream on cream, invisible at the one moment it matters. The nav links
     already had an over-dark exception; the button did not. It takes the
     sheet's own ink whenever the sheet is up. */
  html.is-over-dark body.nav-open .site-header .menu-button,
  body.nav-open .site-header .menu-button {
    color: var(--ink) !important;
    border-color: color-mix(in srgb, var(--ink) 22%, transparent) !important;
  }
  body.nav-open .site-header .menu-button-icon,
  body.nav-open .site-header .menu-button-icon::before,
  body.nav-open .site-header .menu-button-icon::after,
  body.nav-open .site-header .menu-button-icon > span {
    background: currentColor;
  }
  /* Same for the wordmark sitting on the sheet -- and it needs the same two
     selectors and the same weight the button above got, which it never had.
     It only carried the is-over-dark variant and no !important, so with the
     sheet up over a light part of the page the wordmark kept the masthead's
     light colour and went cream on cream: measured at luminance 250 against a
     239 sheet, which is invisible. The mark is an SVG painted with
     currentColor, so it disappears with the text. */
  html.is-over-dark body.nav-open .site-header .brand,
  body.nav-open .site-header .brand,
  html.is-over-dark body.nav-open .site-header .brand span,
  body.nav-open .site-header .brand span {
    color: var(--ink) !important;
  }
  body.nav-open .design-lab-root,
  body.nav-open .theme-toggle {
    visibility: hidden;
    pointer-events: none;
  }
  body.nav-open .site-header .header-inner {
    isolation: auto;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .site-header .site-nav.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 410 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--paper) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .site-header .site-nav.is-open a {
    letter-spacing: 0.01em !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    font-weight: 600 !important;
    transform: none !important;
  }
}

/* A hairline to mark where the page ends and the footer begins — sized to the
   testimonial card above it rather than the footer's own narrower text column,
   so the two edges line up. The card escapes the container gutter to sit 10px
   off the viewport on desktop and 7px on mobile; this matches that. */
.site-footer .footer-main { position: relative; }
.site-footer .footer-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 11%, transparent);
  pointer-events: none;
}
html[data-skin="nocturne"] .site-footer .footer-main::before {
  background: color-mix(in srgb, #cfe0ff 13%, transparent);
}
@media (max-width: 860px) {
  .site-footer .footer-main::before { left: 7px; right: 7px; }
}

/* The frost band above the nav spanned the full viewport while the pill is
   inset by the gutter, so its two ends showed as frosted patches in the top
   corners with nothing under them. Match the pill's own box — gutter floor,
   1376px cap, centred — and only frost once the page has actually scrolled
   something underneath it. */
.site-header::before {
  left: max(var(--gutter, 18px), calc((100% - 1376px) / 2));
  right: max(var(--gutter, 18px), calc((100% - 1376px) / 2));
  border-radius: 999px;
  opacity: 0;
}
.site-header.is-scrolled::before { opacity: 1; }

/* The ribbons are separated by a hairline (.ribbon + .ribbon in site.css);
   the stack closed without one, so the industries strip ran straight into
   the section below it. This gives it the same edge underneath. */
.ribbon-stack .ribbon:last-child { border-bottom: 1px solid var(--line); }

/* Matches the shared footer on every other page (site/footer-shared.css). */
#footer .footer-place {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-family: var(--mono);
  font-size: .8rem;
}

/* The logos and industry words sit in front of the rain, with the drops falling
   behind them. .cloud-rain is fixed at z-index 2, so anything that must read in
   front of it needs its own layer — the footer copy does this at 6, the skyline
   at 5. The band itself is transparent (above), so this lifts the content
   without hiding what it is meant to sit in front of. */
.ribbon-stack { position: relative; z-index: 3; }

/* No hover zoom on Interactive cards.

   Only the transition is killed here. The transform is deliberately not set:
   these images carry a resting scale (godly-pass.css) so the product is not
   swimming in backdrop, and forcing `none` here fought that rule for which
   value wins — the picture would have snapped back to 1.0 on hover, reading as
   a shrink. One file owns the scale; this one only says it must not animate. */
#work .work-tile[data-work-kind="interactive"] img,
#work .work-tile[data-work-kind="interactive"]:hover img {
  transition: none !important;
}

/* ── Footer link columns ─────────────────────────────────────────────────────
   Studio and Services are gone, and the remaining Legal column was landing in
   the first of three tracks — stranded in the middle of the footer with the
   whole right-hand side empty beside it. The track template is dropped and the
   columns are laid along the row and packed to the end, so what is left sits
   against the right edge. Written here because the homepage's .footer-grid is
   set in four different stylesheets at four different widths; one rule at the
   end beats arguing with all of them. */
#footer .footer-grid {
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, max-content) !important;
  justify-content: end !important;
}

/* -------------------------------------------------------------------------
   Nothing of the browser's own canvas should ever show.

   <html> carries no background of its own, so the only thing painting the page
   colour is <body> and, with the menu up, the fixed nav sheet. Where neither
   reaches -- and on iOS that happens at the bottom, because a fixed element
   sized with inset: 0 is laid out against one viewport while the toolbars
   change how much of it you can see -- what shows through is the browser's
   default canvas. That is a slate grey in dark mode and near-white in light,
   which is why a band appeared at the bottom in both themes and matched
   neither.

   The html background that fixes this lives in theme-toggle.css, which is the
   one stylesheet all eight pages load -- this file is only on the home page,
   and the band is not.
   ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Belt and braces for the same edge: the sheet is told to fill the dynamic
     viewport, which tracks the toolbars as they show and hide, and to paint
     through the home-indicator inset rather than stopping short of it. */
  body.nav-open .site-header .site-nav.is-open {
    min-height: 100dvh;
    padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
  }
}

/* -------------------------------------------------------------------------
   Rows that scroll sideways say so.

   The work filter and the FAQ topics turn into horizontal scrollers on a
   phone and hide their scrollbars, so the row looked like it ended at the
   screen edge. scroll-affordance.js marks a row that actually overflows and
   keeps the two fade widths in step with its position; the mask does the
   rest. A mask, not a painted gradient, because these rows sit on different
   surfaces and this way neither has to know the colour behind it.
   ------------------------------------------------------------------------- */
[data-scroll-fade][data-overflow] {
  --fade-start: 0px;
  --fade-end: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
}