:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}img{max-width:100%}[hidden]{display:none!important}
/* Layout: editorial studio in navy, cream and dull gold. Full-bleed photo hero with text over it, hairline rules below, Archivo headings with a wide stance. */
:root{
  --bg:#f4eee2; --paper:#fbf8f1; --ink:#15213b; --muted:#56607a; --faint:#8a8b8f; --line:rgba(21,33,59,.14); --line-soft:rgba(21,33,59,.08);
  --accent:#a8864f; --accent-soft:#ece2cc; --cream:#f4eee2; --navy-deep:#0f1a31;
  --volt:var(--accent); --lime:var(--accent-soft); --coral:#c8323f; --glass:#ffffff;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-stretch:112%;font-weight:600;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.025em}
.label{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
#bgfx{display:none}
#app{position:relative}

.cur,.cur-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:200;border-radius:50%}
.cur{width:30px;height:30px;border:1px solid var(--ink);display:grid;place-items:center;font:500 10px var(--mono);letter-spacing:.14em;color:#fff;opacity:.5;transition:width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),background .3s,opacity .3s,border-color .3s}
.cur.big{width:78px;height:78px;background:var(--ink);opacity:1;border-color:var(--ink)}
.cur.link{width:44px;height:44px;opacity:.35}
.cur.hide,.cur-dot.hide{opacity:0}
.cur-dot{width:4px;height:4px;background:var(--ink)}
@media (pointer:coarse){.cur,.cur-dot{display:none}}
body.has-cursor #app, body.has-cursor #app a, body.has-cursor #app button, body.has-cursor .lb, body.has-cursor .lb button{cursor:none}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(244,238,226,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap}
.logo svg{width:30px;height:30px;flex:none}
.logo span{font:600 14px var(--display);font-stretch:118%;letter-spacing:.14em}
.logo span b{font-weight:400;color:var(--muted)}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:14px}
.nav ul a{text-decoration:none;color:var(--muted);transition:color .2s} .nav ul a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--ink);border-radius:2px;padding:12px 20px;font:500 14px var(--body);letter-spacing:.01em;text-decoration:none;cursor:pointer;background:var(--ink);color:#fff;transition:background .2s,color .2s}
.btn:hover{background:#22304f}
.btn.gold{background:var(--accent);border-color:var(--accent);color:var(--navy-deep)}.btn.gold:hover{background:#b99662}
.btn.light{background:transparent;border-color:rgba(244,238,226,.7);color:var(--cream)}.btn.light:hover{background:var(--cream);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.sm{padding:9px 16px;font-size:13px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:920px){.nav ul{display:none}}

.hero{padding-block:clamp(48px,8vw,104px) 0}
.hero-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.hero h1{font-size:clamp(40px,6.4vw,88px);margin-top:18px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-copy p{font-size:clamp(16px,1.35vw,18px);color:var(--muted);margin:0 0 26px;max-width:44ch}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.reel{position:relative;margin-top:clamp(36px,5vw,64px);aspect-ratio:21/9;max-width:100%;overflow:hidden;background:#e3dccd;cursor:pointer}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.reel:hover img{transform:scale(1.05)}
.reel-cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:end;gap:12px;padding:clamp(14px,2.4vw,28px);background:linear-gradient(transparent,rgba(10,12,18,.55));color:#fff}
.reel-cap .label{color:rgba(255,255,255,.85)}
.playbig{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--ink);border:0;border-radius:2px;padding:11px 18px 11px 14px;font:500 14px var(--body);cursor:pointer}
.playbig i{width:0;height:0;border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}
@media (max-width:860px){.hero-top{grid-template-columns:1fr}.reel{aspect-ratio:4/3}}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.stat{padding:26px 0 26px 22px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat strong{display:block;font:600 clamp(26px,3vw,38px)/1.1 var(--display);font-stretch:112%;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{color:var(--muted);font-size:14px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(3){border-left:0;padding-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}

section{padding-block:clamp(72px,10vw,128px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{font-size:clamp(32px,4.4vw,56px);margin-top:14px}
.sec-head p{color:var(--muted);max-width:46ch;margin:0;justify-self:end}
@media (max-width:760px){.sec-head{grid-template-columns:1fr}.sec-head p{justify-self:start}}

.filters{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:26px;border-bottom:1px solid var(--line)}
.chip{border:0;background:none;padding:0 0 12px;margin-bottom:-1px;border-bottom:2px solid transparent;font:500 14px var(--body);cursor:pointer;color:var(--muted)}
.chip em{font-style:normal;font:400 11px var(--mono);margin-left:6px;color:var(--faint)}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px;grid-auto-flow:dense;gap:12px}
.tile{position:relative;display:block;overflow:hidden;border:0;padding:0;cursor:pointer;text-align:left;background:#e3dccd;text-decoration:none;color:var(--ink)}
.tile.wide{grid-column:span 2}.tile.tall{grid-row:span 2}.tile.big{grid-column:span 2;grid-row:span 2}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.tile:hover img,.tile:hover video{transform:scale(1.04)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:end;gap:10px;padding:40px 14px 12px;background:linear-gradient(transparent,rgba(10,12,18,.6));color:#fff;font-size:13px;font-weight:500;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1;transform:none}
@media (hover:none){.tile .cap{opacity:1;transform:none}}
.tile .cap span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{flex:none;font:400 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.play{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;z-index:2}
.play::after{content:"";border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.igbadge{position:absolute;top:12px;right:12px;z-index:2;background:rgba(255,255,255,.92);color:var(--ink);font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px}
.tile.ig{background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:20px}
.tile.ig .igmark{width:30px;height:30px;border-radius:9px;border:1.5px solid #fff;position:relative;opacity:.8}
.tile.ig .igmark::before{content:"";position:absolute;inset:7px;border:1.5px solid #fff;border-radius:50%}
.tile.ig h3{font-size:clamp(18px,1.6vw,22px);color:#fff}
.tile.ig small{font:400 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.tile.ig.has-cover{padding:0}
.tile.hide{display:none}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px;gap:8px}}
@media (max-width:520px){.tile.wide,.tile.big{grid-column:span 2}}

.ba{position:relative;aspect-ratio:21/9;max-width:100%;overflow:hidden;user-select:none;background:#e3dccd}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 50%)}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#fff;transform:translateX(-50%);pointer-events:none}
.ba .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font:500 14px var(--body);color:var(--ink);box-shadow:0 4px 18px rgba(0,0,0,.18)}
.ba .lab{position:absolute;top:16px;font:400 10px var(--mono);letter-spacing:.14em;background:rgba(18,21,29,.72);color:#fff;padding:6px 10px;pointer-events:none}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
@media (max-width:600px){.ba{aspect-ratio:4/3}}

.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.card{padding:28px 28px 34px 0;border-bottom:1px solid var(--line);display:grid;gap:10px;align-content:start;min-width:0}
.card:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--line)}
.card .ico{font:400 11px var(--mono);letter-spacing:.14em;color:var(--faint)}
.card h3{font-size:20px}
.card p{margin:0;color:var(--muted);font-size:15px;max-width:34ch}
@media (max-width:900px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}.card:not(:nth-child(3n+1)){padding-left:0;border-left:0}.card:nth-child(2n){padding-left:24px;border-left:1px solid var(--line)}}
@media (max-width:560px){.svc{grid-template-columns:1fr}.card:nth-child(2n){padding-left:0;border-left:0}}

.toggle{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);background:var(--paper);padding:3px}
.toggle button{border:0;background:transparent;padding:8px 14px;font:500 13px var(--body);cursor:pointer;color:var(--muted)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);background:var(--paper)}
.plan{position:relative;padding:34px 30px;display:flex;flex-direction:column;gap:18px;min-width:0}
.plan+.plan{border-left:1px solid var(--line)}
.plan.hot{box-shadow:inset 0 3px 0 var(--accent)}
.badge{align-self:flex-start;font:500 10px var(--mono);letter-spacing:.14em;color:var(--accent);text-transform:uppercase;margin-bottom:-8px}
.plan h3{font-size:22px}
.price{font:600 44px/1 var(--display);font-stretch:108%;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.price small{font:400 12px var(--mono);letter-spacing:.1em;margin-left:8px;color:var(--faint)}
.muted{color:var(--muted)}
.plan ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line-soft);display:grid;gap:10px;font-size:15px}
.plan li{display:flex;gap:12px;color:#2c303b}
.plan li::before{content:"";flex:none;width:12px;height:1px;background:var(--ink);margin-top:12px}
.plan .btn{margin-top:auto}
.plan:not(.hot) .btn{background:transparent;color:var(--ink)}
.plan:not(.hot) .btn:hover{background:var(--ink);color:#fff}
.addons{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:26px;font-size:14px;color:var(--muted)}
.addons b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.pnote{font:400 11px var(--mono);letter-spacing:.06em;color:var(--faint);margin:18px 0 0}
@media (max-width:900px){.plans{grid-template-columns:1fr}.plan+.plan{border-left:0;border-top:1px solid var(--line)}}

.bld{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.bld-list{border-top:1px solid var(--line)}
.bi{display:flex;align-items:center;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line);min-width:0;transition:background .2s}
.bi:hover{background:rgba(255,255,255,.6)}
.bi input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;border:1px solid var(--ink);border-radius:2px;display:grid;place-items:center;margin:0;cursor:pointer;background:var(--paper)}
.bi input[type=checkbox]:checked{background:var(--ink)}
.bi input[type=checkbox]:checked::after{content:"";width:8px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.bi label{flex:1;min-width:0;display:grid;gap:2px;font-size:15px;line-height:1.35;cursor:pointer}
.bi label small{font:400 10px var(--mono);letter-spacing:.12em;color:var(--faint)}
.bi .bp{font:500 15px var(--body);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:64px;text-align:right}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:24px;height:24px;border:1px solid var(--line);background:var(--paper);font:500 14px var(--body);color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0;border-radius:2px}
.qty output{min-width:18px;text-align:center;font:500 14px var(--body);font-variant-numeric:tabular-nums}
.bld-sum{position:sticky;top:calc(92px + env(safe-area-inset-top,0px));background:var(--paper);border:1px solid var(--line);padding:28px;display:grid;gap:16px}
.bld-sum h3{font-size:20px}
.bld-sum label{display:grid;gap:6px}
.bld-sum select{font:500 14px var(--body);border:1px solid var(--line);border-radius:2px;padding:10px 12px;background:var(--bg);color:var(--ink);width:100%}
.bld-sum ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.bld-sum li{display:flex;justify-content:space-between;gap:10px}
.bld-sum li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.bld-sum .empty{color:var(--faint)}
.bld-sum .tot{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:6px;font-size:14px;color:var(--muted)}
.bld-sum .tot div{display:flex;justify-content:space-between}
.bld-sum .big{font:600 40px/1 var(--display);font-stretch:108%;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bld-sum .big small{font:400 12px var(--mono);letter-spacing:.1em;margin-left:8px;color:var(--faint)}
.bld-sum .save{color:var(--accent)}
@media (max-width:980px){.bld{grid-template-columns:1fr}.bld-sum{position:static}}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:s}
.step{border-top:1px solid var(--ink);padding-top:18px;min-width:0}
.step b{font:400 11px var(--mono);letter-spacing:.14em;color:var(--faint)}
.step h3{font-size:18px;margin:10px 0 6px}
.step p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:760px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}

.contact{margin-block:clamp(72px,10vw,128px) 0;background:var(--ink);color:var(--cream);padding:clamp(28px,6vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px)}
.contact h2{font-size:clamp(32px,4.4vw,56px);margin-top:14px}
.contact p{color:rgba(255,255,255,.7);max-width:40ch}
.contact .label{color:var(--accent)}
.direct{display:grid;margin-top:30px;border-top:1px solid rgba(255,255,255,.14)}
.direct div{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.direct span{font:400 10px var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.5);width:84px}
.direct strong{font-weight:500;user-select:all;font-size:16px;flex:1;min-width:0;overflow-wrap:anywhere}
.direct a{color:#fff;text-decoration:none}
.copy{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:2px;padding:5px 10px;font:500 12px var(--body);cursor:pointer}
.qform{background:var(--paper);color:var(--ink);padding:clamp(20px,3vw,32px);display:grid;gap:14px;min-width:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qform label{font:400 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:grid;gap:6px}
.qform input,.qform select,.qform textarea{font:400 15px var(--body);letter-spacing:0;text-transform:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:8px 0 10px;background:transparent;color:var(--ink);width:100%}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:0;border-bottom-color:var(--ink)}
.qform textarea{min-height:80px;resize:vertical}
.err{color:var(--coral);font-size:13px;min-height:1em;margin:0}
.ok{background:var(--accent-soft);padding:18px;display:grid;gap:10px}
.ok pre{white-space:pre-wrap;font:400 12px var(--mono);margin:0;background:#fff;padding:12px;overflow-wrap:anywhere}
@media (max-width:860px){.contact{grid-template-columns:1fr}.row{grid-template-columns:1fr}}
footer{padding-block:28px 56px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px}
footer .logo svg{width:22px;height:22px}

.lb{position:fixed;inset:0;z-index:150;background:rgba(15,26,49,.96);display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top,0px)) 16px 20px}
.lb-in{width:min(1160px,100%);display:grid;gap:16px;max-height:100%}
.stage{position:relative;display:grid;place-items:center;max-height:80vh}
.stage img,.stage video{max-width:100%;max-height:80vh;display:block;background:#000}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#fff;flex-wrap:wrap}
.lb-bar h3{font-size:18px}
.lb-bar .label{color:rgba(255,255,255,.55)}
.lb-nav{display:flex;gap:6px}
.lb-nav button{width:42px;height:42px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:400 16px var(--body);cursor:pointer;border-radius:2px}
.lb-nav button:hover{background:rgba(255,255,255,.1)}

.reveal{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.pre{transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal.pre{transform:none}}
.card-img{aspect-ratio:4/3;overflow:hidden;background:#e3dccd;margin-bottom:10px}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-img img{transform:scale(1.04)}
.faq{border-top:1px solid var(--line);max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font:500 18px var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 24px/1 var(--body);color:var(--muted);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--muted);max-width:62ch}
footer .logo{white-space:normal;align-items:flex-start}footer .logo svg{margin-top:1px}

.hero-full{position:relative;display:flex;align-items:flex-end;min-height:clamp(540px,82vh,860px);overflow:hidden;background:var(--navy-deep);color:var(--cream)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,26,49,.92) 0%,rgba(15,26,49,.55) 45%,rgba(15,26,49,.18) 100%)}
.hero-inner{position:relative;width:100%;padding-block:clamp(120px,16vw,200px) clamp(48px,7vw,88px)}
.hero-inner .label{color:var(--accent)}
.hero-inner h1{font-size:clamp(52px,9vw,124px);margin-top:18px;color:var(--cream);max-width:11ch}
.hero-inner h1 em{font-style:normal;color:var(--accent)}
.hero-inner p{font-size:clamp(16px,1.4vw,19px);color:rgba(244,238,226,.82);max-width:48ch;margin:22px 0 30px}
.hero-inner .ctas{align-items:center}
.playlink{display:inline-flex;align-items:center;gap:12px;background:none;border:0;color:var(--cream);font:500 14px var(--body);cursor:pointer;padding:12px 6px;margin-left:6px}
.playlink i{width:36px;height:36px;border-radius:50%;border:1px solid rgba(244,238,226,.6);display:grid;place-items:center}
.playlink i::after{content:"";border-left:8px solid var(--cream);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.playlink:hover i{background:var(--accent);border-color:var(--accent)}
.hero-cap{position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(20px,3vw,32px);color:rgba(244,238,226,.6)}
.stats{margin-top:0}
@media (max-width:640px){.hero-cap{display:none}}
body{margin:0}
.btn{white-space:nowrap}
.hero-inner .label{color:#dcc497}
.hero-inner h1 em{color:#c9a86c}
.hero-shade{background:linear-gradient(to top,rgba(15,26,49,.94) 0%,rgba(15,26,49,.62) 50%,rgba(15,26,49,.22) 100%)}
@media (max-width:440px){.logo span{display:none}}
.hero-bg{object-position:50% 40%}
/* hero: subject (house) lives on the left, copy sits on the right over road and sky */
.hero-bg{object-position:20% 55%}
.hero-shade{background:linear-gradient(to left,rgba(15,26,49,.92) 0%,rgba(15,26,49,.78) 30%,rgba(15,26,49,.25) 58%,rgba(15,26,49,0) 75%),linear-gradient(to top,rgba(15,26,49,.35),transparent 30%)}
.hero-inner{display:flex;justify-content:flex-end}
.hero-copy-box{width:min(520px,100%)}
.hero-inner h1{font-size:clamp(48px,6.2vw,96px);max-width:none}
.hero-inner p{max-width:42ch}
.hero-cap{right:auto;left:clamp(16px,4vw,48px)}
@media (max-width:820px){
  .hero-full{display:block;min-height:0}
  .hero-bg{position:relative;display:block;height:auto;aspect-ratio:4/3;object-position:22% 60%;animation:none}
  .hero-shade{display:none}
  .hero-inner{padding-block:36px 48px}
  .hero-copy-box{width:100%}
  .hero-cap{display:none}
}
.hero-full{padding:0}
/* no navy overlay: legibility comes from soft shadows on the type only */
.hero-shade{display:none}
.hero-inner .label{color:#fff3d6;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.hero-inner h1{text-shadow:0 2px 30px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.35)}
.hero-inner h1 em{color:#e0bd7d}
.hero-inner p{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5)}
.playlink{text-shadow:0 1px 10px rgba(0,0,0,.6)}
.playlink i{background:rgba(15,26,49,.35)}
.btn.light{background:rgba(15,26,49,.25);border-color:#fff;color:#fff}
.hero-cap{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* soft neutral spot behind the copy only; photo stays bright and uncoloured */
.hero-shade{display:block;background:radial-gradient(ellipse 46% 62% at 78% 58%,rgba(0,0,0,.46) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,0) 100%)}
@media (max-width:820px){.hero-shade{display:none}}
/* phone hero: shorter photo that fades into navy, headline overlaps the fade so photo, headline and buttons all fit the first screen */
@media (max-width:820px){
  .hero-full{background:var(--ink)}
  .hero-bg{aspect-ratio:16/11;object-position:40% 72%}
  .hero-shade{display:block;inset:auto 0 auto 0;top:0;height:calc(100vw * 11 / 16);background:linear-gradient(to bottom,rgba(21,33,59,0) 55%,rgba(21,33,59,.7) 82%,var(--ink) 100%)}
  .hero-inner{margin-top:-64px;padding-block:0 40px}
  .hero-inner .label,.hero-inner h1,.hero-inner p,.playlink{text-shadow:none}
  .hero-inner h1{font-size:clamp(44px,13vw,64px);margin-top:10px}
  .hero-inner p{font-size:15px;margin:14px 0 22px;color:rgba(244,238,226,.8)}
  .hero-inner .label{color:#dcc497}
  .btn.light{background:transparent}
  .hero-inner .ctas .btn{flex:1}
  .playlink{margin-left:0;padding-left:0}
}
section[id],.contact{scroll-margin-top:84px}