/* ========================================================================== Life Tree Corp — Tree Service & Arborist · Sunrise, FL / Broward County Bespoke stylesheet. Palette: deep forest green + warm gold + cream. ========================================================================== */ /* ---------- Fonts ---------- */ /* Loaded via in : Fraunces (display serif) + Mulish (body) */ /* ---------- Design tokens ---------- */ :root{ --forest-deep:#0f2b21; --forest:#13352a; --forest-700:#1c4636; --forest-600:#27604a; --moss:#3c7a5b; --gold:#e0a33b; --gold-deep:#c5851f; --gold-soft:#eec57e; --cream:#f7f4ec; --cream-2:#efe8d7; --cream-3:#e6dcc4; --ink:#1d2620; --ink-soft:#46524a; --line:rgba(19,53,42,.14); --line-light:rgba(247,244,236,.16); --font-display:'Fraunces',Georgia,'Times New Roman',serif; --font-body:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --shadow-sm:0 2px 10px rgba(15,43,33,.08); --shadow:0 18px 50px -18px rgba(15,43,33,.34); --shadow-lg:0 40px 90px -30px rgba(15,43,33,.5); --radius:18px; --radius-lg:28px; --maxw:1240px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); color:var(--ink); background:var(--cream); line-height:1.65; font-size:1.02rem; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} button{font-family:inherit;cursor:pointer;border:none;background:none} /* ---------- Typography ---------- */ h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.015em;color:var(--forest)} h1{font-size:clamp(2.6rem,6vw,4.7rem);font-weight:600} h2{font-size:clamp(2rem,4.2vw,3.2rem)} h3{font-size:clamp(1.3rem,2vw,1.6rem)} .serif-italic{font-style:italic;font-variation-settings:'SOFT' 60,'WONK' 1} p{color:var(--ink-soft)} .lede{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--ink-soft);line-height:1.6} /* ---------- Layout helpers ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,4vw,2.6rem)} .section{padding:clamp(4.5rem,9vw,8rem) 0} .section--tight{padding:clamp(3rem,6vw,5rem) 0} .eyebrow{ display:inline-flex;align-items:center;gap:.55rem; font-family:var(--font-body);font-weight:800; font-size:.78rem;letter-spacing:.18em;text-transform:uppercase; color:var(--gold-deep);margin-bottom:1.1rem; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block;border-radius:2px} .eyebrow--center::before{display:none} .center{text-align:center} .measure{max-width:62ch} .measure-narrow{max-width:48ch} .mx-auto{margin-left:auto;margin-right:auto} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.6rem; font-weight:800;font-size:.96rem;letter-spacing:.01em; padding:1rem 1.7rem;border-radius:999px; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s; will-change:transform;white-space:nowrap; } .btn svg{width:18px;height:18px} .btn--gold{background:var(--gold);color:var(--forest-deep);box-shadow:0 12px 30px -12px rgba(224,163,59,.75)} .btn--gold:hover{background:var(--gold-soft);transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(224,163,59,.85)} .btn--forest{background:var(--forest);color:var(--cream)} .btn--forest:hover{background:var(--forest-700);transform:translateY(-2px)} .btn--ghost{background:transparent;color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--line)} .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--forest);transform:translateY(-2px)} .btn--light{background:var(--cream);color:var(--forest-deep)} .btn--light:hover{background:#fff;transform:translateY(-2px)} .btn--outline-light{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--line-light)} .btn--outline-light:hover{box-shadow:inset 0 0 0 1.5px var(--cream);transform:translateY(-2px)} .btn-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center} /* ---------- Header / Nav ---------- */ .site-header{ position:sticky;top:0;z-index:60; background:rgba(247,244,236,.82); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid transparent; transition:background .3s,border-color .3s,box-shadow .3s; } .site-header.scrolled{background:rgba(247,244,236,.96);border-color:var(--line);box-shadow:0 6px 24px -16px rgba(15,43,33,.4)} .nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:78px} .brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-weight:600;font-size:1.45rem;color:var(--forest);letter-spacing:-.02em} .brand .mark{flex:0 0 auto} .brand small{display:block;font-family:var(--font-body);font-weight:700;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);margin-top:-3px} .nav-links{display:flex;align-items:center;gap:.3rem} .nav-links a{ font-weight:700;font-size:.95rem;color:var(--forest-700); padding:.55rem .9rem;border-radius:999px;position:relative;transition:color .2s,background .2s; } .nav-links a:hover{color:var(--forest);background:rgba(19,53,42,.06)} .nav-links a.active{color:var(--forest)} .nav-links a.active::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.32rem;height:2px;background:var(--gold);border-radius:2px} .nav-cta{display:flex;align-items:center;gap:.9rem} .nav-phone{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;color:var(--forest);font-size:.98rem} .nav-phone svg{width:18px;height:18px;color:var(--gold-deep)} .nav-toggle{display:none;width:46px;height:46px;border-radius:12px;align-items:center;justify-content:center;color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--line)} .nav-toggle svg{width:24px;height:24px} /* Mobile menu */ .mobile-menu{ position:fixed;inset:0;z-index:80;background:var(--forest-deep); display:flex;flex-direction:column;padding:2rem clamp(1.2rem,5vw,2rem); transform:translateX(100%);transition:transform .4s var(--ease); } .mobile-menu.open{transform:translateX(0)} .mobile-menu-top{display:flex;align-items:center;justify-content:space-between} .mobile-menu .brand{color:var(--cream)} .mobile-close{width:46px;height:46px;border-radius:12px;color:var(--cream);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px var(--line-light)} .mobile-close svg{width:26px;height:26px} .mobile-links{display:flex;flex-direction:column;gap:.3rem;margin-top:2.5rem} .mobile-links a{font-family:var(--font-display);font-size:2rem;color:var(--cream);padding:.5rem 0;border-bottom:1px solid var(--line-light)} .mobile-links a:last-child{border-bottom:none} .mobile-foot{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;gap:1rem} .mobile-foot .btn{justify-content:center} /* ---------- Hero ---------- */ .hero{position:relative;background:var(--forest-deep);color:var(--cream);overflow:hidden} .hero-media{position:absolute;inset:0} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 35%} .hero-media::after{ content:"";position:absolute;inset:0; background: linear-gradient(180deg,rgba(15,43,33,.46) 0%,rgba(15,43,33,.2) 35%,rgba(15,43,33,.86) 100%), linear-gradient(90deg,rgba(15,43,33,.78) 0%,rgba(15,43,33,.3) 55%,rgba(15,43,33,0) 100%); } .hero-inner{position:relative;z-index:2;padding:clamp(4.5rem,11vw,9rem) 0 clamp(3.5rem,7vw,6rem)} .hero h1{color:var(--cream);max-width:16ch} .hero h1 em{color:var(--gold-soft);font-style:italic;font-variation-settings:'SOFT' 60,'WONK' 1} .hero .lede{color:rgba(247,244,236,.86);max-width:52ch;margin-top:1.5rem} .hero .btn-row{margin-top:2.4rem} .hero-phone{color:var(--cream);display:inline-flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.05rem;padding:1rem .4rem} .hero-phone svg{width:20px;height:20px;color:var(--gold-soft)} .hero-badges{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:3rem;padding-top:2.2rem;border-top:1px solid var(--line-light)} .hero-badge{display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:.95rem;color:rgba(247,244,236,.92)} .hero-badge svg{width:22px;height:22px;color:var(--gold-soft);flex:0 0 auto} /* ---------- Trust strip ---------- */ .trust{background:var(--forest);color:var(--cream)} .trust-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light)} .trust-item{background:var(--forest);padding:1.6rem clamp(1rem,3vw,2rem);display:flex;align-items:center;gap:1rem} .trust-item svg{width:30px;height:30px;color:var(--gold);flex:0 0 auto} .trust-item b{display:block;font-family:var(--font-display);font-size:1.18rem;color:var(--cream);font-weight:600;line-height:1.1} .trust-item span{font-size:.85rem;color:rgba(247,244,236,.7)} /* ---------- Section heading block ---------- */ .head{max-width:64ch} .head--center{margin:0 auto;text-align:center} .head p{margin-top:1rem} /* ---------- Services grid ---------- */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3.2rem} .svc-card{ position:relative;background:#fff;border-radius:var(--radius);overflow:hidden; box-shadow:var(--shadow-sm);border:1px solid var(--line); display:flex;flex-direction:column; transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .svc-card__media{position:relative;aspect-ratio:16/11;overflow:hidden} .svc-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .svc-card:hover .svc-card__media img{transform:scale(1.06)} .svc-card__icon{ position:absolute;left:1rem;bottom:1rem;width:48px;height:48px;border-radius:13px; background:var(--cream);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm); } .svc-card__icon svg{width:24px;height:24px;color:var(--forest)} .svc-card__body{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1} .svc-card__body h3{margin-bottom:.5rem} .svc-card__body p{font-size:.95rem;flex:1} .svc-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;font-weight:800;font-size:.9rem;color:var(--gold-deep);letter-spacing:.01em} .svc-link svg{width:16px;height:16px;transition:transform .25s var(--ease)} .svc-card:hover .svc-link svg{transform:translateX(4px)} /* ---------- Split / feature ---------- */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .split--reverse .split__media{order:2} .split__media{position:relative} .split__media img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow);aspect-ratio:4/3.2;object-fit:cover} .split__media .tag{ position:absolute;left:-14px;bottom:24px;background:var(--gold);color:var(--forest-deep); font-weight:800;font-size:.9rem;padding:.85rem 1.3rem;border-radius:14px;box-shadow:var(--shadow); display:flex;align-items:center;gap:.55rem; } .split__media .tag svg{width:20px;height:20px} .feature-list{margin-top:1.8rem;display:flex;flex-direction:column;gap:1.1rem} .feature-list li{display:flex;gap:.9rem;align-items:flex-start} .feature-list .ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:rgba(60,122,91,.12);display:flex;align-items:center;justify-content:center;margin-top:2px} .feature-list .ic svg{width:20px;height:20px;color:var(--moss)} .feature-list b{color:var(--forest);font-family:var(--font-body);font-weight:800;font-size:1rem} .feature-list p{font-size:.93rem;margin-top:.15rem} /* ---------- Stats ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3rem} .stat{text-align:center;padding:1.4rem 1rem;border-radius:var(--radius);background:var(--cream-2)} .stat b{display:block;font-family:var(--font-display);font-size:clamp(2rem,3.5vw,2.8rem);color:var(--forest);font-weight:600;line-height:1} .stat span{display:block;margin-top:.5rem;font-size:.86rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)} /* ---------- Storm callout ---------- */ .storm{position:relative;background:var(--forest-deep);color:var(--cream);overflow:hidden;border-radius:var(--radius-lg)} .storm-media{position:absolute;inset:0} .storm-media img{width:100%;height:100%;object-fit:cover;opacity:.32} .storm-media::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,var(--forest-deep) 30%,rgba(15,43,33,.55) 100%)} .storm-inner{position:relative;z-index:2;padding:clamp(2.6rem,6vw,4.5rem);max-width:640px} .storm .pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(224,163,59,.16);color:var(--gold-soft);font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem 1rem;border-radius:999px;margin-bottom:1.2rem} .storm .pill svg{width:16px;height:16px} .storm h2{color:var(--cream)} .storm p{color:rgba(247,244,236,.85);margin-top:1rem} .storm .btn-row{margin-top:2rem} /* ---------- Why-us / values cards ---------- */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem} .why-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.8rem;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease)} .why-card:hover{transform:translateY(-4px)} .why-card .ic{width:54px;height:54px;border-radius:15px;background:var(--forest);display:flex;align-items:center;justify-content:center;margin-bottom:1.3rem} .why-card .ic svg{width:27px;height:27px;color:var(--gold)} .why-card h3{margin-bottom:.55rem} .why-card p{font-size:.95rem} /* ---------- Service area ---------- */ .area{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center} .area-towns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem} .area-towns span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;font-weight:700;font-size:.9rem;color:var(--forest-700);display:inline-flex;align-items:center;gap:.45rem} .area-towns svg{width:14px;height:14px;color:var(--gold-deep)} .area-map{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:6px solid #fff;aspect-ratio:4/3.4} .area-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(1.05)} /* ---------- CTA band ---------- */ .cta-band{position:relative;background:var(--forest);color:var(--cream);overflow:hidden} .cta-media{position:absolute;inset:0} .cta-media img{width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.28} .cta-media::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 30% 20%,rgba(15,43,33,.5),var(--forest-deep))} .cta-inner{position:relative;z-index:2;text-align:center;padding:clamp(4rem,8vw,6.5rem) 0;max-width:720px;margin:0 auto} .cta-inner h2{color:var(--cream)} .cta-inner p{color:rgba(247,244,236,.85);margin:1.1rem auto 0;max-width:50ch} .cta-inner .btn-row{justify-content:center;margin-top:2.2rem} /* ---------- Footer ---------- */ .footer{background:var(--forest-deep);color:rgba(247,244,236,.72);padding:clamp(3.5rem,6vw,5rem) 0 2rem} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem} .footer .brand{color:var(--cream);margin-bottom:1.1rem} .footer p{color:rgba(247,244,236,.66);font-size:.95rem;max-width:34ch} .footer h4{font-family:var(--font-body);font-weight:800;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.1rem} .footer-col a,.footer-col li{display:block;color:rgba(247,244,236,.72);font-size:.95rem;padding:.32rem 0;transition:color .2s} .footer-col a:hover{color:var(--cream)} .footer-contact li{display:flex;align-items:flex-start;gap:.65rem;color:rgba(247,244,236,.78);font-size:.95rem;padding:.4rem 0} .footer-contact svg{width:18px;height:18px;color:var(--gold-soft);flex:0 0 auto;margin-top:3px} .footer-bar{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line-light);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.85rem;color:rgba(247,244,236,.55)} .footer-bar a{color:rgba(247,244,236,.7)} /* ---------- Page hero (interior) ---------- */ .page-hero{position:relative;background:var(--forest-deep);color:var(--cream);overflow:hidden} .page-hero-media{position:absolute;inset:0} .page-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%} .page-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,43,33,.62),rgba(15,43,33,.85))} .page-hero-inner{position:relative;z-index:2;padding:clamp(4rem,9vw,7rem) 0 clamp(3rem,6vw,4.5rem)} .page-hero h1{color:var(--cream)} .page-hero .lede{color:rgba(247,244,236,.85);margin-top:1.2rem;max-width:56ch} .crumbs{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:rgba(247,244,236,.6);margin-bottom:1.4rem;font-weight:600} .crumbs a:hover{color:var(--gold-soft)} .crumbs svg{width:14px;height:14px} /* ---------- Services page rows ---------- */ .svc-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(2.5rem,5vw,4rem) 0} .svc-row+.svc-row{border-top:1px solid var(--line)} .svc-row--rev .svc-row__media{order:2} .svc-row__media img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow);aspect-ratio:4/3.1;object-fit:cover} .svc-row__num{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--gold-deep);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.7rem} .svc-row__num .ic{width:42px;height:42px;border-radius:12px;background:var(--forest);display:flex;align-items:center;justify-content:center} .svc-row__num .ic svg{width:21px;height:21px;color:var(--gold)} .svc-row ul.checks{margin-top:1.4rem;display:grid;gap:.75rem} .checks li{display:flex;gap:.65rem;align-items:flex-start;font-size:.96rem;color:var(--ink-soft)} .checks svg{width:19px;height:19px;color:var(--moss);flex:0 0 auto;margin-top:3px} .note{margin-top:1.5rem;background:var(--cream-2);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;padding:1rem 1.2rem;font-size:.92rem} .note b{color:var(--forest)} /* ---------- About ---------- */ .about-lead{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start} .values-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2rem} .value{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem} .value .ic{width:46px;height:46px;border-radius:13px;background:rgba(60,122,91,.12);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .value .ic svg{width:23px;height:23px;color:var(--moss)} .value h3{font-size:1.1rem;margin-bottom:.3rem} .value p{font-size:.92rem} /* ---------- Gallery ---------- */ .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:1rem;margin-top:1rem} .gal{position:relative;overflow:hidden;border-radius:16px;box-shadow:var(--shadow-sm)} .gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .gal:hover img{transform:scale(1.07)} .gal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,43,33,.78));opacity:.85;transition:opacity .3s} .gal figcaption{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:2;color:var(--cream);font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:.5rem} .gal figcaption svg{width:16px;height:16px;color:var(--gold-soft)} .gal--tall{grid-row:span 2} .gal--wide{grid-column:span 2} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start} .contact-card{background:var(--forest);color:var(--cream);border-radius:var(--radius-lg);padding:clamp(2rem,4vw,2.8rem);box-shadow:var(--shadow)} .contact-card h2{color:var(--cream)} .contact-card p{color:rgba(247,244,236,.82);margin-top:.8rem} .contact-list{margin-top:2rem;display:flex;flex-direction:column;gap:1.4rem} .contact-list a,.contact-list div{display:flex;gap:1rem;align-items:flex-start} .contact-list .ic{width:48px;height:48px;border-radius:14px;background:rgba(224,163,59,.16);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .contact-list .ic svg{width:23px;height:23px;color:var(--gold-soft)} .contact-list small{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft);font-weight:800;margin-bottom:.15rem} .contact-list b{font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--cream)} .contact-list span{color:rgba(247,244,236,.8)} .contact-hours{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line-light);font-size:.92rem;color:rgba(247,244,236,.8)} .contact-hours b{color:var(--cream);display:block;margin-bottom:.4rem;font-family:var(--font-body)} /* Form */ .form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.8rem,4vw,2.6rem);box-shadow:var(--shadow-sm)} .form h3{margin-bottom:.4rem} .form>p{font-size:.95rem;margin-bottom:1.6rem} .field{margin-bottom:1.15rem} .field label{display:block;font-weight:800;font-size:.84rem;color:var(--forest);margin-bottom:.45rem;letter-spacing:.01em} .field label .req{color:var(--gold-deep)} .field input,.field select,.field textarea{ width:100%;font-family:inherit;font-size:1rem;color:var(--ink); background:var(--cream);border:1.5px solid var(--line);border-radius:12px; padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s,background .2s; } .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--moss);background:#fff;box-shadow:0 0 0 4px rgba(60,122,91,.12)} .field textarea{resize:vertical;min-height:120px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem} .form .btn{width:100%;justify-content:center;margin-top:.4rem} .form-fine{font-size:.82rem;color:var(--ink-soft);margin-top:1rem;text-align:center} .form-success{display:none;text-align:center;padding:1.5rem 0} .form-success.show{display:block} .form-success .ic{width:64px;height:64px;border-radius:50%;background:rgba(60,122,91,.14);display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem} .form-success .ic svg{width:34px;height:34px;color:var(--moss)} .form-success h3{margin-bottom:.5rem} /* ---------- 404 ---------- */ .nf{min-height:72vh;display:flex;align-items:center;background:var(--forest-deep);color:var(--cream);position:relative;overflow:hidden} .nf-media{position:absolute;inset:0} .nf-media img{width:100%;height:100%;object-fit:cover;opacity:.22} .nf-media::after{content:"";position:absolute;inset:0;background:radial-gradient(100% 100% at 30% 30%,rgba(15,43,33,.5),var(--forest-deep))} .nf-inner{position:relative;z-index:2;text-align:center;margin:0 auto;max-width:560px;padding:4rem 0} .nf b.code{font-family:var(--font-display);font-size:clamp(5rem,16vw,9rem);color:var(--gold-soft);line-height:.9;display:block} .nf h1{color:var(--cream);margin:.8rem 0 1rem} .nf p{color:rgba(247,244,236,.82)} .nf .btn-row{justify-content:center;margin-top:2rem} /* ---------- Reveal animations ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal-d1{transition-delay:.08s} .reveal-d2{transition-delay:.16s} .reveal-d3{transition-delay:.24s} .reveal-d4{transition-delay:.32s} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important;transition:none} html{scroll-behavior:auto} } /* ---------- Decorative ---------- */ .bg-cream-2{background:var(--cream-2)} .bg-forest{background:var(--forest);color:var(--cream)} .divider-leaf{display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--gold);margin:0 auto} .divider-leaf svg{width:26px;height:26px} .divider-leaf span{height:1px;width:60px;background:var(--line)} /* ---------- Responsive ---------- */ @media (max-width:1024px){ .footer-grid{grid-template-columns:1fr 1fr} .stats{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .nav-links,.nav-phone{display:none} .nav-toggle{display:flex} .nav-cta .btn{display:none} .svc-grid,.why-grid{grid-template-columns:repeat(2,1fr)} .split,.area,.svc-row,.about-lead,.contact-grid{grid-template-columns:1fr;gap:2.2rem} .split--reverse .split__media,.svc-row--rev .svc-row__media{order:0} .trust-inner{grid-template-columns:1fr} .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px} .gal--wide{grid-column:span 2} .gal--tall{grid-row:span 1} .values-row{grid-template-columns:1fr} } @media (max-width:560px){ .svc-grid,.why-grid{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .field-row{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .gallery-grid{grid-template-columns:1fr;grid-auto-rows:220px} .gal--wide{grid-column:span 1} .hero-badges{gap:1rem} }