/* ===== Case detail pages ===== */
.case-hero{padding:5rem 0 2rem;border-top:0.5px solid var(--border)}
.case-category{font-size:.64rem;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-bottom:1.25rem;display:flex;align-items:center;gap:.6rem}
.case-category::before{content:'';display:block;width:1.4rem;height:0.5px;background:var(--muted)}
.case-hero h1{font-size:clamp(3rem,7vw,6.5rem);margin-bottom:1rem}
.case-hero-sub{font-size:1rem;color:var(--muted);line-height:1.75;max-width:620px;margin-bottom:2rem}
.case-tags{display:flex;gap:.5rem;flex-wrap:wrap}
.case-tag{font-size:.6rem;letter-spacing:.14em;color:var(--accent);border:0.5px solid var(--accent);padding:.28rem .65rem;border-radius:1px;text-transform:uppercase;transition:background .25s,color .25s}
.case-tag:hover{background:var(--accent);color:#fff}

.case-hero-img{width:100%;aspect-ratio:16/8;margin:2.5rem 0 0;position:relative}
.case-hero-img.ph-tile::after{content:'';position:absolute;inset:0;background:
  linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%);
  background-size:200% 100%;animation:shimmerSweep 6s linear infinite;mix-blend-mode:overlay;pointer-events:none}
@keyframes shimmerSweep{0%{background-position:120% 0}100%{background-position:-20% 0}}
.case-hero-img .label{font-size:.72rem;background:rgba(15,15,13,.5);color:#fff;padding:.5rem 1rem;border-radius:1px;backdrop-filter:blur(6px);letter-spacing:.16em}
.case-hero-img .badge-corner{position:absolute;top:1rem;left:1rem;font-size:.55rem;letter-spacing:.18em;color:#fff;background:var(--grad);padding:.35rem .7rem;border-radius:1px;text-transform:uppercase;z-index:2}
.case-hero-img .corner{position:absolute;width:18px;height:18px;border:1px solid rgba(255,255,255,.5);z-index:2}
.case-hero-img .corner.tl{top:10px;left:10px;border-right:none;border-bottom:none}
.case-hero-img .corner.tr{top:10px;right:10px;border-left:none;border-bottom:none}
.case-hero-img .corner.bl{bottom:10px;left:10px;border-right:none;border-top:none}
.case-hero-img .corner.br{bottom:10px;right:10px;border-left:none;border-top:none}
.case-section{padding:4rem 0;border-top:0.5px solid var(--border)}
.case-section h2{margin-bottom:1.25rem}

/* Aufgabe / Ergebnis 2-col */
.case-meta{padding:3rem 0}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.meta-grid p{font-size:1rem;color:var(--dark);line-height:1.7;max-width:46ch}
.meta-grid .sec-tag{margin-bottom:1rem}

/* Basisfoto block */
.basis-block{display:grid;grid-template-columns:1fr 1.4fr;gap:2rem;align-items:center;margin-top:2rem}
.basis-block .basis-text p{font-size:1rem;color:var(--muted);line-height:1.7;max-width:38ch}
.basis-block .basis-text .basis-tag{font-size:.62rem;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin-bottom:.8rem;display:inline-flex;align-items:center;gap:.5rem}
.basis-block .basis-tag::before{content:'';width:1.4rem;height:0.5px;background:var(--accent)}
.basis-img{aspect-ratio:4/5;position:relative}
.basis-arrow{display:flex;justify-content:center;align-items:center;gap:1rem;padding:2rem 0;font-size:.7rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.basis-arrow .line{flex:1;height:0.5px;background:linear-gradient(90deg,transparent,var(--muted),transparent);max-width:200px}
.basis-arrow .arrow-down{font-size:1.2rem;color:var(--accent);animation:bounceY 2s ease-in-out infinite}
@keyframes bounceY{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* 9-grid showcase */
.grid-9{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:2rem}
.grid-9 .ph-tile{aspect-ratio:1;position:relative;overflow:hidden}
.grid-9 .ph-tile::after{content:attr(data-num);position:absolute;top:.5rem;right:.6rem;font-family:'Bebas Neue',sans-serif;color:rgba(255,255,255,.7);font-size:.9rem;letter-spacing:.05em;mix-blend-mode:overlay}
.grid-9 .ph-tile .silhouette{position:absolute;inset:22%;background:rgba(15,15,13,.18);border-radius:50% 50% 8% 8% / 30% 30% 8% 8%;filter:blur(2px)}

/* Basisfoto block – original + text + arrow + 3 variations all in one row */
.basis-block{display:grid;grid-template-columns:0.75fr 220px auto 1.5fr 1.5fr 1.5fr;gap:1.25rem;align-items:center;margin-top:2rem}
.basis-block .basis-left{display:flex;flex-direction:column;width:100%}
.basis-block .basisfoto{aspect-ratio:4/5;position:relative;flex:1}
.basis-block .basisfoto .badge-corner{position:absolute;top:.6rem;left:.6rem;font-size:.48rem;letter-spacing:.18em;color:#fff;background:rgba(15,15,13,.7);padding:.28rem .5rem;border-radius:1px;text-transform:uppercase;z-index:2;backdrop-filter:blur(6px)}
.basis-text{display:flex;flex-direction:column;justify-content:center;width:240px}
.basis-text p{font-size:.86rem;color:var(--dark);line-height:1.6;margin-bottom:.6rem}
.basis-text p:last-child{margin-bottom:0}
.basis-arrow-right{display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.06em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding:0 .4rem;animation:arrowPulse 2s ease-in-out infinite}
@keyframes arrowPulse{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(6px);opacity:.7}}
@media(max-width:1100px){
  .basis-block{grid-template-columns:0.5fr 200px auto 1fr 1fr 1fr;gap:1rem}
}
@media(max-width:900px){
  .basis-block{grid-template-columns:1fr 1fr;gap:1rem}
  .basis-block .basis-left{width:100%}
  .basis-text{width:100%;grid-column:span 2}
  .basis-arrow-right{display:none}
}
@media(max-width:500px){
  .basis-block{grid-template-columns:1fr 1fr;gap:.6rem}
}

/* Variation cards – inline in basis-block row */
.variation-card{position:relative}
.variation-card .vc-img{aspect-ratio:9/16;position:relative}
.variation-card .vc-num{position:absolute;top:.6rem;left:.6rem;font-family:'Bebas Neue',sans-serif;font-size:.72rem;letter-spacing:.16em;color:#fff;background:rgba(15,15,13,.6);padding:.28rem .55rem;border-radius:1px;text-transform:uppercase;z-index:2;backdrop-filter:blur(6px)}
.variation-card .vc-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:.55rem;font-family:'DM Sans',sans-serif}
.variation-card .vc-meta .vc-title{font-size:.74rem;color:var(--dark);font-weight:500;letter-spacing:.04em}
.variation-card .vc-meta .vc-tag{font-size:.55rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}

/* legacy variations grid (still used as fallback) */
.variations{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
.variation-card{position:relative}
.variation-card .vc-img{aspect-ratio:9/16;position:relative}
.variation-card .vc-num{position:absolute;top:.7rem;left:.7rem;font-family:'Bebas Neue',sans-serif;font-size:.78rem;letter-spacing:.16em;color:#fff;background:rgba(15,15,13,.6);padding:.3rem .6rem;border-radius:1px;text-transform:uppercase;z-index:2;backdrop-filter:blur(6px)}
.variation-card .vc-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:.7rem;font-family:'DM Sans',sans-serif}
.variation-card .vc-meta .vc-title{font-size:.82rem;color:var(--dark);font-weight:500;letter-spacing:.04em}
.variation-card .vc-meta .vc-tag{font-size:.6rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
@media(max-width:700px){.variations{grid-template-columns:1fr}}

/* ===== Editorial Moodboard – clean grid, vertical title ===== */
.editorial-mb{position:relative;margin-top:2.5rem;display:grid;grid-template-columns:48px 1fr;gap:1.25rem;align-items:stretch}
.editorial-mb .emb-title{writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Bebas Neue',sans-serif;font-size:2.4rem;letter-spacing:.32em;color:#f4f0e8;line-height:1;align-self:stretch;display:flex;align-items:center;justify-content:center;border-right:0.5px solid rgba(255,255,255,.12);padding-right:.5rem}
.editorial-mb .emb-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:60px;gap:.7rem}
.editorial-mb .emb-tile{position:relative;border-radius:2px;overflow:hidden;background:#1a1916;border:0.5px solid rgba(255,255,255,.08);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.editorial-mb .emb-tile:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2)}
.editorial-mb .emb-img{position:absolute;inset:0;background:linear-gradient(160deg,var(--cb-a,#2a2624),var(--cb-b,#5a4a48));z-index:0}
.editorial-mb .emb-img::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.16),transparent 55%),radial-gradient(ellipse at 70% 75%,var(--cb-c,#c800ff)40,transparent 60%)}
.editorial-mb .emb-silhouette{position:absolute;inset:25%;background:rgba(15,15,13,.18);border-radius:50% 50% 8% 8% / 30% 30% 8% 8%;filter:blur(2px);z-index:1;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.editorial-mb .emb-tile:hover .emb-silhouette{transform:scale(1.06)}
.editorial-mb .emb-num{position:absolute;top:.55rem;left:.6rem;font-family:'DM Sans',monospace,sans-serif;font-size:.5rem;letter-spacing:.16em;color:rgba(255,255,255,.85);background:rgba(0,0,0,.4);padding:.22rem .5rem;border-radius:1px;backdrop-filter:blur(6px);z-index:3;text-transform:uppercase}
.editorial-mb .emb-tag{position:absolute;bottom:.6rem;left:.6rem;right:.6rem;font-family:'DM Sans',monospace,sans-serif;font-size:.55rem;letter-spacing:.12em;color:rgba(255,255,255,.85);text-transform:uppercase;z-index:3;line-height:1.3}
/* Spans calibrated to true aspect ratios.
   Container ~1100px / 12cols → col ≈ 91px (after gaps). row-auto=60px, gap=.7rem (≈11px).
   16:9 → span 6 cols (~ 558px wide) need height ≈314 → 5 rows: 5*60 + 4*11 = 344 ✓ close (16:9.85)
   5:4  → span 4 cols (~ 366px wide) need height ≈293 → 5 rows: 5*60 + 4*11 = 344 (5:4.7) ok-ish; use 4 rows: 240+33=273 (5:3.7); pick 5 rows for soft 5:4
   9:16 → span 3 cols (~ 273px wide) need height ≈486 → 8 rows: 8*60 + 7*11 = 557 (9:18.4), 7 rows: 420+66=486 ✓ EXACT
*/
/* Layout per sketch: 9 tiles, explicit positioning, no gaps.
   12 cols, row=60px, gap=.7rem (~11px). col≈82px.
   Row A (1-6):    t1 16:9 hero (12 cols × 6 rows ≈ 1100×415 = 16:6 cinematic wide)
   Row B (7-11):   t2 5:4, t3 5:4, t4 5:4 (4 cols × 5 rows each ≈ 361×344 = 5:4.76 ✓)
   Row C (12-19):  t5 1:1 (6 cols × 8 rows ≈ 547×557 = 1:1.02 ✓)
                   t6 9:16 (3 cols × 16 rows ≈ 268×477 = 9:16 ✓ — spans rows C+D+E)
   Row D (20-23):  t7 16:9 (6 cols × 4 rows ≈ 547×273 = 16:8 ≈ 16:9 ✓)
   Row E (24-27):  t8 16:9 (6 cols × 4 rows)
                   t9 9:16 right of t6 (3 cols × ?) — sketch: t9 at right, smaller portrait
*/
/* Layout per sketch: 9 tiles, explicit positioning, no gaps.
   12 cols, row=60px, gap=.7rem (~11px). col≈82px.
   Row A (rows 1-6):     t1 16:9 hero wide (full)
   Row B (rows 7-11):    t2,t3,t4 5:4 (three across)
   Row C/D (rows 12-23): t5 1:1 (left), t6 9:16 tall (right) — t6 spans C+D
                         t7 16:9 (left, under t5, in row D)
   Row E (rows 24-27):   t8 16:9 (left), t9 9:16 (right, smaller — separate from t6)
*/
.editorial-mb .emb-grid{grid-auto-flow:dense}
/* TRUE aspect ratios — container ~1100px, row 60px, gap 11px, col ~82px */
.editorial-mb .emb-tile.t1{grid-column:1 / span 12;grid-row:1 / span 9}    /* 16:9 hero */
.editorial-mb .emb-tile.t2{grid-column:1 / span 3;grid-row:10 / span 4}    /* 1:1 */
.editorial-mb .emb-tile.t3{grid-column:4 / span 3;grid-row:10 / span 4}    /* 1:1 */
.editorial-mb .emb-tile.t4{grid-column:7 / span 3;grid-row:10 / span 4}    /* 1:1 */
.editorial-mb .emb-tile.t5{grid-column:10 / span 3;grid-row:10 / span 4}   /* 1:1 */
.editorial-mb .emb-tile.t6{grid-column:7 / span 6;grid-row:14 / span 14}   /* 9:16 portrait */
.editorial-mb .emb-tile.t7{grid-column:1 / span 6;grid-row:14 / span 5}    /* 16:9 */
.editorial-mb .emb-tile.t8{grid-column:1 / span 6;grid-row:19 / span 9}    /* 4:5 — fills gap to t6 */
.editorial-mb .emb-tile.t9{grid-column:1 / span 6;grid-row:28 / span 5}   /* 16:9 */
.editorial-mb .emb-tile.t10{grid-column:7 / span 6;grid-row:28 / span 5}  /* 16:9 */
.editorial-mb .emb-caption{margin-top:1rem;grid-column:1 / -1;text-align:center;font-family:'DM Sans',monospace,sans-serif;font-size:.65rem;letter-spacing:.32em;color:rgba(244,240,232,.55);text-transform:uppercase;padding:1rem 0 .25rem}
@media(max-width:900px){
  .editorial-mb{grid-template-columns:32px 1fr;gap:.75rem}
  .editorial-mb .emb-title{font-size:1.6rem;letter-spacing:.24em}
  .editorial-mb .emb-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:50px;gap:.55rem}
  .editorial-mb .emb-tile.t1{grid-column:1 / span 6;grid-row:auto / span 5}
  .editorial-mb .emb-tile.t2,.editorial-mb .emb-tile.t3,.editorial-mb .emb-tile.t4{grid-column:auto / span 2;grid-row:auto / span 4}
  .editorial-mb .emb-tile.t5{grid-column:1 / span 3;grid-row:auto / span 5}
  .editorial-mb .emb-tile.t6{grid-column:4 / span 3;grid-row:span 9}
  .editorial-mb .emb-tile.t7{grid-column:1 / span 3;grid-row:auto / span 4}
  .editorial-mb .emb-tile.t8{grid-column:1 / span 6;grid-row:auto / span 4}
  .editorial-mb .emb-tile.t9{grid-column:1 / span 6;grid-row:auto / span 4}
}
@media(max-width:500px){
  .editorial-mb .emb-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:60px}
  .editorial-mb .emb-tile.t1{grid-column:1 / span 2;grid-row:auto / span 3}
  .editorial-mb .emb-tile.t2,.editorial-mb .emb-tile.t3,.editorial-mb .emb-tile.t4{grid-column:auto / span 1;grid-row:auto / span 3}
  .editorial-mb .emb-tile.t5{grid-column:1 / span 1;grid-row:auto / span 4}
  .editorial-mb .emb-tile.t6{grid-column:2 / span 1;grid-row:span 7}
  .editorial-mb .emb-tile.t7{grid-column:1 / span 1;grid-row:auto / span 3}
  .editorial-mb .emb-tile.t8{grid-column:1 / span 2;grid-row:auto / span 3}
  .editorial-mb .emb-tile.t9{grid-column:1 / span 2;grid-row:auto / span 3}
}

/* ===== Infinite Canvas Moodboard – drag + pinterest-style ===== */
.canvas-board{position:relative;margin-top:2.5rem;height:680px;background:#0a0a08;border-radius:3px;border:0.5px solid rgba(255,255,255,.08);overflow:hidden;cursor:grab;user-select:none;touch-action:none;isolation:isolate}
.canvas-board.dragging{cursor:grabbing}
.canvas-board::before{content:'';position:absolute;inset:-50%;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0);background-size:24px 24px;pointer-events:none;z-index:0}
.canvas-board::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 25% 20%,rgba(200,0,255,.14),transparent 55%),radial-gradient(ellipse at 75% 80%,rgba(0,153,255,.12),transparent 55%);pointer-events:none;z-index:0}
.canvas-meta{position:absolute;top:1rem;left:1rem;right:1rem;display:flex;justify-content:space-between;align-items:center;z-index:5;font-family:'DM Sans',monospace,sans-serif;font-size:.58rem;letter-spacing:.16em;color:rgba(255,255,255,.6);text-transform:uppercase;pointer-events:none;flex-wrap:wrap;gap:.5rem}
.canvas-meta .cm-l{display:flex;gap:.9rem;align-items:center}
.canvas-meta .cm-dot{width:6px;height:6px;border-radius:50%;background:#22dd88;box-shadow:0 0 8px #22dd88;animation:cmBlink 1.5s ease-in-out infinite}
@keyframes cmBlink{50%{opacity:.3}}
.canvas-hint{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);font-family:'DM Sans',monospace,sans-serif;font-size:.58rem;letter-spacing:.18em;color:rgba(255,255,255,.55);text-transform:uppercase;z-index:5;pointer-events:none;background:rgba(0,0,0,.4);padding:.4rem .9rem;border-radius:1px;backdrop-filter:blur(8px);border:0.5px solid rgba(255,255,255,.08)}
.canvas-inner{position:absolute;top:0;left:0;width:1800px;height:1200px;will-change:transform;z-index:1}
.cb-tile{position:absolute;border-radius:3px;overflow:hidden;border:0.5px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,z-index 0s .3s;background:#1a1a18}
.cb-tile:hover{box-shadow:0 30px 80px rgba(200,0,255,.35),0 6px 18px rgba(0,0,0,.6);z-index:50;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,z-index 0s 0s}
.cb-tile .cb-img{position:absolute;inset:0;background:linear-gradient(160deg,var(--cb-a,#2a2624),var(--cb-b,#5a4a48));z-index:0}
.cb-tile .cb-img::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.18),transparent 55%),radial-gradient(ellipse at 70% 75%,var(--cb-c,#c800ff)55,transparent 60%)}
.cb-tile .cb-silhouette{position:absolute;inset:25%;background:rgba(15,15,13,.2);border-radius:50% 50% 8% 8% / 30% 30% 8% 8%;filter:blur(3px);z-index:1}
.cb-tile .cb-tag{position:absolute;bottom:.5rem;left:.5rem;font-family:'DM Sans',monospace,sans-serif;font-size:.5rem;letter-spacing:.1em;color:rgba(255,255,255,.9);background:rgba(0,0,0,.55);padding:.3rem .55rem;border-radius:1px;backdrop-filter:blur(6px);text-transform:uppercase;z-index:3;display:flex;align-items:center;gap:.35rem}
.cb-tile .cb-tag::before{content:'›';color:var(--accent)}
.cb-tile .cb-corner{position:absolute;top:.4rem;right:.4rem;font-family:'DM Sans',monospace,sans-serif;font-size:.45rem;letter-spacing:.1em;color:rgba(255,255,255,.55);z-index:3;text-transform:uppercase}
@media(max-width:700px){.canvas-board{height:560px}.canvas-inner{width:1400px;height:1000px}}

/* ===== Neural Grid Moodboard – AI vibe ===== */
.neural-board{position:relative;margin-top:2.5rem;padding:2rem 1rem;background:#0a0a08;border-radius:3px;border:0.5px solid rgba(255,255,255,.08);overflow:hidden;isolation:isolate}
.neural-board::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 0);background-size:18px 18px;animation:dotDrift 30s linear infinite;pointer-events:none;z-index:0}
.neural-board::after{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse at 20% 10%,rgba(200,0,255,.18),transparent 50%),
  radial-gradient(ellipse at 80% 90%,rgba(0,153,255,.16),transparent 50%);
  pointer-events:none;z-index:0}
@keyframes dotDrift{0%{background-position:0 0}100%{background-position:36px 36px}}
.neural-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding:0 .25rem;position:relative;z-index:2;font-family:'DM Sans',monospace,sans-serif;font-size:.6rem;letter-spacing:.16em;color:rgba(255,255,255,.55);text-transform:uppercase;flex-wrap:wrap;gap:.5rem}
.neural-meta .nm-l{display:flex;gap:1rem;align-items:center}
.neural-meta .nm-dot{width:6px;height:6px;border-radius:50%;background:#22dd88;box-shadow:0 0 8px #22dd88;animation:blink 1.5s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
.neural-meta code{font-family:inherit;color:rgba(255,255,255,.75)}
.neural-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:80px;gap:.6rem;position:relative;z-index:2}
.nb-tile{position:relative;border-radius:2px;overflow:hidden;border:0.5px solid rgba(255,255,255,.1);background:#1a1a18;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
.nb-tile::before{content:'';position:absolute;inset:0;background:inherit;z-index:0}
.nb-tile .nb-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1}
.nb-tile .nb-prompt{position:absolute;left:.6rem;right:.6rem;bottom:.55rem;font-family:'DM Sans',monospace,sans-serif;font-size:.55rem;letter-spacing:.04em;color:rgba(255,255,255,.85);background:rgba(0,0,0,.55);padding:.35rem .55rem;border-radius:1px;backdrop-filter:blur(8px);z-index:3;line-height:1.4;text-transform:none;display:flex;align-items:center;gap:.4rem}
.nb-tile .nb-prompt::before{content:'›';color:var(--accent);font-weight:700}
.nb-tile .nb-seed{position:absolute;top:.5rem;right:.6rem;font-family:'DM Sans',monospace,sans-serif;font-size:.5rem;letter-spacing:.1em;color:rgba(255,255,255,.5);z-index:3;text-transform:uppercase}
.nb-tile .nb-corner{position:absolute;top:0;left:0;width:14px;height:14px;border-top:1px solid rgba(255,255,255,.4);border-left:1px solid rgba(255,255,255,.4);z-index:3}
.nb-tile .nb-corner.br{top:auto;left:auto;bottom:0;right:0;border:none;border-bottom:1px solid rgba(255,255,255,.4);border-right:1px solid rgba(255,255,255,.4)}
.nb-tile .nb-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(200,0,255,.12) 48%,rgba(0,153,255,.12) 52%,transparent 100%);background-size:100% 300%;background-position:0 -100%;z-index:2;pointer-events:none;transition:opacity .3s;opacity:0}
.nb-tile:hover{transform:translateY(-2px);border-color:rgba(200,0,255,.5);box-shadow:0 8px 30px rgba(200,0,255,.2)}
.nb-tile:hover .nb-scan{opacity:1;animation:scanY 1.4s ease-in-out}
@keyframes scanY{0%{background-position:0 -100%}100%{background-position:0 200%}}
.nb-16x9{grid-column:span 4;grid-row:span 3}
.nb-16x9-s{grid-column:span 3;grid-row:span 2}
.nb-9x16{grid-column:span 2;grid-row:span 5}
.nb-4x5{grid-column:span 2;grid-row:span 3}
.nb-1x1{grid-column:span 2;grid-row:span 2}
.nb-themed{background:linear-gradient(160deg,var(--nb-a,#2a2624),var(--nb-b,#5a4a48))}
.nb-themed::after{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.18),transparent 55%),
  radial-gradient(ellipse at 70% 75%,var(--nb-c,#c800ff)40,transparent 60%);z-index:1}
.nb-tile .nb-silhouette{position:absolute;inset:25%;background:rgba(15,15,13,.18);border-radius:50% 50% 8% 8% / 30% 30% 8% 8%;filter:blur(2px);z-index:2;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nb-tile:hover .nb-silhouette{transform:scale(1.06)}
@media(max-width:900px){
  .neural-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:65px}
  .nb-16x9{grid-column:span 4;grid-row:span 2}
  .nb-16x9-s{grid-column:span 4;grid-row:span 2}
  .nb-9x16{grid-column:span 2;grid-row:span 4}
  .nb-4x5{grid-column:span 2;grid-row:span 3}
  .nb-1x1{grid-column:span 2;grid-row:span 2}
}
@media(max-width:500px){
  .neural-grid{grid-template-columns:repeat(2,1fr)}
  .nb-16x9,.nb-16x9-s{grid-column:span 2;grid-row:span 2}
  .nb-9x16{grid-column:span 1;grid-row:span 3}
  .nb-4x5{grid-column:span 1;grid-row:span 2}
  .nb-1x1{grid-column:span 1;grid-row:span 1}
}

/* Moodboard – mixed aspect ratios in masonry-style grid */
.moodboard{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:90px;gap:.75rem;margin-top:2rem}
.moodboard .ph-tile{position:relative;border-radius:2px;overflow:hidden}
.moodboard .ph-tile::after{content:attr(data-num);position:absolute;bottom:.5rem;right:.7rem;font-family:'Bebas Neue',sans-serif;color:rgba(255,255,255,.85);font-size:1rem;letter-spacing:.06em;line-height:1;mix-blend-mode:overlay}
.moodboard .ph-tile .label{position:absolute;top:.55rem;left:.55rem;background:rgba(15,15,13,.55);color:#fff;padding:.24rem .55rem;font-size:.5rem;letter-spacing:.14em;border-radius:1px;backdrop-filter:blur(4px);text-transform:uppercase}
.moodboard .ph-tile .silhouette{position:absolute;inset:25%;background:rgba(15,15,13,.18);border-radius:50% 50% 8% 8% / 30% 30% 8% 8%;filter:blur(2px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.moodboard .ph-tile:hover .silhouette{transform:scale(1.08)}
/* aspect spans */
.moodboard .mb-16x9{grid-column:span 4;grid-row:span 3}
.moodboard .mb-16x9-s{grid-column:span 3;grid-row:span 2}
.moodboard .mb-9x16{grid-column:span 2;grid-row:span 5}
.moodboard .mb-4x5{grid-column:span 2;grid-row:span 3}
.moodboard .mb-1x1{grid-column:span 2;grid-row:span 2}
@media(max-width:900px){
  .moodboard{grid-template-columns:repeat(4,1fr);grid-auto-rows:70px}
  .moodboard .mb-16x9{grid-column:span 4;grid-row:span 2}
  .moodboard .mb-16x9-s{grid-column:span 4;grid-row:span 2}
  .moodboard .mb-9x16{grid-column:span 2;grid-row:span 4}
  .moodboard .mb-4x5{grid-column:span 2;grid-row:span 3}
  .moodboard .mb-1x1{grid-column:span 2;grid-row:span 2}
}
@media(max-width:500px){
  .moodboard{grid-template-columns:repeat(2,1fr)}
  .moodboard .mb-16x9,.moodboard .mb-16x9-s{grid-column:span 2;grid-row:span 2}
  .moodboard .mb-9x16{grid-column:span 1;grid-row:span 3}
  .moodboard .mb-4x5{grid-column:span 1;grid-row:span 2}
  .moodboard .mb-1x1{grid-column:span 1;grid-row:span 1}
}

/* 6-up visual grid */
.visuals-6grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.visuals-6grid .ph-tile{aspect-ratio:4/5;position:relative}
.visuals-6grid .ph-tile::after{content:attr(data-num);position:absolute;bottom:.5rem;right:.7rem;font-family:'Bebas Neue',sans-serif;color:rgba(255,255,255,.85);font-size:1rem;letter-spacing:.06em;line-height:1;mix-blend-mode:overlay}
.visuals-6grid .ph-tile .label{position:absolute;top:.5rem;left:.5rem;background:rgba(15,15,13,.55);color:#fff;padding:.22rem .5rem;font-size:.5rem;letter-spacing:.14em;border-radius:1px;backdrop-filter:blur(4px);bottom:auto;width:auto;height:auto;display:inline-block}
.visuals-6grid .ph-tile .silhouette{position:absolute;inset:25%;background:rgba(15,15,13,.18);border-radius:50% 50% 8% 8% / 30% 30% 8% 8%;filter:blur(2px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.visuals-6grid .ph-tile:hover .silhouette{transform:scale(1.08)}
@media(max-width:700px){.visuals-6grid{grid-template-columns:repeat(2,1fr)}}

/* 9-up grid */
.visuals-9grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:2rem}
.visuals-9grid .ph-tile{aspect-ratio:1;position:relative}
.visuals-9grid .ph-tile::after{content:attr(data-num);position:absolute;bottom:.5rem;right:.7rem;font-family:'Bebas Neue',sans-serif;color:rgba(255,255,255,.8);font-size:1.1rem;letter-spacing:.06em;line-height:1;mix-blend-mode:overlay}
.visuals-9grid .ph-tile .label{position:absolute;top:.5rem;left:.5rem;background:rgba(15,15,13,.55);color:#fff;padding:.22rem .5rem;font-size:.5rem;letter-spacing:.14em;border-radius:1px;backdrop-filter:blur(4px);bottom:auto;width:auto;height:auto;display:inline-block}
.visuals-9grid .ph-tile .silhouette{position:absolute;inset:25%;background:rgba(15,15,13,.18);border-radius:50% 50% 8% 8% / 30% 30% 8% 8%;filter:blur(2px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.visuals-9grid .ph-tile:hover .silhouette{transform:scale(1.08)}
@media(max-width:600px){.visuals-9grid{grid-template-columns:repeat(2,1fr)}}

/* 3-up visual grid */
.visuals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.visuals-grid .ph-tile{aspect-ratio:4/5;position:relative}
.visuals-grid .ph-tile .label{position:absolute;top:.85rem;left:.85rem;background:rgba(15,15,13,.55);color:#fff;padding:.3rem .65rem;font-size:.55rem;letter-spacing:.16em;border-radius:1px;backdrop-filter:blur(5px);bottom:auto;width:auto;height:auto;display:inline-block}
.visuals-grid .ph-tile::after{content:attr(data-num);position:absolute;bottom:.85rem;right:1rem;font-family:'Bebas Neue',sans-serif;color:rgba(255,255,255,.85);font-size:2.2rem;letter-spacing:.05em;line-height:1;mix-blend-mode:overlay}
.visuals-grid .ph-tile .silhouette{position:absolute;inset:18%;background:rgba(15,15,13,.18);border-radius:60% 60% 8% 8% / 30% 30% 8% 8%;filter:blur(2px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.visuals-grid .ph-tile:hover .silhouette{transform:translateY(-4px) scale(1.02)}
.visuals-grid .ph-tile.shape-bottle .silhouette{inset:8% 35% 6% 35%;border-radius:14% 14% 4% 4% / 8% 8% 4% 4%}
.visuals-grid .ph-tile.shape-jar .silhouette{inset:25% 20% 12% 20%;border-radius:14% 14% 6% 6%}
.visuals-grid .ph-tile.shape-box .silhouette{inset:22% 18% 18% 18%;border-radius:6%}
.visuals-grid .ph-tile.shape-chair .silhouette{inset:18% 25% 8% 25%;border-radius:50% 50% 8% 8% / 35% 35% 8% 8%}
.visuals-grid .ph-tile.shape-plate .silhouette{inset:30% 18% 28% 18%;border-radius:50%}

/* Video block */
.video-ph{width:100%;aspect-ratio:16/9;background:#0f0f0d;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;position:relative;overflow:hidden;cursor:pointer;margin-top:1rem;border:0.5px solid var(--border);padding:4px}
.video-ph::before{content:'';position:absolute;inset:0;border-radius:4px;padding:4px;background:linear-gradient(135deg,rgba(200,0,255,.55),rgba(0,153,255,.55),rgba(200,0,255,.55));background-size:200% 200%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:vidGradFlow 6s linear infinite;z-index:5;pointer-events:none}
@keyframes vidGradFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.video-ph::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse at 30% 40%,rgba(200,0,255,.22),transparent 55%),
  radial-gradient(ellipse at 70% 60%,rgba(0,153,255,.18),transparent 55%),
  linear-gradient(135deg,#2a2624,#0f0f0d);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.video-ph:hover::before{transform:scale(1.04)}
.play-btn{width:72px;height:72px;border-radius:50%;border:1px solid #fff;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:transform .3s,background .3s}
.play-btn::after{content:'';width:0;height:0;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff;margin-left:3px;transition:border-color .3s}
.play-btn::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,255,255,.3);animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}
.video-ph:hover .play-btn{background:#fff}
.video-ph:hover .play-btn::after{border-color:transparent transparent transparent var(--accent)}
.video-label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);position:relative;z-index:1}
.video-ph .vmeta{position:absolute;top:1rem;left:1rem;display:flex;gap:.4rem;z-index:1}
.video-ph .vmeta span{font-size:.55rem;color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);padding:.3rem .6rem;letter-spacing:.16em;text-transform:uppercase;border:0.5px solid rgba(255,255,255,.15);border-radius:1px}
.video-ph .vbar{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.1);z-index:1}
.video-ph .vbar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:34%;background:var(--grad)}
.video-ph .vtimecode{position:absolute;bottom:.9rem;right:1rem;font-family:'DM Sans',monospace,sans-serif;font-size:.62rem;color:rgba(255,255,255,.6);letter-spacing:.1em;z-index:1}

/* CTA */
.case-cta{padding:6rem 2.5rem;text-align:center;background:var(--bg-dark);margin:4rem -2.5rem 0;position:relative;overflow:hidden;border-top:0.5px solid var(--border)}
.case-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(200,0,255,.06),transparent 60%);pointer-events:none}
.case-cta > *{position:relative;z-index:1}
.case-cta h2{margin-bottom:1rem}
.case-cta p{color:var(--muted);font-size:.95rem;max-width:420px;margin:0 auto 2.5rem;line-height:1.7}
.cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;align-items:center}

.next-case{padding:2.5rem 0;border-top:0.5px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.next-case a{text-decoration:none;color:var(--dark);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.5rem;transition:color .2s,gap .25s}
.next-case a:hover{color:var(--accent);gap:.85rem}
.next-case .label{font-size:.62rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}

@media(max-width:900px){
  .meta-grid{grid-template-columns:1fr;gap:1.5rem}
  .basis-block{grid-template-columns:1fr;gap:1.5rem}
  .visuals-grid{grid-template-columns:1fr;gap:.75rem}
  .visuals-grid .ph-tile{aspect-ratio:3/2}
  .grid-9{grid-template-columns:repeat(3,1fr);gap:.4rem}
  .case-cta{margin:3rem -1.5rem 0;padding:4rem 1.5rem}
  .next-case{flex-direction:column;text-align:center}
  .case-section{padding:3rem 0}
}
@media(max-width:480px){
  .case-cta{margin:3rem -1rem 0;padding:3rem 1rem}
  .case-hero{padding:3rem 0 1.5rem}
  .case-hero-img{aspect-ratio:4/3}
}