*{box-sizing:border-box;margin:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:90px;scrollbar-color:var(--ink) var(--ground)}
body{background:var(--ground);color:var(--ink);font:400 1.125rem/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ink);color:#fff}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;z-index:99}.skip:focus{left:8px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* drifting glow: teal at top of page warms to coral near the form (--p set by JS) */
.glows{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glow{position:absolute;border-radius:50%;filter:blur(110px);opacity:.42;
  background:color-mix(in srgb,var(--cta) calc(var(--p,0)*100%),var(--accent));animation:drift 16s ease-in-out infinite alternate}
.g1{width:42vw;height:42vw;right:-6vw;top:22vh}
.g2{width:36vw;height:28vw;left:-6vw;bottom:-6vh;animation-delay:-7s;
  background:color-mix(in srgb,var(--accent) calc(var(--p,0)*100%),var(--cta))}
@keyframes drift{to{transform:translate(5vw,4vh)}}

/* roofline + header */
.roof{position:absolute;left:0;right:0;top:0;height:clamp(110px,14vw,170px);background:var(--ink);clip-path:polygon(0 0,100% 0,100% 38%,0 100%);z-index:-1}
.bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px max(clamp(20px,4vw,48px),calc((100vw - 1200px)/2 + clamp(20px,4vw,48px)));color:#fff}
.bar.solid{background:var(--ink)}
.logo{white-space:nowrap;font-weight:800;font-size:2rem;letter-spacing:-.02em;text-decoration:none}
.pill{display:flex;gap:clamp(14px,2.6vw,34px);padding:12px 28px;border-radius:var(--radius);background:rgba(255,255,255,.14);
  backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28);font-weight:600;font-size:.95rem}
.pill a{text-decoration:none;opacity:.92}.pill a:hover{opacity:1;text-decoration:underline}

.btn{display:inline-block;padding:18px 36px;border-radius:var(--radius);font:700 1.1rem var(--font);text-decoration:none;border:0;cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(0,0,0,.3)}
.btn:active{transform:none}
.btn-navy{background:var(--ink);color:#fff}.btn-coral{background:var(--cta);color:var(--cta-text)}
.btn-sm{padding:12px 24px;font-size:.95rem;white-space:nowrap}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}

.menu{flex-shrink:0;display:none;width:44px;height:44px;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.menu span,.menu span::before{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative}
.menu span::before{content:"";position:absolute;top:6px}
/* hero */
.hero{position:relative;padding-top:clamp(70px,12vw,170px);padding-bottom:clamp(80px,12vw,160px);min-height:78vh}
.star{position:absolute;right:-8%;top:2%;width:min(62vw,760px);color:var(--ink);opacity:.22;z-index:-1;animation:spin 140s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
h1,h2,h3{font-weight:600;text-wrap:balance}
h1{font-size:clamp(2.75rem,8vw,6rem);line-height:1;letter-spacing:-.035em}
.sweep{background:linear-gradient(90deg,var(--sweep-a,var(--cta)),var(--sweep-b,var(--accent)) 60%,var(--sweep-a,var(--cta)));background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:sweep 2.4s cubic-bezier(.16,1,.3,1) both}
@keyframes sweep{from{background-position:100% 0}to{background-position:0 0}}
.lede{margin:clamp(20px,3vw,36px) 0 clamp(28px,4vw,44px);font-size:clamp(1.15rem,2vw,1.4rem);max-width:34ch;color:var(--ink-soft)}

/* sections */
.band{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(8px,2vw,24px)}
h2{font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.06;letter-spacing:-.03em;margin-bottom:20px}
h3{font-size:1.4rem;line-height:1.2;letter-spacing:-.015em}
.intro{max-width:56ch;color:var(--ink-soft);margin-bottom:clamp(28px,4vw,48px)}
.rows{list-style:none;padding:0;margin-top:32px;max-width:900px}
.rows li{padding:22px 0;border-top:1px solid var(--line);font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.3;letter-spacing:-.01em}
.rows li:last-child{border-bottom:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:0 56px}
.svc{padding:28px 0 36px;border-top:1px solid var(--line)}.svc p{margin-top:10px;color:var(--ink-soft);max-width:44ch}
.stats{display:flex;flex-wrap:wrap;gap:32px 64px}.stats b{display:block;font-size:2.5rem;font-weight:600}

/* services: the world's slant and star echoed once, with its own reveal */
.svc-band{position:relative;margin-top:clamp(64px,9vw,120px);padding:clamp(90px,10vw,150px) 0 clamp(60px,7vw,100px);background:color-mix(in srgb,var(--ink) 5%,transparent);clip-path:polygon(0 clamp(24px,4vw,56px),100% 0,100% calc(100% - clamp(24px,4vw,56px)),0 100%)}
.svc-band .star2{position:absolute;right:-6%;top:12%;width:min(46vw,520px);color:var(--ink);opacity:.12;pointer-events:none}
.js .rv2{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.16,1,.3,1)}.js .rv2.in{clip-path:inset(0)}
/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:32px;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:28px}
.plan.featured{border:2px solid var(--accent)}
.tag{position:absolute;top:-14px;left:32px;padding:4px 12px;border-radius:99px;background:var(--ink);color:#fff;font-size:.8rem;font-weight:700}
.plan h3{margin:0 0 16px}
.price{font-size:3.6rem;font-weight:800;letter-spacing:-.03em;line-height:1}.price small{font-size:1rem;font-weight:500;letter-spacing:0;color:var(--ink-soft)}
.monthly{margin:8px 0 24px;font-size:.95rem;color:var(--ink-soft)}
.plan ul{list-style:none;padding:0;margin:0 0 28px;flex:1}
.plan li{padding:9px 0;border-top:1px solid var(--line);font-size:1rem}
.plan .btn{text-align:center}

/* faq */
.faq{max-width:820px}
details{border-top:1px solid var(--line);padding:6px 0}details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-weight:600;font-size:1.2rem;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:4px;top:50%;width:16px;height:16px;translate:0 -50%;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:rotate .3s cubic-bezier(.16,1,.3,1)}
details[open] summary::after{rotate:45deg}
details p{padding:0 0 22px;color:var(--ink-soft);max-width:62ch}

/* contact */
.contact{margin-top:clamp(70px,10vw,140px);padding:clamp(90px,12vw,160px) 0 clamp(60px,8vw,100px);background:var(--ink);color:#fff;
  clip-path:polygon(0 clamp(30px,5vw,70px),100% 0,100% 100%,0 100%)}
.contact .intro{color:var(--on-ink)}.mail{font-size:1.2rem;font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px)}
form{display:grid;gap:16px}
label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
input,select,textarea{font:inherit;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;caret-color:var(--accent)}
select option{color:#16243F}
input:focus,select:focus,textarea:focus{outline:3px solid var(--accent);outline-offset:1px}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#FF9C85}
.err{color:#FFB4A3;font-size:.9rem;font-weight:500}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fine{font-size:.85rem;color:var(--on-ink)}#status{font-weight:600;min-height:1.5em}#status.ok{color:#8FE3D0}#status.bad{color:#FFB4A3}
.foot{background:var(--ink);color:var(--on-ink);padding:28px 0 40px;border-top:1px solid rgba(255,255,255,.14);font-size:.95rem}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}.foot .logo{color:#fff;font-size:1.2rem}
.prose{padding-top:60px;padding-bottom:100px;max-width:720px}.prose h1{font-size:clamp(2.2rem,5vw,3.5rem);margin-bottom:20px}

/* scroll reveal: content visible by default; only hidden once JS has armed it */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:810px){
  .menu{display:grid}.pill{display:none}.pill.open{display:grid;position:absolute;left:16px;right:16px;top:72px;gap:4px;padding:12px;border-radius:24px;background:var(--ink);z-index:10}.pill.open a{padding:12px 16px;font-size:1.1rem}.two{grid-template-columns:1fr}.bar{padding-top:18px}
  .bar .logo{font-size:1.5rem}
  .hero{min-height:auto}.star{width:110vw;right:-40%;opacity:.1}
  .roof{height:120px;clip-path:polygon(0 0,100% 0,100% 72%,0 100%)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}.js .rv2{clip-path:none}
}
.price+ul{margin-top:24px}