:root{color-scheme:dark;--bg:#10110f;--ink:#f2eee5;--muted:#acaea2;--gold:#c9b68d;--line:#ffffff19;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
a:hover{opacity:.8}
img{display:block;max-width:100%;height:auto}
.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}
.site-header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px;font:24px Georgia,serif;letter-spacing:-.8px}
.brand-mark{display:grid;place-items:center;width:31px;height:36px;font-style:italic;border:1px solid #c9b68d60;color:var(--gold);font-size:26px;border-radius:50% 50% 3px 3px}
.site-header nav{display:flex;gap:32px;font-size:13px;color:#d8d8ce}
.site-header nav a:last-child{margin-left:12px}
.site-header nav span{margin-left:8px}
.eyebrow{text-transform:uppercase;letter-spacing:2.1px;font-size:10px;font-weight:600;color:var(--gold);margin:0 0 26px}
.status-dot{display:inline-block;width:5px;height:5px;background:currentColor;border-radius:50%;margin-right:8px;vertical-align:2px}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;font-weight:400;margin:0;line-height:1.07;letter-spacing:-2px}
em{font-weight:400;color:var(--gold)}
h1{font-size:clamp(58px,5vw,70px)}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:714px;padding-block:60px 70px;gap:16px}
.hero-copy{position:relative;z-index:2}
.intro{font-size:17px;line-height:1.7;color:var(--muted);margin:26px 0 28px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:36px;min-height:48px;padding:12px 22px;border-radius:4px;font-size:13px;font-weight:600;transition:transform .2s,opacity .2s}
.button:hover{transform:translateY(-2px)}
.cream{background:var(--ink);color:var(--bg)}
.dark{background:#20231d;color:#f2f3eb}
.hero-note{font-size:10px;letter-spacing:.6px;color:var(--muted);margin-top:16px}
.hero-art{position:relative;height:560px;isolation:isolate}
.halo{position:absolute;inset:0 -10% -4%;background:radial-gradient(ellipse at 50% 55%,#60604242,transparent 66%);z-index:-1}
.orbit{position:absolute;border:1px solid #b6ab8225;border-radius:50%;inset:5% -2% 8%;transform:rotate(-24deg)}
.orbit-two{inset:17% -8% 16%;transform:rotate(28deg)}
.phone{position:relative;width:244px;padding:6px;border-radius:36px;background:linear-gradient(130deg,#73766b,#121411 32%,#34382f 78%,#818075);box-shadow:0 30px 50px #0006,0 0 0 1px #aaa18b44;flex-shrink:0}
.phone img{width:100%;border:2px solid #060806;border-radius:30px;background:#111c17}
.hero-folio{position:absolute;width:236px;top:54px;left:32px;transform:rotate(-9deg);z-index:2}
.hero-kinetics{position:absolute;width:208px;top:23px;right:17px;transform:rotate(11deg);z-index:1}
.art-caption{position:absolute;bottom:-8px;left:0;right:0;text-align:center;color:#b0af9c;font:italic 13px Georgia,serif}
.section-heading{border-top:1px solid var(--line);padding:36px 0 30px;display:flex;justify-content:space-between;align-items:center;gap:25px}
.section-heading .eyebrow{margin:0}
.section-heading h2{font-size:29px;letter-spacing:-.8px}
.app-card{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:8px;margin-bottom:28px}
.app-copy{padding:55px 52px;display:flex;flex-direction:column;align-items:flex-start}
.folio{background:#e9e5d9;color:#253b30}
.app-identity{display:flex;align-items:center;gap:14px;margin-bottom:36px}
.app-identity img{width:49px;height:49px;object-fit:cover;border-radius:11px;box-shadow:0 3px 12px #0001}
.app-identity h3{font-size:28px;letter-spacing:-1px}
.app-identity span{font-size:10px;opacity:.75}
.app-copy h4{font-size:48px;letter-spacing:-1.8px;line-height:1.1}
.app-copy em{color:inherit}
.app-copy>p{font-size:15px;line-height:1.75;max-width:335px;margin:22px 0;color:#566053}
.feature-list{padding:0;margin:0 0 29px;list-style:none;font-size:12px}
.feature-list li{padding:7px 0}
.feature-list li:before{content:'↗';margin-right:12px;opacity:.65}
.app-actions{margin-top:auto;display:flex;align-items:flex-start;flex-direction:column;gap:16px}
.availability{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;border:1px solid #29413240;padding:9px 12px;border-radius:3px}
.text-link{font-size:11px;border-bottom:1px solid #253b3040;padding-block:3px}
.text-link span{margin-left:9px}
.app-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:630px;padding:27px;overflow:hidden;isolation:isolate}
.folio-stage{background:radial-gradient(ellipse at 60% 36%,#415542,#1b3027 80%);color:#ddd4b9}
.stage-label{font-size:9px;letter-spacing:1.7px;text-transform:uppercase;margin-bottom:26px;position:relative;z-index:1}
.app-stage .phone{width:221px;transform:rotate(7deg)}
.stage-orbit{position:absolute;width:460px;height:460px;top:18%;border:1px solid #ddd4b928;border-radius:50%;z-index:-1}
.stage-orbit:after{content:'';position:absolute;inset:35px;border:1px solid #ddd4b918;border-radius:50%}
.stage-footnote{font:italic 13px Georgia,serif;margin-top:30px;opacity:.75}
.kinetics{background:#e1e5d7;color:#242b23}
.kinetics-stage{background:radial-gradient(ellipse at 30% 60%,#596340,#292f25 80%);color:#dfe7cb}
.kinetics-stage .phone{transform:rotate(-7deg)}
.ballast{background:#ebe6db;color:#221f19}
.ballast .app-copy>p{color:#5e574b}
.ballast .availability{border-color:#221f1940}
.ballast .text-link{border-bottom-color:#221f1940}
.ballast-stage{background:radial-gradient(ellipse at 60% 36%,#5a4a31,#1b1a16 80%);color:#e4d6b6}
.studio{display:grid;grid-template-columns:1fr 1.7fr;border-bottom:1px solid var(--line);padding-block:76px 82px;gap:35px}
.studio>.eyebrow{padding-top:9px}
h2{font-size:48px;letter-spacing:-1.5px}
.studio p:not(.eyebrow){font-size:16px;max-width:490px;color:var(--muted);margin:25px 0 0}
.studio p+p:not(.eyebrow){margin-top:15px}
.contact{padding-block:70px;display:flex;justify-content:space-between;align-items:center;gap:40px}
.contact h2{font-size:36px;letter-spacing:-1px}
.contact .eyebrow{margin-bottom:22px}
.contact-detail a{font-size:20px;letter-spacing:-.4px;padding-bottom:12px;border-bottom:1px solid #c9b68d50}
.contact-detail a span{margin-left:20px;color:var(--gold)}
.contact-detail p{font-size:12px;line-height:1.8;color:var(--muted);margin-top:24px}
footer{border-top:1px solid var(--line);min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px}
footer .brand{font-size:18px}
footer nav{display:flex;gap:22px;font-size:11px;color:var(--muted)}
footer p{font-size:10px;color:var(--muted)}
.skip-link{position:fixed;z-index:99;top:-100px;left:16px;padding:12px 20px;background:var(--ink);color:var(--bg)}
.skip-link:focus{top:16px}
::selection{background:#c9b68d;color:#10110f}

@media(min-width:1450px){.hero-folio{left:52px}
.hero-kinetics{right:25px}
}

@media(max-width:1000px){.wrap{width:calc(100% - 56px)}
.hero{min-height:650px}
h1{font-size:61px}
.hero-art{height:510px}
.hero-folio{width:206px;left:0;top:57px}
.hero-kinetics{width:179px;right:0;top:32px}
.app-copy{padding:40px 32px}
.app-copy h4{font-size:42px}
.app-stage{min-height:600px}
.section-heading h2{font-size:26px}
}

@media(max-width:720px){.wrap{width:calc(100% - 40px)}
.site-header{height:80px}
.brand{font-size:21px}
.brand-mark{display:none}
.site-header nav{gap:18px;font-size:12px}
.site-header nav a:last-child{display:none}
.hero{grid-template-columns:1fr;padding-top:46px;padding-bottom:34px;gap:0;min-height:0}
.hero .eyebrow{font-size:9px;letter-spacing:1.6px;margin-bottom:24px}
h1{font-size:clamp(49px,10.3vw,70px);line-height:1.06}
.intro{font-size:15px;margin-top:22px}
.hero-art{width:min(390px,100%);height:448px;margin:28px auto 5px}
.hero-folio{width:188px;left:24px;top:35px}
.hero-kinetics{width:163px;right:22px;top:20px}
.phone{padding:5px;border-radius:29px}
.phone img{border-radius:24px}
.art-caption{bottom:-4px;font-size:12px}
.section-heading{display:block;padding:28px 0}
.section-heading .eyebrow{margin-bottom:16px;font-size:9px}
.section-heading h2{font-size:28px}
.app-card{grid-template-columns:1fr}
.app-copy{padding:32px 28px 35px}
.app-copy h4{font-size:43px}
.app-identity{margin-bottom:28px}
.app-copy>p{max-width:100%}
.app-stage{min-height:565px;padding:28px 20px}
.app-stage .phone{width:207px}
.stage-label{font-size:8px;letter-spacing:1.4px}
.stage-footnote{font-size:12px;margin-top:25px}
.studio{grid-template-columns:1fr;gap:10px;padding-block:38px 45px}
.studio>.eyebrow{margin-bottom:10px}
h2{font-size:40px}
.studio p:not(.eyebrow){font-size:15px}
.contact{display:block;padding-block:42px}
.contact h2{font-size:35px}
.contact-detail{margin-top:35px}
.contact-detail a{font-size:19px}
footer{padding-block:28px;align-items:flex-start;flex-direction:column;gap:18px}
footer p{margin:0}
footer nav{flex-wrap:wrap;row-gap:10px}
footer nav a{white-space:nowrap}
}

@media(max-width:360px){.site-header nav{gap:12px;font-size:11px}
.brand{font-size:19px}
.hero-folio{left:10px;width:175px}
.hero-kinetics{right:9px;width:155px}
.hero-art{height:421px}
.app-copy{padding-inline:23px}
.app-copy h4{font-size:39px}
.stage-label{letter-spacing:.8px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.button{transition:none}
.button:hover{transform:none}
}

/* Keep decorative rings within the composition on narrow screens. */
.hero-art{min-width:0;overflow:clip;overflow-clip-margin:16px}

@media(min-width:721px) and (max-width:1000px){.hero-kinetics{right:22px}
}