:root{
  --paper:#f6f0e8;
  --paper-2:#efe7dc;
  --ink:#1a1622;
  --muted:#5a5166;
  --stroke:#d6c9bb;
  --accent:#8a6bff;
  --accent-2:#f2a65a;
  --shadow:0 20px 50px rgba(0,0,0,.15);
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --serif:"Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

html[data-theme="dark"]{
  --paper:#131118;
  --paper-2:#1b1822;
  --ink:#f4efe7;
  --muted:#bdb2a6;
  --stroke:#2e2a33;
  --accent:#b18cff;
  --accent-2:#f2a65a;
  --shadow:0 24px 60px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(138,107,255,.08), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(242,166,90,.1), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  font-family:var(--serif);
  line-height:1.7;
}

body::before{
  content:none;
}

.paper{
  max-width:1100px;
  margin:32px auto 72px;
  padding:26px 26px 32px;
  background: var(--paper);
  border:1px solid var(--stroke);
  border-radius:28px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}

.paper::after{
  content:none;
}

.mast{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  border-bottom:1px dashed var(--stroke);
  padding-bottom:18px;
  margin-bottom:22px;
}

.mark{
  width:72px; height:72px;
  border-radius:18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:grid; place-items:center;
  border:1px solid rgba(0,0,0,.15);
  overflow:hidden;
}

.logo{
  width:100%;
  height:100%;
  object-fit:cover;
}

.kicker{
  margin:0;
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.25em;
  color:var(--muted);
}

h1{
  margin:.2rem 0 .3rem;
  font-size: clamp(30px, 4vw, 54px);
  letter-spacing:-.02em;
}

.sub{
  margin:0;
  font-family:var(--mono);
  color:var(--muted);
  font-size:14px;
}

.toggle{
  align-self:start;
  background: transparent;
  color:var(--ink);
  border:1px solid var(--stroke);
  border-radius:999px;
  padding:8px 12px;
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  cursor:pointer;
}

.grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:20px;
}

.card{
  background: rgba(255,255,255,.6);
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:18px;
  position:relative;
}

html[data-theme="dark"] .card{
  background: rgba(255,255,255,.04);
}

.card h2{
  margin:0 0 12px;
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--muted);
}

.about p{margin:0 0 12px}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
}

.chips span{
  border:1px solid var(--stroke);
  padding:10px 12px;
  border-radius:12px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  text-align:left;
  background: rgba(255,255,255,.35);
  width:fit-content;
  max-width:100%;
}

html[data-theme="dark"] .chips span{
  background: rgba(255,255,255,.03);
}

@media (max-width: 720px){
  .chips{gap:8px}
  .chips span{max-width:100%}
}

.links a{
  display:grid;
  grid-template-columns:18px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--ink);
  border:1px dashed var(--stroke);
  margin-bottom:10px;
  background: rgba(255,255,255,.4);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

html[data-theme="dark"] .links a{
  background: rgba(255,255,255,.03);
}

.links a:hover{
  transform: translateY(-2px);
  border-color:var(--accent);
  background: rgba(138,107,255,.08);
}

.dot{
  width:10px; height:10px;
  border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(138,107,255,.4);
}

.path{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
}

@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
  .mast{grid-template-columns:1fr}
  .toggle{justify-self:start}
}

@media (max-width: 560px){
  .paper{margin:16px 12px 60px; padding:20px}
  .mark{width:60px; height:60px}
  h1{font-size:28px}
}

.links a.cta{
  border-style:solid;
  border-color:var(--accent-2);
  background: linear-gradient(135deg, rgba(138,107,255,.18), rgba(242,166,90,.35));
  box-shadow: 0 12px 26px rgba(242,166,90,.18);
  font-weight:600;
}

.links a.cta:hover{
  border-color:var(--accent-2);
  background: linear-gradient(135deg, rgba(138,107,255,.22), rgba(242,166,90,.5));
  box-shadow: 0 16px 34px rgba(242,166,90,.3);
  transform: translateY(-3px);
}

.links a.cta .dot{
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(242,166,90,.45);
}

.availability{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--accent-2);
  outline:1px solid rgba(242,166,90,.35);
  outline-offset:2px;
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}

html[data-theme="dark"] .availability{
  background: rgba(255,255,255,.02);
}

.availability:hover{
  background: linear-gradient(135deg, rgba(138,107,255,.18), rgba(242,166,90,.35));
  box-shadow: 0 14px 30px rgba(242,166,90,.22);
  transform: translateY(-2px);
}

html[data-theme="dark"] .availability:hover{
  background: linear-gradient(135deg, rgba(138,107,255,.12), rgba(242,166,90,.3));
}

.availability .kicker{
  margin-bottom:10px;
}

.availability-status{
  margin:0 0 10px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
}

.availability-list{
  margin:0 0 12px;
  padding-left:18px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted);
}

.availability-list li{
  margin:4px 0;
}

.availability-meta{
  margin-bottom:10px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted);
}

.availability-meta .label{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  color:var(--muted);
  margin-right:6px;
}

.availability-note{
  margin:0;
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted);
}

.dot-available{
  background:#35d07f;
  box-shadow: 0 0 10px rgba(53,208,127,.55);
}

.stack{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

.services{
  display:grid;
  gap:18px;
}

.services-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}

.contact-cta{
  display:flex;
  justify-content:center;
}

.contact-cta a{
  width:min(420px, 100%);
  margin:0;
}

.service-card h2{
  margin:0 0 8px;
  font-family:var(--serif);
  font-size:20px;
  text-transform:none;
  letter-spacing:-.01em;
  color:var(--ink);
}

.service-card .price{
  margin:0 0 10px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--accent-2);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.service-card p{
  margin:0;
  color:var(--muted);
}

.service-card{
  border:1px solid var(--accent-2);
  outline:1px solid rgba(242,166,90,.35);
  outline-offset:2px;
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}

html[data-theme="dark"] .service-card{
  background: rgba(255,255,255,.02);
}

.service-card:hover{
  background: linear-gradient(135deg, rgba(138,107,255,.18), rgba(242,166,90,.35));
  box-shadow: 0 14px 30px rgba(242,166,90,.22);
  transform: translateY(-2px);
}

html[data-theme="dark"] .service-card:hover{
  background: linear-gradient(135deg, rgba(138,107,255,.12), rgba(242,166,90,.3));
}

.service-card.unavailable{
  position:relative;
  overflow:hidden;
}

.service-card.unavailable .service-body{
  filter: blur(2.5px);
  opacity:.65;
}

.service-card.unavailable .service-status{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  padding:8px 14px;
  border-radius:12px;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.35;
  color:#fff;
  background: #d64545;
  border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 10px 20px rgba(214,69,69,.3);
  text-align:center;
  max-width:80%;
}

.disclaimer{
  margin:6px 0 0;
  text-align:center;
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
}

.video-embed{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--stroke);
  background:#000;
}

.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.cursor-dot{
  position:fixed;
  left:0;
  top:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background: var(--accent);
  opacity:.5;
  pointer-events:none;
  transform: translate(-50%, -50%);
  z-index:9999;
}

html[data-theme="dark"] .cursor-dot{
  opacity:.65;
}