/* Reddishpink Photography — immersive concept
   Layout idea: the camera is the interface. Home is a viewfinder (one frame at a time,
   bright-line corners, frame counter). Work is a wall of reels drifting sideways.
   A story is a sequence of frames. Single dark look by choice: the photographs carry the colour. */
:root{
  color-scheme:dark;
  --ink:#0d0a0c;          /* near-black, biased toward the brand magenta */
  --ink-2:#191317;
  --paper:#f6eff2;
  --mute:#a99aa1;
  --line:rgba(246,239,242,.26);
  --pink:#fc236f;         /* brand */
  --magenta:#d1007f;      /* brand */
  --display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(16px,2.6vw,40px);
  --head:68px;
  --bar:60px;
  --gap:6px;
  --ease:cubic-bezier(.7,0,.2,1);
  --out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font:400 11.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase}

/* ---------- header ---------- */
.head{position:fixed;z-index:60;left:0;right:0;top:0;height:var(--head);padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.head a,.head button{pointer-events:auto}
.head::before{content:"";position:absolute;inset:0 0 -40px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(13,10,12,.62),rgba(13,10,12,0))}
.head::before{transition:background .3s}
.head{transition:background-color .3s}
.head.is-solid{background-color:var(--ink)}
.head.is-solid::before{opacity:0}
html.menu-open .head{background-color:transparent}
html.menu-open .head::before{opacity:0}
.menu-btn{background:none;border:0;cursor:pointer;color:inherit}
.logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav .lk{font:400 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;padding:10px 0;position:relative}
.nav .lk::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--out)}
.nav .lk:hover::after,.nav .lk[aria-current]::after{transform:scaleX(1)}
.pill{display:inline-flex;align-items:center;gap:.6em;background:var(--pink);color:var(--ink);border:0;border-radius:99px;
  padding:11px 18px;font:500 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
  transition:background .25s,transform .25s var(--out)}
.pill:hover{background:var(--paper);transform:translateY(-1px)}
.pill.big{padding:17px 28px;font-size:13px}

/* ---------- shutter (page transition) ---------- */
.shutter{position:fixed;inset:0;z-index:100;pointer-events:none}
.shutter i{position:absolute;left:0;right:0;height:50.2%;background:var(--ink);transform:scaleY(0);transition:transform .42s var(--ease)}
.shutter i:first-child{top:0;transform-origin:top;border-bottom:1px solid var(--pink)}
.shutter i:last-child{bottom:0;transform-origin:bottom;border-top:1px solid var(--pink)}
html.is-closed .shutter i{transform:scaleY(1)}
html.is-closed .shutter{pointer-events:auto}

/* ---------- cursor label ---------- */
.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;display:none}
.cursor b{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(0);width:92px;height:92px;border-radius:50%;
  background:var(--pink);color:var(--ink);display:grid;place-items:center;text-align:center;
  font:500 10.5px/1.15 var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:transform .35s var(--out)}
.cursor.on b{transform:translate(-50%,-50%) scale(1)}
@media (hover:hover) and (pointer:fine){ html.has-cursor .cursor{display:block} }

/* ---------- HOME: viewfinder ---------- */
.vf{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--ink);touch-action:pan-y}
.vf-frames{list-style:none;margin:0;padding:0;position:absolute;inset:-14px;transform:translate3d(var(--px,0px),var(--py,0px),0);transition:transform .6s var(--out)}
.vf-frame{position:absolute;inset:0;z-index:0;clip-path:inset(0 0 100% 0)}
.vf[data-dir="-1"] .vf-frame{clip-path:inset(100% 0 0 0)}
.vf-frame.is-prev{z-index:1;clip-path:inset(0)!important}
.vf-frame.is-active{z-index:2;clip-path:inset(0)!important;transition:clip-path 1s var(--ease)}
.vf-frame a{position:absolute;inset:0;display:block}
.vf-frame .kb{position:absolute;inset:0;transform-origin:50% 40%}
.vf-frame.is-active .kb{animation:kb 12s linear forwards}
.vf-frame img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) 50%;transform:scale(1.14);transition:transform 1.5s var(--out),filter 1s}
.vf-frame.is-active img{transform:scale(1)}
.vf-frame.is-prev img{filter:brightness(.55)}
.vf-frame .t,.vf-frame .c{display:none}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.vf::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(13,10,12,.86) 0,rgba(13,10,12,.42) 26%,rgba(13,10,12,0) 52%)}
/* bright-line frame corners, as in a rangefinder */
.vf-lines{position:absolute;z-index:4;pointer-events:none;left:var(--pad);right:var(--pad);top:calc(var(--head) + 6px);bottom:104px}
.vf-lines i{position:absolute;width:30px;height:30px;border:1.5px solid rgba(246,239,242,.85);filter:drop-shadow(0 0 1px rgba(0,0,0,.5))}
.vf-lines i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.vf-lines i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.vf-lines i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.vf-lines i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.vf-count{position:absolute;right:42px;top:10px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.vf-more{position:absolute;left:42px;top:10px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.vf-count b{font-weight:400;color:var(--pink)}
.vf-hud{position:absolute;z-index:5;pointer-events:none;left:calc(var(--pad) + 22px);right:calc(var(--pad) + 22px);bottom:128px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px}
.vf-title{margin:0;font:400 clamp(3.7rem,10.4vw,10.5rem)/.86 var(--display);letter-spacing:-.022em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.vf-title em{font-style:italic}
.vf-title .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.1em .1em .24em .08em;margin:-.1em -.1em -.24em -.08em}
.vf-title .w>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--out)}
.vf-title.in .w>span{transform:none}
.vf-meta{margin:0 0 14px;display:flex;gap:1.4em;flex-wrap:wrap;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.vf-meta .go{color:var(--pink);text-shadow:none}
.vf-say{max-width:24ch;text-align:right;padding-bottom:.5em}
.vf-say h1{margin:0 0 .8em;font:400 11.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.vf-say p{margin:0;font:italic 300 clamp(1.15rem,1.7vw,1.6rem)/1.15 var(--display)}
.vf-strip{position:absolute;z-index:6;left:calc(var(--pad) + 22px);right:calc(var(--pad) + 22px);bottom:22px;height:64px;display:flex;gap:6px;align-items:flex-end;
  overflow-x:auto;scrollbar-width:none}
.vf-strip::-webkit-scrollbar{display:none}
.vf-strip button{flex:none;position:relative;width:78px;height:52px;padding:0;border:0;background:var(--ink-2);cursor:pointer;opacity:.5;transition:opacity .3s,height .4s var(--out)}
.vf-strip button img{width:100%;height:100%;object-fit:cover}
.vf-strip button:hover{opacity:.9}
.vf-strip button[aria-current="true"]{opacity:1;height:62px}
.vf-strip button::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:left}
.vf-strip button[aria-current="true"]::after{transform:scaleX(1)}
.vf.is-auto .vf-strip button[aria-current="true"]::after{animation:tick var(--dwell,6s) linear forwards}
@keyframes tick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vf-hint{position:absolute;z-index:6;right:calc(var(--pad) + 22px);bottom:44px;color:var(--mute);display:none}
@media (min-width:1100px){.vf-hint{display:block}.vf-strip{right:320px}}
@media (max-width:760px){
  .vf-hud{grid-template-columns:1fr;bottom:112px;left:calc(var(--pad) + 14px);right:calc(var(--pad) + 14px)}
  .vf-say{order:-1;text-align:left;max-width:none;padding:0}
  .vf-say p{display:none}
  .vf-say h1{margin:0}
  .vf-strip{left:calc(var(--pad) + 14px);right:0;bottom:18px;height:56px}
  .vf-strip button{width:62px;height:42px}
  .vf-strip button[aria-current="true"]{height:50px}
  .vf-lines{bottom:92px}
  .vf-count{right:38px}
  .vf-more{left:38px}
}

/* ---------- WORK: wall of reels ---------- */
.wall{position:fixed;inset:0;display:flex;flex-direction:column;gap:var(--gap);padding:var(--head) 0 var(--bar);background:var(--ink);
  user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab}
.wall.is-drag{cursor:grabbing}
.row{flex:1 1 0;min-height:0;position:relative;overflow:hidden;transition:opacity .28s}
.wall.is-swap .row{opacity:0}
.track{position:absolute;left:0;top:0;height:100%;display:flex;gap:var(--gap);will-change:transform}
.card{position:relative;flex:none;height:100%;display:block;overflow:hidden;background:var(--ink-2)}
.card img{width:100%;height:100%;object-fit:cover;transition:filter .5s,transform 1s var(--out);-webkit-user-drag:none}
.card .flip{position:absolute;inset:0;opacity:0;transition:opacity .12s}
.card .flip.on{opacity:1}
.card .cap{position:absolute;left:10px;bottom:8px;right:10px;font:400 10.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.wall .card::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(13,10,12,.55),transparent);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .card .cap{display:none}
  .wall .card::after{display:none}
  .wall.is-hot .card:not(.is-on) img{filter:grayscale(1) brightness(.3)}
  .card.is-on img{transform:scale(1.035)}
}
.wall-title{position:fixed;z-index:20;left:var(--pad);right:var(--pad);bottom:calc(var(--bar) + 10px);pointer-events:none;opacity:0;transform:translateY(14px);transition:opacity .3s,transform .6s var(--out)}
.wall-title.on{opacity:1;transform:none}
.wall-title strong{display:block;font:400 clamp(3rem,9.5vw,9.5rem)/.88 var(--display);letter-spacing:-.022em;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.wall-title strong em{font-style:italic}
.wall-title>span{display:block;margin-bottom:12px;color:var(--pink);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.wall-title.top{bottom:auto;top:calc(var(--head) + 14px)}
.wall-bar{position:fixed;z-index:30;left:0;right:0;bottom:0;height:var(--bar);padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--ink)}
.wall-bar h1{margin:0;flex:none}
.filters{display:flex;gap:clamp(12px,1.8vw,26px);overflow-x:auto;scrollbar-width:none;min-width:0;padding:8px 0}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;background:none;border:0;padding:8px 0;cursor:pointer;color:var(--mute);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.filters button sup{font-size:.72em;margin-left:.35em;opacity:.7}
.filters button:hover{color:var(--paper)}
.filters button[aria-pressed="true"]{color:var(--paper);border-color:var(--pink)}
.wall-hint{flex:none;color:var(--mute);margin:0}
.wall-svc{color:var(--paper);border-bottom:1px solid var(--pink);padding-bottom:3px}
@media (max-width:900px){.wall-hint{display:none}}
@media (max-width:620px){.wall-bar h1{display:none}}

/* ---------- STORY ---------- */
.story-hero{position:relative;height:100svh;min-height:480px;overflow:hidden;background:var(--ink-2)}
.story-hero img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transform:translate3d(0,var(--sy,0px),0)}
.story-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,10,12,.88) 0,rgba(13,10,12,.3) 36%,rgba(13,10,12,0) 60%)}
.story-head{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(28px,5vw,64px)}
.story-head .mono{display:flex;gap:1.4em;flex-wrap:wrap;margin:0 0 16px}
.story-head .mono b{font-weight:400;color:var(--pink)}
.story-head h1,.story-head .big{margin:0;font:400 clamp(3.2rem,11.5vw,12rem)/.86 var(--display);letter-spacing:-.022em;text-wrap:balance}
.story-head h1 em,.story-head .big em{font-style:italic}
.story-intro{max-width:1320px;margin:0 auto;padding:clamp(56px,9vw,150px) var(--pad);display:grid;gap:clamp(32px,5vw,80px)}
.story-lead{margin:0;font:300 clamp(1.9rem,4.3vw,4.1rem)/1.04 var(--display);letter-spacing:-.012em;max-width:19em;text-wrap:balance}
.story-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,4vw,64px)}
.story-cols h2{margin:0 0 14px;color:var(--pink);font:400 11.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.story-cols p{margin:0 0 1em;max-width:62ch;color:rgba(246,239,242,.84);font-size:17px;line-height:1.62}
.seq{display:grid;gap:var(--gap);padding:0 var(--gap)}
.seq figure{margin:0;position:relative;overflow:hidden;background:var(--ink-2)}
.seq img{width:100%;height:100%;object-fit:cover}
.seq figure img,.rv img{transform:scale(1.07);transition:transform 1.6s var(--out)}
.seq figure.in img,.rv.in img{transform:none}
.seq .pair{display:flex;gap:var(--gap)}
.seq .solo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:var(--gap);align-items:end}
.seq .solo.r{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}
.seq .solo .n{padding:var(--pad);font:300 clamp(4rem,13vw,13rem)/.8 var(--display);font-style:italic;color:rgba(246,239,242,.14);font-variant-numeric:lining-nums}
.seq .solo.r .n{order:2;text-align:right}
.seq .solo.tall{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.seq .solo.tall.r{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
@media (max-width:640px){
  .seq .pair{flex-direction:column}
  .seq .pair figure{flex:none!important}
  .seq .solo,.seq .solo.r,.seq .solo.tall,.seq .solo.tall.r{grid-template-columns:1fr}
  .seq .solo .n{display:none}
}
.seq-count{position:fixed;z-index:40;right:var(--pad);bottom:var(--pad);text-shadow:0 1px 8px rgba(0,0,0,.85);opacity:0;transition:opacity .3s;pointer-events:none}
.seq-count.on{opacity:1}
.story-next{position:relative;display:block;height:min(78svh,760px);margin-top:clamp(56px,9vw,150px);overflow:hidden;background:var(--ink-2)}
.story-next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) grayscale(.6);transform:scale(1.04);transition:filter .7s,transform 1.4s var(--out)}
.story-next:hover img{filter:brightness(.72) grayscale(0);transform:none}
.story-next div{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,5vw,64px)}
.story-next .mono{display:block;margin-bottom:14px;color:var(--pink)}
.story-next strong{display:block;font:400 clamp(3rem,10vw,10rem)/.88 var(--display);letter-spacing:-.022em}
.story-next strong em{font-style:italic}
.cta{padding:clamp(64px,10vw,170px) var(--pad);display:grid;gap:28px;justify-items:start;max-width:1320px;margin:0 auto}
.cta h2{margin:0;font:300 clamp(2.6rem,7.5vw,7.5rem)/.92 var(--display);letter-spacing:-.02em}
.cta h2 em{font-style:italic;color:var(--pink)}
.cta p{margin:0;max-width:44ch;font-size:18px;color:rgba(246,239,242,.84)}
.cta .row2{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.cta .tel{font:400 13px/1 var(--mono);letter-spacing:.06em;border-bottom:1px solid var(--line);padding-bottom:4px}
.foot{padding:30px var(--pad) 34px;border-top:1px solid var(--line);display:grid;gap:16px;color:var(--mute)}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 26px}
.foot p{margin:0}
.foot a:hover{color:var(--paper)}

/* ---------- ENQUIRE ---------- */
.enq-bg{position:fixed;inset:0;z-index:0;background:var(--ink)}
.enq-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 2s,transform 9s linear}
.enq-bg img.on{opacity:1;transform:none}
.enq-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,10,12,.94) 0,rgba(13,10,12,.8) 55%,rgba(13,10,12,.55) 100%)}
.enq{position:relative;z-index:1;min-height:100svh;display:grid;align-content:end;gap:clamp(22px,3vw,40px);padding:calc(var(--head) + 28px) var(--pad) clamp(28px,5vw,60px)}
.enq h1{margin:0;color:var(--pink)}
.say{margin:0;max-width:21em;font:300 clamp(1.75rem,4.5vw,4.3rem)/1.28 var(--display);letter-spacing:-.012em}
.say input,.say select{font:inherit;font-style:italic;line-height:1.1;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  color:var(--paper);padding:0 .06em .02em;margin:0;min-width:3.2em;max-width:100%;transition:border-color .2s}
.say input::placeholder{color:rgba(246,239,242,.42)}
.say .nb{display:inline-block;max-width:100%;white-space:nowrap}
.say select{appearance:none;-webkit-appearance:none;cursor:pointer;color:var(--pink);border-bottom-color:var(--pink);padding-right:.1em}
.say select option{color:#111;background:#fff;font:16px var(--body)}
.say input:focus,.say select:focus{outline:0;border-bottom-color:var(--pink)}
.say input:focus-visible,.say select:focus-visible{outline:0;box-shadow:0 2px 0 var(--pink)}
.enq-note{display:grid;gap:8px;max-width:640px}
.enq-note label{color:var(--mute)}
.enq-note textarea{width:100%;min-height:74px;resize:vertical;background:rgba(246,239,242,.05);border:1px solid var(--line);border-radius:2px;padding:12px 14px;font:16px/1.5 var(--body);color:var(--paper)}
.enq-note textarea:focus{outline:0;border-color:var(--pink)}
.enq-go{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.enq-go .tel{color:var(--mute)}
.enq-go .tel a{color:var(--paper);border-bottom:1px solid var(--line);padding-bottom:3px}
.enq-done{max-width:20em;font:300 clamp(1.9rem,4.6vw,4.4rem)/1.12 var(--display);letter-spacing:-.012em;margin:0}
.enq-done em{color:var(--pink)}
.enq-demo{margin:0;color:var(--mute);max-width:60ch}

@media (max-width:520px){
  :root{--head:60px}
  .logo img{height:24px}
  .nav .lk.opt{display:none}
  .pill{padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .vf-frame.is-active .kb{animation:none}
}

[hidden]{display:none!important}

/* ---------- menu ---------- */
.menu{position:fixed;inset:0;z-index:55;background:var(--ink);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
html.menu-open .menu{visibility:visible;opacity:1;transition:opacity .35s}
html.menu-open{overflow:hidden}
.menu-list{padding:calc(var(--head) + 1vh) var(--pad) var(--pad);display:flex;flex-direction:column;justify-content:center;overflow:auto}
.menu-list a{display:block;width:max-content;max-width:100%;font:300 clamp(2rem,min(5.6vw,7vh),4.9rem)/1.04 var(--display);letter-spacing:-.02em;transition:color .2s,transform .5s var(--out)}
.menu-list a:hover,.menu-list a:focus-visible{color:var(--pink);font-style:italic;transform:translateX(.18em)}
.menu-list .mono{color:var(--mute);margin:1.5em 0 .5em}
.menu-list .tel a{display:inline;font:inherit;letter-spacing:inherit;color:var(--paper)}
.menu-list .tel a:hover{font-style:normal;transform:none}
.menu-pic{position:relative;overflow:hidden;background:var(--ink-2)}
.menu-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .5s,transform 1.4s var(--out)}
.menu-pic img.on{opacity:1;transform:none}
@media (max-width:820px){.menu{grid-template-columns:1fr}.menu-pic{display:none}.menu-list a{font-size:clamp(2rem,min(11vw,6.2vh),4rem)}}

/* ---------- text sections (home, services, about) ---------- */
.wrap{max-width:1360px;margin-inline:auto;padding-inline:var(--pad)}
.blk{padding-block:clamp(56px,8vw,130px)}
.eyebrow{margin:0 0 16px;color:var(--pink)}
.h-disp{margin:0;font:300 clamp(2.3rem,5.6vw,5.4rem)/.98 var(--display);letter-spacing:-.018em;text-wrap:balance}
.h-disp em,.h-sec em{font-style:italic}
.h-lead{margin:0;font:300 clamp(1.7rem,3.3vw,3.1rem)/1.08 var(--display);letter-spacing:-.012em;text-wrap:balance}
.h-sec{margin:0;font:300 clamp(1.9rem,4.2vw,3.9rem)/1 var(--display);letter-spacing:-.016em;text-wrap:balance}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.prose p{margin:0 0 1em;max-width:62ch;color:rgba(246,239,242,.84);font-size:17px;line-height:1.62}
.prose .lede{color:var(--paper);font-size:19px}
.prose h3{margin:0 0 .45em;font:500 17px/1.35 var(--body);color:var(--paper)}
.prose ul{margin:0 0 1em;padding:0;list-style:none;color:rgba(246,239,242,.84)}
.prose ul:not(.tags) li{padding-left:1.2em;position:relative;margin-bottom:.3em}
.prose ul:not(.tags) li::before{content:"";position:absolute;left:0;top:.72em;width:.6em;height:1px;background:var(--pink)}
.tags{display:flex;flex-wrap:wrap;gap:8px 10px;margin:.4em 0 0!important}
.tags li{border:1px solid var(--line);border-radius:99px;padding:8px 15px;font:400 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.svc{list-style:none;margin:clamp(32px,5vw,70px) 0 0;padding:0;border-top:1px solid var(--line)}
.svc-row{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) clamp(120px,16vw,220px);gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(16px,2.2vw,30px) 0;border-bottom:1px solid var(--line)}
.svc-row h3{margin:0;font:300 clamp(2rem,4.7vw,4.5rem)/1 var(--display);letter-spacing:-.018em;transition:color .25s}
.svc-row h3 em{font-style:italic}
.svc-row h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.svc-row:hover h3{color:var(--pink)}
.svc-row:hover h3 a{font-style:italic}
.svc-row .d p{margin:0 0 .5em;font:500 15px/1.45 var(--body)}
.svc-row .d ul{margin:0;padding:0;list-style:none;color:var(--mute);font-size:14.5px;line-height:1.5}
.svc-row figure{margin:0;aspect-ratio:3 / 2;overflow:hidden;background:var(--ink-2)}
.svc-row figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(.7) brightness(.72);transition:filter .5s,transform 1s var(--out)}
.svc-row:hover figure img{filter:none;transform:scale(1.06)}
@media (max-width:820px){
  .svc-row{grid-template-columns:minmax(0,1fr) 104px;align-items:center}
  .svc-row h3{grid-column:1;grid-row:1}
  .svc-row figure{grid-column:2;grid-row:1}
  .svc-row .d{grid-column:1 / -1;grid-row:2}
  .svc-row figure img{filter:none}
}
.clients{list-style:none;margin:clamp(28px,4vw,56px) 0 0;padding:0;font:300 clamp(1.5rem,3.2vw,3rem)/1.2 var(--display);letter-spacing:-.012em}
.clients li{display:inline}
.clients li:not(:last-child)::after{content:" / ";color:var(--pink)}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(28px,4vw,56px)}
.quotes blockquote{margin:0;border-top:1px solid var(--line);padding-top:22px}
.quotes p{margin:0 0 20px;font:italic 300 clamp(1.45rem,2.2vw,2.05rem)/1.16 var(--display)}
.quotes footer{color:var(--mute)}
.sec-wrap{margin:0}
.sec{border-top:1px solid var(--line)}
.sec>summary,.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:clamp(22px,3vw,44px) 0}
.sec>summary{list-style:none;cursor:pointer}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary:hover .h-sec{color:var(--pink)}
.plus{position:relative;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;transition:border-color .2s,transform .4s var(--out)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1px;background:var(--paper);transform:translate(-50%,-50%)}
.plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--out)}
.sec[open] .plus::after{transform:translate(-50%,-50%) rotate(0)}
.sec>summary:hover .plus{border-color:var(--pink)}
.sec-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,30px);padding:0 0 clamp(28px,4vw,56px)}
.sec-body:empty{display:none}
.items{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(20px,3vw,48px)}
.figs{display:flex;gap:var(--gap);margin:0 0 clamp(28px,4vw,56px)}
.figs figure{margin:0;overflow:hidden;background:var(--ink-2)}
.figs img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.figs{flex-direction:column;max-width:none!important}.figs figure{flex:none!important}}
.reel{display:flex;flex-direction:column;gap:var(--gap);margin:0 0 clamp(28px,4vw,56px);user-select:none;-webkit-user-select:none;cursor:grab;touch-action:pan-y}
.reel.is-drag{cursor:grabbing}
.reel .row{flex:none;width:100%;height:clamp(220px,46vh,520px)}
.reel.dbl .row{height:clamp(180px,32vh,380px)}
.rel-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 24px;margin-bottom:clamp(20px,3vw,40px)}
.more{color:var(--paper);border-bottom:1px solid var(--pink);padding-bottom:4px}
.more:hover{color:var(--pink)}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.rel a{position:relative;display:block;aspect-ratio:3 / 2;overflow:hidden;background:var(--ink-2)}
.rel img{width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:filter .5s,transform 1.1s var(--out)}
.rel a:hover img{filter:none;transform:scale(1.05)}
.rel span{position:absolute;left:18px;right:18px;bottom:15px;font:400 clamp(1.5rem,2.4vw,2.2rem)/1 var(--display);letter-spacing:-.012em;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.rel span em{font-style:italic}
@media (max-width:900px){.rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rel{grid-template-columns:1fr}}
.story-more{display:flex;flex-wrap:wrap;gap:14px 28px;margin:0}
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,90px);align-items:start;border-top:1px solid var(--line)}
.split .sec{border-top:0}
.split .figs{max-width:none!important;margin:clamp(22px,3vw,44px) 0 clamp(28px,4vw,56px)}
.two .figs{margin:clamp(24px,3vw,44px) 0 0}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:0}.split .figs{margin-top:0}}