/* ============================================================
   PARALLAX ADVISORY — SHARED POLISH LAYER
   Recruiter-readiness polish tranche · 30 July 2026
   Loaded on EVERY page (including the self-contained homepage),
   after the page's own stylesheet. Holds the shared rules that
   were previously duplicated in page-local <style> patches:
   CTA pills, marquees, credentials, press ticker, recommendation
   proof panel, service-tile back links, work-grid completion,
   floating-CTA collision policy, focus + touch-target hygiene.
   Nothing here restyles a retained component's identity.
   ============================================================ */

/* ---------- 0 · fallbacks so this file is safe on the homepage,
     which does not link styles.css and defines its own tokens ---------- */
:root{
  --pa-hair:var(--hair,rgba(255,255,255,.12));
  --pa-tx:var(--tx,#F3EFEA);
  --pa-mute:var(--tx-mute,rgba(243,239,234,.64));
  --pa-faint:var(--tx-faint,rgba(243,239,234,.52));
  --pa-accent:var(--cobalt-bright,#86A6DC);
  --pa-cream:var(--cream,#F5F0EB);
  --pa-mono:var(--font-mono,"JetBrains Mono",ui-monospace,Menlo,monospace);
  --pa-display:var(--font-display,"Outfit",system-ui,sans-serif);
  --pa-body:var(--font-body,"Inter","Outfit",system-ui,sans-serif);
  --pa-ease:var(--ease,cubic-bezier(.22,.61,.36,1));
}

/* ============================================================
   1 · FOCUS + TOUCH TARGETS (estate-wide accessibility floor)
   ============================================================ */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--pa-accent);
  outline-offset:3px;
  border-radius:6px;
}
.skip:focus-visible{outline-offset:0}
/* Interactive controls keep a 44px hit area without changing their look */
.nav__toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.flip__toggle{min-width:48px;min-height:48px}
.foot a,.nav__links a{display:inline-block}
@media(max-width:900px){
  .foot a{padding:4px 0;min-height:24px}
  .nav__links a{min-height:44px;display:flex;align-items:center;justify-content:center;width:100%}
}

.tm-sup{font-size:.52em;vertical-align:super;letter-spacing:0;font-weight:inherit}

/* ============================================================
   2 · CTA PILLS — one shared pill language
   Used by the About founder actions and the service deep dives.
   ============================================================ */
.pill-cluster{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.pill{
  font-family:var(--pa-mono);font-size:12.5px;letter-spacing:.04em;line-height:1;
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:14px 22px;border-radius:13px;
  border:1px solid rgba(255,255,255,.2);color:var(--pa-cream);
  text-decoration:none;cursor:pointer;
  transition:transform .25s var(--pa-ease),filter .3s var(--pa-ease),border-color .3s var(--pa-ease),background .3s var(--pa-ease);
}
.pill__arrow{display:inline-block;transition:transform .3s var(--pa-ease)}
.pill:hover .pill__arrow{transform:translateX(4px)}
.pill--primary{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90% 140% at 18% 18%,rgba(120,152,208,.55),transparent 55%),
    radial-gradient(100% 150% at 86% 92%,rgba(40,74,140,.62),transparent 55%),
    linear-gradient(120deg,#0e1b33,#1f3d7a 46%,#2c4d92 60%,#0e1b33);
  background-size:200% 200%,200% 200%,220% 100%;
  animation:moltenshift 11s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.3),0 14px 32px -14px rgba(0,0,0,.6);
}
.pill--primary:hover{filter:brightness(1.12)}
.pill--ghost{background:rgba(255,255,255,.03);border-color:rgba(243,239,234,.3)}
.pill--ghost:hover{border-color:rgba(243,239,234,.65);background:rgba(255,255,255,.06)}
.pill--ghost .pill__arrow{transform:none}
.pill--ghost:hover .pill__arrow{transform:translate(3px,-3px)}
@media(max-width:520px){
  .pill-cluster{gap:12px}
  .pill{width:100%;justify-content:space-between}
}

/* ============================================================
   3 · MARQUEE v2 — deterministic, seamless, masked, pausable
   Replaces the GSAP xPercent tween on both Home and About.
   Structure:
     .marq2  > .marq2__track > .marq2__set  (×2, second aria-hidden)
   The track is width:max-content and holds exactly two identical
   sets, so translate3d(-50%) is always a whole-set step: no gap,
   no partial logo at the loop point.
   ============================================================ */
.marq2{position:relative;overflow:hidden;width:100%;
  /* background-agnostic edge masks: full logos fade in and out rather than
     being hard-clipped at the container edge */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.marq2__track{
  display:flex;width:max-content;will-change:transform;
  animation:pa-marq var(--marq-dur,52s) linear infinite;
}
.marq2__set{display:flex;align-items:center;flex:0 0 auto}
@keyframes pa-marq{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.marq2:hover .marq2__track,
.marq2:focus-within .marq2__track{animation-play-state:paused}
.marq2.is-paused .marq2__track{animation-play-state:paused}
@media(max-width:560px){.marq2{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}}

/* Home brand set — inherits the retained .tk sizing where present */
.marq2__set .tk{height:59px;width:auto;object-fit:contain;opacity:.82;flex:0 0 auto;padding:0 10px}
.marq2__set i{font-style:normal;color:var(--pa-accent);padding:0 14px;font-weight:300;font-size:1.1rem}
/* Brand-ticker size is deliberately unchanged from production at every breakpoint. */

/* Reduced motion — art-directed static state, one complete set, centred */
@media(prefers-reduced-motion:reduce){
  .marq2__track{animation:none!important;width:100%;flex-wrap:wrap;justify-content:center}
  .marq2__set{flex-wrap:wrap;justify-content:center;row-gap:18px}
  .marq2__set[aria-hidden="true"]{display:none}
  .marq2{-webkit-mask-image:none;mask-image:none}
}

/* ============================================================
   4 · CREDENTIALS — promoted out of the About page-local patch
   ============================================================ */
.creds{display:flex;flex-direction:column;gap:0;margin-top:26px}
.creds__row{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--pa-hair)}
.creds__row:last-child{border-bottom:1px solid var(--pa-hair)}
.creds dt{font-family:var(--pa-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pa-accent);margin:0;padding-top:3px}
.creds dd{margin:0;font-size:1.02rem;line-height:1.7;color:var(--pa-mute)}
@media(max-width:680px){.creds__row{grid-template-columns:1fr;gap:8px}}

/* ============================================================
   5 · RECOMMENDATION PROOF PANEL
   Built from the site's existing dark feature-panel (.glass),
   bordered-row (.creds/.prog__facts) and editorial pull-quote
   (.prose blockquote) grammar. No new testimonial visual system,
   no ratings, no headshots.
   ============================================================ */
.recs{border-radius:22px;padding:44px 44px 36px;margin-top:8px}
.recs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:6px}
.recs__lede{font-family:var(--pa-body);font-size:1rem;line-height:1.7;color:var(--pa-mute);max-width:62ch;margin:18px 0 24px}
.recs__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* The panel sits inside .prose, whose `ul li::before{content:"/"}` bullet was
   landing a stray slash beside each recommendation. These are quoted people,
   not a bulleted list, so the marker and its indent are removed here. */
.recs__list .rec::before{content:none}
.recs__list .rec{padding-left:0;font-size:inherit;line-height:inherit;color:inherit}
.rec{padding:30px 0;border-top:1px solid var(--pa-hair);display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start}
.rec:last-child{border-bottom:1px solid var(--pa-hair)}
.rec__who{display:flex;flex-direction:column;gap:7px}
.rec__name{font-family:var(--pa-display);font-weight:400;font-size:1.12rem;letter-spacing:-.005em;color:var(--pa-cream);display:inline-flex;align-items:baseline;gap:7px}
.rec__name a{color:inherit;border-bottom:1px solid transparent;transition:border-color .25s var(--pa-ease),color .25s var(--pa-ease)}
.rec__name a:hover{color:var(--pa-accent);border-bottom-color:var(--pa-accent)}
.rec__name .ext{font-size:.78em;color:var(--pa-accent)}
.rec__role{font-family:var(--pa-body);font-size:.9rem;line-height:1.5;color:var(--pa-mute)}
.rec__role a{color:inherit;border-bottom:1px solid rgba(243,239,234,.22);transition:color .25s var(--pa-ease),border-color .25s var(--pa-ease)}
.rec__role a:hover{color:var(--pa-accent);border-bottom-color:var(--pa-accent)}
.rec__rel{font-family:var(--pa-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--pa-faint)}
.rec__quote{margin:0;border-left:2px solid var(--cobalt-soft,#6E8FC9);padding:2px 0 2px 26px}
.rec__quote p{font-family:var(--pa-display);font-weight:300;font-size:clamp(1.05rem,1.75vw,1.28rem);line-height:1.46;color:var(--pa-cream);margin:0}
.rec__quote p + p{margin-top:.7em}
.recs__foot{margin-top:26px}
@media(max-width:820px){
  .recs{padding:34px 26px 28px}
  .rec{grid-template-columns:1fr;gap:16px}
  .rec__quote{padding-left:18px}
}

/* ============================================================
   6 · PRESS / COVERAGE TICKER — the Home proof-band treatment
   Same object as the Home brand ticker: one rounded `.glass` band
   with the marquee inside it, the same mono kicker above, the same
   accent `/` between marks, and the band's own overflow clipping
   the strip so the masked edges read against the panel rather than
   the page.

   Every mark links to an article whose body quotes Andy by name —
   titles that covered the launch without naming him were removed
   rather than kept for volume.
   ============================================================ */
.press{margin-top:10px}
/* Same panel grammar as the recommendations block directly above it on this
   page: eyebrow, heading and lede live INSIDE the box, and the ticker is the
   panel's content. Previously the heading sat outside a box whose only label
   was a mono kicker repeating it - three lines saying the same thing, and a
   box/no-box split found nowhere else on the site. */
.press__band{border-radius:22px;padding:44px 44px 0;overflow:hidden}
.press__lede{font-family:var(--pa-body);font-size:1rem;line-height:1.7;color:var(--pa-mute);
  max-width:62ch;margin:18px 0 0}
.press__ticker{margin-top:30px;padding:26px 0 30px;border-top:1px solid var(--pa-hair);
  margin-left:-44px;margin-right:-44px;overflow:hidden}

/* Geometric normalisation: every mark is composed on a common canvas with
   its cap height optically matched, so a single CSS height renders the
   whole family at one visual weight. Nothing is cropped. */
.press-logo{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  height:72px;padding:0 22px;
  opacity:.78;filter:grayscale(1);
  transition:opacity .3s var(--pa-ease),transform .3s var(--pa-ease);
}
.press-logo img{height:50px;width:auto;max-width:none;object-fit:contain;display:block}
.press-logo:hover,.press-logo:focus-visible{opacity:1;transform:translateY(-2px)}

@media(max-width:820px){.press__band{padding:34px 26px 0}
  .press__ticker{margin-left:-26px;margin-right:-26px}}
@media(max-width:640px){
  .press__band{padding:28px 20px 0}
  .press__ticker{margin-top:24px;padding:20px 0 24px;margin-left:-20px;margin-right:-20px}
  .press-logo{height:60px;padding:0 16px}
  .press-logo img{height:42px}
}

/* ============================================================
   7 · SERVICE TILE — back-face route to the deep dive
   Uses the existing text-link treatment. No tile redesign.
   ============================================================ */
.prog__more{
  font-family:var(--pa-mono);font-size:12.5px;letter-spacing:.04em;color:var(--pa-accent);
  display:inline-flex;gap:8px;align-items:center;margin-top:22px;min-height:44px;
}
.prog__more .arr{transition:transform .3s var(--pa-ease)}
.prog__more:hover .arr{transform:translateX(4px)}
/* Tighten the demonstrably empty lower third of the flipped back face
   without changing the tile's dimensions or the flip interaction. */
.flip__face--back{justify-content:flex-start}
.flip__face--back .prog__desc:last-of-type{margin-bottom:4px}

/* ============================================================
   8 · WORK GRID — eighth position (anonymous, blurred, inert)
   Same card system, proportions and grid as the seven retained
   cards. No brand, project name or category is present in the
   DOM, the accessibility tree, metadata or the rendered UI.
   ============================================================ */
.wcard--soon{
  position:relative;display:block;cursor:default;
  border-radius:20px;overflow:hidden;
}
/* The card carries the real card composition — cobalt lockup area above,
   standard information block below — so the grid reads as complete. Its
   content is placeholder text only: no brand, project, category or
   identifying copy exists in the DOM, the accessibility tree, the metadata
   or the source, and none is recoverable with CSS disabled. */
.wcard--soon .wcard__inert{
  filter:blur(11px) saturate(.55) brightness(.92);
  -webkit-filter:blur(11px) saturate(.55) brightness(.92);
  transform:scale(1.05);transform-origin:center;
  user-select:none;pointer-events:none;
}
.wcard--soon .wcard__tilefill{
  width:34%;height:30%;border-radius:8px;
  background:linear-gradient(160deg,rgba(243,239,234,.30),rgba(243,239,234,.14));
}
.wcard--soon .wcard__veil{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(7,10,18,.42),rgba(7,10,18,.62));
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;
}
.wcard--soon .wcard__soon{
  font-family:var(--pa-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--pa-cream);
  padding:13px 24px;border-radius:13px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(10,14,26,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 16px 40px -20px rgba(0,0,0,.8);
}

/* ============================================================
   9 · FLOATING CTA — page-aware collision policy
   Desktop: a restrained prompt on standard pages only.
   Mobile: no floating layer at all — conversion stays in flow
   and in the navigation drawer.
   ============================================================ */
.sticky-cta{max-width:calc(100vw - 44px)}
@media(max-width:900px){
  .sticky-cta,a[data-sticky]{display:none!important}
}
/* Suppressed while the drawer is open, while the cookie notice is
   undecided, and on pages that own their own conversion moment. */
body.nav-open .sticky-cta{opacity:0!important;pointer-events:none!important}
body.no-floating-cta .sticky-cta{display:none!important}

/* ============================================================
   10 · MOBILE NAVIGATION — drawer owns the contact route
   ============================================================ */
body.nav-open{overflow:hidden}
.nav__links .nav__drawer-cta{margin-top:26px}
@media(min-width:901px){.nav__links .nav__drawer-cta{display:none}}
@media(max-width:900px){
  .nav__links .nav__drawer-cta{
    font-family:var(--pa-mono);font-size:13px;letter-spacing:.04em;
    display:inline-flex;align-items:center;gap:9px;width:auto;
    min-height:48px;padding:15px 26px;border-radius:13px;color:var(--pa-cream);
    border:1px solid rgba(255,255,255,.2);
    background:
      radial-gradient(90% 140% at 18% 18%,rgba(120,152,208,.55),transparent 55%),
      radial-gradient(100% 150% at 86% 92%,rgba(40,74,140,.62),transparent 55%),
      linear-gradient(120deg,#0e1b33,#1f3d7a 46%,#2c4d92 60%,#0e1b33);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 44px -16px rgba(0,0,0,.7);
  }
}

/* ============================================================
   11 · IMAGE STABILITY — no layout shift from any media
   ============================================================ */
:where(img[width][height]){height:auto}
.founder__portrait img{aspect-ratio:4/5}

.wcard__tile,.case-tile{contain:layout paint}

/* ============================================================
   12 · WRAP + RHYTHM DISCIPLINE
   Balanced wrapping for short display headlines only; 'pretty'
   for prose so long commercial paragraphs never orphan.
   ============================================================ */
.prose p,.recs__lede,.rec__role,.svc__body p{text-wrap:pretty}
.pill,.wcard__soon,.rec__rel{text-wrap:nowrap}
.section__h2,.cta__h2,.phero__h1{text-wrap:balance}
/* Long commercial headlines should not be forced into a narrow measure */
.svc h2,.recs__head h2{max-width:24ch}

/* Section transition rhythm — remove the two demonstrably excessive
   desktop gaps (About founder→credentials, Work grid→closing) without
   changing any section's internal design. */
.section+.section{margin-top:0}
.section--tight{padding-top:56px;padding-bottom:56px}
.section--flush-top{padding-top:0}


/* Home closing frame — the last commercial thought lands as complete ideas
   with real breathing room. Copy unchanged; only leading + line control. */
.cta__h2--close{line-height:1.24;letter-spacing:-.018em}
.cta__h2--close .cta__line{display:inline}
@media(min-width:760px){
  .cta__h2--close .cta__line{display:block;margin-top:.22em}
}

/* ============================================================
   13 · SERVICE DEEP-DIVE PAGE COMPONENTS
   Composed only from existing primitives (.glass, .prose, .creds,
   .faq, .pill, .facts). No new design system.
   ============================================================ */
.svc__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:8px}
@media(max-width:860px){.svc__grid{grid-template-columns:1fr;gap:20px}}
.svc__panel{border-radius:20px;padding:34px 32px}
.svc__panel h3{font-family:var(--pa-display);font-weight:400;font-size:1.22rem;color:var(--pa-cream);letter-spacing:-.01em;margin-bottom:12px}
.svc__panel p{font-size:1rem;line-height:1.7;color:var(--pa-mute)}
.svc__panel ul{list-style:none;display:flex;flex-direction:column;gap:12px;padding:0;margin-top:12px}
.svc__panel li{position:relative;padding-left:22px;font-size:1rem;line-height:1.62;color:var(--pa-mute)}
.svc__panel li::before{content:"/";position:absolute;left:0;color:var(--pa-accent)}
.svc__steps{list-style:none;counter-reset:step;padding:0;margin-top:26px;display:flex;flex-direction:column}
.svc__steps li{counter-increment:step;display:grid;grid-template-columns:56px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--pa-hair)}
.svc__steps li:last-child{border-bottom:1px solid var(--pa-hair)}
.svc__steps li::before{content:"0" counter(step);font-family:var(--pa-mono);font-size:12px;letter-spacing:.06em;color:var(--pa-accent);padding-top:5px}
.svc__steps b{display:block;font-family:var(--pa-display);font-weight:400;font-size:1.14rem;color:var(--pa-cream);margin-bottom:6px;letter-spacing:-.005em}
.svc__steps span{display:block;font-size:.98rem;line-height:1.62;color:var(--pa-mute)}
/* The li has THREE grid items, not two: ::before (the 01 counter), <b> and <span>.
   Auto-placement therefore pushed <span> into the 56px counter column, rendering the
   step body one word per line. Pin both text items to column two. */
.svc__steps b,.svc__steps span{grid-column:2}
.svc__steps li{row-gap:0}   /* <b> already carries its own 6px; 20px is the column gap */
@media(max-width:560px){.svc__steps li{grid-template-columns:1fr;gap:8px}
  .svc__steps b,.svc__steps span{grid-column:1}}
.svc__crumb{font-family:var(--pa-mono);font-size:11.5px;letter-spacing:.06em;color:var(--pa-faint);display:inline-flex;gap:8px;align-items:center;margin-bottom:26px}
.svc__crumb a{color:var(--pa-mute)}
.svc__crumb a:hover{color:var(--pa-cream)}

/* ============================================================
   14 · HOME PLAYBOOK TILE
   The tile is retained exactly as it is in production: one column,
   the written proposition, one call to action.

   A cover-screen visual was developed for the right-hand third over
   five rounds and is NOT shipped. The Playbook's identity has to be
   settled first — that work is logged in PRE_GO_LIVE_BACKLOG.md and
   will be done separately. Until then the right-hand side stays
   empty rather than carrying a placeholder.

   Nothing in this file touches the tile. This section is a marker
   so the next person does not go looking for a rule that was
   deliberately removed.
   ============================================================ */

/* ============================================================
   15 · SMALL-SCREEN OVERFLOW GUARDS
   ============================================================ */
@media(max-width:400px){
  .wrap{padding-left:18px;padding-right:18px}
  .recs{padding:28px 20px 24px}
  .svc__panel{padding:26px 22px}
}
.marq2,.press__logos,.proof__ticker{max-width:100%}

/* ============================================================
   16 · VERTICAL RHYTHM
   Headings and ledes were landing 0-8px off the block below them.
   styles.css sets .prose blockquote and .faq with almost no air;
   these raise the specificity just enough to win without editing
   the base sheet. The :not() guard keeps the recommendation
   quotes flush inside their panel, where margin:0 is correct.
   ============================================================ */
.prose blockquote:not(.rec__quote){margin:38px 0 22px}
.eyebrow + .faq{margin-top:24px}