:root {
  --bg: #EEF2F5; --card: #FFFFFF; --line: #D9E1E7; --text: #1A2630; --sub: #5A6A75;
  --deep: #0F3440; --deep2: #0A2630; --accent: #0B827A; --ink: #0B6B65; --gold: #C9A24E; --onDeep: #E8F2F3; --onDeepSub: #9FC4C6;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0A2430; --card: #0F2E3C; --line: #1F4A5C; --text: #EEF4F3; --sub: #9DB5BB; --accent: #3EC0B4; --ink: #7FD3CB; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 Inter, system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.serif { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 400; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* top bar */
header { background: var(--deep); color: var(--onDeep); }
header .in { max-width: 1120px; margin: 0 auto; padding: 16px; display: flex; align-items: center; gap: 14px; }
header .brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
header .brand img { width: 40px; height: 40px; border-radius: 9px; }
header .brand b { font: 400 22px/1 'Libre Baskerville', Georgia, serif; letter-spacing: .16em; }
header nav { margin-left: auto; display: flex; gap: 20px; font-size: 15px; }
header nav a { color: var(--onDeepSub); text-decoration: none; }
header nav a:hover { color: #fff; }
@media (max-width: 640px) { header nav { gap: 14px; font-size: 14px; } header nav .hide-s { display: none; } }

/* hero */
.hero { background: radial-gradient(90% 120% at 15% 30%, #17505E 0%, var(--deep) 55%, var(--deep2) 100%); color: #fff; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: end; padding-top: 64px; }
.hero h1 { font: 400 clamp(36px, 5.2vw, 60px)/1.12 'Libre Baskerville', Georgia, serif; margin: 0 0 18px; }
.hero p.lead { font-size: 19px; color: var(--onDeep); max-width: 34em; margin: 0 0 26px; }
.hero .who { color: var(--onDeepSub); font-size: 15px; margin: 0 0 30px; }
.hero .phone { justify-self: center; width: min(300px, 80vw); border-radius: 26px 26px 0 0; overflow: hidden; box-shadow: 0 0 0 7px #0A1E26, 0 30px 60px rgba(0,0,0,.45); margin-top: 10px; }
.hero .copy { padding-bottom: 64px; }
@media (max-width: 820px) { .hero .wrap { grid-template-columns: 1fr; gap: 10px; padding-top: 44px; } .hero .copy { padding-bottom: 20px; } }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: 16px; text-decoration: none; }
.btn.primary { background: var(--gold); color: #1B1405; }
.btn.ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.btn.dark { background: var(--accent); color: #fff; }
.btn small { font-weight: 500; opacity: .8; }

/* sections */
section { padding: 72px 0; }
section h2 { font: 400 clamp(28px, 3.4vw, 38px)/1.2 'Libre Baskerville', Georgia, serif; margin: 0 0 10px; }
section .intro { color: var(--sub); max-width: 40em; margin: 0 0 36px; }

.feature { display: grid; grid-template-columns: 240px 1fr; gap: 44px; align-items: center; padding: 34px 0; border-top: 1px solid var(--line); }
.feature:nth-of-type(even) { grid-template-columns: 1fr 240px; }
.feature:nth-of-type(even) .shot { order: 2; }
.feature .shot { max-height: 380px; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 5px var(--deep), 0 18px 36px rgba(15,52,64,.25); }
.feature h3 { font: 600 22px/1.3 Inter, system-ui, sans-serif; margin: 0 0 8px; }
.feature p { margin: 0; color: var(--sub); max-width: 34em; }
@media (max-width: 720px) { .feature, .feature:nth-of-type(even) { grid-template-columns: 1fr; gap: 20px; } .feature:nth-of-type(even) .shot { order: 0; } .feature .shot { width: 220px; } }

/* the subject ledger */
.ledger { columns: 2; column-gap: 48px; border-top: 2px solid var(--text); padding-top: 6px; }
@media (max-width: 640px) { .ledger { columns: 1; } }
.ledger div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.ledger span { flex: 1; }
.ledger b { font: 400 18px/1 'Libre Baskerville', Georgia, serif; font-variant-numeric: tabular-nums; }
.ledger-foot { color: var(--sub); font-size: 15px; margin-top: 16px; }

.desk { margin-top: 10px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 8px var(--deep), 0 24px 48px rgba(15,52,64,.28); }

/* plans */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.plan.main { box-shadow: inset 0 0 0 2px var(--accent); }
.plan h3 { margin: 0; font: 600 20px/1.3 Inter, system-ui, sans-serif; }
.plan .price { font: 400 30px/1.2 'Libre Baskerville', Georgia, serif; margin: 12px 0 2px; }
.plan .per { color: var(--sub); font-size: 14px; }
.plan ul { padding-left: 20px; margin: 16px 0 0; font-size: 15.5px; }
.plan li { margin: 6px 0; }
.note { color: var(--sub); font-size: 15px; margin-top: 18px; max-width: 46em; }

.band { background: var(--deep); color: var(--onDeep); }
.band h2 { color: #fff; }
.band .intro { color: var(--onDeepSub); }
.band a { color: #fff; }

/* text pages */
main.page { max-width: 760px; margin: 0 auto; padding: 28px 16px 60px; }
main.page h1 { font: 400 32px/1.25 'Libre Baskerville', Georgia, serif; margin: 0 0 6px; }
main.page h2 { font: 600 19px/1.35 Inter, system-ui, sans-serif; margin: 34px 0 8px; }
main.page p, main.page li { max-width: 68ch; }
main.page ul { padding-left: 22px; } main.page li { margin: 4px 0; }
.sub { color: var(--sub); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 18px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 9px 10px; border-top: 1px solid var(--line); }
th { color: var(--sub); font-weight: 600; }
.tablewrap { overflow-x: auto; }

footer { border-top: 1px solid var(--line); }
footer .in { max-width: 1120px; margin: 0 auto; padding: 26px 16px 40px; color: var(--sub); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer a { color: var(--sub); }
.band .ledger { border-top-color: rgba(255,255,255,.7); }
.band .ledger div { border-bottom-color: rgba(255,255,255,.14); }
.band .ledger-foot, .band .note { color: var(--onDeepSub); }

/* coming soon boxes */
.soonrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
@media (max-width: 640px) { .soonrow { grid-template-columns: 1fr; } }
.soonbox { border: 1px dashed rgba(255,255,255,.4); border-radius: 14px; padding: 16px 18px; }
.soonbox b { display: block; font: 600 16px/1.3 Inter, system-ui, sans-serif; margin-bottom: 4px; }
.soonbox span { color: var(--onDeepSub); font-size: 15px; }

/* device gallery */
.dev { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; padding: 34px 0; border-top: 1px solid var(--line); }
.dev:nth-of-type(even) { grid-template-columns: 1fr 1.25fr; }
.dev:nth-of-type(even) .devshot { order: 2; }
.dev h3 { font: 600 22px/1.3 Inter, system-ui, sans-serif; margin: 0 0 8px; }
.dev p { margin: 0; color: var(--sub); max-width: 34em; }
.devshot { border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px rgba(15,52,64,.22); }
.devshot.flat { border: 1px solid var(--line); border-radius: 12px; }
.devshot.solo { margin-top: 34px; }
@media (max-width: 760px) { .dev, .dev:nth-of-type(even) { grid-template-columns: 1fr; gap: 18px; } .dev:nth-of-type(even) .devshot { order: 0; } }