:root { --green:#0f6b5b; --green-dark:#083f38; --mint:#e9f5ef; --cream:#fbfaf6; --coral:#e4856f; --ink:#19332d; --muted:#60746e; --line:#d9e6df; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--green); }
.site-width { width:min(1160px, calc(100% - 48px)); margin:0 auto; }
.topbar { background:var(--green-dark); color:#d6eee5; font-size:13px; }
.topbar-inner { display:flex; justify-content:space-between; align-items:center; min-height:36px; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar-right a { color:#fff; opacity:.86; }
.site-header { background:var(--white); border-bottom:1px solid var(--line); position:relative; z-index:2; }
.header-main { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--green-dark); }
.brand-logo { display:block; width:214px; height:78px; object-fit:contain; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--green); color:#fff; line-height:1; overflow:hidden; }
.brand-mark svg { width:29px; height:29px; fill:currentColor; }
.brand-mark.small { width:32px; height:32px; border-radius:10px; font-size:22px; display:inline-grid; vertical-align:middle; margin-right:6px; }
.brand-mark.small svg { width:21px; height:21px; }
.brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.brand-copy strong { font-size:20px; letter-spacing:-.03em; }
.brand-copy small { color:var(--coral); font-size:11px; font-weight:700; letter-spacing:.18em; margin-top:4px; }
.header-actions { display:flex; align-items:center; gap:22px; font-size:14px; }
.phone-link { font-weight:700; color:var(--green); }
.account-link { color:var(--muted); }
.cart-link { padding:10px 16px; background:var(--mint); color:var(--green-dark); border-radius:999px; font-weight:700; }
.cart-link span { color:var(--coral); margin-left:8px; }
.nav-row { border-top:1px solid #f0f4f1; }
.main-nav { min-height:52px; display:flex; align-items:center; gap:28px; overflow:auto; }
.nav-link { padding:15px 0 13px; color:var(--muted); font-size:14px; white-space:nowrap; border-bottom:2px solid transparent; }
.nav-link:hover, .nav-link.is-active { color:var(--green); border-color:var(--coral); }
.breadcrumbs { display:flex; align-items:center; gap:9px; padding-top:16px; padding-bottom:4px; color:var(--muted); font-size:13px; }
.breadcrumbs a { color:var(--green); font-weight:700; }
.breadcrumbs a:hover { color:var(--coral); }
.breadcrumbs-separator { color:#a6bcb3; }
.breadcrumbs [aria-current="page"] { color:var(--muted); }
.hero { background:var(--mint); overflow:hidden; }
.hero-grid { min-height:500px; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:60px; padding:70px 0; }
.hero.compact .hero-grid { min-height:420px; }
.hero-copy { max-width:640px; }
.eyebrow { display:block; color:var(--coral); font-size:12px; font-weight:800; letter-spacing:.16em; margin-bottom:14px; }
h1,h2,h3 { margin:0; color:var(--green-dark); line-height:1.12; letter-spacing:-.035em; }
h1 { font-size:clamp(40px, 6vw, 76px); }
h1 em { color:var(--green); font-style:normal; }
.hero-copy > p { max-width:510px; margin:22px 0 30px; color:var(--muted); font-size:19px; }
.hero-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; border:0; border-radius:999px; padding:13px 21px; font-weight:700; cursor:pointer; font-size:14px; }
.button-primary { color:#fff; background:var(--coral); box-shadow:0 8px 18px #e4856f35; }
.button-primary:hover { color:#fff; background:#d8735e; }
.button-dark { color:#fff; background:var(--green-dark); }
.button-light { color:var(--green-dark); background:#fff; }
.text-link { color:var(--green); font-weight:700; font-size:14px; }
.hero-card { width:min(100%,370px); justify-self:end; padding:36px; color:#fff; background:var(--green-dark); border-radius:28px; box-shadow:20px 24px 0 #c8e5d9; }
.cross-badge { display:grid; place-items:center; width:55px; height:55px; border-radius:17px; color:var(--green-dark); background:#cce9db; font-size:36px; margin-bottom:38px; }
.hero-card-label { color:#a9d8c8; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 10px; }
.hero-card h2 { color:#fff; font-size:36px; }
.hero-card-line { width:44px; height:3px; background:var(--coral); margin:25px 0 18px; }
.hero-card p:last-child { color:#c5e2d8; margin:0; }
.hero-photo { width:min(100%,520px); margin:0; justify-self:end; position:relative; border-radius:28px; overflow:hidden; background:var(--green-dark); box-shadow:20px 24px 0 #c8e5d9; }
.hero-photo img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.hero-photo figcaption { position:absolute; left:0; right:0; bottom:0; padding:34px 20px 16px; color:#fff; font-size:12px; background:linear-gradient(transparent,#083f38e8); }
.trust-strip { background:#fff; border-bottom:1px solid var(--line); }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.trust-grid > div { padding:24px 26px; border-right:1px solid var(--line); }
.trust-grid > div:first-child { padding-left:0; }
.trust-grid > div:last-child { border:0; }
.trust-grid strong, .trust-grid span { display:block; }
.trust-grid strong { color:var(--green-dark); font-size:15px; }
.trust-grid span { color:var(--muted); font-size:13px; margin-top:2px; }
.section { padding-top:88px; padding-bottom:88px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:34px; }
.section-heading h2, .section > h2 { font-size:42px; }
.card-grid { display:grid; gap:18px; }
.card-grid.three { grid-template-columns:repeat(3,1fr); }
.service-card { min-height:275px; padding:28px; background:#fff; border:1px solid var(--line); border-radius:20px; display:flex; flex-direction:column; align-items:flex-start; }
.service-card.featured { background:var(--green); border-color:var(--green); color:#e8f6f0; transform:translateY(-10px); }
.service-card.featured h3, .service-card.featured p { color:#fff; }
.card-icon { display:grid; place-items:center; width:45px; height:45px; border-radius:14px; background:var(--mint); color:var(--green); font-size:24px; margin-bottom:22px; }
.card-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.card-icon svg path { vector-effect:non-scaling-stroke; }
.featured .card-icon { color:var(--green-dark); background:#cbe9dc; }
.service-card h3 { font-size:21px; margin-bottom:10px; }
.service-card p { color:var(--muted); margin:0 0 20px; }
.service-card a { margin-top:auto; color:var(--green); font-weight:700; font-size:14px; }
.featured a { color:#fff; }
.split-section { padding:88px 0; background:#fff; }
.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.split-grid h2 { font-size:44px; margin-bottom:20px; }
.split-grid p { max-width:500px; color:var(--muted); font-size:17px; }
.number-list { display:flex; flex-direction:column; gap:20px; }
.number-list > div { display:flex; gap:18px; padding:17px 0; border-bottom:1px solid var(--line); }
.number-list b { color:var(--coral); font-size:13px; letter-spacing:.1em; }
.number-list strong, .number-list small { display:block; }
.number-list small { color:var(--muted); margin-top:4px; }
.promo-banner { margin-top:88px; margin-bottom:88px; padding:42px 48px; border-radius:22px; background:var(--coral); color:#fff; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.promo-banner h2 { color:#fff; font-size:34px; }
.promo-banner p { margin:8px 0 0; color:#fff6f3; }
.promo-banner .eyebrow { color:#ffe1d8; }
.faq-section { padding-top:0; }
.faq-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.faq-grid details { padding:20px 22px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.faq-grid summary { cursor:pointer; color:var(--green-dark); font-weight:700; line-height:1.4; }
.faq-grid summary::marker { color:var(--coral); }
.faq-grid p { margin:13px 0 0; color:var(--muted); font-size:14px; }
.domain-note { margin-top:16px; margin-bottom:18px; padding:13px 18px; text-align:center; background:var(--mint); border:1px solid var(--line); border-radius:12px; }
.domain-note p { margin:0; color:var(--muted); font-size:13px; }
.domain-note strong { color:var(--green-dark); font-weight:700; }
.page-hero { background:var(--mint); padding:76px 0 70px; }
.page-hero h1 { font-size:clamp(40px,5vw,66px); }
.page-hero p { max-width:660px; color:var(--muted); font-size:19px; margin:18px 0 0; }
.narrow { max-width:960px; }
.content-grid, .contact-grid, .order-panel, .story-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:start; }
.content-grid h2, .story-grid h2 { font-size:38px; margin-bottom:20px; }
.content-grid .subheading { font-size:27px; margin-top:38px; margin-bottom:10px; }
.steps { list-style:none; padding:0; margin:0; counter-reset:steps; }
.steps li { counter-increment:steps; display:grid; grid-template-columns:42px 1fr; gap:13px; padding:20px 0; border-bottom:1px solid var(--line); }
.steps li:before { content:"0" counter(steps); color:var(--coral); font-weight:800; grid-row:span 2; }
.steps b, .steps span { display:block; grid-column:2; }
.steps span { color:var(--muted); margin-top:5px; }
.info-card, .account-callout { padding:30px; background:var(--mint); border-radius:20px; }
.info-card h3, .account-callout h2 { font-size:25px; margin-bottom:10px; }
.info-card p, .account-callout p { color:var(--muted); }
.story-grid { align-items:center; }
.story-lead { padding:50px 40px; border-radius:24px; background:var(--green-dark); }
.story-lead h2 { color:#fff; font-size:38px; }
.big-cross { display:block; color:#c8eadb; font-size:55px; margin-bottom:30px; }
.story-emblem { display:block; width:112px; height:112px; object-fit:contain; margin:0 0 24px; }
.story-grid p, .legal-copy p { color:var(--muted); font-size:17px; }
.service-list { display:grid; grid-template-columns:1fr 1fr; gap:0 50px; }
.service-list article { display:grid; grid-template-columns:48px 1fr; gap:18px; padding:27px 0; border-bottom:1px solid var(--line); }
.service-list article > span { color:var(--coral); font-weight:800; }
.service-list h2 { font-size:23px; margin-bottom:8px; }
.service-list p { color:var(--muted); margin:0; }
.service-feature { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; margin-bottom:70px; padding-bottom:70px; border-bottom:1px solid var(--line); }
.service-feature img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:22px; box-shadow:14px 16px 0 #c8e5d9; }
.service-feature h2 { font-size:38px; margin-bottom:16px; }
.service-feature p { color:var(--muted); font-size:17px; margin-bottom:24px; }
.promo-grid, .article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.promo-grid article, .article-card { padding:32px; min-height:260px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.promo-grid article:first-child { background:var(--green); color:#fff; border-color:var(--green); }
.promo-grid article:first-child h2, .promo-grid article:first-child p { color:#fff; }
.promo-grid h2, .article-card h2 { font-size:25px; margin:12px 0; }
.promo-grid p, .article-card p { color:var(--muted); }
.promo-grid article:first-child p { color:#d8eee5; }
.promo-grid a, .article-card a, .news-entry a { color:var(--green); font-weight:700; }
.promo-note { display:flex; align-items:center; gap:14px; margin-top:24px; padding:18px 22px; border-radius:14px; background:var(--mint); color:var(--green-dark); }
.promo-note span { color:var(--muted); }
.promo-tag, .article-card > span, .article-date { color:var(--coral); font-size:12px; font-weight:800; letter-spacing:.12em; }
.promo-grid article:first-child .promo-tag { color:#bde7d5; }
.news-entry { padding:32px 0; border-bottom:1px solid var(--line); }
.news-entry h2 { font-size:30px; margin:10px 0; }
.news-entry p { max-width:740px; color:var(--muted); font-size:17px; }
.clean-form { display:flex; flex-direction:column; gap:16px; padding:28px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.clean-form label { color:var(--green-dark); font-weight:700; font-size:14px; }
.clean-form input, .clean-form textarea { display:block; width:100%; margin-top:7px; border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--ink); background:#fcfdfc; font:inherit; }
.clean-form input:focus, .clean-form textarea:focus { outline:2px solid #bde1d3; border-color:var(--green); }
.clean-form small { color:var(--muted); }
.order-contact { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.order-contact span, .contact-label { display:block; color:var(--muted); font-size:13px; }
.order-contact a, .contact-value { color:var(--green); font-size:21px; font-weight:800; }
.contact-details { display:flex; flex-direction:column; gap:28px; }
.contact-value { display:block; margin-top:5px; }
.contact-value:not(a) { font-size:17px; line-height:1.5; }
.rating-note { display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:12px; background:var(--mint); color:var(--green-dark); width:max-content; }
.rating-note strong { font-size:18px; }
.rating-note span { color:var(--muted); font-size:13px; }
.photo-strip { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:58px; }
.photo-strip figure { margin:0; border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line); }
.photo-strip img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.photo-strip figcaption { padding:13px 16px; color:var(--muted); font-size:13px; }
.legal-copy { max-width:800px; }
.legal-copy h2 { font-size:28px; margin-top:36px; }
.legal-copy h2:first-child { margin-top:0; }
.account-form { max-width:520px; margin:0 auto; }
.account-form > a { color:var(--green); font-weight:700; font-size:14px; }
.account-details { max-width:760px; padding-top:0; }
.account-details h2 { font-size:30px; margin-bottom:14px; }
.account-details p, .account-details li { color:var(--muted); }
.account-details ul { padding-left:20px; }
.account-details .text-link { display:inline-block; margin-top:8px; }
.site-footer { padding:60px 0 22px; background:var(--green-dark); color:#cce6dc; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; padding-bottom:42px; }
.footer-brand { display:inline-flex; align-items:center; color:#fff; font-size:20px; font-weight:800; background:#fff; padding:8px 12px; border-radius:12px; }
.footer-logo { display:block; width:220px; height:86px; object-fit:contain; }
.footer-grid p { max-width:300px; color:#a9cec0; }
.footer-grid p strong { color:#e7f5ef; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.footer-grid h3 { color:#fff; font-size:15px; margin-bottom:14px; }
.footer-grid > div > a:not(.footer-brand):not(.footer-cta) { display:block; color:#cce6dc; margin:7px 0; }
.footer-cta { color:#fff; font-weight:700; }
.footer-bottom { padding-top:20px; border-top:1px solid #ffffff22; display:flex; gap:24px; color:#9fc5b7; font-size:13px; }
.footer-bottom a { color:#cce6dc; }
@media (max-width:850px) { .header-main { flex-wrap:wrap; padding:18px 0; } .header-actions { width:100%; justify-content:space-between; } .hero-grid, .split-grid, .content-grid, .contact-grid, .order-panel, .story-grid, .service-feature { grid-template-columns:1fr; gap:35px; } .hero-grid { padding:55px 0; } .hero-card, .hero-photo { justify-self:start; } .card-grid.three, .promo-grid, .article-grid, .faq-grid { grid-template-columns:1fr 1fr; } .service-list { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:580px) { .site-width { width:min(100% - 30px,1160px); } .topbar-inner { padding:8px 0; align-items:flex-start; gap:5px; flex-direction:column; } .header-actions { gap:10px; font-size:13px; } .phone-link { display:none; } .main-nav { gap:20px; } .brand-logo { width:180px; height:68px; } .footer-logo { width:205px; height:78px; } .card-grid.three, .promo-grid, .article-grid, .footer-grid, .photo-strip, .faq-grid { grid-template-columns:1fr; } .section { padding:60px 0; } .section-heading { align-items:flex-start; flex-direction:column; } .section-heading h2, .section > h2, .split-grid h2, .service-feature h2 { font-size:34px; } .promo-banner { margin:55px 15px; padding:30px 24px; flex-direction:column; align-items:flex-start; } .hero-card, .hero-photo { box-shadow:12px 15px 0 #c8e5d9; } .footer-bottom { flex-wrap:wrap; gap:10px 18px; } }