/* Burnsridge Systems, dark luxury concept: shared by every page here. */
@font-face { font-family:"Charis SIL"; src:url("../../fonts/charis-sil-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Charis SIL"; src:url("../../fonts/charis-sil-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:Archivo; src:url("../../fonts/archivo-var.woff2") format("woff2-variations"); font-weight:100 900; font-display:swap; }

:root {
  --black:#000; --coal:#0b0b0a; --edge:#2B2723;
  --gold:#D4AF37; --bone:#F5F2EA; --ash:#b3ada3;
  --serif:"Charis SIL", Georgia, "Times New Roman", serif;
  --sans:Archivo, "Helvetica Neue", Arial, sans-serif;
  --gut:clamp(20px, 5vw, 80px);
  --slow:cubic-bezier(.22,.61,.12,1);
}
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--black); }
html.loading { overflow:hidden; }
body { margin:0; background:var(--black); color:var(--bone); font:400 20px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img, video { display:block; }
::selection { background:var(--gold); color:#000; }
.wrap { position:relative; max-width:1280px; margin:0 auto; padding:0 var(--gut); }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:16px; background:var(--gold); color:#000; padding:10px 14px; z-index:300; }
.label { display:flex; align-items:baseline; gap:14px; font:500 15px/1 var(--sans); color:var(--ash); margin:0; }
.label b { font-weight:500; font-size:12px; font-variant-numeric:tabular-nums; }
.label::after { content:""; flex:1; height:1px; background:var(--edge); align-self:center; }


/* ==== The B ================================================= */
#loader { position:fixed; inset:0; z-index:200; display:grid; place-items:center; pointer-events:none; }
html:not(.loading) #loader { display:none; }
#loader .veil { position:absolute; inset:0; background:var(--black); transition:opacity 1s var(--slow); }
#loader.fly .veil { opacity:0; }
#loader .mark { position:relative; width:min(40vw, 210px); overflow:visible; transform-origin:50% 50%; }
#loader.fly .mark { transition:transform 1.05s cubic-bezier(.7,0,.2,1); }
#loader .trace { fill:none; stroke:var(--gold); stroke-width:6; stroke-linejoin:round; }
#loader .shine { transform:translateX(-80px) skewX(-18deg); }
#loader.glint .shine { transition:transform .7s ease-in-out; transform:translateX(230px) skewX(-18deg); }
#loader .count::after { display:none; }
#loader .count { display:block; letter-spacing:.2em; position:absolute; bottom:clamp(28px, 6vh, 56px); left:0; right:0; text-align:center; transition:opacity .4s; }
#loader.fly .count { opacity:0; }
html.loading .logo svg { opacity:0; }

/* ==== Header ================================================ */
header { position:fixed; top:0; left:0; right:0; z-index:50; transition:background .5s, border-color .5s; border-bottom:1px solid transparent; }
header.solid { background:rgba(0,0,0,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-color:rgba(245,242,234,.08); }
header .wrap { display:flex; align-items:center; justify-content:space-between; height:84px; max-width:none; }
.logo { display:flex; align-items:center; gap:14px; text-decoration:none; font:500 14px/1 var(--sans); letter-spacing:.3em; }
.logo svg { width:22px; height:auto; }
.logo svg path { fill:var(--gold); }
nav { display:flex; align-items:center; gap:clamp(20px, 3vw, 44px); font:500 14px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
nav a { text-decoration:none; position:relative; padding:6px 0; }
nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--bone); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--slow); }
nav a:hover::after, nav a:focus-visible::after { transform:scaleX(1); transform-origin:left; }
nav a:focus-visible { outline:none; }
nav .to-hire { border:1px solid rgba(245,242,234,.35); padding:12px 18px; transition:background .4s, color .4s, border-color .4s; }
nav .to-hire::after { display:none; }
nav .to-hire:hover, nav .to-hire:focus-visible { background:var(--bone); color:#000; border-color:var(--bone); }
@media (max-width:640px) { nav a:not(.to-hire) { display:none; } .logo span { display:none; } }

/* ==== Opening: the footage ================================== */
.opening {
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:140px 0 0; overflow:hidden; isolation:isolate;
}
.opening .bg { position:absolute; inset:0; z-index:-2; }
.opening .bg video, .opening .bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.opening .bg video { opacity:0; }
.opening .bg { transform:scale(1.12); transition:transform 9s cubic-bezier(.2,.6,.2,1); }
.go .opening .bg, html:not(.anim) .opening .bg { transform:scale(1); }
.opening::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.25) 70%),
    linear-gradient(rgba(0,0,0,.5), transparent 30%, transparent 55%, rgba(0,0,0,.85) 100%);
}
.opening .inner { width:100%; padding-bottom:clamp(48px, 7vw, 96px); }
h1 { font:400 clamp(60px, 10.5vw, 176px)/.96 var(--serif); letter-spacing:-.03em; margin:0; }
h1 .ln { display:block; overflow:hidden; padding-bottom:.24em; margin-bottom:-.24em; }
h1 .ln > span { display:inline-block; }
h1 em { font-style:normal; color:var(--gold); }
.sub { font:400 clamp(22px, 2.3vw, 32px)/1.35 var(--serif); margin:clamp(22px, 2.6vw, 36px) 0 0; max-width:30ch; }
.index {
  width:100%; display:flex; justify-content:space-between; gap:0 24px;
  position:relative; padding-top:18px; padding-bottom:26px;
  font:500 15px/1.3 var(--sans);
}
.index::before, footer .base::before { content:""; position:absolute; top:0; left:var(--gut); right:var(--gut); height:1px; background:rgba(245,242,234,.22); }
footer .base::before { background:var(--edge); }
.index a { text-decoration:none; display:flex; gap:12px; align-items:baseline; transition:color .3s; }
.index a b { font-weight:500; font-size:12px; color:var(--ash); font-variant-numeric:tabular-nums; }
.index a:hover { color:var(--gold); }
.index .scroll { color:var(--ash); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.index .scroll i { font-style:normal; display:inline-block; margin-left:6px; animation:nudge 2s ease-in-out infinite; }
@keyframes nudge { 50% { transform:translateY(4px); } }
@media (max-width:760px) { .index { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; } }

.anim h1 .ln > span { transform:translateY(105%); transition:transform 1.2s var(--slow); transition-delay:calc(.1s + var(--i) * .12s); }
.anim.go h1 .ln > span { transform:none; }
.anim .opening .sub, .anim .opening .index { opacity:0; transform:translateY(16px); transition:opacity 1s var(--slow) .5s, transform 1s var(--slow) .5s; }
.anim .opening .index { transition-delay:.75s; }
.anim.go .opening .sub, .anim.go .opening .index { opacity:1; transform:none; }

.anim .fade { opacity:0; transform:translateY(40px); transition:opacity 1.3s var(--slow), transform 1.5s var(--slow); transition-delay:var(--d, 0s); }
.anim .fade.in { opacity:1; transform:none; }

/* ==== Sections =============================================== */
section { position:relative; padding:clamp(110px, 16vw, 220px) 0; }
h2 { font:400 clamp(42px, 5.8vw, 88px)/1.06 var(--serif); letter-spacing:-.02em; margin:22px 0 0; }




.statement p.big { font:400 clamp(32px, 4.4vw, 64px)/1.25 var(--serif); letter-spacing:-.01em; margin:34px 0 0; max-width:24ch; }
.statement .ln { display:block; overflow:hidden; padding-bottom:.24em; margin-bottom:-.24em; }
.statement .ln > span { display:inline-block; transform:translateY(105%); transition:transform 1.3s var(--slow); transition-delay:calc(var(--i) * .12s); }
.statement .in .ln > span { transform:none; }

/* disciplines */
.list { margin-top:clamp(56px, 7vw, 96px); border-top:1px solid var(--edge); }
.item {
  display:grid; grid-template-columns:90px minmax(0, 1fr) minmax(0, 1fr); gap:24px; align-items:baseline;
  padding:clamp(30px, 3.6vw, 50px) 0; border-bottom:1px solid var(--edge); position:relative; cursor:default;
}
.item::after { content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .9s var(--slow); }
.item:hover::after { transform:scaleX(1); }
.item .n { font:500 14px/1 var(--sans); letter-spacing:.2em; color:var(--ash); }
.item h3 { font:400 clamp(34px, 4vw, 60px)/1.05 var(--serif); margin:0; transition:transform .9s var(--slow), color .5s; }
.list:hover .item h3 { color:rgba(245,242,234,.35); }
.list .item:hover h3 { transform:translateX(14px); color:var(--bone); }
@media (max-width:760px) { .item { grid-template-columns:1fr; gap:12px; } }
.item p { margin:0; color:var(--ash); font-size:clamp(18px, 1.4vw, 20px); max-width:38ch; }

/* how we build */
.standards { border-top:1px solid var(--edge); }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); margin-top:clamp(56px, 7vw, 96px); border-top:1px solid var(--edge); border-left:1px solid var(--edge); }
.std { padding:clamp(26px, 3vw, 40px); border-right:1px solid var(--edge); border-bottom:1px solid var(--edge); }
.std h3 { font:500 clamp(20px, 1.7vw, 24px)/1.25 var(--sans); margin:0 0 12px; letter-spacing:-.005em; }
.std h3::before { content:""; display:block; width:8px; height:8px; background:var(--gold); margin-bottom:22px; }
.std p { margin:0; color:var(--ash); font-size:clamp(17px, 1.3vw, 19px); }
@media (max-width:980px) { .grid { grid-template-columns:1fr 1fr; } }
@media (max-width:620px) { .grid { grid-template-columns:1fr; } }

/* prices over their photographs */
.prices { padding:0; background:var(--coal); }
.pbg { position:sticky; top:0; height:100vh; margin-bottom:-100vh; overflow:hidden; }
.pbg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity 1.4s var(--slow), transform 6s linear; }
.pbg img.on { opacity:.5; transform:scale(1); }
.pbg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.35) 100%), linear-gradient(#000, transparent 18%, transparent 82%, #000); }
.prices .wrap { padding-top:clamp(110px, 16vw, 220px); padding-bottom:clamp(110px, 16vw, 220px); }
.table { margin-top:clamp(56px, 7vw, 96px); }
.row {
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px 32px; align-items:baseline;
  padding:clamp(40px, 5vw, 70px) 0; border-top:1px solid rgba(245,242,234,.14); transition:opacity .8s;
}
.row:last-child { border-bottom:1px solid rgba(245,242,234,.14); }
.anim .table .row { opacity:.4; }
.anim .table .row.cur { opacity:1; }
.row h3 { font:400 clamp(30px, 3.2vw, 48px)/1.15 var(--serif); margin:0; }
.row .price { font:400 clamp(40px, 5.4vw, 80px)/1 var(--serif); margin:0; text-align:right; font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; }
.row .price small { font:500 12px/1 var(--sans); letter-spacing:.28em; text-transform:uppercase; color:var(--ash); margin-right:14px; vertical-align:1.2em; }
.row p:not(.price) { grid-column:1 / -1; margin:6px 0 0; color:var(--ash); font-size:clamp(18px, 1.4vw, 20px); }
@media (max-width:640px) { .row { grid-template-columns:1fr; } .row .price { text-align:left; } }
.basis { margin:clamp(56px, 7vw, 96px) 0 0; font:400 clamp(32px, 4vw, 60px)/1.2 var(--serif); letter-spacing:-.015em; color:var(--bone); }
.basis em { font-style:normal; color:var(--gold); }



/* hire, over the last ridge */
.hire { overflow:hidden; isolation:isolate; padding:clamp(150px, 22vw, 300px) 0; }
.hire .hbg { position:absolute; inset:-15% 0; z-index:-2; }
.hire .hbg img { width:100%; height:100%; object-fit:cover; }
.hire::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,.85)), linear-gradient(#000, transparent 25%, transparent 75%, #000); }
.hire h2 { font-size:clamp(50px, 8vw, 132px); max-width:13ch; }
.mail {
  display:inline-flex; align-items:center; gap:.6em; position:relative; margin-top:clamp(44px, 5vw, 68px);
  font:400 clamp(20px, 2.8vw, 38px)/1.2 var(--serif); text-decoration:none; padding:.75em 1.3em;
  border:1px solid rgba(245,242,234,.4); transition:background .5s, color .5s, border-color .5s; word-break:break-word;
}
.mail span { transition:transform .5s var(--slow); }
@media (max-width:560px) { .mail { font-size:clamp(16px, 4.6vw, 22px); padding:.9em 1em; white-space:nowrap; word-break:normal; gap:.45em; } }
.mail:hover, .mail:focus-visible { background:var(--gold); color:#000; border-color:var(--gold); outline:none; }
.mail:hover span { transform:translateX(6px); }
.hire .note { margin:clamp(34px, 4vw, 52px) auto 0; font:400 clamp(24px, 2.6vw, 36px)/1.35 var(--serif); color:var(--bone); }
.hire .note em { font-style:normal; color:var(--gold); }

footer { border-top:1px solid var(--edge); padding:clamp(56px, 7vw, 96px) 0 36px; font-size:16px; }
footer .cols { display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:40px 32px; }
footer .brand p { color:var(--ash); margin:18px 0 0; max-width:30ch; }
footer h4 { font:500 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ash); margin:0 0 18px; }
footer nav, footer .cols > div:last-child { display:flex; flex-direction:column; gap:10px; align-items:flex-start; font:400 16px/1.4 var(--sans); letter-spacing:0; text-transform:none; }
footer .cols a { text-decoration:none; }
footer .cols nav a:hover, footer .cols > div a:hover { color:var(--gold); }
footer nav a::after { display:none; }
footer .base { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; margin-top:clamp(48px, 6vw, 80px); padding-top:22px; position:relative; color:var(--ash); font-size:14px; font-variant-numeric:tabular-nums; }
@media (max-width:860px) { footer .cols { grid-template-columns:1fr 1fr; } footer .brand { grid-column:1 / -1; } }

@media (prefers-reduced-motion:reduce) {
  .anim h1 .ln > span, .statement .ln > span { transition:none; }
}
/* ==== Page change: a curtain ================================ */
section[id], div[id="top"] { scroll-margin-top:84px; }
#curtain {
  position:fixed; inset:0; z-index:180; background:var(--black); display:grid; place-items:center;
  transform:translateY(101%); pointer-events:none;
}
#curtain::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--gold); }
#curtain .ci { display:flex; flex-direction:column; align-items:center; gap:22px; opacity:0; transform:translateY(14px); }
#curtain svg { width:34px; height:auto; }
#curtain svg path { fill:var(--gold); }
#curtain .ct { font:400 clamp(34px, 4.6vw, 64px)/1 var(--serif); letter-spacing:-.02em; color:var(--bone); }
html.leaving #curtain { transform:none; transition:transform .8s cubic-bezier(.76,0,.24,1); pointer-events:auto; }
html.leaving #curtain .ci { opacity:1; transform:none; transition:opacity .5s .35s, transform .7s var(--slow) .3s; }
html.arriving #curtain { transform:none; }
html.arriving #curtain .ci { opacity:1; transform:none; }
html.arriving.lifting #curtain { transform:translateY(-101%); transition:transform .95s cubic-bezier(.76,0,.24,1); }
html.arriving.lifting #curtain .ci { opacity:0; transform:translateY(-24px); transition:opacity .3s, transform .5s; }
html.arriving body, html.leaving body { overflow:hidden; }

/* links that lead somewhere */
.more {
  display:inline-flex; align-items:center; gap:14px; margin-top:clamp(40px, 5vw, 64px); text-decoration:none;
  font:500 14px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; padding-bottom:10px; position:relative;
}
.more::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(245,242,234,.35); transform-origin:left; transition:background .4s; }
.more i { font-style:normal; transition:transform .5s var(--slow); }
.more:hover { color:var(--gold); }
.more:hover::after { background:var(--gold); }
.more:hover i { transform:translateX(8px); }
a.item { color:inherit; text-decoration:none; grid-template-columns:90px minmax(0, 1fr) minmax(0, 1fr) 40px; }
a.item .go { font-style:normal; justify-self:end; color:var(--ash); transition:transform .6s var(--slow), color .4s; }
a.item:hover .go { transform:translateX(8px); color:var(--gold); }
@media (max-width:760px) { a.item { grid-template-columns:1fr; } a.item .go { display:none; } }
a.std { color:inherit; text-decoration:none; }

/* ==== Inner pages =========================================== */
.opening.page { min-height:86svh; }
.opening.page .bg img { opacity:.55; }
.page .label { margin-bottom:26px; }
.index.six { }
@media (max-width:760px) { .index.six { grid-template-columns:1fr 1fr 1fr; } }

/* work: one section per discipline */
.svc { border-top:1px solid var(--edge); }
.svc-grid { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(40px, 6vw, 110px); align-items:start; }
.svc-head { position:sticky; top:130px; }
.svc-n { display:block; font:400 clamp(64px, 8vw, 120px)/.9 var(--serif); color:transparent; -webkit-text-stroke:1px rgba(245,242,234,.35); letter-spacing:-.03em; }
.svc-head h2 { margin-top:22px; }
.svc-pitch { font:400 clamp(22px, 2.2vw, 30px)/1.35 var(--serif); margin:18px 0 0; max-width:22ch; }
.svc-price { margin:clamp(30px, 3.4vw, 46px) 0 0; font:400 clamp(40px, 4.4vw, 64px)/1 var(--serif); color:var(--gold); font-variant-numeric:lining-nums; }
.svc-price small { display:block; font:500 12px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ash); margin-bottom:12px; }
.svc-price span:not(.num) { display:block; font:400 18px/1.4 var(--sans); color:var(--ash); margin-top:12px; }
.svc-lede { font:400 clamp(21px, 1.9vw, 26px)/1.5 var(--serif); margin:0; color:var(--bone); }
.ticks { list-style:none; margin:clamp(36px, 4vw, 56px) 0 0; padding:0; border-top:1px solid var(--edge); }
.ticks li { display:grid; grid-template-columns:34px minmax(0, 1fr); padding:clamp(22px, 2.4vw, 30px) 0; border-bottom:1px solid var(--edge); }
.ticks li::before { content:""; width:8px; height:8px; background:var(--gold); margin-top:.62em; }
.ticks b { display:block; font:400 clamp(22px, 2vw, 28px)/1.25 var(--serif); margin-bottom:8px; }
.ticks span { color:var(--ash); font-size:clamp(17px, 1.3vw, 19px); }
@media (max-width:900px) { .svc-grid { grid-template-columns:1fr; } .svc-head { position:static; } }

/* how we build: the six stages on a line that fills as you read */
.stages { position:relative; margin-top:clamp(56px, 7vw, 96px); padding-left:clamp(44px, 6vw, 90px); }
.stages::before, .stages::after { content:""; position:absolute; left:6px; top:10px; bottom:10px; width:1px; background:var(--edge); }
.stages::after { background:var(--gold); bottom:auto; height:calc((100% - 20px) * var(--p, 0)); }
html:not(.anim) .stages::after { height:calc(100% - 20px); }
.stage { position:relative; display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 6fr); gap:16px clamp(32px, 5vw, 90px); padding:0 0 clamp(56px, 7vw, 100px); }
.stage::before {
  content:""; position:absolute; left:calc(-1 * clamp(44px, 6vw, 90px) + 1px); top:8px; width:11px; height:11px; border-radius:50%;
  background:var(--black); border:1px solid rgba(245,242,234,.4); transition:background .5s, border-color .5s, box-shadow .5s;
}
.stage.reached::before, html:not(.anim) .stage::before { background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 6px rgba(212,175,55,.14); }
.stage .sn { font:500 13px/1 var(--sans); letter-spacing:.18em; color:var(--ash); text-transform:uppercase; }
.stage h3 { font:400 clamp(34px, 4vw, 58px)/1.05 var(--serif); margin:14px 0 0; letter-spacing:-.02em; }
.stage .tag { font:400 clamp(22px, 2vw, 28px)/1.3 var(--serif); color:var(--gold); margin:0 0 14px; }
.stage p:not(.tag) { margin:0; color:var(--ash); font-size:clamp(18px, 1.4vw, 20px); max-width:46ch; }
@media (max-width:860px) { .stage { grid-template-columns:1fr; } }

.care { border-top:1px solid var(--edge); }
.care-grid { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:32px 64px; align-items:end; }
.care p.big2 { font:400 clamp(26px, 2.8vw, 40px)/1.35 var(--serif); margin:28px 0 0; max-width:32ch; }
.care-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:end; }
.plans { list-style:none; margin:0; padding:0; border-top:1px solid var(--edge); }
.plans li { display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:22px 0; border-bottom:1px solid var(--edge); }
.plans span { font:500 13px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ash); }
.plans span em { display:block; font:400 16px/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--bone); opacity:.75; margin-top:8px; font-style:normal; }
.plans b { font:400 clamp(32px, 3.4vw, 50px)/1 var(--serif); color:var(--gold); white-space:nowrap; font-variant-numeric:lining-nums; }
.plans b small { font:500 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ash); margin-right:10px; vertical-align:.6em; }
.plans b i { font-style:normal; font-size:.42em; color:var(--ash); }
.plans b.q { font-size:clamp(19px, 1.6vw, 24px); color:var(--bone); white-space:normal; text-align:right; max-width:20ch; line-height:1.3; }
@media (max-width:860px) { .care-grid { grid-template-columns:1fr; } }

/* ==== Phone menu ============================================= */
.menu-btn { display:none; appearance:none; background:none; border:0; color:var(--bone); cursor:pointer; padding:10px 0 10px 12px; font:500 14px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.menu-btn i { display:inline-block; width:22px; height:9px; margin-left:12px; vertical-align:middle; border-top:1px solid; border-bottom:1px solid; transition:transform .5s var(--slow); }
@media (max-width:640px) { .menu-btn { display:inline-block; } nav .to-hire { display:none; } }
#menu {
  position:fixed; inset:0; z-index:45; background:var(--black); padding:120px var(--gut) 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s cubic-bezier(.76,0,.24,1); visibility:hidden;
}
html.menu-open #menu { clip-path:inset(0 0 0 0); visibility:visible; }
html.menu-open body { overflow:hidden; }
html.menu-open .menu-btn i { transform:scaleY(.2); }
#menu a.m { display:block; overflow:hidden; text-decoration:none; font:400 clamp(44px, 12vw, 64px)/1.15 var(--serif); letter-spacing:-.02em; }
#menu a.m span { display:inline-block; transform:translateY(105%); transition:transform .8s var(--slow); transition-delay:calc(.25s + var(--i) * .07s); }
html.menu-open #menu a.m span { transform:none; }
#menu a.m[aria-current] { color:var(--gold); }
#menu .m-foot { color:var(--ash); font-size:16px; }
#menu .m-foot a { color:var(--bone); }

/* ==== Scenes: a photograph behind a section, never flat black ===== */
.scene { position:relative; isolation:isolate; overflow:hidden; border-top:0 !important; }
.scene > .sbg { position:absolute; inset:-12% 0; z-index:-2; }
.scene > .sbg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scene > .sbg.sw img { opacity:0; transform:scale(1.06); transition:opacity 1.2s var(--slow), transform 7s linear; }
.scene > .sbg.sw img.on { opacity:1; transform:scale(1); }
.scene::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.35) 100%),
    linear-gradient(#000, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, #000);
}
.scene.dim::before {
  background:
    linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)),
    linear-gradient(#000, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, #000);
}
@media (max-width:760px) {
  .scene::before { background: linear-gradient(rgba(0,0,0,.66), rgba(0,0,0,.66)), linear-gradient(#000, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, #000); }
}

/* ==== What we build: a showcase you steer =================== */
.show { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(40px, 6vw, 110px); margin-top:clamp(56px, 7vw, 96px); align-items:start; }
.tabs { list-style:none; margin:0; padding:0; }
.tabs button {
  appearance:none; background:none; border:0; color:rgba(245,242,234,.34); cursor:pointer; width:100%; text-align:left;
  display:flex; align-items:baseline; gap:20px; padding:clamp(14px, 1.6vw, 22px) 0; position:relative;
  font:400 clamp(38px, 4.6vw, 72px)/1.02 var(--serif); letter-spacing:-.02em; transition:color .5s;
}
.tabs button .n { font:500 13px/1 var(--sans); letter-spacing:.14em; color:var(--ash); min-width:2ch; transform:translateY(-.9em); }
.tabs button::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(245,242,234,.14); }
.tabs button i { position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; z-index:1; }
.tabs button:hover { color:rgba(245,242,234,.7); }
.tabs button[aria-selected="true"] { color:var(--bone); }
.tabs button[aria-selected="true"] i { transform:scaleX(1); transition:transform .8s var(--slow); }
.show.auto .tabs button[aria-selected="true"] i { transform:scaleX(1); transition:none; animation:fill 7s linear; }
@keyframes fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.tabs button:focus-visible { outline:2px solid var(--gold); outline-offset:6px; }
.panels { display:grid; padding-top:clamp(10px, 1.6vw, 24px); }
.panel { grid-area:1 / 1; opacity:0; visibility:hidden; transform:translateY(24px); transition:opacity .6s var(--slow), transform .9s var(--slow), visibility 0s .6s; }
.panel.on { opacity:1; visibility:visible; transform:none; transition:opacity .8s var(--slow) .15s, transform 1s var(--slow) .15s, visibility 0s; }
.panel .pitch { font:400 clamp(30px, 3.2vw, 48px)/1.15 var(--serif); letter-spacing:-.015em; margin:0; }
.panel .pdesc { font-size:clamp(18px, 1.4vw, 21px); color:#ddd8cd; margin:22px 0 0; max-width:46ch; }
.panel .pgets { list-style:none; margin:30px 0 0; padding:0; display:grid; gap:12px; }
.panel .pgets li { display:flex; gap:14px; align-items:baseline; font-size:clamp(17px, 1.3vw, 19px); }
.panel .pgets li::before { content:""; flex:none; width:18px; height:1px; background:var(--gold); transform:translateY(-.3em); }
.panel .pfoot { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 40px; margin-top:clamp(36px, 4vw, 56px); padding-top:26px; border-top:1px solid rgba(245,242,234,.18); }
.panel .pprice { margin:0; font:400 clamp(44px, 4.6vw, 70px)/1 var(--serif); color:var(--gold); font-variant-numeric:lining-nums; }
.panel .pprice small { display:block; font:500 12px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ash); margin-bottom:12px; }
.panel .pprice span:not(.num) { font:400 17px/1.3 var(--sans); color:var(--ash); display:block; margin-top:10px; }
.panel .more { margin-top:0; }
@media (max-width:900px) {
  .show { grid-template-columns:1fr; gap:30px; }
  .tabs { display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--gut)); padding:0 var(--gut); }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs button { width:auto; white-space:nowrap; font-size:clamp(26px, 7vw, 34px); gap:10px; }
  .tabs button .n { display:none; }
}

/* ==== Principles: large panels that travel sideways ========= */
.hscroll { position:relative; height:calc(100vh + var(--n, 7) * 55vh); }
.hscroll .pin { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; gap:clamp(36px, 5vh, 64px); overflow:hidden; }
.hscroll .pin > .sbg { inset:0; }
.hscroll .head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; width:100%; }
.hscroll .head h2 { margin-top:18px; }
.hscroll .count { font:400 clamp(22px, 2vw, 28px)/1 var(--serif); color:var(--ash); font-variant-numeric:tabular-nums; white-space:nowrap; }
.hscroll .count b { color:var(--gold); font-weight:400; }
.track { display:flex; gap:0; padding-left:max(var(--gut), calc((100vw - 1280px) / 2 + var(--gut))); padding-right:max(var(--gut), calc((100vw - 1280px) / 2 + var(--gut))); scroll-padding-left:var(--gut); will-change:transform; }
.track::after { content:""; flex:0 0 var(--gut); }
.hp { flex:0 0 clamp(300px, 31vw, 480px); padding:6px clamp(26px, 3vw, 48px) 6px 0; margin-right:clamp(26px, 3vw, 48px); border-right:1px solid rgba(245,242,234,.2); }
.hp .hn { display:block; font:400 clamp(56px, 6vw, 92px)/.9 var(--serif); color:transparent; -webkit-text-stroke:1px rgba(212,175,55,.75); letter-spacing:-.02em; }
.hp h3 { font:400 clamp(30px, 3vw, 46px)/1.08 var(--serif); letter-spacing:-.015em; margin:26px 0 16px; }
.hp p { margin:0; color:#d6d1c6; font-size:clamp(17px, 1.3vw, 20px); max-width:32ch; }
a.hp.end { border-right:0; text-decoration:none; display:flex; flex-direction:column; justify-content:flex-end; }
a.hp.end h3 { margin-top:0; }
a.hp.end h3 i { font-style:normal; color:var(--gold); display:inline-block; transition:transform .6s var(--slow); }
a.hp.end:hover h3 i { transform:translateX(10px); }
.hbar { position:relative; height:1px; background:rgba(245,242,234,.18); }
.hbar i { position:absolute; inset:0; background:var(--gold); transform:scaleX(var(--p, 0)); transform-origin:left; }
html:not(.anim) .hscroll, .hscroll.flat { height:auto; }
html:not(.anim) .hscroll .pin, .hscroll.flat .pin { position:relative; height:auto; padding:clamp(90px, 14vw, 200px) 0; }
.hscroll.flat .hp { border-right:1px solid rgba(245,242,234,.2); }
html:not(.anim) .track, .hscroll.flat .track { overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
html:not(.anim) .hp, .hscroll.flat .hp { scroll-snap-align:start; flex-basis:min(78vw, 420px); }
html:not(.anim) .hbar, .hscroll.flat .hbar, .hscroll.flat .count { display:none; }