/* Editorial rows (/work/ pattern), shared by /work/ and /apps/. Extracted from work/index.php 2026-09-24. */
/* /work/ portfolio rows. Page-local (used on /work/ only). */
.wk-section{padding:clamp(28px,4vw,56px) clamp(16px,4vw,56px) clamp(40px,6vw,80px);background:#fff}
.wk-head{max-width:1440px;margin:0 auto clamp(40px,5.5vw,80px);display:grid;gap:16px}
.wk-crumb{display:flex;gap:10px;font-size:.85rem;color:#64748B}.wk-crumb a{color:#64748B;text-decoration:none}.wk-crumb a:hover{color:var(--brand-red,#DC2626)}
.wk-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-red,#DC2626);margin:0}
.wk-title{font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(2.2rem,5.2vw,4.6rem);line-height:1.02;letter-spacing:-.04em;color:#0F172A;max-width:15ch;margin:0}
.wk-intro{font-size:clamp(1.02rem,.95rem + .35vw,1.25rem);line-height:1.6;color:#475569;max-width:46ch;margin:0}
@media(min-width:1024px){.wk-head{grid-template-columns:1.25fr 1fr;align-items:end}.wk-crumb{grid-column:1/-1}.wk-eyebrow{grid-column:1/-1}.wk-intro{justify-self:end}
}

.wk-list{max-width:1440px;margin:0 auto;display:grid;gap:clamp(72px,10vw,150px)}
.wk-row{display:grid;gap:clamp(24px,3.5vw,40px);align-items:center}
@media(min-width:1024px){
  .wk-row{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(48px,5vw,96px)}
  .wk-row.is-flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .wk-row.is-flip .wk-media{order:2}

}
.wk-media{position:relative;display:block;border-radius:clamp(18px,2vw,30px);overflow:hidden;aspect-ratio:4/3;background:#F1F5F9;
  isolation:isolate;cursor:none;box-shadow:0 40px 80px -60px rgba(15,23,42,.45)}
@media(hover:none){.wk-media{cursor:pointer}
}
.wk-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.wk-media:hover img,.wk-media:focus-visible img{transform:scale(1.035)}
.wk-media:focus-visible{outline:3px solid var(--brand-red,#DC2626);outline-offset:4px}
.wk-cursor{position:absolute;left:0;top:0;z-index:2;width:0;height:0;pointer-events:none;transform:translate3d(var(--x,-200px),var(--y,-200px),0)}
.wk-cursor>span{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#0F172A;font:600 .92rem/1 'Outfit',sans-serif;letter-spacing:-.01em;box-shadow:0 18px 40px -16px rgba(15,23,42,.45);
  opacity:0;transform:scale(.35);transition:opacity .22s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.wk-media.is-hover .wk-cursor>span{opacity:1;transform:scale(1)}
@media(hover:none){.wk-cursor{display:none}
}

.wk-body{max-width:34rem}
.wk-row.is-flip .wk-body{justify-self:start}
@media(min-width:1024px){.wk-row:not(.is-flip) .wk-body{justify-self:end}
}
.wk-name{font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(2rem,3.6vw,3.35rem);line-height:1.02;letter-spacing:-.035em;color:#0F172A;margin:0}
.wk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 0;font-size:.95rem;color:#64748B}
.wk-meta i{width:4px;height:4px;border-radius:50%;background:#CBD5E1}
.wk-lede{margin:22px 0 0;font-size:clamp(1rem,.96rem + .25vw,1.13rem);line-height:1.7;color:#334155}
.wk-stats{display:flex;flex-wrap:wrap;gap:22px 38px;margin:30px 0 0;padding:26px 0 0;border-top:1px solid #E2E8F0}
.wk-stats div{min-width:0}
.wk-stats dt{font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(1.7rem,2.4vw,2.35rem);line-height:1;letter-spacing:-.035em;color:#0F172A;white-space:nowrap}
.wk-stats dd{margin:8px 0 0;font-size:.86rem;line-height:1.45;color:#64748B;max-width:17ch}
.wk-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:28px 0 0;padding:0}
.wk-tags li{font-size:.8rem;font-weight:500;color:#334155;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:999px;padding:7px 13px}
.wk-cta{display:inline-flex;align-items:center;gap:10px;margin-top:32px;font-weight:600;font-size:1rem;color:#0F172A;text-decoration:none;
  padding-bottom:6px;background:linear-gradient(var(--brand-red,#DC2626),var(--brand-red,#DC2626)) 0 100%/0 2px no-repeat;transition:background-size .45s cubic-bezier(.16,1,.3,1),color .2s}
.wk-cta span{color:var(--brand-red,#DC2626);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.wk-cta:hover,.wk-cta:focus-visible{background-size:100% 2px;color:var(--brand-red,#DC2626)}
.wk-cta:hover span{transform:translateX(4px)}

.wk-apps{border-top:1px solid #E2E8F0;background:#FCFBFA}
.wk-ctas{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:32px}
.wk-ctas .wk-cta{margin-top:0}
.wk-cta--quiet{color:#64748B}
/* Editorial bands below the rows: same type scale and grid as .wk-section */
.wk-band{padding:clamp(64px,8vw,120px) clamp(16px,4vw,56px);border-top:1px solid #E2E8F0;background:#fff}
.wk-split{max-width:1440px;margin:0 auto;display:grid;gap:18px 48px}
@media(min-width:1024px){.wk-split{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
}
.wk-label{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-red,#DC2626);padding-top:.6em}
.wk-band-title{font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(2rem,1.4rem + 2.6vw,3.6rem);line-height:1.04;letter-spacing:-.04em;color:#0F172A;margin:0 0 22px;max-width:20ch}
.wk-band-lede{font-size:clamp(1.02rem,.96rem + .3vw,1.2rem);line-height:1.7;color:#334155;margin:0;max-width:62ch}
.wk-points{display:grid;gap:0 40px;margin:36px 0 0}
@media(min-width:760px){.wk-points{grid-template-columns:1fr 1fr}
}
.wk-points div{padding:22px 0;border-top:1px solid #E2E8F0}
.wk-points dt{font-weight:600;font-size:1.05rem;color:#0F172A}
.wk-points dd{margin:8px 0 0;color:#475569;line-height:1.65}
.wk-quote-band{background:#FCFBFA}
.wk-quote{max-width:1440px;margin:0 auto}
.wk-quote blockquote{margin:0;font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(1.6rem,1.1rem + 2.2vw,3.1rem);line-height:1.2;letter-spacing:-.03em;color:#0F172A;max-width:32ch}
.wk-quote figcaption{margin-top:26px;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#64748B}
.wk-cert{display:grid;gap:36px;align-items:start}
@media(min-width:900px){.wk-cert{grid-template-columns:minmax(0,1fr) 240px}
}
.wk-badge{display:grid;justify-items:center;gap:12px;padding:22px;border:1px solid #E2E8F0;border-radius:22px;text-decoration:none;background:#fff}
.wk-badge img{width:170px;height:auto}
.wk-badge span{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#64748B;text-align:center}
.wk-end{background:#FCFBFA}
.wk-end-title{font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(2.6rem,1.6rem + 4.6vw,6rem);line-height:.98;letter-spacing:-.05em;color:#0F172A;margin:0 0 22px}
.wk-end-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:34px}
.wk-end-actions .wk-cta{margin-top:0}
.wk-btn{display:inline-flex;padding:16px 30px;border-radius:999px;background:var(--brand-red,#DC2626);color:#fff;font-weight:600;text-decoration:none}
.wk-btn:hover{filter:brightness(.92)}
.wk-end-note{margin:26px 0 0;font-size:.95rem;color:#64748B;max-width:56ch}
/* Scroll reveal: image wipes up, text rises. Content is visible by default; JS opts rows in. */
.wk-js .wk-row .wk-media{clip-path:inset(12% 0 0 0 round clamp(18px,2vw,30px));transition:clip-path 1.2s cubic-bezier(.16,1,.3,1)}
.wk-js .wk-row .wk-body>*{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.wk-js .wk-row.in .wk-media{clip-path:inset(0 0 0 0 round clamp(18px,2vw,30px))}
.wk-js .wk-row.in .wk-body>*{opacity:1;transform:none}
.wk-js .wk-row.in .wk-body>*:nth-child(2){transition-delay:.06s}.wk-js .wk-row.in .wk-body>*:nth-child(3){transition-delay:.12s}
.wk-js .wk-row.in .wk-body>*:nth-child(4){transition-delay:.18s}.wk-js .wk-row.in .wk-body>*:nth-child(5){transition-delay:.24s}
.wk-js .wk-row.in .wk-body>*:nth-child(6){transition-delay:.3s}.wk-js .wk-row.in .wk-body>*:nth-child(7){transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .wk-js .wk-row .wk-media,.wk-js .wk-row .wk-body>*{clip-path:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .wk-media img,.wk-cursor{transition:none}

}

/* MODERN WORK PAGE CSS */
.modern-work {
    --brand-red: #DC2626;
    --brand-red-light: #FFF2F2;
    --text-main: #0F172A;
    --text-muted: #475569;
    --bg-main: #FFFFFF;
    --bg-alt: #F8FAFC;
    --border-color: #E2E8F0;
    --radius-lg: clamp(16px, 2vw, 24px);
    --radius-md: clamp(12px, 1.5vw, 16px);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.modern-work { font-family: 'Inter', sans-serif; }
.modern-work h1, .modern-work h2, .modern-work h3 { font-family: 'Outfit', sans-serif; color: var(--text-main); letter-spacing: -0.03em; }

.btn-secondary { display: inline-flex; align-items: center; justify-content: center; background-color: transparent; color: var(--text-main) !important; font-family: 'Outfit', sans-serif; font-weight: 600; padding: clamp(12px, 1.5vw, 16px) clamp(24px, 3vw, 32px); border-radius: 100px; transition: all 0.3s ease; border: 1px solid var(--border-color); text-decoration: none; }
.btn-secondary:hover { border-color: var(--text-main); background-color: #fff; }

/* Animations */
.td-animate { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.td-animate.td-animate-in { opacity: 1; transform: translateY(0); }

/* In-prose links must be visibly distinguishable from surrounding body text.
   The global reset is a{color:inherit;text-decoration:none}, which renders
   contextual links invisible to a reader. Scoped to anchors INSIDE a <p> so
   card and button links, which wrap their own <p>, are untouched. */
.modern-work p a{color:var(--color-red,#DC2626);text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.modern-work p a:hover{color:#C41F1F;}