/* ============================================================
   Google Store site layer (2026-10-27). Loaded after g.css + rx.css on every live page.
   Patterns from store.google.com (home, phones category, Pixel 11 Pro, Fitbit Edge):
   a tinted hero that runs under the floating nav, left-aligned section heads with a tile carousel
   (grey media wells, small chips, blue "›" links, progress bar + round arrow buttons), centred
   statements over one large rounded card, tall tinted 3-up promo cards with a dark pill, 2-up
   photo promos, a grey "Why buy" style rail, rounded grey panels, and the light footer.
   Grid tokens (--g-w10, --g-in …) come from g.css / rx.css.
   ============================================================ */
:root { --gs-ink: #191c1d; --gs-ink-2: #444746; --gs-well: #f6f6f6; --gs-blue: #0b57d0; --gs-ease: cubic-bezier(.2, .7, .2, 1); }

/* ---------- type ---------- */
.gs-eye { margin: 0 0 14px; font: 500 1rem/1.5 var(--display); color: var(--gs-ink); }
.gs-h1 { margin: 0; font: 500 clamp(2.75rem, 5.4vw, 4.75rem)/1.08 var(--display); letter-spacing: -1.5px; color: var(--gs-ink); }
.gs-h2 { margin: 0; font: 500 clamp(2rem, 3.6vw, 3rem)/1.167 var(--display); letter-spacing: -.5px; color: var(--gs-ink); text-wrap: balance; }
.gs-h2.c, .gs-sub.c { text-align: center; margin-left: auto; margin-right: auto; }
.gs-h2.c { max-width: var(--g-w8); }
.gs-sub { margin: 16px 0 0; max-width: 640px; font: 400 1rem/1.5 var(--sans); color: var(--gs-ink-2); text-wrap: pretty; }
.gs-sub.c { text-wrap: balance; }
.gs-link { display: inline-flex; align-items: center; gap: 2px; font: 500 .9375rem/1.4 var(--display); color: var(--gs-blue); white-space: nowrap; }
.gs-link::after { content: "›"; font-size: 1.25em; line-height: 1; transform: translateY(-1px); transition: transform .2s; }
.gs-link:hover::after, a:hover .gs-link::after { transform: translate(3px, -1px); }

/* ---------- pills ---------- */
.gs-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.gs-btns.c { justify-content: center; }
.gs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font: 500 .875rem/1 var(--display); white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.gs-btn.dark { background: #1f1f1f; color: #fff; }
.gs-btn.dark:hover { background: #3c4043; }
.gs-btn.blue { background: var(--gs-blue); color: #fff; }
.gs-btn.blue:hover { background: #0842a0; }
.gs-btn.line { background: transparent; border-color: #747775; color: var(--gs-ink); }
.gs-btn.line:hover { background: rgba(31,31,31,.06); }
.gs-btn.white { background: #fff; color: var(--gs-ink); }
.gs-btn.white:hover { background: #f1f3f4; }
.gs-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #e8f0fe; color: var(--gs-blue);
  font: 500 .75rem/1 var(--display); white-space: nowrap; }
.gs-chip.green { background: #e6f4ea; color: #146c2e; }
.gs-chip.green::before { content: ""; width: 12px; height: 12px; margin-right: 5px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 6l2.3 2.3-4.9 4.9-4-4L2 16.6 3.4 18l6-6 4 4 6.3-6.3L22 12V6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 6l2.3 2.3-4.9 4.9-4-4L2 16.6 3.4 18l6-6 4 4 6.3-6.3L22 12V6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.gs-chip.green.down::before { transform: scaleY(-1); }

/* ---------- sections ---------- */
main.wrap > .gs-sec { padding-top: clamp(80px, 12vh, 120px); }
.gs-sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 32px; }
.gs-sec-hd .gs-sub { margin-top: 12px; }
.gs-sec-hd.c { display: block; text-align: center; margin-bottom: 40px; }

/* ---------- hero: tinted, full width, runs under the floating nav ---------- */
main.wrap > .gs-hero { position: relative; margin-top: -74px; padding: 74px var(--g-in-wide) 0; background: var(--gs-tint, #e6ede7); }
.gs-hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: center; min-height: min(calc(100svh - 74px), 820px);
  padding: clamp(32px, 6vh, 64px) 0; max-width: var(--g-w12); margin: 0 auto; }
.gs-hero-copy { padding-left: calc((var(--g-w12) - var(--g-w10)) / 2); }
.gs-hero-copy .gs-lead { margin: 20px 0 0; max-width: 34em; font: 400 1.0625rem/1.6 var(--sans); color: var(--gs-ink); }
.gs-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.gs-facts li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.7);
  font: 500 .8125rem/1 var(--display); color: var(--gs-ink); }
.gs-facts svg { width: 16px; height: 16px; fill: var(--gs-blue); }
.gs-hero-media { position: relative; margin: 0; justify-self: end; width: min(100%, 560px); aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: #d9e2da;
  box-shadow: 0 30px 60px -30px rgba(25,28,29,.35); }
.gs-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.gs-hero-media figcaption { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: 999px; background: rgba(255,255,255,.92); font: 500 .8125rem/1 var(--display); color: var(--gs-ink); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.gs-hero-media figcaption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gs-blue); }
/* the page-head variant (Work, Contact): a shorter tinted hero with the copy only */
main.wrap > .gs-hero.slim .gs-hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: clamp(56px, 12vh, 112px) 0 clamp(48px, 9vh, 88px); }
.gs-hero.slim .gs-hero-copy .gs-lead { max-width: 42em; }

/* ---------- carousel of tiles (Popular on the Google Store) ---------- */
.gs-car { position: relative; }
.gs-track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--gs-tile, calc((var(--g-w10) - 72px) / 4)); gap: 24px; margin: 0 calc(-1 * var(--g-in)); padding: 0 var(--g-in) 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g-in); scrollbar-width: none; list-style: none; overscroll-behavior-x: contain; }
.gs-track::-webkit-scrollbar { display: none; }
.gs-track > li { scroll-snap-align: start; min-width: 0; }
.gs-tile > a, .gs-tile > button { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.gs-tm { position: relative; aspect-ratio: 1 / 1.04; border-radius: 20px; background: var(--gs-well); overflow: hidden; }
.gs-tm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12% 6% 6%; transition: transform .6s var(--gs-ease); }  /* the thumbnails sit on #f6f6f6, the well colour */
.gs-tile a:hover .gs-tm img, .gs-tile button:hover .gs-tm img { transform: scale(1.04); }
.gs-tm .gs-chip { position: absolute; left: 12px; top: 12px; z-index: 1; }
.gs-tile h3 { margin: 18px 0 0; font: 500 1rem/1.4 var(--display); color: var(--gs-ink); }
.gs-tile p { margin: 4px 0 0; font: 400 .875rem/1.45 var(--sans); color: var(--gs-ink-2); }
.gs-tile .gs-chip.green { margin-top: 10px; align-self: flex-start; }
.gs-tile .gs-link { margin-top: 14px; }
.gs-tile.all .gs-tm { display: grid; place-items: center; background: #fff; border: 1px solid #e1e3e1; }
.gs-tile.all .gs-tm span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #1f1f1f; color: #fff; font-size: 1.6rem; }
.gs-ctl { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.gs-bar { position: relative; flex: 1; height: 2px; background: #e1e3e1; border-radius: 2px; overflow: hidden; }
.gs-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: #1f1f1f; border-radius: 2px; }
.gs-arr { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--gs-ink); cursor: pointer;
  box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px rgba(60,64,67,.15); transition: opacity .2s, background .2s; flex: none; }
.gs-arr:hover:not(:disabled) { background: #f1f3f4; }
.gs-arr:disabled { opacity: .35; cursor: default; box-shadow: 0 1px 2px rgba(60,64,67,.2); }
.gs-arr svg { width: 22px; height: 22px; fill: currentColor; }
.gs-car.static .gs-ctl { display: none; }

/* ---------- centred statement over one large rounded card ---------- */
.gs-feat-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; margin: 0 calc(var(--g-in-wide) - var(--g-in)); padding: clamp(24px, 4vw, 56px);
  border-radius: 28px; background: #eef3fb; color: inherit; }
.gs-feat-card:hover .gs-link::after { transform: translate(3px, -1px); }
.gs-feat-vis { position: relative; min-height: 320px; border-radius: 20px; background: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.gs-feat-txt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding: 8px clamp(0px, 2vw, 24px); }
.gs-feat-txt .cv { align-self: stretch; }
.gs-feat-txt p { margin: 0; font: 400 1rem/1.5 var(--sans); color: var(--gs-ink-2); }
.gs-stat { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gs-stat b { font: 500 clamp(2.75rem, 4.6vw, 4rem)/1 var(--display); letter-spacing: -1.5px; color: var(--gs-blue); }
.gs-stat span { font: 500 1rem/1.4 var(--display); color: var(--gs-ink); }

/* ---------- tall 3-up promo cards (Explore the latest phones) ---------- */
.gs-promo3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 calc(var(--g-in-wide) - var(--g-in)); }
.gs-promo { position: relative; display: flex; flex-direction: column; align-items: center; min-height: clamp(520px, 52vw, 680px); padding: clamp(32px, 4vw, 48px) 24px 0; border-radius: 28px;
  overflow: hidden; text-align: center; background: linear-gradient(180deg, #fff 0%, var(--gs-p, #f1f3f4) 55%); color: inherit; }
.gs-promo h3 { margin: 0; max-width: 14em; font: 500 clamp(1.5rem, 2.2vw, 2rem)/1.25 var(--display); letter-spacing: -.25px; color: var(--gs-ink); text-wrap: balance; }
.gs-promo p { margin: 10px 0 0; max-width: 28em; font: 400 .9375rem/1.5 var(--sans); color: var(--gs-ink-2); text-wrap: balance; }
.gs-promo .gs-btn { margin-top: 22px; }
.gs-promo-m { position: relative; flex: 1; align-self: stretch; margin: 28px -24px 0; min-height: 220px; }
.gs-promo-m img, .gs-promo-m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; mix-blend-mode: darken; padding: 0 6% 0; }  /* darken: the #f6f6f6 stage takes the card's tint */
.gs-promo-m.fill { margin: 28px 0 24px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px -14px rgba(25,28,29,.35); }
.gs-promo-m.fill img, .gs-promo-m.fill video { object-fit: cover; object-position: 0 50%; mix-blend-mode: normal; padding: 0; }
.gs-promo-m.fill video { opacity: 0; transition: opacity .4s; }
.gs-promo.play .gs-promo-m.fill video { opacity: 1; }
.gs-promo-m .agent { left: 12px; bottom: 12px; }
.gs-promo:hover .gs-btn.dark { background: #3c4043; }

/* ---------- 2-up photo promos (Fi / Pixel Drop) ---------- */
.gs-promo2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gs-pp { display: flex; flex-direction: column; align-items: center; padding: clamp(32px, 4vw, 48px) 24px 0; border-radius: 28px; overflow: hidden; text-align: center;
  background: var(--gs-p, #f6efe9); }
.gs-pp h3 { margin: 0; font: 500 clamp(1.5rem, 2.2vw, 2rem)/1.25 var(--display); color: var(--gs-ink); text-wrap: balance; }
.gs-pp p { margin: 10px 0 0; max-width: 30em; font: 400 .9375rem/1.5 var(--sans); color: var(--gs-ink-2); text-wrap: balance; }
.gs-pp .gs-btn { margin-top: 22px; }
.gs-pp-m { position: relative; align-self: stretch; margin: 32px -24px 0; aspect-ratio: 4 / 3; overflow: hidden; }
.gs-pp-m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--gs-ease); }
.gs-pp:hover .gs-pp-m img { transform: scale(1.03); }

/* ---------- rotating quotes: a rounded grey panel ---------- */
.gs-quote { margin: 0 calc(var(--g-in-wide) - var(--g-in)); padding: clamp(48px, 8vw, 96px) clamp(24px, 8vw, 120px); border-radius: 28px; background: #f8f9fa; text-align: center; }
.gs-quote .gs-eye { color: var(--gs-ink-2); }
.gs-quote .qs { display: grid; }
.gs-quote .qi { grid-area: 1 / 1; align-self: center; transition: opacity .35s ease; }
.gs-quote .qi:not(.on) { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.gs-quote blockquote { margin: 0 auto; max-width: 30em; font: 400 clamp(1.4rem, 2.6vw, 2.25rem)/1.3 var(--display); letter-spacing: -.25px; color: var(--gs-ink); text-wrap: balance; }
.gs-quote figcaption { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font: 400 .9375rem/1.4 var(--sans); color: var(--gs-ink-2); }
.gs-quote .ring { width: 18px; height: 18px; flex: none; }
.gs-quote .ring circle { fill: var(--gs-ink); opacity: .16; transition: opacity .15s; }
.gs-quote .ring circle.on { opacity: 1; fill: var(--gs-blue); }
@media (prefers-reduced-motion: reduce) { .gs-quote .qi, .gs-quote .qi:not(.on) { transition: none; } }

/* ---------- grey card rail (Why buy on the Google Store) ---------- */
.gs-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.gs-why > * { display: flex; flex-direction: column; min-height: 220px; padding: 32px 28px 28px; border-radius: 20px; background: #f8f9fa; color: inherit; }
.gs-why svg { width: 28px; height: 28px; fill: var(--gs-ink); }
.gs-why h3 { margin: auto 0 0; padding-top: 28px; font: 500 1.375rem/1.3 var(--display); color: var(--gs-ink); overflow-wrap: anywhere; }
.gs-why p { margin: 6px 0 0; font: 400 .9375rem/1.45 var(--sans); color: var(--gs-ink-2); }
.gs-why .gs-link { margin-top: 14px; }
a.gs-why-c:hover { background: #f1f3f4; }

/* ---------- forms (Contact) ---------- */
.gs-form-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; }
.gs-form { padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: #f8f9fa; }
.gs-form h2 { margin: 0 0 24px; font: 500 clamp(1.5rem, 2.2vw, 2rem)/1.25 var(--display); color: var(--gs-ink); }
.gs-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gs-field { position: relative; margin-top: 16px; }
.gs-field label { display: block; margin-bottom: 6px; font: 500 .875rem/1.4 var(--display); color: var(--gs-ink); }
.gs-field input, .gs-field textarea { width: 100%; padding: 14px 16px; border: 1px solid #747775; border-radius: 12px; background: #fff; font: 400 1rem/1.4 var(--sans); color: var(--gs-ink); }
.gs-field textarea { min-height: 160px; resize: vertical; }
.gs-field input::placeholder, .gs-field textarea::placeholder { color: #5e5e5e; }
.gs-field input:focus, .gs-field textarea:focus { outline: none; border-color: var(--gs-blue); box-shadow: 0 0 0 1px var(--gs-blue); }
.gs-form .gs-btn { margin-top: 24px; min-height: 48px; padding: 0 28px; font-size: .9375rem; }
.gs-side { display: grid; gap: 24px; align-content: start; }
.gs-side > * { display: flex; flex-direction: column; padding: 28px; border-radius: 20px; background: #f8f9fa; color: inherit; }
.gs-side .k { font: 500 .875rem/1.4 var(--display); color: var(--gs-ink-2); }
.gs-side .v { margin-top: 8px; font: 500 1.375rem/1.3 var(--display); color: var(--gs-ink); overflow-wrap: anywhere; }
a.gs-side-c:hover .v { color: var(--gs-blue); }
.gs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.gs-tags li { height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.7); font: 500 .8125rem/1 var(--display); color: var(--gs-ink); }

/* ---------- category lineup (Work page: Explore the full lineup) ---------- */
.gs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; list-style: none; padding: 0; margin: 0; }
.gs-grid .gs-tm { aspect-ratio: 4 / 3.4; }
.gs-grid .gs-tile h3 { font-size: 1.25rem; }
.gs-grid .gs-tile p { font-size: .9375rem; }

/* ---------- dialogs ---------- */
.mdl { margin: auto; width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 28px; background: #fff; color: var(--gs-ink);
  box-shadow: 0 24px 80px rgba(0,0,0,.3); overflow: auto; overscroll-behavior: contain; }
.mdl::backdrop { background: rgba(32,33,36,.55); }
.mdl[open] { animation: gs-in .35s var(--gs-ease); }
@keyframes gs-in { from { opacity: 0; transform: translateY(16px); } }
.mdl-im { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mdl-im.dev { object-fit: contain; padding: 24px 32px 8px; background: var(--gs-well); mix-blend-mode: normal; }
.mdl-bd { padding: 28px 32px 32px; }
.mdl-k { font: 500 .875rem/1.4 var(--display); color: var(--gs-blue); }
.mdl h2 { margin: 6px 0 0; font: 500 1.75rem/1.25 var(--display); color: var(--gs-ink); }
.mdl p { margin: 12px 0 0; font: 400 1rem/1.6 var(--sans); color: var(--gs-ink-2); }
.mdl ul { margin: 14px 0 0; padding-left: 20px; font: 400 .9375rem/1.55 var(--sans); color: var(--gs-ink); }
.mdl li + li { margin-top: 6px; }
.mdl-cta { margin-top: 24px; }
.mdl-x { position: sticky; float: right; top: 12px; margin: 12px 12px -56px 0; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--gs-ink);
  font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.mdl-x:hover { background: #f1f3f4; }
html.dlg-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mdl[open] { animation: none; } }

/* ---------- agent chip (Vision, Franklin previews) ---------- */
.agent { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 6px; width: min(200px, calc(100% - 24px)); padding: 10px 14px 11px; border-radius: 14px; background: #fff;
  color: #1f1f1f; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.14); text-align: left; }
.agent .ag-k { display: flex; align-items: center; gap: 7px; font: 500 .75rem/1.2 var(--display); color: #5f6368; white-space: nowrap; }
.agent .ag-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--gs-blue); animation: ag-pulse 1.2s ease-in-out infinite; }
.agent .ag-t { font: 500 .875rem/1.25 var(--display); }
.agent .ag-bar { display: flex; gap: 3px; }
.agent .ag-bar b { flex: 1; height: 3px; min-width: 14px; border-radius: 2px; background: #e3e3e3; transition: background .3s; }
.agent .ag-bar b.on { background: var(--gs-blue); }
.agent.hold .ag-k { color: var(--gs-blue); }
.agent.hold .ag-k i { animation: none; background: none; width: auto; height: auto; }
.agent.hold .ag-k i::before { content: "\2713"; font-style: normal; font-size: 11px; }
@keyframes ag-pulse { 50% { opacity: .3; } }

/* ---------- responsive ---------- */
@media (max-width: 1023.98px) {
  .gs-hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 40px; padding: 40px 0 48px; }
  .gs-hero-copy { padding-left: 0; }
  .gs-hero-media { justify-self: stretch; width: 100%; aspect-ratio: 4 / 3; }
  .gs-track { --gs-tile: calc((var(--g-w10) - 48px) / 2.4); }
  .gs-feat-card, .gs-form-card { grid-template-columns: minmax(0, 1fr); }
  .gs-promo3 { grid-template-columns: minmax(0, 1fr); }
  .gs-promo { min-height: 0; }
  .gs-promo-m { min-height: 300px; }
  .gs-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  main.wrap > .gs-hero { margin-top: -66px; padding-top: 66px; }
  .gs-hero-media { aspect-ratio: 4 / 5; }
  .gs-track { --gs-tile: 72%; gap: 16px; }
  .gs-ctl { margin-top: 24px; }
  .gs-arr { display: none; }
  .gs-promo2, .gs-why, .gs-grid { grid-template-columns: minmax(0, 1fr); }
  .gs-why > * { min-height: 0; }
  .gs-form .row2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gs-feat-vis { min-height: 0; padding: 16px; }
  .gs-sec-hd { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-tm img, .gs-pp-m img { transition: none; }
  .agent .ag-k i { animation: none; }
  .gs-promo-m.fill video { display: none; }
}
/* a thumbnail with a lot of empty stage: crop in on the device */
.gs-promo-m.zoom img { object-fit: cover; object-position: 50% 30%; transform: scale(1.25); transform-origin: 50% 100%; }

/* ---------- compare row (Which Google Pixel is right for you?) ---------- */
.gs-cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gs-cmp-c { display: flex; flex-direction: column; padding: 24px; border-radius: 28px; background: #f8f9fa; }
.gs-cmp-m { position: relative; aspect-ratio: 16 / 11; border-radius: 20px; background: var(--gs-well); overflow: hidden; }
.gs-cmp-m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.gs-cmp-c h3 { margin: 20px 0 0; min-height: 2.6em; font: 500 1.375rem/1.3 var(--display); color: var(--gs-ink); }
.gs-cmp-b { margin-top: 16px; }
.gs-cmp-c dl { margin: 24px 0 0; display: grid; gap: 0; }
.gs-cmp-c dl > div { padding: 16px 0; border-top: 1px solid #e1e3e1; }
.gs-cmp-c dt { font: 500 .8125rem/1.4 var(--display); color: var(--gs-ink-2); }
.gs-cmp-c dd { margin: 4px 0 0; font: 400 1rem/1.45 var(--sans); color: var(--gs-ink); }
.gs-tags a { color: inherit; }
.gs-tags li:has(a):hover { background: #fff; }
@media (max-width: 1023.98px) { .gs-cmp { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(280px, 42%); overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--g-in)); padding: 0 var(--g-in) 8px; scroll-padding-inline: var(--g-in); scrollbar-width: none; }
  .gs-cmp > * { scroll-snap-align: start; } }
@media (max-width: 599.98px) { .gs-cmp { grid-auto-columns: 82%; } }

/* ---------- case-study hero (Crew Check-In, Franklin, AI tools): title + section tabs, copy, cover ---------- */
.gs-hero.cs .gs-hero-in { min-height: min(calc(100svh - 74px), 860px); align-content: center; row-gap: clamp(24px, 5vh, 48px); }
.gs-cs-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 0 calc((var(--g-w12) - var(--g-w10)) / 2); }
.gs-cs-bar .t { font: 500 1.125rem/1.3 var(--display); color: var(--gs-ink); margin-right: 8px; }
.gs-cs-bar .tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-cs-bar .tabs a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: #fff; font: 500 .875rem/1 var(--display); color: var(--gs-ink); transition: background .2s; }
.gs-cs-bar .tabs a:hover { background: #f1f3f4; }
.gs-cs-bar .tabs a.on { background: #d3e3fd; color: #041e49; }
.gs-facts.cs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 34em; }
.gs-facts.cs li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: auto; padding: 14px 16px; border-radius: 16px; line-height: 1.35; font-weight: 400; }
.gs-facts.cs b { font: 500 .75rem/1.2 var(--display); color: var(--gs-ink-2); }
.gs-hero-media.cs { aspect-ratio: auto; width: 100%; max-width: none; display: grid; place-items: center; padding: clamp(20px, 3vw, 40px); background: rgba(255,255,255,.6); box-shadow: none; }
.gs-hero-media.cs img, .gs-hero-media.cs video { position: static; width: auto; height: auto; max-width: 100%; max-height: min(64vh, 640px); object-fit: contain; border-radius: 12px; }
.gs-hero-media.cs video { box-shadow: 0 10px 30px -12px rgba(25,28,29,.35); }
@media (max-width: 1023.98px) {
  .gs-hero.cs .gs-hero-in { min-height: 0; }
  .gs-cs-bar { padding: 0; }
  .gs-hero-media.cs img, .gs-hero-media.cs video { max-height: 70vh; }
}
@media (max-width: 599.98px) {
  .gs-cs-bar .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .gs-facts.cs li { padding: 12px 14px; }
}
.gs-hero.cs .gs-h1 { font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1.1; }
/* next project card: Google sentence-case label */
main.wrap > .nextproj .np-lab { font: 500 .875rem/1.4 var(--display); letter-spacing: 0; text-transform: none; color: var(--gs-ink-2); }

/* ---------- Say hi reel (2026-10-28), after the Marvel Studios opening: mv.js fills the card with a flip-cut photo montage
   under a red wash while it is hovered or focused; the type turns white on top ---------- */
.ac-cta { position: relative; overflow: hidden; isolation: isolate; }
.ac-cta > :not(.mv) { position: relative; z-index: 1; }
.mv { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .35s ease; pointer-events: none; background: #120405; }
.ac-cta.mv-on .mv { opacity: 1; }
.mv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) contrast(1.25) brightness(.9);
  transition: transform .5s linear; will-change: transform; }
.mv img.on { opacity: 1; }
.mv-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(226,54,54,.92), rgba(160,14,20,.9)); mix-blend-mode: multiply; }
.mv-vig { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%); }
.ac-cta .hi, .ac-cta .ac-btn { transition: color .3s ease, background .3s ease, border-color .3s ease; }
.ac-cta.mv-on .hi, .ac-cta.mv-on .hi:hover { color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.ac-cta.mv-on .ac-btn { background: #fff; color: #b3121b; border-color: #fff; }
.ac-cta.mv-on .ac-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.85); }

/* tile detail rows (2026-10-30, from the removed "Compare the American Airlines work" cards): label over value, hairline between */
.gs-tdl { display: flex; flex-direction: column; margin-top: auto; padding-top: 14px; } /* auto: rows line up across a row of tiles */
.gs-tdl > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line, #e1e3e1); }
.gs-tdl .k { font: 500 .75rem/1.4 var(--display); color: var(--gs-ink-2); }
.gs-tdl .v { font: 400 .875rem/1.45 var(--sans); color: var(--gs-ink); }
.gs-tdl + .gs-link { margin-top: 4px; }

/* Project cards (2026-10-30), after James's old portfolio cards: tall card, eyebrow + title + one line at the top, the UI large
   and running off the bottom-right edge. Work page (.pcs). ECS / Crew Check-In use the original images/ECS.svg / CCI.svg; the others
   scale up their transparent cut-out (images/thumbs/cut) so the devices bleed the same way. Detail rows + link sit under the card. */
.pcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.pc { display: flex; flex-direction: column; min-width: 0; }
.pc-c { position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 5 / 8; overflow: hidden; padding: clamp(24px, 2.6vw, 36px);
  border: 0; border-radius: 28px; background: var(--g-card, #f8f9fa); color: inherit; text-align: left; font: inherit; cursor: pointer; text-decoration: none; }
.pc-k { font: 500 .8125rem/1.4 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--gs-ink-2); }
.pc-t { margin: 10px 0 0; font: 500 clamp(1.5rem, 2.3vw, 2rem)/1.15 var(--display); letter-spacing: -.01em; color: var(--gs-ink); text-wrap: balance; }
.pc-s { margin: 14px 0 0; max-width: 30em; font: 400 1rem/1.5 var(--sans); color: var(--gs-ink-2); }
.pc-shot { position: absolute; z-index: 0; pointer-events: none; }
.pc-shot img { display: block; width: 100%; height: auto; transition: transform .5s cubic-bezier(.2,.8,.2,1); transform-origin: 0 0; }
.pc-c:hover .pc-shot img { transform: translate(-6px, -6px); }
/* the SVGs already start their UI 1/7 in and run off right and bottom: pin them to that corner */
.pc-shot.svg { right: 0; bottom: 0; width: 100%; }
/* cut-outs: 1440x1280 with the devices centred; scale up and push right/down so they crop at the edges */
.pc-shot.cut { left: 4%; bottom: -26%; width: 168%; }
.pc-shot.cut.vis { left: -10%; bottom: -24%; width: 168%; }
.pc .pc-c:focus-visible { outline: 3px solid var(--gs-ink); outline-offset: 3px; }
.pc .gs-tdl { margin-top: 0; padding-top: 18px; }
.pc .pc-l { margin-top: 14px; align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; }
@media (max-width: 1023.98px) { .pcs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(300px, 46%); overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; } .pc { scroll-snap-align: start; } }
@media (max-width: 599.98px) { .pcs { grid-auto-columns: 86%; } }
/* a project that spans two columns (Vision, 2026-10-30): same height as its row, text on the left, art from the right edge */
.pc.wide { grid-column: span 2; }
.pc.wide .pc-c { aspect-ratio: auto; flex: 1; }
.pc.wide .pc-t, .pc.wide .pc-s, .pc.wide .pc-k { max-width: 46%; }
.pc.wide .pc-shot.cut.vis { left: 40%; bottom: -46%; width: 118%; }
@media (max-width: 1023.98px) { .pc.wide { grid-column: auto; } .pc.wide .pc-c { aspect-ratio: 5 / 8; }
  .pc.wide :is(.pc-t, .pc-s, .pc-k) { max-width: none; } .pc.wide .pc-shot.cut.vis { left: -10%; bottom: -24%; width: 168%; } }

/* Say hi footer (2026-10-30, Contact): the Oct 17 layout (giant Say hi across the page, a line, a centred link row, a statement bar)
   in Google Sans and sentence case. Colours read the mono palette (--m-*, set on body.mono by mono.css and ecs-mono.css), else the gs tokens.
   Since 2026-10-30 it is the footer on every page except Home (which has none); it replaced the ac-foot link columns and the ac-cta Say hi card. */
.sh-foot { margin-top: clamp(64px, 10vw, 140px); padding: clamp(48px, 7vw, 96px) 0 0; border-top: 1px solid var(--m-line, var(--line, #3c3e41)); text-align: center; overflow: hidden; }
.sh-hi { display: block; width: fit-content; margin: 0 auto; font: 500 clamp(6rem, 25vw, 26rem)/1.08 var(--display); letter-spacing: -.045em;
  color: var(--m-ink, var(--gs-ink)); text-decoration: none; transition: color .3s ease; }
.sh-hi:hover { color: #fff; }
.sh-hi:focus-visible { outline: 3px solid var(--m-ink, var(--gs-ink)); outline-offset: 8px; border-radius: 16px; }
.sh-sub { margin: clamp(8px, 1.4vw, 20px) 0 0; font: 400 clamp(1.125rem, 1.6vw, 1.375rem)/1.4 var(--display); color: var(--m-ink-2, var(--gs-ink-2)); }
.sh-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; margin: clamp(28px, 4vw, 44px) auto 0; padding: 0 24px;
  font: 400 .9375rem/1.4 var(--sans); color: var(--m-ink-2, var(--gs-ink-2)); }
.sh-row a { color: var(--m-ink, var(--gs-ink)); text-decoration: underline; text-decoration-color: var(--m-line, var(--line, #5f6368)); text-underline-offset: 4px; }
.sh-row a:hover { text-decoration-color: currentColor; }
.sh-st { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-top: clamp(40px, 6vw, 72px);
  padding: 20px clamp(16px, 3vw, 32px); border-top: 1px solid var(--m-line, var(--line, #3c3e41)); }
.sh-st p { margin: 0; font: 400 .9375rem/1.45 var(--sans); color: var(--m-ink-2, var(--gs-ink-2)); }
.sh-mark { font-size: 1.25rem; color: var(--m-ink, var(--gs-ink)); }
.sh-sig { font: 500 .875rem/1.4 var(--display); letter-spacing: .02em; white-space: nowrap; color: var(--m-ink-2, var(--gs-ink-2)); }
@media (max-width: 599.98px) { .sh-st { grid-template-columns: 1fr; justify-items: center; } }
/* glow + particles (2026-10-30, sh.js draws the canvas): a faint light behind the lettering, a soft halo on the letters, motes above it all */
.sh-foot { position: relative; isolation: isolate; background: radial-gradient(55% 48% at 50% 38%, rgba(255,255,255,.055), rgba(255,255,255,0) 70%); }
.sh-foot > :not(.sh-dust) { position: relative; z-index: 1; }
.sh-dust { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.sh-hi { text-shadow: 0 0 28px rgba(255,255,255,.22), 0 0 90px rgba(255,255,255,.14); }
/* visually hidden (page h1 on Work and Contact, whose visible page headers were removed 2026-10-30) */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Contact (2026-10-30) is the footer at full page: no form, the Say hi footer fills the screen under the top bar */
body.sh-page main.wrap { min-height: 0; padding: 0; }
body.sh-page .sh-foot { min-height: calc(100svh - 64px); margin-top: 0; border-top: 0; display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(24px, 6vh, 64px); }
body.sh-page .sh-st { margin-top: auto; }
body.sh-page .sh-hi { margin-top: auto; }
/* Work (2026-10-30): the project sections use the full 12-column width, the same as the top bar */
main.wrap > .gs-sec:has(.pcs) { padding-left: var(--g-in-wide); padding-right: var(--g-in-wide); }

/* carousel arrows, AAA contrast on the dark mono pages (2026-10-30): they had rendered as white circles with a #e1e3e4 chevron
   (about 1.2:1) and the disabled one faded to 35%. Now: light circle + near-black chevron (~14:1), white on hover; disabled = an
   outlined dark circle with a #bdc1c6 chevron (~10:1 on #151618), no opacity fade */
body.mono button:is(.px-arrow, .gs-arr) { background: #e1e3e4; color: #151618; border: 1px solid #e1e3e4; opacity: 1; box-shadow: none; }
body.mono button:is(.px-arrow, .gs-arr):not(:disabled):hover { background: #fff; border-color: #fff; color: #151618; }
body.mono button:is(.px-arrow, .gs-arr):disabled { background: transparent; color: #bdc1c6; border-color: #5f6368; opacity: 1; }
body.mono button:is(.px-arrow, .gs-arr):focus-visible { outline: 2px solid #e1e3e4; outline-offset: 3px; }

/* Aggressive Pickup dialog rows (2026-10-30): label over value with hairlines, like the Work page detail rows (.gs-tdl) */
.mdl-rows { display: flex; flex-direction: column; margin: 16px 0 4px; }
.mdl-rows > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid #3c3e41; }
.mdl-rows > div:last-child { border-bottom: 1px solid #3c3e41; }
.mdl-rows .k { font-size: 13px; line-height: 18px; font-weight: 500; color: #9aa0a6; }
.mdl-rows .v { font-size: 16px; line-height: 24px; color: #e1e3e4; }
/* footer centred (2026-10-31, James): Say hi is a heading, not a link; the links are larger and heavier; everything sits in
   one centred column, horizontally and vertically, in a footer one screen tall */
.sh-foot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100svh; box-sizing: border-box;
  padding-bottom: clamp(40px, 6vw, 72px); }
.sh-hi { margin: 0 auto; cursor: default; }
.sh-hi:hover { color: var(--m-ink, var(--gs-ink)); }
.sh-row { font: 500 1.125rem/1.4 var(--display); gap: 12px 40px; }
.sh-st { display: flex; flex-direction: column; align-items: center; gap: 10px; border-top: 0; margin-top: clamp(32px, 5vw, 56px); padding: 0 24px; text-align: center; }
/* footer scaled after Big Picture Company's (bpco.kr, 2026-10-31, James): one screen tall; "Say hi" lighter and a little smaller,
   scaling with the window and floating centred in the open space; the details pinned to the bottom as a small centred stack
   (line, links, statement) with ✦ and JK.2026 framing the statement in the bottom corners */
.sh-foot { display: grid; grid-template-rows: 1fr auto auto auto; justify-items: center; align-items: center; min-height: 100svh;
  padding: clamp(80px, 10vh, 120px) clamp(16px, 3vw, 40px) clamp(20px, 3vh, 32px); }
.sh-hi { align-self: center; font-weight: 400; font-size: clamp(4.5rem, 17vw, 20rem); line-height: 1.12; letter-spacing: -.045em; }
.sh-sub { margin: 0; font: 400 clamp(1.125rem, 1.4vw, 1.375rem)/1.4 var(--display); color: var(--m-ink, var(--gs-ink)); }
.sh-row { margin: clamp(14px, 2vh, 22px) 0 0; font: 500 1rem/1.4 var(--display); gap: 10px 32px; }
.sh-st { width: 100%; display: grid; grid-template-columns: 1fr minmax(0, 46rem) 1fr; align-items: end; gap: 16px; margin-top: clamp(28px, 5vh, 56px); padding: 0; }
.sh-st p { grid-column: 2; font-size: .8125rem; line-height: 1.5; text-align: center; }
.sh-mark { grid-column: 1; grid-row: 1; justify-self: start; }
.sh-sig { grid-column: 3; grid-row: 1; justify-self: end; font-size: .8125rem; }
@media (max-width: 599.98px) { .sh-st { grid-template-columns: auto 1fr auto; } .sh-st p { font-size: .75rem; } }
.sh-foot { grid-template-columns: minmax(0, 1fr); }   /* one full-width column, so the statement row can reach the corners */
/* footer surface = the FIND MATCH resting texture (2026-10-31, sh.js v=4): an SVG ground with silky streaks behind everything, and a
   highlight that runs along the top edge (restarts off-screen, so the loop never shows). The old particle canvas is gone. */
.sh-foot { background: #151618; border-top: 1px solid rgba(225, 227, 228, .18); }
.sh-skin { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.sh-skin .sh-silk { fill: #fff; opacity: .2; }
.sh-foot > :not(.sh-skin):not(.sh-dust) { position: relative; z-index: 1; }
.sh-foot::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 50%, transparent) no-repeat; background-size: 22% 100%;
  animation: shRim 7s linear infinite; }
@keyframes shRim { from { background-position: -30% 0; } to { background-position: 130% 0; } }
@media (prefers-reduced-motion: reduce) { .sh-foot::after { animation: none; background-position: 50% 0; } }
.sh-foot > .sh-skin { position: absolute; inset: 0; z-index: 0; }   /* beats the older `.sh-foot > :not(.sh-dust)` rule, which had put it in flow */
/* Work page Vision card: the Vision demo plays full-bleed behind a dark overlay, text up front (2026-10-31, James) */
.pc-shot.vid { inset: 0; }
.pc-shot.vid video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.pc-shot.vid::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(21, 22, 24, .92) 0%, rgba(21, 22, 24, .8) 42%, rgba(21, 22, 24, .55) 100%); }
.pc-c:has(.pc-shot.vid) > :not(.pc-shot) { position: relative; z-index: 1; }
.pc-shot.vid::after { background: linear-gradient(90deg, rgba(21, 22, 24, .95) 0%, rgba(21, 22, 24, .88) 45%, rgba(21, 22, 24, .74) 100%); }
/* Work page: ECS spans the whole first row; Aggressive Pickup and Crew Check-In drop to the second row at their usual third width
   (2026-10-31, James). The wide card is landscape, text on the left, the ECS art bleeding off the bottom-right. */
@media (min-width: 1024px) {
  .pc.full { grid-column: 1 / -1; }
  .pc.full .pc-c { aspect-ratio: 12 / 5; }
  .pc.full .pc-t, .pc.full .pc-s, .pc.full .pc-k { max-width: 40%; }
  .pc.full .pc-shot.svg { top: 12%; bottom: auto; right: 0; width: 54%; }
  .pc.full .gs-tdl { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
}
@media (min-width: 1024px) { .pc.full .gs-tdl { display: grid; } }
/* ECS card: the IOC call-volume chart (same data as the home ECS cell) under the text on the left (2026-10-31, James) */
.pc-cv { display: none; }
@media (min-width: 1024px) {
  .pc.full .pc-cv { display: block; position: relative; z-index: 1; width: 40%; margin-top: auto; }
  .pc-cv-k { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; font: 400 .875rem/1.4 var(--sans); color: #9aa0a6; }
  .pc-cv-k b { font: 400 2.25rem/1 var(--display); color: #e1e3e4; }
  .pc-cv-g { display: block; width: 100%; height: auto; overflow: visible; }
  .pc-cv-g text { font: 400 11px var(--display); fill: #9aa0a6; }
  .pc-cv-g text.b { fill: #e1e3e4; }
  .pc-cv-g .avg { stroke: #5f6368; stroke-dasharray: 3 4; }
  .pc-cv-g .ar-b { fill: rgba(255, 255, 255, .06); } .pc-cv-g .ar-a { fill: rgba(255, 255, 255, .12); }
  .pc-cv-g .ln { fill: none; stroke-width: 2; stroke-linejoin: round; } .pc-cv-g .ln.before { stroke: #9aa0a6; } .pc-cv-g .ln.after { stroke: #fff; }
  .pc-cv-g .launch { stroke: #e1e3e4; } .pc-cv-g .end { fill: #151618; stroke: #fff; stroke-width: 2; }
}
/* impact copy (2026-10-31): longer stories need room — ECS card grows to fit, chart kept clear of the text; art on the
   one-third cards sits a little smaller so the story never runs into it */
@media (min-width: 1024px) {
  .pc.full .pc-c { aspect-ratio: auto; min-height: min(600px, 42vw); }
  .pc.full .pc-cv { padding-top: 36px; width: 36%; }
  .pc:not(.full):not(.wide) .pc-shot.svg { width: 88%; }
}
/* ECS card thumbnail, both sides of ECS (2026-10-31, James: "show both the mobile and web sides"): the IOC desktop (Crew Member
   Lookup with the ECS Inbox docked, ecs/ui-lookup-inbox-clear.svg) large at the back, the pilot app (Contact AA dashboard,
   ecs/dashboard-inbox-light.png) in a phone in front, and a request travelling the dashed route from the phone's Contact AA to
   the inbox. One stage measured in container units (a 620×400 grid, 1 unit = .1cqw) so it scales with the card and the route
   stays on its targets. Still under reduced motion. */
@media (min-width: 1024px) {
  .pc.full .pc-c { container-type: inline-size; }
  .pc-shot.e2 { left: 39cqw; top: 6.5cqw; width: 62cqw; height: 40cqw; }
  .pc-shot.e2 > * { position: absolute; }
  .e2-desk { left: 5cqw; top: 6cqw; width: 56cqw; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55)); }
  .e2-desk img, .e2-phone img { width: 100%; height: auto; }
  .e2-phone { left: 1cqw; top: 13cqw; width: 15cqw; padding: .7cqw; border-radius: 2.6cqw; background: #0b0c0d;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 50px rgba(0, 0, 0, .6); }
  .e2-phone img { border-radius: 2cqw; }
  .e2-link { inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .e2-link path { fill: none; stroke: #151618; stroke-width: 2.4; stroke-dasharray: 7 6; stroke-linecap: round;
    paint-order: stroke; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff); animation: e2March 1s linear infinite; }
  .e2-dot { fill: #151618; stroke: #fff; stroke-width: 3; }
  .e2-end, .e2-start { fill: #fff; stroke: #151618; stroke-width: 2.4; }
  @keyframes e2March { to { stroke-dashoffset: -13; } }
  @media (prefers-reduced-motion: reduce) { .e2-dot { display: none; } .e2-link path { animation: none; } }
}
@media (min-width: 1024px) {   /* stage moved clear of the story text */
  .pc-shot.e2 { left: 44cqw; }
  .e2-desk { left: 5cqw; top: 6cqw; width: 54cqw; }
  .e2-phone { left: 0; top: 14cqw; width: 14cqw; }
}
/* Who uses it / Result / My role now sit inside each card, under the story, three across with one hairline above
   (2026-10-31, James: "fit these into the cards"); the one-third cards grow so the art still clears them */
.pc-c .gs-tdl { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px;
  margin: 20px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(225, 227, 228, .18); }
.pc-c .gs-tdl > span { padding: 0; border: 0; gap: 4px; }
.pc-c .gs-tdl .k { font-size: .75rem; color: #9aa0a6; }
.pc-c .gs-tdl .v { font-size: .8125rem; line-height: 1.4; color: #e1e3e4; }
@media (min-width: 1024px) {
  .pc:not(.full):not(.wide) .pc-c { aspect-ratio: 5 / 9; }
  .pc.full .gs-tdl { max-width: 40%; }
  .pc.full .pc-cv { padding-top: 28px; }
}
/* Say hi calmer (2026-10-31, James: "why is say hi so weird now?"): at full-screen scale the FIND MATCH streaks read as smeared
   fabric and the old glow on the lettering went muddy over them. Streaks are now a faint texture; the lettering is crisp. */
.sh-skin .sh-silk { opacity: .07; }
.sh-foot .sh-hi { text-shadow: none; }
.sh-foot::before { content: none; }
.sh-skin .sh-silk { opacity: .09; }   /* faster flow (sh.js 9s cycle) at a faint strength: visible motion, subtle overall */
.sh-foot::after { animation-duration: 5s; opacity: .6; }
/* Work page ECS card: the same IOC photo background as the Home ECS cell (2026-11-01, James) */
.pc.full .pc-c { isolation: isolate; }
.pc.full .pc-c::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(21, 22, 24, .9) 0%, rgba(21, 22, 24, .72) 45%, rgba(21, 22, 24, .82) 100%),
    url("images/ecs/photo-ioc-console.webp") 50% 30% / cover no-repeat;
  filter: grayscale(1) contrast(1.05); }
.pc.full .pc-c:is(:hover, :focus-visible)::before { filter: grayscale(.6) contrast(1.05) brightness(1.15); }
/* Work cards: Who uses it / Result / My role as a label | value table, hairlines between rows, no fill (2026-11-01, James) */
.pc-c .gs-tdl { display: block; padding: 0; border-top: 1px solid rgba(225, 227, 228, .18); }
.pc-c .gs-tdl > span { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(225, 227, 228, .18); }
@media (min-width: 1024px) { .pc.full .gs-tdl { display: block; } }
/* Vision in a single Featured Work cell (2026-11-01, James: it took Crew Check-In's place): the full-bleed video under a dark
   wash read muddy behind the text in a narrow card. Here it is a screen window instead, like the Aggressive Pickup devices: under
   the text, inset from the left, running off the right and bottom edges, dark bezel; no wash. */
@media (min-width: 1024px) {
  .pc:not(.wide):not(.full) .pc-shot.vid { inset: auto; left: 10%; right: -14%; bottom: -2%; aspect-ratio: 16 / 10;
    border: 4px solid #0b0c0d; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; overflow: hidden; box-shadow: 0 20px 44px rgba(0, 0, 0, .55); }
  .pc:not(.wide):not(.full) .pc-shot.vid::after { content: none; }
  .pc:not(.wide):not(.full) .pc-shot.vid video { object-position: 0 0; }
}
@media (min-width: 1024px) {   /* Vision window fills the card's width (2026-11-01, James) */
  .pc:not(.wide):not(.full) .pc-shot.vid { left: 0; right: 0; bottom: 0; border: 0; border-top: 4px solid #0b0c0d; border-radius: 0; }
}
/* ECS card hover (2026-11-01, James: "fix the hover effect for the mockup"): the card nudge (.pc-c:hover .pc-shot img) moved each
   <img> on its own, so the phone screen slid out of its bezel (the bezel is the .e2-phone span), the desktop left its shadow behind
   and the light trail no longer met Contact AA or the inbox. The ECS mockup now moves as one piece. */
.pc-shot.e2 { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.pc-c:is(:hover, :focus-visible) .pc-shot.e2 img { transform: none; }
.pc-c:is(:hover, :focus-visible) .pc-shot.e2 { transform: translate(-6px, -6px); }
@media (prefers-reduced-motion: reduce) { .pc-shot.e2 { transition: none; } }
/* Vision spans the two columns left in its row next to Aggressive Pickup (2026-11-01, James: "fill the space left in the row").
   Text on the left, the demo as a screen window off the bottom-right edge, same bezel as the single-cell version; no wash. */
@media (min-width: 1024px) {
  /* in the card's flow, so it takes whatever height the text leaves at any width; bleeds off the right and bottom padding */
  .pc.wide .pc-shot.vid { position: relative; inset: auto; flex: 1 1 0; min-height: 120px; aspect-ratio: auto; overflow: hidden;
    margin: 28px calc(-1 * clamp(24px, 2.6vw, 36px)) calc(-1 * clamp(24px, 2.6vw, 36px)) 24%;
    border: 4px solid #0b0c0d; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; box-shadow: 0 20px 44px rgba(0, 0, 0, .55); }
  .pc.wide .pc-shot.vid::after { content: none; }
  .pc.wide .pc-shot.vid video { object-position: 0 0; }
}
/* project-type tag beside a card's kicker (2026-11-01, James: Vision labelled as an AI project): a small solid chip with the
   site's top-left / bottom-right cut, no outline, so it reads as a label, not a button */
.pc-k .pc-tag { display: inline-flex; align-items: center; height: 20px; margin-left: 10px; padding: 0 8px; vertical-align: 1px;
  font: 500 .6875rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #e1e3e4; background: rgba(225, 227, 228, .12);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
/* ECS card: the desk + phone mockup a size smaller at the top right, two smaller frames under it (2026-11-01, James: "one
   version of the ecs image thumbnail and then 2 smaller ones underneath it"): the IOC Crew Member Lookup and the IOC walkthrough
   photo, both already on the ECS case page. Same chamfer as the rest of the site, hairline rim; they move with the card as one. */
.e2-tiles { display: none; }
@media (min-width: 1024px) {
  .pc.full .pc-c { aspect-ratio: auto; min-height: calc((100vw - 68px) * .54); }   /* a little taller (54% of the card's width; the page is 34px in each side), so the mockup and the frames share one width; grows if the story needs more */
  .pc-shot.e2 { left: 48.8cqw; top: -2.1cqw; scale: .9; transform-origin: 0 0; }
  .pc-shot.e2-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; left: 48.8cqw; right: 3.5cqw; top: 38cqw; bottom: clamp(24px, 2.6vw, 36px);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  .e2-tile { --c: 10px; position: relative; min-height: 0; padding: 1px; background: rgba(225, 227, 228, .22);
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
  .pc-shot .e2-tile img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; background: #fff;
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
  .pc-shot .e2-tile.ph img { object-position: 50% 40%; filter: grayscale(1) contrast(1.05); transition: filter .5s; }
  .pc-c:is(:hover, :focus-visible) .pc-shot.e2-tiles img { transform: none; }
  .pc-c:is(:hover, :focus-visible) .pc-shot.e2-tiles { transform: translate(-6px, -6px); }
  .pc-c:is(:hover, :focus-visible) .e2-tile.ph img { filter: grayscale(.6) contrast(1.05); }
}
@media (prefers-reduced-motion: reduce) { .pc-shot.e2-tiles { transition: none; } }
/* no hover lift on card art (2026-11-01, James: "don't lift the mockup or image containers when I hover"): mockups, images and
   frames stay put on every card; the photo tint and background brighten remain the hover cue */
.pc-c:is(:hover, :focus-visible) :is(.pc-shot, .pc-shot img, .pc-shot.e2, .pc-shot.e2-tiles) { transform: none; }
/* ECS card stands out (2026-11-01, James: "bring a little color back into the ECS card"): the IOC photo and the walkthrough photo
   keep some of their colour; the other cards stay monochrome */
.pc.full .pc-c::before { filter: grayscale(.35) contrast(1.05); }
.pc.full .pc-c:is(:hover, :focus-visible)::before { filter: grayscale(.1) contrast(1.05) brightness(1.15); }
@media (min-width: 1024px) {
  .pc-shot .e2-tile.ph img { filter: grayscale(.35) contrast(1.05); }
  .pc-c:is(:hover, :focus-visible) .e2-tile.ph img { filter: grayscale(.1) contrast(1.05); }
}
/* the mockup in its own frame (same chamfer + hairline rim as the two frames under it), sized to the frames' width and running
   a little off its right and bottom edges */
@media (min-width: 1024px) {
  .pc-shot.e2-box { --c: 10px; left: 48.8cqw; right: 3.5cqw; top: clamp(24px, 2.6vw, 36px); height: calc(38cqw - 1.6cqw - clamp(24px, 2.6vw, 36px));
    padding: 1px; background: rgba(225, 227, 228, .22);
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
  .e2-win { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #1c1d20;
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
  .e2-win > .pc-shot.e2 { left: 3cqw; top: -5.4cqw; scale: .95; }
}
/* ECS mockup in colour (2026-11-01, James: "bring color back into the mockup"): the desktop and phone keep their colours, only
   slightly dimmed so the lit ECS Inbox panel and Contact AA card still lead (overrides the greyscale in hx.css) */
.pc.full .pc-shot.e2 .e2-desk > img:not(.e2-spot) { filter: brightness(.72) contrast(1.05); }
.pc.full .pc-shot.e2 .e2-phone > img:not(.e2-spot) { filter: brightness(.78); }
/* ECS mockup frame shows the desk + phone cut-out (images/thumbs/cut/ecs.webp), laid out as on the Work shelf card (2026-11-02,
   James: "use the mockup layout you have here"): Crew Member Lookup large, running off the right and bottom, the phone in front
   at the lower left. The live desk/phone/light-trail stage is kept in the markup but hidden. */
@media (min-width: 1024px) {
  .e2-win > .pc-shot.e2 { display: none; }
  .e2-win > .e2-cut { position: absolute; left: -4%; top: 0; width: 150%; max-width: none; height: auto; margin-top: -21%; }   /* margin % = of the frame width */
}