/* ============================================================ COMPONENTS */

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-display);font-weight:500;font-size:var(--step--1);
  color:var(--obsidian);background:var(--gold);padding:.85rem 1.5rem;border-radius:9px;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .3s,background .3s;box-shadow:0 10px 26px -12px var(--gold-glow)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease-out)}
.btn:hover{transform:translateY(-2px);background:var(--gold-bright);box-shadow:0 16px 34px -14px var(--gold-glow)}
.btn:hover::after{transform:translateX(120%)}
.btn__arrow{transition:transform .25s var(--ease)}
.btn:hover .btn__arrow{transform:translate(3px,-3px)}
.btn--ghost{background:transparent;color:var(--mist);border:1px solid var(--line-2);box-shadow:none}
.btn--ghost:hover{background:rgba(211,163,74,.08);border-color:var(--gold);color:var(--gold-bright)}
.btn--lg{padding:1.05rem 2rem;font-size:var(--step-0)}
.btn--sm{padding:.5rem 1rem}

/* ---------- CHIP / TAG ---------- */
.chip{font-family:var(--f-mono);font-size:var(--step--1);color:var(--fog);border:1px solid var(--line-2);padding:.35rem .7rem;border-radius:40px;background:rgba(20,24,30,.5)}
.status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:var(--step--1);color:var(--signal)}
.status__dot{width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 var(--signal-glow);animation:pulse 2.4s infinite}

/* ---------- METRIC ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.metric{background:linear-gradient(160deg,var(--panel),var(--obsidian-2));border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.4rem;position:relative;overflow:hidden}
.metric::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.metric.in::before{transform:scaleX(1)}
.metric__num{font-family:var(--f-display);font-size:var(--step-metric);font-weight:700;color:var(--mist);line-height:1;letter-spacing:-.03em;display:flex;align-items:baseline}
.metric__suf{color:var(--gold);font-size:.55em;margin-left:.08em}
.metric__label{color:var(--fog);font-size:var(--step--1);margin-top:.6rem}

/* ---------- WORK CARDS ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.wk{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.wk:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--shadow)}
.wk__media{aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--obsidian-2)}
.wk__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.wk:hover .wk__media img{transform:scale(1.04)}
.wk__live{position:absolute;top:.8rem;right:.8rem;z-index:2;font-family:var(--f-mono);font-size:.7rem;color:var(--signal);background:rgba(11,13,16,.8);border:1px solid var(--signal-dim);padding:.25rem .6rem;border-radius:30px;backdrop-filter:blur(6px)}
.wk__body{padding:1.5rem}
.wk__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.5rem}
.wk__name{font-family:var(--f-display);font-size:var(--step-1);color:var(--mist);font-weight:600}
.wk__tag{font-family:var(--f-mono);font-size:.72rem;color:var(--gold)}
.wk__desc{color:var(--fog);font-size:var(--step--1);margin-bottom:1rem}
.wk__metrics{display:flex;gap:1.5rem;border-top:1px solid var(--line);padding-top:1rem}
.wk__metric b{display:block;font-family:var(--f-display);color:var(--gold-bright);font-size:var(--step-1);font-weight:700;line-height:1}
.wk__metric span{font-size:.72rem;color:var(--slate)}
.wk__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;color:var(--mist);font-family:var(--f-mono);font-size:var(--step--1)}
.wk:hover .wk__go{color:var(--gold-bright)}

/* ---------- LOGO STRIP ---------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2.4rem 3rem;padding:2rem 0}
.logos__item{font-family:var(--f-display);font-weight:600;font-size:1.1rem;color:var(--slate);letter-spacing:-.02em;opacity:.8;transition:color .3s,opacity .3s}
.logos__item:hover{color:var(--fog);opacity:1}
.logos__note{text-align:center;color:var(--slate);font-family:var(--f-mono);font-size:.72rem;margin-top:.6rem}

/* ---------- TESTIMONIALS ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.quote{background:linear-gradient(160deg,var(--panel),var(--obsidian-2));border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem}
.quote__mark{font-family:var(--f-display);font-size:2.6rem;line-height:.5;color:var(--gold-deep);height:1rem;display:block}
.quote__text{color:var(--mist);font-size:var(--step-0);margin:1rem 0 1.4rem;line-height:1.55}
.quote__who{display:flex;align-items:center;gap:.8rem}
.quote__av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--gold-deep),var(--panel-2));display:grid;place-items:center;font-family:var(--f-display);font-weight:600;color:var(--gold-bright);font-size:.85rem;border:1px solid var(--line-2)}
.quote__name{color:var(--mist);font-size:var(--step--1);font-weight:600}
.quote__role{color:var(--slate);font-size:.72rem;font-family:var(--f-mono)}

/* ---------- CTA BAND ---------- */
.cta{position:relative;border-radius:calc(var(--radius) + 6px);overflow:hidden;border:1px solid var(--gold-deep);
  background:linear-gradient(150deg,#1c1a14,var(--panel));padding:clamp(2.4rem,5vw,4.2rem);text-align:center}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 50% 0%,rgba(211,163,74,.14),transparent 60%);pointer-events:none}
.cta__title{font-size:var(--step-3);color:var(--mist);position:relative}
.cta__sub{color:var(--fog);font-size:var(--step-1);font-weight:300;margin:1rem auto 1.8rem;max-width:52ch;position:relative}
.cta__row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;position:relative}

/* ---------- STICKY CTA (mobile) ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:.7rem var(--gutter);
  background:rgba(11,13,16,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  display:none;transform:translateY(100%);transition:transform .4s var(--ease)}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .btn{width:100%;justify-content:center}

/* ---------- NOTE (placeholder flags) ---------- */
.note{background:rgba(79,184,159,.06);border:1px dashed var(--signal-dim);border-radius:var(--radius-sm);
  padding:.7rem 1rem;color:var(--signal);font-family:var(--f-mono);font-size:.72rem;margin-top:1rem}