:root{
  --bg:#0a0710;
  --bg-core:#150d22;
  --ink:#f4eefc;
  --muted:#9184a8;
  --muted-dim:#5c5270;
  --violet:#b48bff;
  --violet-soft:#8a6fd1;
  --red:#ff5a3c;
  --red-soft:#c94a34;
  --hair:rgba(180,139,255,0.14);
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --display:'Unbounded', ui-sans-serif, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  background:radial-gradient(ellipse 900px 620px at 50% 30%, var(--bg-core) 0%, var(--bg) 62%, #060409 100%) fixed;
  background-color:var(--bg);
  color:var(--ink);
  font-family:'Sora', ui-sans-serif, system-ui, sans-serif;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* faint wall texture: brick-like hairlines, very low contrast */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 128px);
  opacity:0.5;
  z-index:0;
}
/* soft vignette */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 1200px 900px at 50% 45%, transparent 40%, rgba(4,3,7,0.65) 100%);
  z-index:1;
}

/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px clamp(16px, 5vw, 48px);
  background:linear-gradient(to bottom, rgba(10,7,16,0.92), rgba(10,7,16,0.75));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.brand{
  font-family:var(--display);
  font-weight:700;
  font-size:17px;
  letter-spacing:0.01em;
  color:var(--violet);
  text-decoration:none;
  text-shadow:0 0 14px rgba(180,139,255,0.45);
  white-space:nowrap;
}
.brand span{ color:var(--red); text-shadow:0 0 14px rgba(255,90,60,0.5); }
.site-nav{
  display:flex;
  gap:clamp(14px, 2.6vw, 30px);
}
.site-nav a{
  position:relative;
  font-family:var(--mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  padding:6px 0;
  transition:color .2s ease;
}
.site-nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--red);
  box-shadow:0 0 8px var(--red);
  transform:scaleX(0);
  transition:transform .25s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible{ color:var(--ink); outline:none; }
.site-nav a[aria-current="page"]{ color:var(--ink); }
.site-nav a[aria-current="page"]::after,
.site-nav a:hover::after,
.site-nav a:focus-visible::after{ transform:scaleX(1); }

@media (max-width: 560px){
  .site-header{ flex-direction:column; gap:10px; padding:14px 16px 10px; }
  .site-nav{ gap:18px; }
  .site-nav a{ font-size:11px; letter-spacing:0.12em; }
}

/* ---------- shared ---------- */
.site-main{
  position:relative;
  z-index:2;
  flex:1;
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:clamp(28px, 6vh, 64px) 16px clamp(40px, 8vh, 80px);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.eyebrow{
  margin:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.7em;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px 1px var(--red);
  flex:none;
}
h1{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  color:var(--ink);
  text-wrap:balance;
}
h1 em{ font-style:normal; color:var(--red); }
.lede{
  margin:0;
  font-size:16px;
  line-height:1.6;
  font-weight:300;
  color:var(--muted);
  max-width:46ch;
  text-wrap:pretty;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 26px;
  border-radius:999px;
  border:1px solid rgba(255,90,60,0.55);
  background:rgba(255,90,60,0.08);
  color:var(--red);
  font-family:var(--mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:box-shadow .25s ease, transform .25s ease;
}
.btn:hover,
.btn:focus-visible{ box-shadow:0 0 18px rgba(255,90,60,0.35); transform:translateY(-2px); outline:none; }

/* ---------- home ---------- */
.page-home .site-main{ justify-content:center; }
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px, 2.4vh, 26px);
  text-align:center;
}
.sign-wrap{
  position:relative;
  width:min(90vw, 44vh, 500px);
  aspect-ratio:1;
  line-height:0;
  /* feather the square clip into the page so it reads as the wall, not a box */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-composite:intersect;
  margin:-4vh 0;
}
.sign-wrap video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  animation:heroIn 1.6s ease-out 1;
}
@keyframes heroIn{ from{ opacity:0; } to{ opacity:1; } }
.tagline{
  font-size:clamp(24px, 4vw, 40px);
  line-height:1.2;
  max-width:16ch;
}
.hero .lede{ max-width:40ch; }
.hero .btn{ margin-top:6px; }

/* ---------- about ---------- */
.prose{
  width:100%;
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.prose .eyebrow{ justify-content:flex-start; }
.prose h1{ font-size:clamp(26px, 4vw, 38px); margin-bottom:6px; }
.prose p:not(.eyebrow){
  margin:0;
  font-size:17px;
  line-height:1.75;
  font-weight:300;
  color:#cfc4e2;
}
.prose a:not(.btn){ color:var(--red); text-decoration:none; border-bottom:1px solid rgba(255,90,60,0.4); }
.prose a:not(.btn):hover,
.prose a:not(.btn):focus-visible{ border-bottom-color:var(--red); outline:none; }
.prose .btn{ align-self:flex-start; margin-top:10px; }

/* ---------- portfolio ---------- */
.section-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  margin-bottom:clamp(28px, 5vh, 48px);
}
.section-head h1{ font-size:clamp(26px, 4vw, 38px); }
.grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap:clamp(18px, 3vw, 32px);
}
.card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--hair);
  border-radius:10px;
  overflow:hidden;
  background:rgba(180,139,255,0.03);
  color:inherit;
  text-decoration:none;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.card:hover,
.card:focus-visible{
  border-color:rgba(255,90,60,0.55);
  box-shadow:0 0 28px rgba(255,90,60,0.18), 0 0 60px rgba(180,139,255,0.10);
  transform:translateY(-3px);
  outline:none;
}
.shot{
  aspect-ratio:16/10;
  overflow:hidden;
  border-bottom:1px solid var(--hair);
  background:#000;
}
.shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
  transition:transform .6s ease;
}
.card:hover .shot img{ transform:scale(1.03); }
.card-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px 20px 20px;
}
.tag{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--violet-soft);
}
.card h2{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:19px;
  color:var(--ink);
}
.card p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  font-weight:300;
  color:var(--muted);
}
.domain{
  margin-top:4px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--red);
}

/* ---------- contact / intake ---------- */
.intake{
  width:min(100%, 560px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.intake h1{ font-size:clamp(26px, 4vw, 38px); }
.intake .lede{ margin-bottom:14px; }
.intake form{ width:100%; display:grid; gap:18px; text-align:left; }
.field{ display:grid; gap:8px; }
.field label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.field .opt{ color:var(--muted-dim); letter-spacing:0.1em; }
.field input,
.field select,
.field textarea{
  width:100%;
  font:inherit;
  font-size:15px;
  font-weight:300;
  color:var(--ink);
  background:rgba(180,139,255,0.04);
  border:1px solid var(--hair);
  border-radius:4px;
  padding:12px 14px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--violet-soft) 50%), linear-gradient(135deg, var(--violet-soft) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size:5px 5px;
  background-repeat:no-repeat;
  padding-right:40px;
}
.field select option{ background:var(--bg-core); color:var(--ink); }
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(180,139,255,0.15);
}
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.submit{ justify-self:center; margin-top:6px; }
.submit[disabled]{ opacity:0.5; cursor:wait; transform:none; }
.form-note{
  min-height:1.4em;
  margin:0;
  text-align:center;
  font-size:14px;
  color:var(--muted);
}
.form-note.ok{ color:var(--violet); }
.form-note.err{ color:var(--red); }

/* ---------- footer ---------- */
.site-footer{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:22px 16px 28px;
  border-top:1px solid var(--hair);
}
.socials{ display:flex; gap:12px; }
.social{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--hair);
  color:var(--violet-soft);
  transition:border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.social svg{ width:14px; height:14px; }
.social:hover,
.social:focus-visible{
  border-color:var(--red);
  color:var(--red);
  box-shadow:0 0 14px rgba(255,90,60,0.3);
  outline:none;
}
.site-footer p{
  margin:0;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted-dim);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .sign-wrap video{ animation:none; }
  .card, .btn, .shot img{ transition:none; }
}

.shot{ position:relative; }
.shot.video::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:64px; height:64px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(10,7,16,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/30px no-repeat;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 24px rgba(255,90,60,.35);
  pointer-events:none;
}