.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}*, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Manrope', Arial, sans-serif;
font-size: 16px;
line-height: 1.65;
color: #111;
background: #fff;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
}
p {
margin: 0 0 1.2em;
}
p:last-child {
margin-bottom: 0;
}
h1, h2, h3, h4 {
font-weight: 300;
line-height: 1.1;
margin: 0 0 .6em;
} :root {
--black:       #0d0d0d;
--text:        #1a1a1a;
--muted:       #666;
--light-bg:    #f5f5f3;
--border:      #e0e0e0;
--white:       #ffffff;
--accent:      #c4a882;
--pad-h:       10vw;
--pad-v:       100px;
--pad-h-mob:   6vw;
--pad-v-mob:   60px;
} .section-pad {
padding: var(--pad-v) var(--pad-h);
}
.section-white {
background: var(--white);
}
.section-light {
background: var(--light-bg);
}
.section-eyebrow {
display: block;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
}
.section-eyebrow--light {
color: rgba(255,255,255,.7);
}
.section-intro {
font-size: 18px;
color: var(--muted);
max-width: 600px;
line-height: 1.8;
margin-top: 16px;
} .site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 200;
background: rgba(255,255,255,.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid transparent;
transition: padding .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.shrink {
border-color: var(--border);
box-shadow: 0 1px 20px rgba(0,0,0,.06);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px var(--pad-h);
gap: 24px;
transition: padding .3s ease;
}
.site-header.shrink .header-inner {
padding-top: 14px;
padding-bottom: 14px;
}
.logo img {
height: 80px;
width: auto;
display: block;
transition: height .3s ease;
}
.site-header.shrink .logo img {
height: 54px;
} .nav {
display: flex;
gap: 36px;
align-items: center;
}
.nav a {
text-decoration: none;
color: var(--text);
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
transition: color .2s ease;
}
.nav a:hover,
.nav a[aria-current="page"] {
color: var(--accent);
}
.nav a.nav-cta {
border: 1px solid var(--text);
padding: 10px 22px;
transition: all .25s ease;
}
.nav a.nav-cta:hover {
background: var(--text);
color: var(--white);
} .nav-item-dropdown {
position: relative;
display: flex;
align-items: center;
}
.nav-dropdown {
position: absolute;
top: calc(100% + 18px);
left: 50%;
transform: translateX(-50%);
background: var(--white);
border: 1px solid var(--border);
box-shadow: 0 8px 32px rgba(0,0,0,.10);
min-width: 220px;
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
transform: translateX(-50%) translateY(-6px);
z-index: 300;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
display: block;
padding: 14px 22px;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--border);
transition: background .15s, color .15s;
}
.nav-dropdown a:last-child {
border-bottom: none;
}
.nav-dropdown a:hover {
background: var(--light-bg);
color: var(--accent);
} .header-contact {
display: flex;
align-items: center;
gap: 20px;
font-size: 13px;
}
.header-email {
text-decoration: none;
color: var(--muted);
transition: color .2s;
}
.header-email:hover {
color: var(--text);
}
.social {
display: flex;
gap: 14px;
align-items: center;
}
.social a {
color: var(--text);
display: flex;
align-items: center;
transition: opacity .2s;
}
.social a:hover {
opacity: .6;
} .menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
z-index: 201;
}
.menu-toggle span {
width: 24px;
height: 1.5px;
background: var(--text);
display: block;
transition: transform .3s ease, opacity .3s ease;
} .mobile-menu {
position: fixed;
inset: 0;
background: rgba(255,255,255,.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateY(-100%);
transition: transform .4s cubic-bezier(.77,0,.175,1);
z-index: 199;
}
.mobile-menu.is-open {
transform: translateY(0);
}
.mobile-menu-close {
position: absolute;
top: 28px;
right: var(--pad-h-mob);
background: none;
border: none;
cursor: pointer;
padding: 6px;
color: var(--text);
}
.mobile-menu ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.mobile-menu li {
margin: 20px 0;
}
.mobile-menu a {
font-size: 32px;
font-weight: 300;
text-decoration: none;
color: var(--text);
letter-spacing: .04em;
transition: color .2s;
}
.mobile-menu a:hover {
color: var(--accent);
}
.mobile-menu-contact {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
max-width: 320px;
padding: 0 24px;
box-sizing: border-box;
text-align: center;
}
.mobile-menu-contact a {
color: var(--muted);
text-decoration: none;
font-size: 13px !important;
letter-spacing: 0;
font-weight: 400;
display: block;
width: 100%;
overflow-wrap: break-word;
word-break: break-all;
} @media (min-width: 901px) {
.mobile-menu,
.menu-toggle {
display: none !important;
}
} .hero {
position: relative;
height: 100vh;
min-height: 560px;
display: flex;
align-items: center;
padding: 140px var(--pad-h) 60px;
background-image: url(//awdesign.pl/wp-content/themes/studio-wnetrz-visual-ready-FIXED/assets/hero-baner.jpg);
background-size: cover;
background-position: center;
}
.hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(0,0,0,0.22) 0%,
rgba(0,0,0,0.08) 45%,
rgba(0,0,0,0) 100%
);
z-index: 1;
} .hero h1 {
text-shadow: 0 1px 4px rgba(255,255,255,0.4);
}
.hero-eyebrow,
.hero-sub {
text-shadow: 0 1px 3px rgba(255,255,255,0.35);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 820px;
}
.hero-eyebrow {
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 20px;
}
.hero h1 {
font-size: clamp(48px, 6.5vw, 68px);
font-weight: 300;
line-height: 1.05;
margin-bottom: 28px;
color: var(--black);
}
.hero-sub {
font-size: 18px;
font-weight: 300;
color: #333;
max-width: 480px;
line-height: 1.7;
margin-bottom: 48px;
}
.hero-cta-group {
display: flex;
gap: 20px;
flex-wrap: wrap;
} .cta-button {
display: inline-block;
padding: 16px 40px;
border: 1px solid var(--text);
text-decoration: none;
color: var(--text);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
transition: background .25s ease, color .25s ease, border-color .25s ease;
cursor: pointer;
background: transparent;
font-family: inherit;
}
.cta-button:hover {
background: var(--text);
color: var(--white);
}
.cta-button--ghost {
border-color: rgba(17,17,17,.4);
color: #333;
}
.cta-button--ghost:hover {
border-color: var(--text);
background: var(--text);
color: var(--white);
}
.cta-button--white {
border-color: var(--white);
color: var(--white);
}
.cta-button--white:hover {
background: var(--white);
color: var(--text);
} .trust-strip {
background: var(--white);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 48px var(--pad-h);
}
.trust-strip--gray {
background: var(--light-bg);
}
.trust-strip-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
}
.trust-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 60px;
flex: 1;
}
.trust-number {
font-size: 36px;
font-weight: 300;
color: var(--black);
line-height: 1;
margin-bottom: 8px;
}
.trust-label {
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.trust-divider {
width: 1px;
height: 48px;
background: var(--border);
flex-shrink: 0;
} .services {
padding: var(--pad-v) var(--pad-h);
background: var(--white);
}
.services-header {
margin-bottom: 72px;
}
.services-header h2 {
font-size: clamp(36px, 4vw, 52px);
font-weight: 300;
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.service-card {
position: relative;
aspect-ratio: 3 / 4;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
text-decoration: none;
overflow: hidden;
transition: background-size .5s ease;
}
.service-card:hover {
background-size: 108%;
}
.service-overlay {
width: 100%;
padding: 36px 28px 40px;
background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.1) 70%, transparent);
color: var(--white);
transition: background .3s ease;
}
.service-card:hover .service-overlay {
background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.18) 70%, transparent);
}
.service-overlay h3 {
font-size: 20px;
font-weight: 400;
margin-bottom: 10px;
color: var(--white);
}
.service-overlay p {
font-size: 14px;
line-height: 1.6;
opacity: .88;
margin: 0;
font-weight: 300;
}
.services-cta {
margin-top: 60px;
text-align: center;
} .about {
padding: var(--pad-v) var(--pad-h);
background: var(--white);
}
.about-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
}
.about-photo img {
width: 100%;
height: auto;
filter: grayscale(100%);
}
.about-text h2 {
font-size: clamp(36px, 3.5vw, 52px);
font-weight: 300;
margin-bottom: 24px;
}
.about-text p {
font-size: 17px;
line-height: 1.9;
color: #444;
margin-bottom: 20px;
}
.about-text .cta-button {
margin-top: 12px;
} .process {
padding: var(--pad-v) var(--pad-h);
background: var(--light-bg);
}
.process--gray {
background: var(--light-bg);
}
.process-header {
margin-bottom: 72px;
max-width: 640px;
}
.process-header h2 {
font-size: clamp(32px, 3.5vw, 48px);
font-weight: 300;
margin-bottom: 12px;
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
.process-step {
position: relative;
}
.process-number {
display: block;
font-size: 48px;
font-weight: 300;
color: var(--accent);
opacity: .5;
line-height: 1;
margin-bottom: 16px;
}
.process-step h3 {
font-size: 18px;
font-weight: 500;
margin-bottom: 12px;
color: var(--black);
}
.process-step p {
font-size: 15px;
line-height: 1.75;
color: #555;
} .featured-projects {
padding: var(--pad-v) var(--pad-h);
background: var(--white);
}
.featured-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 60px;
}
.featured-header h2 {
font-size: clamp(32px, 3.5vw, 48px);
font-weight: 300;
margin-bottom: 0;
}
.featured-link {
text-decoration: none;
color: var(--text);
font-size: 13px;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
transition: color .2s;
}
.featured-link:hover {
color: var(--accent);
}
.featured-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.featured-item {
position: relative;
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center;
text-decoration: none;
overflow: hidden;
transition: background-size .5s ease;
}
.featured-item:hover {
background-size: 108%;
}
.featured-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.22);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 32px;
color: var(--white);
transition: background .3s ease;
}
.featured-item:hover .featured-overlay {
background: rgba(0,0,0,.45);
}
.featured-overlay h3 {
font-size: 22px;
font-weight: 400;
margin-bottom: 6px;
color: var(--white);
}
.featured-overlay span {
font-size: 13px;
opacity: .85;
} .cta {
padding: 100px var(--pad-h);
text-align: center;
background: var(--black);
color: var(--white);
}
.cta h2 {
font-size: clamp(30px, 3.5vw, 48px);
font-weight: 300;
margin-bottom: 20px;
color: var(--white);
}
.cta p {
font-size: 17px;
color: rgba(255,255,255,.75);
margin-bottom: 48px;
line-height: 1.7;
} .faq {
padding: var(--pad-v) var(--pad-h);
background: var(--light-bg);
}
.faq-header {
margin-bottom: 60px;
}
.faq-header h2 {
font-size: clamp(28px, 3vw, 44px);
font-weight: 300;
}
.faq-list {
max-width: 860px;
}
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-item:first-child {
border-top: 1px solid var(--border);
}
.faq-question {
width: 100%;
padding: 28px 48px 28px 0;
background: none;
border: none;
text-align: left;
font-size: 19px;
font-family: inherit;
font-weight: 400;
cursor: pointer;
position: relative;
color: var(--text);
line-height: 1.4;
transition: color .2s;
}
.faq-question:hover {
color: var(--accent);
}
.faq-question::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 28px;
font-weight: 300;
color: var(--accent);
transition: transform .3s ease;
line-height: 1;
}
.faq-item.active .faq-question::after {
transform: translateY(-50%) rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease;
}
.faq-answer p {
padding: 0 48px 28px 0;
font-size: 16px;
line-height: 1.85;
color: #555;
margin: 0;
} .site-footer {
background: var(--white);
border-top: 1px solid var(--border);
padding: 80px var(--pad-h) 0;
}
.footer-inner {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 60px;
padding-bottom: 60px;
border-bottom: 1px solid var(--border);
}
.footer-brand img {
height: 90px;
width: auto;
margin-bottom: 16px;
display: block;
}
.footer-tagline {
font-size: 13px;
color: var(--muted);
margin-bottom: 20px;
}
.footer-social {
display: flex;
gap: 14px;
margin-top: 8px;
}
.footer-social a {
color: var(--text);
display: flex;
align-items: center;
transition: opacity .2s;
}
.footer-social a:hover {
opacity: .5;
}
.footer-nav-title {
font-size: 11px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 20px;
font-weight: 500;
}
.footer-nav a,
.footer-services a,
.footer-cities a,
.footer-contact a,
.site-footer a {
display: block;
color: #1a1a1a;
text-decoration: none;
margin-bottom: 10px;
font-size: 14px;
transition: color .2s;
}
.footer-nav a:hover,
.footer-services a:hover,
.footer-cities a:hover,
.footer-contact a:hover {
color: var(--accent);
} .footer-services,
.footer-cities,
.footer-nav,
.footer-contact {
display: block;
visibility: visible;
opacity: 1;
}
.footer-cta-link {
display: inline-block !important;
margin-top: 14px;
font-size: 13px !important;
letter-spacing: .08em;
border-bottom: 1px solid var(--border);
padding-bottom: 2px;
}
.footer-bottom {
padding: 24px 0;
font-size: 13px;
color: var(--muted);
} .breadcrumbs {
padding: 155px var(--pad-h) 20px;
background: var(--white);
}
.breadcrumbs-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font-size: 13px;
color: var(--muted);
}
.breadcrumb-item a {
color: var(--muted);
text-decoration: none;
transition: color .2s;
}
.breadcrumb-item a:hover {
color: var(--text);
}
.breadcrumb-item:last-child span {
color: var(--text);
}
.breadcrumb-separator {
color: var(--border);
font-size: 16px;
list-style: none;
} .page-banner {
position: relative;
height: 44vh;
min-height: 300px;
display: flex;
align-items: flex-end;
padding: 0 var(--pad-h) 64px;
overflow: hidden;
background: #1a1a1a;
}
.page-banner--slim {
height: 32vh;
min-height: 220px;
}
.page-banner-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.page-banner-bg--default {
background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
} .city-hero {
position: relative;
height: 72vh;
min-height: 460px;
display: flex;
align-items: center;
padding: 60px var(--pad-h) 60px;
background-image: url(//awdesign.pl/wp-content/themes/studio-wnetrz-visual-ready-FIXED/assets/hero-baner.jpg);
background-size: cover;
background-position: center;
}
.city-hero-overlay,
.page-banner-overlay {
position: absolute;
inset: 0;
background: rgba(10,10,10,.38);
z-index: 1;
}
.city-hero-content,
.page-banner-content {
position: relative;
z-index: 2;
color: var(--white);
max-width: 740px;
}
.city-hero-content .hero-eyebrow,
.page-banner-content .hero-eyebrow {
color: rgba(255,255,255,.7);
}
.city-hero-content h1,
.page-banner-content h1 {
font-size: clamp(42px, 6vw, 68px);
font-weight: 300;
color: var(--white);
margin-bottom: 20px;
}
.city-hero-sub,
.page-banner-content > p:last-child {
font-size: 18px;
color: rgba(255,255,255,.85);
font-weight: 300;
line-height: 1.6;
margin-bottom: 40px;
} .page-banner--uslugi {
background-image: url(//awdesign.pl/wp-content/themes/studio-wnetrz-visual-ready-FIXED/assets/projektowanie2.jpg);
background-size: cover;
background-position: center;
}
.page-banner--realizacje {
background-image: url(//awdesign.pl/wp-content/themes/studio-wnetrz-visual-ready-FIXED/assets/realizacje/realizacja-dom-jednorodzinny12.jpg);
background-size: cover;
background-position: center;
}
.page-banner--o-mnie {
background-image: url(//awdesign.pl/wp-content/themes/studio-wnetrz-visual-ready-FIXED/assets/anna.png);
background-size: cover;
background-position: top center;
}
.page-banner--kontakt {
background: #1a1a1a;
} .page-content-section {
padding: var(--pad-v) var(--pad-h);
}
.page-content-inner {
max-width: 800px;
font-size: 17px;
line-height: 1.9;
color: #333;
}
.page-content-inner h2 {
font-size: 36px;
font-weight: 300;
margin: 48px 0 16px;
color: var(--black);
}
.page-content-inner h3 {
font-size: 24px;
font-weight: 400;
margin: 32px 0 12px;
} .text-section {
max-width: 700px;
}
.text-section--wide {
max-width: 100%;
}
.text-section h2 {
font-size: clamp(30px, 3.5vw, 46px);
font-weight: 300;
margin-bottom: 20px;
}
.text-section p {
font-size: 17px;
line-height: 1.9;
color: #444;
} .city-intro {
background: var(--white);
}
.city-intro-inner {
max-width: 800px;
}
.city-intro-inner h2 {
font-size: clamp(28px, 3vw, 42px);
font-weight: 300;
margin-bottom: 24px;
}
.city-intro-text p {
font-size: 17px;
line-height: 1.9;
color: #444;
}
.city-services {
background: var(--white);
}
.city-services-header {
margin-bottom: 60px;
}
.city-services-header h2 {
font-size: clamp(28px, 3vw, 44px);
font-weight: 300;
}
.city-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.city-service-card {
border: 1px solid var(--border);
padding: 40px;
transition: border-color .25s ease, box-shadow .25s ease;
}
.city-service-card:hover {
border-color: #aaa;
box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.city-service-icon {
display: block;
color: var(--accent);
margin-bottom: 20px;
}
.city-service-card h3 {
font-size: 20px;
font-weight: 500;
margin-bottom: 14px;
color: var(--black);
}
.city-service-card p {
font-size: 15px;
line-height: 1.75;
color: #555;
margin-bottom: 20px;
}
.city-service-link {
font-size: 13px;
letter-spacing: .08em;
text-decoration: none;
color: var(--accent);
text-transform: uppercase;
transition: opacity .2s;
}
.city-service-link:hover {
opacity: .7;
} .service-list-header {
margin-bottom: 60px;
}
.service-list-header h2 {
font-size: clamp(28px, 3vw, 44px);
font-weight: 300;
}
.service-detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
background: var(--border);
border: 1px solid var(--border);
}
.service-detail-card {
background: var(--white);
padding: 60px 52px;
display: flex;
gap: 32px;
transition: background .2s;
}
.service-detail-card:hover {
background: #fafafa;
}
.service-detail-number {
font-size: 64px;
font-weight: 300;
color: var(--accent);
opacity: .3;
line-height: 1;
flex-shrink: 0;
width: 60px;
}
.service-detail-body h3 {
font-size: 24px;
font-weight: 400;
margin-bottom: 16px;
color: var(--black);
}
.service-detail-body p {
font-size: 16px;
line-height: 1.85;
color: #555;
margin-bottom: 20px;
}
.service-detail-list {
list-style: none;
padding: 0;
margin: 0 0 28px;
}
.service-detail-list li {
font-size: 14px;
color: #444;
padding: 6px 0;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 10px;
}
.service-detail-list li::before {
content: "—";
color: var(--accent);
flex-shrink: 0;
} .portfolio-section {
background: var(--light-bg);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.portfolio-item {
background: var(--white);
overflow: hidden;
transition: box-shadow .25s ease;
}
.portfolio-item:hover {
box-shadow: 0 8px 40px rgba(0,0,0,.1);
}
.portfolio-img-wrap {
overflow: hidden;
aspect-ratio: 4 / 3;
}
.portfolio-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.portfolio-item:hover .portfolio-img-wrap img {
transform: scale(1.04);
}
.portfolio-caption {
padding: 20px 24px 24px;
}
.portfolio-category {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
display: block;
margin-bottom: 6px;
}
.portfolio-caption h3 {
font-size: 17px;
font-weight: 400;
margin-bottom: 6px;
color: var(--black);
}
.portfolio-tags {
font-size: 13px;
color: var(--muted);
margin: 0;
} .values-section {
background: var(--light-bg);
}
.values-header {
margin-bottom: 60px;
}
.values-header h2 {
font-size: clamp(28px, 3vw, 44px);
font-weight: 300;
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.value-card {
padding: 40px;
background: var(--white);
border-bottom: 3px solid var(--accent);
}
.value-icon {
display: block;
color: var(--accent);
margin-bottom: 20px;
}
.value-card h3 {
font-size: 20px;
font-weight: 500;
margin-bottom: 12px;
color: var(--black);
}
.value-card p {
font-size: 15px;
line-height: 1.75;
color: #555;
margin: 0;
} .experience-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
margin-top: 40px;
}
.experience-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.experience-year {
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
width: 70px;
flex-shrink: 0;
padding-top: 4px;
}
.experience-item h3 {
font-size: 18px;
font-weight: 500;
margin-bottom: 8px;
color: var(--black);
}
.experience-item p {
font-size: 15px;
line-height: 1.75;
color: #555;
margin: 0;
} .contact-section {
background: var(--white);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 100px;
align-items: flex-start;
}
.contact-info h2 {
font-size: clamp(28px, 3vw, 44px);
font-weight: 300;
margin-bottom: 36px;
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: 28px;
margin-bottom: 40px;
}
.contact-info-item {
display: flex;
gap: 16px;
align-items: flex-start;
}
.contact-info-icon {
color: var(--accent);
flex-shrink: 0;
padding-top: 2px;
}
.contact-info-label {
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
}
.contact-info-value {
font-size: 16px;
color: var(--text);
text-decoration: none;
display: block;
transition: color .2s;
}
a.contact-info-value:hover {
color: var(--accent);
}
.contact-note {
padding: 24px;
background: var(--light-bg);
border-left: 3px solid var(--accent);
font-size: 15px;
line-height: 1.7;
color: #444;
}
.contact-form-heading {
font-size: 28px;
font-weight: 300;
margin-bottom: 32px;
color: var(--black);
}
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group label {
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.form-group .optional {
font-size: 11px;
text-transform: none;
letter-spacing: 0;
color: #aaa;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--border);
background: var(--white);
font-family: inherit;
font-size: 15px;
color: var(--text);
outline: none;
transition: border-color .2s;
appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--accent);
}
.form-group textarea {
resize: vertical;
min-height: 140px;
}
.form-group--consent label {
text-transform: none;
letter-spacing: 0;
font-size: 13px;
color: #555;
}
.form-checkbox {
display: flex;
gap: 12px;
align-items: flex-start;
cursor: pointer;
}
.form-checkbox input[type="checkbox"] {
width: auto;
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--accent);
}
.form-checkbox span a {
color: var(--accent);
} @media (max-width: 1200px) {
:root {
--pad-h: 7vw;
}
.footer-inner {
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
gap: 40px;
}
.service-detail-card {
padding: 44px 36px;
gap: 24px;
}
} @media (max-width: 900px) {
:root {
--pad-h:   var(--pad-h-mob);
--pad-v:   var(--pad-v-mob);
} .nav,
.header-contact {
display: none;
}
.menu-toggle {
display: flex;
}
.header-inner {
padding: 16px var(--pad-h-mob);
}
.logo img {
height: 54px;
} .hero {
padding: 120px var(--pad-h-mob) 60px;
align-items: flex-start;
height: 100svh;
}
.hero h1 {
font-size: clamp(36px, 10vw, 52px);
}
.hero-sub {
font-size: 16px;
}
.hero-cta-group {
flex-direction: column;
gap: 14px;
}
.hero-cta-group .cta-button {
text-align: center;
} .trust-strip {
padding: 40px var(--pad-h-mob);
}
.trust-strip-inner {
flex-wrap: wrap;
gap: 32px;
}
.trust-item {
padding: 0 20px;
flex: 1 1 40%;
}
.trust-divider {
display: none;
} .services {
padding: var(--pad-v-mob) var(--pad-h-mob);
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
} .about-inner {
grid-template-columns: 1fr;
gap: 40px;
} .process-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
} .featured-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.featured-grid {
grid-template-columns: 1fr;
gap: 16px;
} .faq-question {
font-size: 17px;
padding-right: 40px;
} .footer-inner {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-brand {
text-align: center;
}
.footer-brand img {
margin: 0 auto 16px;
}
.footer-social {
justify-content: center;
} .breadcrumbs {
padding: 120px var(--pad-h-mob) 16px;
} .city-services-grid {
grid-template-columns: 1fr;
} .service-detail-grid {
grid-template-columns: 1fr;
gap: 0;
}
.service-detail-card {
flex-direction: column;
padding: 40px 28px;
gap: 12px;
}
.service-detail-number {
font-size: 48px;
} .portfolio-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
} .values-grid {
grid-template-columns: 1fr;
gap: 20px;
} .experience-grid {
grid-template-columns: 1fr;
gap: 32px;
} .contact-grid {
grid-template-columns: 1fr;
gap: 60px;
} .page-banner {
height: 42vh;
padding: 0 var(--pad-h-mob) 36px;
}
.city-hero {
height: 60vh;
padding: 40px var(--pad-h-mob) 40px;
align-items: flex-start;
}
.city-hero-content h1,
.page-banner-content h1 {
font-size: clamp(36px, 9vw, 52px);
}
} .page-banner--usluga {
background-size: cover;
background-position: center;
}
.usluga-intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: flex-start;
}
.usluga-intro-text h2 {
font-size: clamp(26px, 3vw, 40px);
font-weight: 300;
margin-bottom: 20px;
}
.usluga-intro-text p {
font-size: 17px;
line-height: 1.9;
color: #444;
margin-bottom: 16px;
}
.usluga-includes {
background: var(--light-bg);
padding: 36px 40px;
}
.usluga-includes-title {
font-size: 11px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
font-weight: 500;
}
.usluga-types-header {
margin-bottom: 48px;
}
.usluga-types-header h2 {
font-size: clamp(26px, 3vw, 40px);
font-weight: 300;
}
@media (max-width: 900px) {
.usluga-intro-grid {
grid-template-columns: 1fr;
gap: 40px;
}
}  .hero p.hero-sub {
margin-bottom: 44px;
} .services {
padding-top: 90px;
padding-bottom: 90px;
}
.about {
padding-top: 90px;
padding-bottom: 90px;
}
.featured-projects {
padding-top: 90px;
padding-bottom: 90px;
}  .wpcf7 {
width: 100%;
}
.wpcf7 form {
display: flex;
flex-direction: column;
gap: 0;
} .wpcf7 .wpcf7-form-control-wrap,
.wpcf7 p {
display: block;
margin-bottom: 18px;
width: 100%;
} .wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea,
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-email,
.wpcf7 .wpcf7-tel,
.wpcf7 .wpcf7-textarea {
width: 100%;
padding: 15px 18px;
border: 1px solid var(--border);
border-radius: 0;
background: var(--white);
font-family: 'Manrope', Arial, sans-serif;
font-size: 15px;
font-weight: 300;
color: var(--text);
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
appearance: none;
-webkit-appearance: none;
box-shadow: none;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus,
.wpcf7 .wpcf7-text:focus,
.wpcf7 .wpcf7-email:focus,
.wpcf7 .wpcf7-textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(196,168,130,0.12);
outline: none;
} .wpcf7 textarea,
.wpcf7 .wpcf7-textarea {
min-height: 160px;
resize: vertical;
} .wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
color: #aaa;
font-weight: 300;
font-size: 14px;
} .wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
display: inline-block;
padding: 16px 44px;
border: 1px solid var(--text);
background: transparent;
color: var(--text);
font-family: 'Manrope', Arial, sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
transition: background .25s ease, color .25s ease;
border-radius: 0;
width: auto;
margin-top: 8px;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
background: var(--text);
color: var(--white);
} .wpcf7 .wpcf7-not-valid-tip {
font-size: 12px;
color: #c0392b;
margin-top: 4px;
display: block;
}
.wpcf7 .wpcf7-response-output {
margin: 16px 0 0;
padding: 14px 18px;
border: 1px solid var(--border);
font-size: 14px;
color: #444;
border-left: 3px solid var(--accent);
}
.wpcf7 .wpcf7-mail-sent-ok {
border-left-color: #27ae60;
color: #27ae60;
background: #f0faf4;
}
.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-spam-blocked {
border-left-color: #c0392b;
color: #c0392b;
background: #fdf0f0;
} .wpcf7 .ajax-loader {
display: none !important;
} .wpcf7 .wpcf7-acceptance,
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 13px;
color: #555;
line-height: 1.5;
}
.wpcf7 .wpcf7-acceptance input[type="checkbox"],
.wpcf7 .wpcf7-checkbox input[type="checkbox"],
.wpcf7 .wpcf7-radio input[type="radio"] {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 2px;
accent-color: var(--accent);
padding: 0;
} @media (max-width: 900px) {
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
width: 100%;
text-align: center;
}
}
@media (max-width: 520px) {
.services-grid {
grid-template-columns: 1fr;
}
.process-grid {
grid-template-columns: 1fr;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
}