:root {
    --bg: #070707;
    --bg-soft: #0d0d0e;
    --panel: #111113;
    --panel-2: #171719;
    --text: #f4f4f5;
    --muted: #a4a4aa;
    --line: rgba(255,255,255,.12);
    --line-strong: rgba(255,255,255,.22);
    --red: #e11b22;
    --red-dark: #a90c12;
    --container: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(5,5,5,.86); border-bottom: 1px solid transparent; backdrop-filter: blur(16px); transition: .25s ease; }
.site-header.scrolled { border-color: var(--line); background: rgba(5,5,5,.96); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-logo-shell { width: 62px; height: 44px; overflow: hidden; background: #000; display: grid; place-items: center; }
.brand-logo-shell img { width: 58px; height: 58px; object-fit: cover; filter: invert(1); }
.brand-name { font-weight: 800; letter-spacing: -.03em; font-size: 18px; }
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: 32px; }
.desktop-nav a { color: #d7d7da; font-size: 14px; position: relative; padding: 29px 0 25px; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:17px; height:2px; background:var(--red); transition:.2s ease; }
.desktop-nav a:hover { color:#fff; }
.desktop-nav a:hover::after { right:0; }
.desktop-cta { margin-left: 10px; }
.menu-toggle { display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--line); background:#111; border-radius:8px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.menu-toggle span { width:20px; height:2px; background:#fff; transition:.2s; }
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav { display:none; padding:8px 20px 20px; border-top:1px solid var(--line); background:#090909; }
.mobile-nav a { display:block; padding:14px 0; border-bottom:1px solid var(--line); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 20px; border:1px solid var(--line-strong); border-radius:6px; font-weight:750; letter-spacing:-.01em; transition:.2s ease; cursor:pointer; }
.btn:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.45); }
.btn-primary { border-color:var(--red); background:linear-gradient(135deg,var(--red),#c40f16); color:#fff; box-shadow:0 10px 30px rgba(225,27,34,.17); }
.btn-primary:hover { background:#f02129; border-color:#f02129; }
.btn-ghost { background:rgba(255,255,255,.03); }
.btn.full { width:100%; }
.text-link { color:#fff; border-bottom:1px solid var(--red); padding-bottom:3px; font-weight:650; }

.hero { position:relative; min-height:680px; display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.8) contrast(1.06); }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.90) 30%,rgba(0,0,0,.40) 60%,rgba(0,0,0,.18) 100%),linear-gradient(0deg,rgba(0,0,0,.78),transparent 45%); }
.hero-content { position:relative; z-index:2; padding:90px 0 108px; }
.eyebrow { color:#ff3138; text-transform:uppercase; font-size:12px; letter-spacing:.12em; font-weight:850; margin:0 0 15px; }
.eyebrow::before { content:""; display:inline-block; width:32px; height:1px; margin-right:10px; background:var(--red); vertical-align:middle; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { max-width:700px; font-size:clamp(44px,6vw,78px); line-height:.98; letter-spacing:-.055em; margin-bottom:24px; }
.hero h1 span { color:var(--red); }
.hero-copy { max-width:570px; color:#c7c7cb; font-size:18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-rail { position:absolute; z-index:2; right:28px; bottom:26px; display:flex; gap:6px; }
.hero-rail span { width:32px; height:2px; background:rgba(255,255,255,.35); }.hero-rail span:first-child{background:var(--red)}

.section { padding:92px 0; }
.section-heading { margin-bottom:38px; }
.section-heading.center { text-align:center; max-width:740px; margin-inline:auto; margin-bottom:42px; }
.section-heading.split { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.section-heading h2,.comparison-copy h2,.cta-band h2,.about-grid h2,.contact-info h2 { font-size:clamp(30px,4vw,50px); letter-spacing:-.045em; line-height:1.06; margin-bottom:12px; }
.section-heading p:last-child { color:var(--muted); }

.services-strip { background:linear-gradient(180deg,#090909,#0b0b0c); }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.service-card { min-height:240px; padding:26px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(160deg,#171719,#0f0f10); position:relative; overflow:hidden; transition:.25s ease; }
.service-card::before { content:""; position:absolute; inset:auto -40px -70px auto; width:160px; height:160px; border-radius:50%; background:rgba(225,27,34,.08); filter:blur(10px); }
.service-card:hover { border-color:rgba(225,27,34,.65); transform:translateY(-4px); background:#151516; }
.service-icon { width:48px; height:48px; border:1px solid rgba(225,27,34,.5); display:grid; place-items:center; color:#ff272f; border-radius:8px; font-size:24px; margin-bottom:24px; }
.service-card h3 { font-size:20px; line-height:1.15; margin-bottom:11px; }
.service-card p { color:var(--muted); font-size:14px; }
.service-card .arrow { position:absolute; right:20px; bottom:16px; font-size:22px; color:#fff; }

.comparison-section { border-block:1px solid var(--line); background:#080808; }
.comparison-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:54px; align-items:center; }
.comparison-copy p:not(.eyebrow) { color:var(--muted); max-width:430px; }
.before-after {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background: #101011;
    box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.025);
    cursor: ew-resize;
}

.before-after::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 18%, transparent 76%, rgba(0,0,0,.18));
}

    .before-after img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

.after-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    overflow: hidden;
    clip-path: inset( 0 calc(100% - var(--position)) 0 0 );
}

    .after-layer img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
.ba-divider {
    position:absolute;
    z-index:4;
    left:var(--position);
    top:0;
    bottom:0;
    width:3px;
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateX(-50%);
    background:linear-gradient(180deg, rgba(255,255,255,.96), var(--red) 24%, #ff555b 50%, var(--red) 76%, rgba(255,255,255,.96));
    box-shadow:0 0 0 1px rgba(0,0,0,.22), 0 0 14px rgba(225,27,34,.45), 0 0 28px rgba(225,27,34,.2);
}
.ba-divider::before,
.ba-divider::after {
    content:"";
    position:absolute;
    left:50%;
    width:9px;
    height:34px;
    transform:translateX(-50%);
    border-radius:999px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
    opacity:.8;
}
.ba-divider::before { top:7%; }
.ba-divider::after { bottom:7%; }
.ba-divider > span {
    position:relative;
    width:60px;
    height:60px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border:2px solid rgba(255,255,255,.92);
    border-radius:50%;
    color:transparent;
    font-size:0;
    background:radial-gradient(circle at 35% 28%, #37373a 0, #18181a 38%, #090909 75%);
    box-shadow:0 0 0 5px rgba(225,27,34,.2), 0 10px 28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.22);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ba-divider > span::before,
.ba-divider > span::after {
    content:"";
    position:absolute;
    top:50%;
    width:10px;
    height:10px;
    border-top:2px solid #fff;
    border-left:2px solid #fff;
}
.ba-divider > span::before { left:14px; transform:translateY(-50%) rotate(-45deg); }
.ba-divider > span::after { right:14px; transform:translateY(-50%) rotate(135deg); }
.ba-handle i {
    width:3px;
    height:20px;
    border-radius:999px;
    background:var(--red);
    box-shadow:0 0 8px rgba(225,27,34,.8);
}
.ba-range { position:absolute; z-index:5; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.before-after:hover .ba-divider > span,
.before-after:has(.ba-range:focus-visible) .ba-divider > span {
    transform:scale(1.07);
    border-color:#fff;
    box-shadow:0 0 0 6px rgba(225,27,34,.28), 0 12px 32px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.25);
}
.before-after:has(.ba-range:active) .ba-divider > span { transform:scale(.97); }
.before-after:has(.ba-range:focus-visible) { outline:2px solid rgba(255,255,255,.9); outline-offset:4px; }
.ba-label { position:absolute; bottom:16px; z-index:3; padding:7px 11px; border-radius:5px; font-weight:800; font-size:13px; background:rgba(0,0,0,.78); backdrop-filter:blur(8px); }
.before-label { right:16px; }.after-label { left:16px; background:rgba(225,27,34,.9); }

.projects-preview { background:#0b0b0c; }
.masonry-preview { display:grid; grid-template-columns:1.2fr .8fr .8fr; grid-template-rows:230px 230px; gap:12px; }
.project-tile { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:10px; }
.project-tile.wide { grid-row:span 2; }.project-tile.tall { grid-row:span 2; }
.project-tile img { width:100%; height:100%; object-fit:cover; transition:.45s ease; }
.project-tile::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.85)); }
.project-tile span { position:absolute; z-index:2; left:18px; bottom:14px; font-weight:800; }
.project-tile:hover img { transform:scale(1.04); }

.why-us { background:#080808; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.feature { background:#0d0d0e; padding:32px; min-height:220px; }
.feature span,.process-grid span { display:inline-block; color:var(--red); font-weight:900; font-size:12px; letter-spacing:.12em; margin-bottom:34px; }
.feature h3 { font-size:19px; }.feature p { color:var(--muted); font-size:14px; }

.cta-band { padding:68px 0; border-block:1px solid rgba(225,27,34,.28); background:radial-gradient(circle at 20% 50%,rgba(225,27,34,.15),transparent 28%),#0c0c0d; }
.cta-band-inner { display:flex; justify-content:space-between; align-items:center; gap:28px; }.cta-band h2{max-width:760px;margin:0}.cta-band .eyebrow{margin-bottom:10px}

.page-hero { position:relative; min-height:470px; display:flex; align-items:end; overflow:hidden; border-bottom:1px solid var(--line); }
.page-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.55) 55%,rgba(0,0,0,.3)),linear-gradient(0deg,#070707 0%,transparent 55%); }
.page-hero-content { position:relative; z-index:2; padding:110px 0 70px; }
.page-hero h1 { font-size:clamp(40px,5vw,68px); line-height:1; letter-spacing:-.05em; max-width:800px; margin-bottom:18px; }
.page-hero p:last-child { color:#c8c8cc; max-width:650px; font-size:17px; }
.compact-hero img { object-position:center 45%; }.contact-hero img { object-position:center 55%; }

.service-detail-list { display:grid; gap:24px; }
.service-detail { display:grid; grid-template-columns:80px 1fr 1.05fr; gap:30px; align-items:center; padding:28px; background:#0e0e0f; border:1px solid var(--line); border-radius:12px; scroll-margin-top:110px; }
.service-detail.reverse { grid-template-columns:80px 1.05fr 1fr; }.service-detail.reverse img { grid-column:2; grid-row:1; }.service-detail.reverse > div:nth-child(2) { grid-column:3; }
.service-detail .number { align-self:start; color:var(--red); font-size:13px; font-weight:900; letter-spacing:.15em; }
.service-detail h2 { font-size:34px; letter-spacing:-.04em; margin-bottom:12px; }.service-detail p,.service-detail li{color:var(--muted)}
.service-detail ul { margin:18px 0 0; padding-left:20px; }.service-detail img { width:100%; height:310px; object-fit:cover; border-radius:8px; }

.project-page { background:#090909; }.project-ba { max-width:1000px; margin:0 auto 54px; }.gallery-toolbar { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.filter-btn { border:1px solid var(--line); background:#111; border-radius:999px; padding:10px 17px; cursor:pointer; font-weight:700; }
.filter-btn:hover,.filter-btn.active { border-color:var(--red); background:rgba(225,27,34,.14); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gallery-card { position:relative; min-height:280px; border:1px solid var(--line); padding:0; background:#111; overflow:hidden; border-radius:10px; cursor:zoom-in; text-align:left; }
.gallery-card[hidden] { display:none; }.gallery-card img { width:100%; height:100%; min-height:280px; object-fit:cover; transition:.4s ease; }.gallery-card:hover img{transform:scale(1.04)}
.gallery-card::after{content:"";position:absolute;inset:60% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.88));}.gallery-card span{position:absolute;z-index:2;left:16px;bottom:14px;font-weight:800}
.lightbox { position:fixed; z-index:100; inset:0; background:rgba(0,0,0,.93); display:none; place-items:center; padding:60px 24px 30px; }.lightbox.open{display:grid}.lightbox img{max-width:min(1200px,94vw);max-height:80vh;border-radius:8px}.lightbox p{margin:14px 0 0;text-align:center;color:#ddd}.lightbox-close{position:absolute;right:24px;top:18px;background:transparent;border:0;font-size:42px;cursor:pointer}

.about-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center; }.about-grid .lead{font-size:20px;color:#d7d7d9}.about-grid p:not(.eyebrow){color:var(--muted)}.about-image img{height:520px;width:100%;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.process-section{background:#0b0b0c;border-block:1px solid var(--line)}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.process-grid article{padding:30px;border:1px solid var(--line);background:#111113;border-radius:9px}.process-grid p{color:var(--muted)}.image-band{padding-top:30px}.image-band img{width:100%;max-height:600px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}

.contact-section{background:#090909}.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:46px;align-items:start}.contact-info>p{color:var(--muted)}.contact-cards{display:grid;gap:10px;margin-top:30px}.contact-cards>div{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.contact-cards span{color:var(--muted)}.contact-cards a{font-weight:800;color:#fff}.contact-form-card{background:#111113;border:1px solid var(--line);border-radius:12px;padding:30px}.contact-form{display:grid;gap:18px}.form-row{display:grid;gap:8px}.form-row label{font-weight:750;font-size:14px}.form-row input,.form-row textarea{width:100%;border:1px solid var(--line-strong);background:#090909;color:#fff;border-radius:6px;padding:14px 15px;outline:none}.form-row input:focus,.form-row textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(225,27,34,.12)}.form-row span{color:#ff6b70;font-size:13px}.validation-summary{color:#ff6b70}.form-note{font-size:12px;color:var(--muted);margin:0}.form-note code{color:#ddd}.success-message{background:rgba(35,160,90,.12);border:1px solid rgba(35,160,90,.4);padding:14px;border-radius:7px;margin-bottom:20px;color:#c7f3d9}

.site-footer { padding:64px 0 22px; border-top:1px solid var(--line); background:#050505; }.footer-grid{display:grid;grid-template-columns:1.5fr .65fr .85fr;gap:50px}.footer-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.footer-grid p,.footer-note{color:var(--muted);font-size:14px;max-width:460px}.footer-grid h3{font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}.footer-grid a:not(.brand){color:#cacacd;font-size:14px}.footer-grid a:hover{color:#fff}.footer-bottom{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;color:#6f6f75;font-size:12px}

.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px){
    .desktop-nav,.desktop-cta{display:none}.menu-toggle{display:flex}.mobile-nav.open{display:block}.nav-wrap{min-height:70px}.brand-name{font-size:16px}
    .hero{min-height:620px}.hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.97),rgba(0,0,0,.74) 62%,rgba(0,0,0,.35)),linear-gradient(0deg,rgba(0,0,0,.8),transparent)}
    .service-grid,.feature-grid,.process-grid{grid-template-columns:repeat(2,1fr)}.comparison-grid,.about-grid,.contact-layout{grid-template-columns:1fr}.comparison-copy{max-width:700px}
    .masonry-preview{grid-template-columns:1fr 1fr;grid-template-rows:300px 300px}.project-tile.wide,.project-tile.tall{grid-row:auto}.masonry-preview .project-tile:last-child{display:none}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}.service-detail,.service-detail.reverse{grid-template-columns:56px 1fr}.service-detail img,.service-detail.reverse img{grid-column:1/-1;grid-row:auto;height:360px}.service-detail.reverse>div:nth-child(2){grid-column:2}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
}
@media (max-width: 640px){
    .container{width:min(calc(100% - 28px),var(--container))}.section{padding:66px 0}.hero{min-height:660px;align-items:end}.hero-bg{object-position:62% center}.hero-overlay{background:linear-gradient(0deg,rgba(0,0,0,.99) 0%,rgba(0,0,0,.91) 50%,rgba(0,0,0,.35) 100%)}.hero-content{padding:160px 0 62px}.hero h1{font-size:47px}.hero-copy{font-size:16px}.hero-actions{display:grid}.hero-actions .btn{width:100%}.hero-rail{display:none}
    .service-grid,.feature-grid,.process-grid,.gallery-grid{grid-template-columns:1fr}.service-card{min-height:200px}.section-heading.split{align-items:flex-start;flex-direction:column}.comparison-grid{gap:28px}.before-after{aspect-ratio:4/3}.after-layer img{width:100vw}.masonry-preview{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,250px)}.masonry-preview .project-tile:last-child{display:none}.masonry-preview .project-tile.tall{display:block}
    .cta-band-inner{align-items:flex-start;flex-direction:column}.cta-band .btn{width:100%}.page-hero{min-height:420px}.page-hero-content{padding:120px 0 48px}.page-hero h1{font-size:42px}.service-detail,.service-detail.reverse{grid-template-columns:1fr;padding:20px}.service-detail .number{margin-bottom:-16px}.service-detail.reverse>div:nth-child(2){grid-column:auto}.service-detail img,.service-detail.reverse img{grid-column:auto;height:260px}.contact-form-card{padding:20px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.brand-logo-shell{width:54px}.brand-name{font-size:15px}.gallery-card,.gallery-card img{min-height:240px}
}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}}