/* ============================================ RESET & BASE ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --gold: #D4AF37; --gold-light: #E8CC6E; --gold-dark: #B8972E; --gold-glow: rgba(212, 175, 55, 0.4); --dark-bg: #1a1a1a; --darker-bg: #111111; --darkest: #0a0a0a; --card-bg: #222222; --card-border: #333333; --white: #FFFFFF; --off-white: #f0f0f0; --text-light: #e0e0e0; --text-muted: #a8a8a8; --text-dim: #8a8a8a; --font-heading: 'Oswald', sans-serif; --font-body: 'Open Sans', sans-serif; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text-light); background: var(--darker-bg); -webkit-font-smoothing: antialiased; /* clip (not hidden) so we don't turn into a scroll container, which breaks position:fixed on iOS and chops the fixed nav while scrolling */ overflow-x: clip; } /* Dark textured background for main sections */ .dark-texture { background-color: var(--dark-bg); background-image: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 70%), linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 40%, rgba(0,0,0,0.3) 100%); position: relative; } .dark-texture::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-size: 200px 200px; pointer-events: none; z-index: 0; } .dark-texture > * { position: relative; z-index: 1; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; } .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; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; line-height: 1.15; letter-spacing: 0.03em; } /* ============================================ SECTION DIVIDER (gold line with diamond) ============================================ */ .section-heading { text-align: center; margin-bottom: 40px; } .section-heading h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--white); display: inline-block; position: relative; padding: 0 30px; } .section-heading h2::before, .section-heading h2::after { content: ''; position: absolute; top: 50%; width: 60px; height: 2px; background: var(--gold); } .section-heading h2::before { right: 100%; } .section-heading h2::after { left: 100%; } .section-heading p { font-family: var(--font-body); font-size: 1.05rem; font-style: italic; color: var(--gold-light); margin-top: 8px; } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 14px 28px; border: 2px solid transparent; cursor: pointer; transition: all 200ms ease; min-height: 48px; } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } .btn--gold { background: var(--gold); color: var(--darkest); border-color: var(--gold); } .btn--gold:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,175,55,0.3); } .btn--outline { background: transparent; color: var(--white); border-color: var(--white); } .btn--outline:hover { background: var(--white); color: var(--darkest); } .btn--dark { background: var(--darkest); color: var(--gold); border-color: var(--gold); } .btn--dark:hover { background: var(--gold); color: var(--darkest); } /* ============================================ NAVIGATION ============================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(10,10,10,0.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid #222; /* promote to a stable GPU layer so the fixed header repaints cleanly during scroll (prevents the logo getting chopped on mobile) */ transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 82px; max-width: 1100px; margin: 0 auto; padding: 0 20px; } .nav__logo img { height: 44px; width: auto; filter: drop-shadow(0 0 8px rgba(212,175,55,0.5)); } .nav__links { display: flex; align-items: center; gap: 28px; } .nav__link { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); transition: color 200ms; padding: 4px 0; } .nav__link:hover { color: var(--gold); } .nav__cta { background: var(--gold); color: var(--darkest); font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 18px; display: inline-flex; align-items: center; gap: 6px; transition: all 200ms; } .nav__cta:hover { background: var(--gold-light); } .nav__cta svg { width: 16px; height: 16px; } .nav__hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; flex-direction: column; gap: 5px; justify-content: center; align-items: center; } .nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--gold); transition: all 300ms; } .nav__mobile { display: none; position: fixed; top: 82px; left: 0; right: 0; background: rgba(10,10,10,0.98); padding: 24px 20px; border-bottom: 1px solid #222; transform: translateY(-100%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform 300ms, opacity 300ms, visibility 0s linear 300ms; } .nav__mobile.active { transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; transition: transform 300ms, opacity 300ms, visibility 0s linear 0s; } .nav__mobile a { display: block; padding: 14px 0; font-family: var(--font-heading); font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); border-bottom: 1px solid #222; } .nav__mobile a:hover { color: var(--gold); } /* ============================================ HERO - Photo background with overlay ============================================ */ .hero { position: relative; min-height: 540px; display: flex; align-items: center; margin-top: 82px; overflow: hidden; background: var(--darkest); } .hero__photo { position: absolute; inset: 0; z-index: 0; } .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; } .hero__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.15) 100%); } .hero__content { position: relative; z-index: 2; max-width: 560px; padding: 60px 0; } .hero__content h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--white); line-height: 1.1; margin-bottom: 6px; } .hero__content h1 span { color: var(--gold); } .hero__subtitle { font-family: var(--font-heading); font-size: clamp(1rem, 2.5vw, 1.35rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-light); margin-bottom: 10px; } .hero__tagline { font-style: italic; font-size: 1rem; color: var(--text-muted); margin-bottom: 24px; } .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ============================================ TRUST BAR ============================================ */ .trust { background: var(--darkest); border-top: 3px solid var(--gold); border-bottom: 1px solid #222; padding: 24px 0; } .trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; } .trust__item { display: flex; align-items: center; justify-content: center; gap: 12px; } .trust__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .trust__icon svg { width: 36px; height: 36px; color: var(--gold); } .trust__text h3 { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); } .trust__text p { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } /* ============================================ SERVICES - Photo cards ============================================ */ .services { padding: 70px 0; } .services__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .svc-card { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 3/4; cursor: default; } .svc-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .svc-card:hover img { transform: scale(1.08); } .svc-card:active img { transform: scale(1.02); } .svc-card__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 16px; } .svc-card__overlay h3 { font-size: 1.1rem; color: var(--white); margin-bottom: 4px; } .svc-card__overlay p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; } /* ============================================ HOW IT WORKS - Gold accent bar ============================================ */ .how-bar { background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-dark) 100%); padding: 0; } .how-bar__inner { display: grid; grid-template-columns: repeat(3, 1fr); } .how-step { display: flex; align-items: center; gap: 14px; padding: 22px 20px; position: relative; } .how-step:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(0,0,0,0.2); } .how-step__icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .how-step__icon svg { width: 38px; height: 38px; color: var(--darkest); } .how-step h3 { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; text-transform: uppercase; color: var(--darkest); letter-spacing: 0.04em; } .how-step p { font-size: 0.8rem; color: rgba(0,0,0,0.65); margin-top: 2px; } /* ============================================ BEFORE/AFTER GALLERY ============================================ */ .gallery { padding: 70px 0; } .gallery__grid { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 820px; margin: 0 auto; } .ba-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 4px; overflow: hidden; } .ba-card__images { display: grid; grid-template-columns: 1fr 1fr; position: relative; } .ba-card__img { position: relative; aspect-ratio: 4/3; overflow: hidden; } .ba-card__img img { width: 100%; height: 100%; object-fit: cover; } .ba-card__tag { position: absolute; bottom: 10px; left: 10px; padding: 5px 11px; border-radius: 2px; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); z-index: 2; } .ba-card__tag--before { background: rgba(200,40,40,0.85); } .ba-card__tag--after { background: rgba(40,160,60,0.85); } .ba-card__divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--gold); z-index: 3; transform: translateX(-50%); } .ba-card__arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4; width: 40px; height: 40px; background: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .ba-card__arrow svg { width: 20px; height: 20px; color: var(--darkest); } .ba-card__info { padding: 18px 22px; border-top: 1px solid var(--card-border); } .ba-card__info h3 { font-size: 1.1rem; color: var(--white); } .ba-card__info p { font-size: 0.92rem; color: var(--text-muted); margin-top: 5px; } /* ============================================ TESTIMONIAL ============================================ */ .testimonial { padding: 70px 0; } .testimonial__card { max-width: 700px; margin: 0 auto; display: flex; gap: 24px; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--card-border); border-left: 4px solid var(--gold); padding: 28px 32px; border-radius: 4px; position: relative; } .testimonial__avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--darkest); } .testimonial__quote { flex: 1; } .testimonial__open { font-family: Georgia, serif; font-size: 3rem; color: var(--gold); line-height: 1; margin-bottom: -10px; } .testimonial__text { font-style: italic; font-size: 1rem; color: var(--text-light); line-height: 1.7; margin-bottom: 10px; } .testimonial__name { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold); font-size: 0.85rem; text-align: right; } .testimonial__close { position: absolute; bottom: 20px; right: 28px; font-family: Georgia, serif; font-size: 3rem; color: var(--gold); line-height: 1; } /* ============================================ LEAD FORM ============================================ */ .lead { position: relative; padding: 70px 0 80px; background: var(--darker-bg); overflow: hidden; } /* soft gold glow behind the card */ .lead::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 50% 38%, rgba(212,175,55,0.12), transparent 72%); } .lead__panel { position: relative; max-width: 880px; margin: 0 auto; background: linear-gradient(180deg, #1d1d1d 0%, #131313 100%); border: 1px solid #333; border-radius: 12px; padding: 46px clamp(20px, 4vw, 52px) 38px; box-shadow: 0 34px 70px -28px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05); } /* gold accent rail across the top of the card */ .lead__panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 12px 12px 0 0; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light) 50%, var(--gold-dark)); } .lead__head { text-align: center; margin-bottom: 30px; } .lead__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; font-weight: 600; color: var(--gold); background: rgba(212,175,55,0.10); border: 1px solid rgba(212,175,55,0.32); padding: 6px 15px; border-radius: 999px; margin-bottom: 16px; } .lead__eyebrow svg { width: 15px; height: 15px; } .lead__head h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); color: var(--white); line-height: 1.08; } .lead__head p { font-family: var(--font-body); text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--text-muted); max-width: 50ch; margin: 14px auto 0; font-size: 1rem; line-height: 1.6; } .lead__form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .lead__field { position: relative; } .lead__field > svg { position: absolute; left: 15px; top: 17px; width: 18px; height: 18px; color: var(--text-dim); pointer-events: none; transition: color 180ms ease; z-index: 1; } .lead__field--full { grid-column: 1 / -1; } .lead__input, .lead__select, .lead__textarea { width: 100%; font-family: var(--font-body); font-size: 0.95rem; padding: 15px 16px 15px 44px; background-color: #101010; border: 1px solid #333; border-radius: 7px; color: var(--text-light); outline: none; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; min-height: 54px; } .lead__textarea { min-height: 124px; resize: vertical; line-height: 1.6; } .lead__input::placeholder, .lead__textarea::placeholder { color: var(--text-dim); } .lead__input:focus, .lead__select:focus, .lead__textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.16); background-color: #141414; } .lead__field:focus-within > svg { color: var(--gold); } .lead__select { color: var(--text-muted); cursor: pointer; appearance: none; padding-right: 38px; 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='%23D4AF37' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .lead__submit { grid-column: 1 / -1; width: 100%; margin-top: 4px; min-height: 58px; font-size: 1rem; letter-spacing: 0.07em; position: relative; overflow: hidden; } /* shine sweep on hover */ .lead__submit::after { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-20deg); transition: left 650ms ease; pointer-events: none; } .lead__submit:hover::after { left: 150%; } .lead__submit svg { width: 18px; height: 18px; transition: transform 200ms ease; } .lead__submit:hover svg { transform: translateX(4px); } .lead__trust { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; margin-top: 18px; font-size: 0.82rem; color: var(--text-dim); } .lead__trust svg { width: 15px; height: 15px; color: var(--gold-dark); flex-shrink: 0; } /* ============================================ WHY CHOOSE US ============================================ */ .why { padding: 70px 0; } .why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .why-card { display: flex; gap: 16px; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--card-border); padding: 20px; border-radius: 4px; transition: border-color 200ms; } .why-card:hover { border-color: var(--gold); } .why-card:active { background: rgba(212,175,55,0.05); } .why-card__icon { width: 44px; height: 44px; flex-shrink: 0; background: rgba(212,175,55,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .why-card__icon svg { width: 22px; height: 22px; color: var(--gold); } .why-card h3 { font-size: 0.9rem; color: var(--white); margin-bottom: 4px; } .why-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; } /* ============================================ SERVICE AREA ============================================ */ .area { padding: 70px 0; } .area__cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 32px; } .area__city { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 4px; color: var(--text-light); font-weight: 600; font-size: 0.9rem; transition: border-color 200ms; } .area__city:hover { border-color: var(--gold); } .area__city:active { background: rgba(212,175,55,0.08); } .area__city svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; } .area__cta { text-align: center; } .area__cta p { color: var(--text-muted); margin-bottom: 16px; } /* ============================================ FAQ ============================================ */ .faq { padding: 70px 0; } .faq__list { max-width: 760px; margin: 0 auto; } .faq__item { border-bottom: 1px solid var(--card-border); } .faq__question { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; padding: 18px 0; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-light); text-align: left; gap: 12px; min-height: 44px; } .faq__question:hover { color: var(--gold); } .faq__icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: transform 300ms; } .faq__icon svg { width: 14px; height: 14px; color: var(--gold); } .faq__item.active .faq__icon { transform: rotate(45deg); } .faq__answer { max-height: 0; overflow: hidden; transition: max-height 300ms; } .faq__answer p { padding-bottom: 18px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.8; } /* ============================================ FOOTER ============================================ */ .footer { background: var(--darkest); border-top: 3px solid var(--gold); padding: 50px 0 20px; } .footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 30px; } .footer__brand img { height: 40px; width: auto; margin-bottom: 12px; filter: drop-shadow(0 0 8px rgba(212,175,55,0.5)); } .footer__brand p { color: var(--text-muted); font-size: 0.85rem; line-height: 1.7; margin-bottom: 14px; } .footer__social { display: flex; gap: 10px; } .footer__social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 4px; color: var(--text-muted); transition: all 200ms; } .footer__social a:hover { border-color: var(--gold); color: var(--gold); } .footer__social a svg { width: 16px; height: 16px; } .footer__col h3 { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-bottom: 14px; } .footer__col li { margin-bottom: 2px; } .footer__col a { display: inline-block; padding: 5px 0; color: var(--text-muted); font-size: 0.85rem; transition: color 200ms; } .footer__col a:hover { color: var(--gold); } .footer__col .contact-line { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--text-muted); font-size: 0.85rem; } .footer__col .contact-line svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; } .footer__bottom { border-top: 1px solid #222; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .footer__copy { color: var(--text-dim); font-size: 0.75rem; } .footer__credit { color: #555; font-size: 0.75rem; } .footer__credit a { color: var(--gold-dark); } .footer__credit a:hover { color: var(--gold); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .services__grid { grid-template-columns: repeat(3, 1fr); } .gallery__grid { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { /* solid, blur-free nav on phones: backdrop-filter on a fixed header glitches and chops content during scroll on mobile Safari/Chrome */ .nav { background: #0b0b0b; -webkit-backdrop-filter: none; backdrop-filter: none; } .nav__links { display: none; } .nav__hamburger { display: flex; } .nav__mobile { display: block; } .hero { min-height: 420px; } .hero__photo::after { background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.55) 100%); } .hero__content { text-align: center; max-width: 100%; } .hero__actions { justify-content: center; } .trust__grid { grid-template-columns: 1fr; gap: 14px; } .services__grid { grid-template-columns: repeat(2, 1fr); } .svc-card { aspect-ratio: 3/3.5; } .how-bar__inner { grid-template-columns: 1fr; } .how-step:not(:last-child)::after { display: none; } .how-step { border-bottom: 1px solid rgba(0,0,0,0.15); } .gallery__grid { grid-template-columns: 1fr; } .testimonial__card { flex-direction: column; align-items: center; text-align: center; } .testimonial__name { text-align: center; } .lead__form { grid-template-columns: 1fr 1fr; } .why__grid { grid-template-columns: 1fr; } .area__cities { grid-template-columns: repeat(2, 1fr); } .footer__top { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hero__actions { flex-direction: column; align-items: stretch; } .services__grid { grid-template-columns: 1fr; } .svc-card { aspect-ratio: 16/9; } .lead__form { grid-template-columns: 1fr; } .area__cities { grid-template-columns: 1fr; } .section-heading h2::before, .section-heading h2::after { width: 30px; } } /* Animations */ @media (prefers-reduced-motion: no-preference) { .fade-up { opacity: 0; transform: translateY(20px); transition: opacity 500ms ease, transform 500ms ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; } } /* FLOATING CALL BUTTON (mobile only) */ @media (max-width: 768px) { .float-call { display: flex; align-items: center; justify-content: center; gap: 10px; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1100; background: var(--gold); color: var(--darkest); font-family: var(--font-heading); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; text-decoration: none; padding: 14px 28px; border-radius: 50px; box-shadow: 0 4px 20px rgba(212,175,55,0.5); white-space: nowrap; } .float-call svg { width: 20px; height: 20px; flex-shrink: 0; } body { padding-bottom: 80px; } } @media (min-width: 769px) { .float-call { display: none; } } /* LEAD FORM THANK YOU */ .lead__thanks { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; gap: 16px; } .lead__thanks svg { width: 64px; height: 64px; color: var(--gold); } .lead__thanks h3 { font-family: var(--font-heading); font-size: 1.8rem; color: var(--white); margin: 0; } .lead__thanks p { color: var(--text-light); font-size: 1rem; line-height: 1.6; margin: 0; } .lead__thanks a { color: var(--gold); text-decoration: none; font-weight: 600; } /* ============================================ LEGACY LAND CARE — additions on the JNYT system ============================================ */ /* Nav + footer logo: the full Legacy Land Care lockup (transparent PNG) */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 1100; background: var(--gold); color: #0a0a0a; font-family: var(--font-heading); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.04em; padding: 10px 18px; border-radius: 4px; transition: top 160ms ease; } .skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; } .nav__logo { display:flex; align-items:center; } .nav__logo img { height:64px; width:auto; filter:none; } .footer__brand img { height:72px; width:auto; filter:none; } @media (max-width:480px){ .nav__logo img { height:52px; } } /* Services: 6 cards read best as 3 across */ .services .services__grid { grid-template-columns: repeat(3, 1fr); } a.svc-card { color:inherit; } @media (max-width:1024px){ .services .services__grid { grid-template-columns: repeat(3,1fr); } } @media (max-width:768px){ .services .services__grid { grid-template-columns: repeat(2,1fr); } } @media (max-width:480px){ .services .services__grid { grid-template-columns: 1fr; } } /* Service-area chips that are not links (no per-city pages yet) */ span.area__city { cursor: default; } /* Trust item copyable phone tweak n/a */ /* ============================================ INNER PAGES (about, per-service) — page hero + prose ============================================ */ .page-hero { margin-top: 82px; padding: 56px 0 40px; background: var(--darkest); border-bottom: 3px solid var(--gold); position: relative; } .page-hero .breadcrumb { font-size: .8rem; color: var(--text-dim); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-heading); } .page-hero .breadcrumb a { color: var(--text-muted); } .page-hero .breadcrumb a:hover { color: var(--gold); } .page-hero .eyebrow { font-family: var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; color: var(--gold); margin-bottom:10px; } .page-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); color: var(--white); line-height:1.08; } .page-hero h1 span { color: var(--gold); } .page-hero p.lede { color: var(--text-muted); font-size:1.05rem; margin-top:14px; max-width:60ch; } .page-hero .hero__actions { margin-top:24px; } .prose-section { padding: 56px 0; } .two-col { display:grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items:start; } .prose h2 { font-size: clamp(1.4rem,3vw,2rem); color:var(--white); margin: 0 0 14px; } .prose h2:not(:first-child){ margin-top: 30px; } .prose h3 { font-size:1.05rem; color:var(--gold-light); margin:22px 0 6px; } .prose p { color: var(--text-muted); margin-bottom: 14px; line-height:1.8; } .prose a:not(.btn) { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .prose a:not(.btn):hover { color: var(--gold-light); } .checks { display:grid; gap:10px; margin:16px 0; } .checks li { display:flex; gap:10px; align-items:flex-start; color:var(--text-light); font-size:.95rem; } .checks li svg { width:18px; height:18px; color:var(--gold); flex-shrink:0; margin-top:3px; } .side-card { background: var(--card-bg); border:1px solid var(--card-border); border-top:3px solid var(--gold); border-radius:4px; padding:24px; position:sticky; top:88px; } .side-card h3 { font-size:1.1rem; color:var(--white); margin-bottom:10px; } .side-card p { color:var(--text-muted); font-size:.9rem; margin-bottom:16px; } .side-card .btn { width:100%; margin-bottom:10px; } .side-card .meta { font-size:.8rem; color:var(--text-dim); margin-top:6px; } @media (max-width:768px){ .two-col{ grid-template-columns:1fr; } .side-card{ position:static; } } /* Related services cross-links */ .xlinks { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; } .xlink { background:var(--card-bg); border:1px solid var(--card-border); border-radius:4px; padding:18px; transition:border-color 200ms; } .xlink:hover { border-color:var(--gold); } .xlink h3 { font-size:.95rem; color:var(--white); margin-bottom:6px; } .xlink p { font-size:.82rem; color:var(--text-muted); line-height:1.6; } @media (max-width:768px){ .xlinks{ grid-template-columns:1fr; } } /* ============ About: founder story ============ */ .story { padding:66px 0; border-top:1px solid var(--card-border); } .story .container { max-width:1120px; } .story-eyebrow { font-family:var(--font-heading); text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; color:var(--gold); margin:0 0 12px; } .story-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; } .story-grid--rev .story-media { order:2; } .story-body h2 { font-family:var(--font-heading); font-weight:600; font-size:2rem; line-height:1.12; color:var(--white); margin:0 0 18px; } .story-body p { color:var(--text-light); line-height:1.78; margin:0 0 15px; } .story-body p:last-child { margin-bottom:0; } .story-body a { color:var(--gold); text-decoration:underline; text-underline-offset:3px; } .story-body a:hover { color:var(--gold-light); } .figure { margin:0; border:1px solid var(--card-border); border-radius:6px; overflow:hidden; background:var(--darker-bg); } .figure__img { display:block; line-height:0; } .figure__img picture { display:block; width:100%; height:100%; } .figure__img img { display:block; width:100%; height:auto; } .figure__img--sq { aspect-ratio:1/1; } .figure__img--43 { aspect-ratio:4/3; } .figure__img--34 { aspect-ratio:3/4; } .figure__img--16-7 { aspect-ratio:16/7; } .figure__img--sq img, .figure__img--43 img, .figure__img--34 img, .figure__img--16-7 img { height:100%; object-fit:cover; } .figcap { font-size:.8rem; color:var(--text-dim); line-height:1.4; padding:9px 13px; border-top:1px solid var(--card-border); margin:0; background:var(--darker-bg); } .photo-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .photo-band { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; } .photo-wide { margin-top:30px; } .pull-quote { border-left:3px solid var(--gold); padding:6px 0 6px 24px; margin:26px 0; font-family:var(--font-heading); font-weight:500; font-size:1.35rem; line-height:1.45; color:var(--off-white); } .signoff { display:flex; align-items:center; gap:18px; margin-top:26px; padding-top:22px; border-top:1px solid var(--card-border); } .signoff__badge { width:54px; height:54px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--gold); border-radius:50%; color:var(--gold); } .signoff__badge svg { width:26px; height:26px; } .signoff__name { font-family:var(--font-heading); font-size:1.15rem; letter-spacing:.03em; color:var(--white); } .signoff__role { font-size:.82rem; color:var(--gold); text-transform:uppercase; letter-spacing:.08em; margin-top:2px; } @media (max-width:768px){ .story { padding:44px 0; } .story-grid { grid-template-columns:1fr; gap:24px; } .story-grid--rev .story-media { order:0; } .story-body h2 { font-size:1.6rem; } .pull-quote { font-size:1.15rem; } }