/* ============================================================
   layout.css — nav, hero, sections, cards, about, contact
   ============================================================ */

.container { width:min(var(--maxw), 90vw); margin-inline:auto; }

/* ---- NAV ---- */
.nav {
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; gap:1.5rem;
  padding:1rem clamp(1.2rem, 5vw, 3rem);
  background:var(--nav-bg);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--hairline);
  transition:background .6s var(--ease);
}
.nav__brand { font-family:var(--font-display); font-size:1.35rem; font-weight:600; letter-spacing:-.01em; }
.nav__links { display:flex; gap:1.6rem; margin-left:auto; }
.nav__links a {
  font-size:.92rem; color:var(--ink-soft); position:relative; padding:.2rem 0;
  transition:color .25s var(--ease);
}
.nav__links a::after {
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--accent); transition:right .3s var(--ease);
}
.nav__links a:hover, .nav__links a.is-active { color:var(--ink); }
.nav__links a:hover::after, .nav__links a.is-active::after { right:0; }

/* hero "wander my worlds" invitation */
.hero__worlds {
  margin-top:2rem; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
}

/* world switcher */
.switcher {
  display:flex; gap:.25rem; flex:0 0 auto; padding:.25rem;
  border:1px solid var(--card-bd); border-radius:999px; background:var(--card-bg);
}
.switcher__btn {
  width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background:transparent; font-size:1rem; line-height:1; display:grid; place-items:center;
  filter:grayscale(.5) opacity(.6); transition:filter .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.switcher__btn:hover { transform:translateY(-1px); filter:none; }
.switcher__btn.is-active {
  filter:none;
  background:radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 75%);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
@media (prefers-reduced-motion: reduce){ .switcher__btn:hover{ transform:none; } }

/* ---- HERO ---- */
.hero {
  min-height:100vh; display:flex; align-items:center;
  width:min(var(--maxw), 90vw); margin-inline:auto;
  position:relative;
}
.hero__inner { max-width:680px; }
.eyebrow {
  display:block; margin-bottom:1rem;
  font-size:clamp(.95rem, 1.7vw, 1.35rem);
  letter-spacing:.2em;
}
.hero__name {
  font-size:clamp(3.2rem, 10vw, 7rem);
  font-weight:600; line-height:.92; letter-spacing:-.02em;
  color:var(--ink);
  text-shadow:0 2px 40px color-mix(in srgb, var(--accent) 30%, transparent);
}
.hero__tag {
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.15rem, 2.4vw, 1.6rem); color:var(--ink-soft);
  margin-top:1.6rem;
}
.hero__cta { display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; position:relative; z-index:40; }

.scrollcue {
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  color:var(--accent); font-size:1.1rem; opacity:.8;
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }
@media (prefers-reduced-motion: reduce){ .scrollcue{ animation:none; } }

/* ---- SECTIONS ---- */
.section { position:relative; z-index:1; padding:clamp(4rem, 11vh, 8rem) 0; }
.section--alt::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:color-mix(in srgb, var(--grad-1) 55%, transparent);
  border-block:1px solid var(--hairline);
}

/* ---- WORK CARDS ---- */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.5rem; margin-top:2.8rem; }
.card {
  background:var(--card-bg); border:1px solid var(--card-bd); border-radius:20px; overflow:hidden;
  cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform:translateY(-7px); border-color:var(--accent); background:var(--card-bg-2);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.55); }
.card__cover {
  position:relative; height:200px; display:flex; align-items:center; justify-content:space-between;
  padding:0 1.4rem; background:linear-gradient(135deg, var(--c1), var(--c2)); overflow:hidden;
}
.card__cover::after { content:""; position:absolute; inset:0;
  background:radial-gradient(130% 90% at 82% 8%, rgba(255,255,255,.28), transparent 58%); }
.card__cover--img { height:280px; padding:0; background:#eef1f4; }
.card__cover--img::after { display:none; }
.card__img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .5s var(--ease); }
.card__img--contain { object-fit:contain; object-position:center; }
.card:hover .card__img { transform:scale(1.03); }
@media (prefers-reduced-motion: reduce){ .card:hover .card__img{ transform:none; } }
.card__index { position:relative; font-family:var(--font-display); font-size:2.7rem; font-weight:600; line-height:1; color:rgba(255,255,255,.95); text-shadow:0 1px 8px rgba(8,16,30,.55); }
.card__glyph { position:relative; font-size:1.7rem; color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(8,16,30,.55); transition:transform .45s var(--ease); }
.card:hover .card__glyph { transform:rotate(18deg) scale(1.18); }
.card__badge { position:absolute; top:.7rem; right:.8rem; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(255,255,255,.92); color:#16243f; padding:.22rem .55rem; border-radius:999px; font-weight:600; }
.card__badge--lock { background:rgba(10,20,34,.72); color:#eaf3ff; backdrop-filter:blur(2px); }
.card__badge--feature { background:var(--accent); color:#06231f; }
.card__badge--soon { background:rgba(10,20,34,.62); color:#fff; border:1px solid rgba(255,255,255,.3); }

/* case-study image gallery */
.cs-gallery { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; margin:1.7rem 0 .4rem; }
.cs-shot { margin:0; }
.cs-shot img { width:100%; display:block; border-radius:12px; border:1px solid var(--card-bd); }
.cs-shot img { cursor:zoom-in; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.cs-shot img:hover, .cs-shot img:focus-visible { transform:translateY(-2px); box-shadow:0 10px 28px rgba(8,16,30,.28); }
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(6,12,24,.9); display:flex; align-items:center; justify-content:center; padding:4vh 4vw; cursor:zoom-out; animation:lbIn .2s ease; }
.lightbox__fig { margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:.7rem; cursor:default; }
.lightbox__fig img { max-width:92vw; max-height:84vh; object-fit:contain; border-radius:10px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox__fig figcaption { color:#e6eef7; font-size:.9rem; text-align:center; max-width:70ch; }
.lightbox__close { position:absolute; top:1.2rem; right:1.4rem; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; font-size:1.1rem; cursor:pointer; }
.lightbox__close:hover { background:rgba(255,255,255,.18); }
@keyframes lbIn { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce){ .lightbox{ animation:none; } .cs-shot img:hover{ transform:none; } }
.cs-shot figcaption { font-size:.8rem; color:var(--ink-faint); margin-top:.45rem; }
.cs-shot--phone { max-width:280px; width:100%; margin:0 auto; justify-self:center; text-align:center; }
.cs-shot--phone img { border-radius:28px; }
.card--locked .card__cover::before { content:""; position:absolute; inset:0; z-index:1;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px); }
.card__platform { position:absolute; top:.7rem; left:.9rem; z-index:1; font-size:.64rem; letter-spacing:.04em;
  background:rgba(10,20,34,.5); color:#fff; padding:.2rem .55rem; border-radius:999px; backdrop-filter:blur(2px); }
.card__body { padding:1.3rem 1.4rem 1.5rem; }
.card__tag { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.card__title { font-size:1.42rem; margin:.6rem 0 .5rem; color:var(--ink); }
.card__summary { color:var(--ink-soft); font-size:.96rem; }
.card__more { margin-top:1.1rem; font-size:.85rem; color:var(--accent); display:flex; align-items:center; gap:.45rem; }
.card__arrow { transition:transform .3s var(--ease); }
.card:hover .card__arrow { transform:translateX(5px); }
@media (prefers-reduced-motion: reduce){ .card:hover{ transform:none; } .card:hover .card__glyph,.card:hover .card__arrow{ transform:none; } }

/* ---- flat screenshot mode (dev only): compact hero, hide bottom-anchored decor ---- */
html.shot .hero { min-height:auto; padding:140px 0 50px; }
html.shot .sky-top, html.shot .ground, html.shot .sun, html.shot .fog, html.shot .mist, html.shot .clouds { display:none; }

/* ---- scroll reveal ---- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity:1; transform:none; }
.cards .card:nth-child(2){ transition-delay:.07s; }
.cards .card:nth-child(3){ transition-delay:.14s; }
.cards .card:nth-child(4){ transition-delay:.21s; }
.pillars .pillar:nth-child(2){ transition-delay:.08s; }
.pillars .pillar:nth-child(3){ transition-delay:.16s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---- PILLARS (how I work) ---- */
.pillars { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:2rem; margin-top:3rem; counter-reset:pillar; }
.pillar { padding-top:1.4rem; border-top:2px solid var(--card-bd); }
.pillar__step {
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--accent); margin:0;
}
.pillar__mark { display:none; }
.pillar h3 { font-size:1.25rem; margin:.55rem 0 .6rem; color:var(--ink); }
.pillar p { color:var(--ink-soft); font-size:.96rem; }

/* ---- ABOUT interests ---- */
.about__tags { list-style:none; display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.6rem; }
.about__tags li {
  font-size:.82rem; color:var(--ink-soft); background:var(--card-bg);
  border:1px solid var(--card-bd); border-radius:999px; padding:.4rem .85rem;
}

/* ---- CONTACT flourish ---- */
.contact__flourish { color:var(--accent); letter-spacing:.4em; font-size:.9rem; margin-bottom:1.2rem; opacity:.8; }
.contact .section__title { font-size:clamp(2.1rem, 5vw, 3.4rem); }

/* ---- TOOLKIT ---- */
.toolkit__groups {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(1rem,2.4vw,1.6rem); margin-top:2.2rem;
}
.toolgroup {
  background:var(--card-bg); border:1px solid var(--card-bd);
  border-radius:18px; padding:1.4rem 1.4rem 1.6rem;
}
.toolgroup h3 {
  font-family:"Inter",sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:.5rem; margin-bottom:1rem;
}
.toolgroup__glyph { font-size:1.05rem; }
.tool-pills { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; }
.tool-pills li {
  font-size:.78rem; color:var(--ink); background:var(--card-bg-2);
  border:1px solid var(--card-bd); border-radius:999px; padding:.28rem .68rem;
}

.ai-spotlight {
  margin-top:clamp(1.4rem,3vw,2rem); border-radius:22px; padding:clamp(1.5rem,3vw,2.2rem);
  border:1px solid color-mix(in srgb,var(--accent) 45%, transparent);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb,var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb,var(--accent-2) 16%, transparent), transparent 60%),
    var(--card-bg);
}
.ai-spotlight__head { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.2rem; }
.ai-spotlight__mark { color:var(--accent); font-size:1.4rem; line-height:1; margin-top:.1rem; }
.ai-spotlight__head h3 { font-family:"Fraunces",serif; font-size:1.5rem; font-weight:600; margin-bottom:.3rem; }
.ai-spotlight__head p { color:var(--ink-soft); max-width:62ch; }
.tool-pills--ai li.is-lead { font-weight:600; color:var(--ink); }
.tool-pills--ai li.is-learning { display:inline-flex; align-items:center; gap:.5rem; }
.tool-pills--ai li.is-learning span {
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); background:color-mix(in srgb, var(--accent) 16%, var(--card-bg-2));
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--card-bd)); border-radius:999px; padding:.1rem .45rem;
}

/* ---- ABOUT ---- */
.about { display:grid; grid-template-columns:0.7fr 1.3fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.about__photo {
  aspect-ratio:4/5; border-radius:22px; display:grid; place-items:center; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 80% at 22% 14%, color-mix(in srgb,var(--accent) 34%, transparent), transparent 58%),
    radial-gradient(120% 90% at 86% 100%, color-mix(in srgb,var(--accent-2) 30%, transparent), transparent 58%),
    var(--card-bg-2);
  border:1px solid var(--card-bd); color:var(--ink-faint); text-align:center; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
}
.about__photo::after { content:"✦"; position:absolute; top:14px; right:16px; color:#fff; opacity:.85; font-size:1rem; z-index:2; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.about__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.about__text p { color:var(--ink-soft); margin-top:1rem; }
.about__text .section__title { margin-bottom:.4rem; }

/* ---- CONTACT ---- */
.contact { text-align:center; }
.contact .section__lead { margin-inline:auto; }
.contact__links { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.footer__note { margin-top:3rem; color:var(--ink-faint); font-size:.85rem; }

/* ---- case study detail overlay ---- */
.cs-detail {
  position:fixed; inset:0; z-index:60; display:grid; place-items:start center;
  padding:6vh 1rem; overflow-y:auto;
  background:color-mix(in srgb, var(--grad-1) 78%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.cs-detail[hidden] { display:none; }
.cs-detail__panel {
  width:min(860px, 94vw); position:relative;
  background:var(--card-bg-2); border:1px solid var(--card-bd); border-radius:22px;
  padding:clamp(1.6rem, 4vw, 3rem);
}
.cs-detail__close {
  position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--card-bd); background:var(--card-bg); color:var(--ink); cursor:pointer; font-size:1rem;
}
.cs-detail__soon { color:var(--accent); margin-top:1rem; letter-spacing:.06em; }
.cs-note { margin-top:1rem; padding:.9rem 1.1rem; border-left:2px solid var(--accent); border-radius:0 10px 10px 0;
  background:var(--card-bg); color:var(--ink-soft); font-style:italic; font-size:.92rem; }
.cs-drop { margin-top:.9rem; padding:.8rem 1rem; border:1px dashed var(--card-bd); border-radius:10px;
  color:var(--ink-faint); font-size:.85rem; background:color-mix(in srgb, var(--card-bg) 50%, transparent); }

/* ---- protected case study lock gate ---- */
.cs-lock { text-align:center; padding:2rem 1rem 1rem; max-width:420px; margin-inline:auto; }
.cs-lock__icon { font-size:2.4rem; margin-bottom:.6rem; }
.cs-lock__msg { color:var(--ink-soft); }
.cs-lock__form { display:flex; gap:.6rem; justify-content:center; margin:1.4rem 0 .8rem; flex-wrap:wrap; }
.cs-lock__form input {
  font:inherit; font-size:.95rem; padding:.7rem 1rem; border-radius:999px;
  border:1px solid var(--card-bd); background:var(--card-bg); color:var(--ink); min-width:200px;
}
.cs-lock__form input:focus { outline:none; border-color:var(--accent); }
.cs-lock__err { color:#ff9a8a; font-size:.88rem; }
.cs-lock__hint { color:var(--ink-faint); font-size:.85rem; margin-top:.4rem; }
.cs-lock__hint a { color:var(--accent); }
.cs-detail__skeleton { margin-top:2rem; display:grid; gap:1.4rem; }
.cs-detail__skeleton h3 { font-size:1.15rem; color:var(--ink); }
.cs-detail__ph { color:var(--ink-faint); font-size:.92rem; border-left:2px solid var(--hairline); padding-left:.9rem; margin-top:.4rem; }

/* ---- responsive ---- */
@media (max-width: 720px){
  .nav__links { display:none; }
  .about { grid-template-columns:1fr; }
  .hero__tag br { display:none; }
}

/* note under the work grid: how to get into protected case studies */
.work__note {
  margin-top:2rem;
  font-size:.92rem;
  color:var(--ink-faint);
}
.work__note a { color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }
.work__note a:hover { color:var(--accent); }

/* ---- card stat blocks (value + label pairs) ---- */
.card__stats { margin:1.2rem 0 0; display:grid; gap:.85rem; }
.card__stats .stat { margin:0; }
.stat__v {
  font-family:var(--font-display); font-weight:600;
  font-size:1.5rem; line-height:1.1; color:var(--accent);
}
.stat__l { margin:.15rem 0 0; font-size:.84rem; line-height:1.35; color:var(--ink-soft); }

/* ---- contact cards (channel + real address + what it's for) ---- */
.contact__cards {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1rem; margin:2.2rem auto 1.8rem; max-width:720px; text-align:left;
}
.contact__card {
  display:block; padding:1.1rem 1.2rem;
  background:var(--card-bg); border:1px solid var(--card-bd); border-radius:16px;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.contact__card:hover { border-color:var(--accent); background:var(--card-bg-2); transform:translateY(-3px); }
.contact__kind {
  display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}
.contact__value { display:block; margin:.45rem 0 .3rem; color:var(--ink); font-size:1rem; word-break:break-word; }
.contact__hint { display:block; font-size:.84rem; color:var(--ink-faint); }
@media (prefers-reduced-motion: reduce){ .contact__card:hover{ transform:none; } }


/* How I Work: two-voice headline, sans claim then serif-italic turn */
.how__title em {
  font-style:italic; font-weight:400;
  color:color-mix(in srgb, var(--accent) 62%, var(--ink));
}

/* at-a-glance strip + bullet lists in case studies */
.cs-glance { display:grid; grid-template-columns:repeat(2, 1fr); gap:.8rem; margin:1.4rem 0 1.6rem; }
.cs-glance div { background:var(--card-bg); border:1px solid var(--card-bd); border-radius:12px; padding:.8rem .95rem; }
.cs-glance dt { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:.3rem; }
.cs-glance dd { margin:0; font-size:.92rem; color:var(--ink); line-height:1.35; }
.cs-list { margin:.5rem 0 .2rem; padding-left:1.2rem; }
.cs-list li { margin:.35rem 0; }

/* ---- work groups: featured first, then side projects, then compact earlier work ---- */
.work-group + .work-group { margin-top:4.2rem; }
.work-group__title { font-family:var(--font-display); font-size:1.6rem; font-weight:600; margin:0; }
.work-group__lead { color:var(--ink-soft); margin:.4rem 0 0; }
.work-group .cards { margin-top:1.6rem; }
.work-group:first-child .cards { margin-top:2.8rem; }
/* first group: three across, the top three highlighted */
@media (min-width:900px) { .work-group:first-child .cards { grid-template-columns:repeat(3, 1fr); gap:1.3rem; } }
.card--featured { border-color:color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--accent) 55%, transparent); }
.card--featured .card__cover--img { height:220px; }
.work-group:first-child .card:not(.card--featured) .card__cover--img { height:180px; }
.work-group--compact .cards { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.1rem; }
.work-group--compact .card__cover--img { height:160px; }
.work-group--compact .card__stats { display:none; }
.work-group--compact .card__title { font-size:1.2rem; }

/* shipped / tested / in progress / concept label on each card */
.card__status { display:inline-flex; align-items:center; gap:.4rem; margin:0 0 .7rem; font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.24rem .6rem; border-radius:999px; border:1px solid currentColor; }
.card__status::before { content:""; width:.42rem; height:.42rem; border-radius:50%; background:currentColor; }
.card__status--shipped { color:color-mix(in srgb, #2fae7e 65%, var(--ink)); }
.card__status--tested { color:color-mix(in srgb, #4b8fd6 65%, var(--ink)); }
.card__status--progress { color:color-mix(in srgb, #d98a2b 65%, var(--ink)); }
.card__status--concept { color:color-mix(in srgb, #8b6fd6 65%, var(--ink)); }
.cs-gallery--phones { grid-template-columns:repeat(3, minmax(0, 190px)); justify-content:center; gap:1.2rem; }
.cs-gallery--phones .cs-shot--phone { max-width:190px; }
.cs-gallery--phones .cs-shot--phone img { aspect-ratio:9 / 19.5; object-fit:cover; object-position:top; border-radius:22px; }
.cs-gallery--phones figcaption { font-size:.75rem; }
/* ---- case study timeline ---- */
.cs-timeline { list-style:none; margin:1.4rem 0 .4rem; padding:0 0 0 1.4rem; border-left:2px solid color-mix(in srgb, var(--accent, #7fd1c4) 55%, transparent); display:grid; gap:1.1rem; }
.cs-timeline li { position:relative; margin:0; }
.cs-timeline li::before { content:""; position:absolute; left:calc(-1.4rem - 7px); top:.35rem; width:12px; height:12px; border-radius:50%; background:var(--accent, #7fd1c4); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent, #7fd1c4) 20%, transparent); }
.cs-timeline__year { display:block; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent, #7fd1c4); margin-bottom:.2rem; }
.cs-timeline p { margin:0; }
.cs-detail__panel section a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.cs-ph { aspect-ratio:9 / 19.5; border-radius:22px; border:1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); background:linear-gradient(180deg, color-mix(in srgb, #bcd6e6 22%, transparent), color-mix(in srgb, #ece4d6 18%, transparent)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; padding:1rem; text-align:center; }
.cs-ph span { font-size:.85rem; font-weight:600; color:var(--ink); }
.cs-ph small { font-size:.72rem; color:var(--ink-faint); }
.cs-shot:not(.cs-shot--phone) .cs-ph { aspect-ratio:16 / 10; }
/* side projects: three across on wide screens, two on tablets */
@media (min-width: 640px){ .work-group--four .cards { grid-template-columns:repeat(2, 1fr); } }
@media (min-width: 1100px){
  .work-group--four .cards { grid-template-columns:repeat(3, 1fr); gap:1.1rem; }
  .work-group--four .card__cover--img { height:200px; }
  .work-group--four .card__body { padding:1.2rem 1.25rem 1.4rem; }
  .work-group--four .card__title { font-size:1.25rem; }
  .work-group--four .card__summary { font-size:.9rem; }
  .work-group--four .card__stats { display:none; }
}
.pillars .pillar:nth-child(4){ transition-delay:.24s; }
/* toolkit: learning now */
.learning { margin-top:1.6rem; padding:1.4rem 1.6rem; border:1.5px dashed var(--card-bd); border-radius:18px; }
.learning h3 { margin:0; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:.5rem; }
.learning p { margin:.4rem 0 .9rem; color:var(--ink-faint); font-size:.92rem; }
.tool-pills--learning li { border-style:dashed; }
.work-group:first-child .card__stats { grid-template-columns:1fr 1fr; gap:.6rem; }
.cs-detail__panel section > p { max-width:68ch; }
/* ---- case study quick-scan pills ---- */
.cs-meta { margin:1.3rem 0 1.7rem; display:grid; gap:.8rem; }
.cs-pills { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.cs-pill { --c:var(--accent); display:inline-flex; align-items:center; gap:.5rem; padding:.48rem .95rem; border-radius:999px; font-size:.86rem; line-height:1.25;
  color:var(--c); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); background:color-mix(in srgb, var(--c) 10%, transparent); }
.cs-pill__icon svg, .cs-tools__icon svg { width:17px; height:17px; display:block; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cs-pill--role { --c:#d6cbf6; } .cs-pill--type, .cs-pill--platform { --c:var(--accent); } .cs-pill--time { --c:#f1d29a; }
.cs-pill--team, .cs-pill--status { --c:#f6c4cf; }
.cs-tools { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; color:var(--ink-faint); }
.cs-tools__icon { margin-right:.2rem; }
.cs-tool { font-size:.82rem; padding:.36rem .8rem; border-radius:999px; color:#bcd9f5; border:1px solid color-mix(in srgb, #9cc7f0 40%, transparent); background:color-mix(in srgb, #9cc7f0 10%, transparent); }
.cs-tools { color:#bcd9f5; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cs-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.4rem 1.4rem; margin:.2rem 0 0; padding-top:.8rem; border-top:1px solid var(--card-bd); }
.cs-facts dt { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.cs-facts dd { margin:.15rem 0 0; font-size:.88rem; color:var(--ink-soft); line-height:1.35; }
/* toolkit: AI + learning side by side, smaller */
.toolkit__extras { display:grid; gap:1rem; margin-top:1.6rem; }
@media (min-width:900px){ .toolkit__extras { grid-template-columns:1.4fr 1fr; align-items:stretch; } }
.toolkit__extras .ai-spotlight, .toolkit__extras .learning { margin:0; padding:1.2rem 1.4rem; }
.toolkit__extras .ai-spotlight h3 { font-size:1.15rem; }
.toolkit__extras .ai-spotlight p { font-size:.9rem; }
.toolkit__extras .tool-pills li { font-size:.8rem; padding:.3rem .7rem; }
.cs-gallery--stack { grid-template-columns:1fr; }
.cs-gallery--stack .cs-shot { max-width:100%; }
.cs-gallery--stack .cs-shot[data-ratio^="0."] { max-width:min(460px, 100%); justify-self:center; }
.past-hero #skyTop, .past-hero #skyTop * { pointer-events:none !important; cursor:auto !important; }
.cs-lottie { aspect-ratio:1; border-radius:12px; border:1px solid var(--card-bd); background:#f4f6f9; overflow:hidden; }
.cs-lottie svg { display:block; }
.cs-shot--anim { max-width:min(380px, 100%); justify-self:center; width:100%; }
/* at-a-glance strip: one cell per fact, each with its own tint */
.cs-strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.5rem; margin:0; }
.cs-cell { --c:var(--accent); padding:.9rem 1rem; border-radius:14px; background:color-mix(in srgb, var(--c) 13%, var(--card-bg)); border:1px solid color-mix(in srgb, var(--c) 32%, transparent); }
.cs-cell dt { display:flex; align-items:center; gap:.45rem; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c); }
.cs-cell__icon svg { width:17px; height:17px; display:block; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cs-cell dd { margin:.45rem 0 0; font-size:.95rem; line-height:1.35; color:var(--ink); }
.cs-cell--role { --c:#c3b3f2; } .cs-cell--type { --c:#7fd1c4; } .cs-cell--platform { --c:#8fc4f0; }
.cs-cell--time { --c:#efc77f; } .cs-cell--team, .cs-cell--status { --c:#f2a7b8; }
@media (min-width:900px){ .cs-strip { grid-template-columns:repeat(5, 1fr); } }
.cs-cell--tools { --c:#f0b48a; }
.cs-cell--methods { --c:#9fd6a3; }
.cs-cell--methods, .cs-cell--tools { grid-column:1 / -1; }
@media (min-width:900px){ .cs-cell--methods { grid-column:1 / span 3; } .cs-cell--methods + .cs-cell--tools { grid-column:4 / span 2; } }
.cs-cell--role dd { font-weight:600; }
.cs-cell__sub { display:inline-block; margin-top:.45rem; font-size:.72rem; font-weight:600; letter-spacing:.04em; padding:.2rem .55rem; border-radius:999px; color:#1d1636; background:var(--c); }
.cs-cell__sub { white-space:nowrap; }
/* a lone tall screenshot shouldn't fill the whole panel */
.cs-gallery .cs-shot:only-child[data-ratio^="0."] { max-width:min(560px, 100%); justify-self:center; width:100%; }
.cs-gallery .cs-shot:only-child[data-ratio^="0."] img { max-height:80vh; object-fit:contain; object-position:top; background:#fff; }
/* reflection: a quiet closing card, set apart from the rest of the case study */
.cs-reflection { margin-top:2.4rem; padding:1.6rem 1.8rem; border-radius:18px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, #c3b3f2 12%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.cs-reflection h3 { display:flex; align-items:center; gap:.5rem; font-family:var(--font-body, Inter, sans-serif); font-size:.72rem !important; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 .6rem; }
.cs-reflection__mark { font-size:.9rem; }
.cs-reflection p { font-family:var(--font-display); font-style:italic; font-size:1.25rem; line-height:1.5; color:var(--ink); margin:0; max-width:60ch; }
.cs-reflection strong { font-style:italic; color:var(--accent); font-weight:600; }
/* outcome: result tiles, the first thing to scan */
.cs-results { list-style:none; margin:.8rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.6rem; }
.cs-result { margin:0 !important; padding:1rem 1.1rem; border-radius:14px; background:color-mix(in srgb, var(--accent) 9%, var(--card-bg)); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); display:grid; gap:.35rem; align-content:start; }
.cs-result__mark { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:700; color:#06231f; background:var(--accent); margin-bottom:.2rem; }
.cs-result strong { font-size:1rem; line-height:1.3; color:var(--ink); }
.cs-result span:last-child { font-size:.86rem; line-height:1.4; color:var(--ink-soft); }
.cs-result span:last-child strong { font-size:inherit; }
.cs-outcome { margin-bottom:2rem; }
/* card meta as small pills (matches the case study strip) */
.card__pills { list-style:none; margin:.7rem 0 .2rem; padding:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.card__pill { --c:#7fd1c4; font-size:.74rem; line-height:1.2; padding:.26rem .6rem; border-radius:999px; color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); border:1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.card__pill--platform { --c:#8fc4f0; } .card__pill--time { --c:#efc77f; }
/* equal-height cards with the link pinned to the bottom */
.card { display:flex; flex-direction:column; }
.card__body { display:flex; flex-direction:column; flex:1; }
.card__more { margin-top:auto !important; padding-top:1rem; }
.card__status { align-self:flex-start; }
/* big headline stats at the top of each case study */
.cs-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:.8rem 1.4rem; margin:1.2rem 0 .3rem; padding:.9rem 0; border-top:1px solid var(--card-bd); border-bottom:1px solid var(--card-bd); }
.cs-stats div { margin:0; }
.cs-stats dt { font-family:var(--font-display); font-size:1.35rem; font-weight:600; line-height:1.05; color:var(--accent); }
.cs-stats dd { margin:.2rem 0 0; font-size:.8rem; line-height:1.4; color:var(--ink-soft); max-width:28ch; }
/* outcome tiles in warm gold so results stand out from the teal/blue page */
.cs-outcome h3 { color:#f1d29a; }
.cs-result { background:linear-gradient(160deg, color-mix(in srgb, #efc77f 20%, var(--card-bg)), color-mix(in srgb, #efc77f 8%, var(--card-bg))); border-color:color-mix(in srgb, #efc77f 45%, transparent); }
.cs-result__mark { background:#efc77f; color:#2a1d05; }
.cs-shot img[src*="tracks.png"] { max-width:640px; margin:0 auto; }
.cs-logo { display:block; height:34px; width:auto; margin:.2rem 0 .7rem; opacity:.95; }
/* lighter at-a-glance: no boxes, color only in the icon + label, thin dividers */
.cs-strip { gap:0; border-top:1px solid var(--card-bd); border-bottom:1px solid var(--card-bd); }
.cs-cell { background:none; border:0; border-radius:0; padding:.85rem 1rem .85rem 0; }
@media (min-width:900px){ .cs-cell + .cs-cell:not(.cs-cell--methods):not(.cs-cell--tools) { padding-left:1rem; border-left:1px solid var(--card-bd); } }
.cs-cell--methods, .cs-cell--tools { border-top:1px solid var(--card-bd); }
@media (min-width:900px){ .cs-cell--methods + .cs-cell--tools { padding-left:1rem; border-left:1px solid var(--card-bd); } }
.cs-cell dd { font-size:.9rem; color:var(--ink-soft); }
.cs-cell--role dd { color:var(--ink); }
.cs-facts { border-top:0; padding-top:0; }
.cs-cell--users { --c:#f6c4cf; grid-column:1 / -1; border-top:1px solid var(--card-bd); }
.cs-strip .cs-cell--users { border-left:0 !important; padding-left:0 !important; }
/* quieter outcomes: no boxes, a thin gold rule and small check */
.cs-results { gap:1rem 1.6rem; }
.cs-result { background:none !important; border:0 !important; border-top:2px solid color-mix(in srgb, #efc77f 70%, transparent) !important; border-radius:0 !important; padding:.8rem 0 0 !important; }
.cs-result__mark { width:auto; height:auto; background:none !important; color:#efc77f !important; font-size:.85rem; margin:0; justify-self:start; }
.cs-result strong { font-size:.98rem; }
/* desktop: five facts on top, then Users · Methods · Tools as one row of three */
@media (min-width:900px){
  .cs-strip { grid-template-columns:repeat(15, 1fr); }
  .cs-strip .cs-cell { grid-column:span 3; }
  .cs-strip .cs-cell--users, .cs-strip .cs-cell--methods, .cs-strip .cs-cell--tools { grid-column:span 5 !important; border-top:1px solid var(--card-bd); }
  .cs-strip .cs-cell--users ~ .cs-cell--methods, .cs-strip .cs-cell--users ~ .cs-cell--tools, .cs-strip .cs-cell--methods + .cs-cell--tools { padding-left:1rem !important; border-left:1px solid var(--card-bd) !important; }
  .cs-strip .cs-cell--methods:not(.cs-cell--users ~ *) { padding-left:0 !important; border-left:0 !important; }
}
@media (min-width:900px){
  .cs-strip:not(:has(.cs-cell--users)) .cs-cell--methods { grid-column:span 9 !important; }
  .cs-strip:not(:has(.cs-cell--users)) .cs-cell--tools { grid-column:span 6 !important; }
}
/* logo sits top-right, on the same line as the small tag text, left of the close button */
@media (min-width:700px){
  .cs-logo { position:absolute; top:calc(clamp(1.6rem, 4vw, 3rem) - .35rem); right:calc(clamp(1.6rem, 4vw, 3rem) + 3.2rem); height:30px; margin:0; }
}
.cs-logo { display:flex; align-items:center; gap:.8rem; height:auto !important; }
.cs-logo img { height:30px; width:auto; display:block; }
.cs-logo__sep { width:1px; height:22px; background:var(--card-bd); }
@media (max-width:699px){ .cs-logo img { height:28px; } }
/* outcomes: back to boxes, in a calm blue-neutral */
.cs-outcome h3 { color:var(--ink) !important; }
.cs-result { --o:#8fb4d8; background:color-mix(in srgb, var(--o) 9%, var(--card-bg)) !important; border:1px solid color-mix(in srgb, var(--o) 30%, transparent) !important; border-radius:14px !important; padding:1rem 1.1rem !important; }
.cs-result__mark { width:24px !important; height:24px !important; border-radius:50%; display:grid !important; place-items:center; background:color-mix(in srgb, var(--o) 25%, transparent) !important; color:#cfe2f5 !important; font-size:.75rem; margin-bottom:.2rem !important; }