:root{
  --paper:#FAFAFA;
  --ink:#252324;
  --ink-soft:#6B6B6C;
  --flare:#50B0BE;
  --sun:#E4E4E4;
  --peri:#45747A;
  --warmgrey:#ECECEC;
  --card-bg:#FFFFFF;
  --max:1180px;
  --gap:20px;
  --radius:18px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}
:focus-visible{outline:3px solid var(--peri);outline-offset:3px;border-radius:4px;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);display:inline-flex;align-items:center;gap:10px;}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--flare);display:inline-block;}

/* NAV */
header{position:sticky;top:0;z-index:50;background:rgba(250,250,250,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(37,35,36,.08);}
nav.wrap{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:20px;display:flex;align-items:center;gap:10px;}
.brand-logo{width:32px;height:32px;border-radius:8px;flex-shrink:0;}
.brand .role-chip{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.03em;background:var(--warmgrey);color:var(--ink-soft);padding:4px 9px;border-radius:20px;}
.nav-links{display:flex;gap:32px;font-size:15px;font-weight:500;}
.nav-links a{position:relative;padding:6px 0;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--flare);transition:width .25s var(--ease);}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--peri);font-weight:700;}
.nav-links a.active::after{width:100%;background:var(--peri);}
.nav-cta{background:var(--ink);color:var(--paper);padding:10px 20px;border-radius:30px;font-size:14px;font-weight:600;white-space:nowrap;transition:background .2s var(--ease),transform .2s var(--ease);}
.nav-cta:hover{background:var(--flare);color:var(--ink);transform:translateY(-1px);}
.nav-cta.active{background:var(--flare);color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:14px;}
.lang-switch{display:flex;align-items:center;gap:2px;background:var(--warmgrey);border-radius:20px;padding:3px;}
.lang-link{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.02em;padding:5px 10px;border-radius:16px;color:var(--ink-soft);transition:background .2s var(--ease),color .2s var(--ease);}
.lang-link:hover{color:var(--ink);}
.lang-link.active{background:var(--ink);color:var(--paper);}
@media(max-width:780px){.nav-links{display:none;}.brand .role-chip{display:none;}}

/* HERO */
.hero{padding:96px 0 80px;position:relative;}
.hero-top{display:flex;justify-content:flex-start;align-items:flex-start;gap:40px;margin-bottom:40px;}
.hero-greeting{font-size:17px;color:var(--ink-soft);max-width:280px;}
.hero h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(40px,7.2vw,92px);line-height:1.04;letter-spacing:-.01em;max-width:980px;}
.hero h1 em{font-style:italic;font-weight:500;color:var(--ink-soft);}
.hero h1 .mark{position:relative;white-space:nowrap;}
.hero h1 .mark svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible;}
.hero h1 .mark path{fill:none;stroke:var(--flare);stroke-width:10;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.1s var(--ease) .5s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.hero-sub{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;align-items:center;}
.hero-sub p{font-size:18px;color:var(--ink-soft);margin-right:8px;}
.chip{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;padding:8px 16px;border-radius:30px;border:1.5px solid var(--ink);text-transform:uppercase;letter-spacing:.02em;transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);}
.chip:nth-of-type(1){background:var(--sun);border-color:var(--sun);}
.chip:nth-of-type(2){background:var(--peri);border-color:var(--peri);color:var(--paper);}
.chip:nth-of-type(3){background:var(--flare);border-color:var(--flare);color:var(--ink);}
.chip:hover{transform:translateY(-3px) rotate(-1deg);}
.hero-bottom{display:flex;justify-content:flex-start;margin-top:18px;}
.hero-bottom span{font-size:18px;color:var(--ink-soft);max-width:320px;text-align:left;}
@media(max-width:780px){
  .hero{padding:64px 0 56px;}
  .hero-top{flex-direction:column;gap:18px;}
}

/* SECTIONS */
section{padding:96px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px;flex-wrap:wrap;}
.section-head h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,4vw,46px);margin-top:10px;}
.section-head p{max-width:320px;color:var(--ink-soft);font-size:15px;}
#work .section-head p{max-width:560px;}
#approach .section-head h2{font-size:clamp(24px,2.8vw,34px);}

/* =============================================
   PROJECT CARDS — parallax image, no text body
   ============================================= */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);max-width:840px;margin:0 auto;}
@media(max-width:640px){.work-grid{grid-template-columns:1fr;}}
#work .card{aspect-ratio:9/16;}
@media(max-width:640px){#work .card{aspect-ratio:16/9;}}
#work .card-overlay{opacity:1;}

.card{
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  aspect-ratio:3/4;
  cursor:pointer;
  /* perspective for tilt */
  perspective:600px;
  /* subtle shadow always present */
  box-shadow:0 4px 24px -8px rgba(37,35,36,.18);
  transition:box-shadow .4s var(--ease);
}
.card:hover{box-shadow:0 20px 48px -16px rgba(37,35,36,.32);}

/* inner wrapper that actually tilts */
.card-inner{
  position:absolute;inset:0;
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .08s linear;
  transform-style:preserve-3d;
  will-change:transform;
}

/* the image layer that shifts on parallax */
.card-img-layer{
  position:absolute;
  /* 10% bigger on each side so parallax doesn't expose edges */
  inset:-10%;
  width:120%;
  height:120%;
  transition:transform .08s linear;
  will-change:transform;
  display:flex;align-items:center;justify-content:center;
}
.card[data-tint="flare"] .card-img-layer{background:var(--flare);}
.card[data-tint="sun"]   .card-img-layer{background:var(--sun);}
.card[data-tint="peri"]  .card-img-layer{background:var(--peri);}
.card[data-tint="ink"]   .card-img-layer{background:var(--ink);}
.card-img-layer img{width:100%;height:100%;object-fit:cover;display:block;}

/* work-grid cards: fill the frame — drop the oversized parallax zoom
   layer so the 9:16 cover-crop isn't zoomed in past the phone itself */
#work .card-img-layer{inset:0;width:100%;height:100%;}
#work .card-img-layer img{object-fit:cover;}

/* decorative SVG icon inside the colour field */
.card-img-layer svg{
  width:36%;height:36%;
  opacity:.85;
  transition:transform .5s var(--ease);
  pointer-events:none;
  flex-shrink:0;
}
.card:hover .card-img-layer svg{transform:scale(1.12) rotate(-4deg);}
.card[data-tint="sun"] .card-img-layer svg{stroke:var(--ink)!important;}

/* overlay gradient so label sits on top */
.card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.72) 0%, rgba(10,10,10,0) 55%);
  opacity:0;
  transition:opacity .35s var(--ease);
  border-radius:var(--radius);
  z-index:2;
  display:flex;align-items:flex-end;padding:22px;
}
.card:hover .card-overlay{opacity:1;}
.card-label{
  color:#fff;
  display:flex;align-items:flex-end;justify-content:space-between;width:100%;
}
.card-label h3{font-family:'Fraunces',serif;font-weight:600;font-size:22px;line-height:1.1;}
.card-label .meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.card-label .card-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.65);}
.card-label .tag-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;row-gap:8px;}
.card-label .tag{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.02em;background:rgba(255,255,255,.18);color:#fff;padding:4px 9px;border-radius:20px;backdrop-filter:blur(4px);}

/* mobile: always show label, no hover needed */
@media(hover:none){
  .card-overlay{opacity:1;}
}

/* =============================================
   ABOUT — pinned dark reveal layer, covered by Approach
   ============================================= */
#about{
  position:sticky;
  top:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
/* Chrome only keeps position:sticky "stuck" for as long as there's extra
   height in its containing block beyond the sticky element's own box, so a
   sticky section with no sibling content never appears to stick at all.
   This spacer supplies that extra height and gives the pin a fixed,
   intentional duration instead of a random or absent one. */
.sticky-spacer{height:60vh;}
.about-section .eyebrow{color:rgba(250,250,250,.55);}
.about-section .eyebrow .dot{background:var(--flare);}
.about-section .section-head p{color:rgba(250,250,250,.6);}
.about-section .section-head h2{color:var(--paper);}

.about-layout{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start;width:100%;margin-top:48px;}
@media(max-width:900px){.about-layout{grid-template-columns:1fr;gap:32px;}}
.about-illustration{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;}
.about-illustration img{width:100%;height:100%;object-fit:contain;display:block;}
@media(max-width:900px){.about-illustration{display:none;}}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-bottom:56px;}
@media(max-width:600px){.stats-grid{grid-template-columns:repeat(1,1fr);}}
.stat{border-top:1px solid rgba(250,250,250,.16);padding-top:18px;}
.stat .num{font-family:'Fraunces',serif;font-size:clamp(34px,5vw,52px);font-weight:600;color:var(--flare);line-height:1;}
.stat .label{margin-top:8px;font-size:14px;color:rgba(250,250,250,.65);}

.about-bio{display:flex;flex-direction:column;gap:32px;}
.about-bio p{font-size:19px;line-height:1.55;color:rgba(250,250,250,.85);}
.about-bio p strong{color:var(--paper);font-weight:600;}

.timeline{display:flex;flex-direction:column;gap:16px;}
.timeline-row{display:grid;grid-template-columns:90px 1fr;gap:16px;padding-bottom:16px;border-bottom:1px solid rgba(250,250,250,.1);font-size:14px;}
.timeline-row .yrs{font-family:'JetBrains Mono',monospace;color:var(--sun);font-size:12.5px;}
.timeline-row .role{color:var(--paper);font-weight:600;}
.timeline-row .org{color:rgba(250,250,250,.55);margin-top:2px;}

/* =============================================
   PHILOSOPHY — static cards, ordered by weight
   ============================================= */
.phil-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
@media(max-width:900px){.phil-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.phil-grid{grid-template-columns:1fr;}}

.phil-card{
  border-radius:var(--radius);
  padding:28px 24px;
  min-height:220px;
  display:flex;flex-direction:column;
  border:1px solid rgba(37,35,36,.08);
}
.phil-card:nth-of-type(1){background:var(--flare);}
.phil-card:nth-of-type(2){background:var(--peri);}
.phil-card:nth-of-type(3){background:var(--sun);}
.phil-card:nth-of-type(4){background:var(--ink);}
.phil-card:nth-of-type(5){background:var(--flare);}
.phil-card:nth-of-type(6){background:var(--peri);}

.phil-card .icon{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:rgba(255,255,255,.3);}
.phil-card:nth-of-type(3) .icon{background:rgba(37,35,36,.08);}
.phil-card .icon svg{width:13px;height:13px;}

.phil-card h3{font-family:'Fraunces',serif;font-weight:600;font-size:18px;line-height:1.25;margin-bottom:12px;}
.phil-card p{font-size:15px;line-height:1.55;font-weight:500;}

.phil-card:nth-of-type(1) .icon,.phil-card:nth-of-type(1) h3,.phil-card:nth-of-type(1) p,
.phil-card:nth-of-type(3) .icon,.phil-card:nth-of-type(3) h3,.phil-card:nth-of-type(3) p,
.phil-card:nth-of-type(5) .icon,.phil-card:nth-of-type(5) h3,.phil-card:nth-of-type(5) p{color:var(--ink);}
.phil-card:nth-of-type(2) .icon,.phil-card:nth-of-type(2) h3,.phil-card:nth-of-type(2) p,
.phil-card:nth-of-type(4) .icon,.phil-card:nth-of-type(4) h3,.phil-card:nth-of-type(4) p,
.phil-card:nth-of-type(6) .icon,.phil-card:nth-of-type(6) h3,.phil-card:nth-of-type(6) p{color:var(--paper);}
.phil-card:nth-of-type(4) p{color:rgba(250,250,250,.92);}

/* CONTACT — pinned dark reveal layer */
#contact{
  position:sticky;
  top:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
.contact{text-align:left;padding-top:0;width:100%;}
.contact .eyebrow{justify-content:flex-start;margin-bottom:24px;color:rgba(250,250,250,.55);}
.contact h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(36px,7vw,78px);line-height:1.05;max-width:780px;margin:0 0 36px;}
.contact h2 .mark{position:relative;white-space:nowrap;color:var(--flare);font-style:italic;}
.contact-links{display:flex;justify-content:flex-start;gap:18px;flex-wrap:wrap;margin-top:32px;}
.contact-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:40px;font-weight:600;font-size:15.5px;transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease);}
.contact-btn.primary{background:var(--flare);color:var(--ink);}
.contact-btn.primary:hover{background:var(--paper);color:var(--ink);transform:translateY(-3px);}
.contact-btn.secondary{border:1.5px solid var(--paper);color:var(--paper);}
.contact-btn.secondary:hover{background:var(--paper);color:var(--ink);transform:translateY(-3px);}

footer{margin-top:90px;padding:32px 0 48px;border-top:1px solid rgba(37,35,36,.1);display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--ink-soft);flex-wrap:wrap;gap:12px;}
footer .foot-links{display:flex;gap:20px;}
footer a:hover{color:var(--flare);}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* =============================================
   PROJECT PAGE TEMPLATE — shared by every case study
   4 blocks: hero / client line / explain+images / gallery
   ============================================= */
.back-link{display:inline-flex;align-items:center;gap:8px;padding:20px 0;font-family:'JetBrains Mono',monospace;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);transition:color .2s var(--ease);}
.back-link:hover{color:var(--ink);}
.back-link svg{width:14px;height:14px;}

/* 1. Header — nothing visible until hover */
.project-hero-wrap{position:relative;}
.project-hero{width:100%;aspect-ratio:16/8;overflow:hidden;background:var(--warmgrey);}
.project-hero.ratio-16-9{aspect-ratio:16/9;}
.project-hero-img{width:100%;height:100%;object-fit:cover;display:block;}
.project-hero-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink-soft);text-align:center;padding:20px;}
.project-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(37,35,36,.85) 0%, rgba(37,35,36,0) 62%);
  opacity:0;transition:opacity .4s var(--ease);
  display:flex;align-items:flex-end;padding:40px;
}
.project-hero-wrap:hover .project-hero-scrim{opacity:1;}
@media(hover:none){.project-hero-scrim{opacity:1;}}
.project-hero-scrim h1{color:var(--paper);font-family:'Fraunces',serif;font-weight:600;font-size:clamp(26px,4vw,44px);line-height:1.1;}
.project-hero-scrim p{color:rgba(250,250,250,.82);font-size:15px;margin-top:8px;max-width:640px;}

/* mobile: title moves outside/below the hero image instead of overlaying it */
@media(max-width:780px){
  .project-hero-scrim{
    position:static;
    opacity:1;
    background:var(--ink);
    padding:28px;
  }
  .project-hero-scrim h1{font-size:clamp(22px,6vw,30px);}
}

/* brand hero — gradient + wordmark instead of a screenshot, used when a client's own identity is the cover */

/* 2. Client line */
.project-meta{padding:18px 0;font-family:'JetBrains Mono',monospace;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);}
.project-meta strong{color:var(--ink);font-weight:600;}

/* 3. Explanation + stacked images */
.project-explain{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding:56px 0 72px;}
@media(max-width:780px){.project-explain{grid-template-columns:1fr;gap:32px;}}
.project-explain .text p{font-size:18px;line-height:1.65;color:var(--ink-soft);}
.project-explain .text p+p{margin-top:16px;}
.project-explain .images{display:flex;flex-direction:column;gap:20px;align-items:center;}
.project-explain .images .img-slot{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;}
.project-explain .images img{width:100%;height:100%;object-fit:cover;display:block;}

/* draggable before/after comparison — two stacked images, one clipped by a movable handle */
.compare-slider{position:relative;width:100%;max-width:340px;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;}
.compare-base,.compare-overlay{position:absolute;inset:0;}
.compare-base img,.compare-overlay img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.compare-overlay{clip-path:inset(0 50% 0 0);}
.compare-handle{position:absolute;top:0;bottom:0;left:50%;pointer-events:none;}
.compare-handle::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--paper);transform:translateX(-50%);box-shadow:0 0 0 1px rgba(37,35,36,.15);}
.compare-handle-grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(37,35,36,.3);}
.compare-handle-grip svg{width:18px;height:18px;stroke:var(--ink);}
.compare-tag{position:absolute;top:14px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:20px;background:rgba(37,35,36,.55);color:var(--paper);backdrop-filter:blur(4px);}
.compare-tag-a{left:14px;}
.compare-tag-b{right:14px;}

/* generic placeholder block for any image not supplied yet */
.img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.02em;color:var(--ink-soft);background:var(--warmgrey);border:1px dashed rgba(37,35,36,.2);}
.img-placeholder.tint-flare{background:var(--flare);color:var(--ink);border-color:transparent;}
.img-placeholder.tint-peri{background:var(--peri);color:var(--paper);border-color:transparent;}
.img-placeholder.tint-sun{background:var(--sun);color:var(--ink);border-color:transparent;}
.img-placeholder.tint-ink{background:var(--ink);color:var(--paper);border-color:transparent;}

/* 4. Closing gallery — 3 columns, image + video mixed */
.project-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);padding-bottom:80px;}
@media(max-width:900px){.project-gallery{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){
  .project-gallery{display:flex;grid-template-columns:unset;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:16px;scrollbar-width:none;}
  .project-gallery::-webkit-scrollbar{display:none;}
  .project-gallery .g-item{flex:0 0 78%;scroll-snap-align:start;}
}
.g-item{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;}
.g-item img,.g-item video{width:100%;height:100%;object-fit:cover;display:block;background:var(--ink);}

/* 4b. Featured video — shown uncropped at full format, above a smaller supporting row */
.project-video-feature{width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--ink);}
.project-video-feature video{width:100%;height:100%;object-fit:contain;display:block;background:var(--ink);}
.wrap>.project-video-feature:first-child{margin-top:18px;}
.project-gallery.stories .g-item{aspect-ratio:9/16;}

/* 4c. Featured image — one wide standalone piece, uncropped, own aspect ratio */
.project-image-feature{width:100%;aspect-ratio:3/2;border-radius:var(--radius);overflow:hidden;background:var(--warmgrey);}
.project-image-feature img{width:100%;height:100%;object-fit:cover;display:block;}
.project-image-feature.illustration{aspect-ratio:3000/2339;}
.project-image-feature.social{aspect-ratio:3000/1964;}
.project-image-feature.ratio-16-9{aspect-ratio:16/9;}
.project-newsletter{max-width:340px;margin:0 auto;border-radius:var(--radius);overflow:hidden;}
.project-newsletter img{width:100%;display:block;}
.project-duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.project-duo .project-newsletter,
.project-duo .slideshow.ratio-4-5{max-width:280px;margin:0 auto;}
@media(max-width:780px){.project-duo{grid-template-columns:1fr;gap:32px;}}

/* natural-ratio stacked images — no cropping, height follows the source image */
.project-explain .images .natural-img{width:100%;border-radius:var(--radius);display:block;}
.project-explain .images .natural-img-small{width:72%;margin:0 auto;}

/* 4d. Slideshow — square social pieces, one at a time */
.slideshow{position:relative;width:100%;max-width:400px;margin:0 auto;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:var(--warmgrey);}
.slideshow.ratio-4-5{aspect-ratio:4/5;max-width:480px;}
.slideshow-track{position:relative;width:100%;height:100%;}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s var(--ease);}
.slide.active{opacity:1;}
.slideshow-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(250,250,250,.9);color:var(--ink);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:background .2s var(--ease);}
.slideshow-arrow:hover{background:var(--paper);}
.slideshow-arrow svg{width:16px;height:16px;}
.slideshow-arrow.prev{left:10px;}
.slideshow-arrow.next{right:10px;}
.slideshow-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px;}
.slideshow-dots .dot{width:7px;height:7px;border-radius:50%;background:rgba(250,250,250,.5);border:none;padding:0;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease);}
.slideshow-dots .dot.active{background:var(--paper);transform:scale(1.3);}

/* 4e. Country switch — one wide image at a time, toggled by button */
.country-switch-img{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--warmgrey);}
.country-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s var(--ease);}
.country-img.active{opacity:1;}
.country-switch-buttons{position:absolute;bottom:14px;left:14px;display:flex;gap:8px;z-index:2;}
.country-btn{padding:7px 18px;border-radius:30px;border:none;background:rgba(250,250,250,.85);color:var(--ink);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);}
.country-btn:hover{background:var(--paper);}
.country-btn.active{background:var(--ink);color:var(--paper);}

/* small caption under a piece — what it is + the design work in it */
.img-caption{margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.5;color:var(--ink-soft);}