/* ============================================================ Verdi Property Services — site styles Dark canvas, single green accent (#2ecc71), Montserrat. Montserrat is loaded via Google Fonts (WOFF2) in each page's . ============================================================ */ :root { /* Dark surfaces (olive-warm near-black, per Wise ink) */ --bg: #0e0f0c; --bg-2: #14160f; --surface: #181b14; --surface-2: #20241b; --surface-3: #292e23; --hairline: rgba(255, 255, 255, 0.09); --hairline-strong: rgba(255, 255, 255, 0.16); /* Accent — the single CTA colour */ --lime: #2ecc71; --lime-bright: #58e08c; --lime-deep: #163300; --lime-soft: rgba(46, 204, 113, 0.12); /* Text on dark */ --t-hi: #f6f7f3; --t: #c3c8ba; --t-mid: #8f968420; --t-lo: #7f857a; --container: 1240px; --radius: 24px; --radius-lg: 16px; --radius-md: 12px; --font-display: 'Montserrat', system-ui, sans-serif; --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--t); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--lime); color: var(--lime-deep); } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 32px; } .section { padding-block: clamp(72px, 11vw, 132px); } .section--tight { padding-block: clamp(56px, 8vw, 92px); } .bg-2 { background: var(--bg-2); } .bg-surface { background: var(--surface); } /* ---------- Display type ---------- */ .display { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.98; color: var(--t-hi); margin: 0; text-wrap: balance; } .display--mega { font-size: clamp(46px, 7vw, 104px); font-weight: 900; line-height: 0.96; } .display--xl { font-size: clamp(36px, 5.2vw, 70px); font-weight: 900; } .display--lg { font-size: clamp(30px, 4vw, 52px); } .display--md { font-size: clamp(24px, 2.8vw, 36px); } .lime { color: var(--lime); } .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime); margin: 0; display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--lime); display: inline-block; } .eyebrow--plain::before { display: none; } .lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--t); max-width: 56ch; margin: 0; } .muted { color: var(--t-lo); } .t-hi { color: var(--t-hi); } /* ---------- Buttons ---------- */ .btn { --pad-x: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1; padding: 17px var(--pad-x); border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform 0.25s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); white-space: nowrap; } .btn svg { width: 18px; height: 18px; } .btn--primary { background: var(--lime); color: var(--lime-deep); } .btn--primary:hover { background: var(--lime-bright); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--t-hi); border-color: var(--hairline-strong); } .btn--ghost:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-2px); } .btn--dark { background: var(--surface-2); color: var(--t-hi); border-color: var(--hairline); } .btn--dark:hover { background: var(--surface-3); transform: translateY(-2px); } .btn--lg { padding: 20px 32px; font-size: 17px; } .btn--block { width: 100%; } .textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--lime); transition: gap 0.25s var(--ease); } .textlink svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); } .textlink:hover { gap: 12px; } /* ---------- Header / Nav ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s var(--ease); border-bottom: 1px solid transparent; } .site-header.scrolled { background: rgba(14, 15, 12, 0.82); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--hairline); } .nav { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; } .brand__logo { height: 52px; width: auto; display: block; } .site-footer .brand__logo { height: 58px; } .brand__mark { width: 42px; height: 42px; border-radius: 11px; background: var(--lime); color: var(--lime-deep); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; } .brand__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--t-hi); line-height: 1; } .brand__sub { display: block; font-size: 10px; letter-spacing: 0.22em; color: var(--t-lo); text-transform: uppercase; font-weight: 600; } .nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav__link { padding: 10px 16px; font-size: 15px; font-weight: 500; color: var(--t); border-radius: 10px; transition: color 0.2s, background 0.2s; } .nav__link:hover { color: var(--t-hi); background: var(--surface); } .nav__link.active { color: var(--lime); } .nav__cta { margin-left: 12px; } .nav__toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--hairline-strong); background: transparent; border-radius: 12px; cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center; } .nav__toggle span { width: 20px; height: 2px; background: var(--t-hi); transition: 0.3s var(--ease); } .nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle.open span:nth-child(2) { opacity: 0; } .nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 78px 0 0 0; z-index: 99; background: var(--bg); padding: 24px 32px 40px; display: flex; flex-direction: column; gap: 6px; transform: translateX(100%); transition: transform 0.4s var(--ease); border-top: 1px solid var(--hairline); } .mobile-menu.open { transform: translateX(0); } .mobile-menu a { font-family: var(--font-display); text-transform: uppercase; font-size: 30px; font-weight: 700; color: var(--t-hi); padding: 14px 0; border-bottom: 1px solid var(--hairline); } .mobile-menu a.active { color: var(--lime); } .mobile-menu .btn { margin-top: 22px; } /* ---------- Hero ---------- */ .hero { position: relative; padding-top: 78px; overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media image-slot { width: 100%; height: 100%; } .hero__media img, .pagehero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg) 0%, rgba(14,15,12,0.85) 42%, rgba(14,15,12,0.45) 100%), linear-gradient(0deg, var(--bg) 2%, rgba(14,15,12,0.1) 60%); } .hero__inner { padding-block: clamp(80px, 13vw, 150px); max-width: 760px; } .hero__inner .display { margin-top: 22px; } .hero__inner .lead { margin-top: 26px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .pagehero { position: relative; padding: clamp(140px, 18vw, 220px) 0 clamp(60px, 8vw, 96px); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--hairline); } .pagehero__media { position: absolute; inset: 0; z-index: -2; } .pagehero__media image-slot { width: 100%; height: 100%; } .pagehero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg) 12%, rgba(14,15,12,0.7) 70%, rgba(14,15,12,0.4) 100%), linear-gradient(0deg, var(--bg), rgba(14,15,12,0.2)); } .pagehero__inner { max-width: 780px; } .pagehero .display { margin-top: 20px; } .pagehero .lead { margin-top: 22px; } /* ---------- Stat strip ---------- */ .statstrip { border-block: 1px solid var(--hairline); background: var(--bg-2); } .statstrip__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; } .statcell { padding: 30px 24px; text-align: center; border-left: 1px solid var(--hairline); } .statcell:first-child { border-left: none; } .statcell__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); color: var(--lime); line-height: 1; } .statcell__l { font-size: 13px; color: var(--t-lo); margin-top: 8px; letter-spacing: 0.02em; } /* ---------- Section header ---------- */ .sec-head { max-width: 720px; margin-bottom: 56px; } .sec-head .display { margin-top: 18px; } .sec-head .lead { margin-top: 20px; } .sec-head--center { margin-inline: auto; text-align: center; } .sec-head--center .eyebrow { justify-content: center; } /* ---------- Cards / grids ---------- */ .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 30px; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease); } .card--hover:hover { transform: translateY(-6px); border-color: var(--hairline-strong); background: var(--surface-2); } .card__icon { width: 50px; height: 50px; border-radius: 13px; background: var(--lime-soft); color: var(--lime); display: grid; place-items: center; margin-bottom: 22px; } .card__icon svg { width: 24px; height: 24px; } .card__title { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 23px; letter-spacing: 0.02em; color: var(--t-hi); margin: 0 0 12px; } .card__text { font-size: 15.5px; color: var(--t-lo); margin: 0; line-height: 1.6; } .card__index { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--lime); letter-spacing: 0.1em; } /* feature card with arrow */ .feature { position: relative; display: flex; flex-direction: column; min-height: 230px; } .feature .card__text { flex: 1; } .feature__cta { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--t); transition: gap 0.25s var(--ease), color 0.2s; } .feature:hover .feature__cta { color: var(--lime); gap: 12px; } .feature__cta svg { width: 16px; height: 16px; } /* ---------- Lists ---------- */ .ticklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .ticklist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15.5px; color: var(--t); } .ticklist li::before { content: ""; grid-row: 1; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--lime-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232ecc71' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* ---------- Split / media rows ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .split--media-right { direction: ltr; } .media-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); aspect-ratio: 4 / 3; } .media-frame image-slot { width: 100%; height: 100%; } /* ---------- Process steps ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; } .step { position: relative; padding: 30px 26px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } .step__n { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1; color: var(--surface-3); margin-bottom: 16px; } .step:hover .step__n { color: var(--lime); transition: color 0.3s; } .step__t { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 20px; color: var(--t-hi); margin: 0 0 10px; letter-spacing: 0.02em; } .step__d { font-size: 14.5px; color: var(--t-lo); margin: 0; } /* ---------- Testimonials ---------- */ .quote { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 34px 32px; display: flex; flex-direction: column; height: 100%; } .quote__stars { color: var(--lime); letter-spacing: 3px; font-size: 15px; margin-bottom: 18px; } .quote__body { font-size: 17px; line-height: 1.6; color: var(--t-hi); margin: 0 0 24px; flex: 1; } .quote__who { font-weight: 600; color: var(--t-hi); font-size: 15px; } .quote__role { font-size: 13.5px; color: var(--t-lo); } /* ---------- CTA band ---------- */ .cta-band { background: var(--lime); color: var(--lime-deep); border-radius: 32px; padding: clamp(44px, 6vw, 76px); display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .cta-band .display { color: var(--lime-deep); } .cta-band__text { max-width: 30ch; } .cta-band__text p { margin: 16px 0 0; font-size: 17px; color: rgba(22,51,0,0.78); } .cta-band .btn--dark { background: var(--lime-deep); color: var(--lime-bright); border-color: transparent; } .cta-band .btn--dark:hover { background: #0c2200; } /* ---------- Forms ---------- */ .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: 13.5px; font-weight: 600; color: var(--t-hi); letter-spacing: 0.01em; } .field .req { color: var(--lime); } .input, .select, .textarea { width: 100%; background: var(--bg); border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); color: var(--t-hi); font-family: var(--font-body); font-size: 15.5px; padding: 14px 16px; transition: border-color 0.2s, background 0.2s; } .input::placeholder, .textarea::placeholder { color: var(--t-lo); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--lime); background: var(--bg-2); } .textarea { resize: vertical; min-height: 130px; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238f9684' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; } .radio-row { display: flex; gap: 10px; flex-wrap: wrap; } .radio-chip { position: relative; display: inline-flex; } .radio-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .radio-chip span { padding: 11px 18px; border-radius: var(--radius); border: 1px solid var(--hairline-strong); font-size: 14.5px; color: var(--t); transition: 0.2s; } .radio-chip input:checked + span { background: var(--lime); color: var(--lime-deep); border-color: var(--lime); font-weight: 600; } /* ---------- Footer ---------- */ .site-footer { background: var(--bg-2); border-top: 1px solid var(--hairline); padding-top: 72px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--hairline); } .footer-brand .brand { margin-bottom: 20px; } .footer-brand p { font-size: 15px; color: var(--t-lo); max-width: 32ch; margin: 0; } .footer-col h4 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-lo); margin: 0 0 18px; font-weight: 600; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .footer-col a, .footer-col li { font-size: 15px; color: var(--t); transition: color 0.2s; } .footer-col a:hover { color: var(--lime); } .footer-contact a { display: block; color: var(--t-hi); font-size: 15px; margin-bottom: 6px; } .footer-contact span { font-size: 14px; color: var(--t-lo); } .footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 28px; font-size: 13.5px; color: var(--t-lo); } /* ---------- Floating mobile CTA ---------- */ .float-cta { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; display: none; box-shadow: var(--shadow-floating, 0 12px 32px rgba(0,0,0,0.4)); } /* ---------- Reveal animation ---------- Opacity snaps (static) so content is never trapped invisible by a frozen animation clock; only transform is transitioned for the slide. */ .reveal { opacity: 0; } .reveal.in { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .reveal { transform: translateY(22px); transition: transform 0.7s var(--ease); } .reveal.in { transform: none; } .reveal[data-d="1"] { transition-delay: 0.08s; } .reveal[data-d="2"] { transition-delay: 0.16s; } .reveal[data-d="3"] { transition-delay: 0.24s; } .reveal[data-d="4"] { transition-delay: 0.32s; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- Portfolio gallery ---------- */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 230px; gap: 16px; } .gtile { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline); background: var(--surface); } .gtile image-slot { width: 100%; height: 100%; } .gtile.tall { grid-row: span 2; } .gtile.wide { grid-column: span 2; } .gtile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 14px; font-size: 13px; font-weight: 600; color: #fff; letter-spacing: 0.02em; background: linear-gradient(0deg, rgba(8,9,7,0.86), transparent); pointer-events: none; z-index: 2; } /* ---------- Case study ---------- */ .case { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .case__cell { padding: 30px; border-left: 1px solid var(--hairline); } .case__cell:first-child { border-left: none; } .case__k { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime); font-weight: 600; margin: 0 0 12px; } .case__v { font-size: 15.5px; color: var(--t); margin: 0; line-height: 1.55; } /* ---------- Chips ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 12px; } .chip { padding: 14px 22px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; font-size: 17px; color: var(--t-hi); transition: 0.25s var(--ease); } .chip:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-3px); } /* ---------- Projects index ---------- */ .cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--hairline); } .cat-head__l .display { margin-top: 14px; } .cat-count { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; color: var(--t-lo); text-transform: uppercase; } .project-card { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); } .project-card:hover { transform: translateY(-6px); border-color: var(--hairline-strong); } .project-card__media { position: relative; min-height: 340px; overflow: hidden; } .project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .project-card:hover .project-card__media img { transform: scale(1.04); } .project-card__tag { position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--lime); color: var(--lime-deep); font-weight: 600; font-size: 12.5px; letter-spacing: 0.04em; padding: 7px 14px; border-radius: var(--radius); } .project-card__body { padding: 40px; display: flex; flex-direction: column; justify-content: center; } .project-card__meta { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 16px; font-size: 13px; color: var(--t-lo); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; } .project-card__meta span { display: inline-flex; align-items: center; gap: 7px; } .project-card__meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); } .project-card__body .card__title { font-size: 30px; margin-bottom: 14px; } .project-card__body p { color: var(--t-lo); font-size: 15.5px; margin: 0 0 24px; line-height: 1.6; } /* ---------- Before / After ---------- */ .ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .ba { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); background: var(--surface); position: relative; } .ba__label { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: var(--radius); } .ba__label--before { background: rgba(14,15,12,0.78); color: var(--t-hi); border: 1px solid var(--hairline-strong); } .ba__label--after { background: var(--lime); color: var(--lime-deep); } .ba__media { aspect-ratio: 16 / 11; } .ba__media img { width: 100%; height: 100%; object-fit: cover; } .ba__media image-slot { width: 100%; height: 100%; } .ba__cap { padding: 14px 18px; font-size: 13.5px; color: var(--t-lo); border-top: 1px solid var(--hairline); } /* generic image fill inside frames */ .media-frame > img, .gtile > img { width: 100%; height: 100%; object-fit: cover; } /* spec / outcome stat row inside case study */ .spec-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; } .spec-cell { padding: 26px; border-left: 1px solid var(--hairline); } .spec-cell:first-child { border-left: none; } .spec-cell__k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-lo); font-weight: 600; margin: 0 0 8px; } .spec-cell__v { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--t-hi); text-transform: uppercase; letter-spacing: 0.02em; } /* ---------- Team "photo coming soon" ---------- */ .team-soon { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 38%, rgba(46,204,113,0.10), transparent 60%), var(--surface-2); } .team-soon__mono { font-family: var(--font-display); font-weight: 800; font-size: 44px; letter-spacing: 0.02em; color: var(--lime); width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--lime-soft); } .team-soon__tag { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-lo); font-weight: 600; } /* ---------- Form alert ---------- */ .form-alert { border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 22px; font-size: 15px; line-height: 1.5; border: 1px solid transparent; } .form-alert--ok { background: var(--lime-soft); border-color: var(--lime); color: var(--lime-bright); } .form-alert--err { background: rgba(208,50,56,0.12); border-color: rgba(208,50,56,0.5); color: #ffb3b6; } /* ---------- Contact split ---------- */ .contact-grid { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 32px; align-items: start; } .panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 34px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-grid .full { grid-column: 1 / -1; } .info-row { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--hairline); } .info-row:last-child { border-bottom: none; } .info-row__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--lime-soft); color: var(--lime); display: grid; place-items: center; } .info-row__ic svg { width: 20px; height: 20px; } .info-row__k { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-lo); font-weight: 600; } .info-row__v { font-size: 16px; color: var(--t-hi); margin-top: 3px; } .info-row__v a { color: var(--t-hi); } .emergency { background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: var(--radius); padding: 28px; } .maparea { border-radius: var(--radius); border: 1px solid var(--hairline); overflow: hidden; aspect-ratio: 16/9; background: radial-gradient(circle at 35% 40%, rgba(46,204,113,0.18), transparent 38%), repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 44px), var(--bg-2); position: relative; display: grid; place-items: center; } .map-embed { border-radius: var(--radius); border: 1px solid var(--hairline); overflow: hidden; aspect-ratio: 16/9; background: var(--bg-2); position: relative; } .map-embed iframe { display: block; width: 100%; height: 100%; filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9); } .maparea__pin { text-align: center; } .maparea__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--lime); margin: 0 auto 10px; box-shadow: 0 0 0 8px rgba(46,204,113,0.18), 0 0 0 18px rgba(46,204,113,0.08); } /* ---------- Responsive ---------- */ @media (max-width: 1000px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .statstrip__row { grid-template-columns: repeat(3, 1fr); } .statcell:nth-child(4) { border-left: none; } .statcell:nth-child(n+4) { border-top: 1px solid var(--hairline); } .footer-grid { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { .nav__links { display: none; } .nav__cta { display: none; } .nav__toggle { display: flex; } .split { grid-template-columns: 1fr; } .media-frame { aspect-ratio: 16 / 10; } .float-cta { display: flex; } .cta-band { flex-direction: column; align-items: flex-start; } .gallery { grid-template-columns: repeat(2, 1fr); } .case { grid-template-columns: 1fr; } .case__cell { border-left: none; border-top: 1px solid var(--hairline); } .case__cell:first-child { border-top: none; } .project-card { grid-template-columns: 1fr; } .project-card__media { min-height: 260px; } .spec-row { grid-template-columns: repeat(2, 1fr); } .spec-cell:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); } .spec-cell:nth-child(3) { border-left: none; } } @media (max-width: 620px) { .container { padding-inline: 22px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .statstrip__row { grid-template-columns: repeat(2, 1fr); } .statcell { border-left: none; border-top: 1px solid var(--hairline); } .statcell:nth-child(-n+2) { border-top: none; } .statcell:nth-child(odd) { border-left: none; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .hero__actions .btn { flex: 1; } .gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; } .gtile.wide { grid-column: auto; } .gtile.tall { grid-row: auto; } .form-grid { grid-template-columns: 1fr; } .ba-grid { grid-template-columns: 1fr; } .spec-row { grid-template-columns: 1fr; } .spec-cell { border-left: none; border-top: 1px solid var(--hairline); } .spec-cell:first-child { border-top: none; } }