/* ============================================================
   polish.css — world-class treatment layer (SITE-WIDE, v5)
   Loaded by all nine pages, after styles.css (which is untouched).
   To revert: delete this file + its <link> line on each page.
   ============================================================ */

/* ---------- 1. Branded text selection ---------- */
::selection{background:var(--orange);color:var(--ink)}
::-moz-selection{background:var(--orange);color:var(--ink)}

/* ---------- 2. Reveal choreography — refined easing, hero focus-in ----------
   Same reveal system, upgraded curve. polish.js adds per-element
   stagger delays so content arrives in reading order. */
.js .rv{
  transform:translateY(28px);
  transition:opacity .85s cubic-bezier(.22,.61,.2,1),
             transform .85s cubic-bezier(.22,.61,.2,1);
}
.js #hero .rv{
  filter:blur(7px);
  transition:opacity .95s cubic-bezier(.22,.61,.2,1),
             transform .95s cubic-bezier(.22,.61,.2,1),
             filter .95s cubic-bezier(.22,.61,.2,1);
}
.js #hero .rv.in{filter:blur(0)}

/* ---------- 3. The orange thread — scroll progress ----------
   The ball's DNA echoed as a 2px thread across the top of the
   viewport, drawing itself as you read. Solid Signal Orange —
   the site's one standard orange. Injected by polish.js. */
#scrollThread{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--orange);
  pointer-events:none;will-change:transform;
}

/* ---------- 4. Header — settles as you scroll ---------- */
header{transition:background .35s ease,box-shadow .35s ease}
header.scrolled{
  background:rgba(11,11,13,.985);
  box-shadow:0 14px 34px rgba(0,0,0,.38);
}

/* ---------- 5. Nav & footer links — underline draws in from the left ---------- */
.nav .links a,
footer nav a{
  background-image:linear-gradient(var(--orange),var(--orange));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:3px;
  transition:color .2s,background-size .38s cubic-bezier(.22,.61,.2,1);
}
.nav .links a:hover,
footer nav a:hover{background-size:100% 1px}
/* active page already has its own solid underline — no draw-in on top of it */
.nav .links a[aria-current="page"],
footer nav a[aria-current="page"]{background-image:none}
.mobile-menu a{transition:color .2s,border-color .2s}
.mobile-menu a:hover{color:var(--paper)}

/* ---------- 6. Buttons — quiet lift and settle ---------- */
.btn{
  transition:background .2s,color .2s,border-color .2s,
             transform .28s cubic-bezier(.22,.61,.2,1),box-shadow .28s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.35)}
.btn:active{transform:translateY(0);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.btn-line{
  transition:background .2s,color .2s,border-color .2s,
             transform .28s cubic-bezier(.22,.61,.2,1),box-shadow .28s ease;
}
.btn-line:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(232,97,26,.16)}
.btn-line:active{transform:translateY(0)}

/* ---------- 7. Marquee — pauses to be read; chips acknowledge the cursor ---------- */
.marquee:hover .track{animation-play-state:paused}
.chip{transition:border-color .3s ease,color .3s ease,background .3s ease}
.chip:hover{border-color:rgba(232,97,26,.55);color:var(--paper);background:rgba(232,97,26,.06)}

/* ---------- 8. Imagery — colour arrives on attention (site-wide) ----------
   Matches the offer cards' existing behaviour: photos rest in
   grayscale where the design keeps them so, and answer attention
   with colour and a slow breath. */
.photo{overflow:hidden}
.photo img{transition:transform .9s cubic-bezier(.22,.61,.2,1)}
.photo:hover img{transform:scale(1.035)}
#why .photo,.about-left .photo{transition:filter .7s ease}
#why .photo:hover{filter:grayscale(0) contrast(1.02)}
.about-left .photo:hover{filter:grayscale(0)}

/* ---------- 9. Scroll-down cue — responds in brand ---------- */
.scrolldown{transition:color .25s ease}
.scrolldown:hover{color:var(--paper)}
.scrolldown .arrow{transition:color .25s ease}
.scrolldown:hover .arrow{color:var(--orange)}

/* ---------- 10. Cross-page transitions — pages breathe into each other ----------
   Supported browsers cross-fade between pages instead of a hard
   cut; older browsers simply navigate as before. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vtOut .22s ease both}
  ::view-transition-new(root){animation:vtIn .32s ease both}
}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

/* ---------- 11. Reduced motion — every addition stands down ---------- */
@media (prefers-reduced-motion:reduce){
  .js .rv,.js #hero .rv{opacity:1;transform:none;filter:none;transition:none}
  #scrollThread{display:none}
  .btn:hover,.btn-line:hover{transform:none;box-shadow:none}
  .photo:hover img{transform:none}
  #why .photo:hover{filter:grayscale(1) contrast(1.05)}
  .about-left .photo:hover{filter:grayscale(1)}
}

/* ---------- 12. The Exchange — tighten the intro→book gap ----------
   Base sections use 110px top+bottom; between the intro and the book
   block that stacked to ~220px of dead space. Trim these two edges
   only; every other section keeps its full breathing room. */
#exchange-intro{padding-bottom:8px}
#book{padding-top:8px}
@media(max-width:760px){
  #exchange-intro{padding-bottom:16px}
  #book{padding-top:16px}
}

/* ---------- 13. Tighten the header→first-section gap (all inner pages) ----------
   .page-main clears the 89px fixed header (88px), then the first
   section added another 40px — ~128px before content, too airy on
   tall screens. Trim the first-section top so content sits closer
   under the header, consistently across every inner page. */
.page-main > section:first-child{padding-top:14px}
@media(max-width:760px){
  .page-main > section:first-child{padding-top:10px}
}

/* ---------- 14. The Exchange — tighten vertical rhythm between sub-sections ----------
   #book, #workshops, #news, #articles each carry the global 110px
   top+bottom; stacked, the gaps between them read as too open.
   Trim the facing edges so the page flows as one Exchange, not four
   far-apart blocks. Book eyebrow sits close above its grid. */
#book{padding-top:8px;padding-bottom:20px}
#book > .wrap:first-child{margin-bottom:18px}          /* eyebrow hugs the grid below it */
#workshops{padding-top:20px;padding-bottom:20px}
#news{padding-top:20px;padding-bottom:20px}
#articles{padding-top:20px}
@media(max-width:760px){
  #book{padding-top:16px;padding-bottom:20px}
  #workshops,#news{padding-top:22px;padding-bottom:20px}
  #articles{padding-top:22px}
}

/* ---------- 15. "Express your interest" — make the link clearly clickable ----------
   The coming-soon line is all one orange italic colour, so the link
   inside it didn't read as clickable. Give the link its own weight,
   an underline that draws in, and an arrow that nudges on hover. */
.coming-soon a{
  color:var(--orange);font-style:normal;font-weight:600;
  text-decoration:none;white-space:nowrap;
  border-bottom:1.5px solid var(--orange);padding-bottom:1px;
  transition:opacity .2s ease,border-color .2s ease;
}
.coming-soon a::after{
  content:'\2192';                 /* → */
  display:inline-block;margin-left:6px;
  transition:transform .25s cubic-bezier(.22,.61,.2,1);
}
.coming-soon a:hover{opacity:.82}
.coming-soon a:hover::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .coming-soon a::after{transition:none}
  .coming-soon a:hover::after{transform:none}
}

/* ---------- 15. Mobile ball popup — stop it clipping the left edge ----------
   The core centres the popup on the ball (left:50%,translateX(-50%)),
   but the ball rests near the left corner, so a 200px popup spills off
   the left edge. Pin the popup to the viewport's left margin instead,
   sit it above the ball, and let it size to the small screen. Also make
   the popup an obvious tap target that leads to the form. */
@media(max-width:600px){
  #scrollBall .ball-popup{
    left:16px;right:auto;
    transform:translateY(6px);
    bottom:44px;
    width:auto;max-width:calc(100vw - 32px);
    box-sizing:border-box;
    pointer-events:auto;              /* let the popup itself be tapped */
    cursor:pointer;
  }
  #scrollBall.settled.popup-open .ball-popup,
  #scrollBall.settled:focus-visible .ball-popup{
    transform:translateY(0);
  }
  /* arrow points down to the ball, positioned near the ball not the popup centre */
  #scrollBall .ball-popup::after{
    left:14px;right:auto;margin-left:0;bottom:-6px;
    border-left:1px solid var(--orange);border-top:1px solid var(--orange);
    border-right:none;border-bottom:none;transform:rotate(-135deg);
  }
  /* a clear "tap to continue" cue inside the popup on mobile */
  #scrollBall .ball-popup .tap-cue{
    display:block;margin-top:10px;color:var(--orange);font-weight:600;
    font-style:normal;font-size:12px;letter-spacing:.03em;
  }
}
/* the cue is mobile-only; hidden on desktop where hover+click already works */
.ball-popup .tap-cue{display:none}

/* ---------- 17. Trademark marks (TM) ----------
   The wordmark is an image, so the TM is set as a small superscript
   pinned to the top-right of the logo. CommuniSENSE carries an
   inline TM on its first visible mention per page. */
.brand{position:relative}
.brand .tm{
  position:absolute;top:-2px;
  font-size:7px;font-weight:600;line-height:1;
  color:var(--silver);letter-spacing:.02em;
  pointer-events:none;user-select:none;
}
header .brand .tm{left:calc(100% + 3px)}
footer .brand .tm{left:calc(100% + 3px)}
/* the larger in-body wordmark (Who I am) needs a proportionate TM:
   header logo is 18px tall, this one is 28px — scale the mark to match */
.about-brand .tm{font-size:11px;top:-2px;left:calc(100% + 4px)}
/* wordmark image + TM need the TM anchored to the image, not the column */
.brand .brand-mark{position:relative;display:inline-block}
.brand .brand-mark .tm{position:absolute;top:-1px;left:calc(100% + 2px)}

/* inline TM after CommuniSENSE in copy */
.tm-inline{
  font-size:.5em;vertical-align:super;line-height:0;
  font-weight:600;letter-spacing:.02em;margin-left:1px;
}