:root {
  --ink: #0b1015;
  --paper: #f4f5f2;
  --line: rgba(11,16,21,.16);
  --amber: #ffb000;
  --steel: #9ca6af;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, Arial, sans-serif; font-size: 16px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.site-header { position: fixed; z-index: 20; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 3.5vw; color: white; background: linear-gradient(180deg,rgba(0,0,0,.68),transparent); transition: background .25s, padding .25s; }
.site-header.scrolled { background: rgba(11,16,21,.94); backdrop-filter: blur(12px); padding-top: .8rem; padding-bottom: .8rem; }
.brand { display: inline-flex; gap: .7rem; align-items: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: .05em; }
.brand-mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--ink); background: var(--amber); font-size: .75rem; letter-spacing: -.04em; clip-path: polygon(0 0,100% 0,100% 72%,72% 100%,0 100%); }
.brand-name span { color: var(--amber); }
nav { display: flex; align-items: center; gap: 2rem; font-size: .86rem; font-weight: 600; }
nav a { opacity: .82; }
nav a:hover, nav a:focus-visible { opacity: 1; }
.language-switch { display: inline-flex; align-items: center; gap: .3rem; font: 700 .74rem 'Space Grotesk', sans-serif; color: rgba(255,255,255,.45); }
.lang { padding: .35rem .2rem; border: 0; background: transparent; color: rgba(255,255,255,.48); font: inherit; cursor: pointer; text-decoration: none; }
.lang.active { color: var(--amber); }
.lang:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.nav-cta { border: 1px solid rgba(255,255,255,.45); padding: .65rem 1rem; }
.menu-button { display: none; color: white; background: transparent; border: 1px solid rgba(255,255,255,.45); padding: .55rem .8rem; font: inherit; }
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; color: white; background: var(--ink); }
.hero-media { position: absolute; inset: 0; background-image: linear-gradient(90deg,rgba(6,10,14,.92) 0%,rgba(6,10,14,.68) 38%,rgba(6,10,14,.12) 70%), url('primecrafters-hero.png'); background-size: cover; background-position: center; }
.hero-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px); background-size: 8vw 8vw; mask-image: linear-gradient(90deg,#000,transparent 72%); }
.hero-content { position: relative; z-index: 1; width: min(880px,87vw); margin: 5rem 0 1rem 7vw; }
.eyebrow { margin: 0 0 1.2rem; color: var(--amber); font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow.dark { color: #8a5f00; }
h1,h2,h3 { margin: 0; font-family: 'Space Grotesk', sans-serif; line-height: 1; letter-spacing: -.045em; }
h1 { max-width: 900px; font-size: clamp(3.7rem,8.5vw,8rem); font-weight: 600; }
h1 em,h2 em { color: var(--amber); font-style: normal; }
.hero-copy { max-width: 650px; margin: 2rem 0; color: rgba(255,255,255,.78); font-size: clamp(1.05rem,1.4vw,1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 3.3rem; padding: .8rem 1.15rem; border: 1px solid transparent; font-weight: 700; font-size: .88rem; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--ink); background: var(--amber); }
.button-ghost { color: white; border-color: rgba(255,255,255,.5); }
.hero-index { position: absolute; z-index: 1; right: 4vw; bottom: 5vw; display: flex; gap: 1rem; align-items: start; border-top: 1px solid rgba(255,255,255,.4); padding-top: .9rem; min-width: 240px; }
.hero-index span { color: var(--amber); font: 600 1rem 'Space Grotesk'; }
.hero-index p { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.scroll-cue { position: absolute; z-index: 1; left: 1.5rem; bottom: 2rem; writing-mode: vertical-rl; font-size: .67rem; letter-spacing: .2em; text-transform: uppercase; }
.section { padding: 8rem 7vw; }
.services { display: grid; grid-template-columns: minmax(240px,.8fr) 1.5fr; gap: 8vw; }
.section-heading { position: sticky; top: 7rem; align-self: start; }
.section-heading h2,.company h2,.process h2,.contact h2 { font-size: clamp(2.8rem,5vw,5.2rem); }
.section-heading > p:last-child { max-width: 420px; color: #4d555c; margin-top: 1.8rem; }
.service-list { border-top: 1px solid var(--line); }
.service-card { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1.2rem; align-items: start; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.service-number { color: #737d86; font: 600 .75rem 'Space Grotesk'; }
.service-card h3 { font-size: clamp(1.45rem,2.3vw,2.3rem); }
.service-card p { max-width: 600px; margin: .8rem 0 0; color: #596168; }
.service-arrow { font-size: 1.5rem; color: #777; }
.process { padding: 8rem 7vw; color: white; background: var(--ink); }
.process-intro { display: grid; grid-template-columns: .5fr 1.15fr .85fr; gap: 3vw; align-items: end; }
.process-intro .eyebrow { align-self: start; }
.process-intro > p:last-child { color: rgba(255,255,255,.64); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); margin: 6rem 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.2); }
.steps li { min-height: 240px; padding: 1.4rem 1.5rem 1.4rem 0; border-right: 1px solid rgba(255,255,255,.2); }
.steps li+li { padding-left: 1.5rem; }
.steps span { display: block; color: var(--amber); font: 600 .75rem 'Space Grotesk'; margin-bottom: 4.5rem; }
.steps strong { display: block; font: 600 1.4rem 'Space Grotesk'; }
.steps p { color: rgba(255,255,255,.58); font-size: .9rem; }
.company { display: grid; grid-template-columns: 1.1fr .9fr; gap: 9vw; }
.company-copy .lead { margin-top: 0; font: 500 clamp(1.35rem,2.2vw,2rem)/1.4 'Space Grotesk'; }
.company-copy > p:not(.lead) { color: #596168; }
dl { margin-top: 3rem; border-top: 1px solid var(--line); }
dl div { display: grid; grid-template-columns: 1fr 1.2fr; padding: 1rem 0; border-bottom: 1px solid var(--line); }
dt { color: #69727a; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
dd { margin: 0; font-weight: 700; }
.contact { padding: 8rem 7vw; color: white; background: #151c22; }
.contact h2 { max-width: 900px; }
.contact > p:not(.eyebrow) { margin: 2rem 0; color: rgba(255,255,255,.64); }
.contact-mail { color: white; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.contact-mail:hover,.contact-mail:focus-visible { color: #f0b429; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem 3.5vw; color: white; background: var(--ink); border-top: 1px solid rgba(255,255,255,.14); font-size: .8rem; }
footer p { margin: 0; color: rgba(255,255,255,.55); }
@media (max-width: 820px) {
  .site-header { padding: 1rem 5vw; }
  .menu-button { display: block; }
  nav { position: absolute; top: 100%; left: 0; width: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 5vw 1.5rem; background: rgba(11,16,21,.98); }
  nav.open { display: flex; }
  nav a { padding: .8rem 0; }
  .language-switch { padding: .7rem 0; }
  .hero-content { margin-left: 6vw; }
  .hero-media { background-image: linear-gradient(90deg,rgba(6,10,14,.9),rgba(6,10,14,.38)),url('primecrafters-hero.png'); background-position: 58% center; }
  .hero-index,.scroll-cue { display: none; }
  .section { padding: 5rem 6vw; }
  .services,.company { grid-template-columns: 1fr; gap: 4rem; }
  .section-heading { position: static; }
  .process { padding: 5rem 6vw; }
  .process-intro { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; margin-top: 4rem; }
  .steps li { min-height: 210px; }
  footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  h1 { font-size: clamp(3rem,16vw,4.6rem); }
  .brand-name { font-size: .85rem; }
  .hero-content { width: 88vw; margin-left: 6vw; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .service-card { grid-template-columns: 2.2rem 1fr; }
  .service-arrow { display: none; }
  .steps { grid-template-columns: 1fr; }
  .steps li,.steps li+li { min-height: 0; padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .steps span { margin-bottom: 1.5rem; }
  dl div { grid-template-columns: 1fr; gap: .3rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }