:root { --ink:#173027; --deep:#21332d; --paper:#f4f0e6; --surface:#fffdf7; --soft:#e6e0d2; --accent:#d9663c; --sage:#a9ba9f; --muted:#666c66; --line:#cbc6b9; --max:1160px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:17px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
body:has(dialog[open]) { overflow:hidden; }
a { color:inherit; } img { display:block; max-width:100%; } button,input,select,textarea { font:inherit; }
.skip-link { position:fixed; z-index:100; top:-5rem; left:1rem; padding:.8rem 1rem; background:white; }.skip-link:focus { top:1rem; }
.site-header { min-height:72px; max-width:var(--max); margin:auto; padding:14px 26px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-decoration:none; }
.brand-mark { width:31px; height:31px; display:grid; place-items:center; color:white; background:var(--deep); font:700 .58rem ui-monospace,monospace; }
nav { display:flex; gap:23px; align-items:center; } nav a { font-size:.76rem; font-weight:650; text-decoration:none; }.nav-cta { padding:8px 12px; border:1px solid var(--ink); }
.language-switch { justify-self:end; display:flex; border:1px solid var(--line); }.language-switch button { width:38px; height:32px; padding:0; color:var(--muted); background:transparent; border:0; border-right:1px solid var(--line); font:700 .62rem ui-monospace,monospace; cursor:pointer; }.language-switch button:last-child { border:0; }.language-switch button.is-active { color:white; background:var(--deep); }
.hero { max-width:var(--max); margin:auto; padding:70px 26px 78px; display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:center; }
.eyebrow { margin:0 0 15px; color:var(--accent); font:800 .67rem/1.3 ui-monospace,monospace; text-transform:uppercase; letter-spacing:.12em; }
h1,h2,h3 { margin-top:0; line-height:1.09; } h1 { max-width:720px; margin-bottom:23px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(3.25rem,6.9vw,6rem); font-weight:500; letter-spacing:-.058em; }
.hero-intro { max-width:650px; margin:0; color:#52615a; font-size:1rem; line-height:1.75; }.hero-actions { margin-top:30px; display:flex; flex-wrap:wrap; gap:10px; }.button { min-height:48px; padding:12px 18px; display:inline-flex; align-items:center; gap:18px; border:1px solid var(--deep); font-size:.8rem; font-weight:750; text-decoration:none; }.button b { font-weight:500; }.button-primary { color:white; background:var(--deep); }.button-secondary { background:transparent; }.hero-hint { max-width:500px; margin:18px 0 0; color:var(--muted); font-size:.72rem; }
.hero-image { position:relative; justify-self:end; width:min(100%,410px); }.hero-image::before { content:""; position:absolute; inset:18px -18px -18px 18px; background:var(--sage); }.hero-image img { position:relative; z-index:1; width:100%; height:530px; object-fit:cover; filter:saturate(.8); }.image-stamp { position:absolute; z-index:2; right:-28px; bottom:34px; min-width:220px; padding:16px 19px; background:var(--accent); color:white; transform:rotate(-2deg); }.image-stamp span,.image-stamp strong { display:block; }.image-stamp span { font:.58rem ui-monospace,monospace; letter-spacing:.12em; }.image-stamp strong { margin-top:3px; font:500 1.08rem Georgia,serif; }
.trust-band { padding:23px max(26px,calc((100vw - var(--max))/2 + 26px)); display:grid; grid-template-columns:repeat(3,1fr); gap:30px; color:white; background:var(--deep); }.trust-band p { margin:0; }.trust-band span,.trust-band strong { display:block; }.trust-band span { color:var(--sage); font:.6rem ui-monospace,monospace; text-transform:uppercase; letter-spacing:.1em; }.trust-band strong { margin-top:3px; font-size:.8rem; }
.section { padding:92px max(26px,calc((100vw - var(--max))/2 + 26px)); }.section-heading { margin-bottom:43px; display:flex; justify-content:space-between; align-items:end; gap:50px; }.section-heading h2,.area-section h2,.inquiry-section h2 { max-width:690px; margin:0; font:500 clamp(2.2rem,4.7vw,4rem)/1.05 Georgia,serif; letter-spacing:-.04em; }.section-heading>p { max-width:420px; margin:0; color:var(--muted); font-size:.86rem; }
.services-section { background:var(--surface); }.services-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }.services-grid article { min-height:270px; padding:26px 25px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.services-grid article:first-child { border-left:1px solid var(--line); }.services-grid span,.process-grid span { color:var(--accent); font:700 .64rem ui-monospace,monospace; }.services-grid h3 { margin:74px 0 12px; font:500 1.45rem Georgia,serif; }.services-grid p { margin:0; color:var(--muted); font-size:.82rem; }
.projects-section { background:var(--soft); }.projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }.project-card { min-height:335px; display:grid; grid-template-columns:48% 52%; overflow:hidden; background:var(--surface); border:1px solid var(--line); }.project-media { position:relative; min-height:335px; padding:0; overflow:hidden; background:#c5c2b9; border:0; cursor:pointer; }.project-media img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }.project-media:hover img { transform:scale(1.025); }.project-index,.photo-count { position:absolute; z-index:2; padding:6px 8px; font:700 .61rem ui-monospace,monospace; }.project-index { top:11px; left:11px; background:var(--surface); }.photo-count { right:11px; bottom:11px; color:white; background:rgba(23,48,39,.88); }.project-body { padding:25px; display:flex; flex-direction:column; }.project-type,.gallery-type { margin:0; color:var(--accent); font:750 .61rem ui-monospace,monospace; text-transform:uppercase; letter-spacing:.08em; }.project-body h3 { margin:9px 0 12px; font:500 1.35rem Georgia,serif; }.project-body>p:not(.project-type) { margin:0; color:var(--muted); font-size:.79rem; }.project-body ul { margin:18px 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:5px; list-style:none; }.project-body li { padding:3px 6px; border:1px solid var(--line); font-size:.57rem; }.case-link { margin-top:auto; padding:11px 0 0; display:flex; justify-content:space-between; color:var(--ink); background:none; border:0; border-top:1px solid var(--line); font-size:.7rem; font-weight:750; cursor:pointer; }
.process-section { color:white; background:var(--deep); }.process-section .section-heading { max-width:830px; }.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#53665e; border:1px solid #53665e; }.process-grid article { min-height:270px; padding:28px; background:#294039; }.process-grid h3 { margin:70px 0 11px; font:500 1.35rem Georgia,serif; }.process-grid p { margin:0; color:#c2cec7; font-size:.82rem; }
.area-section { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start; background:var(--paper); }.area-copy>p { margin:3px 0 28px; color:var(--muted); }.area-copy ul { margin:0; padding:0; border-top:1px solid var(--line); list-style:none; }.area-copy li { padding:14px 0; border-bottom:1px solid var(--line); font-size:.78rem; }
.inquiry-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:85px; color:white; background:var(--accent); }.inquiry-intro>p:not(.eyebrow) { color:#ffe3d8; }.inquiry-section .eyebrow { color:#ffe3d8; }.direct-contact { margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.45); }.direct-contact p { margin:0 0 12px; color:#ffe3d8; font-size:.68rem; }.direct-contact a { display:block; width:max-content; margin:7px 0; font-size:.78rem; font-weight:700; text-decoration:none; }
.inquiry-form { padding:30px; color:var(--ink); background:var(--surface); }.inquiry-form label { display:block; margin-bottom:17px; }.inquiry-form label>span { display:block; margin-bottom:7px; font-size:.67rem; font-weight:750; }.inquiry-form input,.inquiry-form select,.inquiry-form textarea { width:100%; padding:11px 12px; color:var(--ink); background:white; border:1px solid var(--line); border-radius:0; font-size:.82rem; }.inquiry-form textarea { resize:vertical; }.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }.photo-note { margin:4px 0 10px; color:var(--muted); font-size:.67rem; }.form-error { min-height:20px; margin:6px 0; color:#9b291f; font-size:.7rem; font-weight:700; }.send-buttons { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.send-buttons button { min-height:50px; padding:10px 13px; display:flex; justify-content:space-between; gap:10px; color:white; background:var(--deep); border:0; font-size:.72rem; font-weight:750; cursor:pointer; }.send-buttons .send-tg { color:var(--deep); background:var(--sage); }
.gallery-dialog { width:min(1050px,calc(100% - 30px)); max-width:none; max-height:calc(100% - 30px); padding:0; color:var(--ink); background:var(--surface); border:0; }.gallery-dialog::backdrop { background:rgba(12,27,22,.88); }.gallery-shell { position:relative; min-height:min(720px,calc(100vh - 30px)); display:grid; grid-template-columns:56% 44%; }.gallery-close { position:absolute; z-index:5; top:12px; right:12px; width:42px; height:42px; padding:0 0 3px; color:white; background:var(--deep); border:1px solid #718079; border-radius:50%; font-size:1.7rem; cursor:pointer; }.gallery-stage { position:relative; min-height:540px; display:grid; place-items:center; background:#10221c; }.gallery-stage img { max-height:calc(100vh - 55px); width:auto; height:auto; object-fit:contain; }.gallery-arrow { position:absolute; z-index:3; top:50%; width:43px; height:58px; transform:translateY(-50%); color:white; background:rgba(33,51,45,.82); border:1px solid #718079; font-size:2rem; cursor:pointer; }.gallery-previous { left:10px; }.gallery-next { right:10px; }.gallery-details { padding:70px 34px 32px; overflow-y:auto; }.gallery-heading { padding-bottom:25px; border-bottom:1px solid var(--line); }.gallery-heading h2 { margin:8px 0 12px; font:500 1.8rem Georgia,serif; }.gallery-heading>p:last-child { margin:0; color:var(--muted); font:.7rem ui-monospace,monospace; }.case-facts { margin:0; }.case-facts div { padding:18px 0; border-bottom:1px solid var(--line); }.case-facts dt { color:var(--accent); font:700 .61rem ui-monospace,monospace; text-transform:uppercase; letter-spacing:.08em; }.case-facts dd { margin:7px 0 0; color:var(--muted); font-size:.82rem; }
footer { padding:22px max(26px,calc((100vw - var(--max))/2 + 26px)); display:flex; justify-content:space-between; gap:20px; color:#aebbb5; background:#10221c; font:.61rem ui-monospace,monospace; text-transform:uppercase; letter-spacing:.07em; }
@media (max-width:960px) { .site-header { grid-template-columns:1fr auto; }.site-header nav { display:none; }.hero { grid-template-columns:1fr; gap:45px; }.hero-image { justify-self:start; width:min(82%,500px); }.services-grid { grid-template-columns:1fr; }.services-grid article { min-height:210px; border-left:1px solid var(--line); }.services-grid h3 { margin-top:42px; }.projects-grid { grid-template-columns:1fr; }.process-grid { grid-template-columns:1fr; }.process-grid article { min-height:220px; }.process-grid h3 { margin-top:43px; } }
@media (max-width:720px) { body { font-size:16px; }.site-header { min-height:64px; padding-inline:19px; }.brand span:last-child { display:none; }.hero { padding:50px 21px 66px; }.hero h1 { font-size:3.45rem; }.hero-actions { flex-direction:column; align-items:stretch; }.hero-image { width:calc(100% - 16px); }.hero-image img { height:430px; }.image-stamp { right:-16px; }.trust-band { grid-template-columns:1fr; gap:14px; }.section { padding:68px 21px; }.section-heading { display:block; }.section-heading>p { margin-top:15px; }.project-card { display:block; }.project-media { width:100%; min-height:auto; aspect-ratio:4/3; }.area-section,.inquiry-section { grid-template-columns:1fr; gap:45px; }.send-buttons { grid-template-columns:1fr; }.gallery-dialog { width:100%; height:100%; max-height:100%; }.gallery-shell { height:100%; min-height:0; display:flex; flex-direction:column; }.gallery-stage { min-height:46vh; flex:1 1 53%; }.gallery-stage img { max-height:56vh; }.gallery-details { flex:1 1 47%; padding:28px 22px; } footer { flex-direction:column; gap:5px; } }
@media (max-width:430px) { .hero h1 { font-size:2.95rem; }.language-switch button { width:34px; }.inquiry-form { padding:22px; } }