:root {
  --bg:#0c0c0c;
  --fg:#f3f3f3;
  --muted:#8a8a8a;
  --line:#1a1a1a;
  --accent:#ffffff;
  --shell-wide:min(1200px, 94vw);
  --shell-default:min(1040px, 92vw);
  --shell-narrow:min(820px, 88vw);
  --font:sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Helvetica Neue', Helvetica, Arial, var(--font);
  line-height:1.6;
  letter-spacing:0.01em;
}
a { color:inherit; text-decoration:none; }
a:hover, a:focus-visible { color:var(--accent); }
img { max-width:100%; height:auto; display:block; }

.shell { width:var(--shell-default); margin:0 auto; padding:3.5rem 0; }
.shell.wide { width:var(--shell-wide); }
.shell.narrow { width:var(--shell-narrow); }

.masthead {
  position:sticky;
  top:0;
  z-index:90;
  background:rgba(12,12,12,0.96);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.masthead .shell { padding:1.75rem 0; }
.masthead-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.masthead-brand { display:flex; flex-direction:column; gap:0.35rem; text-transform:uppercase; letter-spacing:0.18em; font-size:0.78rem; }
.brand-mark { font-weight:700; font-size:1.05rem; }
.brand-context { color:var(--muted); font-size:0.68rem; }
.masthead-nav {
  display:flex;
  align-items:center;
  gap:1.35rem;
  margin-left:auto;
  flex-wrap:nowrap;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.72rem;
}
.masthead-nav a { display:inline-flex; align-items:center; justify-content:center; padding:0.4rem 0; min-height:2.2rem; border-bottom:1px solid transparent; transition:border-color 0.2s ease, color 0.2s ease; }
.masthead-nav a:hover, .masthead-nav a:focus-visible { border-color:var(--accent); color:var(--accent); }
.lang-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.4rem 0;
  min-height:2.2rem;
  border:none;
  border-bottom:2px solid var(--accent);
  text-transform:uppercase;
  letter-spacing:0.28em;
  font-size:0.72rem;
  font-weight:600;
  color:var(--accent);
  transition:border-bottom-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.lang-toggle:hover, .lang-toggle:focus-visible { 
  border-bottom-color:var(--fg); 
  color:var(--fg);
  transform:translateY(-2px);
}

.hero { border-bottom:1px solid var(--line); overflow:hidden; }
.hero .shell { padding:5.5rem 0 4.5rem; }
.hero-grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:2.5rem; align-items:center; }
.hero-copy { grid-column:1 / span 7; }
.hero-visual { 
  grid-column:8 / span 5; 
  position:relative; 
  max-width:640px; 
  margin-left:auto; 
  overflow:hidden; 
  border:1px solid var(--line);
}
.hero-visual::before {
  content:'';
  position:absolute;
  inset:-50%;
  background:radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  opacity:0;
  z-index:1;
  pointer-events:none;
  transition:opacity 0.6s ease;
}
.hero-visual:hover::before {
  opacity:1;
}
.hero-visual picture { display:block; position:relative; z-index:2; }
.hero-visual img { 
  width:100%; 
  height:auto; 
  object-fit:cover; 
  max-height:800px;
  filter:grayscale(40%) contrast(1.15) brightness(0.95);
  transition:transform 0.6s ease, filter 0.6s ease, box-shadow 0.6s ease;
  box-shadow:0 0 0 rgba(255,255,255,0);
}
.hero-visual:hover img {
  transform:scale(1.06);
  filter:grayscale(0%) contrast(1.25) brightness(1.05);
  box-shadow:0 0 60px rgba(255,255,255,0.25), 0 0 120px rgba(255,255,255,0.15);
}
.eyebrow { text-transform:uppercase; letter-spacing:0.28em; font-size:0.68rem; color:var(--muted); margin:0 0 1.5rem; }
.hero h1 { margin:0 0 1.75rem; font-size:3.5rem; line-height:1; text-transform:uppercase; letter-spacing:0.08em; max-width:18ch; }
.lede { max-width:32ch; margin:0 0 2.5rem; color:#c5c5c5; font-size:1.05rem; }
.hero-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.85rem 1.9rem;
  border:1px solid var(--accent);
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.68rem;
  font-weight:600;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn.primary { background:var(--accent); color:var(--bg); }
.btn.primary:hover, .btn.primary:focus-visible { background:transparent; color:var(--accent); }
.btn.ghost { background:transparent; color:var(--accent); }
.btn.ghost:hover, .btn.ghost:focus-visible { background:var(--accent); color:var(--bg); }

.panel { border-top:1px solid var(--line); }
.section-header { display:flex; flex-direction:column; gap:1.25rem; margin-bottom:3.5rem; text-transform:uppercase; letter-spacing:0.18em; font-size:0.8rem; }
.section-header.compact { margin-bottom:2.75rem; }
.section-header h2 { margin:0; font-size:2rem; letter-spacing:0.18em; font-weight:600; }
.section-header p { margin:0; max-width:42ch; color:var(--muted); text-transform:none; letter-spacing:0.02em; font-size:0.95rem; line-height:1.7; }

.metrics-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:2.5rem; }
.metric { border:1px solid var(--line); padding:1.75rem 1.5rem; display:flex; flex-direction:column; gap:1rem; min-height:180px; }
.metric-value { font-size:2.4rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; }
.metric-label { color:#b0b0b0; font-size:0.9rem; line-height:1.5; }

.services-grid { display:grid; grid-template-columns:repeat(4, minmax(200px, 1fr)); gap:2rem; }
.service-card { border:1px solid var(--line); padding:2rem 1.75rem; display:flex; flex-direction:column; gap:1.25rem; min-height:230px; transition:background 0.2s ease, transform 0.2s ease; }
.service-card:hover { background:#111; transform:translateY(-6px); }
.service-card h3 { margin:0; font-size:1.1rem; text-transform:uppercase; letter-spacing:0.16em; }
.service-card p { margin:0; color:#c7c7c7; font-size:0.95rem; line-height:1.6; }

.client-strip { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:2rem; border:1px solid var(--line); padding:2.25rem 2rem; background:#0f0f0f; }
.client img { width:140px; height:auto; filter:grayscale(100%) brightness(0.9); opacity:0.85; transition:opacity 0.2s ease, filter 0.2s ease; }
.client img:hover { opacity:1; filter:none; }

.gallery-grid { display:grid; grid-template-columns:repeat(4, minmax(160px, 1fr)); gap:1.25rem; }
.gallery-item { position:relative; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; }
.gallery-item img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.1); transition:transform 0.4s ease, filter 0.4s ease; }
.gallery-item:hover img { transform:scale(1.05); filter:grayscale(20%) contrast(1.2); }

.contact { padding-bottom:5rem; }
.contact-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; align-items:start; }
.contact-card { border:1px solid var(--line); padding:2.25rem 2rem; display:flex; flex-direction:column; gap:1.5rem; background:#0f0f0f; min-height:260px; }
.contact-card h3 { margin:0; text-transform:uppercase; letter-spacing:0.18em; font-size:1rem; }
.contact-card ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.85rem; }
.contact-card a { border-bottom:1px solid transparent; padding-bottom:0.15rem; }
.contact-card a:hover, .contact-card a:focus-visible { border-color:var(--accent); }
.note { color:var(--muted); font-size:0.85rem; line-height:1.6; }
.cta-row { display:flex; flex-wrap:wrap; gap:1rem; }
.mark { width:180px; mix-blend-mode:screen; filter:invert(1); }

.site-footer { border-top:1px solid var(--line); text-transform:uppercase; letter-spacing:0.18em; font-size:0.65rem; text-align:center; }
.site-footer .shell { padding:2.5rem 0; }
.site-footer p { margin:0; color:var(--muted); }

#consent-banner { position:fixed; inset:auto 2rem 2rem 2rem; background:rgba(12,12,12,0.96); border:1px solid var(--line); padding:1.75rem; z-index:999; }
#consent-banner[hidden] { display:none !important; }
.cb-panel { display:flex; flex-direction:column; gap:1.25rem; }
.cb-copy { display:flex; flex-direction:column; gap:0.75rem; }
#cb-title { margin:0; text-transform:uppercase; letter-spacing:0.22em; font-size:0.75rem; }
#cb-desc { margin:0; color:var(--muted); font-size:0.85rem; line-height:1.6; }
#cb-more { font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); }
.cb-actions { display:flex; flex-wrap:wrap; gap:0.75rem; }
.cb-actions button { background:transparent; color:var(--fg); border:1px solid var(--line); padding:0.65rem 1.4rem; text-transform:uppercase; letter-spacing:0.18em; font-size:0.65rem; cursor:pointer; transition:background 0.2s ease, border-color 0.2s ease; }
#cb-accept { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.cb-actions button:hover, .cb-actions button:focus-visible { border-color:var(--accent); background:rgba(255,255,255,0.08); }
#cb-accept:hover, #cb-accept:focus-visible { background:transparent; color:var(--accent); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

@media (max-width:1060px) {
  .hero-grid { grid-template-columns:repeat(2, 1fr); }
  .hero-copy { grid-column:1 / span 2; }
  .hero-visual { grid-column:1 / span 2; }
  .services-grid { grid-template-columns:repeat(2, minmax(200px, 1fr)); }
  .contact-grid { grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:760px) {
  .masthead { position:relative !important; }
  .masthead .shell { padding:1.1rem 0; }
  .masthead-inner { gap:0.75rem; }
  .brand-context { display:none; }
  .masthead-nav { gap:0.75rem; letter-spacing:0.18em; white-space:nowrap; }
  .masthead-nav a:not(.lang-toggle) { display:none !important; }
  .hero .shell { padding:4rem 0 3rem; }
  .hero h1 { font-size:2.6rem; }
  .hero-grid { gap:2rem; }
  .metric { min-height:auto; }
  .client-strip { justify-content:flex-start; }
  .gallery-grid { grid-template-columns:repeat(2, minmax(140px, 1fr)); }
  .contact-grid { grid-template-columns:1fr; }
  .contact-card { min-height:auto; }
  #consent-banner { inset:auto 1rem 1rem 1rem; }
}

@media (max-width:520px) {
  .masthead { position:relative; }
  body { letter-spacing:0.02em; }
  .shell { padding:3rem 0; width:min(94vw, 440px); }
  .hero h1 { font-size:2.1rem; }
  .services-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .btn { width:100%; justify-content:flex-start; }
  .masthead-nav { gap:0.5rem; letter-spacing:0.16em; }
}