/* ============================================================
   EFFERENT MEDIA — v2 BASE STYLESHEET  (GENERATED, DO NOT HAND-EDIT)

   This file is a verbatim concatenation of the two stylesheets that
   render the live v1 page, flattened so index-v2.html can be opened
   as a plain file:

     PART 1  app/efferent.css            (whole file, unchanged)
     PART 2  app/globals.css  lines 22+  (everything after the Tailwind
             @import / @theme block, which is build-time only)

   Nothing in here is new. Every v2 rule lives in efferent-v2.css.
   Regenerate rather than edit, so v1 stays the single source.
   ============================================================ */

/* ─────────── PART 1 · app/efferent.css ─────────── */
/* ============================================================
   EFFERENT MEDIA — homepage
   Row 1  hero ............ V2 layout + V2 background photo
   Rows 2-8 ............... V1 layouts
   Type ................... V1 font family, full site
   ============================================================ */
:root{
  --ink:#0F1213;
  --ink-2:#161A1A;
  --ink-3:#111514;
  --cream:#EFE6D9;
  --cream-hi:#F6EEE4;
  --orange:#F16B2B;
  --orange-dk:#D4551A;
  --grey:#A8A5A0;
  --on-dark:#C6C2BA;
  --on-cream:#3A3833;
  --line-dark:rgba(246,238,228,.16);
  --line-cream:rgba(15,18,19,.20);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --max:1280px;
  --gut:clamp(20px,4.2vw,56px);
  --pad:clamp(54px,5.9vw,86px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--cream-hi);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:min(var(--max),calc(100% - 2*var(--gut)));margin-inline:auto}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);font-weight:700;font-size:clamp(10px,.86vw,12px);
  letter-spacing:.17em;text-transform:uppercase;color:var(--orange);margin:0 0 18px;
}
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.035em;line-height:.96}
h1{font-size:clamp(33px,3.96vw,57px);letter-spacing:-.042em}
.h-sec{font-size:clamp(32px,3.9vw,56px)}
.lede{font-size:clamp(15px,1.15vw,17px);line-height:1.55}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:15px 22px;border:1px solid currentColor;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn--solid{background:var(--orange);border-color:var(--orange);color:#14100E}
.btn--solid:hover{background:var(--orange-dk);border-color:var(--orange-dk);color:#fff}
.btn--pill{border-radius:999px;padding:13px 24px}
.btn .ar{font-family:var(--sans);font-weight:600;font-size:15px;line-height:1}

/* ---------- wordmark ---------- */
.brand{display:inline-block;line-height:0}
.brand--hero{--wm:196px}
.brand--foot{--wm:212px}
.wm{width:var(--wm,196px);height:auto;display:block;overflow:visible}

/* ============================================================
   ROW 1 — HERO   (V2 layout, V2 background photo, V1 type)
   ============================================================ */
.hero-frame{padding:14px 14px 0;background:var(--ink)}
.hero{
  position:relative;max-width:1420px;margin-inline:auto;overflow:hidden;
  border-radius:44px 44px 0 0;background:var(--cream);color:var(--ink);isolation:isolate;
}
.hero::before{ /* the photo */
  content:"";position:absolute;inset:0;z-index:0;
  background:url("/assets/hero-bg.jpg") right center/auto 104% no-repeat, var(--cream);
}
.hero::after{ /* cream wash so the copy sits on paper, photo reads on the right */
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(95deg,
    var(--cream) 0%, var(--cream) 37%,
    rgba(239,230,217,.95) 44%, rgba(239,230,217,.58) 52%,
    rgba(239,230,217,.12) 59%, rgba(239,230,217,0) 65%);
}
.hero > *{position:relative;z-index:2}

.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;
        padding:24px clamp(22px,3vw,44px)}
.nav{display:flex;justify-content:flex-start;padding-left:clamp(8px,2.4vw,40px);gap:clamp(14px,1.95vw,29px);
     font-family:var(--mono);font-weight:500;font-size:11px;
     letter-spacing:.14em;text-transform:uppercase;color:#2C2E2B}
.nav a{padding:6px 0;border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
.nav a:hover{border-color:var(--orange);color:var(--orange)}
.topbar .btn--pill{border-color:rgba(246,238,228,.62);color:var(--cream-hi);justify-self:end}
.topbar .brand{justify-self:start}
.topbar .btn--pill:hover{background:var(--orange);border-color:var(--orange);color:#14100E}

.hero-grid{display:grid;grid-template-columns:57% 43%;align-items:center;min-height:clamp(400px,39vw,520px)}
.hero-copy{padding:clamp(18px,2vw,30px) clamp(18px,2vw,30px) clamp(40px,4vw,58px) clamp(22px,3vw,44px)}
.hero-eye{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.hero-eye span{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.2em;
               text-transform:uppercase;color:#5C5A54}
.hero-eye i{flex:0 0 62px;height:1px;background:var(--line-cream)}
.hero h1{max-width:none}
.hero h1 .orange{color:var(--orange);display:block}
.hero p.lede{margin:22px 0 0;max-width:44ch;color:#4A4842}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin:28px 0 24px}
.hero-actions .btn:not(.btn--solid){border-color:var(--line-cream);color:var(--ink)}
.hero-actions .btn:not(.btn--solid):hover{border-color:var(--ink);background:var(--ink);color:var(--cream)}
.hero-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:#6A675F;margin:0}

/* ---------- logo bar (scrolling) ---------- */
.logobar{background:var(--cream);border-top:1px solid var(--line-cream);overflow:hidden;
         padding:0;position:relative;max-width:1420px;margin:0 auto;}
.logobar::before,.logobar::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.logobar::before{left:0;background:linear-gradient(90deg,var(--cream),rgba(239,230,217,0))}
.logobar::after{right:0;background:linear-gradient(270deg,var(--cream),rgba(239,230,217,0))}
.marquee{display:flex;width:max-content;animation:slide 42s linear infinite}
.logobar:hover .marquee{animation-play-state:paused}
.mq-set{display:flex;align-items:center}
.mq-item{display:flex;align-items:center;justify-content:center;
         padding:9px clamp(20px,2.7vw,42px);border-right:1px solid var(--line-cream)}
.mq-item img{height:clamp(24px,2.2vw,31px);width:auto;object-fit:contain;mix-blend-mode:multiply}
.mq-more{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;
         text-transform:uppercase;color:#7B786F;line-height:1.5;text-align:left}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee{animation:none}}

/* ============================================================
   ROW 2 + 3 — EVOLUTION   (V1)
   ============================================================ */
.evolution{background:var(--ink);padding:calc(var(--pad) - 14px) 0 calc(var(--pad) - 24px)}
.evolution .h-sec{max-width:none;color:var(--cream-hi)}
.evo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(44px,5vw,68px)}
.evo-col{padding:0 clamp(22px,2.6vw,38px);border-left:1px solid var(--line-dark);display:flex;flex-direction:column}
.evo-col:first-child{padding-left:0;border-left:0}
.evo-col:last-child{padding-right:0}
.evo-col .eyebrow{margin-bottom:14px}
.evo-col h3{font-size:clamp(21px,1.95vw,28px);line-height:1.1;color:var(--cream-hi);max-width:19ch}
.evo-col p{margin:18px 0 0;color:var(--on-dark);font-size:clamp(14.5px,1.16vw,16.5px);line-height:1.52;max-width:36ch}
.evo-col .orange{color:var(--orange)}
.evo-media{margin-top:auto;padding-top:clamp(26px,3vw,38px)}
.evo-media img{width:100%;height:clamp(140px,13vw,186px);object-fit:cover}

/* process diagram */
.proc{margin-top:auto;padding-top:clamp(26px,3vw,38px)}
.proc-track{display:flex;align-items:center;gap:0}
.proc-node{
  flex:1 1 0;aspect-ratio:1;max-width:92px;border-radius:50%;
  border:1px solid var(--line-dark);display:grid;place-items:center;text-align:center;
  font-family:var(--mono);font-weight:700;font-size:clamp(6.5px,.63vw,8.5px);letter-spacing:.05em;
  text-transform:uppercase;color:var(--cream-hi);padding:6px;line-height:1.25;
}
.proc-node.on{border-color:rgba(241,107,43,.75)}
.proc-link{flex:0 0 clamp(8px,1.1vw,16px);height:1px;background:var(--line-dark)}
.proc-loop{display:block;width:100%;height:30px;margin-top:6px;overflow:visible}

/* ============================================================
   ROW 4 — HUMANS POWER AI   (V1)
   ============================================================ */
.humanai{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
.humanai::before{content:"";position:absolute;inset:0 0 0 34%;z-index:0;
  background:url("/assets/human-bg.jpg") right center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 14%,#000 34%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 14%,#000 34%)}
.humanai::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(12,14,15,1) 0%,rgba(12,14,15,.99) 40%,
             rgba(12,14,15,.80) 52%,rgba(12,14,15,.42) 68%,rgba(12,14,15,.16) 86%,rgba(12,14,15,.12) 100%)}
.humanai .wrap{position:relative;z-index:2;padding:clamp(52px,5.6vw,82px) 0 clamp(48px,5.2vw,76px)}
.humanai h2{font-size:clamp(40px,6.85vw,99px);color:var(--cream-hi);max-width:14ch;
            text-shadow:0 2px 24px rgba(0,0,0,.34)}
.humanai hr{width:52px;height:1px;background:rgba(246,238,228,.5);border:0;margin:28px 0 22px}
.humanai p{margin:0;max-width:54ch;color:#DAD6CE;font-size:clamp(15px,1.52vw,21px);line-height:1.55}
.humanai p b{font-weight:700;color:var(--cream-hi)}

/* ============================================================
   ROW 5 — YOU'VE ALREADY HIRED AN AGENCY   (V1)
   ============================================================ */
.pain{background:var(--cream);color:var(--ink);padding:var(--pad) 0}
.pain .eyebrow{color:var(--orange)}
.pain-top{display:grid;grid-template-columns:1.26fr .74fr;gap:clamp(30px,4.2vw,70px);align-items:start}
.pain h2{font-size:clamp(38px,5.25vw,76px);max-width:13ch}
.pain h2 .muted{color:var(--grey);display:block}
.pain-note{border-left:1px solid var(--line-cream);padding-left:clamp(24px,2.6vw,38px);
           margin-top:clamp(10px,1.4vw,22px)}
.pain-note p{margin:0 0 16px;color:#4A4842;font-size:clamp(15px,1.3vw,18.5px);line-height:1.55;max-width:29ch}
.pain-note p:last-child{margin:0;font-weight:700;color:var(--ink)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,54px);
         margin-top:clamp(52px,6vw,88px)}
.pillar{border-left:1px solid var(--line-cream);padding-left:clamp(18px,1.9vw,28px)}
.pillar h3{font-size:clamp(25px,2.42vw,35px);margin-bottom:12px}
.pillar p{margin:0;color:#4A4842;font-size:clamp(15px,1.2vw,17px);line-height:1.45;max-width:21ch}

/* ============================================================
   ROW 6 — CAPABILITIES   (V1)
   ============================================================ */
.caps{background:var(--ink);padding:var(--pad) 0}
.caps-head{display:grid;grid-template-columns:1.48fr .68fr;gap:clamp(26px,3.4vw,54px);align-items:end}
.caps h2{font-size:clamp(33px,4.15vw,60px);color:var(--cream-hi);max-width:26ch}
.caps-aside p{margin:0 0 22px;color:var(--on-dark);font-size:clamp(14.5px,1.16vw,16.5px);line-height:1.55;max-width:38ch}
.cap-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.1vw,16px);
           margin-top:clamp(36px,4.2vw,58px)}
.cap-card{border:1px solid var(--line-dark);background:var(--ink-2);overflow:hidden;
          display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.cap-card:hover{border-color:rgba(241,107,43,.55);transform:translateY(-3px)}
.cap-card img{width:100%;height:clamp(126px,12.2vw,176px);object-fit:cover}
.cap-body{padding:12px 14px 14px;border-top:1px solid var(--line-dark)}
.cap-body h4{font-size:clamp(14px,1.13vw,17px);font-weight:700;letter-spacing:-.012em;
             color:var(--cream-hi);line-height:1.25}
.cap-body .ar{display:block;margin-top:9px;color:var(--orange);font-size:15px;line-height:1}

/* ============================================================
   ROW 7 — TESTIMONIAL   (V1)
   ============================================================ */
.testi{background:var(--cream);color:var(--ink);padding:clamp(40px,4.3vw,62px) 0}
.testi .wrap{display:grid;grid-template-columns:.88fr 1.46fr auto;
             gap:clamp(26px,3.6vw,60px);align-items:center}
.testi h2{font-size:clamp(32px,3.6vw,52px);max-width:12ch}
.testi-quote{border-left:1px solid var(--line-cream);padding-left:clamp(24px,2.8vw,42px)}
.testi-quote blockquote{margin:0;font-size:clamp(16px,1.44vw,21px);line-height:1.48;
                        color:var(--ink);max-width:42ch;font-weight:500}
.testi-quote cite{display:block;margin-top:18px;font-family:var(--mono);font-weight:500;
                  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
                  color:#6E6B63;font-style:normal}
.testi-nav{display:flex;gap:10px}
.testi-nav button{width:46px;height:46px;border-radius:50%;background:transparent;
                  border:1px solid var(--line-cream);color:var(--ink);cursor:pointer;
                  display:grid;place-items:center;font-size:15px;transition:all .18s}
.testi-nav button:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ============================================================
   ROW 8 — CTA   (V1)
   ============================================================ */
.cta{background:var(--ink);overflow:hidden}
.cta-grid{display:grid;grid-template-columns:51% 49%;align-items:center;gap:0}
.cta-img{height:clamp(200px,20.6vw,297px)}
.cta-img img{width:100%;height:100%;object-fit:cover}
.cta-copy{padding:clamp(38px,4.2vw,60px) var(--gut) clamp(38px,4.2vw,60px) clamp(30px,3.9vw,62px)}
.cta h2{font-size:clamp(29px,3.18vw,46px);color:var(--cream-hi);max-width:none}
.cta p{margin:20px 0 28px;color:var(--on-dark);font-size:clamp(15px,1.16vw,17px);max-width:52ch}

/* ============================================================
   FOOTER   (V1)
   ============================================================ */
.footer{background:var(--ink-3);border-top:1px solid var(--line-dark);
        padding:clamp(38px,4.2vw,56px) 0 clamp(34px,3.8vw,50px)}
.footer .wrap{display:grid;grid-template-columns:1.3fr 1fr auto;gap:clamp(28px,4vw,64px);align-items:start}
.foot-tag{margin:18px 0 0;font-family:var(--mono);font-weight:500;font-size:10.5px;
          letter-spacing:.14em;text-transform:uppercase;color:#8C8880}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px clamp(18px,2.4vw,40px);
          font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;
          text-transform:uppercase;color:#B4B0A8;border-left:1px solid var(--line-dark);
          padding-left:clamp(22px,2.6vw,42px)}
.foot-nav a:hover{color:var(--orange)}
.foot-right{text-align:right;border-left:1px solid var(--line-dark);padding-left:clamp(22px,2.6vw,42px)}
.foot-right p{margin:0;font-family:var(--mono);font-weight:500;font-size:10.5px;
              letter-spacing:.14em;text-transform:uppercase;color:#8C8880;line-height:1.7}
.socials{display:flex;gap:14px;justify-content:flex-end;margin-top:18px}
.socials a{color:#B4B0A8;transition:color .18s}
.socials a:hover{color:var(--orange)}
.socials svg{width:17px;height:17px;display:block;fill:currentColor}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .evo-grid{grid-template-columns:1fr 1fr}
  .evo-col:nth-child(3){grid-column:1 / -1;border-left:0;padding-left:0;
                        border-top:1px solid var(--line-dark);padding-top:34px;margin-top:34px}
  .cap-cards{grid-template-columns:repeat(3,1fr)}
  .testi .wrap{grid-template-columns:1fr 1.4fr}
  .testi-nav{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:860px){
  .hero-frame{padding:0}
  .hero{border-radius:0}
  .hero::after{background:linear-gradient(180deg,rgba(239,230,217,.97) 0%,rgba(239,230,217,.95) 58%,rgba(239,230,217,.55) 100%)}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:8px var(--gut) 54px}
  .topbar{grid-template-columns:auto auto;gap:14px;padding:20px var(--gut)}
  .nav{display:none}
  .topbar .btn--pill{border-color:var(--line-cream);color:var(--ink)}
  .logobar{border-radius:0}
  .pain-top{grid-template-columns:1fr;gap:30px}
  .pain-note{border-left:0;border-top:1px solid var(--line-cream);padding:24px 0 0;margin-top:6px}
  .pillars{grid-template-columns:1fr;gap:26px}
  .caps-head{grid-template-columns:1fr;align-items:start;gap:26px}
  .cap-cards{grid-template-columns:repeat(2,1fr)}
  .humanai::after{background:linear-gradient(180deg,rgba(12,14,15,.80) 0%,rgba(12,14,15,.90) 60%,rgba(12,14,15,.95) 100%)}
  .testi .wrap{grid-template-columns:1fr;gap:26px}
  .testi-quote{border-left:0;border-top:1px solid var(--line-cream);padding:24px 0 0}
  .cta-grid{grid-template-columns:1fr}
  .cta-copy{padding:44px var(--gut) 54px}
  .footer .wrap{grid-template-columns:1fr;gap:30px}
  .foot-nav{border-left:0;padding-left:0;border-top:1px solid var(--line-dark);padding-top:26px}
  .foot-right{text-align:left;border-left:0;padding-left:0}
  .socials{justify-content:flex-start}
}
@media (max-width:560px){
  .topbar{gap:10px;padding:16px var(--gut)}
  .topbar .brand{--wm:124px}
  .topbar .btn--pill{font-size:9px;letter-spacing:.05em;padding:9px 11px;gap:6px}
  .topbar .btn--pill .ar{font-size:11px}
  .evo-grid{grid-template-columns:1fr}
  .evo-col{border-left:0;padding:0}
  .evo-col + .evo-col{border-top:1px solid var(--line-dark);padding-top:32px;margin-top:32px}
  .evo-col:nth-child(3){margin-top:32px;padding-top:32px}
  .cap-cards{grid-template-columns:1fr}
}
@media (max-width:400px){
  .topbar{gap:8px}
  .topbar .brand{--wm:106px}
  .topbar .btn--pill{font-size:8.5px;letter-spacing:.03em;padding:8px 10px;gap:5px}
  .topbar .btn--pill .ar{font-size:10px}
}

/* ─────────── PART 2 · app/globals.css (line 22 to end) ─────────── */

/* Hero runs full-bleed at every width. The original inset the hero inside a
   14px ink frame with 44px rounded top corners and capped it at 1420px; the
   stylesheet already dropped all three below 860px, so this promotes that
   treatment to every breakpoint. */
.hero-frame {
  padding: 0;
}
.hero {
  max-width: none;
  border-radius: 0;
}
/* .logobar carries the same 1420px cap so it lines up with the hero above it.
   Lifting one without the other leaves the marquee inset inside a full-bleed
   hero, so both move together. */
.logobar {
  max-width: none;
}

/* Hero photo / cream blend, rewritten for full-bleed.

   The original sized the photo `auto 104%` — 104% of the hero's HEIGHT, so its
   width is fixed by height and does not grow with the hero. The cream wash on
   ::after used percentages of the hero's WIDTH. At the old 1420px cap those two
   happened to coincide and the photo's left edge sat under solid cream. Going
   full-bleed slid the edge out from under the mask and exposed it as a hard
   vertical line.

   Fix: ::before is now a box sized to the photo's own aspect ratio and anchored
   right, with the cream gradient painted on that same box. The mask and the
   photo are the same rectangle by construction, so the blend holds at any
   viewport width instead of only at the one it was tuned for.

   Scoped above 860px: below that the stylesheet re-purposes ::after as a
   vertical wash for the stacked mobile layout, which must keep working. */
@media (min-width: 861px) {
  .hero::before {
    inset: -2% 0 -2% auto;
    left: auto;
    width: auto;
    height: auto;
    aspect-ratio: 1324 / 1011;
    /* Floor so the photo keeps its share of the frame on large displays.
       Below ~2050px the aspect-derived width is larger and wins; above it this
       takes over and `cover` handles the extra crop. Without it a 2560px
       monitor would show an 872px photo against 1700px of empty cream. */
    min-width: 42%;
    background:
      linear-gradient(
        95deg,
        var(--cream) 0%,
        var(--cream) 18%,
        rgba(239, 230, 217, 0.92) 30%,
        rgba(239, 230, 217, 0.55) 48%,
        rgba(239, 230, 217, 0.12) 66%,
        rgba(239, 230, 217, 0) 80%
      ),
      url('/assets/hero-bg.jpg') center center / cover no-repeat;
  }
  .hero::after {
    background: none;
  }
}

/* Hero alignment — Option 3, "split lock" (Joe, 2026-09-24).

   The 44px gutter was never a gutter: it was the inset of a 1420px contained
   box. Once the hero went full-bleed the copy was left stranded against the
   viewport edge with dead cream between it and the photograph. This pushes the
   copy inward so it sits against the photo seam, and moves the topbar with it
   so logo, headline, lede and buttons all share one left edge.

   Scoped above 860px: the mobile breakpoint sets its own topbar and hero-copy
   padding for the stacked layout and must keep it. */
@media (min-width: 861px) {
  .hero-grid {
    grid-template-columns: 52% 48%;
  }
  .hero-copy {
    padding-left: clamp(28px, 9vw, 220px);
    padding-right: 0;
  }
  .topbar {
    padding-left: clamp(28px, 9vw, 220px);
  }
  .nav {
    padding-left: 30px;
  }
}

/* Logo marquee scaled up 25%. Every dimension moves together so the bar keeps
   its proportions: logo height, item padding (which sets the bar height and
   the gap between marks), the "and hundreds more" label, and the edge fades.
   Bar height goes 49px -> 61px at the top of the clamp. */
.mq-item img {
  height: clamp(30px, 2.75vw, 39px);
}
.mq-item {
  padding: 11px clamp(25px, 3.375vw, 53px);
}
.mq-more {
  font-size: 13px;
}
.logobar::before,
.logobar::after {
  width: 88px;
}

/* .topbar and .hero-grid were both z-index:2. Equal z-index means the later
   element in document order paints on top, so the hero h1 rendered over the
   navigation dropdown. That tie was invisible while the topbar had no child
   that overflowed it — the dropdown panel is the first one. */
.topbar {
  z-index: 20;
}

/* shadcn tokens mapped onto the Efferent palette, so the navigation
   menu reads as brand rather than as default shadcn neutral. */
:root {
  --radius: 0.5rem;
  --background: #0f1213;
  --foreground: #f6eee4;
  --popover: #f6eee4;
  --popover-foreground: #3a3833;
  --accent: #e3d7c6;
  --accent-foreground: #0f1213;
  --border: rgba(15, 18, 19, 0.2);
  --ring: #f16b2b;
}