/* =====================================================================
   IVAN JUSTICE — Black & Grey Realism
   Cinematic black-and-grey portfolio. Real tones, deep blacks, bone,
   restrained metal. Footage shown in its true 9:16, integrated as env.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --void:#050506;  --black:#0a0a0b;  --ink:#0f0f12;  --panel:#121217;
  --smoke:#1a1a20;  --smoke-2:#232329;
  --edge:rgba(234,227,214,.1); --edge-2:rgba(234,227,214,.2); --edge-3:rgba(234,227,214,.05);
  --ash:#3b3b42; --stone:#6b6b75; --fog:#9c9ca6;
  --bone:#ece6d9; --bone-2:#c3bdb1; --bone-3:#8d887e;
  --metal:#b7ae99;
  --gold:#c8a86a; --gold-lt:#ecd6a6; --gold-dp:#6f552b;
  --titling:'Cinzel','Cormorant Garamond',Georgia,serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Archivo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --wrap:1360px;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --sect:clamp(4rem,9vh,7.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--void); color:var(--bone);
  font-family:var(--sans); font-size:clamp(.98rem,.6vw + .85rem,1.06rem);
  line-height:1.7; font-weight:400; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
::selection{background:var(--gold); color:var(--void)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

.skip{position:fixed; left:1rem; top:-4rem; z-index:200; background:var(--bone); color:var(--void);
  padding:.7rem 1.1rem; font:600 .8rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; transition:top .3s}
.skip:focus{top:1rem}

/* ---------- Atmosphere ---------- */
/* living background: real ink/foam footage, darkened + feathered so it drifts like smoke behind content */
.smoke{position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; opacity:.3}
.smoke video{position:absolute; top:50%; left:50%; width:135%; height:135%; transform:translate(-50%,-50%);
  object-fit:cover; filter:grayscale(1) brightness(.5) contrast(1.12) blur(3px);
  mix-blend-mode:screen; will-change:transform;
  -webkit-mask:radial-gradient(120% 82% at 50% 46%, #000 30%, transparent 74%);
  mask:radial-gradient(120% 82% at 50% 46%, #000 30%, transparent 74%);
  animation:smokedrift 90s ease-in-out infinite alternate}
@keyframes smokedrift{from{transform:translate(-50%,-50%) scale(1) rotate(0deg)}to{transform:translate(-52%,-47%) scale(1.1) rotate(1.5deg)}}

.grain{position:fixed; inset:-120%; z-index:60; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-5%)}60%{transform:translate(-3%,3%)}80%{transform:translate(5%,2%)}100%{transform:translate(0,0)}}
.vignette{position:fixed; inset:0; z-index:58; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 42%, transparent 55%, rgba(0,0,0,.5) 100%)}
.scanline{position:fixed; inset:0; z-index:59; pointer-events:none; opacity:.3;
  background:linear-gradient(rgba(255,255,255,.012) 50%, transparent 50%); background-size:100% 3px}
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:120; pointer-events:none}
.progress span{display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold-dp),var(--gold),var(--gold-lt)); box-shadow:0 0 12px rgba(200,168,106,.5)}
.cursor{position:fixed; top:0; left:0; width:34px; height:34px; z-index:130; border:1px solid rgba(234,227,214,.5);
  border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; mix-blend-mode:difference;
  transition:width .25s var(--ease), height .25s var(--ease), background .25s, opacity .3s; opacity:0}
.cursor.is-on{opacity:1}
.cursor.is-hot{width:58px; height:58px; background:rgba(234,227,214,.14); border-color:transparent}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- Type utilities ---------- */
.eyebrow{font:600 .72rem/1.3 var(--sans); letter-spacing:.34em; text-transform:uppercase; color:var(--bone-3);
  display:flex; align-items:center; gap:.9em; margin:0 0 1.4rem}
.eyebrow span{font-family:var(--titling); font-size:.82rem; letter-spacing:.1em; color:var(--gold);
  border:1px solid var(--edge-2); width:2.1em; height:2.1em; display:grid; place-items:center; border-radius:50%}
.section-title{font-family:var(--titling); font-weight:600; line-height:1.02;
  font-size:clamp(2rem,5vw,4rem); letter-spacing:.01em; margin:0; color:var(--bone)}
.section-note{max-width:46ch; color:var(--bone-2); margin:1.2rem 0 0; font-size:1.02rem}
.statement{font-family:var(--serif); font-weight:500; line-height:1.02;
  font-size:clamp(2.4rem,7vw,5.2rem); letter-spacing:-.01em; margin:0; color:var(--bone)}
.statement em{font-style:italic; color:var(--metal)}
.lede{font-family:var(--serif); font-size:clamp(1.24rem,2vw,1.6rem); line-height:1.5; color:var(--bone-2);
  font-weight:400; max-width:40ch; margin:1.4rem 0 0}
.lede--dim{color:var(--bone-3); font-size:clamp(1.08rem,1.5vw,1.28rem)}

/* ---------- Buttons ---------- */
.btn{position:relative; display:inline-flex; align-items:center; gap:.7em; font:600 .82rem/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase; padding:1.1em 1.7em; border-radius:2px;
  transition:transform .4s var(--ease), background .4s, color .4s, border-color .4s}
.btn svg{width:1.15em; height:1.15em; transition:transform .4s var(--ease)}
.btn--primary{background:var(--bone); color:var(--void)}
.btn--primary:hover{background:var(--gold-lt)}
.btn--primary:hover svg{transform:translateY(3px)}
.btn--ghost{border:1px solid var(--edge-2); color:var(--bone)}
.btn--ghost:hover{background:rgba(234,227,214,.06); border-color:var(--bone-3)}
.btn--wide{padding:1.2em 2.4em}
.btn:active{transform:scale(.98)}

/* ============================ NAV ============================ */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem,2.2vw,1.6rem) var(--pad); transition:padding .4s var(--ease)}
.nav.is-solid{mix-blend-mode:normal; background:linear-gradient(var(--void),rgba(5,5,6,.72) 60%,transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding-top:clamp(.7rem,1.5vw,1rem); padding-bottom:clamp(.7rem,1.5vw,1rem)}
.nav__mark{display:flex; flex-direction:column; line-height:1}
.nav__mark-name{font-family:var(--titling); font-weight:700; font-size:1.42rem; letter-spacing:.14em; color:var(--bone); text-shadow:0 1px 16px rgba(5,5,6,.9), 0 0 4px rgba(5,5,6,.7)}
.nav__mark-sub{font:500 .68rem/1 var(--sans); letter-spacing:.4em; text-transform:uppercase; color:var(--fog); margin-top:.5rem; padding-left:.1em; text-shadow:0 1px 12px rgba(5,5,6,.9)}
.nav__links{display:flex; align-items:center; gap:clamp(1.4rem,2.6vw,2.6rem)}
.nav__links a{font:500 .78rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-2);
  position:relative; padding:.4rem 0; transition:color .3s; text-shadow:0 1px 12px rgba(5,5,6,.7)}
.nav__links a::after{content:''; position:absolute; left:0; bottom:-.1rem; height:1px; width:0; background:var(--gold); transition:width .35s var(--ease)}
.nav__links a:hover{color:var(--bone)} .nav__links a:hover::after{width:100%}
.nav__book{border:1px solid var(--edge-2); border-radius:2px; padding:.75rem 1.15rem !important; color:var(--bone) !important}
.nav__book::after{display:none}
.nav__book:hover{background:var(--bone); color:var(--void) !important}
.nav__toggle{display:none; width:46px; height:46px; flex-direction:column; gap:6px; align-items:center; justify-content:center; border:1px solid var(--edge-2); border-radius:2px}
.nav__toggle span{width:20px; height:1.5px; background:var(--bone); transition:transform .35s var(--ease), opacity .3s}

.menu{position:fixed; inset:0; z-index:99; background:var(--void); display:flex; flex-direction:column; justify-content:center;
  padding:var(--pad); opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s}
.menu.is-open{opacity:1; visibility:visible}
.menu__inner{display:flex; flex-direction:column; gap:.4rem}
.menu__inner a{font-family:var(--titling); font-weight:600; font-size:clamp(2.4rem,11vw,4.5rem); color:var(--bone);
  display:flex; align-items:baseline; gap:1rem; padding:.3rem 0; opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s}
.menu.is-open .menu__inner a{opacity:1; transform:none}
.menu.is-open .menu__inner a:nth-child(1){transition-delay:.08s}
.menu.is-open .menu__inner a:nth-child(2){transition-delay:.14s}
.menu.is-open .menu__inner a:nth-child(3){transition-delay:.2s}
.menu.is-open .menu__inner a:nth-child(4){transition-delay:.26s}
.menu__inner a:hover{color:var(--gold)}
.menu__idx{font:500 .8rem/1 var(--sans); letter-spacing:.2em; color:var(--gold)}
.menu__foot{margin-top:3rem; font:500 .72rem/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--bone-3)}

/* ============================ HERO (portrait only) ============================ */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate; background:var(--void)}
.hero__portrait{position:absolute; right:0; top:-6%; bottom:-6%; width:min(50%,620px); z-index:-2; will-change:transform}
/* real ink-bloom footage (inverted to grey ink on black), screen-blended so it bleeds across the
   black area AND over the portrait's left edge — no clean seam — then masked out before the face */
.hero__ink{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; mix-blend-mode:screen; opacity:.8;
  -webkit-mask:linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,.4) 60%, transparent 76%);
  mask:linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,.4) 60%, transparent 76%)}
.hero__ink video{width:100%; height:100%; object-fit:cover; object-position:40% 50%; filter:brightness(1.05) contrast(1.08)}
.hero__portrait img{width:100%; height:100%; object-fit:cover; object-position:64% 26%; filter:grayscale(.28) contrast(1.05) brightness(.96)}
.hero__portrait-fade{position:absolute; inset:0; background:
  linear-gradient(90deg, var(--void) 3%, rgba(5,5,6,.72) 26%, transparent 66%),
  linear-gradient(0deg, var(--void) 2%, transparent 22%, transparent 78%, rgba(5,5,6,.45))}
.hero__grid{position:relative; width:100%; max-width:var(--wrap); margin:0 auto; padding:7rem var(--pad) 6rem}
.hero__content{max-width:44rem}
.hero__eyebrow{font:600 .9rem/1.5 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--bone-2); margin:0 0 1.7rem;
  text-shadow:0 1px 16px rgba(5,5,6,.85), 0 0 3px rgba(5,5,6,.7)}
.hero__eyebrow i{color:var(--gold); font-style:normal; margin:0 .3em}
.hero__title{font-family:var(--titling); font-weight:800; line-height:.86; margin:.2rem 0 0;
  font-size:clamp(4rem,15.5vw,13rem); letter-spacing:.004em}
.hero__title .line{display:block; white-space:nowrap; color:var(--bone)}
/* No outline — each letter sits as a faint "empty" ghost. A teardrop ink drop (::after) falls from
   above and inks the letter in: the fill (::before) pours down top-to-bottom via clip-path.
   JS toggles .filled to run the letter-by-letter loop. */
.hero__title .ink-letter{position:relative; display:inline-block; color:rgba(236,230,217,.07)}
.hero__title .ink-letter::before{content:attr(data-char); position:absolute; left:0; top:0; color:var(--bone); will-change:clip-path;
  -webkit-clip-path:inset(0 0 100% 0); clip-path:inset(0 0 100% 0);
  transition:-webkit-clip-path .6s cubic-bezier(.4,.55,.3,1) .3s, clip-path .6s cubic-bezier(.4,.55,.3,1) .3s}
.hero__title .ink-letter.filled::before{-webkit-clip-path:inset(0 0 -26% 0); clip-path:inset(0 0 -26% 0)}
/* the drop: teardrop (tail up, bulb down); elongates as it falls, then splats as it lands */
.hero__title .ink-letter::after{content:''; position:absolute; left:50%; top:0; width:.17em; height:.19em;
  background:var(--bone); border-radius:50% 50% 50% 50% / 35% 35% 66% 66%; opacity:0; pointer-events:none;
  transform:translate(-50%,-240%) scaleX(.6) scaleY(1.1)}
.hero__title .ink-letter.filled::after{animation:inkdrop .66s cubic-bezier(.5,.05,.75,.5) forwards}
@keyframes inkdrop{
  0%{opacity:0; transform:translate(-50%,-240%) scaleX(.6) scaleY(1.1)}
  14%{opacity:.95}
  52%{opacity:.95; transform:translate(-50%,-55%) scaleX(.48) scaleY(2)}
  70%{opacity:.9; transform:translate(-50%,4%) scaleX(1.4) scaleY(.5)}
  100%{opacity:0; transform:translate(-50%,12%) scaleX(1.85) scaleY(.24)}}
.hero__sub{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.4rem,3vw,2.1rem);
  color:var(--metal); margin:1.4rem 0 0; letter-spacing:.01em; max-width:26ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem}
.hero__scroll{position:absolute; left:50%; bottom:1.7rem; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font:500 .62rem/1 var(--sans); letter-spacing:.34em; text-transform:uppercase; color:var(--bone-3)}
.hero__scroll i{width:1px; height:44px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden}
.hero__scroll i::after{content:''; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--bone); animation:scrolldot 2.2s var(--ease) infinite}
@keyframes scrolldot{0%{top:-50%}60%,100%{top:100%}}

/* ============================ INTRO (statement + artist) ============================ */
.intro{max-width:var(--wrap); margin:0 auto; padding:var(--sect) var(--pad);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.intro__text{max-width:34rem}
.intro__media{margin:0; position:relative; aspect-ratio:4/5; border-radius:3px; overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.intro__media video{width:100%; height:100%; object-fit:cover; object-position:50% 40%; filter:contrast(1.03)}
.intro__media::after{content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--edge); pointer-events:none}
.intro__media figcaption{position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.3rem .9rem;
  font:600 .6rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--bone-2);
  background:linear-gradient(transparent, rgba(5,5,6,.75))}

/* ============================ WORK (9:16 gallery) ============================ */
.work{max-width:var(--wrap); margin:0 auto; padding:var(--sect) var(--pad)}
.work__head{margin:0 0 clamp(2rem,4vw,3.4rem); max-width:60rem}
.work__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.7rem)}
.piece{margin:0}
.piece__media{position:relative; aspect-ratio:9/16; overflow:hidden; border-radius:3px; background:var(--black);
  box-shadow:0 30px 70px -46px rgba(0,0,0,.92); cursor:pointer; will-change:transform}
.piece__media video{width:100%; height:100%; object-fit:cover; filter:contrast(1.02); transition:transform 1s var(--ease)}
.piece__media::after{content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  box-shadow:inset 0 0 0 1px var(--edge); transition:box-shadow .5s var(--ease)}
.piece__index{position:absolute; top:.75rem; left:.95rem; z-index:3; font-family:var(--titling); font-weight:600;
  font-size:1.2rem; color:var(--bone); letter-spacing:.04em; text-shadow:0 2px 14px rgba(0,0,0,.85); mix-blend-mode:screen}
.piece__cue{position:absolute; right:.8rem; bottom:.8rem; z-index:3; font:600 .56rem/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone); background:rgba(5,5,6,.5);
  padding:.55em .75em; border-radius:2px; opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.piece__cap{padding:.9rem .15rem 0}
.piece__title{font-family:var(--titling); font-weight:600; font-size:clamp(1.2rem,1.6vw,1.55rem); margin:0; color:var(--bone); line-height:1.05}
.piece__meta{font:600 .64rem/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:.35rem 0 0}
@media(hover:hover){
  .piece__media:hover video{transform:scale(1.045)}
  .piece__media:hover .piece__cue{opacity:1; transform:none}
  .piece__media:hover::after{box-shadow:inset 0 0 0 1px var(--edge-2)}
}
.piece__media:focus-visible .piece__cue{opacity:1; transform:none}

/* ============================ APPROACH / PILLARS ============================ */
.approach{max-width:var(--wrap); margin:0 auto; padding:var(--sect) var(--pad); overflow:hidden}
.approach__head{max-width:46rem; margin:0 0 clamp(1.6rem,4vw,3rem)}
.pillars{display:grid; gap:clamp(1.4rem,2.6vw,2.4rem)}
.pillar{position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:clamp(1.4rem,3vw,3rem);
  align-items:center; padding:clamp(1.4rem,2.6vw,2.2rem) 0; border-top:1px solid var(--edge)}
.pillar__num{grid-row:1/3; font:600 .78rem/1 var(--sans); letter-spacing:.2em; color:var(--gold); align-self:start; padding-top:.7rem}
.pillar__word{grid-column:2; margin:0; max-width:100%; font-family:var(--titling); font-weight:700; line-height:.92;
  font-size:clamp(2.4rem,11vw,8rem); letter-spacing:0;
  color:transparent; -webkit-background-clip:text; background-clip:text;
  background-color:#2a2a30; background-size:cover,125% auto; background-position:center, 50% 32%;
  -webkit-text-stroke:.85px rgba(236,230,217,.32); text-shadow:0 0 2px rgba(236,230,217,.1);
  transition:background-position 1.4s var(--ease); will-change:background-position}
.pillar__word[data-word="Readability"]{font-size:clamp(2rem,8.2vw,6rem)}
.pillar__word[data-word="Longevity"]{font-size:clamp(2.2rem,9.6vw,7rem)}
.pillar__copy{grid-column:2; font-family:var(--serif); font-size:clamp(1.12rem,1.6vw,1.45rem); color:var(--bone-2);
  max-width:46ch; margin:.4rem 0 0}
@media(hover:hover){.pillar:hover .pillar__word{background-position:center, 50% 68%}}
.pillar.in .pillar__word{animation:drift 16s var(--ease) infinite alternate}
@keyframes drift{from{background-position:center,48% 26%}to{background-position:center,54% 60%}}

/* ============================ FAQ ============================ */
.faq{max-width:var(--wrap); margin:0 auto; padding:var(--sect) var(--pad)}
.faq__head{max-width:46rem; margin:0 0 clamp(1.4rem,3.5vw,2.6rem)}
.faq__list{max-width:820px; border-top:1px solid var(--edge)}
.faq__item{border-bottom:1px solid var(--edge)}
.faq__item summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding:1.35rem 0; font-family:var(--serif); font-weight:500; font-size:clamp(1.2rem,2.2vw,1.55rem); color:var(--bone); transition:color .3s}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:'+'; flex:none; font-family:var(--sans); font-weight:300; font-size:1.7rem; line-height:1; color:var(--gold);
  transition:transform .35s var(--ease)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:hover{color:var(--gold-lt)}
.faq__item > p{color:var(--bone-2); font-size:clamp(1rem,1.4vw,1.1rem); line-height:1.75; max-width:62ch; margin:-.2rem 0 1.5rem; padding-right:2.5rem}

/* ============================ BOOKING ============================ */
.booking{position:relative; overflow:hidden; isolation:isolate; padding:var(--sect) 0;
  background:linear-gradient(var(--void),var(--black) 30%,var(--black) 70%,var(--void))}
.booking__head{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); max-width:min(56rem,90vw)}
.booking__body{max-width:var(--wrap); margin:clamp(2rem,4vw,3.2rem) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,5rem); align-items:start}
.terms{position:sticky; top:6rem}
.terms__title{font-family:var(--titling); font-weight:600; font-size:1.4rem; margin:0 0 1.2rem; color:var(--bone)}
.terms__list{list-style:none; margin:0; padding:0; display:grid; gap:0}
.terms__list li{display:grid; gap:.15rem; padding:1rem 0; border-top:1px solid var(--edge)}
.terms__list li:last-child{border-bottom:1px solid var(--edge)}
.terms__list span{font:600 .96rem/1.3 var(--sans); letter-spacing:.01em; color:var(--bone)}
.terms__list em{font-style:normal; font-size:.86rem; color:var(--bone-3)}

.apply{display:grid; gap:1.4rem}
.apply__row{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.field{display:grid; gap:.55rem}
.field label{font:600 .7rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--bone-2)}
.field label i{color:var(--bone-3); font-style:normal; text-transform:none; letter-spacing:.04em}
.field input, .field textarea{width:100%; background:rgba(18,18,23,.6); border:1px solid var(--edge);
  color:var(--bone); font:400 1rem/1.5 var(--sans); padding:.95rem 1.1rem; border-radius:2px;
  transition:border-color .3s, background .3s; resize:vertical}
.field input::placeholder, .field textarea::placeholder{color:#5c5c64}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--gold); background:rgba(18,18,23,.9)}
.field.invalid input, .field.invalid textarea{border-color:#8a4a3a}
.field__err{font:500 .74rem/1.2 var(--sans); color:#c88; min-height:0; opacity:0; transition:opacity .3s}
.field.invalid .field__err{opacity:1}
.apply__uploads{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.upload{display:grid; gap:.7rem}
.upload__head{display:grid; gap:.25rem}
.upload__head label{font:600 .7rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--bone-2)}
.upload__head label b{color:var(--gold); font-weight:600}
.upload__hint{font-size:.8rem; color:var(--bone-3)}
.upload__hint em{font-style:normal; color:var(--gold)}
.upload input[type=file]{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0)}
.upload__drop{display:flex; align-items:center; justify-content:center; gap:.6em; text-align:center;
  border:1px dashed var(--edge-2); border-radius:3px; padding:1.4rem 1rem; color:var(--bone-2); cursor:pointer;
  font:600 .74rem/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; transition:border-color .3s, background .3s, color .3s}
.upload__drop svg{width:1.4em; height:1.4em; color:var(--gold)}
.upload__drop:hover, .upload.drag .upload__drop{border-color:var(--gold); background:rgba(200,168,106,.05); color:var(--bone)}
.upload__grid{display:flex; flex-wrap:wrap; gap:.6rem}
.thumb{position:relative; width:64px; height:64px; border-radius:2px; overflow:hidden; border:1px solid var(--edge-2)}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb button{position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(5,5,6,.8);
  color:var(--bone); display:grid; place-items:center; font-size:12px; line-height:1}
.thumb button:hover{background:var(--gold); color:var(--void)}
.apply__foot{display:grid; gap:1rem; margin-top:.4rem}
.apply__fine{font-size:.82rem; color:var(--bone-3); max-width:52ch; margin:0}
.apply__err{font-size:.86rem; color:#e7b7a6; max-width:52ch; margin:.4rem 0 0}
.apply__err a{color:inherit; text-decoration:underline}
.apply__err[hidden]{display:none}
button.is-sending{opacity:.6; pointer-events:none}
.apply__done{border:1px solid var(--edge-2); border-radius:3px; padding:2rem; background:rgba(18,18,23,.7); display:grid; gap:.8rem}
.apply__done[hidden]{display:none}
.apply__done h3{font-family:var(--titling); font-weight:600; font-size:1.6rem; margin:0; color:var(--bone)}
.apply__done p{margin:0; color:var(--bone-2)}
.apply__done .btn{justify-self:start; margin-top:.6rem}

/* ============================ FOOTER ============================ */
.foot{max-width:var(--wrap); margin:0 auto; padding:clamp(3.5rem,7vw,5.5rem) var(--pad) 2.5rem}
.foot__top{display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding-bottom:2.4rem; border-bottom:1px solid var(--edge)}
.foot__brand{display:flex; flex-direction:column; gap:.5rem}
.foot__name{font-family:var(--titling); font-weight:700; font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:.08em; color:var(--bone)}
.foot__tag{font:500 .66rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--bone-3)}
.foot__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding:2.4rem 0}
.foot__k{font:600 .64rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.9rem}
.foot__col p{margin:0; color:var(--bone-2); line-height:1.9}
.foot__col a{transition:color .3s} .foot__col a:hover{color:var(--gold)}
.foot__base{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  margin-top:1.6rem; padding-top:1.5rem; border-top:1px solid var(--edge);
  font:500 .74rem/1 var(--sans); letter-spacing:.06em; color:var(--bone-3)}
.foot__base a:hover{color:var(--bone)}
.foot__base-links{display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center}
.foot__linkbtn{background:none; border:0; padding:0; font:inherit; letter-spacing:inherit; color:inherit; cursor:pointer; transition:color .3s}
.foot__linkbtn:hover{color:var(--bone)}

/* cookie consent banner */
.cookie{position:fixed; left:clamp(1rem,3vw,1.75rem); bottom:calc(clamp(1rem,3vw,1.75rem) + env(safe-area-inset-bottom,0px)); z-index:120;
  max-width:392px; background:rgba(12,12,16,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--edge-2); border-radius:6px; padding:1.3rem 1.4rem; box-shadow:0 30px 70px -30px rgba(0,0,0,.92);
  opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none}
.cookie.show{opacity:1; transform:none; pointer-events:auto}
.cookie[hidden]{display:none}
.cookie__text{font:400 .87rem/1.6 var(--sans); color:var(--bone-2); margin:0 0 1.05rem}
.cookie__text a{color:var(--gold)} .cookie__text a:hover{color:var(--bone)}
.cookie__btns{display:flex; gap:.7rem}
.cookie__btn{font:600 .72rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; padding:.9em 1.4em; border-radius:2px; cursor:pointer; transition:background .3s,color .3s,border-color .3s}
.cookie__btn--accept{background:var(--bone); color:var(--void); border:1px solid var(--bone)}
.cookie__btn--accept:hover{background:var(--gold-lt); border-color:var(--gold-lt)}
.cookie__btn--ghost{background:transparent; color:var(--bone-2); border:1px solid var(--edge-2)}
.cookie__btn--ghost:hover{color:var(--bone); border-color:var(--bone-3)}
@media(max-width:560px){ .cookie{left:.75rem; right:.75rem; max-width:none} .cookie__btns{gap:.6rem} .cookie__btn{flex:1} }
.foot__ig{display:inline-flex; align-items:center; gap:.4em}

/* legal / privacy page */
.legal{max-width:760px; margin:0 auto; padding:clamp(5rem,11vh,8rem) var(--pad) 4rem}
.legal__top{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:clamp(2.5rem,6vw,4rem); padding-bottom:1.4rem; border-bottom:1px solid var(--edge)}
.legal__mark{font-family:var(--titling); font-weight:700; letter-spacing:.12em; font-size:1.1rem; color:var(--bone)}
.legal__back{font:600 .72rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--bone-2); transition:color .3s}
.legal__back:hover{color:var(--gold)}
.legal h1{font-family:var(--titling); font-weight:700; font-size:clamp(2.1rem,5.5vw,3.2rem); line-height:1.05; color:var(--bone); margin:0 0 .6rem}
.legal .eff{font:600 .7rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3); margin:0 0 2.6rem}
.legal h2{font-family:var(--titling); font-weight:600; font-size:clamp(1.2rem,2.4vw,1.5rem); color:var(--bone); margin:2.6rem 0 .8rem}
.legal p, .legal li{color:var(--bone-2); line-height:1.8; margin:0 0 1rem; font-size:1.02rem}
.legal ul{padding-left:1.2rem; margin:0 0 1rem}
.legal li{margin-bottom:.5rem}
.legal a{color:var(--gold)} .legal a:hover{color:var(--bone)}
.legal strong{color:var(--bone); font-weight:600}
.legal .note{font-size:.9rem; color:var(--bone-3); border-top:1px solid var(--edge); margin-top:3rem; padding-top:1.5rem}
.foot__ig svg{width:.8em; height:.8em; flex:none; opacity:.8}

/* floating back-to-top — kept clear of the phone's bottom browser bar */
.totop{position:fixed; right:clamp(.9rem,3.5vw,1.6rem); bottom:calc(1.6rem + env(safe-area-inset-bottom,0px)); z-index:95;
  width:50px; height:50px; border-radius:50%; border:1px solid rgba(234,227,214,.32); color:var(--bone);
  background:rgba(10,10,12,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; place-items:center; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s, color .3s, border-color .3s}
.totop.show{opacity:1; visibility:visible; transform:none}
.totop:hover,.totop:active{background:var(--bone); color:var(--void); border-color:var(--bone)}
.totop svg{width:21px; height:21px}
@media(max-width:900px){ .totop{bottom:calc(5rem + env(safe-area-inset-bottom,0px))} }

/* ============================ LIGHTBOX ============================ */
.lightbox{position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
  background:rgba(3,3,4,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; padding:clamp(1rem,4vw,3rem)}
.lightbox.is-open{opacity:1; visibility:visible}
.lightbox__stage{margin:0; position:relative; z-index:1; max-width:min(94vw,460px); transform:scale(.94); transition:transform .6s var(--ease)}
.lightbox.is-open .lightbox__stage{transform:none}
.lightbox__video{width:100%; max-height:84vh; border-radius:3px; background:#000; box-shadow:0 50px 120px -40px rgba(0,0,0,1)}
.lightbox__cap{margin-top:1.1rem; display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; justify-content:center}
.lightbox__cap span{font-family:var(--titling); font-weight:600; font-size:1.4rem; color:var(--bone)}
.lightbox__cap em{font:600 .66rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-style:normal}
/* close sits on the video's top-right corner so it's always in view (never under the phone's address bar) */
.lightbox__close{position:absolute; z-index:5; top:10px; right:10px; width:46px; height:46px;
  border:1px solid rgba(234,227,214,.35); border-radius:50%; display:grid; place-items:center; color:var(--bone);
  background:rgba(5,5,6,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .3s,transform .3s}
.lightbox__close:hover{background:var(--bone); color:var(--void); transform:rotate(90deg)}
.lightbox__close svg{width:22px; height:22px}
.lightbox__nav{position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:56px; height:56px; border:1px solid var(--edge);
  border-radius:50%; display:grid; place-items:center; color:var(--bone); background:rgba(5,5,6,.4); transition:background .3s,border-color .3s}
.lightbox__nav:hover{background:var(--bone); color:var(--void)}
.lightbox__nav svg{width:24px; height:24px}
.lightbox__nav--prev{left:clamp(.5rem,3vw,2.5rem)} .lightbox__nav--next{right:clamp(.5rem,3vw,2.5rem)}

/* ============================ REVEAL STATES ============================ */
[data-reveal]{opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
[data-reveal].in{opacity:1; transform:none}
/* wordmark ink-fill loop is driven by JS (per-letter) */
.piece{opacity:0; transform:translateY(48px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.piece.in{opacity:1; transform:none}
.pillar{opacity:0; transform:translateY(36px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.pillar.in{opacity:1; transform:none}

/* ============================ RESPONSIVE ============================ */
@media(max-width:1080px){ .hero__portrait{width:62%} }
@media(max-width:980px){ .work__grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:900px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .nav.is-open .nav__toggle span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
  .nav.is-open .nav__toggle span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
  .hero__portrait{width:100%; opacity:.42}
  .hero__portrait img{object-position:62% 18%}
  .hero__portrait-fade{background:linear-gradient(0deg,var(--void) 8%, rgba(5,5,6,.55) 40%, transparent 74%)}
  .intro{grid-template-columns:1fr; gap:2.2rem}
  .intro__media{max-width:420px; order:2}
  .booking__body{grid-template-columns:1fr; gap:2.4rem}
  .terms{position:static}
}
@media(max-width:600px){
  .work__grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
  .apply__row, .apply__uploads{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr; gap:2rem}
  .foot__top{flex-direction:column; align-items:flex-start}
  .pillar{grid-template-columns:1fr; column-gap:0}
  .pillar__num{grid-row:auto; grid-column:1; padding-top:0; margin-bottom:.35rem}
  .pillar__word, .pillar__copy{grid-column:1}
  .pillar__word{font-size:clamp(2.2rem,13vw,4.2rem)}
  .pillar__word[data-word="Readability"]{font-size:clamp(1.7rem,10.2vw,4rem)}
  .pillar__word[data-word="Longevity"]{font-size:clamp(2rem,12vw,4rem)}
  .hero__title{font-size:clamp(3.2rem,17vw,6rem)}
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .grain,.scanline,.hero__scroll i::after{animation:none}
  .smoke,.hero__ink{display:none}
  [data-reveal],.piece,.pillar{opacity:1 !important; transform:none !important}
  .hero__title .ink-letter{color:var(--bone)}
  .hero__title .ink-letter::before{-webkit-clip-path:inset(0 0 -26% 0) !important; clip-path:inset(0 0 -26% 0) !important}
  .hero__title .ink-letter::after{display:none}
  .pillar.in .pillar__word{animation:none}
  .cursor{display:none}
  .hero__portrait,.piece__media,.intro__media{transform:none !important}
}