/* Round 4 (2026-08-12): brand tagline between the hero H1 and the lead. */
.pc-hero__tagline {
  max-width: 30ch;
  margin: 14px 0 10px;
  color: var(--text);
  font: 500 clamp(1.15rem, 2vw, 1.6rem)/1.25 var(--display);
  letter-spacing: -.02em;
  word-spacing: .1em;
}

.pc26-proof,
.pc26-section,
.pc26-close {
  position: relative;
  overflow: hidden;
}

.pc26-proof {
  border-block: 1px solid var(--line);
  background: var(--bg);
}

.pc26-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc26-proof__grid li {
  min-width: 0;
  padding: 24px clamp(18px, 2.7vw, 34px);
  border-right: 1px solid var(--line);
}

.pc26-proof__grid li:first-child { padding-left: 0; }
.pc26-proof__grid li:last-child { border-right: 0; }

.pc26-proof__grid small,
.pc26-number,
.pc26-cap__top,
.pc26-work__meta,
.pc26-area__label {
  color: var(--ink-2);
  font: 600 10px/1.25 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pc26-proof__grid strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font: 600 clamp(1rem, 1.25vw, 1.2rem)/1.25 var(--display);
}

.pc26-section {
  padding: clamp(82px, 10vw, 144px) 0;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 88% 12%, rgba(61, 107, 255, .09), transparent 30%),
    var(--bg);
}

.pc26-section--proof {
  background:
    radial-gradient(circle at 12% 12%, rgba(61, 107, 255, .08), transparent 26%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg) 100%);
}

.pc26-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, .62fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 60px);
}

.pc26-head h2,
.pc26-close h2 {
  max-width: 13ch;
  margin: 12px 0 0;
  color: var(--text);
  font: 600 clamp(2.65rem, 5.4vw, 5.4rem)/.95 var(--display);
  letter-spacing: -.05em;
}

.pc26-head > p,
.pc26-close__copy > p {
  max-width: 52ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.65;
}

.pc26-cap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.pc26-cap {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 22px;
  min-height: 240px;
  padding: clamp(26px, 4vw, 44px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(14, 17, 32, .74);
  transition: background .28s ease, transform .28s ease;
}

.pc26-cap:hover,
.pc26-cap:focus-visible {
  background: rgba(14, 17, 32, .92);
  transform: translateY(-3px);
}

.pc26-number { padding-top: 5px; }
.pc26-cap__body { align-self: end; }

.pc26-cap h3 {
  margin: 12px 0 10px;
  color: var(--text);
  font: 600 clamp(1.8rem, 3vw, 3rem)/1 var(--display);
  letter-spacing: -.035em;
}

.pc26-cap p {
  max-width: 47ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

/* With an odd card count the last card spans both columns instead of leaving a hole. */
.pc26-cap-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.pc26-cap-grid > :last-child:nth-child(odd) p { max-width: 72ch; }

/* Round 4 (2026-08-12): reusable scrim for text that must paint over imagery. */
.pc-onmedia{position:relative}
.pc-onmedia::before{content:"";position:absolute;inset:-6px -10px;border-radius:inherit;
  background:linear-gradient(180deg,rgba(6,7,13,.72),rgba(6,7,13,.86));
  backdrop-filter:blur(2px);z-index:-1;pointer-events:none}

.pc26-cap__arrow {
  align-self: start;
  color: var(--ink-cy);
  font-size: 1.5rem;
  transition: transform .25s ease;
}

.pc26-cap:hover .pc26-cap__arrow { transform: translate(4px, -4px); }

.pc26-work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.pc26-work {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.pc26-work--wide { grid-column: span 7; }
.pc26-work--phone { grid-column: span 5; }
.pc26-work--half { grid-column: span 6; min-height: 430px; }
.pc26-work--full { grid-column: span 12; min-height: 410px; }

.pc26-work__media {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  overflow: hidden;
}

.pc26-work--wide .pc26-work__media { min-height: 300px; }
.pc26-work--half .pc26-work__media { min-height: 260px; }
.pc26-work--full .pc26-work__media { min-height: 280px; }

/* Aspect-driven photo heights: after the column restructure, the phone mock's
   intrinsic-driven content height balloons its grid row once the lazy image
   decodes, flex-stretching the Harborstone half-card media (~578x688) until
   object-fit: cover slices the 1200x630 OG art to its middle. Photo media now
   derive height from width — 16/10 for the 3:2-ish site screenshots (wide /
   full), 16/9 for the half cards so the 1.9:1 OG keeps its text margins under
   cover — which also caps the phone media's content height, so grid rows can
   no longer inflate past the aspect height. Reduced floors; the unscoped
   min-heights above stay as the no-:has() fallback and for the synthetic
   previews. Half/full photos anchor center so the subject stays in frame;
   wide/phone keep top center (the --phone guard leaves the Guardian device
   mock on its centered contain presentation). */
.pc26-work__media:has(> img) { aspect-ratio: 16 / 10; }
.pc26-work--half .pc26-work__media:has(> img) { aspect-ratio: 16 / 9; min-height: 150px; }
.pc26-work--wide .pc26-work__media:has(> img) { min-height: 240px; }
.pc26-work--full .pc26-work__media:has(> img) { min-height: 240px; }
.pc26-work--half:not(.pc26-work--phone) .pc26-work__media:has(> img) img,
.pc26-work--full .pc26-work__media:has(> img) img { object-position: center; }

/* Decorative bottom bleed only — no text sits on media anymore. Scoped to
   photo media via :has(> img) so the two synthetic previews (checkin /
   proposal, which contain no img) render fully un-dimmed. */
.pc26-work__media:has(> img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 7, 13, .45) 100%);
}

.pc26-work__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s cubic-bezier(.2, .78, .2, 1);
}

.pc26-work--phone .pc26-work__media {
  display: grid;
  place-items: center;
  min-height: 330px;
  background:
    radial-gradient(circle at 50% 40%, rgba(70, 200, 255, .18), transparent 34%),
    linear-gradient(145deg, var(--surface), var(--bg));
}

.pc26-work--phone .pc26-work__media img {
  width: auto;
  max-width: 62%;
  height: 84%;
  margin-top: -8%;
  object-fit: contain;
  border: 7px solid var(--bg-2);
  border-radius: 34px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .58);
}

.pc26-work:hover .pc26-work__media img { transform: scale(1.025); }

.pc26-checkin-preview {
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 58px);
  background:
    radial-gradient(circle at 50% 25%, rgba(70, 200, 255, .2), transparent 35%),
    linear-gradient(145deg, var(--surface), var(--bg));
}

.pc26-checkin-preview__screen {
  display: grid;
  width: min(100%, 320px);
  gap: 13px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgba(126, 231, 225, .28);
  border-radius: 28px;
  background: #f8fcfc;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .48);
  color: #12323a;
}

.pc26-checkin-preview__screen small {
  color: #287d8c;
  font: 700 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pc26-checkin-preview__screen strong {
  max-width: 11ch;
  margin: 6px 0 12px;
  font: 700 clamp(1.65rem, 3.3vw, 2.65rem)/1 "Clash Display", sans-serif;
  letter-spacing: -.04em;
}

.pc26-checkin-preview__screen span {
  padding: 14px 18px;
  border-radius: 15px;
  background: #21835f;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.pc26-checkin-preview__screen .pc26-checkin-preview__support {
  border: 1px solid #efc49c;
  background: #fff8ed;
  color: #913f0c;
}

.pc26-checkin-preview__screen i {
  margin-top: 8px;
  color: #54717a;
  font-size: .78rem;
  font-style: normal;
  line-height: 1.45;
  text-align: center;
}

.pc26-checkin-preview--app {
  width: 100%;
  min-height: 590px;
}

.pc26-proposal-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: clamp(38px, 6vw, 76px);
  background:
    radial-gradient(circle at 76% 20%, rgba(61, 107, 255, .22), transparent 34%),
    linear-gradient(145deg, var(--surface-2), var(--bg));
}

.pc26-proposal-preview__eyebrow {
  color: var(--ink-2);
  font: 700 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pc26-proposal-preview strong {
  width: min(82%, 390px);
  margin: 20px 0 26px;
  color: #fff;
  font: 600 clamp(2.4rem, 5vw, 4.5rem)/.92 var(--display);
  letter-spacing: -.05em;
}

.pc26-proposal-preview i {
  width: min(76%, 340px);
  height: 8px;
  margin-bottom: 10px;
  border-radius: 99px;
  background: var(--line-2);
}

.pc26-proposal-preview i:nth-of-type(2) { width: min(62%, 285px); }
.pc26-proposal-preview i:nth-of-type(3) { width: min(70%, 315px); }

.pc26-proposal-preview b {
  margin-top: 22px;
  padding: 12px 17px;
  border: 1px solid rgba(70, 200, 255, .45);
  border-radius: 99px;
  color: var(--text);
  font-size: .8rem;
}

.pc26-work__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(28px, 4vw, 42px);
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.pc26-work__copy h3 {
  max-width: 17ch;
  margin: 0;
  color: #fff;
  font: 600 clamp(2rem, 3.5vw, 3.7rem)/.98 var(--display);
  letter-spacing: -.04em;
}

.pc26-work__copy p {
  max-width: 54ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.pc26-work__meta { font-size: 11px; }

.pc26-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(101, 226, 192, .25);
  border-radius: 99px;
  background: rgba(101, 226, 192, .12);
  color: var(--ok);
  font: 600 10px/1.25 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pc26-status--beta {
  color: var(--warn);
  border-color: rgba(255, 210, 122, .28);
  background: rgba(255, 210, 122, .1);
}

.pc26-work__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--text);
  font-weight: 700;
}

.pc26-work__link:hover { color: var(--ink-cy); }

.pc26-lab {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(34px, 7vw, 96px);
  align-items: center;
}

.pc26-lab__visual {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: linear-gradient(145deg, var(--surface), var(--bg));
}

.pc26-lab__visual img {
  position: absolute;
  top: 8%;
  left: 50%;
  width: auto;
  height: 84%;
  transform: translateX(-50%);
  border: 7px solid var(--bg);
  border-radius: 32px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .62);
}

.pc26-lab__copy h2 {
  max-width: 12ch;
  margin: 14px 0 22px;
  color: var(--text);
  font: 600 clamp(2.55rem, 5vw, 5rem)/.96 var(--display);
  letter-spacing: -.05em;
}

.pc26-lab__copy > p {
  max-width: 54ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.pc26-lab__list {
  display: grid;
  gap: 0;
  margin: 30px 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.pc26-lab__list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.pc26-lab__list b { color: var(--ink-2); font: 600 10px/1.6 var(--mono); }

.pc26-flow-area {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 18px;
}

.pc26-flow,
.pc26-area {
  padding: clamp(30px, 4.5vw, 54px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(14, 17, 32, .76);
}

.pc26-flow h2,
.pc26-area h2 {
  margin: 12px 0 22px;
  color: var(--text);
  font: 600 clamp(2rem, 3.8vw, 3.8rem)/.98 var(--display);
  letter-spacing: -.04em;
}

.pc26-flow ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.pc26-flow li {
  padding: 25px 22px 8px 0;
}

.pc26-flow li + li {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.pc26-flow li b { color: var(--ink-2); font: 600 10px/1 var(--mono); }
.pc26-flow li strong { display: block; margin: 12px 0 7px; color: var(--text); font-size: 1.15rem; }
.pc26-flow li span,
.pc26-area p { color: var(--muted); line-height: 1.55; }

.pc26-area p { margin: 0 0 24px; }

.pc26-area__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pc26-area__chips span {
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  color: var(--muted);
  font-size: .86rem;
}

.pc26-close {
  padding: clamp(96px, 12vw, 170px) 0;
  background:
    radial-gradient(circle at 82% 50%, rgba(61, 107, 255, .15), transparent 31%),
    linear-gradient(135deg, var(--surface), var(--bg) 70%);
}

.pc26-close__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .55fr);
  gap: clamp(40px, 8vw, 118px);
  align-items: end;
}

.pc26-close__copy > p { margin-top: 22px; }
.pc26-close__actions { display: grid; gap: 12px; }
.pc26-close__actions .btn { justify-content: center; }

.work-refresh-note {
  margin-top: 18px;
  padding: 18px 20px;
  border-left: 3px solid var(--ink-2);
  background: rgba(61, 107, 255, .08);
  color: var(--muted);
  line-height: 1.55;
}

.work-refresh-note strong { color: var(--text); }

@media (max-width: 980px) {
  .pc26-proof__grid { grid-template-columns: repeat(2, 1fr); }
  .pc26-proof__grid li { border-bottom: 1px solid var(--line); }
  .pc26-proof__grid li:nth-child(2) { border-right: 0; }
  .pc26-proof__grid li:first-child { padding-left: clamp(18px, 2.7vw, 34px); }
  .pc26-head,
  .pc26-lab,
  .pc26-flow-area,
  .pc26-close__layout { grid-template-columns: 1fr; }
  .pc26-work--wide,
  .pc26-work--phone,
  .pc26-work--half,
  .pc26-work--full { grid-column: span 12; }
  .pc26-lab__visual { min-height: 440px; }
}

@media (max-width: 720px) {
  .pc26-section { padding-block: 72px; }
  .pc26-cap-grid { grid-template-columns: 1fr; }
  .pc26-cap { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 210px; }
  .pc26-head { gap: 16px; margin-bottom: 30px; }
  .pc26-head h2,
  .pc26-close h2,
  .pc26-lab__copy h2 { font-size: clamp(2.5rem, 11vw, 3.35rem); letter-spacing: -.035em; }
  .pc26-work { min-height: 0; }
  .pc26-work .pc26-work__media { min-height: 260px; }
  .pc26-work--phone .pc26-work__media { min-height: 280px; }
  /* Aspect-capped but not shrunk: the phone mock keeps its 280px floor (the
     base half-card photo floor above is lower). */
  .pc26-work--phone .pc26-work__media:has(> img) { min-height: 280px; }
  .pc26-work--phone .pc26-work__media img { max-width: 74%; }
  .pc26-flow ol { grid-template-columns: 1fr; }
  .pc26-flow li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .pc26-flow li { padding: 20px 0; }
  .pc26-close__actions { width: 100%; }
}

@media (max-width: 480px) {
  .pc26-proof__grid { grid-template-columns: 1fr; }
  .pc26-proof__grid li { border-right: 0; padding: 18px var(--gutter); }
  .pc26-cap { grid-template-columns: 32px 1fr; gap: 14px; }
  .pc26-cap__arrow { display: none; }
  .pc26-work { min-height: 0; border-radius: 20px; }
  .pc26-work .pc26-work__media { min-height: 240px; }
  .pc26-work--phone .pc26-work__media:has(> img) { min-height: 240px; }
  .pc26-work__copy { padding: 24px; }
  .pc26-lab__visual { min-height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  .pc26-cap,
  .pc26-work__media img,
  .pc26-cap__arrow { transition: none; }
  .pc26-cap:hover,
  .pc26-work:hover .pc26-work__media img { transform: none; }
}

/* Shared August 2026 integration for the previously legacy service and work pages. */
body.pc26-service-page,
body.pc26-work-page {
  background:
    radial-gradient(circle at 88% 0%, rgba(61, 107, 255, .09), transparent 30%),
    var(--bg);
}

.pc26-service-page .svc-hero,
.pc26-work-page .section:first-of-type {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--nav-h) + clamp(64px, 9vw, 124px)) clamp(58px, 8vw, 112px) !important;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(120deg, rgba(14, 17, 32, .96), rgba(6, 7, 13, .92)),
    radial-gradient(circle at 76% 26%, rgba(70, 200, 255, .15), transparent 30%);
}

.pc26-service-page .svc-hero::after,
.pc26-work-page .section:first-of-type::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(70, 200, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(70, 200, 255, .04) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 74%);
  pointer-events: none;
}

.pc26-service-page .svc-hero .wrap,
.pc26-work-page .section:first-of-type .wrap { position: relative; z-index: 1; }

.pc26-service-page .svc-hero .klabel,
.pc26-service-page .svc-hero .cs-badge,
.pc26-work-page .section:first-of-type .idx .n {
  width: fit-content;
  margin-bottom: 20px;
  color: var(--ink-2);
  border-color: rgba(70, 200, 255, .45);
  background: rgba(70, 200, 255, .09);
}

.pc26-service-page .svc-hero h1,
.pc26-work-page .section:first-of-type h1 {
  max-width: 11ch;
  color: var(--text);
  font-size: clamp(3rem, 7vw, 7.2rem);
  line-height: .91;
  letter-spacing: -.065em;
}

.pc26-service-page .svc-hero .lead,
.pc26-work-page .section:first-of-type .lead {
  max-width: 58ch;
  color: var(--muted);
  font-size: clamp(1.03rem, 1.45vw, 1.2rem);
  line-height: 1.68;
}

.pc26-service-page .section,
.pc26-work-page .section {
  position: relative;
  padding-block: clamp(72px, 9vw, 132px) !important;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.pc26-service-page .section:nth-of-type(odd),
.pc26-work-page .section:nth-of-type(odd) {
  background: linear-gradient(145deg, rgba(14, 17, 32, .52), rgba(6, 7, 13, .1));
}

.pc26-service-page .idx .n,
.pc26-work-page .idx .n {
  color: var(--ink-2);
  font: 600 10px/1.25 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.pc26-service-page h2,
.pc26-work-page h2 {
  color: var(--text);
  font-size: clamp(2.35rem, 4.8vw, 5rem);
  line-height: .96;
  letter-spacing: -.05em;
}

.pc26-service-page .feat,
.pc26-service-page .tr,
.pc26-service-page .type,
.pc26-service-page .app-type,
.pc26-service-page .promise,
.pc26-service-page .pg,
.pc26-service-page .eng-p {
  min-height: 100%;
  border-color: var(--line);
  border-radius: 18px;
  background: rgba(14, 17, 32, .82);
  box-shadow: none;
}

.pc26-service-page .feat:hover,
.pc26-service-page .tr:hover,
.pc26-service-page .type:hover,
.pc26-service-page .app-type:hover,
.pc26-service-page .promise:hover,
.pc26-service-page .pg:hover,
.pc26-service-page .eng-p:hover {
  border-color: rgba(70, 200, 255, .45);
  transform: translateY(-3px);
}

.pc26-service-page .feat h3,
.pc26-service-page .tr h3,
.pc26-service-page .type h3,
.pc26-service-page .app-type h3,
.pc26-service-page .promise b,
.pc26-service-page .pg h3,
.pc26-service-page .eng-p h3 {
  color: var(--text);
}

.pc26-service-page .feat p,
.pc26-service-page .tr p,
.pc26-service-page .type p,
.pc26-service-page .app-type p,
.pc26-service-page .promise p,
.pc26-service-page .pg p,
.pc26-service-page .eng-p p,
.pc26-service-page .mcat p,
.pc26-service-page .retainer-box p,
.pc26-service-page .niche-box p { color: var(--muted); }

.pc26-service-page .ex-card,
.pc26-service-page .showcase,
.pc26-service-page .retainer-box,
.pc26-service-page .niche-box {
  border-color: var(--line-2);
  border-radius: 22px;
  background: rgba(14, 17, 32, .86);
  box-shadow: 0 24px 68px rgba(0, 0, 0, .18);
}

.pc26-service-page .ex-card:hover { border-color: rgba(70, 200, 255, .45); }
.pc26-service-page .ex-body .ex-tier,
.pc26-service-page .type .type__k,
.pc26-service-page .pg .pg-type,
.pc26-service-page .mcat .label,
.pc26-service-page .eng-p .num,
.pc26-service-page .retainer-price .label { color: var(--ink-2); }

.pc26-service-page .mcat { border-color: var(--line); }
.pc26-service-page .mcat .price,
.pc26-service-page .retainer-price .sub { color: var(--muted); }

.pc26-service-page .retainer-price {
  border-color: rgba(70, 200, 255, .45);
  background: var(--bg-2);
}

.pc26-work-page .work {
  display: grid;
  gap: 16px;
  margin-top: clamp(36px, 5vw, 70px);
}

.pc26-work-page .proj {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: 25px;
  background: linear-gradient(140deg, rgba(14, 17, 32, .92), rgba(6, 7, 13, .92));
  box-shadow: 0 24px 72px rgba(0, 0, 0, .18);
}

.pc26-work-page .proj:nth-child(even) .proj__info { order: 2; }
.pc26-work-page .proj__info { min-width: 0; }
.pc26-work-page .proj__info h2 { max-width: 11ch; margin: 11px 0 16px; }
.pc26-work-page .proj__info > p:not(.tier) { max-width: 52ch; color: var(--muted); font-size: 1rem; line-height: 1.64; }
.pc26-work-page .tier { color: var(--ink-2); font: 600 10px/1.25 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.pc26-work-page .proj__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pc26-work-page .tag { border-color: var(--line-2); background: rgba(70, 200, 255, .08); color: var(--muted); }
.pc26-work-page .proj__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.pc26-work-page .proj__link { min-height: 44px; color: var(--text); font-weight: 700; }
.pc26-work-page .live { color: var(--muted); }
.pc26-work-page .dv,
.pc26-work-page .ph-frame { margin: 0; }

@media (max-width: 820px) {
  .pc26-work-page .proj { grid-template-columns: 1fr; gap: 28px; padding: 26px; }
  .pc26-work-page .proj:nth-child(even) .proj__info { order: initial; }
  .pc26-work-page .proj__info h2 { max-width: 14ch; }
}

@media (prefers-reduced-motion: reduce) {
  .pc26-service-page .feat,
  .pc26-service-page .tr,
  .pc26-service-page .type,
  .pc26-service-page .app-type,
  .pc26-service-page .promise,
  .pc26-service-page .pg,
  .pc26-service-page .eng-p,
  .pc26-work-page .proj,
  .pc26-work-page .dv,
  .pc26-work-page .ph-frame { transition: none; }
  .pc26-service-page .feat:hover,
  .pc26-service-page .tr:hover,
  .pc26-service-page .type:hover,
  .pc26-service-page .app-type:hover,
  .pc26-service-page .promise:hover,
  .pc26-service-page .pg:hover,
  .pc26-service-page .eng-p:hover { transform: none; }
}

/* W3 polish (2026-08-09): dark-theme the live pc-vision "starting plan" section on index.
   Scoped overrides for the pre-pc26 light styles still in home-guardian-hero.css
   (that file is intentionally untouched). Colors use the pc26 token conventions. */

.pc-vision {
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}

.pc-vision .pc-kicker { color: var(--ink-2); }
.pc-vision h2 { color: var(--text); }
.pc-vision__head > p { color: var(--muted); }

.pc-vision__layout {
  border-color: var(--line);
  background: var(--surface);
}

.pc-vision-field { border-bottom-color: var(--line); }

.pc-vision-field label,
.pc-vision-field legend { color: var(--muted); }

.pc-vision-field label span,
.pc-vision-field legend span { color: var(--ink-2); }

.pc-vision-field input,
.pc-vision-field textarea {
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text);
}

.pc-vision-field input::placeholder,
.pc-vision-field textarea::placeholder { color: var(--dim); }

.pc-vision-field input:focus,
.pc-vision-field textarea:focus {
  border-color: var(--ink-2);
  outline: 2px solid var(--ink-2);
  outline-offset: 1px;
  box-shadow: none;
}

.pc-vision-options button {
  border-color: var(--line-2);
  background: var(--surface);
  color: var(--muted);
}

.pc-vision-options button[aria-pressed="true"] {
  border-color: rgba(70, 200, 255, .45);
  background: rgba(61, 107, 255, .16);
  color: var(--ink-cy);
}

.pc-vision-options button:focus-visible {
  outline: 2px solid var(--ink-2);
  outline-offset: 2px;
}

.pc-vision-privacy { color: var(--muted); }

/* Result/direction panel: dark styling kept, teal/mint accents tokenized to the ink family. */
.pc-direction__bar span { color: var(--ink-cy); }

.pc-direction-idle span {
  border-color: rgba(70, 200, 255, .45);
  color: var(--ink-cy);
  box-shadow: 0 0 34px rgba(70, 200, 255, .1);
}

.pc-direction-progress span::before { border-color: var(--ink-cy); }

.pc-direction-progress span.done::before {
  border-color: var(--ink-cy);
  background: var(--ink-cy);
}

.pc-direction-result small { color: var(--ink-cy); }

/* ============================================================
   SPEC 5A (2026-08-15) — homepage v2: theatrical entrance (S2),
   services ticker (S3), work rail (S4).
   Progressive enhancement contract: with pc-entrance.js absent the
   hero renders COMPLETE — every end state below is the CSS default.
   The .pcx-stage/.pcx-bN classes (added by JS only) apply the
   from-states and beat transitions; .pcx-done pins the end states.
   Durations scale by var(--pcx-k) (0.4 on return visits).
   ============================================================ */

/* ---- S2 b1: radial bloom behind the phone stage (static child of .pc-cinematic) ---- */
.pcx-bloom {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 0;
  width: min(94vw, 980px);
  aspect-ratio: 7 / 4;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(70, 200, 255, .17), rgba(61, 107, 255, .08) 45%, transparent 70%);
  filter: blur(26px);
}

/* ---- S2 staging: from-states exist ONLY while body.pcx-stage is present.
   Selectors must out-specify the cinematic's interactive rules (0,4,0):
   body.pcx-stage .pc-cinematic .pc-cinematic__devices .pc-cine-phone = (0,4,1). ---- */
body.pcx-stage .pc-cinematic .pc-cinematic__devices .pc-cine-phone {
  animation: none !important; /* the cinematic's own is-playing intro stays parked while the entrance drives */
  opacity: 0;
  transition-property: opacity, translate, rotate, scale, filter;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
  transition-duration: calc(.7s * var(--pcx-k, 1));
}

body.pcx-stage .pc-cinematic .pc-cinematic__devices .pc-cine-phone:not(.is-active) {
  translate: 0 60px;
  rotate: y 18deg;
  scale: .94;
}

body.pcx-stage .pc-cinematic .pc-cinematic__devices .pc-cine-phone.is-active {
  translate: 0 80px;
  scale: .92;
  transition-duration: calc(.76s * var(--pcx-k, 1));
}

/* b2: four side phones rise into the cinematic's fan, 90ms stagger */
body.pcx-stage.pcx-b2 .pc-cinematic .pc-cinematic__devices .pc-cine-phone:not(.is-active) {
  opacity: 1;
  translate: 0 0;
  rotate: none;
  scale: none;
}
body.pcx-stage.pcx-b2 .pc-cinematic .pc-cine-phone--salvador { transition-delay: 0ms; }
body.pcx-stage.pcx-b2 .pc-cinematic .pc-cine-phone--saopaulo { transition-delay: calc(90ms * var(--pcx-k, 1)); }
body.pcx-stage.pcx-b2 .pc-cinematic .pc-cine-phone--atlanta { transition-delay: calc(180ms * var(--pcx-k, 1)); }
body.pcx-stage.pcx-b2 .pc-cinematic .pc-cine-phone--nyc { transition-delay: calc(270ms * var(--pcx-k, 1)); }

/* b3: active center phone + its screen brightens 200ms in over 420ms */
body.pcx-stage.pcx-b3 .pc-cinematic .pc-cinematic__devices .pc-cine-phone.is-active {
  opacity: 1;
  translate: 0 0;
  scale: none;
}
body.pcx-stage .pc-cinematic .pc-cine-phone.is-active .pc-cine-phone__screen {
  filter: brightness(.2);
  transition: filter calc(.42s * var(--pcx-k, 1)) ease calc(.2s * var(--pcx-k, 1));
}
body.pcx-stage.pcx-b3 .pc-cinematic .pc-cine-phone.is-active .pc-cine-phone__screen { filter: brightness(1); }

/* b1: bloom fade-in */
body.pcx-stage .pcx-bloom { opacity: 0; transition: opacity calc(.7s * var(--pcx-k, 1)) ease; }
body.pcx-stage.pcx-b1 .pcx-bloom { opacity: 1; }

/* b4: H1 per-line wipe (spans injected by JS; without JS the plain H1 shows) */
.pcx-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.pcx-line__i { display: block; }
body.pcx-stage .pc-hero__copy h1 .pcx-line__i {
  translate: 0 112%;
  transition: translate calc(.52s * var(--pcx-k, 1)) cubic-bezier(.16, 1, .3, 1);
}
body.pcx-stage.pcx-b4 .pc-hero__copy h1 .pcx-line__i { translate: 0 0; }
body.pcx-stage.pcx-b4 .pc-hero__copy h1 .pcx-line:nth-child(2) .pcx-line__i { transition-delay: calc(90ms * var(--pcx-k, 1)); }
body.pcx-stage .pc-hero__tagline { opacity: 0; transition: opacity calc(.55s * var(--pcx-k, 1)) ease calc(120ms * var(--pcx-k, 1)); }
body.pcx-stage .pc-hero__actions { opacity: 0; transition: opacity calc(.55s * var(--pcx-k, 1)) ease calc(240ms * var(--pcx-k, 1)); }
body.pcx-stage.pcx-b4 .pc-hero__tagline,
body.pcx-stage.pcx-b4 .pc-hero__actions { opacity: 1; }

/* b5: ticker fades in and starts */
body.pcx-stage .pcx-ticker { opacity: 0; transition: opacity calc(.45s * var(--pcx-k, 1)) ease; }
body.pcx-stage.pcx-b5 .pcx-ticker { opacity: 1; }
body.pcx-stage:not(.pcx-b5) .pcx-ticker__track { animation-play-state: paused; }

/* .pcx-done: final state is forced even if a beat was missed. Phones are
   handed back to the cinematic's own rules (higher specificity there wins);
   secondary intro elements are pinned at their end states so the suppressed
   is-playing animations never restart late. */
/* not(.is-playing): keeps Replay's 2026073008 keyframes in charge of opacity. */
body.pcx-done .pc-cinematic:not(.is-playing) .pc-cine-phone { opacity: 1; }
body.pcx-done .pc-cinematic .pc-cinematic__aurora { animation: none !important; opacity: 1; transform: translate(-50%, -50%) scale(1); }
body.pcx-done .pc-cinematic .pc-cinematic__orbit { animation: none !important; opacity: 1; transform: translate(-50%, -4%) rotateX(71deg) scale(1); }
body.pcx-done .pc-cinematic figcaption { animation: none !important; opacity: 1; transform: translateX(-50%) translateY(-4px); }
body.pcx-done .pc-cinematic .pc-cine-phone__label { animation: none !important; opacity: 1; transform: translateX(-50%) translateY(0); }
body.pcx-done .pc-cinematic .pc-cine-walkthrough { animation: pcWalkPulse 2.8s ease-in-out infinite; opacity: 1; transform: none; }
body.pcx-done .pc-cinematic .pc-cine-phone__screen--pan-atl img { animation: pcScreenPan 4.8s ease-in-out infinite alternate; }
body.pcx-done .pc-cinematic .pc-cine-phone__screen--pan-nyc img { animation: pcScreenPanNyc 5.2s ease-in-out infinite alternate; }

/* ---- S3: services ticker. Speed is set by JS (42 px/s); 95s is the no-JS fallback. ---- */
.pcx-ticker {
  width: 100vw;
  margin: clamp(10px, 2vw, 22px) calc(50% - 50vw) 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 13px;
  white-space: nowrap;
}
.pcx-ticker__track {
  display: flex;
  width: max-content;
  animation: pcxTick 95s linear infinite;
  will-change: transform;
}
.pcx-ticker__run {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pcx-ticker__run i { font-style: normal; color: var(--muted); }
.pcx-ticker__run b { margin-inline: 18px; font-weight: 400; color: var(--ink-2); }
/* loop seam: same separator between run 1's last item and run 2's first */
.pcx-ticker__run::after { content: "\00B7"; margin-inline: 18px; color: var(--ink-2); }
.pcx-ticker:hover .pcx-ticker__track,
.pcx-ticker:focus-within .pcx-ticker__track { animation-play-state: paused; }
@keyframes pcxTick { to { transform: translateX(-50%); } }

/* ---- S4: work rail ---- */
.pcx-work {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 128px) 0;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 8%, rgba(61, 107, 255, .08), transparent 28%),
    var(--bg);
}
.pcx-work__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.pcx-work__head .pc-kicker { margin: 0; }
.pcx-work__head h2 {
  max-width: 14ch;
  margin: 0;
  color: var(--text);
  font: 600 clamp(2.4rem, 5vw, 4.6rem)/.96 var(--display);
  letter-spacing: -.05em;
}
.pcx-work__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text);
  font: 600 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pcx-work__all:hover, .pcx-work__all:focus-visible { color: var(--ink-cy); }

.pcx-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px var(--gutter) 20px;
  scroll-padding-inline: var(--gutter);
}
.pcx-rail::-webkit-scrollbar { display: none; }
.pcx-rail:focus-visible { outline: 2px solid var(--ink-2); outline-offset: -2px; }

.pcx-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 380px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, box-shadow .35s ease;
}
.pcx-card:hover {
  transform: translateY(-4px);
  border-color: rgba(70, 200, 255, .4);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .3);
}
.pcx-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
}
.pcx-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: object-position .6s ease;
}
.pcx-card:hover .pcx-card__media:has(> img:only-child) img,
.pcx-card:focus-within .pcx-card__media:has(> img:only-child) img { object-position: center center; }
.pcx-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  padding: 22px 24px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.pcx-card__meta {
  color: var(--ink-2);
  font: 600 10px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pcx-card__body h3 { margin: 0; color: var(--text); font: 600 1.6rem/1.05 var(--display); letter-spacing: -.03em; }
.pcx-card__body p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.pcx-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: auto;
  color: var(--text);
  font: 600 10px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pcx-card__link:hover, .pcx-card__link:focus-visible { color: var(--ink-cy); }
.pcx-card--all {
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text);
  font: 600 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pcx-card--all:hover { color: var(--ink-cy); }

@media (max-width: 720px) {
  .pcx-card { width: min(78vw, 420px); }
  .pcx-card__body { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  /* entrance: no beats, no pins that animate */
  body.pcx-done .pc-cinematic .pc-cine-walkthrough,
  body.pcx-done .pc-cinematic .pc-cine-phone__screen--pan-atl img,
  body.pcx-done .pc-cinematic .pc-cine-phone__screen--pan-nyc img { animation: none !important; }
  /* ticker: static wrapped list */
  .pcx-ticker { white-space: normal; }
  .pcx-ticker__track { display: block; width: auto; animation: none !important; white-space: normal; }
  .pcx-ticker__run { display: inline; }
  .pcx-ticker__run[aria-hidden="true"] { display: none; }
  /* work rail: no lift, no pan */
  .pcx-card, .pcx-card__media img { transition: none; }
  .pcx-card:hover { transform: none; }
  .pcx-card:hover .pcx-card__media:has(> img:only-child) img,
  .pcx-card:focus-within .pcx-card__media:has(> img:only-child) img { object-position: top center; }
}


/* ============================================================
   SPEC 5B (2026-08-18) — work.html flagship filterable gallery
   Scoped to .pc26-work-page. Tokens only, no new colours.
   ============================================================ */
.pc26-work-page .pc-kicker { font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }

.gal-head { padding: calc(var(--nav-h) + clamp(44px, 6vw, 80px)) 0 clamp(34px, 4.5vw, 54px); }
.gal-head h1 { max-width: 14ch; margin: 14px 0 0; color: var(--text); font: 600 clamp(2.65rem, 5.4vw, 5.4rem)/.95 var(--display); letter-spacing: -.05em; }
.gal-head .lead { margin-top: 20px; }

.gal-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3.5vw, 40px); }
.gal-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 100px; background: rgba(255, 255, 255, .02); color: var(--muted); font-family: var(--body); font-size: .94rem; font-weight: 500; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.gal-chip > span { font-family: var(--mono); font-size: .76rem; color: var(--dim); }
.gal-chip:hover { color: var(--text); border-color: var(--ink-2); }
.gal-chip.is-on { background: rgba(61, 107, 255, .16); border-color: var(--ink-2); color: var(--text); }
.gal-chip.is-on > span { color: var(--muted); }

.gal-wrap { padding: 0 0 clamp(64px, 8vw, 110px); }
.gal-count { margin: 0 0 20px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.gal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.gal-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), opacity .45s var(--ease); }
.gal-card--hide { display: none; }

/* entrance: JS adds .gal-grid--js once running, then staggers .gal-card--in */
.gal-grid--js .gal-card { opacity: 0; transform: translateY(16px); }
.gal-grid--js .gal-card.gal-card--in { opacity: 1; transform: none; }

.gal-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--surface-2); }
.gal-card[data-shape="desktop"] .gal-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: object-position .7s var(--ease); }
.gal-card[data-shape="phone"] .gal-card__media { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 100% at 50% 0%, rgba(61, 107, 255, .12), transparent 62%), var(--surface-2); }
.gal-card[data-shape="phone"] .gal-card__media img { height: 88%; width: auto; max-width: 88%; object-fit: contain; border-radius: 20px; box-shadow: 0 22px 46px -20px rgba(0, 0, 0, .72); }

.gal-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; background: var(--surface); border-top: 1px solid var(--line); }
.gal-card__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.gal-card__meta { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.gal-card__status { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ok); border: 1px solid rgba(101, 226, 192, .4); background: rgba(101, 226, 192, .08); border-radius: 100px; padding: 5px 11px; }
.gal-card__status--beta { color: var(--warn); border-color: rgba(255, 210, 122, .42); background: rgba(255, 210, 122, .08); }
.gal-card__body h2 { margin: 10px 0 0; font-size: clamp(1.35rem, 1.7vw, 1.6rem); letter-spacing: -.02em; }
.gal-card__body > p { margin: 10px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.gal-card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.gal-card__tags li { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px; }
.gal-card__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: auto; padding-top: 16px; }
.gal-card__live { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--ink-2); font-weight: 600; font-size: .95rem; }
.gal-card__live span { transition: transform .2s var(--ease); }
.gal-card__live:hover span { transform: translateX(4px); }
.gal-card__case { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: .95rem; transition: color .2s; }
.gal-card__case:hover { color: var(--text); }

@media (hover: hover) and (pointer: fine) {
  .gal-card:hover { transform: translateY(-4px); border-color: rgba(70, 200, 255, .45); box-shadow: 0 24px 54px -24px rgba(0, 0, 0, .65); }
  .gal-card[data-shape="desktop"]:hover .gal-card__media:has(> img:only-child) img { object-position: center center; }
}

@media (max-width: 420px) {
  .gal-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .gal-card, .gal-card[data-shape="desktop"] .gal-card__media img { transition: none; }
  .gal-grid--js .gal-card { opacity: 1; transform: none; }
  .gal-card:hover { transform: none; }
  .gal-card[data-shape="desktop"]:hover .gal-card__media:has(> img:only-child) img { object-position: top center; }
  .gal-card__live span { transition: none; }
  .gal-card__live:hover span { transform: none; }
}

/* ============================================================
   SPEC 5E F4 (2026-08-19): hero rules moved from home-guardian-hero.css
   and home-hero-v2.css. Only declarations proven to still render on the
   current index.html DOM are kept; :where() scoping adds zero specificity
   and confines them to index. Both source files stay on disk;
   home-guardian-hero.css is still loaded by services.html.
   ============================================================ */

/* --- moved from home-guardian-hero.css --- */
:where(body.pc-home-v3) .pc-hero__inner {
  position: relative;
  text-align: center;
}
:where(body.pc-home-v3) .pc-hero__copy {
  position: relative;
  margin-right: auto;
  margin-left: auto;
}
:where(body.pc-home-v3) .pc-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  row-gap: 10px;
  column-gap: 10px;
  margin-bottom: 14px;
}
:where(body.pc-home-v3) .pc-kicker {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(141, 162, 188);
}
:where(body.pc-home-v3) .pc-eyebrow span {
  width: 7px;
  height: 7px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  background-color: rgb(82, 217, 173);
  box-shadow: rgba(82, 217, 173, 0.12) 0px 0px 0px 4px, rgba(82, 217, 173, 0.6) 0px 0px 16px;
}
:where(body.pc-home-v3) .pc-hero h1 {
  font-weight: 600;
  letter-spacing: 0px;
  margin-right: auto;
  margin-left: auto;
}
:where(body.pc-home-v3) .pc-hero__lead {
  margin-top: 16px;
  margin-right: auto;
  margin-left: auto;
  color: rgb(187, 196, 209);
}
:where(body.pc-home-v3) .pc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 12px;
  column-gap: 12px;
  margin-top: 20px;
}
@media ((max-height: 820px) and (min-width: 821px)) {
:where(body.pc-home-v3) .pc-hero__lead {
  margin-top: 9px;
}
:where(body.pc-home-v3) .pc-hero__actions {
  margin-top: 12px;
}
}
@media ((max-width: 600px)) {
:where(body.pc-home-v3) .pc-eyebrow {
  font-size: 10px;
}
:where(body.pc-home-v3) .pc-hero__actions .btn {
  min-width: 0px;
}
}

/* --- moved from home-hero-v2.css --- */
:where(body.pc-home-v3) .pc-hero-sequence::before {
  mask-image: linear-gradient(transparent, rgb(0, 0, 0) 17%, rgb(0, 0, 0) 69%, transparent 96%);
}
:where(body.pc-home-v3) .pc-hero--v2 {
  z-index: 1;
}
:where(body.pc-home-v3) .pc-hero--v2 .pc-hero__inner {
  z-index: 3;
}
:where(body.pc-home-v3) .pc-hero--v2 .pc-hero__copy {
  z-index: 8;
}
:where(body.pc-home-v3) .pc-hero--v2 .pc-eyebrow {
  color: rgb(168, 185, 203);
}
:where(body.pc-home-v3) .pc-hero--v2 .pc-hero__lead {
  max-width: 690px;
  font-size: clamp(1rem, 1.45vw, 1.2rem);
}
@media ((max-width: 600px)) {
:where(body.pc-home-v3) .pc-hero--v2 .pc-hero__copy {
  text-align: left;
}
:where(body.pc-home-v3) .pc-hero--v2 .pc-eyebrow {
  justify-content: flex-start;
}
:where(body.pc-home-v3) .pc-hero--v2 .pc-hero__actions {
  justify-content: flex-start;
}
}


/* ============================================================
   SPEC 6 (2026-08-19) — work in motion, verified proof, signature move
   A: reels play over the stills on activation (preload=none, poster
      from data-poster at play time; the still is the idle face).
   B: data-proof lines on gallery cards + one quiet rail-head line.
   C: address-bar type-out chrome above each card's media.
   Tokens only, no new colours. JS clears the domain text at init;
   no-JS and prefers-reduced-motion keep the full domain static.
   ============================================================ */

/* --- C: the browser-chrome bar (desktop shape: dots + address pill) --- */
.gal-card__chrome,
.pcx-card__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.gal-card__dots,
.pcx-card__dots { display: inline-flex; gap: 6px; flex: none; }
.gal-card__dots i,
.pcx-card__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.gal-card__url,
.pcx-card__url {
  flex: 1;
  min-width: 0;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
}

/* phone shape: slimmer variant, just the domain, no dots */
.gal-card__chrome--phone,
.pcx-card__chrome--phone { justify-content: center; padding: 6px 12px; background: var(--surface); }
.gal-card__chrome--phone .gal-card__url,
.pcx-card__chrome--phone .pcx-card__url { flex: none; max-width: 100%; padding: 0; border: none; background: none; }

/* typing caret: only while the card is active (JS adds .reel-on) */
.gal-card.reel-on .gal-card__url::after,
.pcx-card.reel-on .pcx-card__url::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-left: 2px;
  vertical-align: -1px;
  background: var(--ink-cy);
  animation: pcCaretBlink 1.06s steps(1) infinite;
}
@keyframes pcCaretBlink { 50% { opacity: 0; } }

/* --- A: the reel rests hidden behind the still (the still stays the lazy,
       srcset-served face of the card, so an untriggered page transfers
       byte-for-byte what it did before). JS sets the video's poster from
       data-poster and calls play() only when the card activates; the
       .reel-playing swap lands on loadeddata, so the first visible frame
       is the reel's own first frame — no black box, no visual jump, and a
       failed source simply never swaps (the still stays). --- */
.gal-card__reel,
.pcx-card__reel { display: none; }
.gal-card__media.reel-playing > .gal-card__reel,
.pcx-card__media.reel-playing > .pcx-card__reel { display: block; }
.gal-card__media.reel-playing > img,
.pcx-card__media.reel-playing > img { display: none; }
.gal-card[data-shape="desktop"] .gal-card__reel { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.gal-card[data-shape="phone"] .gal-card__reel { height: 88%; width: auto; max-width: 88%; object-fit: contain; border-radius: 20px; box-shadow: 0 22px 46px -20px rgba(0, 0, 0, .72); }
.pcx-card__reel { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pcx-card[data-shape="phone"] .pcx-card__media { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 100% at 50% 0%, rgba(61, 107, 255, .12), transparent 62%), var(--surface-2); }
.pcx-card[data-shape="phone"] .pcx-card__reel { height: 88%; width: auto; max-width: 88%; object-fit: contain; border-radius: 20px; box-shadow: 0 22px 46px -20px rgba(0, 0, 0, .72); }

/* --- B: proof lines --- */
.gal-card__body > p.gal-card__proof { margin: 8px 0 0; color: var(--ink-2); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; }
.pcx-work__proof { grid-column: 1 / -1; grid-row: 3; margin: 0; color: var(--ink-2); font-family: var(--mono); font-size: 12px; letter-spacing: .05em; }
.pcx-work__all { grid-column: 2; grid-row: 2; }

@media (prefers-reduced-motion: reduce) {
  /* reduced motion: posters only, domain static, no caret, no blink */
  .gal-card.reel-on .gal-card__url::after,
  .pcx-card.reel-on .pcx-card__url::after { display: none; animation: none; }
}

/* R12 — display signature: drawn understroke + weight contrast (H1 only) */
#pc-hero-title{position:relative;z-index:0}
.h1-sig{position:relative;display:inline-block}
.h1-sig::after{content:"";position:absolute;left:.03em;right:.08em;bottom:.03em;height:.13em;z-index:-1;background:linear-gradient(90deg,var(--ink,#3D6BFF),var(--ink-cy,#46C8FF));border-radius:999px .45em 999px .6em/.7em 999px .55em 999px;transform:rotate(-.5deg);opacity:.85}
.h1-soft{font-weight:500}
@media(prefers-reduced-motion:no-preference){.h1-sig::after{transform-origin:left center}}

/* ============================================================
   R13 — JS-disabled hero fallback (index). Without scripting the
   cinematic never gets is-playing/is-interactive, so the phones
   sat at opacity:0 inside an 800px void. Approach (a): static fan.
   Shows the five phones in the same end-state geometry the
   interactive mode settles on; dead controls (replay, switcher,
   "tap a screen" hint) are hidden. Mirrored per breakpoint from
   home-cinematic-v3.css interactive transforms.
   ============================================================ */
@media (scripting: none) {
  .pc-cinematic .pc-cine-phone { opacity: 1; }
  .pc-cinematic .pc-cine-phone--rio { transform: translate(-50%, -50%) translateZ(80px) scale(.93); }
  .pc-cinematic .pc-cine-phone--salvador { transform: translate(-184%, -48%) translateZ(-80px) rotateY(8deg) rotateZ(-3deg) scale(.83); }
  .pc-cinematic .pc-cine-phone--saopaulo { transform: translate(84%, -48%) translateZ(-80px) rotateY(-8deg) rotateZ(3deg) scale(.83); }
  .pc-cinematic .pc-cine-phone--atlanta { transform: translate(-304%, -36%) translateZ(-170px) rotateY(12deg) rotateZ(-5deg) scale(.79); }
  .pc-cinematic .pc-cine-phone--nyc { transform: translate(204%, -36%) translateZ(-170px) rotateY(-12deg) rotateZ(5deg) scale(.79); }
  .pc-cinematic .pc-cinematic__aurora { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .pc-cinematic .pc-cinematic__orbit { opacity: 1; transform: translate(-50%, -4%) rotateX(71deg) scale(1); }
  .pc-cinematic .pc-cine-phone__label { opacity: 1; transform: translateX(-50%) translateY(0); }
  .pc-cinematic figcaption { opacity: 1; transform: translateX(-50%) translateY(-4px); }
  .pc-cinematic figcaption > span { display: none; } /* "tap a screen / arrow keys" is dead without JS */
  .pc-cinematic__replay,
  .pc-cinematic__switcher { display: none; } /* dead controls without JS */
}
@media (scripting: none) and (max-width: 600px) {
  .pc-cinematic .pc-cine-phone { width: clamp(82px, 24vw, 100px); }
  .pc-cinematic .pc-cine-phone--rio { width: clamp(92px, 23vw, 100px); transform: translate3d(-50%, -50%, 100px) rotateY(0) rotateZ(0) scale(1.52); }
  .pc-cinematic .pc-cine-phone--salvador { transform: translate3d(calc(-50% - min(18vw, 74px)), calc(-50% + 6px), -55px) rotateY(9deg) rotateZ(-2.5deg) scale(.98); }
  .pc-cinematic .pc-cine-phone--saopaulo { transform: translate3d(calc(-50% + min(18vw, 74px)), calc(-50% + 6px), -55px) rotateY(-9deg) rotateZ(2.5deg) scale(.98); }
  .pc-cinematic .pc-cine-phone--atlanta { transform: translate3d(calc(-50% - min(31vw, 126px)), calc(-50% + 18px), -110px) rotateY(13deg) rotateZ(-4deg) scale(.9); }
  .pc-cinematic .pc-cine-phone--nyc { transform: translate3d(calc(-50% + min(31vw, 126px)), calc(-50% + 18px), -110px) rotateY(-13deg) rotateZ(4deg) scale(.9); }
}
@media (scripting: none) and (max-width: 340px) {
  .pc-cinematic .pc-cine-phone { width: 76px; }
  .pc-cinematic .pc-cine-phone--rio { width: 82px; transform: translate3d(-50%, calc(-50% + 30px), 100px) rotateY(0) rotateZ(0) scale(1.38); }
  .pc-cinematic .pc-cine-phone--salvador { transform: translate3d(calc(-50% - 18vw), calc(-50% + 16px), -55px) rotateY(9deg) rotateZ(-2.5deg) scale(.96); }
  .pc-cinematic .pc-cine-phone--saopaulo { transform: translate3d(calc(-50% + 18vw), calc(-50% + 16px), -55px) rotateY(-9deg) rotateZ(2.5deg) scale(.96); }
  .pc-cinematic .pc-cine-phone--atlanta { transform: translate3d(calc(-50% - 31vw), calc(-50% + 26px), -110px) rotateY(13deg) rotateZ(-4deg) scale(.86); }
  .pc-cinematic .pc-cine-phone--nyc { transform: translate3d(calc(-50% + 31vw), calc(-50% + 26px), -110px) rotateY(-13deg) rotateZ(4deg) scale(.86); }
}

/* R14 — tappable fan */
.pc-cine-phone[data-cine-city]:not(.is-active){cursor:pointer}
.pc-cine-phone[data-cine-city]:focus-visible{outline:2px solid var(--ink-2,#5B86FF);outline-offset:4px;border-radius:18px}
/* R14 — required for tap: .pc-cinematic__devices is click-through (pointer-events:none, home-cinematic-v3.css:191),
   so without this no click/tap can ever land on a phone; the play control keeps its own pointer-events:auto. */
.pc-cine-phone[data-cine-city]{pointer-events:auto}

/* R17 — client quote (spec §2: quiet block, existing tokens only; duplicate of the case.css block — case pages do not load this stylesheet) */
.pc-quote{margin:clamp(30px,4vw,48px) 0;max-width:58ch;padding-left:clamp(16px,2vw,22px);border-left:2px solid var(--line-2)}
.pc-quote blockquote{margin:0}
.pc-quote blockquote p{margin:0;font-size:1rem;line-height:1.65;color:var(--muted)}
.pc-quote figcaption{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

/* ===================== R27, 2026-08-26 ==========================
   Hero tagline sat 219.7px left of centre at 1440, 249.7px at 1024, 155.2px at
   768, while its siblings were exactly centred. Cause: the base rule at the top
   of this file sets max-width:30ch with margin:14px 0 10px, so the side margins
   are 0 rather than auto, and nothing ever overrode it. The text then centred
   inside its own narrow box, which is why it read as almost-right.
   Scoped to min-width:601px, the exact complement of the max-width:600px rule in
   home-hero-v2.css that makes .pc-hero__copy left-aligned, so mobile cannot change.
   NOTE FOR THE NEXT THREAD: this fix first went into home-hero-v2.css, which the
   homepage DOES NOT LOAD. Only measuring the rendered page caught it. The homepage
   loads styles.css, helper.css, home-cinematic-v3.css, home-three-section.css and
   this file. Check the <link> list before editing a hero stylesheet.
   ================================================================ */
@media (min-width: 601px) {
  .pc-hero--v2 .pc-hero__tagline { margin-left: auto; margin-right: auto; }
}