/* ====================================================================
   CHRISTIAN MAGRI — Digital Communications & Audiovisual Services
   Design language v2: white/grey poster canvas, one bold gesture —
   a grainy, multi-hue gradient orb ("the colour of sound", a stand-in
   for a frequency spectrum) — bold black grotesk type with sparing
   italic-serif accents. Built static, no build step.
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900&family=Fraunces:ital,opsz,wght@1,9..144,400..500&display=swap');

:root{
  /* ---- canvas ---- */
  --bg:        #FAFAF8;
  --bg-alt:    #F0EFEB;
  --bg-dark:   #15130F;
  --ink:       #15130F;
  --ink-soft:  #5B5751;
  --ink-faint: #9B968D;
  --line:      rgba(21,19,15,.12);

  /* ---- the spectrum: amber > coral > mauve > lavender > mint (pastel) ---- */
  --c-amber:   #F8E3BC;
  --c-orange:  #F3BD93;
  --c-crimson: #E8978C;
  --c-core:    #B98C9C;
  --c-indigo:  #A6A2D6;
  --c-teal:    #97D9CB;

  --grad-spectrum: linear-gradient(155deg,
    var(--c-amber) 0%,
    var(--c-orange) 20%,
    var(--c-crimson) 38%,
    var(--c-core) 52%,
    var(--c-indigo) 68%,
    var(--c-teal) 88%
  );
  /* flatter version for text-fill / thin accents */
  --grad-line: linear-gradient(90deg, var(--c-orange), var(--c-crimson), var(--c-indigo), var(--c-teal));

  /* ---- type ---- */
  --font-display: 'Archivo', -apple-system, sans-serif;
  --font-accent: 'Fraunces', Georgia, serif;

  /* ---- layout ---- */
  --max-w: 1320px;
  --pad: clamp(1.5rem, 5vw, 4.5rem);

  --ease: cubic-bezier(.2,.7,.25,1);

  /* ---- liquid glass (iOS-style: brighter rim highlight + bottom glow) ---- */
  --glass-blur: blur(22px) saturate(1.9) contrast(1.04);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
:focus-visible{ outline: 2.5px solid var(--c-crimson); outline-offset: 3px; border-radius: 4px; }

/* page-wide grain: barely there, just enough to keep white from feeling sterile */
.grain-overlay{
  position: fixed; inset:0; width:100%; height:100%;
  z-index: 999; pointer-events:none;
  opacity: .035; mix-blend-mode: multiply;
}

.wrap{ max-width: var(--max-w); margin:0 auto; padding-left: var(--pad); padding-right: var(--pad); }
section{ position:relative; z-index:0; isolation:isolate; }

/* ---------------------------------------------------------------
   THE ORB — signature device. A blurred spectrum field + a sharper
   grain pass on top so the colour itself looks grainy, the way a
   sprayed poster or a film scan would.
   --------------------------------------------------------------- */
.orb-field{ position:absolute; z-index:-1; overflow:visible; pointer-events:none; }
.orb-color{
  position:absolute; inset:-60%;
  background: var(--grad-spectrum);
  filter: blur(40px);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 22%, rgba(0,0,0,.5) 34%, rgba(0,0,0,0) 46%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 22%, rgba(0,0,0,.5) 34%, rgba(0,0,0,0) 46%);
}
.orb-grain{
  position:absolute; inset:-60%;
  mix-blend-mode: overlay; opacity:.55;
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 42%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 42%);
}
.orb-grain svg{ width:100%; height:100%; display:block; }

/* ---------------------------------------------------------------
   Eyebrow labels
   --------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:700; font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color: var(--ink-soft);
  margin:0 0 1rem;
}
.eyebrow::before{ content:''; width:22px; height:2px; background: var(--ink); display:inline-block; }

.eyebrow-horizontal{
  font-weight:700; font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color: var(--ink-faint);
  margin: 0 0 1.6rem;
  display:block;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin:0;
  text-transform: uppercase;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}
em{
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.section-head{ max-width: 640px; margin: 0 0 3rem; }
.section-head p{ color: var(--ink-soft); font-size: 1rem; max-width: 46ch; margin-top: .9rem; }

/* ---------------------------------------------------------------
   Nav
   --------------------------------------------------------------- */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index:500;
  padding: 1.3rem var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), box-shadow .4s var(--ease), padding .3s var(--ease);
}
.site-nav.is-scrolled{
  padding-top:.85rem; padding-bottom:.85rem;
}
.nav-logo{ font-size:1.05rem; font-weight:900; letter-spacing:-.01em; text-transform:uppercase; }
.nav-links{ display:flex; gap:2rem; align-items:center; }

/* language switch — iOS-style pill with a sliding knob */
.nav-right{ display:flex; align-items:center; gap:1rem; }
.lang-switch{
  position:relative; display:inline-flex; align-items:stretch;
  padding:3px; border-radius:999px; flex-shrink:0;
  background: rgba(255,255,255,.5);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:1.5px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 16px -10px rgba(21,19,15,.4);
}
.lang-knob{
  position:absolute; top:3px; bottom:3px; left:3px;
  width: calc(50% - 3px);
  border-radius:999px;
  background:#fff;
  box-shadow: 0 2px 7px -3px rgba(21,19,15,.5);
  transition: transform .4s var(--ease);
}
.lang-switch.is-en .lang-knob{ transform: translateX(100%); }
.lang-opt{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; padding:.34rem .55rem .4rem;
  font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color: var(--ink-faint);
  transition: color .35s var(--ease);
}
.lang-opt:hover{ color: var(--ink-soft); }
.lang-opt.is-active{ color: var(--ink); }
/* the underline marks the language you're currently reading */
.lang-opt.is-active::after{
  content:''; position:absolute; left:.55rem; right:.55rem; bottom:.16rem;
  height:2px; border-radius:2px; background: var(--grad-line);
}
.nav-links a{ font-size:.86rem; font-weight:600; position:relative; padding-bottom:4px; text-transform:uppercase; letter-spacing:.03em; }
.nav-links a:not(.nav-cta-mobile):not(.lang-opt)::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--grad-line); transition: width .35s var(--ease); }
.nav-links a:not(.nav-cta-mobile):not(.lang-opt):hover::after, .nav-links a:not(.nav-cta-mobile):not(.lang-opt):focus-visible::after{ width:100%; }
.nav-cta{
  border:1.5px solid rgba(255,255,255,.7); padding:.55rem 1.3rem; border-radius:999px;
  font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  transition: all .3s var(--ease);
  background: rgba(255,255,255,.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  color: var(--ink);
}
.nav-links .nav-cta-mobile{ display:none; }

/* "Get in touch" (nav + hero) — same playful liquid colour-shift as the Contact Me button */
.nav-cta,
.btn-ghost{
  position:relative; overflow:hidden; z-index:1;
}
.nav-cta::after,
.btn-ghost::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, var(--c-orange), var(--c-crimson), var(--c-indigo), var(--c-teal), var(--c-orange));
  background-size:300% 300%;
  opacity:0;
  transition: opacity .4s var(--ease);
}
.nav-cta:hover,
.btn-ghost:hover{
  transform: translateY(-3px) scale(1.06);
  border-color: transparent;
  color:#fff;
}
.nav-cta:hover::after,
.btn-ghost:hover::after{
  opacity:1;
  animation: liquidShift 3s ease infinite;
}

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; z-index:600; }
.nav-toggle span{ height:2px; width:100%; background:var(--ink); border-radius:2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero{ min-height:100vh; display:flex; align-items:center; padding-top:6rem; padding-bottom:4rem; overflow:hidden; position:relative; isolation:isolate; z-index:0; }
.hero .orb-field{ width: min(62vw, 880px); height: min(62vw, 880px); top:50%; right: clamp(-14rem,-8vw,-2rem); transform: translateY(-50%); }
.hero .wrap{ position:relative; width:100%; }
.hero-copy{ max-width: 920px; }
.hero-name{
  font-size: clamp(3.4rem, 9vw, 7.6rem);
  margin-bottom: 1.4rem;
}
.hero-name .line{ display:block; }
.hero-role{
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.hero-tagline{
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  text-transform:none;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--ink);
  max-width: 34ch;
  margin-bottom: 2.2rem;
  letter-spacing:0;
}
.accent-fill{
  background: var(--grad-spectrum);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  animation: accentShift 6s ease-in-out infinite;
}
@keyframes accentShift{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 1.7rem; border-radius:999px;
  font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-primary{ background:var(--ink); color:var(--bg); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(21,19,15,.4); }
.btn-ghost{
  border:1.5px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  color: var(--ink);
}

.scroll-cue{
  position:absolute; bottom:0; left: var(--pad);
  display:flex; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint);
}
.scroll-cue svg{ animation: bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }

/* ---------------------------------------------------------------
   Statement
   --------------------------------------------------------------- */
.statement{ background: #0A0908; position:relative; isolation:isolate; z-index:0; }
.scene.statement-scene{ display:block; padding:0; }   /* .wrap's own auto-margin centring needs plain block layout, not flex stretch */
.statement-scene .wrap{ position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); }
.statement .wrap{ position:relative; z-index:1; }
.statement-quote{
  margin:0; font-size: clamp(1.8rem, 4.6vw, 3.4rem);
  line-height:1.12; max-width:20ch; font-weight:800; letter-spacing:-.02em; text-transform:uppercase;
  color:#fff;
  /* grows in from the dark exactly like the service pages' scenes */
  opacity: calc(var(--p, 1) * (1 - var(--q, 0)));
  transform: scale(calc(0.92 + var(--p, 1) * 0.08)) translateY(calc((1 - var(--p, 1)) * 22px));
  filter: blur(calc((1 - var(--p, 1)) * 9px));
  will-change: opacity, transform, filter;
}
/* the accented word: colours sweep across the glyphs, with a faint glow of its own */
.statement em{
  display:inline-block;
  background: linear-gradient(100deg,
    #BEE3F3 0%, #93D2EF 16%, #63B0DC 30%, #A6A2D6 46%,
    #E8978C 64%, #F3BD93 80%, #93D2EF 100%);
  background-size: 300% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation: conveyShift 9s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.34)) drop-shadow(0 0 20px rgba(255,255,255,.14));
}
@keyframes conveyShift{
  0%,100%{ background-position: 0% 50%; }
  50%    { background-position: 100% 50%; }
}
/* small glowing orb that trails the cursor with heavy smoothing (JS drives --x/--y) */
.statement-orb{
  position:absolute; left:0; top:0; z-index:0;
  width:132px; height:132px; border-radius:50%;
  transform: translate3d(calc(var(--x,50%) - 66px), calc(var(--y,50%) - 66px), 0);
  background: radial-gradient(circle at 34% 32%,
    rgba(190,227,243,.95) 0%, rgba(147,210,239,.85) 26%, rgba(166,162,214,.7) 48%,
    rgba(232,151,140,.55) 68%, rgba(243,189,147,.28) 84%, rgba(243,189,147,0) 100%);
  filter: blur(14px) saturate(1.25);
  opacity: calc(.92 * var(--p, 1));
  pointer-events:none;
  will-change: transform, opacity;
}
.statement-orb::after{
  content:''; position:absolute; inset:22%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 70%);
}
@media (prefers-reduced-motion: reduce){
  .statement em{ animation:none; }
}

/* ---------------------------------------------------------------
   Services
   --------------------------------------------------------------- */
.services{ padding: 7rem 0; overflow:hidden; position:relative; }
.services .orb-field{ width:64%; height:90%; left:-8%; top:5%; opacity:.45; }

.whatido-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.what-i-do-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  /* square box + near-circular blob path = a round drop; 442px = the old 340px +30% */
  aspect-ratio: 1 / 1;
  width: min(100%, 442px);
  margin-inline: auto;
  padding: clamp(2.4rem,5vw,3.6rem) clamp(1.6rem,4vw,2.4rem);
  color: var(--ink);
  background: rgba(255,255,255,.5);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 30px -16px rgba(21,19,15,.28);
  transition: color .45s var(--ease), background .45s var(--ease), transform .35s var(--ease), box-shadow .45s var(--ease);
  overflow:hidden;
}
.what-i-do-btn:hover{ transform: translateY(-4px); color:#fff; box-shadow: 0 18px 38px -16px rgba(21,19,15,.35); }
.what-i-do-btn.accent-a:hover{ background: rgba(232,151,140,.6); }
.what-i-do-btn.accent-b:hover{ background: rgba(166,162,214,.6); }

.wid-outline{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; color:var(--ink); opacity:.9; transition: opacity .4s var(--ease); }
.wid-outline path{ stroke-width:0.009; }
.what-i-do-btn:hover .wid-outline{ opacity:0; }

/* image: fills the whole organic shape, with a tinted gradient patina on top */
.wid-image{
  position:absolute; inset:0; z-index:1;
  overflow:hidden;
  opacity:0;
  transition: opacity .55s var(--ease);
  pointer-events:none;
}
.what-i-do-btn:hover .wid-image{ opacity:1; }
.wid-image-placeholder, .wid-image img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.06);
  will-change: transform;
}
/* the patina: same hue family as the shape's own hover background, as a gradient */
.wid-image::after{
  content:''; position:absolute; inset:0; pointer-events:none;
}
.accent-a .wid-image::after{
  background: linear-gradient(150deg,
    rgba(248,227,188,.80) 0%,
    rgba(243,189,147,.74) 42%,
    rgba(232,151,140,.86) 100%);
}
.accent-b .wid-image::after{
  background: linear-gradient(150deg,
    rgba(190,227,243,.80) 0%,
    rgba(147,210,239,.74) 42%,
    rgba(166,162,214,.86) 100%);
}
.wid-image-placeholder{
  background: var(--grad-spectrum);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1rem;
  font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color: rgba(21,19,15,.4);
}

/* content: centred, layered IN FRONT of the image/blob, reacts to the cursor */
.wid-content{
  position:relative; z-index:2;
  max-width:80%;
  text-align:center;
  text-shadow: 0 2px 18px rgba(255,255,255,.35);
  transition: transform .25s var(--ease);
}
.what-i-do-btn:hover .wid-content{
  text-shadow: 0 1px 2px rgba(21,19,15,.6), 0 2px 10px rgba(21,19,15,.5), 0 4px 26px rgba(21,19,15,.35);
}
.wid-index{ font-family: var(--font-accent); font-style:italic; font-weight:500; font-size:1rem; opacity:.55; margin-bottom:1.1rem; display:block; }
.what-i-do-btn h3{ font-size: clamp(1.3rem,2.6vw,1.75rem); display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap; }
.what-i-do-btn p{ font-size:.92rem; margin:.7rem auto 0; max-width:26ch; opacity:.9; }
.wid-arrow-inline{
  display:inline-flex; width:28px; height:28px; flex-shrink:0;
  border-radius:50%; border:1.5px solid currentColor;
  align-items:center; justify-content:center;
  transition: transform .35s var(--ease);
}
.wid-arrow-inline svg{ width:11px; height:11px; }
.what-i-do-btn:hover .wid-arrow-inline{ transform: translateX(5px); }

/* ---------------------------------------------------------------
   Preview teaser (stand-in for the future "anteprime" gallery)
   --------------------------------------------------------------- */
.preview-teaser{ padding: 7rem 0; position:relative; overflow:hidden; }
/* slow-drifting collage of the work, sitting behind the black card */
.preview-collage{
  position:absolute; inset:-6% -2%; z-index:-1;
  display:flex; gap:.9rem;
  opacity:.30;
  pointer-events:none;
  mask-image: radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,1) 40%, rgba(0,0,0,.55) 68%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,1) 40%, rgba(0,0,0,.55) 68%, rgba(0,0,0,0) 100%);
}
.collage-col{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; gap:.9rem;
  animation: collageUp 78s linear infinite;
  will-change: transform;
}
.collage-col:nth-child(even){ animation-name: collageDown; animation-duration: 92s; }
.collage-col:nth-child(3n){ animation-duration: 66s; }
.collage-col img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:12px; display:block;
}
@keyframes collageUp{   from{ transform: translateY(0); }     to{ transform: translateY(-50%); } }
@keyframes collageDown{ from{ transform: translateY(-50%); }  to{ transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .collage-col{ animation:none; }
}
@media (max-width:760px){
  .preview-collage{ opacity:.22; gap:.5rem; }
  .preview-collage .collage-col:nth-child(n+5){ display:none; }
}
.preview-card{
  border: 2px solid #fff;
  border-radius: 22px;
  padding: clamp(2rem,5vw,3.6rem);
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
  position:relative; overflow:hidden;
  /* own stacking context: keeps the black fill (-3) and the azure hover (-2)
     contained, so the collage behind the section can never paint over the card */
  isolation: isolate;
  color:#fff;
}
/* black fill sits at -3, i.e. *below* the azure hover layer (-2) and the orb (-1),
   so the existing hover fade and the orb keep working exactly as before.
   Painting it on the element itself would hide both. */
.preview-card::before{
  content:'';
  position:absolute; inset:0; z-index:-3;
  border-radius:inherit;
  background:#0A0908;
  pointer-events:none;
}
.preview-card::after{
  content:'';
  position:absolute; inset:0; z-index:-2;
  border-radius:inherit;
  background: #BEE3F3;
  opacity:0;
  transition: opacity .8s var(--ease);
  pointer-events:none;
}
.preview-card:hover::after{ opacity:1; }
.preview-card .orb-field{ width:300px; height:300px; right:-6rem; top:-6rem; opacity:.85; transition: transform .7s var(--ease); }
.preview-card:hover .orb-field{ transform: scale(1.35) translate(-10%, 6%); }
.preview-card h3{ font-size: clamp(1.6rem,3.4vw,2.4rem); max-width:18ch; position:relative; z-index:1; color:#fff; transition: color .8s var(--ease); }
.preview-card p{ color: rgba(255,255,255,.72); margin:.7rem 0 0; max-width:42ch; position:relative; z-index:1; transition: color .8s var(--ease); }
.preview-card .eyebrow{ color: rgba(255,255,255,.72); position:relative; z-index:1; transition: color .8s var(--ease); }
.preview-card .eyebrow::before{ background:#fff; transition: background .8s var(--ease); }
/* on hover the azure fades in, so the copy flips to black to stay readable */
.preview-card:hover h3{ color: var(--ink); }
.preview-card:hover p,
.preview-card:hover .eyebrow{ color: var(--ink-soft); }
.preview-card:hover .eyebrow::before{ background: var(--ink); }
.preview-card .btn{ position:relative; z-index:1; flex-shrink:0; }
.btn-portfolio{
  position:relative;
  background: rgba(255,255,255,.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid rgba(255,255,255,.7);
  color: var(--ink);
  font-weight:800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 28px -10px rgba(166,162,214,.6);
}
.btn-portfolio::before{
  content:'';
  position:absolute; inset:-16px; z-index:-1;
  border-radius:inherit;
  background: var(--grad-spectrum);
  filter: blur(20px);
  opacity:.5;
  animation: glowPulse 4.5s ease-in-out infinite;
}
.btn-portfolio:hover{ background: rgba(255,255,255,.7); transform: translateY(-2px) scale(1.03); }
@keyframes glowPulse{ 0%,100%{ opacity:.4; transform:scale(1); } 50%{ opacity:.65; transform:scale(1.1); } }
@media (prefers-reduced-motion: reduce){ .btn-portfolio::before{ animation:none; } }

/* ---------------------------------------------------------------
   Collaborations — large interactive showcase carousel
   --------------------------------------------------------------- */
.featuring{ padding: 7rem 0; background: var(--bg-alt); overflow:hidden; }
.showcase{ position:relative; }

.showcase-track{
  display:flex; gap:1.6rem;
  overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x mandatory;
  margin:0 calc(var(--pad) * -1);
  padding:.5rem 0 1.5rem;
  cursor:grab;
}
.showcase-spacer-start{
  flex: 0 0 auto;
  width: calc(50% - clamp(224px,28vw,320px));   /* half of .showcase-slide's own width */
}
.showcase-spacer-end{
  flex: 0 0 auto;
  width: calc(50% - clamp(54px,5.5vw,70px));    /* half of the small "more" circle's width */
}
.showcase-track.is-dragging{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
.showcase-track::-webkit-scrollbar{ display:none; }

.showcase-slide{
  display:block; position:relative;
  flex:0 0 auto;
  width: clamp(448px, 56vw, 640px);
  aspect-ratio: 4/3;
  border-radius: 28px;
  border: 2px solid var(--ink);
  overflow:hidden;
  background: var(--bg-alt);
  scroll-snap-align:center;
  transform: scale(.94);
  opacity:.5;
  transition: transform .4s ease-out, opacity .6s var(--ease);
}
.showcase-slide.is-active{ transform:scale(1); opacity:1; }

/* the closing tile: a small glass circle, not a full-size card — it reads
   as "there's more this way" rather than competing with the project photos */
.showcase-slide-more{
  width: clamp(108px, 11vw, 140px);
  aspect-ratio: 1/1; border-radius:50%;
  align-self: center; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  color: var(--ink);
  text-align:center;
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; line-height:1.25;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.showcase-slide-more svg{ width:13px; height:13px; transition: transform .3s var(--ease); }
.showcase-slide-more:hover{ color:#fff; transform: scale(1.06); }
.showcase-slide-more:hover svg{ transform: translate(2px,-2px); }
@media (max-width:700px){
  .showcase-slide-more{ width:96px; font-size:.62rem; }
}

.showcase-media{ position:absolute; inset:0; }
.showcase-media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.08);
  transition: transform 1.4s var(--ease);
}
.showcase-slide.is-active .showcase-media img{ transform: scale(1); }

.showcase-slide.no-photo .showcase-media{ background: var(--grad-spectrum); }

.showcase-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(1.6rem,4vw,2.8rem);
  background: linear-gradient(to top, rgba(15,13,10,.82) 0%, rgba(15,13,10,.3) 48%, transparent 82%);
  color:#fff;
  opacity:0; transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.showcase-slide.is-active .showcase-overlay{ opacity:1; transform:none; }
.showcase-slide.no-photo .showcase-overlay{ background:none; color: var(--ink); }

.showcase-overlay h4{ font-size: clamp(1.2rem,2.2vw,1.55rem); text-transform:uppercase; letter-spacing:-.01em; }
.showcase-overlay p{ font-size:.92rem; margin:.6rem 0 0; max-width:42ch; opacity:.85; }
.showcase-slide.no-photo .showcase-overlay p{ color: var(--ink-soft); opacity:1; }

.showcase-link{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:1.1rem; color:inherit; }
.showcase-link svg{ width:12px; height:12px; transition: transform .25s var(--ease); }
.showcase-link:hover svg{ transform: translate(3px,-3px); }
.showcase-link.is-muted{ opacity:.6; cursor:default; }

.showcase-controls{ display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-top:1.8rem; }
.showcase-arrow{
  width:46px; height:46px; border-radius:50%;
  border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: all .3s var(--ease);
  flex-shrink:0;
}
.showcase-arrow:hover{ background:var(--ink); color:var(--bg); }
.showcase-arrow:disabled{ opacity:.35; cursor:default; }
.showcase-arrow:disabled:hover{ background:transparent; color:var(--ink); }
.showcase-dots{ display:flex; align-items:center; gap:.5rem; }
.showcase-dots button{ width:8px; height:8px; border-radius:50%; background: var(--ink-faint); opacity:.5; transition: all .35s var(--ease); }
.showcase-dots button.is-active{ width:22px; border-radius:5px; background:var(--ink); opacity:1; }
.showcase-counter{ font-size:.78rem; font-weight:700; letter-spacing:.04em; color: var(--ink-faint); min-width:3.4em; text-align:center; }

@media (max-width:760px){
  .showcase-slide{ width: 86vw; aspect-ratio:3/4; }
  .showcase-spacer{ width: calc(50% - 43vw); }
  .showcase-controls{ gap:1rem; }
}

/* ---------------------------------------------------------------
   About
   --------------------------------------------------------------- */
.about{
  padding:7rem 0; overflow:hidden; position:relative;
  background-image: linear-gradient(rgba(250,250,248,.86), rgba(250,250,248,.9)), url('../images/about-fieldrecording.jpg');
  background-size: cover; background-position: center;
  cursor: none;
}
.custom-cursor{
  position:fixed; left:0; top:0; z-index:9999;
  width:64px; height:64px; border-radius:50%;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(4px) saturate(2.4) contrast(1.15);
  -webkit-backdrop-filter: blur(4px) saturate(2.4) contrast(1.15);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.9),
    inset 0 -3px 8px rgba(21,19,15,.1),
    0 10px 26px -10px rgba(21,19,15,.4);
  pointer-events:none;
  transform: translate(-50%,-50%) scale(0);
  opacity:0;
  transition: opacity .3s var(--ease), transform .25s var(--ease);
}
.custom-cursor.is-active{ opacity:1; transform: translate(-50%,-50%) scale(1); }
.about .wrap{ display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.about-figure{ position:relative; aspect-ratio:4/5; border-radius: 18px; overflow:hidden; will-change: transform; }
.about-figure img{ width:100%; height:100%; object-fit:cover; }
.about .orb-field{ width:60%; height:60%; right:-15%; bottom:-15%; border-radius:50%; opacity:.7; }
.about p:not(.eyebrow){ color:var(--ink-soft); font-size:1.02rem; margin:1.1rem 0 0; text-transform:none; font-weight:400; }
.about h2{ font-size: clamp(2rem,4vw,2.7rem); }
.about-copy{ will-change: transform; }
/* higher specificity than .reveal's own transition, so the cursor-following tilt stays snappy
   while the initial scroll-reveal fade (opacity) keeps its original, slower pace */
.about-figure.reveal,
.about-copy.reveal{ transition: opacity .8s var(--ease), transform .25s var(--ease); }

/* ---------------------------------------------------------------
   Contact
   --------------------------------------------------------------- */
.contact{
  padding:8rem 0 6rem; text-align:center; position:relative;
  background: linear-gradient(to bottom, var(--bg) 0%, var(--c-orange) 9%, var(--c-orange) 100%);
  color: #fff;
  overflow:hidden;
}
/* hovering "Contact Me" swaps the two accent colours: background turns azure, the orb turns warm */
.contact::before{
  content:'';
  position:absolute; inset:0; z-index:-3;
  background: linear-gradient(to bottom, var(--bg) 0%, #BEE3F3 9%, #BEE3F3 100%);
  opacity:0;
  transition: opacity .7s var(--ease);
  pointer-events:none;
}
.contact:has(.contact-me:hover)::before{ opacity:1; }
.contact .orb-field{ width:560px; height:560px; left:50%; top:10%; transform:translate(-50%,-10%); opacity:.8; }
.contact .orb-color{
  background: linear-gradient(155deg, #EAF6FC 0%, #BEE3F3 26%, #93D2EF 50%, #63B0DC 74%, #3E84B8 100%);
}
.contact .orb-color-alt{
  position:absolute; inset:-60%;
  background: linear-gradient(155deg, #FFF3E2 0%, var(--c-amber) 22%, var(--c-orange) 50%, #E2954F 75%, #BD7333 100%);
  filter: blur(40px);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 22%, rgba(0,0,0,.5) 34%, rgba(0,0,0,0) 46%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 22%, rgba(0,0,0,.5) 34%, rgba(0,0,0,0) 46%);
  opacity:0;
  transition: opacity .7s var(--ease);
}
.contact:has(.contact-me:hover) .orb-color-alt{ opacity:1; }
.contact .section-head{ margin:0 auto 2.6rem; text-align:center; position:relative; z-index:1; }
.contact .eyebrow{ justify-content:center; color: rgba(255,255,255,.6); }
.contact .eyebrow::before{ background:#fff; }
.contact .section-head p{ margin-left:auto; margin-right:auto; text-align:center; color: rgba(255,255,255,.65); }
.contact h2{ font-size: clamp(2.4rem,6vw,4.2rem); color:#fff; }
.contact-channels{ display:flex; justify-content:center; gap:1.1rem; flex-wrap:wrap; margin:2.6rem 0; position:relative; z-index:1; }
.contact .channel-card{
  display:flex; align-items:center; gap:.9rem;
  padding:1.05rem 1.8rem; border-radius:999px;
  border:2px solid #fff; font-weight:700; font-size:.92rem;
  text-transform:uppercase; letter-spacing:.02em;
  color:#fff;
  transition: all .35s var(--ease);
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}
.contact .channel-card .ico{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--grad-line); color:#fff; flex-shrink:0; }
.contact .socials{ display:flex; justify-content:center; gap:1rem; margin-top:2.4rem; position:relative; z-index:1; }
.contact .socials a{
  width:46px; height:46px; border-radius:50%; border:2px solid #fff; color:#fff;
  display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease);
}
.contact .socials a:hover{ background:#fff; color:#0A0908; transform: translateY(-3px); }

/* "Contact Me" — playful colour-shift hover, the one spot the CTA gets to show off */
.contact-me{ position:relative; overflow:hidden; z-index:1; }
.contact-me .ico{ position:relative; z-index:1; }
.contact-me span:not(.ico), .contact-me{ position:relative; }
.contact-me::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, var(--c-orange), var(--c-crimson), var(--c-indigo), var(--c-teal), var(--c-orange));
  background-size: 300% 300%;
  opacity:0;
  transition: opacity .4s var(--ease);
}
.contact-me:hover{ transform: translateY(-3px) scale(1.06); border-color:transparent; color:#fff; }
.contact-me:hover::after{ opacity:1; animation: liquidShift 3s ease infinite; }
@keyframes liquidShift{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
footer{
  padding:2.4rem var(--pad);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  background: var(--bg); color: var(--ink-soft);
  font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; font-weight:600;
}
footer a:hover{ color:var(--ink); }

/* ---------------------------------------------------------------
   Subpages — service detail & collaborations detail
   --------------------------------------------------------------- */
.page-hero{
  padding: 9rem 0 6rem;
  position:relative;
  isolation:isolate;
  z-index:0;
  overflow:hidden;
}
.page-hero .orb-field{ width:min(50vw,640px); height:min(50vw,640px); top:50%; right:clamp(-10rem,-6vw,-1rem); transform:translateY(-50%); }
.page-hero .eyebrow{ justify-content:flex-start; }
.page-hero h1{ font-size: clamp(2.6rem,6.5vw,5rem); max-width:16ch; }
.page-hero .lede{
  font-family: var(--font-accent); font-style:italic; font-weight:500; text-transform:none;
  font-size: clamp(1.1rem,1.8vw,1.4rem); color:var(--ink); max-width:38ch; margin-top:1.4rem; letter-spacing:0;
}
.breadcrumb{
  display:flex; align-items:center; gap:.5rem;
  font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint);
  margin-bottom:2rem;
}
.breadcrumb a:hover{ color:var(--ink); }

.detail-section{ padding:3rem 0 6rem; }
.detail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.feature-block{
  border:1.5px solid var(--line); border-radius:20px; padding:2rem 1.8rem;
}
.feature-block .num{ font-family:var(--font-accent); font-style:italic; font-weight:500; opacity:.5; display:block; margin-bottom:1rem; }
.feature-block h3{ font-size:1.2rem; }
.feature-block p{ color:var(--ink-soft); font-size:.92rem; margin:.7rem 0 0; text-transform:none; font-weight:400; }

.placeholder-card{
  border:2px dashed var(--line); border-radius:24px;
  padding: clamp(2.4rem,5vw,3.6rem);
  text-align:center;
  margin-top:1rem;
}
.placeholder-card h3{ font-size:clamp(1.4rem,3vw,1.9rem); max-width:30ch; margin:0 auto; }
.placeholder-card p{ color:var(--ink-soft); font-size:.96rem; text-transform:none; font-weight:400; max-width:48ch; margin:1rem auto 0; }

.collab-detail-row{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
  padding: 3.4rem 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top: 6.5rem;
}
.collab-detail-row:first-child{ padding-top:0; }
.collab-detail-figure{ aspect-ratio:4/3; border-radius:20px; overflow:hidden; border:1.5px solid var(--ink); }
.collab-detail-figure img{ width:100%; height:100%; object-fit:cover; }
.collab-detail-figure.no-photo{ background:var(--grad-spectrum); }
.collab-detail-mark{ width:30px; height:30px; border-radius:50%; background:var(--grad-line); margin-bottom:1.1rem; }
.collab-detail-row h3{ font-size:clamp(1.4rem,3vw,1.9rem); }
.collab-detail-row p{ color:var(--ink-soft); font-size:.98rem; margin:.9rem 0 0; text-transform:none; font-weight:400; max-width:48ch; }
.collab-more{
  font-family: var(--font-accent); font-style:italic; font-weight:500;
  font-size: clamp(1.2rem,2.4vw,1.7rem);
  color: var(--ink-faint);
  text-align:center; text-transform:none; letter-spacing:0;
  margin: 3.4rem 0 0;
}
.collab-detail-row .placeholder-note{ font-style:italic; font-family:var(--font-accent); color:var(--ink-faint); opacity:.9; }
.collab-detail-row .collab-story{ color:var(--ink-soft); max-width:60ch; line-height:1.62; }
.collab-detail-row .collab-story + .collab-link{ margin-top:1.4rem; }
.collab-detail-row .collab-link{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:1.2rem; }
.collab-detail-row .collab-link svg{ width:12px; height:12px; }

@media (max-width:760px){
  .page-hero{ padding-top:7rem; }
  .detail-grid{ grid-template-columns:1fr; }
  .collab-detail-row{ grid-template-columns:1fr; padding:2.2rem 0; }
}

/* ---------------------------------------------------------------
   Liquid glass — real frosted-glass recipe: low-opacity fill +
   strong backdrop blur/saturation (this is what actually reads as
   "glass", not a painted highlight), a single thin top-edge catch-
   light, a barely-there bottom inset shadow for depth, and a soft
   floating drop-shadow. No gradient "shine" bands — those are what
   make glass look like 2000s plastic.
   --------------------------------------------------------------- */
.site-nav.is-scrolled,
.preview-card,
.channel-card,
.socials a,
.showcase-arrow,
.showcase-slide-more{
  background: rgba(255,255,255,.13);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(21,19,15,.06),
    0 8px 24px -14px rgba(21,19,15,.3);
  position: relative;
}
.channel-card:hover, .socials a:hover, .showcase-arrow:hover, .showcase-slide-more:hover{
  background: rgba(21,19,15,.88);
}

/* ---------------------------------------------------------------
   Reveal-on-scroll
   --------------------------------------------------------------- */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width:980px){
  .about .wrap{ grid-template-columns:1fr; }
  .about-figure{ max-width:420px; margin:0 auto; }
  .whatido-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .contact .orb-field{ width:340px; height:340px; }
  .contact-channels{ padding: 0 .5rem; }
  .channel-card{ font-size:.78rem; padding:1rem 1.3rem; }
  .nav-links{
    position:fixed; inset:0; top:0; background:var(--bg);
    flex-direction:column; justify-content:center;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    gap:2.2rem;
    display:none;
  }
  .nav-links.is-open{
    transform:translateX(0);
  }
  .nav-links a{ font-size:1.5rem; }
  .nav-cta{ display:none; }
  .nav-links .nav-cta-mobile{ display:inline-flex; }
  .nav-right{ gap:.6rem; }
  .lang-opt{ min-width:38px; padding:.3rem .4rem .36rem; font-size:.62rem; letter-spacing:.05em; }
  .nav-toggle{ display:flex; }
  .hero{ padding-top:6rem; }
  .scroll-cue{ display:none; }
  .preview-card{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ---------------------------------------------------------------
   Per-service page themes
   Each service page takes the colour of its own organic button on
   the homepage: orange for Visuals & Storytelling, azure for
   Digital Strategy. Copy stays black — only the graphics take the hue.
   --------------------------------------------------------------- */
.theme-orange{ --accent: var(--c-orange); }
.theme-azure { --accent: #63B0DC; }

/* hero orb: one hue only, no blue-to-red spectrum */
.theme-orange .page-hero .orb-color{
  background: linear-gradient(155deg, #FFF3E2 0%, var(--c-amber) 22%, var(--c-orange) 50%, #E2954F 75%, #BD7333 100%);
}
.theme-azure .page-hero .orb-color{
  background: linear-gradient(155deg, #EAF6FC 0%, #BEE3F3 26%, #93D2EF 50%, #63B0DC 74%, #3E84B8 100%);
}

/* graphics take the accent: eyebrow dash, solid cards, dashed card, numbering */
.theme-orange .eyebrow::before,
.theme-azure  .eyebrow::before{ background: var(--accent); }
.theme-orange .feature-block,
.theme-azure  .feature-block{ border-color: var(--accent); }
.theme-orange .feature-block .num,
.theme-azure  .feature-block .num{ color: var(--accent); opacity:1; }
.theme-orange .placeholder-card,
.theme-azure  .placeholder-card{ border-color: var(--accent); }
.theme-orange .collab-detail-mark,
.theme-azure  .collab-detail-mark{ background: var(--accent); }

/* contact block: the azure page starts from the opposite pairing,
   so both pages open on their own colour and swap it on hover */
.theme-azure .contact{
  background: linear-gradient(to bottom, var(--bg) 0%, #BEE3F3 9%, #BEE3F3 100%);
}
.theme-azure .contact::before{
  background: linear-gradient(to bottom, var(--bg) 0%, var(--c-orange) 9%, var(--c-orange) 100%);
}
.theme-azure .contact .orb-color{
  background: linear-gradient(155deg, #FFF3E2 0%, var(--c-amber) 22%, var(--c-orange) 50%, #E2954F 75%, #BD7333 100%);
}
.theme-azure .contact .orb-color-alt{
  background: linear-gradient(155deg, #EAF6FC 0%, #BEE3F3 26%, #93D2EF 50%, #63B0DC 74%, #3E84B8 100%);
}

/* ---------------------------------------------------------------
   Immersive scroll scenes (service pages)
   A full-bleed dark stage. Each image rises out of the black,
   growing and sharpening as it enters, with its text arriving at the
   same time. JS writes --p (entry 0>1) and --q (exit 0>1); with JS
   off everything sits at full visibility.
   --------------------------------------------------------------- */
.scenes-section{ padding: 0; }
.scene-intro-wrap{ padding-bottom: clamp(4rem,9vw,7rem); }
.scene-intro{
  max-width: 46ch;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  line-height: 1.55; color: var(--ink);
  text-transform: none; font-weight: 400; margin: 0;
}
.scene-intro em{ color: var(--accent, var(--c-crimson)); font-size:1.05em; }

.scene-stage{
  background: #060605;
  color: #fff;
  padding: clamp(4rem, 9vw, 8rem) 0 0;
  position: relative; z-index: 0; isolation: isolate;
}
.scenes{ display:flex; flex-direction:column; }

/* --- the pin mechanism: a tall track holding a full-viewport sticky stage.
   While the track scrolls past, the stage stays put and JS drives --p/--q
   per scene from the track's own scroll progress — the page itself doesn't
   look like it's moving, only the content inside does. --- */
.scene-pin{ position:relative; }
.scene-pin-track{ position:relative; }               /* height set by JS */
.scene-pin-sticky{
  position:sticky; top:0; height:100vh;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}

.scene{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: clamp(.9rem, 2.2vh, 1.9rem);
  /* top clears the fixed nav, bottom reserves room for the progress dots */
  padding: clamp(5rem,10vh,7rem) 1.4rem clamp(4.5rem,9vh,6rem);
}

.scene-pin-dots{
  position:absolute; left:50%; bottom: clamp(1.6rem,4vw,2.6rem); transform:translateX(-50%);
  display:flex; gap:.55rem; z-index:2;
}
.scene-dot{
  width:7px; height:7px; border-radius:50%;
  background: rgba(255,255,255,.28);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.scene-dot.is-active{ background: var(--accent, var(--c-crimson)); transform: scale(1.35); }

/* --- the image: emerges from the dark, growing --- */
.scene-media{
  margin:0;
  /* width capped as before, but the height is now the smaller of the natural
     16:9 box and the vertical room actually left after nav, copy and dots —
     this is what stops the picture bleeding off the top and bottom edges */
  --media-w: min(1080px, 88vw);
  width: var(--media-w);
  height: min(calc(var(--media-w) * 0.5625), calc(100vh - 24rem));
  opacity: calc(var(--p, 1) * (1 - var(--q, 0)));
  transform: scale(calc(0.86 + var(--p, 1) * 0.14 + var(--q, 0) * 0.05));
  filter: blur(calc((1 - var(--p, 1)) * 14px)) brightness(calc(0.35 + var(--p, 1) * 0.65));
  will-change: opacity, transform, filter;
}
.scene-media img,
.scene-ph{
  width:100%; height:100%; object-fit:cover; display:block;
  /* feathered edges so the picture melts into the black instead of ending on a line */
  mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 40%, rgba(0,0,0,.85) 62%, rgba(0,0,0,.35) 80%, transparent 96%);
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 40%, rgba(0,0,0,.85) 62%, rgba(0,0,0,.35) 80%, transparent 96%);
}

/* images that already carry their own real transparency (or their own
   parallax composition) skip the oval fade entirely, and use contain
   instead of cover so nothing gets cropped off the top or sides */
.scene-media.no-mask img{
  mask-image:none; -webkit-mask-image:none;
  object-fit:contain;
}

/* mouse-follow tilt on scene photos, same recipe as the About portrait —
   JS sets the transform on the image itself, independent of the figure's
   own entrance scale/opacity/blur, so the two never fight over one value */
.scene-media.tilt-follow img{
  transition: transform .2s var(--ease);
  will-change: transform;
}

/* ---------------------------------------------------------------
   Four-layer parallax composition (Digital Strategy, scene 02)
   Each layer is a centred, transparent PNG; JS nudges every layer by an
   increasing amount as the cursor moves, from barely-there (the laptop,
   furthest back) to the most responsive (the caption, closest to the eye).
   --------------------------------------------------------------- */
.parallax-stage{
  position:relative;
  /* the layers are square (1:1) exports, so the stage itself needs to be
     square too — inheriting the 16:9 photo-scene box left it shrunk down
     with empty gutters left and right */
  --media-w: min(calc(100vh - 24rem), 92vw);
  width: var(--media-w) !important;
  height: var(--media-w) !important;
}
.parallax-stage .parallax-layer{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  transition: transform .18s var(--ease);
  will-change: transform;
  pointer-events:none;
  mask-image:none !important; -webkit-mask-image:none !important;
}

/* --- the copy: arrives with the image, a touch later --- */
.scene-copy{
  width: min(680px, 86vw); text-align:center;
  opacity: calc(var(--p, 1) * (1 - var(--q, 0)));
  transform: translateY(calc((1 - var(--p, 1)) * 34px));
  will-change: opacity, transform;
}
.scene-index{
  display:block; font-family: var(--font-accent); font-style:italic;
  font-size:1rem; color: var(--accent, var(--c-crimson)); margin-bottom:.4rem;
}
.scene-copy h3{
  font-size: clamp(1.4rem, 2.6vw + .3vh, 2.1rem);
  margin:0 0 .7rem; color:#fff;
}
.scene-copy p{
  color: rgba(255,255,255,.74);
  font-size: clamp(.92rem, .5vw + .55vh, 1.03rem);
  line-height:1.55;
  margin:0 auto; max-width: 56ch;
}

/* on-brand placeholder — swap the whole .scene-ph for <img> when the photo lands */
.scene-ph{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; padding:2rem; text-align:center;
  background: var(--scene-ph-bg, linear-gradient(150deg, #F8E3BC 0%, #F3BD93 45%, #E8978C 100%));
}
.scene-ph-tag{
  font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color: rgba(21,19,15,.55);
}
.scene-ph-note{
  font-family: var(--font-accent); font-style:italic;
  font-size:.98rem; line-height:1.45; color: rgba(21,19,15,.75);
  max-width: 34ch;
}
.theme-azure .scene-ph{
  --scene-ph-bg: linear-gradient(150deg, #EAF6FC 0%, #BEE3F3 45%, #93D2EF 100%);
}

.scene-cta{ text-align:center; padding-top: clamp(1rem,3vw,2rem); }
.scene-cta .btn{
  background:#fff; color: var(--ink); border:none;
}
.scene-cta .btn:hover{ background: var(--accent, var(--c-crimson)); color:#fff; }

@media (max-width:760px){
  .scene{ min-height: 78vh; }
  .scene-media{ width: 92vw; }
  .scene-media img, .scene-ph{ aspect-ratio: 4/3; }
}
@media (prefers-reduced-motion: reduce){
  .scene-media, .scene-copy{ opacity:1 !important; transform:none !important; filter:none !important; }
  .scene-pin-track{ height:auto !important; }
  .scene-pin-sticky{ position:static !important; height:auto !important; display:flex; flex-direction:column; gap:4rem; padding:3rem 0; }
  .scene{ position:static !important; }
  .scene-pin-dots{ display:none; }
}

/* nav switches to light type while it sits over the dark scene stage */
.site-nav.on-dark{
  background: rgba(12,12,11,.55) !important;
  border-bottom-color: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.site-nav.on-dark .nav-logo,
.site-nav.on-dark .nav-links > li > a{ color:#fff; }
.site-nav.on-dark .nav-cta{
  color:#fff; border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.site-nav.on-dark .lang-switch{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.site-nav.on-dark .lang-opt{ color: rgba(255,255,255,.65); }
.site-nav.on-dark .lang-opt.is-active{ color: var(--ink); }  /* sits on the white knob */
.site-nav.on-dark .nav-toggle span{ background:#fff; }

/* ---------------------------------------------------------------
   Fourth pinned scene: the stage itself lightens to white, and the
   photo showcase card grows in exactly like the other scenes' media
   (blur clearing, scaling up) — it just happens to contain a card
   instead of a single photo. Once fully in, the pin releases and the
   page carries straight on into the Contact section below, which
   already opens on the same white background.
   --------------------------------------------------------------- */
.scene-portfolio{ z-index:1; }               /* stacks over the plain dark scenes as it takes over */
.scene-portfolio .stage-fade{
  position:absolute; inset:0; z-index:-2;
  background: var(--bg);
  opacity: var(--p, 1);
}
.portfolio-media{
  --media-w: min(1040px, 90vw);
  width: var(--media-w);
  height: min(calc(var(--media-w) * 0.476), calc(100vh - 13rem));
}
.portfolio-card{
  position:relative; overflow:hidden; isolation:isolate;
  height:100%;
  border-radius:22px; border: 2px solid #fff;
  aspect-ratio: 21/10;
  box-shadow: 0 30px 60px -30px rgba(21,19,15,.35);
}
.portfolio-card::before{ content:''; position:absolute; inset:0; z-index:-3; background:#0A0908; }
/* accent tint fading in on hover, in the page's own colour */
.portfolio-card::after{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(150deg, rgba(0,0,0,0) 40%, var(--accent, var(--c-crimson)) 130%);
  opacity:0; transition: opacity .5s var(--ease);
  mix-blend-mode: multiply;
}
.portfolio-card:hover::after{ opacity:.55; }

/* --- moving photo columns, same recipe as the homepage collage --- */
.shot-grid{
  position:absolute; inset:0; z-index:0;
  display:flex; gap:3px;
}
.shot-col{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; gap:3px;
  animation: collageUp 46s linear infinite;
  will-change: transform;
}
.shot-col:nth-child(even){ animation-name: collageDown; animation-duration: 54s; }
.shot-col:nth-child(3n){ animation-duration: 40s; }
.shot-grid img, .shot-ph{ width:100%; aspect-ratio: 1/1; object-fit:cover; display:block; flex-shrink:0; }
.shot-ph{
  display:flex; align-items:center; justify-content:center;
  font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color: rgba(255,255,255,.55);
  background: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,0) 60%), var(--c-crimson);
}
.shot-col:nth-child(2) .shot-ph{ background-color: var(--c-orange); }
.shot-col:nth-child(3) .shot-ph{ background-color: var(--c-amber); }
.shot-col:nth-child(4) .shot-ph{ background-color: #BD7333; }
.shot-col:nth-child(5) .shot-ph{ background-color: #E2954F; }
.theme-azure .shot-ph{ background-color: #3E84B8; }
.theme-azure .shot-col:nth-child(2) .shot-ph{ background-color: #63B0DC; }
.theme-azure .shot-col:nth-child(3) .shot-ph{ background-color: #93D2EF; }
.theme-azure .shot-col:nth-child(4) .shot-ph{ background-color: #2E6690; }
.theme-azure .shot-col:nth-child(5) .shot-ph{ background-color: #63B0DC; }

.portfolio-card-btn{
  position:absolute; top:50%; left:50%; z-index:2;
  transform: translate(-50%,-50%);
  display:inline-flex; align-items:center; justify-content:center;
  padding: 1.05rem 2.5rem; border-radius:999px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  color: var(--ink);
  font-weight:800; font-size:.92rem; text-transform:uppercase; letter-spacing:.03em;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.55);
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.portfolio-card:hover .portfolio-card-btn{
  transform: translate(-50%,-50%) scale(1.06);
  background: var(--accent, var(--c-crimson)); color:#fff; border-color: var(--accent, var(--c-crimson));
}

@media (max-width:700px){
  .portfolio-card{ aspect-ratio: 4/5; border-radius:18px; }
  .shot-grid{ gap:2px; }
  .portfolio-card-btn{ padding:.85rem 1.8rem; font-size:.8rem; }
}
@media (prefers-reduced-motion: reduce){
  .shot-col{ animation:none; }
}