:root {
  --bg:#04060a; --ink:#eef1f7; --muted:#9aa3b5; --soft:#c2cadb;
  --accent:#9bbcff; --line:rgba(155,188,255,.16); --line2:rgba(238,241,247,.09); --panel:#080b12;
  --display:"Jost","Helvetica Neue",Arial,sans-serif; --text:"Inter","Segoe UI",system-ui,sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--text); font-weight:300; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; }
::selection { background:rgba(155,188,255,.3); }

#gl { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }
.vig { position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse at 50% 48%, transparent 48%, rgba(0,0,0,.7) 100%); }

/* header */
.top { position:fixed; inset:0 0 auto 0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:20px 40px; transition:background .5s, padding .5s, border-color .5s; border-bottom:1px solid transparent; }
.top.solid { background:rgba(4,6,10,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:14px 40px; border-bottom-color:var(--line2); }
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand .em { height:38px; width:auto; }
.brand .wm { height:36px; width:auto; transition:height .4s; }
.top.solid .brand .wm { height:30px; }
.top.solid .brand .em { height:32px; }
.top { transition:background .5s, padding .5s, border-color .5s; }
.top nav { display:flex; align-items:center; gap:36px; font-family:var(--display); font-size:12px; letter-spacing:.24em; text-transform:uppercase; font-weight:400; }
.top nav a { text-decoration:none; color:var(--muted); position:relative; padding:6px 0; transition:color .3s; }
.top nav a:not(.cta)::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent); transition:right .4s; }
.top nav a:not(.cta):hover { color:#fff; }
.top nav a:not(.cta):hover::after { right:0; }
.top nav .cta { color:#fff; border:1px solid rgba(238,241,247,.35); padding:11px 20px; transition:background .35s, color .35s, border-color .35s; }
.top nav .cta:hover { background:#fff; color:#04060a; border-color:#fff; }

/* buttons */
.btn { display:inline-block; background:#fff; color:#04060a !important; text-decoration:none; border:1px solid #fff; cursor:pointer; padding:17px 38px; font:400 12px/1 var(--display); letter-spacing:.3em; text-transform:uppercase; transition:background .35s, color .35s, border-color .35s; }
.btn:hover { background:transparent; color:#fff !important; border-color:rgba(255,255,255,.7); }
.btn.outline { background:transparent; color:#fff !important; border-color:rgba(238,241,247,.45); }
.btn.outline:hover { background:#fff; color:#04060a !important; border-color:#fff; }

#load { position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; justify-content:center; padding-bottom:12vh; pointer-events:none; font-family:var(--display); font-size:11px; letter-spacing:.5em; text-transform:uppercase; color:var(--accent); transition:opacity .8s; }
#load.off { opacity:0; }
#pct { margin-left:.8em; }

/* 3D story */
#story { position:relative; z-index:2; opacity:0; transition:opacity 1s .3s; }
body.ready #story { opacity:1; }
.panel { position:relative; height:100vh; height:100dvh; display:flex; align-items:center; padding:0 8vw; }
#story { touch-action:none; }
.panel::before { content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .8s; pointer-events:none; }
.panel.in::before { opacity:1; }
.panel.left::before { background:linear-gradient(90deg, rgba(4,6,10,.92) 0%, rgba(4,6,10,.6) 36%, transparent 62%); }
.panel.right::before { background:linear-gradient(270deg, rgba(4,6,10,.92) 0%, rgba(4,6,10,.6) 36%, transparent 62%); }
.panel.center::before { background:radial-gradient(ellipse at center, rgba(4,6,10,.8) 0%, rgba(4,6,10,.45) 40%, transparent 70%); }
.panel.left { justify-content:flex-start; }
.panel.right { justify-content:flex-end; text-align:right; }
.panel.center { justify-content:center; text-align:center; }
.panel > div { max-width:min(470px, 86vw); opacity:0; transform:translateY(28px); transition:opacity 1s, transform 1s; }
.panel.in > div { opacity:1; transform:none; }
.eyebrow { font-family:var(--display); font-size:11px; letter-spacing:.5em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; font-weight:400; }
.panel h1 { font-family:var(--display); font-size:clamp(46px,7.4vw,96px); line-height:1; font-weight:200; letter-spacing:-.01em; color:#fff; }
.panel h2 { font-family:var(--display); font-size:clamp(30px,4.2vw,54px); line-height:1.08; font-weight:300; color:#fff; }
.panel h1, .panel h2, .panel p { text-shadow:0 2px 28px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.6); }
.panel p { margin-top:18px; color:var(--soft); font-size:clamp(15px,1.4vw,17px); }
.panel .eyebrow { margin-top:0; }
.panel .price { color:var(--muted); margin:20px 0 30px; font-size:14px; letter-spacing:.3em; text-transform:uppercase; }
.panel .price strong { display:block; margin-top:6px; font-family:var(--display); font-size:clamp(38px,5.4vw,66px); color:#fff; font-weight:200; letter-spacing:0; text-transform:none; }
.scroll { display:inline-block; margin-top:40px; font-family:var(--display); font-size:10px; letter-spacing:.5em; text-transform:uppercase; color:var(--muted); animation:bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform:translateY(7px); opacity:.45; } }

/* after the story */
.after { position:relative; z-index:3; background:var(--bg); }
.after::before { content:""; position:absolute; left:0; right:0; top:-26vh; height:26vh; background:linear-gradient(transparent, var(--bg)); pointer-events:none; }
.after::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.wrap { width:min(1180px, 100% - 64px); margin-inline:auto; }

html:not(.js) .r { opacity:1; transform:none; }
.r { opacity:0; transform:translateY(34px); transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d, 0s); }
.r.in { opacity:1; transform:none; }

.statement { padding:170px 0 110px; text-align:center; }
.statement h2 { font-family:var(--display); font-weight:200; font-size:clamp(34px,5.6vw,76px); line-height:1.1; color:#fff; letter-spacing:-.01em; }
.statement h2 em { font-style:normal; background:linear-gradient(100deg, #fff 0%, #9bbcff 60%, #fff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.statement .eyebrow { margin-bottom:28px; }

/* our story */
.about { padding:150px 0 130px; position:relative; overflow-x:clip; border-top:1px solid var(--line2); }
.about::before { content:""; position:absolute; left:-10%; top:8%; width:60%; height:70%; background:radial-gradient(ellipse, rgba(61,123,255,.09), transparent 65%); pointer-events:none; }
.about-grid { display:grid; grid-template-columns:5fr 6fr; gap:90px; align-items:start; position:relative; }
.about-side { position:sticky; top:20vh; }
.about-side .sec { max-width:460px; margin-bottom:0; }
.greek { font-family:"Noto Serif Display",Georgia,serif; font-weight:200; font-size:clamp(84px,11vw,168px); line-height:1.05; margin:44px 0 6px -4px; letter-spacing:-.01em;
  background:linear-gradient(180deg, #fff 8%, rgba(155,188,255,.28) 95%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gloss { font-family:var(--display); font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); }
.gloss em { font-style:normal; color:var(--accent); }
.chapters { padding-top:6px; }
.chap { padding:54px 0; border-top:1px solid var(--line2); display:grid; grid-template-columns:56px 1fr; column-gap:18px; }
.chap:last-child { border-bottom:1px solid var(--line2); }
.chap .n { font-family:"Noto Serif Display",serif; font-weight:200; font-size:22px; color:var(--accent); line-height:1.3; }
.chap h4 { font-family:var(--display); font-weight:300; font-size:clamp(24px,2.6vw,34px); color:#fff; line-height:1.15; margin-bottom:18px; }
.chap p { grid-column:2; font-size:clamp(16px,1.35vw,19px); color:var(--soft); line-height:1.85; max-width:560px; }
.closing { text-align:center; margin-top:150px; position:relative; }
.closing::before { content:""; position:absolute; left:50%; top:50%; width:760px; height:420px; transform:translate(-50%,-50%); background:radial-gradient(ellipse, rgba(155,188,255,.12), transparent 66%); pointer-events:none; }
.closing p { position:relative; font-family:var(--display); font-weight:200; font-size:clamp(46px,8vw,118px); line-height:1.02; color:#fff; letter-spacing:-.02em; }
.closing em { font-style:normal; background:linear-gradient(100deg, #fff 0%, #9bbcff 55%, #fff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

.head { margin-bottom:56px; }
.sec { font-family:var(--display); font-weight:300; font-size:clamp(30px,4vw,52px); line-height:1.08; color:#fff; }

#features { padding:70px 0 130px; }
.list { list-style:none; border-top:1px solid var(--line2); }
.list li { display:grid; grid-template-columns:90px 1.1fr 1.4fr; align-items:baseline; gap:24px; padding:34px 0; border-bottom:1px solid var(--line2); position:relative; transition:padding .5s, background .5s; }
.list li::after { content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:linear-gradient(90deg, var(--accent), transparent); transition:width .8s; }
.list li:hover { padding-left:14px; }
.list li:hover::after { width:100%; }
.list .n { font-family:var(--display); font-weight:200; font-size:15px; letter-spacing:.3em; color:var(--accent); }
.list h4 { font-family:var(--display); font-weight:300; font-size:clamp(22px,2.4vw,32px); color:#fff; line-height:1.2; }
.list p { color:var(--muted); font-size:15px; max-width:520px; }

.specs-wrap { background:var(--panel); padding:130px 0 120px; border-block:1px solid var(--line2); position:relative; }
.stats { display:grid; grid-template-columns:repeat(4, 1fr); border-block:1px solid var(--line2); margin-bottom:56px; }
.stats > div { padding:50px 26px; border-left:1px solid var(--line2); }
.stats > div:first-child { border-left:0; padding-left:0; }
.stats b { display:block; font-family:var(--display); font-weight:200; font-size:clamp(40px,5.4vw,78px); line-height:1; color:#fff; letter-spacing:-.01em; }
.stats b small { font-size:.2em; letter-spacing:.3em; color:var(--accent); margin-left:.6em; font-weight:400; text-transform:uppercase; }
.stats > div > span { display:block; margin-top:16px; font-family:var(--display); font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--muted); }
.specs { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0 56px; }
.specs div { display:flex; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line2); }
.specs dt { color:var(--muted); font-size:14px; letter-spacing:.06em; }
.specs dd { color:#fff; font-weight:400; }
.fine { margin-top:30px; font-size:12px; color:var(--muted); letter-spacing:.04em; }

.enquire { padding:150px 0 150px; position:relative; overflow:hidden; }
.enquire::before { content:""; position:absolute; left:50%; top:50%; width:900px; height:900px; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(61,123,255,.1), transparent 62%); pointer-events:none; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start; position:relative; }
.enquire .lead { margin-top:26px; color:var(--soft); font-size:17px; max-width:420px; }
.from { margin-top:44px; color:var(--muted); font-family:var(--display); font-size:11px; letter-spacing:.4em; text-transform:uppercase; }
.from strong { display:block; margin-top:8px; font-weight:200; font-size:clamp(34px,4vw,52px); letter-spacing:0; text-transform:none; color:#fff; }
form { display:grid; gap:26px; }
label { display:grid; gap:4px; }
label > span { font-family:var(--display); font-size:10px; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); }
label small { text-transform:none; letter-spacing:0; }
input, textarea { font:300 17px var(--text); padding:10px 0 12px; background:transparent; color:#fff; border:0; border-bottom:1px solid rgba(238,241,247,.22); border-radius:0; transition:border-color .35s; resize:vertical; }
input:focus, textarea:focus { outline:0; border-bottom-color:var(--accent); }
form .btn { justify-self:start; margin-top:10px; }
.hp { position:absolute; left:-9999px; }
#status { min-height:1.4em; font-size:14px; color:var(--muted); }
#status.ok { color:#8fd19e; }
#status.err { color:#ff9b9b; }

footer { padding:56px 0 50px; display:flex; flex-direction:column; align-items:center; gap:22px; border-top:1px solid var(--line2); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-family:var(--display); position:relative; }
footer img { height:52px; width:auto; opacity:.92; }

@media (max-width:1040px) {
  .top nav a:not(.cta) { display:none; }
}
@media (max-width:860px) {
  .top, .top.solid { padding-inline:20px; }
  .about-grid { grid-template-columns:1fr; gap:40px; }
  .about-side { position:static; }
  .chap { grid-template-columns:40px 1fr; padding:40px 0; }
  .closing { margin-top:100px; }
  .list li { grid-template-columns:48px 1fr; }
  .list p { grid-column:2; }
  .stats { grid-template-columns:repeat(2, 1fr); }
  .stats > div:nth-child(3) { border-left:0; padding-left:0; }
  .stats > div:nth-child(n+3) { border-top:1px solid var(--line2); }
  .two { grid-template-columns:1fr; gap:56px; }
  .panel { align-items:flex-end; padding-bottom:12vh; }
  .panel.left, .panel.right, .panel.center { justify-content:flex-start; text-align:left; }
  .panel.left::before, .panel.right::before, .panel.center::before { background:linear-gradient(0deg, rgba(4,6,10,.95) 0%, rgba(4,6,10,.7) 34%, transparent 62%); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .panel > div, .scroll, .r { transition:none; animation:none; } .r { opacity:1; transform:none; } }