/* Site-wide fixes loaded last on every page of 17-site. Engine: Claude.
   1. Service card glass icons: the icon files are re-encoded from the full-resolution Blender renders with their whole
      soft shadow (build.py), and the icon area gets room for it instead of a negative margin that pulled it to the edge.
   2. Service cards in a row: the headline block and the punch line sit in shared grid rows, so the body text starts
      at the same height across a row even when one headline runs one line and its neighbour two. */

.v3-svc__ic{margin:0;padding:4px 0 0;overflow:visible}
.v3-svc__ic img{width:140px;height:140px;margin-left:-8px}
@media (min-width:1024px){.v3-svc--wide .v3-svc__ic img{width:220px;height:220px;margin-left:0}}

/* alignment: each card spans five shared rows (icon, title, punch, body, link); the grid sizes those rows per row
   of cards, so every card's body starts on the same line */
.v3-svc-grid{grid-auto-rows:auto;align-items:stretch}
.v3-svc{grid-row:span 5;grid-template-rows:subgrid;align-content:start}
.v3-svc .t-h3,.v3-svc .t-punch,.v3-svc .t-body{align-self:start}
@supports not (grid-template-rows:subgrid){
  .v3-svc{display:flex;flex-direction:column;gap:var(--sp-3)}
  .v3-svc .t-punch{min-height:calc(2 * 1.3em)}
}

/* fallback visuals (lifestyle photo or glass on Halo) are styled like client creative; nothing on the page labels them */
.cs-hero__visual.is-fallback img{object-fit:cover}

/* case cards on the Our Work hub now show each case's hero scene (16:10), so they fill the mat */
.case-card__mat img{object-fit:cover;padding:0}

/* Contact form: inputs in one row share a bottom line even when one label wraps (Creative QA, Oct 27) */
.form-x .form__row{align-items:end}
.form-x .form__row .field{align-content:end}
/* case cards: one media ratio everywhere */
.v3-work3 .work-card .journey{aspect-ratio:16/10}

/* ---- Codex QA fixes, Oct 27 ---- */
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--c-ink);color:var(--c-white);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill)}
.skip:focus{left:8px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* live labels split at their dots: shown apart, read with a space */
.sep-part+.sep-part{margin-left:.6em}
/* footer: four columns (Site, Trust, Socials, Team locations) */
@media (min-width:768px){.v2-foot .footer__cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:767px){.v2-foot .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.footer__col h2.footer__h{font:var(--fw-bold) var(--fs-ui)/1.3 var(--font-body);color:var(--accent);margin:0 0 var(--sp-3)}
/* reduced motion: no progress bars, and the pause control stops motion */
@media (prefers-reduced-motion:reduce){.prog,.toc-a__bar{display:none!important}}
.motion-paused .marquee__track{animation-play-state:paused!important}
.v3-hero-card{position:relative}
.motion-toggle{position:absolute;right:16px;bottom:16px;z-index:3;width:44px;height:44px;border-radius:50%;border:var(--bw-hair) solid var(--line);background:var(--bg-raised);color:var(--text);display:grid;place-items:center;cursor:pointer}
.motion-toggle .i-play{display:none}.motion-toggle[aria-pressed="true"] .i-pause{display:none}.motion-toggle[aria-pressed="true"] .i-play{display:inline}
/* contrast: accent text on the tinted panel uses the deeper accent (5.9:1) */
.ld-band .t-accent,.ld-band .eyebrow__label{color:#A3008F}
/* TOC numbers drawn by CSS where the live page has no numbered TOC */
/* AA-2026-10-28-rail: no counters in the rail */
.toc-a--live .toc-a__n{display:none}
/* inline source notes, the live numbering kept in the text */
.srcnote,.sources__list{list-style:none;padding:0;margin:var(--sp-4) 0;display:grid;gap:var(--sp-2)}
/* trends brief and e-book components restored from the live page */
.p--hn-num,.p--stat-num,.p--label.lq-num,.p--label.pillar-num-lg,.p--label.pillar-score{font:var(--fw-bold) clamp(40px,5vw,64px)/1 var(--font-display);margin:var(--sp-6) 0 var(--sp-2)}
.p--hero-nums-label,.p--viz-eyebrow,.p--chapter-opener-eyebrow,.p--pillar-eyebrow,.p--pillar-summary-eyebrow,.p--mid-cta-eyebrow,.p--eyebrow,.p--label.takeaways-label,.p--label.eyebrow.takeaways-label,.p--label.labs-callout-eyebrow,.p--label.fig-caption{font-weight:var(--fw-semibold);color:var(--accent);margin-top:var(--sp-6)}
.p--label.fig-caption{color:var(--text);font-weight:var(--fw-medium)}
.p--viz-title,.p--chapter-opener-thesis,.p--pillar-summary-thesis{font:var(--fw-bold) var(--fs-h4)/1.3 var(--font-display)}
.p--label.radar-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.lf-card{background:var(--bg-raised);border:var(--bw-hair) solid var(--line);border-radius:var(--r-m);padding:var(--sp-4) var(--sp-5);margin:var(--sp-3) 0;display:grid;gap:var(--sp-1)}
.lf-card p{margin:0}
.pull--hero{margin-top:0}
.form-x__preview{font-weight:var(--fw-semibold);border:var(--bw-hair) solid var(--line);border-radius:var(--r-m);padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-3)}
.toc-a--live a{grid-template-columns:minmax(0,1fr)}
/* U1 hover: the clip sits exactly over the poster; the poster stays until a clip is playing */
.hv{position:relative;display:inline-block;line-height:0}
.hv__v{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none}
.hv__v.is-on{opacity:1}
.hv.is-playing>img{opacity:0}
.v3-svc:hover .v3-svc__ic img,.v3-svc:focus-visible .v3-svc__ic img{transform:none}
.v3-svc__ic .hv{margin-left:-8px}.v3-svc__ic .hv img{margin-left:0}
.v5-svc--ink .hv{position:relative;z-index:1}
.v5-svc--ink .hv__v{filter:drop-shadow(0 0 22px rgba(255,0,229,.45))}
/* FAQ questions are h3 inside their summary (live and V4 heading outline) */
.v2-q summary .v2-q__h{font:inherit;margin:0;display:inline;letter-spacing:inherit}
h3.post-card__title{margin:0}
.about-x p.t-h3{margin:0 0 var(--sp-2)}
button[disabled][data-enable-js]{opacity:.5;cursor:not-allowed}

/* R6: the six pillars as a clean card grid (the whole card is the link; its text keeps normal styles) */
.pillar-grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr;margin:var(--sp-6) 0}
@media (min-width:640px){.pillar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.pillar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pillar-card{display:flex;flex-direction:column;gap:var(--sp-2);background:var(--bg-raised);border:var(--bw-hair) solid var(--line);border-radius:var(--r-l);
  padding:var(--sp-5);color:var(--text);text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.pillar-card:hover,.pillar-card:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.pillar-card span{text-decoration:none;color:inherit}
.pillar-card__num{font:var(--fw-semibold) var(--fs-ui)/1.2 var(--font-body);color:var(--accent)}
.pillar-card__num .sep-part+.sep-part{background:var(--accent);color:var(--accent-on-fill);border-radius:var(--r-pill);padding:2px 10px;margin-left:var(--sp-2)}
.pillar-card__score{font:var(--fw-bold) clamp(40px,4vw,56px)/1 var(--font-display);letter-spacing:-.02em}
.pillar-card__name{font:var(--fw-bold) var(--fs-h4)/1.25 var(--font-display)}
.pillar-card__thesis{font-size:var(--fs-body)}
.pillar-card__delta{font:var(--fw-semibold) var(--fs-ui)/1.3 var(--font-body);margin-top:auto;padding-top:var(--sp-2)}
.pillar-card.is-outlier{border-color:var(--accent)}
/* the "At a glance · The six-pillar radar" eyebrow reads as a label, not two links */
.lf-article .p--eyebrow{font:var(--fw-semibold) var(--fs-ui)/1.3 var(--font-body);color:var(--accent);text-decoration:none}
.lf-article .p--eyebrow .sep-part+.sep-part{color:var(--text)}
.lf-article .p--eyebrow .sep-part+.sep-part::before{content:"";display:inline-block;width:1px;height:.9em;background:var(--line);margin-right:.6em;vertical-align:-.1em}
.lf-article a.pillar-card,.lf-article a.pillar-card:hover{color:var(--text);text-decoration:none}
.lf-article a.pillar-card span{color:inherit;text-decoration:none}
.lf-article a.pillar-card .pillar-card__num{color:var(--accent)}
.lf-article a.pillar-card .pillar-card__num .sep-part+.sep-part{color:var(--accent-on-fill)}

/* R7: ChatB2B episode thumbnails are 16:9; every frame that shows one is 16:9 too, so no face or title is cut */
.post-card__img.is-169{aspect-ratio:16/9}
.post-card__img.is-169 img{object-fit:cover}
.ep__img{aspect-ratio:16/9;background:var(--c-halo)}
.ep__img img{object-fit:cover}
.ld-podfeat .feature-x__media{aspect-ratio:16/9}
.ld-podfeat .feature-x__media img{object-fit:cover}
.ep[hidden]{display:none}

/* ---- final creative QA, Oct 27 ---- */
/* separators: the words stay; a dot between parts shows as a thin rule with spacing */
.sep-part+.sep-part{margin-left:.55em}
.sep-part+.sep-part::before{content:"";display:inline-block;width:1px;height:.85em;background:currentColor;opacity:.35;margin-right:.55em;vertical-align:-.08em}
/* case study heroes: the title block is top-aligned so every H1 starts at one height */
.cs-hero__text{align-items:start!important}
/* ChatB2B hero: one full-width rounded card; the show art sits inside it, top-aligned, with the trailer chip on the art */
.ld-hero__card{width:100%;border-radius:var(--r-xl);overflow:hidden}
.ld-trailer.ld-hero__media{margin:var(--v3-panel-pad);margin-left:0;border-radius:var(--r-l);overflow:hidden;min-height:0;aspect-ratio:16/10;align-self:start}
@media (max-width:1023px){.ld-trailer.ld-hero__media{margin:0 var(--v3-panel-pad) var(--v3-panel-pad)}}
/* figures that scroll on phones show a visible scroll bar inside their rounded frame */
.fig__scroll{overflow-x:auto;border-radius:var(--r-m);scrollbar-width:thin;scrollbar-color:var(--accent) var(--panel)}
.fig__scroll::-webkit-scrollbar{height:8px}.fig__scroll::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}.fig__scroll::-webkit-scrollbar-track{background:var(--panel)}
/* HP workflow diagram: the drawing's own type size, scaled so it renders at 18px or more (no label collisions) */
.fig__scroll svg.wf{min-width:790px}
.fig__scroll svg.wf text{font-size:16px}
.fig__scroll svg.wf .wf-t{font-size:16px}
/* Intercept Labs steps: three then two, whole words */
@media (min-width:1024px){.ld-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ld-steps h3{hyphens:none;word-break:normal;overflow-wrap:normal}
/* contact: the preview notice shows only after a submit attempt */
.form-x__preview[hidden]{display:none}

/* motion that starts off to the side (the home photo slabs before they reveal) never widens the page on phones */
main{overflow-x:clip}

/* the hero shows its still poster until the loop is actually playing (a browser that cannot play the video never shows a blank hero) */
.v4-vid:not(.is-live) .v4-vid__still{opacity:1}
/* Oct 28 staging fixes: footer location rows match the link rows; phone menu rows are tappable and Contact stays in reach */
.footer__cols .footer__col:last-child li{font-size:var(--fs-ui);line-height:1.4;padding-block:6px}
@media (max-width:1023px){
  body.menu-open .nav__links a{display:block}
  .nav .btn-row{flex-wrap:nowrap;gap:var(--sp-2)}
  .nav__cta{display:inline-flex;padding-inline:var(--sp-4)}
}
/* 320px phones: keep Contact in the header — compact, never hidden (#349 item 6) */
@media (max-width:359px){
  .nav__inner{gap:var(--sp-3)}
  .nav__logo{width:104px}
  .nav__cta{padding-inline:var(--sp-3)}
}
/* Oct 28 alignment: the home Labs panel sits in the content column like the cards around it, its text inset like the CTA card; "(optional)" drops under its label in two-column form rows so paired labels line up */
.divider-band.v3-labs{width:calc(100% - 2 * var(--page-margin));max-width:var(--content-max);margin-inline:auto}
.v3-labs .divider-band__text{padding-inline:var(--sp-6)}
@media (min-width:1024px){
  .v3-labs .divider-band__text{padding-left:var(--sp-9)}
}
@media (min-width:768px){
  .form-x .form__row .field__opt{display:block}
}