:root {
  --ink:#080a0d;
  --steel:#15191e;
  --paper:#f4f5f6;
  --white:#fff;
  --blue:#2187ff;
  --line:rgba(8,10,13,.16);
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.skip-link{position:fixed;left:1rem;top:-100px;background:#fff;padding:.8rem 1rem;z-index:100}
.skip-link:focus{top:1rem}
.site-header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,4vw,4rem);background:#fff;border-bottom:1px solid #ddd;position:relative;z-index:20}
.brand{height:68px;width:176px;display:grid;place-items:center}
.brand img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.08))}
.desktop-nav{display:flex;gap:2.5rem;font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.desktop-nav a{border-bottom:2px solid transparent}
.desktop-nav a:hover,.desktop-nav a:focus{border-color:var(--blue)}
.header-actions{display:flex;align-items:center;gap:1.5rem}
.language-toggle{border:0;background:transparent;padding:.5rem;color:#73777d;font-weight:700;cursor:pointer}
.language-toggle span{margin:0 .12rem}.language-toggle .active{color:var(--ink)}
.header-phone{font-weight:800}
.hero{min-height:calc(100vh - 84px);position:relative;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);color:white}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,5,8,.86) 0%,rgba(4,5,8,.63) 43%,rgba(4,5,8,.08) 75%),linear-gradient(0deg,rgba(4,5,8,.5),transparent 50%)}
.hero-content{position:relative;width:min(760px,90vw);padding:clamp(4rem,8vw,8rem) clamp(1.25rem,6vw,6rem);z-index:2}
.eyebrow{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.14em;font-size:.92rem;margin:0 0 1rem;color:#cfe4ff}
.eyebrow.dark{color:#326a9f}
h1,h2,h3{font-family:"Barlow Condensed",Arial,sans-serif;line-height:.95;margin:0;text-wrap:balance}
h1{font-size:clamp(3.4rem,8vw,7.8rem);text-transform:uppercase;max-width:850px}
h2{font-size:clamp(2.7rem,5vw,5.1rem);text-transform:uppercase}
h3{font-size:clamp(1.7rem,2.5vw,2.4rem);text-transform:uppercase}
.hero-copy{font-size:clamp(1rem,1.7vw,1.2rem);max-width:640px;margin:1.5rem 0 2rem;color:#e5e7e9}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:.8rem 1.4rem;font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border:2px solid transparent;cursor:pointer;transition:.2s ease}
.button-primary{background:var(--blue);color:white;border-color:var(--blue)}
.button-primary:hover,.button-primary:focus{background:#006ee6;border-color:#006ee6;transform:translateY(-2px)}
.button-ghost{border-color:white;color:white;background:rgba(0,0,0,.2)}
.button-ghost:hover,.button-ghost:focus{background:#fff;color:var(--ink)}
.hero-note{position:absolute;right:0;bottom:0;z-index:2;background:#fff;color:var(--ink);padding:1.05rem clamp(1rem,4vw,3rem);font-weight:700;border-left:5px solid var(--blue)}
.section{padding:clamp(5rem,9vw,9rem) clamp(1.25rem,6vw,6rem)}
.intro{max-width:1450px;margin:auto;display:grid;grid-template-columns:70px 1.5fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:start}
.section-number{font-family:"Barlow Condensed",sans-serif;font-size:1rem;font-weight:800;color:#6c737a;border-top:2px solid var(--ink);padding-top:.7rem}
.intro-body{font-size:1.12rem;margin:2.2rem 0 0;color:#4e555c}
.services{background:#fff}
.section-heading{max-width:var(--max);margin:0 auto 3rem;display:grid;grid-template-columns:1.5fr .7fr;gap:4rem;align-items:end}
.section-heading>p{color:#555d65;margin:0}
.section-heading.light>p{color:#bdc4cb}
.service-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.service-card{padding:clamp(2rem,4vw,3.5rem);min-height:330px;border-right:1px solid var(--line);position:relative}
.service-card:last-child{border-right:0}
.service-card.featured{background:var(--ink);color:white}
.service-index{display:block;font-family:"Barlow Condensed",sans-serif;color:#76808a;font-weight:800;margin-bottom:5rem}
.service-card h3{margin-bottom:1.2rem}
.service-card p{color:#5d646c;margin:0}.service-card.featured p{color:#bdc4cb}
.work{background:var(--ink);color:white}
.gallery{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.gallery-item{grid-column:span 4;margin:0;position:relative;overflow:hidden;min-height:360px;background:#222}
.gallery-item.gallery-large{grid-column:span 7;grid-row:span 2;min-height:740px}
.gallery-item.gallery-side{grid-column:span 5}
.gallery-item.wide{grid-column:span 8}
.gallery-item.compact{grid-column:span 4}
.gallery-item img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .5s ease}
.gallery-item:hover img{transform:scale(1.025)}
.gallery-item:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.gallery-item figcaption{position:absolute;left:1.4rem;right:1.4rem;bottom:1.25rem;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:1rem;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-size:1.3rem;font-weight:700}
.gallery-item small{font-size:.75rem;color:#d2d6da;white-space:nowrap}
.design-showcase{background:#fff}
.before-after{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1rem;background:var(--ink);padding:1rem}
.comparison-panel{margin:0;min-height:540px;position:relative;overflow:hidden;background:#171b20}
.comparison-panel img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.design-panel img{object-fit:contain;padding:4rem 1rem 1rem;background:#0a0c0f}
.comparison-label{position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;gap:.75rem;background:var(--blue);color:white;padding:.75rem 1rem;font-family:"Barlow Condensed",sans-serif;letter-spacing:.08em}
.comparison-label span{opacity:.72}.comparison-label strong{font-size:1rem}
.project-proof{max-width:var(--max);margin:1rem auto 0;display:grid;grid-template-columns:2fr 3fr;gap:1rem}
.proof-column{background:#f0f2f4;padding:1rem}
.proof-title{margin:0 0 .75rem;font-family:"Barlow Condensed",sans-serif;font-weight:800;letter-spacing:.1em;color:#53606c}
.proof-grid{display:grid;gap:.75rem;height:260px}
.proof-grid img{width:100%;height:100%;object-fit:cover;min-width:0;min-height:0}
.design-grid{grid-template-columns:1fr 1fr;background:#0a0c0f}.design-grid img{object-fit:contain}
.result-grid{grid-template-columns:repeat(3,1fr)}
.case-divider{max-width:var(--max);margin:clamp(5rem,9vw,9rem) auto 2rem;display:grid;grid-template-columns:140px 1.2fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start;border-top:2px solid var(--ink);padding-top:1.5rem}
.case-divider>span{font-family:"Barlow Condensed",sans-serif;font-weight:800;letter-spacing:.12em;color:#326a9f}.case-divider h3{font-size:clamp(2rem,3.4vw,3.5rem)}.case-divider p{margin:0;color:#5d646c}
.second-comparison{background:#e7eaed}.light-design-panel img{background:#eef0f2}
.second-proof{margin-top:1rem}.light-design-grid{background:#eef0f2}.white-result-grid{grid-template-columns:repeat(4,1fr)}
.concept-strip{max-width:var(--max);margin:clamp(4rem,7vw,7rem) auto 0;display:grid;grid-template-columns:.8fr 1.5fr;gap:clamp(2rem,5vw,5rem);align-items:center;border-top:1px solid var(--line);padding-top:clamp(2.5rem,5vw,4rem)}
.concept-copy h3{font-size:clamp(2rem,3.4vw,3.5rem);margin-bottom:1rem}.concept-copy>p:last-child{color:#5d646c}
.concept-images{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;background:#0a0c0f;padding:.75rem}
.concept-images img{width:100%;height:250px;object-fit:contain;background:#fff}
.process{max-width:1450px;margin:auto;display:grid;grid-template-columns:70px .7fr 1.3fr;gap:clamp(2rem,5vw,6rem)}
.process-steps{border-top:1px solid var(--line)}
.process-steps article{display:grid;grid-template-columns:40px 1fr 1.3fr;gap:1.5rem;padding:2rem 0;border-bottom:1px solid var(--line);align-items:start}
.process-steps span{width:30px;height:30px;background:var(--ink);color:white;display:grid;place-items:center;font-weight:700}
.process-steps h3{font-size:1.55rem}.process-steps p{margin:0;color:#5e656c}
.contact{background:#11151a;color:white;display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,8vw,8rem)}
.contact-info>p{max-width:560px;color:#c3c8ce}.contact-info>.eyebrow{color:#8bbfff}
.contact-links{display:grid;gap:1rem;margin-top:3rem}
.contact-links a{border-top:1px solid #40464d;padding-top:1rem;display:grid;gap:.15rem}
.contact-links small{font-size:.72rem;letter-spacing:.12em;color:#8f98a1}.contact-links strong{font-size:1.05rem}
.quote-form{display:grid;gap:1.1rem;background:#fff;color:var(--ink);padding:clamp(1.5rem,4vw,3rem)}
.quote-form label{display:grid;gap:.4rem;font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.quote-form input,.quote-form select,.quote-form textarea{width:100%;border:1px solid #c9cdd1;background:#f8f9fa;padding:.85rem;color:var(--ink);border-radius:0;text-transform:none}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:3px solid rgba(33,135,255,.25);border-color:var(--blue)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.submit-button{width:100%}.form-note{font-size:.76rem;color:#69717a;text-align:center;margin:0}
footer{background:#050607;color:#b8bec4;padding:2rem clamp(1.25rem,6vw,6rem);display:grid;grid-template-columns:180px 1fr auto;gap:2rem;align-items:center;font-size:.85rem}
footer img{width:180px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
footer p:last-child{text-align:right}
@media(max-width:900px){
  .desktop-nav{display:none}.site-header{height:74px}.brand{height:60px;width:145px}.header-phone{display:none}
  .hero{min-height:760px}.hero-overlay{background:linear-gradient(90deg,rgba(4,5,8,.86),rgba(4,5,8,.38)),linear-gradient(0deg,rgba(4,5,8,.7),transparent)}
  .intro,.process{grid-template-columns:50px 1fr}.intro-body,.process-steps{grid-column:2}
  .section-heading{grid-template-columns:1fr;gap:1rem}.service-grid{grid-template-columns:1fr}.service-card{border-right:0;border-bottom:1px solid var(--line);min-height:auto}.service-card:last-child{border-bottom:0}.service-index{margin-bottom:3rem}
  .gallery-item,.gallery-item.gallery-large,.gallery-item.gallery-side,.gallery-item.wide,.gallery-item.compact{grid-column:span 6;grid-row:auto;min-height:440px}
  .comparison-panel{min-height:430px}.project-proof{grid-template-columns:1fr}.case-divider{grid-template-columns:120px 1fr}.case-divider p{grid-column:2}.concept-strip{grid-template-columns:1fr}.concept-images img{height:220px}
  .contact{grid-template-columns:1fr}footer{grid-template-columns:160px 1fr}footer p:last-child{grid-column:1/-1;text-align:left}
}
@media(max-width:620px){
  .site-header{padding:0 1rem}.language-toggle{padding:.3rem}.hero{min-height:700px;align-items:center}.hero-content{padding:5rem 1.25rem 8rem}.hero-note{left:0;right:auto;font-size:.82rem}
  .section{padding:4.5rem 1.25rem}.intro,.process{display:block}.section-number{width:50px;margin-bottom:2rem}.intro-body{margin-top:2rem}
  .gallery{display:block}.gallery-item,.gallery-item.gallery-large,.gallery-item.gallery-side,.gallery-item.wide,.gallery-item.compact{min-height:330px;margin-bottom:1rem}
  .before-after{grid-template-columns:1fr;padding:.65rem}.comparison-panel{min-height:330px}.design-panel img{padding:3.5rem .5rem .5rem}.proof-grid{height:auto}.design-grid,.result-grid,.white-result-grid{grid-template-columns:1fr}.proof-grid img{height:240px}.case-divider{display:block}.case-divider h3{margin:1rem 0}.concept-images{grid-template-columns:1fr}.concept-images img{height:250px}
  .process-title{margin-bottom:2.5rem}.process-steps article{grid-template-columns:36px 1fr}.process-steps p{grid-column:2}
  .form-row{grid-template-columns:1fr}.quote-form{padding:1.3rem}
  footer{display:block}footer img{margin-bottom:1.2rem}footer p:last-child{text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}