/* Project presentation. All rules scoped to work and case studies. */
.work-intro .section-heading {margin-bottom:0;align-items:start;justify-content:space-between;gap:48px}
.work-intro .eyebrow {padding-top:12px;white-space:nowrap}
@media(min-width:821px){
 .work-intro .section-heading {display:block;width:min(calc(100vw - 48px),1200px);margin:0 0 0 calc((100% - min(calc(100vw - 48px),1200px))/2)}
 .work-intro .eyebrow {margin:0 0 16px;padding-top:0}
}
.portfolio-feature {
  margin: 0 auto 32px;
  padding: 0;
  border-radius: 16px;
}

.portfolio-feature.featured-project--dark {background:#14171c}
.portfolio-feature .play-metrics {width:100%;padding:24px;background:#222831;border:1px solid #3f4756;border-radius:12px}
.portfolio-feature .play-metrics__header img {width:48px;height:48px}
.portfolio-feature .play-metrics__grid {margin-top:16px}
.portfolio-feature .play-metrics__grid>div {padding:10px}
.portfolio-feature .play-metrics__grid strong {font-size:1.4rem}
.short-work .section-heading {margin-bottom:42px}
.short-work .section-heading h2 {font-size:clamp(2.2rem,3.4vw,3rem)}
.challenge-grid--secondary {
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-auto-rows: auto;
}
.challenge-grid--secondary .challenge {display:flex;flex-direction:column;background:transparent;overflow:visible;border-radius:0;height:auto;box-shadow:none;transform:none}
.challenge-grid--secondary .challenge img {
  height: 100%;
}
.challenge-grid--secondary .challenge p {max-width:520px;font-size:var(--fs-base);line-height:1.65}
.challenge-grid--secondary .challenge .project-order {
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  color: var(--label-color);
  font-weight: 600;
  text-transform: uppercase;
}
.challenge-grid--secondary .challenge-tags {padding:0;margin-block:20px 0}
.challenge-grid--secondary .challenge-tags span {
  text-transform: none;
  letter-spacing: 0;
}
.project-page main {--case-accent:var(--blue)}
.project-page--helbiz main {--case-accent:#087859}
.project-page--arkade main {--case-accent:#6b41df}
.project-page main .case-study,.project-page main .earlier-work {padding-top:58px}
.project-page main .case-hero {align-items:end;gap:64px;margin-bottom:48px}
.project-page main .case-hero h1,.project-page main .earlier-heading h1 {
  letter-spacing: -.065em;
}
.project-page main .case-intro {font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.6;color:#505965;max-width:560px}
.project-page main .case-facts {margin:40px 0 36px;padding-block:25px;gap:30px}
.project-page main .case-facts span {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
}
.project-page main .case-facts strong {font-size:var(--fs-base);font-weight:500}
.project-page main .story-grid {
  grid-template-columns: 1fr 2fr;
  border-top: 1px solid #dce0e6;
}
.project-page main .story-index {display:block}
.project-page main .story-index>span {font-size:var(--fs-base);color:var(--case-accent);display:block;margin-bottom:16px}
.project-page main .story-index p {max-width:220px;font-size:var(--fs-base);color:#586270}
.project-page main .story-copy>p {font-size:var(--fs-lg);line-height:1.8;max-width:700px}
.project-page main .wide-media {background:none;padding:0;overflow:visible}
.project-page main .wide-media img {max-height:none;border-radius:12px;box-shadow:0 10px 28px rgba(16,20,28,.08)}
.project-page main .reflection {background:#e9edf3;border:0;border-radius:12px;padding:40px;gap:60px;grid-template-columns:1fr 2fr}
.project-page main .reflection>span {color:var(--case-accent);font-size:var(--fs-md)}
.project-page main .reflection p {line-height:1.75}
.project-page main .stat-grid:not(.stat-grid--metric) {border:0;gap:12px}
.project-page main .stat-grid:not(.stat-grid--metric)>div {border:1px solid #dce1e8;background:#fff;border-radius:10px;padding:24px}
.project-page main .stat-grid span {
  font-size: var(--fs-xs);
}
.project-page main .project-pagination {border-top:1px solid #ccd3de;background:transparent;padding-block:48px;margin-block:36px 60px}
.project-page main .next-project strong {font-size:clamp(1.6rem,3vw,2.7rem);letter-spacing:-.04em}
.project-page main .next-project span {font-size:var(--fs-sm)}
@media(max-width:1000px){
 
 
 
 .project-page main .case-hero {gap:32px}
 }
@media(max-width:650px){
  .work-intro .section-heading {display:block}
 .work-intro .eyebrow {margin-bottom:24px}
  
 
  
 
  
   .project-page main .case-hero {grid-template-columns:1fr;margin-bottom:30px}
 .project-page main .case-facts {grid-template-columns:1fr 1fr;gap:24px}
   .project-page main .story-grid {
  grid-template-columns: 1fr;
}
 .project-page main .story-index {display:flex;gap:14px;align-items:baseline}
 .project-page main .story-index p {max-width:none;margin:0}
 .project-page main .reflection {grid-template-columns:1fr;padding:26px;gap:16px}
 .project-page main .wide-media {padding:0}
 .project-page main .project-pagination {align-items:start;gap:30px;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.portfolio-feature img,.challenge-grid--secondary .challenge img{transition:none}}
/* Preserve Infinitum's dark identity within the shared case-study rhythm. */
.project-page main .earlier-work {background:#14171c;box-shadow:0 0 0 100vmax #14171c}
.project-page main .earlier-work .story-grid {border-color:#343a45}
.project-page main .earlier-work .story-index>span {color:#8db9ff}
.project-page main .earlier-work .story-index p,.project-page main .earlier-work .story-copy>p {color:var(--text-on-dark-muted)}
.project-page main .earlier-heading {gap:56px;align-items:end}
.project-page main .earlier-intro {line-height:1.65;font-size:var(--fs-lg)}
@media(max-width:650px){.project-page main .earlier-heading{display:block}.project-page main .earlier-intro{margin-top:28px}.project-page main .next-project{text-align:left}}
/* Compact, fluid project layouts and consistent card feedback. */
.work-intro {padding-block:clamp(48px,6vw,76px) 40px}
.work-intro h2 {
  max-width: 850px;
  line-height: 1.08;
}
.portfolio-feature {
  width: min(calc(100% - 48px),1200px);
}
.portfolio-feature .featured-project__visual {background:transparent;order:0;overflow:hidden;min-height:0;height:auto;align-self:stretch;aspect-ratio:auto;position:relative}
.portfolio-feature .featured-project__copy {max-width:none;padding:clamp(28px,3.4vw,44px);min-width:0}
.portfolio-feature .featured-project__copy h2 {font-size:clamp(2.1rem,3.5vw,3.35rem);line-height:1.1}
.portfolio-feature .featured-project__copy>.eyebrow {font-size:var(--fs-sm);letter-spacing:.12em;margin-bottom:18px}
.portfolio-feature .featured-project__copy>p:not(.eyebrow):not(.featured-project__proof) {max-width:430px;font-size:var(--fs-base);margin-block:18px;line-height:1.6}
.portfolio-feature .featured-project__copy .project-tags {margin-bottom:20px}
.portfolio-feature .featured-project__proof {padding:14px 0;margin-bottom:20px}
.portfolio-feature .featured-project__proof strong {font-size:var(--fs-lg)}
.portfolio-feature.featured-project--dark .featured-project__visual {display:flex;flex-direction:column;justify-content:center;gap:24px;padding:clamp(24px,3vw,40px);aspect-ratio:auto}
.portfolio-feature.featured-project--dark:hover .featured-project__copy h2,
.portfolio-feature.featured-project--dark:has(.card-link:focus-visible) .featured-project__copy h2 {color:#8db9ff}
.challenge:hover h3 a,.challenge:focus-within h3 a {color:var(--title-accent,var(--blue));text-decoration:none}
.short-work {max-width:1200px;padding-block:48px 80px}
.challenge-grid--secondary {gap:44px 28px}
.challenge-grid--secondary .challenge>a:first-child {height:auto;overflow:hidden;border-radius:12px;background:#e8ecf2;aspect-ratio:1.6}
.challenge-grid--secondary .challenge h3 {margin:12px 0 14px;font-size:clamp(1.65rem,2.4vw,2rem)}
.challenge-grid--secondary .challenge>div {padding:26px 2px 0;justify-content:start;flex:1;padding-top:20px}
.project-page main .case-hero h1,.project-page main .earlier-heading h1 {font-size:clamp(2.75rem,5.6vw,5.25rem);line-height:1.1}
.project-page main .story-grid {gap:clamp(28px,4vw,54px);padding-top:52px;padding-bottom:32px;margin-top:36px}
.project-page main .story-copy h3 {line-height:1.16;letter-spacing:-.045em;font-size:clamp(1.7rem,2.6vw,2.5rem)}
@media(max-width:820px){
  .work-intro .section-heading {display:block}
 .work-intro .eyebrow {margin-bottom:20px}
 .portfolio-feature {width:calc(100% - 32px);max-width:600px}
  .portfolio-feature .featured-project__visual {aspect-ratio:1.65;min-height:0;order:0}
 .portfolio-feature .featured-project__copy {padding:28px}
  .portfolio-feature .featured-project__copy h2 {font-size:clamp(2rem,5.5vw,2.8rem)}
 .project-page main .case-hero,.project-page main .story-grid {grid-template-columns:1fr;gap:24px}
 .project-page main .story-index {display:flex;gap:14px;align-items:baseline}
 .project-page main .story-index p {max-width:none;margin:0}
}
@media(max-width:650px){
 .work-intro {padding-block:48px 32px}
 .short-work {padding-block:32px 64px}
 .challenge-grid--secondary {grid-template-columns:1fr;gap:36px}
 
 .portfolio-feature .featured-project__copy {padding:24px}
 .portfolio-feature.featured-project--dark .featured-project__visual {padding:24px 24px 0}
 .portfolio-feature .play-metrics {padding:18px}
 .portfolio-feature .play-metrics__grid strong {font-size:var(--fs-lg)}
  .project-page main .case-hero h1,.project-page main .earlier-heading h1 {font-size:clamp(2.4rem,9.5vw,3.5rem)}
 .project-page main .story-grid {padding-top:32px;margin-top:28px}
}
/* Equal featured cards, JobBot spotlight and native IVECO case study. */
.portfolio-feature .featured-project__inner {width:100%;gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:var(--featured-height,460px)}
.challenge-grid--secondary .challenge--iveco {grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;gap:0;background:#e5ebff;border-radius:16px;overflow:hidden}
.challenge-grid--secondary .challenge--iveco>a:first-child {border-radius:0;aspect-ratio:auto;position:relative;min-height:360px}
.challenge-grid--secondary .challenge--iveco>a:first-child img {
  position: absolute;
  inset: 0;
}
.challenge-grid--secondary .challenge--iveco>div {padding:clamp(28px,4vw,48px);justify-content:center}
.challenge-grid--secondary .challenge--iveco h3 {font-size:clamp(2.1rem,3.5vw,3.35rem);line-height:1.1}
.challenge-grid--secondary .challenge:last-child {grid-template-columns:1fr 1fr;align-items:center;grid-column:auto;display:flex;gap:0}
.challenge-grid--secondary .challenge:last-child>div {padding:20px 2px 0}
.iveco-patterns {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}
.iveco-patterns>div {border-top:2px solid var(--blue);padding-top:18px}
.iveco-patterns span,.iveco-decisions>div>span {color:#3456bf;font-size:var(--fs-sm);font-weight:600}
.iveco-patterns h4,.iveco-observations h4,.iveco-ideas h4 {font:700 1.15rem/1.35 Manrope,sans-serif;margin:12px 0}
.iveco-patterns p,.iveco-observations p,.iveco-ideas p {color:#505965;font-size:var(--fs-base);line-height:1.65;margin:0}
.iveco-audit {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;margin-top:36px;align-items:center}
.iveco-audit figure,.iveco-redesign figure {margin:0;max-width:310px;justify-self:center}
.iveco-audit img,.iveco-redesign img {width:100%;height:auto;border-radius:14px;box-shadow:0 16px 38px #14284b18}
.iveco-audit figcaption,.iveco-redesign figcaption {font-size:var(--fs-sm);color:#586270;margin-top:14px;text-align:center}
.iveco-observations {margin:0;padding-left:24px}
.iveco-observations li {padding:0 0 22px 6px}
.iveco-observations li::marker {color:var(--blue);font-weight:700}
.iveco-redesign {display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,80px);align-items:center;padding:clamp(24px,4vw,48px);background:#e6edfb;border-radius:16px}
.iveco-decisions {display:grid;gap:24px}
.iveco-decisions h3 {font:700 clamp(1.3rem,2.2vw,1.9rem)/1.25 Manrope,sans-serif;letter-spacing:-.03em;margin:8px 0 12px}
.iveco-decisions p {margin:0;line-height:1.7;color:#455365;font-size:var(--fs-base)}
.iveco-ideas {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px}
.iveco-ideas>div {padding-top:10px;border-top:1px solid #cbd3df}
@media(max-width:820px){
 .portfolio-feature .featured-project__inner {grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
 .portfolio-feature.featured-project--dark .featured-project__visual {aspect-ratio:1.65;padding:24px;justify-content:center}
 .portfolio-feature .featured-project__copy {display:flex;flex-direction:column;justify-content:center}
 .challenge-grid--secondary .challenge--iveco {grid-template-columns:1fr}
 .challenge-grid--secondary .challenge--iveco>a:first-child {min-height:0;aspect-ratio:1.6}
 .challenge-grid--secondary .challenge--iveco>div {padding:28px}
 .iveco-patterns {grid-template-columns:1fr}
}
@media(max-width:650px){
 .iveco-audit,.iveco-redesign {grid-template-columns:1fr;gap:28px}
 .iveco-audit figure,.iveco-redesign figure {max-width:250px}
 .iveco-ideas {grid-template-columns:1fr}
 .portfolio-feature.featured-project--dark .featured-project__visual {aspect-ratio:auto;min-height:230px}
}
/* Fluid breathing room between the three featured projects. */
.portfolio-feature {margin-bottom:clamp(28px,3.4vw,50px)}
@media(max-width:650px){.portfolio-feature {border-radius:12px;margin-bottom:clamp(22px,5.5vw,30px)}}
/* Viewport-aware hero, calmer About heading and responsive safeguards. */
.case-hero>*,.story-grid>*,.reflection>*,.feature-split>*,.doctor-feature-split>*,.jobbot-responsive>*,.iveco-audit>*,.iveco-redesign>*,.challenge-grid>*,.case-facts>*,.hero-meta>* {min-width:0}
.project-page main .story-copy,.project-page main .feature-split-copy,.project-page main .doctor-feature-copy {overflow-wrap:break-word}
.project-page main .case-hero h1,.project-page main .earlier-heading h1 {overflow-wrap:anywhere}
.doctor-screen-pair,.cinema-screen-pair,.cinema-challenge-screens {max-width:100%;min-width:0}
@media(max-width:1000px) and (min-width:821px){
  .project-page main .case-hero {grid-template-columns:1fr 1fr;gap:32px}
 .project-page main .case-hero h1 {font-size:clamp(2.7rem,5.2vw,3.4rem)}
 .doctor-ia>div {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
 
  .project-page main .reflection {grid-template-columns:1fr;gap:20px}
}
@media(max-width:480px){
   .project-page main .case-facts {grid-template-columns:1fr;gap:16px}
 .project-page main .case-hero h1,.project-page main .earlier-heading h1 {font-size:clamp(2.2rem,9vw,2.65rem)}
 .portfolio-feature .play-metrics__header {gap:12px}
 .portfolio-feature .play-metrics__header h4 {font-size:var(--fs-base)}
 .portfolio-feature .play-metrics__grid strong {font-size:var(--fs-base)}
 .portfolio-feature .play-metrics__grid>div {padding:8px 4px}
 }
.project-page main .earlier-heading>div,.infinitum-identity>div {min-width:0}
.portfolio-feature .play-metrics__header {grid-template-columns:48px minmax(0,1fr)}
@media(max-width:480px){
 .infinitum-identity {grid-template-columns:64px minmax(0,1fr);gap:16px}
 .infinitum-icon {width:64px;height:64px}
 .infinitum-identity h3 {font-size:1.65rem;line-height:1.2}
}
/* Keep JobBot's four summary cards within the reading column. */
.project-page main .stat-grid {grid-template-columns:repeat(var(--stat-cols),minmax(0,1fr))}
.project-page main .stat-grid>div {min-width:0;overflow-wrap:anywhere}
.project-page main .stat-grid--4 {grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){.project-page main .stat-grid:not(.stat-grid--metric) {grid-template-columns:1fr}}
.hero.section-shell {width:100%;max-width:none;margin-inline:0}
.hero h1 {max-width:1160px;line-height:1.07}
.hero .circle-link {flex-shrink:0;width:120px;height:120px;padding:10px;gap:6px;font-size:var(--fs-base);line-height:1.3;text-align:center}
.hero .circle-link span {flex:0 1 auto}
.hero .circle-link b {flex-shrink:0}
@media(max-width:820px){.hero .circle-link {width:100px;height:100px;font-size:var(--fs-sm);padding:9px;gap:5px;align-self:center}}
@media(max-width:480px){.hero .circle-link {width:104px;height:104px}}
/* Give About and the closing invitation a calmer shared rhythm. */
.contact h2 {font-size:clamp(2.8rem,5.1vw,4.75rem);line-height:1.08;max-width:1050px}
.contact a {display:inline-block;font-size:clamp(1.1rem, 2vw, 1.5rem);border-bottom:1px solid var(--accent-mint);padding-bottom:.3rem;margin-top:clamp(28px,3.5vw,42px)}
@media(max-width:820px){
    .contact h2 {font-size:clamp(2.7rem,6.6vw,3.7rem)}
}
@media(max-width:480px){
    .contact h2 {font-size:clamp(2.45rem,10.2vw,3.15rem)}
 .contact a {overflow-wrap:anywhere;margin-top:30px}
}
/* Keep section labels clear of the fixed navigation when reached by anchors. */
#about {scroll-margin-top:96px}
#work {scroll-margin-top:-92px}
.contact {background:var(--ink);color:white;padding-block:clamp(64px,6vw,84px)}
@media(max-width:820px){#about {scroll-margin-top:78px}#work {scroll-margin-top:-92px}.contact {padding-block:68px}}
@media(max-width:480px){.contact {padding-block:60px}}
/* Coinplaza: identity and direct exchange case study. */
.coinplaza-case {background:#fff4e6}
.coinplaza-case .case-facts {margin-bottom:clamp(32px,4vw,50px)}
.coinplaza-case .story-grid {border-top:1px solid #e7d0b4;margin-top:clamp(38px,5vw,64px);padding-top:clamp(35px,4vw,54px);padding-bottom:12px}

.coinplaza-case .story-index p {color:#5d4b38}
.coinplaza-case .story-copy>p+p {margin-top:18px}
.coinplaza-flow {margin-top:clamp(34px,4vw,54px);background:#242424;color:#fff;border-radius:16px;padding:clamp(24px,4vw,48px)}
.coinplaza-flow__heading {display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid #ffffff3b;padding-bottom:24px;margin-bottom:28px}
.coinplaza-flow__heading span,.coinplaza-flow li>span {
  color: #e48012;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .12em;
}
.coinplaza-decisions>div>span {
  color: var(--orange-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .12em;
}
.coinplaza-flow__heading p {margin:0;font:700 clamp(1.35rem,2.5vw,2rem)/1.2 Manrope,sans-serif;letter-spacing:-.035em}
.coinplaza-flow ol {list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,28px);padding:0;margin:0}
.coinplaza-flow li {min-width:0;border-left:1px solid #ffffff36;padding-left:clamp(14px,2vw,24px)}
.coinplaza-flow li strong {display:block;font:700 clamp(1.1rem,1.5vw,1.35rem)/1.3 Manrope,sans-serif;margin:14px 0 8px}
.coinplaza-flow li p {color:#cdd0d1;line-height:1.55;font-size:var(--fs-md);margin:0}
.coinplaza-archive {margin:clamp(28px,3vw,40px) 0 0;background:#fff;border-radius:14px;padding:clamp(10px,1.5vw,20px);box-shadow:0 14px 40px #6a3d1510}
.coinplaza-archive__image {overflow:hidden;border-radius:7px}
.coinplaza-archive img {display:block;width:100%;height:auto}
.coinplaza-archive figcaption {display:flex;justify-content:space-between;gap:16px;color:#5d5248;padding:16px 4px 2px;font-size:var(--fs-sm)}
.coinplaza-archive figcaption span:first-child {font-weight:700;color:#29211a}
.coinplaza-decisions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,42px);margin-top:clamp(34px,4vw,52px)}
.coinplaza-decisions>div {border-top:2px solid #e48012;padding-top:20px;min-width:0}
.coinplaza-decisions h4 {font:700 clamp(1.1rem,1.7vw,1.4rem)/1.3 Manrope,sans-serif;letter-spacing:-.03em;margin:14px 0 10px}
.coinplaza-decisions p {color:#53493f;font-size:var(--fs-md);line-height:1.6;margin:0}

@media(max-width:820px){.coinplaza-flow ol {grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}.coinplaza-decisions {grid-template-columns:1fr;gap:24px}}
@media(max-width:650px){.coinplaza-flow__heading {display:block}.coinplaza-flow__heading p {margin-top:12px}.coinplaza-flow ol {grid-template-columns:1fr}.coinplaza-archive figcaption {display:block}.coinplaza-archive figcaption span {display:block}.coinplaza-archive figcaption span+span {margin-top:4px}}
.project-page main .coinplaza-case .story-index>span,.project-page main .coinplaza-case .reflection>span {color:var(--orange-text)}
.project-page main .coinplaza-case .reflection {background:#f8e6cf;border-color:#dcbf9a;border-radius:12px;padding:clamp(24px,3vw,36px)}
/* Selected Coinplaza prototype screens and quieter home thumbnails. */
.portfolio-feature .featured-project__visual>img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}
.portfolio-feature.featured-project--mint .featured-project__visual {background:#bde9dc}
.portfolio-feature.featured-project--jobbot .featured-project__visual {background:#cbe0f8}

.challenge-grid--secondary .challenge--iveco>a:first-child {background:#acbff6}
.challenge-grid--secondary .challenge--doctor>a:first-child {background:#dfeaff}
.challenge-grid--secondary .challenge--bending-spoons>a:first-child {background:#f1f3f5}
.portfolio-feature:hover .featured-project__visual>img,.challenge-grid--secondary .challenge:hover img {transform:scale(1.012)}
.coinplaza-screens {border-top:1px solid var(--line-sand);margin-top:clamp(42px,5vw,70px);padding-top:clamp(38px,4vw,56px)}
.coinplaza-screens__intro {display:grid;grid-template-columns:.8fr 1.5fr;gap:12px 50px;margin-bottom:clamp(24px,3vw,38px)}
.coinplaza-screens__intro .eyebrow {grid-row:span 2;color:var(--orange-text)}
.coinplaza-screens__intro h3 {font:700 clamp(1.8rem,3vw,2.7rem)/1.13 Manrope,sans-serif;letter-spacing:-.045em;margin:0}
.coinplaza-screens__intro p {color:#53493f;margin:0;max-width:650px;line-height:1.65}
.coinplaza-screens figure {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(230px,.7fr);align-items:center;gap:clamp(24px,4vw,56px);margin:0;padding:clamp(20px,2vw,28px) 0;border-top:1px solid var(--line-sand)}
.coinplaza-screens figure a {display:block;min-width:0;overflow:hidden;border:8px solid white;border-radius:12px;box-shadow:0 12px 38px #55301415;background:#ff9c1b;line-height:0}
.coinplaza-screens figure img {display:block;width:100%;height:auto}
.coinplaza-screens figcaption span {
  display: block;
  color: var(--orange-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.coinplaza-screens figcaption strong {display:block;font:700 clamp(1.25rem,2vw,1.7rem)/1.25 Manrope,sans-serif;letter-spacing:-.035em}
.coinplaza-screens figcaption p {color:#53493f;font-size:var(--fs-base);line-height:1.6;margin:14px 0 0}
.coinplaza-identity__heading {
  display: grid;
  grid-template-columns: .8fr 1.5fr;
  gap: 50px;
  align-items: baseline;
}
.coinplaza-identity__heading .eyebrow {color:var(--orange-text)}
.coinplaza-identity__heading h3 {font:700 clamp(1.8rem,3vw,2.7rem)/1.13 Manrope,sans-serif;letter-spacing:-.045em;margin:0}
@media(max-width:820px){.coinplaza-screens__intro,.coinplaza-identity__heading {grid-template-columns:1fr;gap:16px}.coinplaza-screens figure {grid-template-columns:1fr;gap:18px}.coinplaza-screens figcaption {max-width:680px}}
@media(max-width:480px){.coinplaza-screens figure a {border-width:5px}}
/* Split naming and logo into two compact editorial sections. */
.coinplaza-identity {border-top:1px solid var(--line-sand);padding-top:clamp(38px,4vw,56px);margin-top:clamp(52px,5vw,72px)}
.coinplaza-identity__heading {margin-bottom:clamp(24px,3vw,38px)}
.coinplaza-identity__item {display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr);gap:clamp(24px,5vw,68px);padding:clamp(28px,3.5vw,46px) 0;border-top:1px solid var(--line-sand);align-items:start}
.coinplaza-identity__item-heading span {
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--orange-text);
}
.coinplaza-identity__item-heading h4 {font:700 clamp(1.4rem,2.4vw,2rem)/1.18 Manrope,sans-serif;letter-spacing:-.04em;margin:14px 0 0;max-width:330px}
.coinplaza-identity__item-content {min-width:0}
.coinplaza-identity__item-content>p {max-width:680px;margin:0;color:#413a33;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.7}
.coinplaza-name-formula {display:flex;align-items:baseline;flex-wrap:wrap;gap:clamp(12px,2vw,26px);margin-top:clamp(20px,3vw,32px);padding-top:18px;border-top:1px solid var(--line-sand)}
.coinplaza-name-formula>span {font:700 clamp(1.35rem,2.2vw,1.85rem)/1.25 Manrope,sans-serif;letter-spacing:-.04em}
.coinplaza-name-formula small {display:block;color:#685c4c;font:500 var(--fs-xs)/1.4 'DM Sans',sans-serif;letter-spacing:0;margin-top:4px}
.coinplaza-name-formula b {font:500 1.35rem/1 Manrope,sans-serif;color:var(--orange-text)}
@media(max-width:820px){.coinplaza-identity__item {grid-template-columns:1fr;gap:18px}.coinplaza-identity__item-heading h4 {max-width:none;margin-top:8px}}

/* Arkade wallet mockup, shown in full on its lavender background. */
.challenge-grid--secondary .challenge--arkade>a:first-child {background:#d3c6f4}
.challenge-grid--secondary .challenge--arkade>a:first-child img {display:block;width:100%;height:100%;padding:0;object-fit:contain}

/* Full-bleed project mockups sized for each card. */
.portfolio-feature.featured-project--jobbot .featured-project__visual>img {object-fit:cover;padding:0}
.challenge-grid--secondary .challenge--iveco>a:first-child img,
.challenge-grid--secondary .challenge--coinplaza>a:first-child img,
.challenge-grid--secondary .challenge--doctor>a:first-child img,
.challenge-grid--secondary .challenge--bending-spoons>a:first-child img {object-fit:cover;padding:0}

/* Hover colors drawn from the project imagery. */
.challenge--doctor {background:#dfeaff;--title-accent:#4a7fe0}

/* Simple Helbiz cover, matching the other full-bleed mockups. */
.portfolio-feature.featured-project--mint .featured-project__visual>img {object-fit:cover;padding:0}

/* Project color updates and Coinplaza identity swatch. */
.portfolio-feature.featured-project--mint {background:#dff7f3}
.challenge--coinplaza {background:var(--orange);--title-accent:#F7931A}
.coinplaza-color-swatch {display:flex;align-items:end;justify-content:space-between;gap:20px;max-width:680px;min-height:clamp(130px,16vw,180px);margin-top:clamp(22px,3vw,32px);padding:clamp(24px,3vw,34px);border-radius:12px;background:#F7931A;color:#24170b}
.coinplaza-color-swatch span {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
}
.coinplaza-color-swatch strong {font:700 clamp(1.8rem,4vw,3.4rem)/1 Manrope,sans-serif;letter-spacing:-.05em}
@media(max-width:480px){.coinplaza-color-swatch {align-items:start;flex-direction:column;justify-content:space-between}}

/* Coinplaza image ground and Bending Spoons title hover. */
.challenge--bending-spoons {background:#e6e9f4;--title-accent:#d9675b}

/* Original IVECO panel, slightly more saturated. */
.portfolio-feature.featured-project--jobbot {background:#e4efff}

/* Alternate featured artwork on wide screens: Helbiz left, JobBot right, Infinitum left. */
@media (min-width:821px) {
 .portfolio-feature.featured-project--jobbot .featured-project__visual {order:2}
}

/* ------------------------------------------------------------------
   Tag chips — one component, colours adapt to the surface they sit on.
   Set --chip-* on a card; the chip rule below never changes.
   ------------------------------------------------------------------ */
.featured-project,
.challenge {
  --chip-bg: #fff;
  --chip-fg: #4f5a6a;
  --chip-border: rgba(11,13,18,.12);
}
.featured-project--dark {
                 color: var(--text-on-dark);
                 --chip-bg: rgba(255,255,255,.10);
                 --chip-fg: #e6e9ee;
                 --chip-border: rgba(255,255,255,.16);
}
.featured-project .project-tags span,
.challenge .project-tags span {
  background: var(--chip-bg);
  color: var(--chip-fg);
  border-color: var(--chip-border);
  font-weight: 500;
}
.project-page main .jobbot-ranking-head h3,.project-page main .jobbot-responsive__copy h3 {margin:0;font:700 clamp(1.9rem,3vw,2.65rem)/1.12 Manrope,sans-serif;letter-spacing:-.04em}
.project-page main .jobbot-ranking-head .eyebrow {margin-bottom:14px}
/* Keep secondary text readable on the tinted project backgrounds */
.project-page main .case-study .case-facts span,.project-page main .case-study .doctor-kicker,.project-page main .case-study .screen-frame-label {color:#4a5565}
.project-page main .case-study:not(.coinplaza-case):not(.case-study--arkade) .story-index>span {color:#2448cf}
.project-page main .case-study .doctor-benchmark-grid>div>span,.project-page main .case-study .doctor-phone-card>span {color:#4a5565}

/* Inner-page header and section rhythm taken from v1.08 (desktop and tablet) */
@media(min-width:821px){
 .project-page main .case-study,.project-page main .earlier-work {padding-top:64px}
 .project-page main .case-hero {gap:60px;margin-bottom:0}
 .project-page main .case-hero h1,.project-page main .earlier-heading h1 {font-size:clamp(3.2rem,6.5vw,5.8rem);line-height:1;letter-spacing:-.065em}
 .project-page main .case-intro {max-width:590px;font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.32;color:var(--ink)}
 .project-page main .case-facts {margin:42px 0 46px;padding-block:22px;gap:24px}
 .project-page main .case-facts span {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  font-weight: 500;
  text-transform: uppercase;
}
 .project-page main .case-facts strong {font-size:var(--fs-md);font-weight:700;line-height:1.55}
 .project-page main .story-grid {grid-template-columns:.7fr 1.3fr;gap:60px;margin-top:0;padding:68px 0 36px;border-top:0}
 .project-page main .story-index {display:flex;gap:1rem;align-items:flex-start}
 .project-page main .story-index>span {font:700 2.8rem/1 Manrope,sans-serif;margin:0}
 .project-page main .case-study:not(.coinplaza-case):not(.case-study--arkade) .story-index>span {color:var(--ink)}
 .project-page main .story-index p {margin:.25rem 0;max-width:160px}
 .project-page main .story-copy h3 {font-size:clamp(1.9rem,3vw,2.75rem);line-height:1.12;letter-spacing:-.052em}
 .project-page main .story-copy>p {max-width:720px;font-size:var(--fs-lg);line-height:1.55}
}

/* Desktop hero: always exactly one screen tall. On short windows it tightens, in order,
   (1) navbar -> "Available" and (2) title -> intro, then the other gaps and finally the title;
   on tall windows the extra height is shared between the gaps. */
@media(min-width:821px){
 .hero {--fs:min(7.2vw,7rem);--s:calc(138.67px - 1.07*var(--fs));--X:max(0px,calc(100svh - 876px));--R:max(0px,calc(876px - 100svh));--c1:min(50px,calc(var(--R)*.6));--c2:min(calc(var(--s) + 20px),calc(var(--R) - var(--c1)));--c3:max(0px,calc(var(--R) - var(--c1) - var(--c2)));gap:0;min-height:100svh;justify-content:flex-start;padding-top:calc(150px - var(--c1) + var(--X)*.25);padding-bottom:28px}
 .hero h1 {font-size:max(3rem,min(var(--fs),calc((100svh - 411px)/3.21)));margin-top:max(14px,calc(var(--s) - var(--c3)/2 + var(--X)*.15));margin-bottom:max(14px,calc(var(--s) + 34px - var(--c2) + var(--X)*.2))}
 .hero-bottom {margin-top:0;margin-bottom:0}
 .hero-meta {margin-top:max(14px,calc(var(--s) + 30px - var(--c3)/2 + var(--X)*.4))}
}

/* Unified small text: tags, eyebrows, order labels, metric labels */
.project-tags span,.portfolio-feature .project-tags span,.challenge .project-tags span{font-size:var(--fs-sm)}
.eyebrow,.project-order{font-size:var(--fs-sm)}
.play-metrics__grid span{font-size:var(--fs-xs)}
@media(max-width:820px){.play-metrics__grid span{font-size:var(--fs-xs)}}

/* "Explore my work" lands with the white section at the top of the screen (no blue left) and the title clear of the nav */
.work-intro {padding-top:88px}
.work-intro .section-heading h2 {font-size:clamp(2.2rem,3.4vw,3rem)}
@media(max-width:820px){.work-intro {padding-top:80px}}

/* Infinitum stat tiles centred */
.portfolio-feature .play-metrics__grid>div {text-align:center;justify-items:center}

.contact .eyebrow {color:inherit}

/* Helbiz Reserve: pairs of phone screens next to the copy */
.feature-split--pair {grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:center}
.feature-split--pair.feature-split--reverse {grid-template-columns:minmax(0,520px) minmax(0,1fr)}
.reserve-pair {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;min-width:0}
.reserve-screen {margin:0}
.reserve-screen .screen-frame-label {margin:0 4px 12px}
.reserve-screen img {display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 12px 28px rgba(16,20,28,.12)}
.project-page main .story-note {max-width:62ch;margin:56px 0 24px;color:#4b5663;line-height:1.64}
.feature-split--reverse .reserve-pair {order:-1}
@media(max-width:820px){
  .feature-split--pair,.feature-split--pair.feature-split--reverse {grid-template-columns:1fr}
  .feature-split--pair.feature-split--reverse .reserve-pair {order:0}
  .reserve-pair {width:min(100%,520px);margin-inline:auto}
}

/* Inner-page links: no underline, hover recolours like the home card titles */
.project-page main .text-link {border-bottom:0;padding-bottom:0;transition:color .2s}
.project-page main .next-project strong {transition:color .2s}
.project-page main .text-link:hover {color:var(--hv-self,var(--blue));text-decoration:none}
.project-page main .next-project:hover strong {color:var(--hv-next,var(--blue));text-decoration:none}
.project-page main .text-link:focus-visible,.project-page main .next-project:focus-visible {outline:2px solid var(--hv-self,var(--blue));outline-offset:6px;border-radius:4px}

/* Helbiz Reserve: three phones next to the copy, captions under slides */
.feature-split--trio {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
.reserve-pair--3 {grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.project-page main .wide-media figcaption {margin:14px 4px 0;color:#4a5565;font-size:var(--fs-sm);line-height:1.45}
@media(max-width:820px){.feature-split--trio {grid-template-columns:1fr}.reserve-pair--3 {width:100%}}
@media(max-width:560px){.reserve-pair--3 {grid-template-columns:1fr;width:min(100%,300px)}}

.project-page--helbiz main .reflection {background:#c4ece4}
.project-page main .wide-media+.wide-media {margin-top:40px}
.project-page main .stat-grid--lead>div>span {display:block;margin-bottom:16px;font:700 clamp(1.35rem,2vw,1.7rem)/1.2 Manrope,sans-serif;letter-spacing:-.03em;text-transform:none;color:var(--ink)}

/* Open grids: hairline-separated columns instead of white cards */
.project-page main .open-grid {display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:0 36px;margin:0 0 16px}
.project-page main .open-grid--2 {--cols:2}.project-page main .open-grid--3 {--cols:3}.project-page main .open-grid--4 {--cols:4}.project-page main .open-grid--5 {--cols:5;gap:0 28px}
.project-page main .open-grid>div {min-width:0;border-top:1px solid rgba(11,13,18,.22);padding:22px 0 34px}
.project-page main .open-grid span {display:block;margin-bottom:14px;font-size:var(--fs-xs);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#4a5565}
.project-page main .open-grid strong {display:block;margin-bottom:10px;font:700 clamp(1.15rem,1.6vw,1.45rem)/1.2 Manrope,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.project-page main .open-grid p {margin:0;color:#3f4a58;font-size:var(--fs-md);line-height:1.6}
.project-page main .open-grid ul {margin:0;padding-left:1.1em;color:#3f4a58;font-size:var(--fs-md);line-height:1.65}
.project-page main .open-grid li+li {margin-top:6px}
.project-page main .open-grid--lead>div>span {margin-bottom:18px;font:700 clamp(1.4rem,2vw,1.8rem)/1.15 Manrope,sans-serif;letter-spacing:-.035em;text-transform:none;color:var(--ink)}
.project-page main .open-grid--2:not(.open-grid--lead)>div strong {font-size:clamp(1.4rem,2.2vw,1.9rem)}
@media(max-width:1000px){.project-page main .open-grid--4,.project-page main .open-grid--5 {--cols:2}}
@media(max-width:820px){.project-page main .open-grid--3 {--cols:1}.project-page main .open-grid {gap:0 28px}}
@media(max-width:650px){.project-page main .open-grid--2,.project-page main .open-grid--4,.project-page main .open-grid--5 {--cols:1}}
.project-page main .wide-media+.open-grid {margin-top:48px}

/* In-page chapter nav (sticky under the header) */
.case-nav {position:sticky;top:57px;z-index:20;margin:48px 0 -40px;background:var(--nav-bg,#f7f8fa);border-bottom:1px solid rgba(11,13,18,.16)}
.case-nav__inner {display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;padding:14px 0}
.case-nav__inner::-webkit-scrollbar {display:none}
.case-nav a {flex:none;padding:4px 0;font-size:var(--fs-sm);font-weight:500;color:#4a5565;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.case-nav a:hover {color:var(--ink)}
.case-nav a.is-active {color:var(--ink);font-weight:700;border-bottom-color:var(--case-accent)}
.case-nav a:focus-visible {outline:2px solid var(--case-accent);outline-offset:4px;border-radius:3px}
.project-page main [id^="s-"] {scroll-margin-top:24px}
@media(max-width:820px){.case-nav {top:57px;margin-top:36px}.case-nav__inner {gap:22px}.project-page main [id^="s-"] {scroll-margin-top:16px}}

/* Open grids as white cards, keeping the horizontal layout */
.project-page main .open-grid {gap:12px}
.project-page main .open-grid>div {background:#fff;border:1px solid #dce1e8;border-radius:10px;padding:24px}
.project-page main .open-grid--5 {gap:12px}

/* Link hover = the project's own colour from the home cards (on light backgrounds) */
.project-page--helbiz {--hv-self:#199988}
.project-page--jobbot {--hv-self:#3978e8}
.project-page--infinitum {--hv-self:#2d5fc4}
.project-page--iveco {--hv-self:#396eff}
.project-page--coinplaza {--hv-self:var(--orange-text)}
.project-page--arkade {--hv-self:#5b3df5}
.project-page--doctor {--hv-self:#4a7fe0}
.project-page--bending-spoons {--hv-self:#d9675b}
.next-project[href="helbiz.html"] {--hv-next:#199988}
.next-project[href="jobbot.html"] {--hv-next:#3978e8}
.next-project[href="infinitum.html"] {--hv-next:#2d5fc4}
.next-project[href="iveco.html"] {--hv-next:#396eff}
.next-project[href="coinplaza.html"] {--hv-next:var(--orange-text)}
.next-project[href="arkade.html"] {--hv-next:#5b3df5}
.next-project[href="doctor.html"] {--hv-next:#4a7fe0}
.next-project[href="bending-spoons.html"] {--hv-next:#d9675b}
.project-page main .grid-title {margin:56px 0 20px;font:700 clamp(1.9rem,3vw,2.65rem)/1.1 Manrope,sans-serif;letter-spacing:-.04em}

/* Helbiz: more air between blocks */
.project-page--helbiz main blockquote cite {display:block;margin-top:10px;font:500 var(--fs-sm)/1.3 "DM Sans",sans-serif;font-style:normal;color:#4a5565}
.project-page--helbiz main .open-grid,.project-page--helbiz main .open-grid--5 {gap:20px}
.project-page--helbiz main .open-grid>div {padding:28px}
.project-page--helbiz main .grid-title {margin:64px 0 28px}
@media(min-width:821px){.project-page--helbiz main .story-grid {padding-top:88px;padding-bottom:48px}}
/* Coinplaza: section labels use the home hover orange */
.project-page main .coinplaza-case .story-index>span,.project-page main .coinplaza-case .reflection>span,.coinplaza-screens__intro .eyebrow,.coinplaza-identity__heading .eyebrow {color:#F7931A}
.coinplaza-decisions>div>span,.coinplaza-screens figcaption span,.coinplaza-identity__item-heading>span,.coinplaza-identity__item-heading .eyebrow {color:#F7931A}

/* ===== Helbiz redesign ===== */
/* Chapter nav as a route: stops along a line, the part already travelled in teal */
.project-page .case-nav__inner {gap:0;padding:14px 0 12px}
.project-page .case-nav a {position:relative;padding:20px 30px 2px 0;border-bottom:0;font-weight:500}
.project-page .case-nav a::before {content:"";position:absolute;top:5px;left:6px;right:-6px;height:2px;background:rgba(11,13,18,.16)}
.project-page .case-nav a:last-child::before {display:none}
.project-page .case-nav a::after {content:"";position:absolute;top:0;left:0;width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:var(--nav-bg,#f7f8fa);border:2px solid rgba(11,13,18,.32);transition:background-color .2s,border-color .2s,box-shadow .2s}
.project-page .case-nav a.is-passed::before {background:var(--case-accent)}
.project-page .case-nav a.is-passed::after {background:var(--case-accent);border-color:var(--case-accent)}
.project-page .case-nav a.is-active {font-weight:500;border-bottom-color:transparent}
.project-page .case-nav a.is-active::after {background:var(--case-accent);border-color:var(--case-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--case-accent) 22%,transparent)}
.project-page .case-nav a:hover::after {border-color:var(--case-accent)}
.project-page .case-nav a:last-child {padding-right:0}

/* Research methods: one line icon per method */
.project-page--helbiz main .og-icon {display:block;width:34px;height:34px;margin-bottom:22px;color:#087859}

/* Helbiz app review: liked / fell short markers */
.project-page main .mark-list {list-style:none;padding-left:0}
.project-page main .mark-list li {position:relative;padding-left:32px}
.project-page main .mark-list li+li {margin-top:10px}
.project-page main .mark-list li::before {content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:#d3f2ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5' fill='none' stroke='%23087859' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.project-page main .mark-list--bad li::before {background-color:#fde6e3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3.2 3.2 5.6 5.6m0-5.6-5.6 5.6' fill='none' stroke='%23b8382e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-size:10px}

/* Insights: the one dark band of the page, echoing the home hero */
.project-page main .case-band {position:relative;margin:72px 0 0;padding:0 0 104px;background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);color:#fff}
.project-page main .case-band .story-grid {border-top:0}
.project-page main .case-study.case-study .case-band .story-index>span,.project-page main .case-band .story-copy h3 {color:#fff}
.project-page main .case-band .story-index p,.project-page main .case-band .story-copy>p {color:var(--text-on-dark-muted)}
.project-page main .case-band blockquote {border-left-color:var(--band-accent,#7ee8d4);color:#fff;font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.03em;max-width:none}
.project-page main .case-band blockquote cite {color:var(--text-on-dark-muted);letter-spacing:0;margin-top:14px}
.project-page main .case-band .open-grid>div {background:#151a22;border-color:#2a313d}
.project-page main .case-band .open-grid span {color:var(--band-accent,#7ee8d4)}
.project-page main .case-band .open-grid strong {color:#fff}
.project-page main .case-band .open-grid p {color:var(--text-on-dark-muted)}
.project-page main .case-band+.story-grid {padding-top:104px}


/* App screens on a panel, like the home card */
.project-page--helbiz main .feature-split--pair {grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(40px,6vw,88px)}
.project-page--helbiz main .feature-split--pair.feature-split--reverse {grid-template-columns:minmax(0,560px) minmax(0,1fr)}
.project-page--helbiz main .reserve-pair {background:#bfeade;border-radius:20px;padding:32px 32px 36px;gap:20px}
.project-page--helbiz main .reserve-screen .screen-frame-label {color:#0b5444;margin:0 2px 14px}
.project-page--helbiz main .reserve-screen img {border-radius:24px;box-shadow:0 22px 44px rgba(6,70,58,.2)}


@media(max-width:1000px){.project-page--helbiz main .feature-split--pair,.project-page--helbiz main .feature-split--pair.feature-split--reverse {grid-template-columns:1fr}.project-page--helbiz main .feature-split--reverse .reserve-pair {order:0}.project-page--helbiz main .reserve-pair {width:min(100%,600px);margin-inline:auto}}
@media(max-width:820px){
 .project-page .case-nav a {padding-right:24px}
 .project-page main .case-band {margin-top:56px;padding-bottom:72px}
 .project-page main .case-band+.story-grid {padding-top:64px}
}
@media(max-width:560px){.project-page--helbiz main .reserve-pair {padding:20px 18px 24px;gap:14px}.project-page--helbiz main .reserve-screen img {border-radius:16px}}
.project-page .case-nav {box-shadow:0 0 0 100vmax var(--nav-bg,#f7f8fa);clip-path:inset(0 -100vmax)}
.project-page .case-nav__inner {padding-left:6px;padding-right:6px;margin-inline:-6px}

/* ===== Shared: reflection as an open closing statement, in each project's accent ===== */
.project-page main .reflection,.project-page main .coinplaza-case .reflection {background:none;border:0;border-top:2px solid var(--case-accent);border-radius:0;padding:36px 0 0;margin-top:96px}
.project-page main .reflection>span {font-weight:700}
.project-page main .reflection p {margin:0;font:500 clamp(1.25rem,2vw,1.6rem)/1.5 Manrope,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.project-page main .coinplaza-case .reflection {border-top-color:#F7931A}
@media(max-width:820px){.project-page main .reflection,.project-page main .coinplaza-case .reflection {margin-top:64px;padding:28px 0 0}.project-page main .reflection p {font-size:1.15rem}}

/* ===== Shared: dark blocks run edge to edge ===== */
.coinplaza-flow {border-radius:0;box-shadow:0 0 0 100vmax #242424;clip-path:inset(0 -100vmax);padding-inline:0;padding-block:clamp(48px,6vw,80px)}


.project-page:not(.project-page--helbiz):not(.project-page--arkade):not(.project-page--coinplaza) main .reflection>span {color:#2448cf}

/* Helbiz: pain points read as problems */
.project-page--helbiz main .pp-badge {display:block;width:30px;height:30px;padding:6px;box-sizing:border-box;margin-bottom:16px;border-radius:50%;background:#fde6e3;color:#b8382e}


/* ===== Shared case-study system: page colours, title, chapter marks, dark band ===== */
.project-page--helbiz main {--nav-bg:#dff7f3;--title-color:#199988;--band-accent:#7ee8d4}
.project-page--jobbot main {--nav-bg:#dbe6f5;--title-color:#3978e8;--band-accent:#8db9ff}
.project-page--iveco main {--nav-bg:#e5ebff;--title-color:#396eff;--band-accent:#8db9ff}
.project-page--coinplaza main {--nav-bg:#fff4e6;--title-color:#F7931A;--case-accent:#e48012;--band-accent:#F7931A}
.project-page--arkade main {--nav-bg:#eef0ff;--title-color:#5b3df5;--band-accent:#b9a6ff}
.project-page--doctor main {--nav-bg:#dfeaff;--title-color:#4a7fe0;--band-accent:#8db9ff}
.project-page--bending-spoons main {--nav-bg:#f1f3f5;--title-color:#d9675b;--band-accent:#ff9d8f}
.project-page main .case-study .case-hero h1 {color:var(--title-color,var(--ink))}

/* Chapter marks inside feature sections look like the numbered chapter index */
.project-page main .chapter-mark {margin:0 0 22px}
.project-page main .coinplaza-identity__heading .chapter-mark {margin:0}

/* Dark band: shared card treatments */
.project-page main .case-band .stat-grid:not(.stat-grid--metric)>div,.project-page main .case-band .arkade-ideas-grid>div {background:#151a22;border-color:#2a313d}
.project-page main .case-band .stat-grid span {color:var(--band-accent)}
.project-page main .case-band .stat-grid strong,.project-page main .case-band .arkade-ideas-grid strong,.project-page main .case-band .iveco-ideas h4 {color:#fff}
.project-page main .case-band .stat-grid p,.project-page main .case-band .stat-grid li,.project-page main .case-band .iveco-ideas p {color:var(--text-on-dark-muted)}
.project-page main .case-band .iveco-ideas>div {border-top-color:#3a4250}
.project-page main .case-band .doctor-ia>span {background:#151a22;border-color:#2a313d;color:#fff}
.project-page main .case-band .doctor-ia b {background:#151a22;border-color:#2a313d;color:#fff}
.project-page main .case-band .doctor-ia>div::before,.project-page main .case-band .doctor-ia b::before {border-color:#4a5363}
.project-page main .case-band+* {margin-top:clamp(56px,7vw,96px)}
.project-page main .case-band+.story-grid {margin-top:0}

/* Lists of ideas read as the same white cards used elsewhere */
.project-page main .arkade-ideas-grid>div {background:#fff;border:1px solid #dce1e8;border-radius:10px;padding:20px 22px}
.project-page main .jobbot-ranking-head .chapter-mark {grid-column:1/-1}
/* Chapter numbers in each project's own colour, on every page */
.project-page main .case-study.case-study .story-index>span {color:var(--title-color,var(--ink))}
.project-page main .case-study.case-study .case-band .story-index>span {color:var(--band-accent,#fff)}
@media(min-width:1001px){.project-page main .chapter-mark {display:flex;gap:1rem;align-items:flex-start}.project-page main .chapter-mark>span {font:700 2.8rem/1 Manrope,sans-serif;margin:0}.project-page main .chapter-mark p {margin:.25rem 0}}

/* ================================================================
   One system for every case study: screenshots, icons, diagrams
   ================================================================ */
.project-page--helbiz main {--panel:#bfeade;--panel-ink:#4a5565;--ic-bg:#d3f2ea}
.project-page--jobbot main {--panel:#cddcf2;--panel-ink:#4a5565;--ic-bg:#e4efff}
.project-page--iveco main {--panel:#d3dcfb;--panel-ink:#4a5565;--ic-bg:#e5ebff}
.project-page--coinplaza main {--panel:#ffffff;--panel-ink:#4a5565;--ic-bg:#ffe6c7}
.project-page--arkade main {--panel:#dde1ff;--panel-ink:#4a5565;--ic-bg:#eef0ff}
.project-page--doctor main {--panel:#cbdaf8;--panel-ink:#4a5565;--ic-bg:#e6efff}
.project-page--bending-spoons main {--panel:#e1e4e9;--panel-ink:#4a5565;--ic-bg:#eef0f3}

/* Screenshot panel: tinted ground, title on top, rounded screen with soft shadow */
.project-page main .screen-frame,.project-page main .doctor-phone-card,.project-page main .wide-media--panel {background:var(--panel);border:0;border-radius:20px;padding:22px 24px 24px;box-shadow:none;overflow:visible}
.project-page main .screen-frame img,.project-page main .doctor-phone-card img {display:block;width:100%;height:auto;border:0;border-radius:14px;background:transparent;box-shadow:0 14px 30px rgba(16,20,28,.16)}
.project-page main .case-study .screen-frame-label,.project-page main .case-study .doctor-phone-card>span {display:block;margin:0 2px 14px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--panel-ink)}
.project-page main figure:has(.screen-frame)>figcaption,.project-page main .wide-media--panel figcaption {margin:12px 4px 0;color:#5a6674;font-size:var(--fs-sm);line-height:1.45}
.project-page main .wide-media--panel figcaption {margin:16px 2px 0;color:var(--panel-ink)}
.project-page main .wide-media--panel img {border-radius:12px;box-shadow:0 18px 40px rgba(16,20,28,.14)}

/* Pairs of screens share one panel; each screen keeps its own title */
.project-page main .doctor-screen-pair,.project-page main .cinema-screen-pair,.project-page main .cinema-challenge-screens,.project-page main .arkade-comparison,.project-page main .reserve-pair {display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:20px;width:fit-content;max-width:100%;margin-inline:0;padding:24px 28px 28px;background:var(--panel);border-radius:20px;overflow:visible;justify-content:start;align-items:start}
.project-page main .cinema-screen-pair {margin:56px auto 72px}
.project-page main :is(.doctor-screen-pair,.cinema-screen-pair,.cinema-challenge-screens,.arkade-comparison,.reserve-pair) :is(.screen-frame,.doctor-phone-card) {background:none;padding:0;border-radius:0}
.project-page main :is(.cinema-screen-pair,.cinema-challenge-screens) figcaption {margin:14px 2px 0;color:var(--panel-ink);font-size:var(--fs-sm);line-height:1.45}
.project-page main :is(.cinema-screen-pair,.cinema-challenge-screens) figcaption strong {color:inherit}
.project-page main .screen-frame--crop {aspect-ratio:auto}
.project-page main .screen-frame--crop img {aspect-ratio:508/1100;height:auto;object-fit:cover;object-position:top}

/* Same screen size everywhere: 240px screens, 288px single panels */
.project-page main :is(.doctor-single-screen,.jobbot-mobile-shot,.shot-single,.feature-split-visual:not(.feature-split-visual--narrow)) {width:min(100%,288px);margin:0;justify-self:center}
.project-page main .arkade-audit {grid-template-columns:288px minmax(0,1fr)}
.project-page main .iveco-redesign {background:none;padding:0;border-radius:0;grid-template-columns:288px minmax(0,1fr)}
.project-page main .iveco-audit {grid-template-columns:288px minmax(0,1fr)}

/* Coinplaza keeps its white frame, now with a title */
.project-page main .coinplaza-archive>.screen-frame-label {margin:4px 4px 14px}
.project-page main .coinplaza-archive figcaption {display:block;padding:14px 4px 2px}
.project-page main .coinplaza-screens figure a {border:0;padding:14px 10px 10px;background:#fff;line-height:1.3}
.project-page main .coinplaza-screens figure a .screen-frame-label {margin:0 4px 12px}
.project-page main .coinplaza-screens figure a img {border-radius:6px}

/* Bending Spoons: premium screens to the right of the context text */
.project-page main .cinema-broader-challenge {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,72px);align-items:center}
.project-page main .cinema-challenge-screens {margin:0}

/* Icons next to card titles */
.project-page main .ic-title {display:flex;align-items:center;gap:12px}
.project-page main .ic-title>.ic,.project-page main .jobbot-mobile-decisions .ic,.project-page main .arkade-audit-note>.ic {flex:none;width:36px;height:36px;padding:8px;box-sizing:border-box;border-radius:10px;background:var(--ic-bg);color:var(--title-color,var(--case-accent))}
.project-page main .ic.ic--bad {border-radius:50%;background:#fde6e3;color:#b8382e;padding:9px}
.project-page main .open-grid--lead .ic-title>.ic {width:42px;height:42px;padding:9px}

/* JobBot */
.project-page main .jobbot-product-hero {margin:36px 0 0}
.project-page--jobbot main .feature-split {grid-template-columns:minmax(0,1fr) minmax(0,540px)}
.project-page--jobbot main .feature-split-visual--narrow {width:min(100%,540px)}
.project-page main .jobbot-ranking-stage {grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:24px;align-items:start}
.project-page main .jobbot-ranking-stage .stat-grid {grid-template-columns:1fr;gap:12px}
.project-page main .jobbot-ranking-figure {margin:0}
.project-page main .jobbot-mobile-decisions {gap:12px;border-top:0}
.project-page main .jobbot-mobile-decisions>div {display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start;padding:18px 20px;background:#fff;border:1px solid #dce1e8;border-radius:12px}
.project-page main .jobbot-mobile-decisions strong {font:700 1.05rem/1.3 Manrope,sans-serif;margin-bottom:4px}

/* IVECO / Arkade critique lists: problems carry the same cross as Helbiz pain points */
.project-page main .iveco-observations.is-marked {list-style:none;padding-left:0}
.project-page main .iveco-observations.is-marked li {padding:0 0 22px}
.project-page main .iveco-observations .ic-title,.project-page main .iveco-patterns .ic-title,.project-page main .iveco-ideas .ic-title {font:700 1.15rem/1.3 Manrope,sans-serif}
.project-page main .iveco-observations .ic-title+p {padding-left:48px}
.project-page main .arkade-audit-note {grid-template-columns:36px 1fr;background:#fff;border-color:#dce1e8}
.project-page main .arkade-audit-note .note-num {display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:#5b3df5;color:#fff;font-size:11px;font-weight:800;vertical-align:2px}
.project-page main .arkade-audit-img {position:relative}
.project-page main .arkade-ideas-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.project-page main .arkade-ideas-grid strong {font:700 1rem/1.3 Manrope,sans-serif}

/* Doctor: information architecture tree with closed connectors */
.project-page main .doctor-ia>span {position:relative}
.project-page main .doctor-ia>span::after {content:"";position:absolute;left:50%;top:100%;height:14px;border-left:1.5px solid rgba(36,72,207,.35)}
.project-page main .doctor-ia>div {gap:0;margin-top:30px}
.project-page main .doctor-ia>div::before {display:none}
.project-page main .doctor-ia b {margin:0 5px}
.project-page main .doctor-ia b::before {top:-16px;height:16px;border-left:1.5px solid rgba(36,72,207,.35)}
.project-page main .doctor-ia b::after {content:"";position:absolute;top:-16px;left:-5px;right:-5px;border-top:1.5px solid rgba(36,72,207,.35)}
.project-page main .doctor-ia b:first-child::after {left:50%}
.project-page main .doctor-ia b:last-child::after {right:50%}

@media(max-width:1000px){
 .project-page main .cinema-broader-challenge {grid-template-columns:1fr}
 .project-page main .jobbot-ranking-stage {grid-template-columns:1fr}
 .project-page main .arkade-ideas-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .project-page main .arkade-audit {grid-template-columns:1fr;justify-items:center}
 .project-page main .arkade-audit-screen {width:min(100%,288px)}
 .project-page main .arkade-audit-notes {width:100%}
}
@media(max-width:820px){
 .project-page main .arkade-audit,.project-page main .iveco-redesign,.project-page main .iveco-audit {grid-template-columns:1fr;justify-items:center}
 .project-page main .arkade-audit-screen {width:min(100%,288px)}
}
@media(max-width:650px){
 .project-page main .doctor-screen-pair,.project-page main .cinema-screen-pair,.project-page main .cinema-challenge-screens,.project-page main .arkade-comparison,.project-page main .reserve-pair {grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:12px;padding:18px 16px 20px;overflow:visible}
 .project-page main .doctor-ia>span::after,.project-page main .doctor-ia b::after {display:none}
 .project-page main .doctor-ia>div {gap:10px}
 .project-page main .arkade-ideas-grid {grid-template-columns:1fr}
}
.project-page main .case-study .ic-title {display:flex}
.project-page main .case-study .ic-title>span {display:inline;margin:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}

/* ===== v2.18 ===== */
/* Chapter numbers in the project colour on every page, desktop included */
.project-page.project-page main .case-study.case-study.case-study .story-index>span {color:var(--title-color,var(--ink))}
.project-page.project-page main .case-study.case-study.case-study .case-band .story-index>span {color:var(--band-accent,#fff)}
.project-page .earlier-heading h1 .infinitum-mark {font-size:.62em;color:#8db9ff;vertical-align:.08em;margin-left:.08em}

/* Screenshot captions always live inside their panel */
.project-page main .screen-frame figcaption {margin:14px 2px 0;color:#4a5565;font-size:var(--fs-sm);line-height:1.45}
.project-page main .screen-frame figcaption strong {color:#2d3742}
.project-page main .wide-media--panel figcaption {color:#4a5565}

/* JobBot */
.project-page main .stat-grid--steps p {font-size:var(--fs-base);line-height:1.6;margin-top:10px}
.project-page main .jobbot-product-hero {width:min(100%,960px);margin:8px auto 24px}

/* Numbered problems, Helbiz pain point style: red badge with the number */
.project-page main .bad-num {display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fde6e3;color:#b8382e;font:800 .95rem/1 Manrope,sans-serif}
.project-page main .arkade-audit-note {grid-template-columns:36px 1fr;align-items:start}
.project-page main .arkade-audit-note strong {display:block;margin:6px 0 4px;font:700 1.05rem/1.3 Manrope,sans-serif}
.project-page main .arkade-audit-note p {margin:0;color:#4b5461;font-size:var(--fs-md);line-height:1.5}
.project-page main .arkade-hotspot__dot,.project-page main .hot {background:#d23c30;color:#fff;box-shadow:0 0 0 5px rgba(210,60,48,.2)}
.project-page main .arkade-hotspot::after {border-top-color:#d23c30}
.project-page main .hot-wrap {position:relative}
.project-page main .hot {position:absolute;z-index:2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:800 .8rem/1 Manrope,sans-serif;transform:translate(-50%,-50%)}
.project-page main .iveco-audit {align-items:center;gap:clamp(28px,5vw,64px);margin-top:32px}

/* Changes made in a redesign: green check, what changed, which problem it solves */
.project-page main .change-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.project-page main .change-grid--1 {grid-template-columns:1fr;margin-top:0}
.project-page main .change-card {display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start;padding:20px 22px;background:#fff;border:1px solid #dce1e8;border-radius:12px}
.project-page main .change-card .ic {width:36px;height:36px;padding:8px;box-sizing:border-box;border-radius:50%;background:#dcf5e9;color:#127a4b}
.project-page main .change-label {display:block;margin-top:2px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#4a5565}
.project-page main .change-card strong {display:block;margin:6px 0 4px;font:700 1.1rem/1.3 Manrope,sans-serif;color:var(--ink)}
.project-page main .change-card p {margin:0;color:#4b5461;font-size:var(--fs-md);line-height:1.55}
.project-page main .change-tag {display:inline-block;margin-top:12px;padding:4px 10px;border-radius:999px;background:#fde6e3;color:#9c2f26;font-size:var(--fs-xs);font-weight:700}
.project-page main .iveco-redesign {align-items:start}

/* Doctor: one continuous connector line */
.project-page main .doctor-ia>div::before {display:block;content:"";position:absolute;left:10%;right:10%;top:-16px;border-top:1.5px solid rgba(36,72,207,.35)}
.project-page main .doctor-ia b::after {display:none}
.project-page main .doctor-ia>div {gap:0;margin-top:30px}
.project-page main .doctor-ia>span::after {height:14px}
@media(max-width:650px){.project-page main .doctor-ia>div::before{display:none}.project-page main .change-grid{grid-template-columns:1fr}}

/* ===== v2.19 ===== */
/* IVECO: same white cards as the other pages */
.project-page main .iveco-patterns,.project-page main .iveco-ideas {gap:12px}
.project-page main .iveco-patterns>div,.project-page main .iveco-ideas>div {background:#fff;border:1px solid #dce1e8;border-radius:12px;padding:22px 24px}
.project-page main .iveco-patterns>div>span {display:block;margin-bottom:12px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#4a5565}
.project-page main .iveco-patterns .ic-title,.project-page main .iveco-ideas .ic-title {margin-top:0}

/* JobBot block 04: heading, screenshot centred, three cards in a row */
.project-page main .jobbot-ranking-stage {display:block}
.project-page main .jobbot-ranking-figure {width:min(100%,760px);margin:0 auto 24px}
.project-page main .jobbot-ranking-stage .stat-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.project-page main .jobbot-product-hero {width:min(100%,1100px)}
@media(max-width:820px){.project-page main .jobbot-ranking-stage .stat-grid {grid-template-columns:1fr}}

/* Infinitum: two-line title like the other pages, white infinity aligned to the text */
.project-page .earlier-heading h1 .infinitum-mark {font-size:.72em;color:#fff;vertical-align:.04em;margin-left:.06em;font-weight:700;line-height:0}
.project-page main .case-study .stat-grid>div {min-height:0}

/* ===== v2.20 ===== */
/* End-of-page navigation: lighter */
.project-page main .project-pagination {padding-block:28px;margin-block:24px 40px}
.project-page main .next-project strong {font-size:clamp(1.4rem,2.4vw,2.1rem)}

/* Screenshot titles in a dark tint of the page colour; captions stay grey */
.project-page--helbiz main {--label-ink:#0b5444}
.project-page--jobbot main {--label-ink:#1f4fa8}
.project-page--iveco main {--label-ink:#1f3bb3}
.project-page--coinplaza main {--label-ink:#9a4f00}
.project-page--arkade main {--label-ink:#4a2fc4}
.project-page--doctor main {--label-ink:#2c55a0}
.project-page--bending-spoons main {--label-ink:#a8352c}
.project-page main .case-study .screen-frame-label,.project-page main .case-study .doctor-phone-card>span {color:var(--label-ink,#4a5565)}

/* JobBot: step order and block 04 as a mirrored feature split */
.project-page main .stat-grid--steps>div {position:relative}
.project-page main .step-num {position:absolute;top:22px;right:24px;font:700 .85rem/1 Manrope,sans-serif;letter-spacing:.04em;color:#7a8594}
.project-page--jobbot main .jobbot-ranking-split {grid-template-columns:minmax(0,600px) minmax(0,1fr);align-items:center}
.project-page main .feature-split-visual--wide {width:100%;max-width:600px}
.project-page main .jobbot-ranking-cards {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:32px 0 0}
.project-page main .jobbot-ranking-split .jobbot-ranking-note {margin-top:18px;color:#5a6674;font-size:var(--fs-md);line-height:1.6}
@media(max-width:1000px){.project-page--jobbot main .jobbot-ranking-split {grid-template-columns:1fr}.project-page main .jobbot-ranking-cards {grid-template-columns:1fr}}

.project-page main .feature-split.jobbot-ranking-split .feature-split-visual--wide {width:100%;max-width:600px;justify-self:stretch}
/* Infinitum page: same surfaces as its home card */
.project-page main .earlier-work .play-metrics {background:#222831;border-color:#3f4756}
.project-page main .earlier-work .project-tags span {background:rgba(255,255,255,.1)}

/* ===== v2.21 ===== */
/* IVECO cards: compact, like Arkade's product ideas */
.project-page main .iveco-patterns>div,.project-page main .iveco-ideas>div {padding:17px 18px;border-radius:13px}
.project-page main .case-study :is(.iveco-patterns,.iveco-ideas) .ic-title {font:700 1rem/1.3 Manrope,sans-serif;margin:0 0 8px}
.project-page main .case-study :is(.iveco-patterns,.iveco-ideas) p {font-size:var(--fs-md);line-height:1.55;color:#4b5461}
.project-page main .iveco-patterns>div>span {margin-bottom:10px}
.project-page main .case-study .ic-title {flex-direction:row;align-items:center}

/* Bending Spoons: softer coral */
.project-page--bending-spoons main {--case-accent:#d9675b;--label-ink:#a8443a}
.project-page.project-page--bending-spoons main .reflection>span {color:#a8443a}

/* Black footer, full width */
.site-footer {position:relative;background:#0b0d12;box-shadow:0 0 0 100vmax #0b0d12;clip-path:inset(0 -100vmax);color:#aeb6c2;padding-block:28px}
.site-footer a {color:#fff}
.site-footer a:hover,.site-footer a:focus-visible {color:var(--accent-mint)}
/* Infinitum: dark theme with the Holo blue of Android 4, the system the theme was built for */
.project-page--infinitum main {--holo:#33b5e5}
.project-page main .earlier-work .story-index>span,.project-page main .earlier-work .story-index.story-index>span {color:var(--holo)}
.project-page .earlier-heading h1 .infinitum-mark {color:var(--holo)}
.project-page main .earlier-work .play-metrics {background:#0e1014;border:1px solid #23303a;box-shadow:inset 0 1px 0 rgba(51,181,229,.12)}
.project-page main .earlier-work .play-metrics__grid>div {background:#14191f;border:1px solid #23303a;border-top:2px solid var(--holo)}
.project-page main .earlier-work .play-metrics__grid strong {color:#fff}
.project-page main .earlier-work .project-tags span {background:rgba(51,181,229,.1);border:1px solid rgba(51,181,229,.35);color:#9ad9f2}
.project-page main .earlier-work .touchpoint-label {color:var(--holo)}
.project-page main .infinitum-media figure {background:#0e1014;border-color:#23303a}
.project-page main .infinitum-media figcaption {color:#9ad9f2}
.project-page--infinitum .project-back {background:#14171c;box-shadow:0 0 0 100vmax #14171c;clip-path:inset(0 -100vmax)}
.project-page--infinitum .project-back .text-link {color:#fff}
.project-page .earlier-heading h1 .infinitum-mark {color:#fff}
/* JobBot: one rhythm between chapters (68px, as between story blocks) */
.project-page--jobbot main .feature-split {margin-block:68px}
.project-page--jobbot main .jobbot-ranking-cards {margin-bottom:0}
.project-page--jobbot main .jobbot-product-hero {margin-bottom:0}
.project-page--jobbot main .jobbot-responsive {margin:68px 0 0}
.project-page--jobbot main .feature-split {align-items:start}
/* Doctor IA: the centre line from Home runs straight into Alerts */
.project-page main .doctor-ia>span::after {height:30px;border-left-width:1.5px}
.project-page main .doctor-ia b:nth-child(3)::before {display:none}
@media(max-width:650px){.project-page main .doctor-ia>span::after{display:none}}
.project-page.project-page.project-page.project-page--bending-spoons main .reflection>span {color:#a8443a}

/* ===== v2.22 ===== */
/* Card titles: one size */
.project-page main .case-study :is(.open-grid strong,.open-grid--lead>div>span,.stat-grid strong,.doctor-benchmark-grid strong,.iveco-patterns .ic-title,.iveco-ideas .ic-title,.arkade-ideas-grid strong,.change-card strong,.arkade-audit-note strong,.jobbot-mobile-decisions strong,.coinplaza-decisions .ic-title) {font:700 1.25rem/1.25 Manrope,sans-serif;letter-spacing:-.025em}

/* Reflection: label at the size of a section title, text at body-lead size */
.project-page main .reflection>span,.project-page main .coinplaza-case .reflection>span {font:700 clamp(1.9rem,3vw,2.65rem)/1.1 Manrope,sans-serif;letter-spacing:-.04em}
.project-page main .reflection p,.project-page main .case-study .reflection p {font:400 var(--fs-lg)/1.7 "DM Sans",sans-serif;letter-spacing:0;color:#3f4a58}

/* Single screens beside text: top of the screen aligned with the chapter number, on every page */
.project-page main :is(.feature-split,.doctor-feature-split) {align-items:start}
.project-page.project-page.project-page.project-page main .case-study .reflection>span {color:var(--title-color,var(--case-accent))}

/* ===== v2.23 ===== */
/* Cards in the page tint instead of white: same colour as the screenshot panels */
.project-page main .case-study :is(.open-grid>div,.stat-grid:not(.stat-grid--metric)>div,.arkade-ideas-grid>div,.doctor-benchmark-grid>div,.iveco-patterns>div,.iveco-ideas>div,.change-card,.arkade-audit-note,.jobbot-mobile-decisions>div) {background:var(--panel);border-color:transparent}
.project-page main .case-study :is(.open-grid,.stat-grid,.arkade-ideas-grid,.doctor-benchmark-grid,.iveco-patterns,.iveco-ideas,.change-card,.arkade-audit-note,.jobbot-mobile-decisions) :is(p,li) {color:#36404c}
.project-page main .case-study :is(.open-grid,.stat-grid,.doctor-benchmark-grid,.iveco-patterns,.arkade-ideas-grid) >div>span:not(.ic-title):not(.step-num):not(.idea-label) {color:#3f4a58}
.project-page main {--ic-bg:#ffffff}
.project-page main .case-study .ic.ic--bad,.project-page main .case-study .bad-num {background:#fff}
.project-page main .change-card .ic {background:#fff}
.project-page main .change-tag {background:#fff}
.project-page--coinplaza main {--panel:#ffe9cf}
.project-page--helbiz main .case-band .open-grid>div {background:#151a22;border-color:#2a313d}

/* Arkade: changes in one row, ideas compact again */
.project-page main .change-grid--row {grid-template-columns:repeat(5,minmax(0,1fr));margin-top:32px}
.project-page main .change-grid--row .change-card {grid-template-columns:1fr;gap:12px}
.project-page main .case-study .arkade-ideas-grid .ic-title {font:700 1rem/1.3 Manrope,sans-serif}
.project-page main .idea-label {display:block;margin-bottom:10px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#4a5565}
@media(max-width:1000px){.project-page main .change-grid--row {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.project-page main .change-grid--row {grid-template-columns:1fr}}

/* Hero: intro text sits on the baseline of the title */
.project-page main .case-hero,.project-page main .earlier-heading {align-items:end}

/* Infinitum colour variants */
.project-page main .infinitum-variants {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(32px,5vw,72px);align-items:start;margin-top:72px}
.project-page main .infinitum-variants h3 {margin:10px 0 14px;font:700 clamp(1.6rem,2.6vw,2.2rem)/1.15 Manrope,sans-serif;letter-spacing:-.04em;color:#fff}
.project-page main .infinitum-variants p {margin:0;color:var(--text-on-dark-muted);line-height:1.7}
.project-page main .infinitum-variants__screens {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:22px;background:#0e1014;border:1px solid #23303a;border-radius:20px}
.project-page main .infinitum-variants figure {margin:0}
.project-page main .infinitum-variants figcaption {margin:0 2px 12px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#33b5e5}
.project-page main .infinitum-variants img {display:block;width:100%;height:auto;border-radius:12px}
@media(max-width:820px){.project-page main .infinitum-variants {grid-template-columns:1fr}}

/* ===== helbiz-2.html: test of the Coinplaza block style ===== */
.hz-open main .case-study .open-grid {gap:clamp(20px,3vw,42px)}
.hz-open main .case-study .open-grid>div {background:none;border:0;border-top:2px solid var(--title-color);border-radius:0;padding:20px 0 6px}
.hz-open main .case-study .open-grid .ic-title>.ic {background:none;padding:0;width:28px;height:28px}
.hz-open main .case-study .open-grid>div>span:not(.ic-title) {color:var(--label-ink);font-size:var(--fs-sm);font-weight:600;letter-spacing:.12em}
.hz-open main .case-study .case-band .open-grid>div {background:none;border-top:0;border-left:1px solid #ffffff36;padding:4px 0 4px clamp(14px,2vw,24px)}
.hz-open main .case-study .case-band .open-grid>div>span:not(.ic-title) {color:var(--band-accent)}
.hz-open main .case-study .open-grid--5 .ic.ic--bad {background:#fde6e3}
.project-page main .case-study .ic-title,.project-page main .case-study .ic-title>span {color:var(--ink)}
.project-page main .case-study .case-band :is(p,li) {color:var(--text-on-dark-muted)}
.project-page main .case-study .case-band .open-grid>div>span:not(.ic-title) {color:var(--band-accent)}
.project-page main .case-study .case-band .ic-title,.project-page main .case-study .case-band .open-grid strong {color:#fff}
.hz-open.hz-open main .case-study .open-grid>div {background:none;border:0;border-top:2px solid var(--title-color);border-radius:0;padding:20px 0 6px}
.hz-open.hz-open main .case-study .case-band .open-grid>div {background:none;border:0;border-left:1px solid #ffffff36;padding:4px 0 4px clamp(14px,2vw,24px)}
.project-page.project-page main .case-study.case-study .ic-title>span {color:var(--ink)}
.project-page.project-page main .case-study.case-study .case-band .open-grid>div {background:#151a22;border:1px solid #2a313d}
.project-page.project-page main .case-study.case-study .case-band .open-grid>div>span:not(.ic-title) {color:var(--band-accent)}
.hz-open.hz-open main .case-study.case-study .case-band .open-grid>div {background:none;border:0;border-left:1px solid #ffffff36}

/* ===== v2.24 ===== */
/* Lead card labels (What riders liked / Where it fell short) in ink like the other titles */
.project-page.project-page main .case-study.case-study .open-grid--lead>div>span:not(.ic-title) {color:var(--ink)}

/* Problems: light pastel red card with a coral line on top (Helbiz pain points, IVECO and Arkade critique) */
.project-page.project-page main .case-study.case-study :is(.open-grid--5>div,.arkade-audit-note) {background:#fdecea;border:0;border-top:3px solid #e0675c;border-radius:10px}

/* Reflection line in the project's own colour */
.project-page.project-page main .case-study .reflection {border-top-color:var(--title-color,var(--case-accent))}

/* Screen pairs beside the text */
.project-page main .feature-split--pairshots {grid-template-columns:minmax(0,1fr) auto}
.project-page main .feature-split--pairshots :is(.arkade-comparison,.cinema-screen-pair) {margin:0}
.project-page main .cinema-broader-challenge {align-items:start}
@media(max-width:1000px){.project-page main .feature-split--pairshots {grid-template-columns:1fr}}

/* ===== v2.25 ===== */
/* Problems: page-tint card like the others, coral line on top + red cross carry the meaning */
.project-page.project-page main .case-study.case-study :is(.open-grid--5>div,.arkade-audit-note) {background:var(--panel);border:0;border-top:3px solid #e0675c;border-radius:10px}

/* Card group titles (Observed friction, Design principles) at card-title size */
.project-page.project-page main .case-study .stat-grid--lead>div>span {display:block;margin-bottom:14px;font:700 1.25rem/1.25 Manrope,sans-serif;letter-spacing:-.025em;text-transform:none;color:var(--ink)}

/* Infinitum colour variants: same grid and size as the black screens */
.project-page main .infinitum-variants.infinitum-media {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start;margin-top:56px}
.project-page main .infinitum-variants__copy {grid-column:span 2;padding-right:clamp(16px,3vw,48px)}
.project-page main .infinitum-variants.infinitum-media figcaption {color:#9ad9f2}
@media(max-width:820px){.project-page main .infinitum-variants.infinitum-media {grid-template-columns:repeat(2,minmax(0,1fr))}.project-page main .infinitum-variants__copy {grid-column:1/-1}}

/* Coinplaza: core journey as dark cards, principles as tinted cards, like the other pages */
.project-page main .coinplaza-flow ol {gap:12px}
.project-page main .coinplaza-flow li {border:1px solid #3a3a3a;border-radius:10px;background:#2f2f2f;padding:22px 24px}
.project-page main .coinplaza-decisions {gap:12px}
.project-page main .coinplaza-decisions>div {border:0;border-radius:10px;background:var(--panel);padding:24px}
.project-page main .coinplaza-decisions>div>span {color:#7a4410}
.project-page main .coinplaza-decisions .ic-title {margin:12px 0 10px}

/* Doctor IA: centre line overlaps the box edge so it always touches */
.project-page main .doctor-ia>span::after {height:32px;border-left:1.5px solid #a9b9ef;z-index:1}

.project-page.project-page.project-page main .case-study.case-study .stat-grid--lead>div>span {color:var(--ink)}

/* ===== v2.26 ===== */
/* Bending Spoons: night blue */
.project-page main .case-study--bending-spoons {background:#e6e9f4}
.project-page--bending-spoons main {--panel:#d4d9ec;--nav-bg:#e6e9f4}
.project-page main .case-study .screen-frame-label[style] {color:var(--label-ink)}

/* Problems: no line, the red cross alone marks them */
.project-page.project-page main .case-study.case-study :is(.open-grid--5>div,.arkade-audit-note) {border-top:0}
/* Numbered problems: red badge, white number (same as the dots on the screenshot) */
.project-page.project-page main .case-study .bad-num {background:#d23c30;color:#fff}

/* Check/cross markers in lists: white circle so they stand out on tinted cards */
.project-page.project-page main .mark-list li::before {background-color:#fff}

/* Project titles and intro: smaller */
.project-page main .case-study .case-hero h1,.project-page main .earlier-heading h1 {font-size:clamp(2.6rem,5vw,4.5rem);line-height:1.02}
.project-page main .case-hero>p,.project-page main .case-hero .case-intro,.project-page main .earlier-intro {font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6}

/* Phone screenshots: one size across the site (about 264px wide) */
.project-page main :is(.doctor-single-screen,.jobbot-mobile-shot,.shot-single,.feature-split-visual:not(.feature-split-visual--narrow):not(.feature-split-visual--wide)) {width:min(100%,312px)}
@media(min-width:1001px){.project-page main .arkade-audit {grid-template-columns:312px minmax(0,1fr)}.project-page main .iveco-redesign,.project-page main .iveco-audit {grid-template-columns:312px minmax(0,1fr)}}
.project-page main :is(.doctor-screen-pair,.cinema-screen-pair,.cinema-challenge-screens,.arkade-comparison,.reserve-pair) {grid-template-columns:repeat(2,minmax(0,264px))}
.project-page main .infinitum-media,.project-page main .infinitum-variants.infinitum-media {grid-template-columns:repeat(4,minmax(0,264px));justify-content:space-between}

/* Doctor IA: boxes sit on top of the connector so lines end exactly at their edge */
.project-page main .doctor-ia b {position:relative;z-index:2;background:#edf3ff}
.project-page main .doctor-ia>span {z-index:2;background:#f2f6ff}
.project-page main .doctor-ia>span::after {z-index:-1;height:34px}

/* ===== v2.27 ===== */
/* Small card labels: one style everywhere (as IVECO "Make it concrete") */
.project-page.project-page main .case-study :is(.coinplaza-decisions>div>span,.coinplaza-flow li>span) {font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.project-page.project-page main .case-study .coinplaza-decisions>div>span {color:#4a5565}
.project-page.project-page main .case-study .coinplaza-flow li>span {color:#F7931A}

/* Coinplaza core journey: heading laid out like a chapter, cards below (as Helbiz insights) */
.project-page main .coinplaza-flow__heading.story-grid {display:grid;border:0;padding:0;margin:0 0 36px}
.project-page main .coinplaza-flow__heading .story-index p {color:var(--text-on-dark-muted)}
.project-page main .coinplaza-flow__heading .story-copy h3 {margin:0;color:#fff}

/* Arkade changes: icon on the left like every other card, tags aligned at the bottom, neutral tag */
.project-page main .change-grid--row .change-card {grid-template-columns:36px 1fr;gap:14px;padding:20px 18px}
.project-page main .change-card>div {display:flex;flex-direction:column;height:100%}
.project-page main .change-card .change-tag {margin-top:auto;align-self:flex-start;background:#fff;color:#3f4a58}
.project-page main .change-card p {margin-bottom:14px}

/* Narrower text cards beside a screen (IVECO changes, JobBot mobile decisions) */
.project-page main .change-grid--1,.project-page main .jobbot-mobile-decisions {max-width:560px}

/* Infinitum: no blue line on the stats */
.project-page main .earlier-work .play-metrics__grid>div {border-top:1px solid #23303a}

/* Bending Spoons: challenge dividers */
.project-page main .challenge-heading {margin:96px 0 0;padding-top:40px;border-top:1px solid rgba(11,13,18,.14);max-width:760px}
.project-page main .challenge-heading h2 {margin:10px 0 14px;font:700 clamp(1.9rem,3vw,2.65rem)/1.1 Manrope,sans-serif;letter-spacing:-.04em}
.project-page main .challenge-heading p {margin:0;color:#46505d;font-size:var(--fs-lg);line-height:1.65}

/* ===== v2.28 ===== */
/* Back link inside the coloured page, no white bar */
.project-page main .case-back {display:inline-block;margin:0 0 28px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.project-page main .earlier-work .case-back {color:#fff}
.project-page main .case-study,.project-page main .earlier-work {padding-top:40px}
.project-page--infinitum .project-back {display:none}

/* Changes: label + green "solved" tag on one line at the top, no separate icon */
.project-page main .change-card,.project-page main .change-grid--row .change-card {display:block;padding:20px 22px}
.project-page main .change-head {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.project-page main .change-head .change-label {margin:0}
.project-page.project-page main .change-card .change-tag {display:inline-flex;align-items:center;gap:5px;margin:0;padding:4px 10px 4px 8px;border-radius:999px;background:#dcf5e9;color:#127a4b;font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
.project-page main .change-tag svg {width:12px;height:12px}
.project-page main .change-card p {margin-bottom:0}

/* Numbered problems back to the v2.21 badge: pale red circle, red number */
.project-page.project-page main .case-study .bad-num {background:#fde6e3;color:#b8382e}

/* Coinplaza core journey: one title, line under it */
.project-page main .coinplaza-flow__heading {display:block}

/* JobBot 04: like 06, text and cards left, cropped screen right */
.project-page--jobbot main .jobbot-ranking-split {grid-template-columns:minmax(0,1fr) minmax(0,420px)}
.project-page main .feature-split.jobbot-ranking-split .feature-split-visual--wide {max-width:420px}
.project-page main .jobbot-ranking-split .jobbot-mobile-decisions {margin-top:24px}
.project-page main .change-card>.change-head {display:flex;flex-direction:row;height:auto;align-items:center;justify-content:space-between}
.project-page main .change-card {display:flex;flex-direction:column}
.project-page main .change-card>strong {margin-top:0}
.project-page main .case-study,.project-page main .earlier-work {padding-top:116px}
@media(max-width:820px){.project-page main .case-study,.project-page main .earlier-work {padding-top:100px}}
.project-page.project-page main .change-card {display:block}
.project-page.project-page main .change-card>.change-head {display:flex;width:auto}
.project-page.project-page main .change-card>strong {display:block;margin:0 0 6px}

/* ===== v2.29 ===== */
.project-page main .infinitum-media--variants {margin-top:28px}
.project-page--jobbot main .jobbot-ranking-split {grid-template-columns:minmax(0,440px) minmax(0,1fr)}
.project-page main .feature-split.jobbot-ranking-split .feature-split-visual--wide {max-width:440px}
.project-page--jobbot main .jobbot-ranking-cards {margin:28px 0 0}
/* JobBot 06: cards as wide as their content, same padding left and right */
.project-page main .jobbot-responsive .jobbot-mobile-decisions {max-width:none}
.project-page main .jobbot-responsive .jobbot-mobile-decisions {width:fit-content;max-width:100%}
.project-page main .jobbot-responsive .jobbot-mobile-decisions p {max-width:none}
@media(max-width:1000px){.project-page--jobbot main .jobbot-ranking-split {grid-template-columns:1fr}.project-page main .feature-split.jobbot-ranking-split .feature-split-visual--wide {max-width:100%}}

/* ===== v2.30 ===== */
/* One rhythm between chapters on every page: 96px from the block above to the chapter number */
.project-page.project-page main .case-study [id^="s-"],.project-page.project-page main .earlier-work .infinitum-section {margin-top:96px;padding-top:0;border-top:0}
.project-page.project-page main .case-study :is(.story-grid,.feature-split,.doctor-feature-split,.jobbot-responsive,.coinplaza-identity,.wide-media,.open-grid,.stat-grid,.reserve-pair,.doctor-benchmark-grid,.change-grid,.coinplaza-decisions,.coinplaza-flow,.coinplaza-archive,.coinplaza-screens,.cinema-broader-challenge,.arkade-audit,.iveco-audit,.iveco-redesign,.jobbot-product-hero),.project-page.project-page main .earlier-work .story-grid {margin-bottom:0;padding-bottom:0}
@media(max-width:820px){.project-page.project-page main .case-study [id^="s-"],.project-page.project-page main .earlier-work .infinitum-section {margin-top:64px}}

/* JobBot 04 back to v2.27 layout */
.project-page--jobbot main .jobbot-ranking-split {grid-template-columns:minmax(0,600px) minmax(0,1fr)}
.project-page.project-page main .feature-split.jobbot-ranking-split .feature-split-visual--wide {max-width:600px}
.project-page--jobbot main .jobbot-ranking-cards {margin-top:32px}
.project-page main .jobbot-responsive {align-items:start}

/* On narrow screens the chapter text always comes before its screenshots */
@media(max-width:1000px){.project-page main :is(.feature-split,.doctor-feature-split)>:is(figure,.feature-split-visual,.reserve-pair,.doctor-single-screen,.doctor-screen-pair,.arkade-comparison,.cinema-screen-pair,.infinitum-pair){order:2}}

/* Infinitum: chapter 03 with the two blue screens beside the text, as Doctor 05 */
.project-page main .infinitum-pair {display:grid;grid-template-columns:repeat(2,minmax(0,264px));gap:18px}
.project-page main .infinitum-pair figure {margin:0;padding:12px;background:#0e1014;border:1px solid #23303a;border-radius:20px}
.project-page main .infinitum-pair figcaption {margin:2px 2px 12px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.project-page main .infinitum-pair img {display:block;width:100%;height:auto;border-radius:12px}
.project-page main .earlier-work .feature-split-copy h3 {color:#fff}
.project-page main .earlier-work .feature-split-copy p {color:var(--text-on-dark-muted)}
@media(max-width:560px){.project-page main .infinitum-pair {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* Infinitum: back to white accents, no blue */
.project-page.project-page main .earlier-work .story-index>span,.project-page.project-page main .earlier-work .story-index.story-index>span {color:#fff}
.project-page.project-page main .earlier-work .touchpoint-label,.project-page main .infinitum-pair figcaption,.project-page main .infinitum-media figcaption {color:var(--text-on-dark-muted)}
.project-page.project-page main .earlier-work .project-tags span {background:rgba(255,255,255,.1);border-color:transparent;color:#fff}
.project-page.project-page main .earlier-work .play-metrics {box-shadow:none;border-color:#2e3440}
.project-page.project-page main .earlier-work .play-metrics__grid>div {border-color:#2e3440}
.project-page main .earlier-work .infinitum-media figure,.project-page main .infinitum-pair figure {border-color:#2e3440}
@media(max-width:1000px){.project-page--jobbot main .jobbot-ranking-split{grid-template-columns:1fr}.project-page.project-page main .feature-split.jobbot-ranking-split .feature-split-visual--wide{max-width:100%}}
.project-page.project-page main .earlier-work [id^="s-"] {margin-top:96px;padding-top:0;margin-bottom:0}
@media(max-width:820px){.project-page.project-page main .earlier-work [id^="s-"]{margin-top:64px}}

/* ===== v2.31 ===== */
.project-page main .earlier-work .infinitum-media:not(.infinitum-media--variants) {margin-top:48px}
/* IVECO: same scheme as the other pages, cards in a row under each chapter */
.project-page main .audit-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px;width:100%}
.project-page main .change-grid--4 {grid-template-columns:repeat(4,minmax(0,1fr))}
.project-page--iveco main .feature-split {grid-template-columns:minmax(0,1fr) minmax(0,312px)}
@media(max-width:1000px){.project-page main .audit-row,.project-page main .change-grid--4 {grid-template-columns:repeat(2,minmax(0,1fr))}.project-page--iveco main .feature-split {grid-template-columns:1fr}}
@media(max-width:650px){.project-page main .audit-row,.project-page main .change-grid--4 {grid-template-columns:1fr}}
/* Coinplaza: screenshots on the tinted panel like every other page */
.project-page.project-page main .coinplaza-archive {background:var(--panel);border-radius:20px;padding:22px 24px 24px;box-shadow:none}
.project-page.project-page main .coinplaza-archive img {border-radius:12px;box-shadow:0 14px 30px rgba(16,20,28,.16)}
.project-page.project-page main .coinplaza-archive__image {overflow:visible;border-radius:0}
.project-page.project-page main .coinplaza-archive figcaption {color:#4a5565;padding:14px 2px 0}
.project-page.project-page main .coinplaza-screens figure a {background:var(--panel);border:0;border-radius:20px;padding:22px 24px 24px;box-shadow:none;overflow:visible}
.project-page.project-page main .coinplaza-screens figure a img {border-radius:12px;box-shadow:0 14px 30px rgba(16,20,28,.16)}
.project-page.project-page main .coinplaza-archive>.screen-frame-label,.project-page.project-page main .coinplaza-screens .screen-frame-label {display:block;margin:0 2px 14px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--label-ink)}
.project-page.project-page main .coinplaza-archive {padding-bottom:20px}.project-page.project-page main .coinplaza-archive figcaption{padding-top:16px}

/* ===== v2.32 ===== */
/* IVECO: chapter text on top, screenshot with its cards beside it */
.project-page main .chapter-stack .feature-split-copy {max-width:760px}
.project-page main .shot-with-cards {display:grid;grid-template-columns:312px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:36px}
.project-page main .shot-with-cards .shot-single {width:100%;margin:0}
.project-page main .shot-with-cards .arkade-audit-notes {display:grid;gap:12px;align-content:start}
.project-page main .change-grid--2x2 {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;align-content:start}
@media(max-width:820px){.project-page main .shot-with-cards {grid-template-columns:1fr}.project-page main .shot-with-cards .shot-single {width:min(100%,312px);justify-self:center}}
@media(max-width:560px){.project-page main .change-grid--2x2 {grid-template-columns:1fr}}
.project-page.project-page main .change-card>.change-head {min-height:28px}

/* IVECO 03: cards stacked left, redesign screen right */
.project-page main .shot-with-cards--right {grid-template-columns:minmax(0,1fr) 312px}
.project-page main .shot-with-cards--right>figure {order:2}
.project-page main .change-grid--stack {display:grid;grid-template-columns:1fr;gap:12px;margin:0}
@media(max-width:820px){.project-page main .shot-with-cards--right {grid-template-columns:1fr}.project-page main .shot-with-cards--right>figure {order:0}}

/* ===== v2.34 ===== */
/* End-of-page project navigation: no box, a line on top, same space above and below */
/* IVECO: cards centred on the screenshot, readable width */
.project-page main .shot-with-cards {grid-template-columns:312px minmax(0,560px);align-items:center;justify-content:start}
.project-page main .shot-with-cards--right {grid-template-columns:minmax(0,560px) 312px}
@media(max-width:820px){.project-page main .shot-with-cards,.project-page main .shot-with-cards--right {grid-template-columns:1fr}}
.project-page.project-page main .project-pagination {margin:24px auto}

/* ===== v2.36: previous / next project ===== */
.prev-project[href="helbiz.html"] {--hv-next:#199988}
.prev-project[href="jobbot.html"] {--hv-next:#3978e8}
.prev-project[href="infinitum.html"] {--hv-next:#2d5fc4}
.prev-project[href="iveco.html"] {--hv-next:#396eff}
.prev-project[href="coinplaza.html"] {--hv-next:var(--orange-text)}
.prev-project[href="arkade.html"] {--hv-next:#5b3df5}
.prev-project[href="doctor.html"] {--hv-next:#4a7fe0}
.prev-project[href="bending-spoons.html"] {--hv-next:#d9675b}

.project-page.project-page main .project-pagination {display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;margin:24px auto;border:0;border-top:1px solid #d6dbe3;border-bottom:1px solid #d6dbe3;border-radius:0;background:none}
.project-page main :is(.prev-project,.next-project) {display:flex;flex-direction:column;gap:6px;padding:28px 0}
.project-page main .prev-project {padding-right:24px;border-right:1px solid #d6dbe3}
.project-page main .next-project {padding-left:24px;text-align:right;align-items:flex-end}
.project-page main :is(.prev-project,.next-project) span {font-size:var(--fs-sm);color:#5a6674}
.project-page main :is(.prev-project,.next-project) strong {font:700 clamp(1.3rem,2.2vw,1.9rem)/1.15 Manrope,sans-serif;letter-spacing:-.035em;color:var(--ink);transition:color .2s}
.project-page main :is(.prev-project,.next-project):hover strong,.project-page main :is(.prev-project,.next-project):focus-visible strong {color:var(--hv-next,var(--blue))}
@media(max-width:650px){.project-page.project-page main .project-pagination {grid-template-columns:1fr}.project-page main .prev-project {padding-right:0;border-right:0;border-bottom:1px solid #d6dbe3}.project-page main .next-project {padding-left:0;text-align:left;align-items:flex-start}}
.project-page.project-page main :is(.prev-project,.next-project) :is(span,strong) {display:block;margin:0}.project-page.project-page main :is(.prev-project,.next-project) {justify-content:center;margin:20px 0;padding-block:8px}
.prev-project[href^="index.html"] {--hv-next:var(--hv-self,var(--ink))}
.project-page.project-page main .project-pagination {border-top:0;padding:24px 0;margin:0 auto}
.project-page.project-page main .project-pagination {border:0;padding:24px 0}
.project-page.project-page main :is(.prev-project,.next-project) {margin:0;padding-block:0;gap:2px}
.project-page.project-page main :is(.prev-project,.next-project) strong {font-size:clamp(1.15rem,1.7vw,1.45rem)}
@media(max-width:650px){.project-page.project-page main .prev-project{padding-bottom:16px}.project-page.project-page main .next-project{padding-top:16px}.project-page.project-page main .project-pagination{border:0}}
/* Whole half is the click and hover area */
.project-page.project-page main .project-pagination {padding:0;align-items:stretch}
.project-page.project-page main :is(.prev-project,.next-project) {padding-block:24px;justify-content:center}
.project-page.project-page main :is(.prev-project,.next-project) strong {font-size:clamp(1.25rem,2vw,1.6rem)}
@media(max-width:650px){.project-page.project-page main .prev-project{padding-block:20px}.project-page.project-page main .next-project{padding-block:20px}}
/* Divider drawn inset: 24px of empty space above and below, link areas stay full height */
.project-page.project-page main .project-pagination {position:relative}
.project-page.project-page main .prev-project {border-right:0}
.project-page.project-page main .project-pagination::before {content:"";position:absolute;left:50%;top:24px;bottom:24px;border-left:1px solid #d6dbe3;pointer-events:none}
@media(max-width:650px){.project-page.project-page main .project-pagination::before{display:none}}
.project-page.project-page main .project-pagination::before {top:16px;bottom:16px}

/* ===== v2.42 ===== */
.project-page main .earlier-work .case-facts {border-color:#2e3440;margin-top:40px}
.project-page main .earlier-work .case-facts span {color:var(--text-on-dark-muted)}
.project-page main .earlier-work .case-facts strong {color:#fff}
.project-page main .earlier-work .reflection {border-top-color:#fff}
.project-page.project-page.project-page.project-page main .earlier-work .reflection>span {color:#fff}
.project-page.project-page main .earlier-work .reflection p {color:var(--text-on-dark-muted)}
.project-page main .jobbot-sources-shot {margin-top:24px}
.project-page main .arkade-ideas-grid p {margin:8px 0 0;color:#36404c;font-size:var(--fs-md);line-height:1.55}

/* ===== v2.43 ===== */
/* Dark bands: breathing room restored after the chapter-spacing reset */
.project-page.project-page main .case-study .coinplaza-flow {padding-block:clamp(56px,6vw,88px)}
.project-page.project-page main .case-study .case-band {padding:clamp(64px,7vw,96px) 0}
.project-page.project-page main .case-study .case-band>[id^="s-"] {margin-top:0}
.project-page.project-page main .case-study .case-band .open-grid {margin-top:48px}
/* Reflection line: softer */
.project-page.project-page main .case-study .reflection {border-top:1px solid color-mix(in srgb,var(--title-color,var(--case-accent)) 45%,transparent)}
.project-page.project-page main .earlier-work .reflection {border-top:1px solid rgba(255,255,255,.3)}
.project-page.project-page main .case-study .case-band {margin-top:96px}
.project-page.project-page main .case-study .reflection {border-top:2px solid color-mix(in srgb,var(--title-color,var(--case-accent)) 60%,transparent)}
.project-page.project-page main .earlier-work .reflection {border-top:2px solid rgba(255,255,255,.4)}

/* ===== v2.45 ===== */
.project-page.project-page main .case-study .reflection {border-top:2px solid color-mix(in srgb,var(--title-color,var(--case-accent)) 80%,transparent)}
.project-page.project-page main .case-study .reflection {border-top:2px solid color-mix(in srgb,var(--title-color,var(--case-accent)) 60%,transparent)}
/* Coinplaza: no rules between prototype screens, spacing only */
.project-page.project-page main .coinplaza-screens {border-top:0}
.project-page.project-page main .coinplaza-screens figure {border-top:0;padding-block:20px}


/* ===== v2.50 IVECO: chapters 02-03 content in the right column, like 01 and 04 ===== */
.project-page--iveco main .story-copy .shot-with-cards {grid-template-columns:clamp(200px,20vw,260px) minmax(0,1fr);gap:clamp(20px,2vw,28px);align-items:center;margin-top:32px}
@media(max-width:1000px){.project-page--iveco main .story-copy .shot-with-cards {grid-template-columns:1fr}.project-page--iveco main .story-copy .shot-with-cards .shot-single {width:min(100%,312px);justify-self:center}}

/* ===== v2.51 Panels keep bottom padding under captions; Coinplaza tones; Arkade 03 and ideas list ===== */
.project-page.project-page main .case-study.case-study :is(.coinplaza-archive,.wide-media--panel) {padding-bottom:24px}
.project-page.project-page main .coinplaza-case {background:#ffe9cf}
.project-page--coinplaza.project-page--coinplaza main {--nav-bg:#ffe9cf;--panel:#ffd29e}
.project-page--arkade main .story-copy .shot-with-cards {grid-template-columns:clamp(200px,20vw,260px) minmax(0,1fr);gap:clamp(20px,2vw,28px);align-items:center;margin-top:32px}
@media(max-width:1000px){.project-page--arkade main .story-copy .shot-with-cards {grid-template-columns:1fr}.project-page--arkade main .story-copy .shot-with-cards .shot-single {width:min(100%,312px);justify-self:center}}
/* Light list: icon + title, one short line, thin dividers between rows only */
.project-page.project-page main .case-study :is(.arkade-ideas-grid,.iveco-ideas,.coinplaza-decisions).idea-list {display:block;margin-top:28px;background:none;padding:0;border:0;border-radius:0;box-shadow:none}
.project-page.project-page main .case-study :is(.arkade-ideas-grid,.iveco-ideas,.coinplaza-decisions).idea-list>div {display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:8px 24px;align-items:center;background:none;border:0;border-bottom:1px solid rgba(11,13,18,.12);border-radius:0;padding:14px 0;margin:0}
.project-page.project-page main .case-study :is(.arkade-ideas-grid,.iveco-ideas,.coinplaza-decisions).idea-list>div:first-child {padding-top:0}
.project-page.project-page main .case-study :is(.arkade-ideas-grid,.iveco-ideas,.coinplaza-decisions).idea-list>div:last-child {border-bottom:0;padding-bottom:0}
.project-page.project-page main .case-study .idea-list .ic-title {margin:0}
.project-page.project-page main .case-study .idea-list p {margin:0;color:#4a5565}
@media(max-width:560px){.project-page.project-page main .case-study :is(.arkade-ideas-grid,.iveco-ideas,.coinplaza-decisions).idea-list>div {grid-template-columns:1fr}}

/* ===== v2.52 Screenshot beside cards: larger and identical in every chapter ===== */
.project-page.project-page main :is(.project-page--iveco,.project-page--arkade) .story-copy .shot-with-cards, .project-page:is(.project-page--iveco,.project-page--arkade) main .story-copy .shot-with-cards {grid-template-columns:300px minmax(0,1fr)}
@media(max-width:1100px){.project-page:is(.project-page--iveco,.project-page--arkade) main .story-copy .shot-with-cards {grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:1000px){.project-page:is(.project-page--iveco,.project-page--arkade) main .story-copy .shot-with-cards {grid-template-columns:1fr}}
.project-page.project-page.project-page main .case-study .idea-list .ic-title {font:700 1rem/1.3 Manrope,sans-serif;letter-spacing:0}
@media(min-width:561px){.project-page.project-page main .case-study .coinplaza-decisions.idea-list>div {grid-template-columns:minmax(0,300px) minmax(0,1fr)}}

/* ===== v2.59 Mobile fixes ===== */
@media(max-width:1000px){.project-page--jobbot.project-page--jobbot main .feature-split:not(.jobbot-ranking-split) {grid-template-columns:1fr}.project-page--jobbot main .feature-split-visual--narrow {width:min(100%,540px);justify-self:center}}
@media(max-width:600px){.project-page.project-page main .infinitum-media,.project-page.project-page main .infinitum-variants.infinitum-media {grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
.project-page.project-page main .earlier-work .play-metrics__grid>div {padding:10px 6px;text-align:center;justify-items:center}
.project-page.project-page main .earlier-work .play-metrics__grid span {letter-spacing:.04em}}

/* ===== v2.61 Narrow phones: metric labels always fit (iOS renders wider) ===== */
html {-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:480px){
.play-metrics__grid,.portfolio-feature .play-metrics__grid,.project-page main .earlier-work .play-metrics__grid {gap:6px}
.portfolio-feature .play-metrics__grid>div,.project-page.project-page main .earlier-work .play-metrics__grid>div {padding:10px 2px;min-width:0}
.play-metrics__grid span,.portfolio-feature .play-metrics__grid span,.project-page.project-page main .earlier-work .play-metrics__grid span {font-size:.625rem;letter-spacing:.02em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:clip}
}
@media(max-width:400px){.portfolio-feature .featured-project__visual--infinitum {padding:14px}.portfolio-feature .featured-project__visual--infinitum .play-metrics {padding:16px 12px}}
@media(max-width:360px){.play-metrics__grid span,.portfolio-feature .play-metrics__grid span,.project-page.project-page main .earlier-work .play-metrics__grid span {font-size:.5625rem;letter-spacing:0}.portfolio-feature .play-metrics__grid strong {font-size:.95rem}}