:root { --navy: #16243d; --navy-light: #1e3050; --grey: #ededed; --blue-card: #5a7bc4; --white: #ffffff; --text-dark: #2b2b2b; --max: 1100px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', Arial, sans-serif; font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--text-dark); background: var(--white); } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; } .site-header { background: var(--white); padding: 18px 24px 0; border-bottom: 1px solid #ddd; } .header-top { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .header-phone { font-size: 14px; letter-spacing: 0.05em; color: var(--text-dark); } .header-logo img { height: 110px; width: auto; margin: 0 auto; } .header-social { display: flex; gap: 14px; justify-content: flex-end; color: var(--text-dark); } .header-social a { opacity: 0.85; } .header-social a:hover { opacity: 1; } .site-nav { max-width: var(--max); margin: 8px auto 0; text-align: center; position: relative; } .site-nav ul { list-style: none; display: flex; justify-content: center; gap: 34px; padding-bottom: 14px; } .site-nav a { text-decoration: none; font-size: 15px; letter-spacing: 0.04em; color: var(--text-dark); padding-bottom: 4px; } .site-nav a:hover, .site-nav a.active { border-bottom: 2px solid var(--navy); } .nav-toggle { display: none; background: none; border: none; font-size: 26px; cursor: pointer; padding: 4px 10px; } .section { padding: 70px 24px; } .section-inner { max-width: var(--max); margin: 0 auto; } .section-narrow { max-width: 820px; margin: 0 auto; } .navy { background: var(--navy); color: var(--white); } .greybg { background: var(--grey); } .center { text-align: center; } .section h1 { font-size: 34px; margin-bottom: 24px; } .section h2 { font-size: 28px; margin-bottom: 24px; } .section h3 { font-size: 18px; margin-bottom: 12px; } .section p { margin-bottom: 16px; } .btn { display: inline-block; margin-top: 12px; padding: 12px 34px; background: var(--white); color: var(--navy); text-decoration: none; font-size: 14px; letter-spacing: 0.05em; border: 1px solid var(--navy); } .btn:hover { background: var(--navy); color: var(--white); border-color: var(--white); } .navy .btn { border: none; } .navy .btn:hover { background: var(--grey); color: var(--navy); } .btn-dark { background: var(--navy); color: var(--white); } .btn-dark:hover { background: var(--white); color: var(--navy); } .tagline { letter-spacing: 0.15em; font-weight: 400; margin-top: 22px; } ul.plain-list { list-style: none; margin: 18px 0; } ul.plain-list li { margin-bottom: 8px; } .photo-band { width: 100%; height: 420px; object-fit: cover; } .hero-image { position: relative; color: var(--white); background-size: cover; background-position: center; padding: 110px 24px; } .hero-image::before { content: ''; position: absolute; inset: 0; background: rgba(15, 25, 45, 0.45); } .hero-image > div { position: relative; max-width: 820px; margin: 0 auto; text-align: center; } .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; margin-top: 40px; text-align: left; } .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-bottom: 70px; } .feature-row:last-child { margin-bottom: 0; } .feature-row img { width: 100%; height: 340px; object-fit: cover; } .contact-lines { margin: 18px 0; } .contact-lines strong { font-weight: 600; } .contact-lines a { color: inherit; } .contact-form { max-width: 700px; margin: 30px auto 0; text-align: left; } .contact-form label { display: block; font-size: 14px; margin: 18px 0 4px; letter-spacing: 0.04em; } .contact-form input, .contact-form textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.7); color: var(--white); font-family: inherit; font-size: 16px; padding: 8px 2px; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--white); } .contact-form textarea { min-height: 110px; resize: vertical; } .contact-form .hp { position: absolute; left: -9999px; } .contact-form button { width: 100%; margin-top: 28px; padding: 13px; background: var(--white); color: var(--navy); border: none; font-family: inherit; font-size: 15px; letter-spacing: 0.05em; cursor: pointer; } .contact-form button:hover { background: var(--grey); } .form-notice { margin: 20px auto 0; max-width: 700px; padding: 12px 16px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.4); text-align: center; } .contact-card { max-width: var(--max); margin: 70px auto; display: grid; grid-template-columns: 1fr 1fr; background: var(--blue-card); color: var(--white); } .contact-card .card-text { padding: 60px 40px; text-align: center; align-self: center; } .contact-card img { width: 100%; height: 100%; object-fit: cover; } .gallery-grid { max-width: var(--max); margin: 0 auto; padding: 50px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .gallery-grid a { display: block; overflow: hidden; } .gallery-grid img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.3s ease; } .gallery-grid a:hover img { transform: scale(1.04); } .lightbox { display: none; position: fixed; inset: 0; background: rgba(10, 15, 28, 0.95); z-index: 100; align-items: center; justify-content: center; } .lightbox.open { display: flex; } .lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; } .lightbox button { position: absolute; background: none; border: none; color: #fff; font-size: 44px; cursor: pointer; padding: 10px 18px; } .lightbox .lb-close { top: 12px; right: 18px; } .lightbox .lb-prev { left: 8px; top: 50%; transform: translateY(-50%); } .lightbox .lb-next { right: 8px; top: 50%; transform: translateY(-50%); } .map-wrap iframe { width: 100%; height: 420px; border: 0; display: block; } .site-footer { background: var(--white); text-align: center; padding: 36px 24px; font-size: 13px; color: #555; border-top: 1px solid #ddd; } .site-footer p { margin-bottom: 8px; } .site-footer a { color: #555; } @media (max-width: 800px) { .header-top { grid-template-columns: auto 1fr auto; gap: 10px; } .header-logo img { height: 80px; } .faq-grid, .feature-row, .contact-card { grid-template-columns: 1fr; } .feature-row { gap: 24px; margin-bottom: 50px; } .section h1 { font-size: 26px; } .section h2 { font-size: 22px; } .photo-band { height: 260px; } .hero-image { padding: 70px 20px; } .nav-toggle { display: block; margin: 0 auto; } .site-nav ul { display: none; flex-direction: column; gap: 0; } .site-nav ul.open { display: flex; } .site-nav li { padding: 10px 0; border-top: 1px solid #eee; } }