/* Newstar Gen — Harbour Noir
   Motion styles only apply under html.js, so the site reads fully without JavaScript. */
:root{
  --bg:#0a0a0b; --bg2:#111113; --ink:#ece6da; --dim:#9a9488; --faint:#837d71;
  --gold:#c9a86a; --gold2:#e9d3a2; --line:rgba(236,230,218,.12); --err:#ff8a7a;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif; --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.8,.18,1); --bar:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{overflow-x:hidden;font-family:var(--sans);font-size:16px;line-height:1.6;font-weight:300;color:var(--ink);background:var(--bg);margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:#0a0a0b}
.wrap{width:min(1320px,100% - 64px);margin-inline:auto}
em{font-style:italic;font-family:var(--serif);color:var(--gold2)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold2);outline-offset:4px;border-radius:2px}
main:focus{outline:none}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--gold2);color:#0a0a0b;padding:12px 18px;border-radius:999px;font-size:14px;font-weight:500;transition:top .3s}
.skip:focus{top:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grain + letterbox */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.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 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}80%{transform:translate(5%,1%)}100%{transform:translate(0,0)}}
.letterbox{position:fixed;left:0;right:0;height:var(--bar);background:#000;z-index:60;pointer-events:none;transition:height .2s linear}
.letterbox.t{top:0}.letterbox.b{bottom:0}

/* logo (outlined SVG, coloured here) */
.logo{display:inline-flex;align-items:center;line-height:1}
.logo-svg{height:36px;width:auto}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;padding:26px 0;transition:padding .5s var(--ease),background .5s}
.admin-bar .nav{top:32px}@media (max-width:782px){.admin-bar .nav{top:46px}}@media (max-width:600px){.admin-bar .nav{top:0}}
.nav.solid{padding:16px 0;background:linear-gradient(rgba(10,10,11,.88),rgba(10,10,11,.66));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between}
.nav ul{display:flex;gap:38px;list-style:none;align-items:center}
.nav ul a{font-size:13px;letter-spacing:.08em;color:var(--dim);position:relative;transition:color .3s}
.nav ul a:hover,.nav ul a.on{color:var(--ink)}
.nav ul a.on:not(.btn)::after{content:"";position:absolute;left:50%;bottom:-9px;width:4px;height:4px;border-radius:50%;background:var(--gold);transform:translateX(-50%)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 26px;border:1px solid rgba(201,168,106,.55);border-radius:999px;font-size:13px;letter-spacing:.06em;color:var(--gold2);position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease),border-color .45s}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold2);transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.btn:hover,.btn:focus-visible{color:#0a0a0b;border-color:var(--gold2)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.nav ul a.btn{color:var(--gold2)}.nav ul a.btn:hover{color:#0a0a0b}
.btn.fill{background:var(--gold2);color:#0a0a0b}
.btn .ar{transition:transform .45s var(--ease)}.btn:hover .ar{transform:translateX(4px)}
.btn[disabled]{opacity:.6;pointer-events:none}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;position:relative;z-index:72}
.burger i{position:absolute;left:13px;right:13px;height:1px;background:var(--ink);transition:transform .4s var(--ease)}
.burger i:first-child{top:18px}.burger i:last-child{top:25px}
.menu-open .burger i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-open .burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:65;background:#050506;display:flex;flex-direction:column;justify-content:center;padding:0 32px;gap:8px;opacity:0;pointer-events:none;transition:opacity .5s}
.menu-open .mmenu{opacity:1;pointer-events:auto}
.mmenu a{font-family:var(--serif);font-size:clamp(44px,13vw,72px);line-height:1.05}
.mmenu a.on{color:var(--gold2)}
.mmenu .mm-foot{position:absolute;left:32px;bottom:32px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.menu-open{overflow:hidden}

/* page-change curtain */
.curtain{position:fixed;inset:0;z-index:95;pointer-events:none}
.curtain i{position:absolute;left:0;right:0;height:0;background:#000;transition:height .6s var(--ease)}
.curtain i:first-child{top:0}.curtain i:last-child{bottom:0}
.curtain.close i,.curtain-in .curtain i{height:50.5vh}
.curtain .cap{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold2);opacity:0;transition:opacity .3s;z-index:2}
.curtain.close .cap{opacity:1;transition-delay:.3s}
.curtain-in .curtain .cap{opacity:1}

/* intro (home, first visit only) */
.intro{position:fixed;inset:0;z-index:100;background:#000;display:none;place-items:center;transition:opacity 1s var(--ease) .1s;cursor:pointer}
.js.first-visit .intro{display:grid}
.intro.done{opacity:0;pointer-events:none}
.intro .in1{text-align:center}
.intro .pre{font-size:11px;letter-spacing:.5em;color:var(--dim);opacity:0;animation:fadeUp 1s var(--ease) .3s forwards}
.intro .ttl{font-family:var(--serif);font-size:clamp(44px,7vw,96px);margin:14px 0 10px;display:flex;justify-content:center}
.intro .ttl span{opacity:0;filter:blur(12px);animation:unblur 1.1s var(--ease) forwards}
.intro .post{font-family:var(--serif);font-style:italic;color:var(--gold2);font-size:20px;opacity:0;animation:fadeUp 1s var(--ease) 1.5s forwards}
.intro .flare{width:2px;height:0;margin:28px auto 0;background:linear-gradient(transparent,var(--gold2),transparent);animation:flare 1.4s var(--ease) .9s forwards}
.intro .skipit{position:absolute;right:28px;bottom:26px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
@keyframes flare{to{height:90px}}
@keyframes unblur{to{opacity:1;filter:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* hero */
.hero{height:230vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage .media{position:absolute;inset:0;transform-origin:50% 60%}
.stage .media img{width:100%;height:100%;object-fit:cover}
.stage .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,7,.72),rgba(6,6,7,.2) 55%,transparent),radial-gradient(120% 90% at 50% 40%,transparent 30%,rgba(0,0,0,.7)),linear-gradient(180deg,rgba(10,10,11,.55),transparent 35%,transparent 60%,rgba(10,10,11,.95))}
.hero-copy{position:absolute;left:0;right:0;bottom:15vh;z-index:3}
.kicker{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:34px;height:1px;background:var(--gold)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(54px,9.4vw,158px);line-height:.9;letter-spacing:-.02em;margin:26px 0 30px}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line>span{display:block}
.js .line>span{transform:translateY(105%);transition:transform 1.3s var(--ease)}
.js.ready .line>span{transform:none}
.js.ready .line:nth-child(2)>span{transition-delay:.12s}
.hero .sub{max-width:520px;font-size:17px;color:#cbc4b6}
.hero .row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.hud{position:absolute;z-index:3;font-size:10.5px;letter-spacing:.3em;color:rgba(236,230,218,.6);text-transform:uppercase}
.hud.tl{top:110px;left:32px}.hud.tr{top:110px;right:32px;text-align:right}
.hud.bl{bottom:calc(var(--bar) + 22px);left:32px}
.rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e2483d;margin-right:10px;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.2}}
.scrollcue{display:flex;align-items:center;gap:12px}
.scrollcue i{width:1px;height:38px;background:linear-gradient(var(--gold2),transparent);animation:cue 2.2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* chapters */
section{position:relative}
.chap{padding:170px 0}
.chap-h{display:flex;gap:22px;align-items:baseline;margin-bottom:60px;color:var(--dim);font-size:11px;letter-spacing:.42em;text-transform:uppercase;font-weight:400}
.chap-h b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;letter-spacing:0;color:var(--gold2);text-transform:none}
.chap-h::after{content:"";flex:1;height:1px;background:var(--line);align-self:center}
.words{font-family:var(--serif);font-size:clamp(34px,4.6vw,72px);line-height:1.08;letter-spacing:-.01em;max-width:1180px}
.words span{opacity:.16;transition:opacity .25s linear}
.words span.lit{opacity:1}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:90px;color:#bdb6a9}
.cols p{font-size:15.5px}
.cols p::before{content:"";display:block;width:24px;height:1px;background:var(--gold);margin-bottom:22px}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:90px;align-items:end}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,96px);line-height:.95;letter-spacing:-.02em}
.lead{font-size:18px;color:#c9c2b4;max-width:560px}
.lead+.lead{margin-top:18px;color:var(--dim);font-size:16px}
.reel{margin-top:100px;height:82vh;position:relative;overflow:hidden;clip-path:inset(var(--ci,0%));transition:clip-path .1s linear}
.reel img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover}
.caption{display:flex;justify-content:space-between;margin-top:18px;font-size:11px;letter-spacing:.3em;color:var(--faint);text-transform:uppercase}
.team{display:grid;grid-template-columns:1fr 1.1fr;gap:90px;align-items:start}
.roles{list-style:none;border-top:1px solid var(--line)}
.roles li{padding:24px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:clamp(26px,2.6vw,40px);transition:padding .5s var(--ease),color .4s}
.roles li:hover{padding-left:18px;color:var(--gold2)}

/* subtitles */
.subs{height:var(--subs-h,420vh)}
.subs .stage .media img{transform:scale(1.12)}
.subs .stage .shade{background:linear-gradient(rgba(10,10,11,.6),rgba(10,10,11,.25) 40%,rgba(10,10,11,.9))}
.subs .top{position:absolute;top:16vh;left:0;right:0;z-index:3}
.subs .stack{position:absolute;left:0;right:0;bottom:calc(var(--bar) + 15vh);z-index:3;text-align:center}
.sub-line{position:absolute;left:50%;bottom:0;width:min(980px,90vw);transform:translate(-50%,24px);opacity:0;filter:blur(8px);transition:all .9s var(--ease);font-family:var(--serif);font-style:italic;font-size:clamp(28px,3.6vw,54px);line-height:1.15}
.sub-line.on{opacity:1;transform:translate(-50%,0);filter:none}
.sub-count{position:absolute;left:50%;bottom:calc(var(--bar) + 9vh);transform:translateX(-50%);z-index:3;display:flex;gap:10px}
.sub-count i{width:36px;height:1px;background:rgba(236,230,218,.25);overflow:hidden;position:relative}
.sub-count i b{position:absolute;inset:0;background:var(--gold2);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.sub-count i.on b{transform:none}
/* without JS (or reduced motion) the subtitles become a plain list */
html:not(.js) .subs,.calm .subs{height:auto}
html:not(.js) .subs .stage,.calm .subs .stage{position:relative;height:auto;padding:16vh 0}
html:not(.js) .subs .top,.calm .subs .top{position:relative;top:0;margin-bottom:40px}
html:not(.js) .subs .stack,.calm .subs .stack{position:relative;bottom:0}
html:not(.js) .sub-line,.calm .sub-line{position:relative;left:0;transform:none;opacity:1;filter:none;margin:0 auto 34px}
html:not(.js) .sub-count,.calm .sub-count{display:none}

/* filmstrip */
.strip{position:relative}
.strip .stage{display:flex;flex-direction:column;justify-content:center;padding-top:70px}
.strip-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:38px}
.strip .h2{font-size:clamp(40px,4.6vw,76px)}
.track{display:flex;gap:32px;padding-left:max(32px,calc((100vw - 1320px)/2));scroll-padding-inline:max(32px,calc((100vw - 1320px)/2));will-change:transform}
.frame{flex:0 0 min(58vw,760px);position:relative;display:block}
.frame .pic{height:44vh;overflow:hidden;position:relative;border-radius:2px}
.frame .pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.4s var(--ease)}
.frame:hover .pic img,.frame:focus-visible .pic img{transform:scale(1.02)}
.frame .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.75))}
.frame .ttl{position:absolute;left:28px;right:28px;bottom:24px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.frame h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.8vw,44px);line-height:1}
.frame .go{width:48px;height:48px;flex:0 0 48px;border-radius:50%;border:1px solid rgba(233,211,162,.5);display:grid;place-items:center;color:var(--gold2);transition:background .4s,color .4s}
.frame:hover .go{background:var(--gold2);color:#000}
.frame p{color:var(--dim);font-size:14.5px;margin-top:18px;max-width:560px}
.progress{height:1px;background:var(--line);margin-top:50px;position:relative}
.progress b{position:absolute;left:0;top:0;bottom:0;background:var(--gold2);width:0}
html:not(.js) .strip .stage,.calm .strip .stage{position:relative;height:auto;padding:120px 0}
html:not(.js) .track,.calm .track{overflow-x:auto;scroll-snap-type:x mandatory;padding-right:32px;padding-bottom:12px}
html:not(.js) .frame,.calm .frame{scroll-snap-align:start}
.calm .progress{display:none}

/* quote */
.quote{padding:200px 0;text-align:center}
.quote blockquote{font-family:var(--serif);font-size:clamp(46px,7.4vw,124px);line-height:.98;letter-spacing:-.02em}
.quote .u{background:linear-gradient(var(--gold2),var(--gold2)) 0 92%/0 1px no-repeat;transition:background-size 1.6s var(--ease)}
.quote .in .u,html:not(.js) .quote .u{background-size:100% 1px}
.quote p{max-width:600px;margin:44px auto 48px;color:var(--dim)}

/* footer / credits */
.credits{padding:34px 0 0;border-top:1px solid var(--line);overflow:hidden}
.roll{height:170px;overflow:hidden;position:relative;mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.roll-in{animation:roll 34s linear infinite;text-align:center}
/* the credits are doubled by the script and loop seamlessly, so the block is never empty */
@keyframes roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.roll-in>:last-child{margin-bottom:30px}
.cr{display:grid;grid-template-columns:1fr 1fr;gap:2px 40px;max-width:640px;margin:0 auto 30px}
.cr dt{text-align:right;font-size:10.5px;letter-spacing:.32em;color:var(--faint);text-transform:uppercase;padding-top:9px}
.cr dd{text-align:left;font-family:var(--serif);font-size:21px}
.roll-h{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold2);margin-bottom:16px}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:12px 40px;padding:30px 0 22px;border-top:1px solid var(--line);margin-top:24px}
.fh{font-size:10.5px;letter-spacing:.34em;color:var(--faint);font-weight:500;text-transform:uppercase;margin-bottom:8px}
.foot a,.foot span{display:block;color:var(--dim);font-size:14px;padding:2px 0;transition:color .3s}
.foot a:hover{color:var(--gold2)}
.foot .logo{display:inline-flex;padding:0}
.foot .tag{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink);margin-top:12px;max-width:300px;line-height:1.25}
.base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:14px 0 20px;border-top:1px solid var(--line);font-size:12px;color:var(--faint);letter-spacing:.04em}
.legal-links{display:flex;gap:24px}
.legal-links a:hover{color:var(--gold2)}
.disclaim{font-size:11.5px;color:var(--faint);padding-bottom:40px;max-width:760px;line-height:1.6}

/* inner page header */
.phead{height:92vh;height:92svh;min-height:640px;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.phead.short{height:70vh;min-height:520px}
.phead .media{position:absolute;inset:-8% 0 0}
.phead .media img{width:100%;height:100%;object-fit:cover;animation:kb 22s ease-out forwards}
@keyframes kb{from{transform:scale(1.18)}to{transform:scale(1.02)}}
.phead .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,7,.6),transparent 60%),linear-gradient(rgba(10,10,11,.6),rgba(10,10,11,.15) 40%,var(--bg))}
.phead .wrap{position:relative;z-index:2;padding-bottom:110px}
.phead h1{font-family:var(--serif);font-weight:400;font-size:clamp(60px,10vw,170px);line-height:.88;letter-spacing:-.025em;margin-top:26px}
.phead .intro-p{max-width:620px;margin-top:30px;font-size:18px;color:#cbc4b6}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.toc a{padding:10px 18px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:#d2cbbd;transition:border-color .3s,color .3s}
.toc a:hover{border-color:var(--gold);color:var(--gold2)}

/* services scenes */
.scene{padding:130px 0;border-top:1px solid var(--line);scroll-margin-top:40px}
.scene .g{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
.scene.alt .g>.still{order:2}
.scene .still{position:sticky;top:14vh;height:72vh;overflow:hidden}
.scene .still img{width:100%;height:118%;object-fit:cover;will-change:transform}
.scene h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.4vw,68px);line-height:1;margin-bottom:34px}
.scene p{color:#c1baad;margin-bottom:18px;font-size:16.5px}
.scene .sub{margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.scene .sub h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:28px;color:var(--gold2);margin-bottom:14px}
.notice{margin-top:40px;padding:26px 28px;border:1px solid rgba(201,168,106,.35);background:rgba(201,168,106,.05);font-size:13.5px!important;color:#b1aa9e!important;line-height:1.6}
.notice b{display:block;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-weight:500}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;list-style:none}
.pill-row li{font-size:12px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:#d2cbbd}

/* values */
.values{border-top:1px solid var(--line)}
.val{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:42px 0;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.val::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(201,168,106,.12),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.val:hover::before{transform:none}
.val h3{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6vw,100px);line-height:.9;transition:transform .7s var(--ease),color .5s;position:relative}
.val:hover h3{transform:translateX(16px);color:var(--gold2)}
.val p{color:var(--dim);font-size:15.5px;position:relative}
.gbs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.gbs div{padding:36px 26px 40px 0;border-right:1px solid var(--line);margin-right:26px}
.gbs div:last-child{border-right:0;margin-right:0}
.gbs div::before{content:"";display:block;width:24px;height:1px;background:var(--gold);margin-bottom:22px}
.gbs h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;margin:0 0 14px}
.gbs p{color:var(--dim);font-size:14.5px}

/* contact */
.contact{min-height:100vh;padding:190px 0 120px;display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}
.contact h1{font-family:var(--serif);font-weight:400;font-size:clamp(64px,9vw,150px);line-height:.88;letter-spacing:-.025em;margin:26px 0 40px}
.dets{border-top:1px solid var(--line);margin-top:50px}
.dets div{display:flex;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.dets dt{color:var(--faint);font-size:11px;letter-spacing:.3em;text-transform:uppercase;padding-top:3px}
.dets dd{color:#d2cbbd;text-align:right}
.dets a:hover{color:var(--gold2)}
.form .f{position:relative;margin-bottom:30px}
.form label,.form legend{display:block;font-size:10.5px;letter-spacing:.32em;color:var(--faint);text-transform:uppercase;margin-bottom:6px}
.form .opt{letter-spacing:.1em;text-transform:none;color:var(--faint);font-size:11px}
.form input,.form textarea,.form select{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:inherit;font-size:22px;font-family:var(--serif);padding:10px 0 14px;outline:none;transition:border-color .4s;border-radius:0;-webkit-appearance:none;appearance:none}
.form select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a86a' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center no-repeat;padding-right:28px}
.form select option{background:#111;color:var(--ink);font-family:var(--sans);font-size:15px}
.form textarea{resize:vertical;min-height:120px}
.form .f::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold2);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.form .f:focus-within::after{transform:none}
/* with an error message showing, the field's own line turns gold on focus instead (the sweep would sit under the message) */
.form .f.bad::after{display:none}
.form .f.bad input:focus,.form .f.bad textarea:focus{border-bottom-color:var(--gold2)}
.consent input:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.form .f.bad input,.form .f.bad textarea{border-bottom-color:var(--err)}
.form .err{display:block;font-size:12.5px;color:var(--err);margin-top:8px;min-height:0}
.form .err:empty{display:none}
.form .consent{display:flex;gap:14px;align-items:flex-start;font-size:14px;letter-spacing:0;text-transform:none;line-height:1.55;color:var(--dim);margin:6px 0 34px;cursor:pointer}
.consent input{-webkit-appearance:none;appearance:none;flex:0 0 20px;width:20px;height:20px;border:1px solid rgba(201,168,106,.6);border-radius:3px;margin-top:2px;display:grid;place-items:center;cursor:pointer;padding:0;font-size:0}
.consent input:checked{background:var(--gold2);border-color:var(--gold2)}
.consent input:checked::after{content:"";width:6px;height:11px;border:solid #0a0a0b;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.consent a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
.consent.bad input{border-color:var(--err)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{margin-top:24px;font-size:14.5px;color:var(--dim)}
.status.error{color:var(--err)}
.sent{padding:40px;border:1px solid rgba(201,168,106,.4)}
.sent h2{font-family:var(--serif);font-weight:400;font-size:40px;margin-bottom:12px}
.sent p{color:var(--dim)}

/* cookie consent - same system as the client's other sites, styled for Harbour Noir.
   Banner, fab and overlay are toggled with [hidden]/inert, never with display rules. */
.cookie-banner{position:fixed;left:24px;bottom:24px;z-index:85;width:min(480px,calc(100% - 48px));padding:26px 26px 22px;background:rgba(17,17,19,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(201,168,106,.35);border-radius:4px;box-shadow:0 30px 60px -20px rgba(0,0,0,.75);font-size:14px;line-height:1.55;color:#cfc8ba;animation:ckIn .6s var(--ease)}
.cookie-banner h2{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;color:var(--ink);margin-bottom:10px}
.ck-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.ck-actions .btn{padding:12px 20px}
.ck-text{font-size:13px;letter-spacing:.04em;color:var(--gold2);text-decoration:underline;text-underline-offset:4px;padding:8px 4px}
.ck-text:hover{color:var(--ink)}
@keyframes ckIn{from{opacity:0;transform:translateY(16px)}}
.cookie-fab{position:fixed;left:20px;bottom:20px;z-index:85;width:46px;height:46px;border-radius:50%;background:rgba(17,17,19,.92);border:1px solid rgba(201,168,106,.45);color:var(--gold2);display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.7);transition:transform .4s var(--ease),opacity .4s,background .3s,color .3s}
.cookie-fab svg{width:22px;height:22px}
.cookie-fab.away{opacity:0;transform:translateY(12px);pointer-events:none}
.menu-open .cookie-fab{opacity:0;pointer-events:none} /* would sit on the open phone menu */
.cookie-fab:hover{transform:translateY(-3px);background:var(--gold2);color:#0a0a0b}
.cookie-modal-overlay{position:fixed;inset:0;z-index:120;background:rgba(5,5,6,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.cookie-modal-overlay.open{opacity:1;pointer-events:auto}
.cookie-modal{width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--bg2);border:1px solid rgba(201,168,106,.35);border-radius:4px;padding:34px 32px 28px;color:#cfc8ba;font-size:14.5px;transform:translateY(14px);transition:transform .5s var(--ease)}
.cookie-modal-overlay.open .cookie-modal{transform:none}
.cookie-modal h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;color:var(--ink);margin-bottom:12px}
.cookie-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 0;border-top:1px solid var(--line)}
.cookie-row:first-of-type{margin-top:20px}
.cookie-row h3{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--ink);margin-bottom:4px}
.cookie-row p{font-size:13.5px;color:var(--dim)}
.switch{position:relative;flex:0 0 46px;width:46px;height:26px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.switch .track{position:absolute;inset:0;border-radius:999px;border:1px solid rgba(201,168,106,.5);background:transparent;transition:background .3s,border-color .3s}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--dim);transition:transform .35s var(--ease),background .3s}
.switch input:checked+.track{background:var(--gold2);border-color:var(--gold2)}
.switch input:checked+.track::after{transform:translateX(20px);background:#0a0a0b}
.switch input:focus-visible+.track{outline:2px solid var(--gold2);outline-offset:3px}
.switch.locked{opacity:.55}.switch.locked input{cursor:not-allowed}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.modal-actions .btn{padding:12px 22px}
.cookie-link{font-size:12px;letter-spacing:.04em;color:var(--faint);padding:0;transition:color .3s}
.cookie-link:hover{color:var(--gold2)}
.prose code{font-size:.9em;color:var(--gold2)}

/* legal documents */
.doc{padding:180px 0 120px}
.doc .wrap{display:grid;grid-template-columns:280px 1fr;gap:90px;align-items:start}
.doc h1{font-family:var(--serif);font-weight:400;font-size:clamp(52px,6vw,96px);line-height:.92;letter-spacing:-.02em;margin:22px 0 18px}
.doc .upd{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.doc aside{position:sticky;top:120px}
.doc aside ol{list-style:none;margin-top:40px;border-top:1px solid var(--line)}
.doc aside li a{display:block;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--dim)}
.doc aside li a:hover{color:var(--gold2)}
.prose{max-width:760px;color:#c9c2b4;font-size:16.5px}
.prose h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.1;color:var(--ink);margin:64px 0 18px;scroll-margin-top:110px}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul{margin-bottom:16px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:8px}
.prose a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:500}

/* 404 */
.lost{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}
.lost .media{position:absolute;inset:0}
.lost .media img{width:100%;height:100%;object-fit:cover;opacity:.35}
.lost .media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,.92),rgba(10,10,11,.55) 60%,rgba(10,10,11,.3))}
.lost .wrap{position:relative;z-index:2}
.lost h1{font-family:var(--serif);font-weight:400;font-size:clamp(60px,10vw,160px);line-height:.9;margin:24px 0 30px}
.lost p{color:var(--dim);max-width:480px;margin-bottom:40px;font-size:17px}

/* reveal */
.js .rv{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

/* cursor (fine pointers only) */
.cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(233,211,162,.6);border-radius:50%;pointer-events:none;z-index:99;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s,opacity .3s;mix-blend-mode:difference;opacity:0}
.cur.live{opacity:1}
.cur.big{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(233,211,162,.9);border-color:transparent}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* short laptop screens: keep the hero labels clear of the headline */
@media (max-height:760px) and (min-width:901px){
  .hud.tl,.hud.tr{display:none}
  .hero h1{font-size:clamp(54px,min(9.4vw,15vh),158px);margin:18px 0 22px}
  .hero-copy{bottom:12vh}
  .phead,.phead.short{min-height:0;height:100vh;height:100svh}
  .phead .wrap{padding-bottom:9vh}
  .phead h1{font-size:clamp(56px,min(10vw,17vh),170px)}
}
@media (max-width:900px){
  .wrap{width:calc(100% - 40px)}
  .nav{padding:18px 0}.nav.solid{padding:12px 0}
  .nav ul{display:none}.burger{display:block}
  .logo-svg{height:31px}
  .hud.tl,.hud.tr{display:none}.hud.bl{left:20px}
  .hero .row{flex-direction:column;align-items:flex-start}
  .cols,.split,.team,.scene .g,.contact,.doc .wrap{grid-template-columns:1fr;gap:40px}
  .scene.alt .g>.still{order:0}
  .scene .still{position:relative;top:0;height:56vh}
  .strip{height:auto!important}.strip .stage{position:relative;height:auto;padding:120px 0}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;padding-left:20px;padding-right:20px;padding-bottom:12px;scroll-padding-inline:20px}
  .frame{flex-basis:84vw;scroll-snap-align:start}
  .progress{display:none}
  .val{grid-template-columns:1fr;gap:12px}
  .gbs{grid-template-columns:1fr}.gbs div{border-right:0;border-bottom:1px solid var(--line);margin:0}
  .foot{grid-template-columns:1fr 1fr}
  .chap{padding:110px 0}
  .strip-head{flex-direction:column;align-items:flex-start;gap:20px}
  .chap-h{flex-wrap:wrap;gap:10px 18px}
  .contact{padding-top:140px;min-height:0}
  .dets div{flex-direction:column;gap:6px}.dets dd{text-align:left}
  .doc{padding-top:130px}.doc aside{position:relative;top:0}
  .phead .wrap{padding-bottom:70px}
  .quote{padding:130px 0}
}
@media (max-width:560px){
  .cookie-banner{left:12px;right:12px;bottom:12px;width:auto;padding:22px 20px 18px}
  .ck-actions .btn{flex:1 1 auto;justify-content:center}
  .ck-text{width:100%;text-align:center}
  .cookie-modal{padding:28px 22px 22px}
  .modal-actions .btn{flex:1;justify-content:center}
  .legal-links{flex-wrap:wrap;gap:10px 20px}
  .foot{grid-template-columns:1fr 1fr;gap:18px 20px}
  .foot>div:first-child,.foot>div:nth-child(3){grid-column:1/-1}
  .foot>div:nth-child(3){order:3}.foot>div:nth-child(4){order:2}
  .roll{height:150px}
  .cr{gap:2px 18px}.cr dd{font-size:20px}
  .form input,.form textarea,.form select{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .line>span{transform:none}.js .rv{opacity:1;transform:none}
  .grain,.cur{display:none}
  .roll{display:none} /* decorative and normally moving; without motion the footer stays compact */
  .foot{margin-top:0;border-top:0}
  .hero{height:100vh}
}
@media print{
  .grain,.letterbox,.cur,.curtain,.nav,.mmenu,.intro,.roll,.cookie-banner,.cookie-fab,.cookie-modal-overlay{display:none!important}
  html,body{background:#fff;color:#000}
  .js .rv{opacity:1;transform:none}
}