/* Tuesdays Corp — The Fluid Approach
   Page-specific styles. Now checked directly against the real shared.css,
   header.js, and market-leadership.html (all shared by the client) instead
   of a reconstructed guess — three earlier bugs traced back to wrong
   assumptions about what shared.css provides:
   - .bleed is `width:100%; padding-left/right:var(--gutter)` — no
     max-width, no centering. There is no site-wide max-width; content runs
     full-width minus the gutter on every page, so this page now matches
     that rather than inventing its own 1180px container.
   - the real nav element is a bare `<nav id="nav">`, and shared.css targets
     it with an unscoped `nav{position:fixed;...}` — so any other <nav> tag
     on the page inherits that fixed positioning too. That's what was
     pinning the breadcrumb to the top: it was marked up as <nav>. Fixed by
     using <div class="crumb"> instead, matching Market Leadership's own
     markup exactly.
   - .close is a real shared dark CTA band (with its own ::after gradient
     overlay) — Mediapods deliberately opts out of it for the same pastel
     reason this page does, per its own comments. This page keeps doing
     the same: a page-scoped .fluid-close, not the shared component. */

:root{
  --sand:#f3e5b1; --sage:#e6eee5; --lav:#eae4ee; --sky:#dfeaf1; --purple:#e9dcf1;
  --sand-tint:#faf3de; --sage-tint:#eff6f1; --lav-tint:#f5f0f6; --sky-tint:#edf6f9;
}

section{position:relative;z-index:1}

/* hero breadcrumb — .crumb (shared) gives the mono/uppercase/letter-spacing
   treatment used on Market Leadership; this just recolours it for sitting
   on a photo and centers/tightens it for the hero layout */
.hero-crumb{justify-content:center;margin-bottom:12px;color:rgba(255,255,255,.75)}
.hero-crumb a{color:rgba(255,255,255,.75)}
.hero-crumb a:hover{color:#fff}
.hero-crumb span{color:rgba(255,255,255,.5)}

/* hero banner — bleeds full width behind the fixed nav; the content block
   gets its own top clearance (matching the padding-top used on the other
   two inner pages' heroes) and is centered both ways within the banner */
.hero-banner{
  position:relative;min-height:68vh;display:flex;align-items:center;overflow:hidden;
  background:url('../media/fluid-approach-bg.jpg') center/cover no-repeat;
}
.hero-overlay{position:absolute;inset:0;background:rgba(22,24,29,.30)}
.hero-content{
  position:relative;z-index:1;width:100%;max-width:640px;margin:0 auto;
  padding-top:clamp(90px,11vw,130px);padding-bottom:56px;
  color:#fff;text-align:center;
}
.hero-content h1{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5.4vw,64px);line-height:1.1;margin:0 0 16px;color:#fff}
.hero-content .lede{font-size:19px;color:rgba(255,255,255,.88);margin:0}
@media(max-width:640px){.hero-banner{min-height:58vh}.hero-content{padding-top:96px;padding-bottom:36px}}

/* intro strip — vertical padding only; horizontal inset comes from .bleed
   so it can never fight the container's own left/right padding */
.intro{padding-top:56px;padding-bottom:8px}
.intro p{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.6;max-width:58ch;color:#2a2c31;margin:0;padding-left:22px;border-left:2px solid var(--sand)}

/* thread — one <path> per gap between cards (see fluid-approach.js). The
   line itself is now always fully drawn and never breaks visually; only
   the dot animates, riding smoothly along it as you scroll. */
.thread-wrap{position:relative}
#flow-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.flow-seg{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.5}
#flow-dot{fill:var(--accent);filter:drop-shadow(0 0 6px rgba(240,78,48,.6))}

/* pillar cards — pastel, hang from the thread with a slow continuous sway */
.node{
  position:relative;border:1.5px solid rgba(22,24,29,.14);border-radius:22px;padding:46px 44px;
  transition:background .4s ease;
  animation:hangSway var(--sway-dur,5.2s) ease-in-out infinite;
  animation-delay:var(--sway-delay,0s);
}
.node.paused{animation-play-state:paused}
@keyframes hangSway{
  0%,100%{transform:rotate(-2.1deg)}
  50%{transform:rotate(2.1deg)}
}
.pillar[data-tone="sand"] .node{background:var(--sand-tint)}
.pillar[data-tone="sage"] .node{background:var(--sage-tint)}
.pillar[data-tone="lav"] .node{background:var(--lav-tint)}
.pillar[data-tone="sky"] .node{background:var(--sky-tint)}
.pillar[data-tone="sand"] .node:hover,.pillar[data-tone="sand"] .node.active{background:var(--sand)}
.pillar[data-tone="sage"] .node:hover,.pillar[data-tone="sage"] .node.active{background:var(--sage)}
.pillar[data-tone="lav"] .node:hover,.pillar[data-tone="lav"] .node.active{background:var(--lav)}
.pillar[data-tone="sky"] .node:hover,.pillar[data-tone="sky"] .node.active{background:var(--sky)}
@media(max-width:640px){.node{padding:34px 26px;border-radius:18px}}

.pillar{padding:40px 0}
.pillar-inner{display:grid;grid-template-columns:0.92fr 1.08fr;gap:48px;align-items:center}
.pillar.reverse .pillar-inner{direction:rtl}
.pillar.reverse .pillar-inner>*{direction:ltr}
@media(max-width:820px){.pillar-inner{grid-template-columns:1fr!important;direction:ltr!important}}

.pillar-visual{aspect-ratio:5/4;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:rgba(255,255,255,.55)}
.pillar-visual canvas,.pillar-visual svg{width:100%;height:100%}

.pillar-copy h2{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(26px,3vw,34px);margin:0 0 14px}
.pillar-copy .tagline{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--accent);margin:0 0 14px;max-width:26ch}
.pillar-copy .tagline.muted{color:var(--ink-faint);font-style:italic;font-weight:500}
.pillar-copy p.desc{font-size:16.5px;max-width:46ch;color:#3a3c42;margin:0}

/* network visual hover hint */
.hub-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-faint);opacity:.75;transition:opacity .3s}
.pillar-visual.hub-active .hub-hint{opacity:0}

/* close / CTA — page-scoped (not the shared .close), same reasoning
   Mediapods already documents in its own CSS: pastel, not the dark band */
.fluid-close{position:relative;z-index:2;background:var(--purple);color:var(--ink);padding:110px 0;text-align:center;margin-top:20px}
.fluid-close h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,44px);max-width:20ch;margin:0 auto 34px;line-height:1.2;color:inherit}
.flow-seq{display:flex;justify-content:center;align-items:center;gap:14px;font-family:var(--mono);font-size:15px;letter-spacing:.08em;margin-bottom:40px}
.flow-seq span{color:rgba(22,24,29,.32);transition:color .5s ease}
.flow-seq span.lit{color:var(--ink)}
.flow-seq .arrow{color:rgba(22,24,29,.32);transition:color .5s ease}
.flow-seq .arrow.lit{color:var(--accent)}
.cta-btn{position:relative;z-index:1;display:inline-block;background:var(--ink);color:var(--bg);text-decoration:none;font-family:var(--mono);font-size:13px;letter-spacing:.04em;padding:15px 30px;border-radius:999px;transition:transform .2s ease,background .2s ease}
.cta-btn:hover{background:var(--accent-deep);transform:translateY(-2px)}

@media (prefers-reduced-motion: reduce){
  .node{animation:none}
}