/* ═══════════════════════════════════════════════════
     KEVIN CROMLEY — PORTFOLIO 2026 · work-led rebuild
     ink black · emerald · cream
     ═══════════════════════════════════════════════════ */
  :root{
    --ink:#050807; --coal:#0b100e; --panel:#0e1512;
    --emerald:#12e087; --emerald-deep:#0c6b44;
    --cream:#f2eddf; --cream-60:rgba(242,237,223,.6); --cream-30:rgba(242,237,223,.3);
    --line:rgba(242,237,223,.12); --line-em:rgba(18,224,135,.16);
    --display:"Anton","Arial Narrow",sans-serif;
    --body:"Archivo","Helvetica Neue",sans-serif;
    --mono:"IBM Plex Mono","SF Mono",monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{background:var(--ink);scroll-behavior:smooth}
  body{background:var(--ink);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
  .mono{font-family:var(--mono)}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  ::selection{background:var(--emerald);color:var(--ink)}
  :focus-visible{outline:2px solid var(--emerald);outline-offset:3px}

  /* ── Header ── */
  .site-head{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,4vw,56px);mix-blend-mode:difference}
  .head-mark{display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.2em;color:var(--cream)}
  .head-mark img{display:block;height:24px;width:24px;border-radius:6px}
  .head-nav{display:flex;gap:clamp(16px,3vw,40px)}
  .head-nav a{font-size:11px;letter-spacing:.22em;color:var(--cream);position:relative;padding-bottom:2px}
  .head-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--cream);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.65,0,.35,1)}
  .head-nav a:hover::after{transform:scaleX(1);transform-origin:left}

  /* ── Hero (typographic, work ribbon) ── */
  .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(120px,20vh,200px) clamp(20px,4vw,56px) 0;overflow:hidden}
  .hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 15% 30%,rgba(18,224,135,.12),transparent 60%),radial-gradient(ellipse 50% 40% at 90% 10%,rgba(18,224,135,.06),transparent 60%)}
  .hero-inner{position:relative;max-width:1400px;margin:0 auto;width:100%;flex:1;display:flex;flex-direction:column;justify-content:center}
  .hero-eyebrow{font-size:11px;letter-spacing:.32em;color:var(--emerald);margin-bottom:clamp(14px,3vh,26px)}
  .hero-name{font-family:var(--display);font-weight:400;line-height:.86;font-size:clamp(58px,13vw,200px);text-transform:uppercase}
  .name-line{display:block;overflow:hidden}
  .name-line span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
  .name-line.accent span{color:var(--emerald)}
  .ready .name-line span{transform:translateY(0)}
  .ready .name-line.accent span{transition-delay:.08s}
  .hero-sub{margin-top:clamp(20px,4vh,36px);font-size:clamp(15px,1.7vw,21px);color:var(--cream-60);max-width:30em}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:clamp(26px,4vh,40px)}
  .scroll-cue{position:absolute;bottom:150px;right:clamp(20px,4vw,56px);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.3em;color:var(--cream-30)}
  .cue-line{width:1px;height:44px;background:linear-gradient(to bottom,var(--emerald),transparent);animation:cueDrop 2s cubic-bezier(.65,0,.35,1) infinite}
  @keyframes cueDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

  /* work ribbon marquee at base of hero */
  .ribbon{position:relative;margin-top:clamp(40px,7vh,80px);border-top:1px solid var(--line-em);border-bottom:1px solid var(--line-em);padding:22px 0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
  .ribbon-track{display:flex;gap:20px;width:max-content;animation:slide 42s linear infinite}
  .hero:hover .ribbon-track{animation-play-state:paused}
  .ribbon-item{position:relative;width:clamp(220px,26vw,340px);aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);flex:0 0 auto;background:var(--coal)}
  .ribbon-item img{width:100%;height:100%;object-fit:cover;opacity:.62;filter:saturate(.85);transition:opacity .4s,filter .4s,transform .6s cubic-bezier(.22,1,.36,1)}
  .ribbon-item:hover img{opacity:1;filter:none;transform:scale(1.04)}
  .ribbon-item span{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--cream);text-shadow:0 1px 6px rgba(0,0,0,.8)}
  @keyframes slide{to{transform:translateX(-50%)}}

  /* ── Buttons ── */
  .btn{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:16px 34px;border:1px solid var(--emerald);display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1),background .35s,color .35s,box-shadow .35s}
  .btn-solid{background:var(--emerald);color:var(--ink)}
  .btn-solid:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(18,224,135,.35)}
  .btn-ghost{color:var(--cream);border-color:rgba(242,237,223,.3)}
  .btn-ghost:hover{transform:translateY(-4px);border-color:var(--emerald);color:var(--emerald)}

  /* ── Section head ── */
  .section-eyebrow{font-size:11px;letter-spacing:.32em;color:var(--emerald)}
  .wrap{max-width:1400px;margin:0 auto;padding:clamp(80px,13vh,150px) clamp(20px,4vw,56px)}

  /* ── Selected work (the centerpiece) ── */
  .work-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:clamp(40px,7vh,72px)}
  .work-heading{font-family:var(--display);font-weight:400;font-size:clamp(48px,8vw,128px);line-height:.9;text-transform:uppercase;margin-top:14px}
  .work-heading .accent{color:var(--emerald)}
  .work-lead{max-width:26em;color:var(--cream-60);font-size:clamp(14px,1.4vw,17px)}
  .work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,32px)}
  .pcard{position:relative;display:block;background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .5s}
  .pcard:hover{transform:translateY(-8px);border-color:rgba(18,224,135,.45)}
  .pcard-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--coal)}
  .pcard-media img{width:100%;height:100%;object-fit:cover;object-position:top;opacity:.9;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s}
  .pcard:hover .pcard-media img{transform:scale(1.05);opacity:1}
  .pcard-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,8,7,.55),transparent 55%)}
  .pcard-body{padding:clamp(22px,2.4vw,34px)}
  .pcard-idx{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--emerald)}
  .pcard-title{font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,46px);text-transform:uppercase;line-height:1;margin:12px 0 12px}
  .pcard-pitch{color:var(--cream-60);font-size:15px;max-width:32em}
  .pcard-url{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--cream-60);transition:color .3s}
  .pcard-arrow{display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .pcard:hover .pcard-url{color:var(--emerald)}
  .pcard:hover .pcard-arrow{transform:translateX(6px)}
  .pcard.wide{grid-column:1 / -1}
  .pcard.wide{display:grid;grid-template-columns:1.2fr 1fr}
  .pcard.wide .pcard-media{aspect-ratio:auto;height:100%;min-height:280px}
  .pcard.wide .pcard-body{display:flex;flex-direction:column;justify-content:center}

  /* index rows for remaining work */
  .work-index{margin-top:clamp(40px,7vh,72px)}
  .index-label{font-family:var(--mono);font-size:11px;letter-spacing:.32em;color:var(--cream-30);margin-bottom:18px}
  .index-row{display:grid;grid-template-columns:64px 1.1fr 1.6fr auto;align-items:baseline;gap:clamp(12px,2vw,32px);padding:22px 10px;border-top:1px solid var(--line);transition:background .35s,padding-left .45s cubic-bezier(.22,1,.36,1)}
  .index-row:last-child{border-bottom:1px solid var(--line)}
  .row-idx{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--emerald)}
  .row-title{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,34px);text-transform:uppercase;line-height:1;color:var(--cream);transition:color .3s}
  .row-note{font-size:14px;color:var(--cream-60)}
  .row-url{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--cream-30);justify-self:end;transition:color .3s}
  .index-row:hover{background:rgba(18,224,135,.06);padding-left:22px}
  .index-row:hover .row-title,.index-row:hover .row-url{color:var(--emerald)}
  .index-row:hover .pcard-arrow{transform:translateX(6px)}

  /* ── Services / pillars (static, no video) ── */
  .services{background:var(--coal);border-top:1px solid var(--line-em)}
  .pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);margin-top:clamp(36px,6vh,64px)}
  .pillar{border-top:2px solid var(--emerald);padding-top:24px}
  .pillar-idx{font-family:var(--mono);font-size:13px;letter-spacing:.3em;color:var(--emerald);display:block;margin-bottom:16px}
  .pillar-title{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.4vw,52px);line-height:.95;text-transform:uppercase;color:var(--cream)}
  .pillar-body{margin-top:16px;color:var(--cream-60);font-size:15px}

  /* ── Credentials ── */
  .creds{background:var(--ink);border-top:1px solid var(--line-em)}
  .creds-grid{margin-top:28px;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,48px)}
  .cred{border-left:1px solid rgba(18,224,135,.3);padding-left:clamp(16px,1.8vw,28px)}
  .cred-idx{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--emerald)}
  .cred-title{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,38px);text-transform:uppercase;line-height:1.02;margin:10px 0 8px;color:var(--cream)}
  .cred-issuer{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--cream-60)}
  .cred-img{margin-top:18px;border:1px solid var(--line);overflow:hidden}
  .cred-img img{width:100%;height:auto;opacity:.82;filter:saturate(.85);transition:opacity .4s,filter .4s,transform .6s cubic-bezier(.22,1,.36,1)}
  .cred:hover .cred-img img{opacity:1;filter:none;transform:scale(1.02)}

  /* ── Finale ── */
  .finale{position:relative;min-height:90vh;min-height:90svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(90px,14vh,160px) clamp(20px,4vw,56px) 0;background:radial-gradient(ellipse 70% 50% at 50% 110%,rgba(18,224,135,.12),transparent 70%),var(--ink)}
  .finale-name{font-family:var(--display);font-weight:400;line-height:.88;font-size:clamp(58px,13.5vw,210px);text-transform:uppercase;display:flex;flex-direction:column;align-items:center}
  .finale-name .accent{color:var(--emerald)}
  .finale .section-eyebrow{margin-bottom:clamp(16px,3vh,30px)}
  .finale-actions{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:clamp(36px,6vh,64px)}
  .site-foot{width:100%;max-width:1400px;margin-top:auto;padding:clamp(48px,9vh,90px) 0 30px;display:flex;gap:clamp(18px,3vw,44px);justify-content:center;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--cream-30)}
  .site-foot a{color:var(--cream-60);transition:color .3s}
  .site-foot a:hover{color:var(--emerald)}

  /* ── WhatsApp ── */
  .wa-fab{position:fixed;right:26px;bottom:26px;width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;z-index:85;box-shadow:0 10px 30px rgba(37,211,102,.35);transition:box-shadow .3s,transform .3s}
  .wa-fab:hover{box-shadow:0 14px 40px rgba(37,211,102,.55);transform:translateY(-3px)}
  .wa-fab svg{width:30px;height:30px;fill:var(--ink)}

  /* ── grain ── */
  @media(max-width:900px){
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .work-grid{grid-template-columns:1fr}
    .pcard.wide{grid-template-columns:1fr}
    .pcard.wide .pcard-media{min-height:200px}
    .pillars-grid{grid-template-columns:1fr}
    .index-row{grid-template-columns:46px 1fr auto}
    .row-note{display:none}
    .creds-grid{grid-template-columns:1fr}
    .scroll-cue{display:none}
  }
  @media(max-width:560px){.head-nav a:not(:last-child){display:none}}
  @media(prefers-reduced-motion:reduce){.grain,.cue-line,.ribbon-track{animation:none}.name-line span{transform:none}.reveal{opacity:1;transform:none}}