/* ============================================================
   Ultra-Good · Marketing CSS
   Direction: F — Manifesto (locked 2026-05-02)
   Reference: design-explorations/f-manifesto.html
   ============================================================ */

:root{
  --bg: oklch(98% 0.003 90);
  --bg-2: oklch(94% 0.005 90);
  --ink: oklch(14% 0.005 70);
  --ink-soft: oklch(34% 0.005 70);
  --dim: oklch(46% 0.008 70);
  --rule: oklch(20% 0.005 70);
  --signal: oklch(58% 0.205 32);
  --signal-deep: oklch(48% 0.205 32);

  --font-display: "Big Shoulders Display", Impact, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  --maxw: 1320px;
  --pad-x: clamp(20px, 4vw, 40px);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);color:var(--ink);}
html{scroll-behavior:smooth;}
body.ug-marketing{
  font-family:var(--font-mono);
  font-size:1rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- Utility primitives ---------- */
.ug-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);}
.ug-label{
  font-family:var(--font-mono);font-weight:700;
  font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--dim);
}
.ug-label.signal{color:var(--signal);}
.ug-italic{font-style:italic;}
.ug-display{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  line-height:0.82;letter-spacing:-0.02em;
}
.ug-headline{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  line-height:0.9;letter-spacing:-0.02em;
}
.ug-kicker{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  line-height:1.1;letter-spacing:0.02em;
}
.ug-hi{color:var(--signal);}
b.ug-mark{
  background:var(--signal);color:var(--bg);padding:1px 6px;font-weight:500;
  font-family:var(--font-mono);
}

/* ---------- Topbar ---------- */
.ug-topbar{
  background:var(--bg);border-bottom:3px solid var(--ink);
  position:sticky;top:0;z-index:50;
}
.ug-topbar-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px var(--pad-x);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;
}
.ug-brand{
  font-family:var(--font-display);font-weight:900;
  font-size:1.6rem;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
.ug-brand b{color:var(--signal);}
.ug-status{
  justify-self:center;
  font-family:var(--font-mono);font-weight:700;
  font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--signal);display:inline-flex;align-items:center;gap:8px;
}
.ug-status .dot{
  display:inline-block;width:8px;height:8px;background:var(--signal);
  animation:ug-pulse 1.5s infinite;
}
@keyframes ug-pulse{0%,55%{opacity:1}60%,100%{opacity:0.2}}
.ug-nav{display:flex;gap:22px;align-items:center;}
.ug-nav-link{
  font-family:var(--font-mono);font-weight:700;
  font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;
  transition:color 120ms;
}
.ug-nav-link:hover{color:var(--ink);}
.ug-nav-link.active{color:var(--ink);}
.ug-nav-cta{
  background:var(--ink);color:var(--bg);
  padding:10px 16px;
  font-family:var(--font-display);font-weight:900;
  font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase;
  text-decoration:none;
  transition:background 180ms;
}
.ug-nav-cta:hover{background:var(--signal);}
.ug-nav-cta::after{content:" ▶";color:var(--signal);}
.ug-nav-cta:hover::after{color:var(--bg);}

/* ---------- CTAs ---------- */
.ug-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--bg);
  padding:22px 40px;
  font-family:var(--font-display);font-weight:900;
  font-size:1.3rem;letter-spacing:0.1em;text-transform:uppercase;
  text-decoration:none;border:0;
  transition:background 180ms;
}
.ug-cta::after{content:"▶";color:var(--signal);}
.ug-cta:hover{background:var(--signal);}
.ug-cta:hover::after{color:var(--bg);}
.ug-cta-ghost{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--ink);
  padding:20px 32px;border:3px solid var(--ink);
  font-family:var(--font-display);font-weight:900;
  font-size:1.1rem;letter-spacing:0.1em;text-transform:uppercase;
  text-decoration:none;
  transition:background 180ms,color 180ms;
}
.ug-cta-ghost:hover{background:var(--ink);color:var(--bg);}

/* ---------- Hero ---------- */
.ug-hero{
  padding:64px var(--pad-x) 64px;
  border-bottom:3px solid var(--ink);
  position:relative;
}
.ug-hero-inner{max-width:var(--maxw);margin:0 auto;}
.ug-hero h1{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(4rem,16vw,18rem);line-height:0.82;letter-spacing:-0.02em;
  margin:24px 0 28px;
}
.ug-hero h1 .ug-strike{position:relative;color:var(--dim);}
.ug-hero h1 .ug-strike::after{
  content:"";position:absolute;left:-2%;right:-2%;top:50%;height:0.16em;
  background:var(--signal);transform:translateY(-50%) rotate(-2deg);
}
.ug-kicker-band{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.15;letter-spacing:0.02em;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:14px 0;margin:32px 0 36px;color:var(--ink);
}
.ug-kicker-band .sep{color:var(--signal);margin:0 10px;}
.ug-hero-lede{
  max-width:62ch;font-size:1.05rem;line-height:1.6;margin-bottom:36px;
  color:var(--ink);
}
.ug-hero-lede b{
  background:var(--signal);color:var(--bg);padding:1px 6px;font-weight:500;
}
.ug-hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.ug-hero-cta-row .meta{
  font-family:var(--font-mono);font-weight:700;font-size:0.7rem;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--dim);
  padding-left:14px;
}

/* ---------- Marquee channel band ---------- */
.ug-channel-band{
  background:var(--ink);color:var(--bg);
  border-bottom:3px solid var(--ink);
  overflow:hidden;
}
.ug-channel-track{
  display:flex;gap:48px;padding:18px 0;white-space:nowrap;
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:1.4rem;letter-spacing:0.06em;
  animation:ug-scroll 38s linear infinite;
}
.ug-channel-track .item{display:inline-flex;align-items:center;gap:48px;}
.ug-channel-track .sep{color:var(--signal);}
@keyframes ug-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- Stat row ---------- */
.ug-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:3px solid var(--ink);
}
.ug-stat{padding:48px var(--pad-x);border-right:1px solid var(--ink);}
.ug-stat:last-child{border-right:0;}
.ug-stat .label{
  font-family:var(--font-mono);font-weight:700;
  font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--dim);margin-bottom:16px;
}
.ug-stat .num{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(3.5rem,12vw,10rem);line-height:0.82;letter-spacing:-0.025em;
  margin-bottom:12px;
}
.ug-stat.pick .num{color:var(--signal);}
.ug-stat .cap{
  font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--dim);font-weight:500;
}

/* ---------- Pull-quote band (inverted) ---------- */
.ug-pull{
  padding:96px var(--pad-x);
  background:var(--ink);color:var(--bg);
  border-bottom:3px solid var(--ink);
}
.ug-pull-inner{max-width:var(--maxw);margin:0 auto;}
.ug-pull h2{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,6.5vw,5.5rem);line-height:0.9;letter-spacing:-0.02em;
  max-width:24ch;
}
.ug-pull h2 .ug-hi{color:var(--signal);}
.ug-pull .attr{
  margin-top:32px;
  font-family:var(--font-mono);font-weight:700;
  font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--bg);opacity:0.55;
}
.ug-pull .attr b{color:var(--signal);opacity:1;font-weight:700;}

/* ---------- Generic section ---------- */
.ug-section{
  padding:96px var(--pad-x);border-bottom:3px solid var(--ink);
}
.ug-section-inner{max-width:var(--maxw);margin:0 auto;}
.ug-section .label{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:1.4rem;letter-spacing:0.08em;color:var(--signal);margin-bottom:24px;
}
.ug-section h2{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,6.5vw,5.2rem);line-height:0.92;letter-spacing:-0.02em;
  margin-bottom:36px;max-width:24ch;
}
.ug-section h2 .ug-hi{color:var(--signal);}
.ug-section .lede{
  max-width:62ch;font-size:1.05rem;line-height:1.6;margin-bottom:32px;
}
.ug-section .lede b{
  background:var(--signal);color:var(--bg);padding:1px 6px;font-weight:500;
}

/* ---------- Services grid ---------- */
.ug-services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:3px solid var(--ink);
  margin-top:32px;
}
.ug-svc{
  padding:32px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  transition:background 180ms;
}
.ug-svc:nth-child(3n){border-right:0;}
.ug-svc:hover{background:var(--bg-2);}
.ug-svc.featured{
  background:var(--ink);color:var(--bg);
}
.ug-svc.featured .svc-id,
.ug-svc.featured .svc-body{color:var(--bg);opacity:0.85;}
.ug-svc.featured:hover{background:var(--signal);color:var(--bg);}
.ug-svc.featured:hover .svc-body,
.ug-svc.featured:hover .svc-id{color:var(--bg);opacity:1;}
.ug-svc .svc-id{
  font-family:var(--font-mono);font-weight:700;
  font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--dim);
}
.ug-svc.featured .svc-id{color:var(--signal);opacity:1;}
.ug-svc .svc-title{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:0.95;letter-spacing:-0.01em;
}
.ug-svc .svc-title em{font-style:italic;color:var(--signal);}
.ug-svc.featured .svc-title em{color:var(--signal);}
.ug-svc .svc-body{font-size:0.92rem;line-height:1.55;color:var(--ink-soft);}
.ug-svc .svc-better{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--ink);
  font-family:var(--font-mono);font-weight:700;font-size:0.7rem;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--signal);
}
.ug-svc.featured .svc-better{border-top-color:var(--bg);color:var(--signal);}

/* ---------- Method (3 phases) ---------- */
.ug-phases{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:3px solid var(--ink);margin-top:32px;
}
.ug-phase{
  padding:32px;border-right:1px solid var(--ink);
  display:flex;flex-direction:column;gap:18px;
}
.ug-phase:last-child{border-right:0;}
.ug-phase .num{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(4rem,8vw,7rem);line-height:0.85;color:var(--signal);
  letter-spacing:-0.02em;
}
.ug-phase .title{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:1.6rem;line-height:0.95;letter-spacing:-0.01em;
}
.ug-phase .body{font-size:0.92rem;line-height:1.55;color:var(--ink-soft);}
.ug-phase .stamp{
  margin-top:auto;
  font-family:var(--font-mono);font-weight:700;font-size:0.7rem;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--dim);
}

/* ---------- Ledger ---------- */
.ug-ledger{
  border:3px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;
  margin-top:32px;
}
.ug-ledger>.head{
  padding:18px 24px;
  font-family:var(--font-display);font-weight:900;
  font-size:1.5rem;letter-spacing:0.06em;text-transform:uppercase;
}
.ug-ledger>.head.them{background:var(--bg-2);color:var(--dim);}
.ug-ledger>.head.us{background:var(--signal);color:var(--bg);}
.ug-ledger>.cell{
  padding:22px 24px;border-top:1px solid var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.ug-ledger>.cell.left{border-right:1px solid var(--ink);}
.ug-ledger .k{
  font-family:var(--font-mono);font-weight:700;font-size:0.85rem;
  text-transform:uppercase;letter-spacing:0.06em;color:var(--dim);
}
.ug-ledger .v{
  font-family:var(--font-display);font-weight:900;
  font-size:2rem;letter-spacing:-0.005em;
}
.ug-ledger .cell.them .v{color:var(--dim);text-decoration:line-through;}
.ug-ledger .cell.us .v.hi{color:var(--signal);}

/* ---------- Final CTA ---------- */
.ug-cta-final{
  padding:128px var(--pad-x);text-align:center;background:var(--bg);
}
.ug-cta-final h3{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,7rem);line-height:0.9;letter-spacing:-0.02em;
  margin-bottom:36px;
}
.ug-cta-final h3 .ug-hi{color:var(--signal);}
.ug-cta-final .sub{
  max-width:60ch;margin:0 auto 36px;font-size:1.05rem;color:var(--ink-soft);
}

/* ---------- Footer ---------- */
.ug-footer{
  background:var(--ink);color:var(--bg);
  padding:80px var(--pad-x) 32px;
  border-top:3px solid var(--ink);
}
.ug-footer-inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
}
.ug-footer-brand h3{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:2.2rem;letter-spacing:0.04em;margin-bottom:16px;
}
.ug-footer-brand h3 b{color:var(--signal);}
.ug-footer-brand p{
  max-width:36ch;font-size:0.9rem;color:var(--bg);opacity:0.75;
}
.ug-footer-col h4{
  font-family:var(--font-mono);font-weight:700;
  font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--signal);margin-bottom:16px;
}
.ug-footer-col a{
  display:block;color:var(--bg);opacity:0.75;text-decoration:none;
  font-size:0.88rem;padding:4px 0;
}
.ug-footer-col a:hover{opacity:1;color:var(--signal);}
.ug-footer-base{
  max-width:var(--maxw);margin:64px auto 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.15);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:var(--font-mono);font-weight:500;font-size:0.7rem;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--bg);opacity:0.65;
}
.ug-footer-base b{color:var(--signal);opacity:1;}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .ug-services-grid{grid-template-columns:repeat(2,1fr);}
  .ug-svc:nth-child(3n){border-right:1px solid var(--ink);}
  .ug-svc:nth-child(2n){border-right:0;}
  .ug-footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .ug-topbar-inner{grid-template-columns:auto auto;gap:14px;}
  .ug-status{display:none;}
  .ug-nav{grid-column:1 / -1;flex-wrap:wrap;gap:14px;justify-content:flex-start;}
  .ug-nav-link{font-size:0.68rem;}
  .ug-stats{grid-template-columns:1fr;}
  .ug-stat{border-right:0;border-bottom:1px solid var(--ink);}
  .ug-stat:last-child{border-bottom:0;}
  .ug-services-grid{grid-template-columns:1fr;}
  .ug-svc{border-right:0 !important;}
  .ug-phases{grid-template-columns:1fr;}
  .ug-phase{border-right:0;border-bottom:1px solid var(--ink);}
  .ug-phase:last-child{border-bottom:0;}
  .ug-ledger{grid-template-columns:1fr;}
  .ug-ledger>.cell.left{border-right:0;}
  .ug-footer-inner{grid-template-columns:1fr;}
  .ug-cta{font-size:1.05rem;padding:18px 28px;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .ug-channel-track{animation:none;transform:none;}
}