:root {
  --pink: #fa1472;
  --background: #08080b;
  --panel: #111116;
  --text: #f7f7f8;
  --muted: #b7b7c2;
  --line: rgba(255,255,255,.12);
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(circle at 75% 5%, rgba(250,20,114,.14), transparent 32%), var(--background);
  color: var(--text);
  font-family: Montserrat, Inter, Arial, sans-serif;
  line-height: 1.65;
}
a { color: inherit; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--pink); padding: .7rem 1rem; color: #08080b; }
.site-top {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem clamp(1rem,4vw,4rem);
  border-bottom: 1px solid var(--line);
  background: rgba(8,8,11,.9);
}
.logo { font-weight: 900; letter-spacing: -.03em; text-decoration: none; }
.logo span { color: var(--pink); text-shadow: 0 0 14px rgba(250,20,114,.65); }
nav { display: flex; flex-wrap: wrap; gap: .8rem 1.25rem; }
nav a { text-decoration: none; font-weight: 700; font-size: .88rem; }
nav a:hover, nav a:focus-visible { color: var(--pink); }
main { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(3.5rem,8vw,8rem) 0; }
.eyebrow { color: var(--pink); font-weight: 900; letter-spacing: .15em; text-transform: uppercase; font-size: .78rem; }
h1 { max-width: 900px; margin: .5rem 0 1.25rem; font-size: clamp(3rem,8vw,7.5rem); line-height: .86; letter-spacing: -.055em; text-transform: uppercase; }
h2 { margin-top: 0; font-size: clamp(1.7rem,3vw,2.8rem); line-height: 1.05; }
h3 { margin-bottom: .4rem; }
.lead { max-width: 780px; color: var(--muted); font-size: clamp(1.05rem,2vw,1.3rem); }
.grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 3rem 0; }
.card { padding: clamp(1.3rem,3vw,2rem); background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border: 1px solid var(--line); border-radius: 14px; }
.card p { color: var(--muted); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.5rem; border: 1px solid rgba(250,20,114,.42); border-radius: 14px; background: rgba(250,20,114,.08); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.25rem; border: 1px solid var(--pink); background: var(--pink); color: #09090c; font-weight: 900; text-decoration: none; border-radius: 4px; }
.button.secondary { color: var(--text); background: transparent; }
.phone { color: var(--pink); font-weight: 900; font-size: clamp(1.4rem,4vw,2.6rem); text-decoration: none; }
form { display: grid; gap: 1rem; max-width: 760px; margin-top: 2rem; }
label { display: grid; gap: .45rem; font-weight: 800; }
input, textarea { width: 100%; padding: .9rem 1rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 5px; font: inherit; }
input:focus, textarea:focus { outline: 2px solid var(--pink); outline-offset: 2px; }
.status { min-height: 1.5rem; color: var(--muted); }
footer { padding: 2rem clamp(1rem,4vw,4rem); border-top: 1px solid var(--line); color: var(--muted); }
footer a { margin-right: 1rem; }
@media (max-width: 760px) { .site-top { align-items: flex-start; flex-direction: column; } .grid { grid-template-columns: 1fr; } h1 { font-size: clamp(2.8rem,16vw,5rem); } }

/* Editorial page visuals */
.page-visual { margin: clamp(2.25rem,5vw,4.5rem) 0; }
.page-visual img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:20px; background:#0a0a0d; box-shadow:0 28px 80px rgba(0,0,0,.32); }
.page-visual figcaption { margin-top:.8rem; color:var(--muted); font-size:.84rem; }
.process-visual img { aspect-ratio:1200/520; }

/* Portfolio project visuals */
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:3rem 0; }
.project-card { overflow:hidden; padding:0; }
.project-visual { aspect-ratio:900/560; overflow:hidden; border-bottom:1px solid var(--line); background:#0a0a0d; }
.project-visual img { display:block; width:100%; height:100%; object-fit:cover; }
.project-copy { padding:clamp(1.3rem,3vw,2rem); }
.project-type { margin:0 0 .7rem; color:var(--pink); font-size:.72rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.project-copy h2 { margin-bottom:.75rem; }
.project-copy p { color:var(--muted); }
.project-copy a { color:var(--pink); font-weight:900; text-decoration:none; }

/* Form protection */
.form-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

@media (max-width:900px) { .project-grid { grid-template-columns:1fr; } }