/* work.css: styles for .ekgm-work (page 15, /work/).
   Moved out of the page's own <style> on 2026-10-15 (ekg-marketing 0.7.0) and set in Readout.
   The shared parts (tokens, type, wrap, hero, buttons, cards, bands) are in ../pages.css;
   this file keeps only what this page alone has.
   Loaded only where the markup uses .ekgm-work (functions.php, ekgm_page_styles). Edit here, never in the page. */
.ekgm-work *{margin:0;padding:0;box-sizing:border-box}

.ekgm-work a{ color:inherit; }

/* ——— chrome mock (real chrome comes from the ekg-marketing theme — strip on conversion) ——— */
/* ——— hero ——— */
.ekgm-work .hero{ padding:84px 0 56px; }
.ekgm-work .eyebrow{ display:flex; align-items:center; gap:10px; font-size:14px; }
.ekgm-work .eyebrow::before{ content:""; width:26px; height:3px; background:var(--clay); display:inline-block; }
.ekgm-work .hero h1{ font-family:var(--head); font-weight:600; font-size:clamp(2.64rem,5.5vw,3.96rem); line-height:1.12; letter-spacing:-.005em; margin:18px 0 20px; max-width:820px; }
.ekgm-work .hero h1 em{ font-style:italic; color:var(--clay); }
.ekgm-work .hero .lede{ font-size:19px; color:var(--sub); max-width:680px; }
.ekgm-work .hero .lede strong{ color:var(--ink); }
/* ——— gallery ——— */
.ekgm-work .gallery{ padding:24px 0 90px; }
.ekgm-work .grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.ekgm-work .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(21,25,30,.04), 0 10px 28px -18px rgba(21,25,30,.18);transition:transform .18s ease, box-shadow .18s ease}
.ekgm-work .card:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(21,25,30,.05), 0 18px 40px -18px rgba(182,41,53,.22); }
.ekgm-work .shot{ position:relative; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); background:var(--section); display:flex; flex-direction:column; }
.ekgm-work .bar{ flex:none; height:30px; background:#E7E1D5; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px; padding:0 13px; font-family:var(--mono); font-size:12px; color:var(--sub); letter-spacing:.02em; font-weight:600; }
.ekgm-work .bar .dots{ display:flex; gap:5px; flex:none; }
.ekgm-work .bar .dots i{ width:8px; height:8px; border-radius:50%; background:#CFC8B9; display:block; }
.ekgm-work .bar span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ekgm-work .viewport{ flex:1; overflow:hidden; position:relative; }
.ekgm-work .shot img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.ekgm-work .badge{ position:absolute; z-index:2; top:42px; left:14px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; background:rgba(255,254,250,.94); border:1px solid var(--line); border-radius:999px; padding:5px 12px 5px 10px; display:flex; align-items:center; gap:7px; font-weight:600; }
.ekgm-work .badge i{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.ekgm-work .badge.live i{ background:var(--pine); } .ekgm-work .badge.build i{ background:var(--gold); }
.ekgm-work .card-body{ padding:24px 26px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.ekgm-work .meta{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; color:var(--sub); text-transform:uppercase; font-weight:600; }
.ekgm-work .card h2{ font-family:var(--head); font-weight:600; font-size:29px; letter-spacing:-.005em; line-height:1.2; }
.ekgm-work .card p{ font-size:15.5px; color:var(--sub); flex:1; }
.ekgm-work .card .visit{ font-size:15px; font-weight:600; text-decoration:none; color:var(--clay); display:inline-flex; align-items:center; gap:6px; margin-top:4px; }
.ekgm-work .card .visit:hover{ text-decoration:underline; }
.ekgm-work .card .links{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.ekgm-work .card .story{ font-size:15px; font-weight:600; text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; gap:6px; margin-top:4px; }
.ekgm-work .card .story:hover{ text-decoration:underline; }
.ekgm-work .card .soon{ font-family:var(--mono); font-size:13.5px; color:var(--ochre-text); margin-top:4px; font-weight:600; }
.ekgm-work .card.feature{ grid-column:1/-1; flex-direction:row; min-height:380px; }
.ekgm-work .card.feature .shot{ flex:1.4; aspect-ratio:auto; border-bottom:none; border-right:1px solid var(--line); }
.ekgm-work .card.feature .card-body{ flex:1; justify-content:center; padding:38px 42px; background:var(--section); }
.ekgm-work .card.feature h2{ font-size:35px; }
.ekgm-work .card.feature p{ flex:none; }
/* ——— the way we build strip ——— */
.ekgm-work .way{ background:var(--section); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:64px 0; }
.ekgm-work .way .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.ekgm-work .way h3{ font-family:var(--head); font-weight:600; font-size:31px; letter-spacing:-.005em; margin:14px 0 12px; }
.ekgm-work .way p{ color:var(--sub); font-size:16px; }
.ekgm-work .way ul{ list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.ekgm-work .way li{ display:flex; gap:12px; font-size:15.5px; color:var(--ink); }
.ekgm-work .way li i{ flex:none; width:9px; height:9px; border-radius:50%; margin-top:8px; }
.ekgm-work .way li:nth-child(1) i{ background:var(--clay); } .ekgm-work .way li:nth-child(2) i{ background:var(--pine); }
.ekgm-work .way li:nth-child(3) i{ background:var(--indigo); } .ekgm-work .way li:nth-child(4) i{ background:var(--teal); }
/* ——— CTA band ——— */
.ekgm-work .cta{ background:var(--navy); color:var(--wp--preset--color--bg); padding:72px 0; }
.ekgm-work .cta .wrap{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.ekgm-work .cta h3{ font-family:var(--head); font-weight:600; font-size:clamp(1.76rem,3.3vw,2.42rem); letter-spacing:-.005em; max-width:640px; }
.ekgm-work .cta h3 em{ font-style:italic; color:#E8B4B9; }
.ekgm-work .cta a.btn{ background:var(--clay); color:#fff; text-decoration:none; font-weight:600; font-size:16px; padding:15px 30px; border-radius:8px; white-space:nowrap; }
.ekgm-work .cta a.btn:hover{ background:#9c2330; }
/* ——— footer mock ——— */
@media (max-width:880px){
  .ekgm-work .grid{ grid-template-columns:1fr; }
  .ekgm-work .way .wrap{ grid-template-columns:1fr; }
  .ekgm-work .hero{ padding:58px 0 40px; }
  .ekgm-work .card.feature{ flex-direction:column; min-height:0; }
  .ekgm-work .card.feature .shot{ aspect-ratio:16/10; border-right:none; border-bottom:1px solid var(--line); }
  .ekgm-work .card.feature .card-body{ padding:24px 26px 26px; }
  .ekgm-work .card.feature h2{ font-size:29px; }
}

/* The shared card is padded; Work's cards are image-led and run their screenshot edge to edge. */
.ekgm-work .card{ padding:0; }

/* ---- Moved out of the page body's inline styles (October 2026) ---- */
.ekgm-work .featured{ padding:56px 0; border-top:1px solid var(--line); }
.ekgm-work .featRow{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; margin-top:16px; }
.ekgm-work .featText{ max-width:640px; }
.ekgm-work .featured h2{ font-size:29px; letter-spacing:-.005em; margin-bottom:8px; }   /* was 26px, -.01em */
.ekgm-work .featured p{ color:var(--sub); font-size:15.5px; margin:0; }
.ekgm-work .featBtn{ background:var(--clay); color:var(--on-dark); text-decoration:none; font-weight:600; font-size:16px; padding:14px 26px; border-radius:8px; white-space:nowrap; }