:root{
  --ground:#191A38; --surface:#212349; --surface-2:#2A2C5C;
  --ink:#F4F2FB; --muted:#A9ACD9; --line:#3B3D6E;
  --accent:#EF4E8B; --accent-ink:#191A38;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#F5F4FB; --surface:#FFFFFF; --surface-2:#E7E5F5;
    --ink:#1D1E42; --muted:#5B5E92; --line:#DAD8EE;
    --accent:#C93B75; --accent-ink:#FFFFFF;
  }
}
:root[data-theme="light"]{
  --ground:#F5F4FB; --surface:#FFFFFF; --surface-2:#E7E5F5;
  --ink:#1D1E42; --muted:#5B5E92; --line:#DAD8EE;
  --accent:#C93B75; --accent-ink:#FFFFFF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.display{
  font-family:"Futura","Century Gothic","Avenir Next",Avenir,sans-serif;
  text-wrap:balance; letter-spacing:-0.01em;
}
.label{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  text-transform:uppercase; letter-spacing:0.14em; font-size:.72rem;
  color:var(--muted);
}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,56px)}

nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px clamp(20px,4vw,56px); border-bottom:1px solid var(--line);
  gap:24px; flex-wrap:wrap;
}
.word{display:flex; align-items:baseline; gap:.5em; text-decoration:none}
.word .tiny{font-family:ui-monospace,monospace; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.word .big{font-family:"Futura","Century Gothic",sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:-0.01em}
.navlinks{display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.navlinks a{
  text-decoration:none; font-family:ui-monospace,monospace; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
.navlinks a:hover, .navlinks a[aria-current="page"]{color:var(--ink)}
nav .cta{
  font-family:ui-monospace,monospace; font-size:.75rem; text-transform:uppercase;
  letter-spacing:.1em; padding:.6em 1.1em; border:1px solid var(--ink);
  text-decoration:none; border-radius:2px; transition:background .15s, color .15s;
  white-space:nowrap;
}
nav .cta:hover{background:var(--ink); color:var(--ground)}

header.hero{
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px;
  padding:clamp(48px,8vw,110px) clamp(20px,4vw,56px) clamp(56px,7vw,96px);
  align-items:center;
}
header.page{ padding:clamp(48px,7vw,88px) clamp(20px,4vw,56px) clamp(44px,6vw,72px); border-bottom:1px solid var(--line) }
header.page .label{margin:0 0 16px}
header.page h1{margin:0; font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.04; font-weight:800; max-width:18ch}
header.page .sub{max-width:56ch; margin:20px 0 0; color:var(--muted); font-size:1.08rem; line-height:1.65}

h1{ margin:0; font-size:clamp(2.6rem,6vw,5.1rem); line-height:0.98; font-weight:800 }
h1 em{font-style:normal; color:var(--accent)}
.sub{ max-width:46ch; margin:26px 0 34px; color:var(--muted); font-size:1.12rem; line-height:1.6 }
.actions{display:flex; gap:14px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:ui-monospace,monospace; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.95em 1.5em; border-radius:2px; text-decoration:none;
}
.btn.primary{background:var(--accent); color:var(--accent-ink); font-weight:600}
.btn.ghost{border:1px solid var(--line); color:var(--ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost:hover{border-color:var(--ink)}

.signal{ display:flex; align-items:center; justify-content:center }
.signal svg{ width:100%; height:auto; max-width:340px }
.ring{fill:none; stroke:var(--line); stroke-width:1.4}
.ring.on{stroke:var(--accent); stroke-width:2.4}
.dot{fill:var(--accent)}

section{padding:clamp(56px,7vw,96px) clamp(20px,4vw,56px); border-top:1px solid var(--line)}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap}
h2{font-family:"Futura","Century Gothic",sans-serif; font-size:clamp(1.6rem,3vw,2.3rem); margin:0; font-weight:700; letter-spacing:-0.01em}

.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.service{background:var(--ground); padding:32px 26px; min-height:200px; display:flex; flex-direction:column; justify-content:space-between}
.service .n{font-family:ui-monospace,monospace; color:var(--accent); font-size:.78rem; letter-spacing:.1em}
.service h3{font-family:"Futura","Century Gothic",sans-serif; font-size:1.18rem; margin:20px 0 10px; font-weight:700}
.service p{margin:0; color:var(--muted); font-size:.96rem; line-height:1.55}
.service a.more{
  display:inline-block; margin-top:16px; font-family:ui-monospace,monospace; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--accent); text-decoration:none;
}
.service a.more:hover{text-decoration:underline}

.why{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.why p{color:var(--muted); font-size:1.08rem; line-height:1.75; max-width:52ch}
.why .stat-row{display:flex; flex-direction:column; gap:22px}
.stat{border-left:2px solid var(--accent); padding-left:18px}
.stat .k{font-family:"Futura","Century Gothic",sans-serif; font-weight:700; font-size:1.5rem}
.stat .d{color:var(--muted); font-size:.9rem}

.cta-band{
  background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(56px,8vw,100px) clamp(20px,4vw,56px); text-align:center;
}
.cta-band h2{font-size:clamp(1.9rem,4vw,3rem)}
.cta-band p{color:var(--muted); max-width:50ch; margin:14px auto 34px}
.note{font-family:ui-monospace,monospace; font-size:.72rem; color:var(--muted); margin-top:16px}

/* Services detail page */
.service-detail{
  display:grid; grid-template-columns:220px 1fr; gap:32px;
  padding:36px 0; border-top:1px solid var(--line);
}
.service-detail:first-child{border-top:none}
.service-detail .tag{font-family:ui-monospace,monospace; color:var(--accent); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase}
.service-detail h3{font-family:"Futura","Century Gothic",sans-serif; font-size:1.4rem; margin:10px 0 0}
.service-detail .desc{color:var(--muted); font-size:1.02rem; line-height:1.7; max-width:56ch; margin:0 0 18px}
.service-detail ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.service-detail li{color:var(--ink); font-size:.96rem; padding-left:1.4em; position:relative}
.service-detail li::before{content:"—"; position:absolute; left:0; color:var(--accent)}

/* About page */
.principles{display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
.principle{border-top:2px solid var(--accent); padding-top:16px}
.principle h3{font-family:"Futura","Century Gothic",sans-serif; font-size:1.05rem; margin:0 0 10px}
.principle p{margin:0; color:var(--muted); font-size:.95rem; line-height:1.6}
.about-copy p{color:var(--muted); font-size:1.08rem; line-height:1.8; max-width:62ch; margin:0 0 20px}
.about-copy p:last-child{margin-bottom:0}

/* Contact page */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.steps{display:flex; flex-direction:column; gap:24px}
.step{display:flex; gap:18px; align-items:flex-start}
.step .idx{font-family:"Futura","Century Gothic",sans-serif; font-weight:700; color:var(--accent); font-size:1.1rem; min-width:1.6em}
.step h3{margin:0 0 6px; font-size:1.02rem}
.step p{margin:0; color:var(--muted); font-size:.94rem; line-height:1.6}
.contact-card{
  background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:32px;
  display:flex; flex-direction:column; gap:18px;
}
.contact-card .row{display:flex; flex-direction:column; gap:4px}
.contact-card .row .k{font-family:ui-monospace,monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.contact-card .row .v{font-size:1.02rem}
.contact-card .row a{text-decoration:none; border-bottom:1px solid var(--line)}
.contact-card .row a:hover{border-color:var(--ink)}

footer{padding:36px clamp(20px,4vw,56px); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
footer .label{margin:0}
footer .navlinks a{font-size:.75rem}

@media (max-width:760px){
  header.hero{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .signal{order:-1}
  .principles{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .service-detail{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  .btn.primary{transition:transform .15s}
  .btn.primary:hover{transform:translateY(-1px)}
}